commit b6a0a6110352748bda6d715e715f3c964a944f4b
Author: 김수현 <shkim4@samaneng.com>
Date:   Thu Oct 8 16:58:09 2026 +0900

    Initial commit: HMDesignSystem baseline

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ad49a10
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,17 @@
+node_modules/
+dist/
+storybook-static/
+theme-dist/
+*.tsbuildinfo
+
+# Release/test packages and generated dashboard exports are distributed outside Git.
+*.zip
+**/dist-dashboard/
+
+*.log
+.env
+.env.*
+!.env.example
+
+_local/
+.claude/settings.local.json
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 0000000..c46ff1b
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,30 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+import { readFileSync } from "node:fs"
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: [],
+  // In dev, Vite serves both raw /themes JSON and JSON module imports (?import).
+  // Storybook's static middleware would intercept the imports with application/json.
+  staticDirs: (_, { configType }) => [
+    { from: "../public/fonts", to: "/fonts" },
+    ...(configType === "PRODUCTION" ? [{ from: "../themes", to: "/themes" }] : []),
+  ],
+  managerHead: (head) => `${head}<link rel="icon" href="data:," /><style id="hm-manager-style">${readFileSync(new URL("./manager.css", import.meta.url), "utf8")}</style>`,
+  // changeDetection off: no "new and modified stories" filter or status badges in the sidebar.
+  features: { sidebarOnboardingChecklist: false, changeDetection: false },
+  // Verification Stories (the same sections as a component's representative Story) stay out of the sidebar by default.
+  // They keep their Story IDs and stay reachable by direct URL and the sidebar tag filter.
+  tags: { verification: { defaultFilterSelection: "exclude" } },
+  // Storybook replaces vite.config's `server`, so watcher excludes go here.
+  // _local/ (gitignored work copies, ~20k files) would otherwise make the Vite watcher stall the dev server.
+  viteFinal: (config) => {
+    config.server ??= {}
+    config.server.watch = { ...config.server.watch, ignored: ["**/_local/**", "**/storybook-static/**"] }
+    return config
+  },
+  framework: "@storybook/react-vite",
+}
+
+export default config
+
diff --git a/.storybook/manager-navigation.js b/.storybook/manager-navigation.js
new file mode 100644
index 0000000..d32980a
--- /dev/null
+++ b/.storybook/manager-navigation.js
@@ -0,0 +1,70 @@
+export function decorateHanmacNavigation(api) {
+  let frame;
+  const write = (node, key, value) => {
+    const next = String(value);
+    if (node.getAttribute(key) !== next) node.setAttribute(key, next);
+  };
+  const ancestors = (entry, refId) => {
+    const result = [];
+    const seen = new Set();
+    while (entry?.parent && !seen.has(entry.parent)) {
+      seen.add(entry.parent);
+      entry = api.resolveStory(entry.parent, refId);
+      if (entry) result.push(entry);
+    }
+    return result;
+  };
+  const decorate = () => {
+    frame = undefined;
+    const tree = document.querySelector('#storybook-explorer-tree');
+    if (!tree) return;
+    const selected = api.getCurrentStoryData();
+    const currentParents = new Set(ancestors(selected, selected?.refId).map((item) => item.id));
+    const rows = [...tree.querySelectorAll('[data-item-id]')];
+    const rendered = new Set(rows.map((row) => `${row.dataset.refId}:${row.dataset.itemId}`));
+    const groups = new Map();
+    let section = 0;
+    for (const row of rows) {
+      const refId = row.dataset.refId === 'storybook_internal' ? undefined : row.dataset.refId;
+      const entry = api.resolveStory(row.dataset.itemId, refId);
+      if (!entry) continue;
+      // Visual depth = rendered ancestors. A component with a single story of its own name is hoisted by Storybook (the
+      // story replaces it at depth 1), while the API still reports the story at depth 2.
+      write(row, 'data-hm-depth', ancestors(entry, refId).filter((item) => rendered.has(`${row.dataset.refId}:${item.id}`)).length);
+      write(row, 'data-hm-current-parent', currentParents.has(entry.id) && refId === selected?.refId);
+      if (entry.type === 'root') {
+        write(row, 'data-hm-section', section++);
+        continue;
+      }
+      // A single overlay covers the whole expanded branch, including deeper rows.
+      const branch = [...ancestors(entry, refId).reverse(), entry].find((item) => item.type !== 'root');
+      const owner = rows.find((candidate) => candidate.dataset.itemId === branch?.id && candidate.dataset.refId === row.dataset.refId);
+      const expanded = owner?.querySelector(':scope > button[aria-expanded="true"]');
+      write(row, 'data-hm-group', !!expanded);
+      write(row, 'data-hm-group-start', false);
+      write(row, 'data-hm-group-end', false);
+      if (expanded) {
+        const key = `${row.dataset.refId}:${branch.id}`;
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key).push(row);
+      }
+    }
+    for (const members of groups.values()) {
+      write(members[0], 'data-hm-group-start', true);
+      write(members.at(-1), 'data-hm-group-end', true);
+    }
+  };
+  const schedule = () => { if (frame === undefined) frame = requestAnimationFrame(decorate); };
+  const observer = new MutationObserver(schedule);
+  observer.observe(document.body, {
+    childList: true, subtree: true, attributes: true,
+    attributeFilter: ['data-selected', 'aria-expanded', 'data-item-id'],
+  });
+  schedule();
+  window.addEventListener('pagehide', () => {
+    observer.disconnect();
+    if (frame !== undefined) cancelAnimationFrame(frame);
+  }, { once: true });
+}
+
+
diff --git a/.storybook/manager.css b/.storybook/manager.css
new file mode 100644
index 0000000..e0c1390
--- /dev/null
+++ b/.storybook/manager.css
@@ -0,0 +1,317 @@
+/* Initial Storybook manager mapping from ui_viz. Manager-only; not runtime theme tokens. */
+:root {
+  --font-family-base: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+  --hm-green-default: #123328;
+  --hm-green-light-1: #205241;
+  --hm-green-light-2: #266651;
+  --hm-green-light-3: #249473;
+  --hm-fg-on-green-secondary: #BDDFD4;
+  --color-fg-on-green-primary: #FFFFFF;
+  --color-action-primary: #123328;
+  --color-action-accent-on-green: #FFC600;
+  --color-bg-content: #F5F0E5;
+  --color-bg-surface: #FFFFFF;
+  --effect-text-border-color: rgba(0, 0, 0, .3);
+  --overlay-black-20: rgba(0, 0, 0, .2);
+  --overlay-black-30: rgba(0, 0, 0, .3);
+}
+/* Storybook 10.6 manager only. Source: docs/patterns/dashboard-composition.md §6.
+   The 18px join / inset geometry follows the current LNB specimen, not a new token. */
+@font-face {
+  font-family: 'Hanmac Manager Noto Sans KR';
+  src: url('/fonts/NotoSansKR-variable.ttf') format('truetype');
+  font-weight: 100 900;
+  font-display: swap;
+}
+/* Manager-only alias of the bundled Noto Sans KR asset, followed by the
+   Foundation fallback chain (typography.css) instead of a bare sans-serif. */
+:root {
+  --hm-manager-font: 'Hanmac Manager Noto Sans KR', var(--font-family-base);
+}
+
+/* The Storybook layout panel, outside the sidebar landmark, has a separate
+   border. Removing only the landmark's border leaves a one-device-pixel seam. */
+#root div:has(> div > #storybook-sidebar-region) {
+  border-right: 0;
+}
+
+#storybook-sidebar-region {
+  --hm-manager-join: 18px;
+  color: var(--color-fg-on-green-primary);
+  background: linear-gradient(90deg,
+    var(--hm-green-default) 0%, var(--hm-green-light-1) 30%,
+    var(--hm-green-light-2) 50%, var(--hm-green-light-3) 90%,
+    var(--hm-green-light-2) 100%);
+  border-right: 0;
+  font-family: var(--hm-manager-font);
+}
+#storybook-sidebar-region [data-radix-scroll-area-content] > div {
+  padding: 28px 0 28px 20px;
+}
+/* Keep the native draggable scrollbar in the unused left gutter. The selected
+   item must reach the content edge without a scroll thumb crossing its curves.
+   Radix supplies left/right inline, so only those two positions need priority. */
+#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] {
+  left: 4px !important;
+  right: auto !important;
+  width: 6px;
+  padding: 0;
+}
+#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] > div {
+  background: var(--hm-fg-on-green-secondary);
+}
+#storybook-sidebar-region .sidebar-header {
+  margin: 0 20px 24px 0;
+  padding: 0;
+  color: var(--color-fg-on-green-primary);
+}
+#storybook-sidebar-region .sidebar-header > div a {
+  color: var(--color-fg-on-green-primary);
+  font: 700 20px/30px var(--hm-manager-font);
+  white-space: normal;
+  /* §6 Text Border: brand title keeps the original 1px (no shadow). */
+  -webkit-text-stroke: 1px var(--effect-text-border-color);
+  paint-order: stroke fill;
+}
+#storybook-sidebar-region .sidebar-header button {
+  color: inherit;
+}
+#storybook-sidebar-region [role='search'] {
+  margin-right: 20px;
+  margin-bottom: 24px;
+}
+#storybook-sidebar-region .search-field {
+  min-height: 44px;
+  border: 1px solid var(--hm-fg-on-green-secondary);
+  border-radius: 4px;
+  background: var(--color-bg-surface);
+  color: var(--color-action-primary);
+}
+#storybook-explorer-searchfield {
+  color: var(--color-action-primary);
+  font-family: inherit;
+  font-size: 14px;
+}
+#storybook-sidebar-region [role='search'] > button {
+  color: var(--color-fg-on-green-primary);
+  background: transparent;
+  border-color: var(--hm-fg-on-green-secondary);
+  min-width: 32px;
+  height: 44px;
+}
+#storybook-sidebar-region [role='search'] > button:hover {
+  background: rgba(0, 0, 0, .10);
+}
+
+#storybook-explorer-tree .sidebar-subheading {
+  position: relative;
+  margin: 0;
+  padding: 0 20px 0 0;
+  min-height: 56px;
+  color: var(--hm-fg-on-green-secondary);
+}
+#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0']) {
+  margin-top: 40px;
+}
+#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0'])::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: 0;
+  right: 20px;
+  height: 2px;
+  background: linear-gradient(var(--overlay-black-30) 0 50%, rgba(255,255,255,.4) 50% 100%);
+  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
+}
+#storybook-explorer-tree .sidebar-subheading > button {
+  min-height: 56px;
+  color: inherit;
+  font: 700 16px/28px var(--hm-manager-font);
+  letter-spacing: 0;
+  text-transform: none;
+}
+#storybook-explorer-tree .sidebar-item {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  min-height: 56px;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--color-fg-on-green-primary);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-group='true'] {
+  background: var(--overlay-black-20);
+  box-shadow: inset 1px 0 var(--hm-green-light-2);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-group-start='true'] {
+  border-radius: 8px 0 0 0;
+  box-shadow: inset 1px 1px var(--hm-green-light-2);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-group-end='true'] {
+  border-radius: 0 0 0 8px;
+  padding-bottom: 8px;
+  box-shadow: inset 1px -1px var(--hm-green-light-2);
+}
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+  height: auto;
+  width: 100%;
+  margin: 0;
+  padding: 14px 32px 14px 18px;
+  border: 0;
+  border-radius: 4px 0 0 4px;
+  background: transparent;
+  color: inherit;
+  font: 700 18px/28px var(--hm-manager-font);
+  text-align: left;
+  text-decoration: none;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+#storybook-explorer-tree .sidebar-item[data-hm-depth='2'] > :is(a[id], button[id]:not([data-testid])) {
+  margin-left: 32px;
+  width: calc(100% - 32px);
+}
+#storybook-explorer-tree .sidebar-item[data-hm-depth='3'] > :is(a[id], button[id]:not([data-testid])),
+#storybook-explorer-tree .sidebar-item[data-hm-depth='4'] > :is(a[id], button[id]:not([data-testid])) {
+  margin-left: 44px;
+  width: calc(100% - 44px);
+}
+#storybook-explorer-tree .hm-manager-label {
+  min-width: 0;
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  overflow: visible;
+  text-overflow: clip;
+}
+/* D-093 D-014 (§6 Text Border): non-selected labels, including hover and the
+   yellow current parent, use the specimen's 1.5px border plus lower shadow.
+   Thickness and offset are REVIEW VALUEs. Selected labels carry no effect. */
+#storybook-explorer-tree .sidebar-item[data-selected='false'] .hm-manager-label {
+  -webkit-text-stroke: 1.5px var(--effect-text-border-color);
+  paint-order: stroke fill;
+  text-shadow: 1px 2px 1px var(--effect-text-border-color);
+}
+/* The group chevron carries the same lower shadow (specimen .ref-sidebar-chevron). */
+#storybook-explorer-tree .sidebar-item[data-selected='false'] > button[id]:not([data-testid]) > div:first-child > div > svg {
+  filter: drop-shadow(1px 2px 1px var(--effect-text-border-color));
+}
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child {
+  position: static;
+  flex: 0 0 auto;
+  margin: 0;
+  gap: 8px;
+}
+/* Storybook 10.6.1: the leading wrapper has a direct svg[type] for every
+   menu type (group/component/story/docs), plus a nested untyped chevron
+   only on expandable rows. Remove type glyphs at every depth. */
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child > svg[type] {
+  display: none;
+}
+/* Leaves have no chevron. Remove the now-empty wrapper as a flex item so
+   neither its width nor the row's flex gap reserves an icon slot.
+   The existing depth margins and row padding still supply hierarchy indent. */
+#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child:has(> svg[type]):not(:has(> div > svg)) {
+  display: none;
+}
+/* First-depth leaves still sit inside their root label after losing the icon
+   slot. Deeper rows retain their existing 32px / 44px depth margins. */
+#storybook-explorer-tree .sidebar-item[data-hm-depth='1'] > :is(a[id], button[id]:not([data-testid])):has(> div:first-child > svg[type]):not(:has(> div:first-child > div > svg)) {
+  padding-left: 32px;
+}
+#storybook-explorer-tree .sidebar-item[data-hm-current-parent='true'],
+#storybook-explorer-tree .sidebar-subheading[data-hm-current-parent='true'] {
+  color: var(--color-action-accent-on-green);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='false'] > :is(a[id], button[id]:not([data-testid])):hover {
+  background: rgba(0, 0, 0, .10);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id] {
+  z-index: 1;
+  background: var(--color-bg-content);
+  color: var(--color-action-primary);
+  border-radius: 8px 0 0 8px;
+}
+/* Keep the keyboard skip link without reserving a 1px flex column.
+   That column exposed the green branch background at the selected item's end. */
+#storybook-explorer-tree .sidebar-item > a[href='#storybook-preview-wrapper'] {
+  position: absolute;
+  right: 0;
+  z-index: 4;
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 6px 0 8px -5px var(--overlay-black-30),
+    inset 0 3px 5px -3px var(--overlay-black-20),
+    inset 0 -2px 4px -3px var(--overlay-black-20);
+  mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true']::before,
+#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: var(--hm-manager-join);
+  height: var(--hm-manager-join);
+  z-index: 2;
+  pointer-events: none;
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true']::before {
+  bottom: 100%;
+  background: radial-gradient(circle at top left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
+  top: 100%;
+  background: radial-gradient(circle at bottom left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'][data-hm-group-end='true']::after {
+  top: calc(100% - 8px);
+}
+/* Auxiliary status/create actions are separate from selected row geometry.
+   Hide only these controls; the Story link and native group toggles stay intact. */
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > :is([data-testid='tree-change-status-button'], [data-testid='context-menu']) {
+  display: none;
+}
+#storybook-explorer-tree [data-testid='context-menu'] {
+  color: inherit;
+  right: 4px;
+}
+/* Storybook gives utility buttons an opaque background and a 5px halo.
+   Keep their native behavior, with the same transparent / black-10% LNB states. */
+#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action) {
+  background: transparent;
+  box-shadow: none;
+}
+#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action):is(:hover, [aria-expanded='true']) {
+  background: rgba(0, 0, 0, .10);
+  box-shadow: none;
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] {
+  z-index: 3;
+  color: var(--color-action-primary);
+}
+#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] svg {
+  color: var(--color-action-primary);
+}
+/* Keep the manager preview frame flush without consuming iframe width. */
+main:has(#storybook-preview-wrapper) {
+  border-left: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #storybook-sidebar-region * { scroll-behavior: auto; }
+}
+
+
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 0000000..fef8d37
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,55 @@
+import { createElement } from 'react'
+import { addons } from 'storybook/manager-api'
+import { create } from 'storybook/theming'
+import { decorateHanmacNavigation } from './manager-navigation.js'
+
+// Match the measured Manager content background via its existing CSS variable.
+// Keep mobile navigation, addon tabs,
+// portalled menus and the preview iframe outside this toolbar scope.
+const toolbarStyle = document.createElement('style')
+toolbarStyle.id = 'hm-manager-toolbar-style'
+toolbarStyle.textContent = `
+  .sb-bar[data-testid="sb-preview-toolbar"] {
+    background: var(--color-bg-content);
+    color: #000000;
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"], label, span, p, svg) {
+    color: inherit;
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):hover {
+    background: rgba(0, 0, 0, 0.10);
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):is([aria-checked="true"], [aria-expanded="true"], [aria-selected="true"]) {
+    background: rgba(0, 0, 0, 0.20);
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):focus-visible {
+    outline-color: currentColor;
+  }
+`
+document.head.appendChild(toolbarStyle)
+
+addons.setConfig({
+  layout: {
+    showPanel: false,
+  },
+  theme: create({
+    base: 'light',
+    brandTitle: 'HM Design System',
+    brandUrl: './',
+    brandTarget: '_self',
+    fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",
+    colorPrimary: '#123328',
+    colorSecondary: '#123328',
+    appBg: '#F5F0E5',
+    appContentBg: '#FFFFFF',
+    appPreviewBg: '#FFFFFF',
+    textColor: '#123328',
+    textInverseColor: '#FFFFFF',
+    barSelectedColor: '#123328',
+  }),
+  sidebar: {
+    renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, item.name),
+  },
+})
+
+addons.register('hm/manager-navigation-style', decorateHanmacNavigation)
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 0000000..fb54e21
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,2 @@
+<!-- Match the manager favicon and avoid the browser's implicit /favicon.ico request. -->
+<link rel="icon" href="data:," />
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 0000000..53d0a83
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,67 @@
+import type { Preview } from "@storybook/react-vite"
+import { MINIMAL_VIEWPORTS } from "storybook/viewport"
+import { Toaster } from "@hm-design/ui"
+import { ensurePseudoStates } from "./pseudo-states"
+import { DesignerThemePreview } from "../src/theme/designer-preview"
+import "../src/index.css"
+import "../src/hm-theme.css"
+
+const preview: Preview = {
+  parameters: {
+    layout: "centered",
+    viewport: {
+      options: {
+        // HM QA presets come first; keep Storybook's built-in choices available.
+        hmDesktop1280: { name: "HM Desktop · 1280", styles: { width: "1280px", height: "900px" }, type: "desktop" },
+        hmDesktop1024: { name: "HM Desktop Boundary · 1024", styles: { width: "1024px", height: "900px" }, type: "desktop" },
+        hmMobile1023: { name: "HM Mobile Boundary · 1023", styles: { width: "1023px", height: "900px" }, type: "mobile" },
+        hmMobile390: { name: "HM Mobile · 390", styles: { width: "390px", height: "844px" }, type: "mobile" },
+        ...MINIMAL_VIEWPORTS,
+      },
+    },
+    options: {
+      storySort: {
+        order: [
+          "Foundation",
+          ["Color", "Typography", "Layout"],
+          "Components",
+          [
+            "Form",
+            ["Button", "Input", "Textarea", "Select", "Checkbox", "Radio Group", "Switch", "Slider", "Toggle", "Toggle Group", "Label"],
+            "Navigation",
+            ["Tabs", "Breadcrumb", "Pagination", "Navigation Menu", "Menubar"],
+            "Overlay",
+            ["Dialog", "Alert Dialog", "Sheet", "Drawer", "Dropdown Menu", "Context Menu", "Popover", "Tooltip", "Hover Card"],
+            "Data & Display",
+            ["Card", "Table", "Badge", "Avatar", "Progress", "Skeleton", "Separator", "Aspect Ratio", "Carousel", "Scroll Area"],
+            "Disclosure",
+            ["Accordion", "Collapsible", "Resizable"],
+            "Search & Date",
+            ["Command", "Combobox", "Calendar", "Date Picker"],
+            "Feedback",
+            ["Alert", "Sonner"],
+          ],
+          "Patterns",
+          ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]],
+          "Center Graphic",
+          "*",
+        ],
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      // Lets state Stories pin hover / pressed with data-sb-hover / data-sb-active.
+      ensurePseudoStates()
+      // One Toaster for every Story, the same way an app mounts it once at its root.
+      return (
+        <DesignerThemePreview enabled={!context.title.startsWith("Theme/Runtime Contract")}>
+          <Story />
+          <Toaster />
+        </DesignerThemePreview>
+      )
+    },
+  ],
+}
+
+export default preview
diff --git a/.storybook/pseudo-states.ts b/.storybook/pseudo-states.ts
new file mode 100644
index 0000000..35f7d9f
--- /dev/null
+++ b/.storybook/pseudo-states.ts
@@ -0,0 +1,34 @@
+// Pins :hover and :active visuals for state Stories (Storybook only, never loaded by the app).
+// Every rule that uses :hover or :active is cloned right after itself with the pseudo-class swapped for a
+// data attribute, so cascade order and specificity stay the same. No declaration or value is authored here.
+const HOVER = "data-sb-hover"
+const ACTIVE = "data-sb-active"
+const mirrored = new WeakSet<CSSStyleSheet>()
+
+function mirror(list: CSSStyleSheet | CSSGroupingRule) {
+  for (let i = list.cssRules.length - 1; i >= 0; i--) {
+    const rule = list.cssRules[i]
+    if (rule instanceof CSSStyleRule) {
+      if (/:hover\b|:active\b/.test(rule.selectorText)) {
+        list.insertRule(
+          rule.cssText.replace(/:hover\b/g, `[${HOVER}]`).replace(/:active\b/g, `[${ACTIVE}]`),
+          i + 1,
+        )
+      }
+    } else if ("cssRules" in rule) {
+      mirror(rule as CSSGroupingRule)
+    }
+  }
+}
+
+export function ensurePseudoStates() {
+  for (const sheet of document.styleSheets) {
+    if (mirrored.has(sheet)) continue
+    mirrored.add(sheet)
+    try {
+      mirror(sheet)
+    } catch {
+      // Unreadable (cross-origin) sheet: nothing to mirror.
+    }
+  }
+}
diff --git a/.storybook/qa/LAN-PREVIEW-REPORT.md b/.storybook/qa/LAN-PREVIEW-REPORT.md
new file mode 100644
index 0000000..4ba8524
--- /dev/null
+++ b/.storybook/qa/LAN-PREVIEW-REPORT.md
@@ -0,0 +1,180 @@
+# HMDesignSystem Storybook LAN Preview
+
+Result: **PARTIAL** — same-host LAN Preview is READY. A second physical PC was unavailable, so cross-PC access and cross-PC HMR remain NOT_VERIFIED.
+
+TEMP_STORYBOOK_URL: http://10.13.37.164:6008/
+
+## 1. Worktree
+
+- Path: `D:\디자인시스템\HMDesignSystem-storybook`
+- Branch: `chore/storybook-cleanup`
+- HEAD: `6b4a39e4e9fef7cd706630ffc72b5e97e8696823`
+- Remote: `https://gitea.hmac.kr/b25027/HMDesign.git`
+- Track A Modified: **NO**
+- Track A remains clean on `main`, HEAD `4e2402e6cb3507c4bb5e58549004323db59b66a8`.
+
+## 2. Storybook Server
+
+- Installed binary: Storybook **10.6.1** from Track B node_modules; dependencies already existed, so npm ci was unnecessary.
+- Port: **6008**; Bind: **0.0.0.0**; Server: **RUNNING**
+- LAN listener PID at verification: **23804**
+- Command: `node node_modules/storybook/dist/bin/dispatcher.js dev -p 6008 --host 0.0.0.0 --no-open --disable-telemetry --exact-port`
+- Local: http://localhost:6008/
+- LAN: http://10.13.37.164:6008/
+- Verified current IPv4: **10.13.37.164** (Ethernet 3); this is a temporary LAN address, not a permanent URL.
+- The old LAN process was started on 6007 and had fallen back to 6008. Only that confirmed Track B LAN process was replaced with explicit 6008/exact-port operation. The existing localhost-only Track B process (PID 33604) was preserved; both addresses use the same worktree and matched 289 Story IDs.
+- package.json's official **6007** script was unchanged. Track A and other ports/processes were not stopped.
+- Server stdout/stderr are in ignored `.storybook/qa/lan-preview.*.log` files. PIDs are session observations, not durable shutdown instructions.
+
+## 3. LAN Verification
+
+- localhost: **PASS**, HTTP 200 and Button render
+- LAN IP Same Host: **PASS**, HTTP 200; manager, sidebar, preview, navigation and representative stories loaded
+- SECOND_PHYSICAL_PC: **NOT_VERIFIED**
+- HMR localhost: **PASS**
+- HMR LAN Same Host: **PASS**
+- HMR Second Physical PC: **NOT_VERIFIED**
+- A temporary visible `HM LAN HMR QA` paragraph was inserted into GNB All. Both origins displayed it without reload. Removal was also applied by HMR; the Story file was restored to its exact pre-probe SHA-256. No temporary probe remains.
+- Existing firewall policy was inspected: Public network profile, enabled firewall profiles and pre-existing inbound Node allow rules. Firewall rule additions: **NO**. Network profile changes: **NO**.
+
+## 4. Storybook Chrome
+
+- Top Bar: **#266651 PASS** (`rgb(38, 102, 81)`)
+- Toolbar icon/text: **#FFFFFF PASS** (all sampled button/SVG computed colors were white)
+- Bottom Panel: **DEFAULT_HIDDEN PASS**
+- Alt+A: **PASS**, panel opened with Controls/Actions/Interactions; hidden state restored afterward
+- Preview Rail: **0px PASS**, preview main border-left and padding-left measured 0px
+- Final browser viewport overrides were reset, and a LAN Dashboard tab remains available in Codex.
+
+## 5. Viewports
+
+Measured in Chrome, browser zoom 100%, Storybook zoom 100%, devicePixelRatio 1:
+
+- 1280: **PASS** — iframe / innerWidth 1280; innerHeight 900; GNB nav visible
+- 1024: **PASS** — iframe / innerWidth 1024; innerHeight 900; GNB nav visible; LNB column visible
+- 1023: **PASS** — iframe / innerWidth 1023; innerHeight 900; GNB nav hidden; LNB column hidden and Local mobile bar visible
+- 390: **PASS** — iframe / innerWidth 390; innerHeight 844; mobile UI visible
+- GNB Mobile Menu Open automatically selected 390 × 844 and its Sheet was visible.
+- Existing LNB `hmMobile` preset still selected 390 × 844. Its service-menu Sheet opened successfully, including the nested three-depth menu.
+- **Browser limitation:** the Codex in-app browser had a fractional-width anomaly at the 1023 boundary: rounded innerWidth was 1023 but both max-width 1023 and min-width 1024 media queries returned false. Chrome passed both boundaries. Production CSS and breakpoints were not changed; exact boundary QA should use Chrome.
+
+## 6. Representative Stories
+
+LAN rendering and navigation checks passed for:
+
+- Button: **PASS** — representative variants/sizes/state board
+- GNB: **PASS** — four viewport measurements and mobile menu
+- LNB: **PASS** — representative board, both embedded standalone iframes, desktop/mobile boundary and mobile Sheet
+- Dashboard: **PASS** — current heading, status filter and data table rendered
+- Calendar: **PASS** — single/disabled/range/two-month board
+- Date Picker: **PASS** — empty/selected/format/controlled/size/disabled board
+- Theme Designer: **PASS** — editor/live preview and successful application of `/themes/default.json` and `/themes/service-example.json`; reset to HM Default afterward
+- CENTER: **PASS** — Title compositions and Tunnel reference render
+
+These are targeted rendering/navigation/responsive checks, not a full interaction or accessibility audit of every Story.
+
+## 7. Story Cleanup
+
+- Story Files: **61**; Stories: **289**
+- Hierarchy: **Foundation → Components → Patterns → Center Graphic → Theme**
+- PRIMARY: **65**
+- VERIFICATION: **211**
+- UTILITY: **13** (executable verification, compatibility and playground tools)
+- Proven LEGACY / DUPLICATE: **0**
+- KEEP: **65**; HIDE: **224** through the existing verification filter
+- MERGE_CANDIDATE: **31**, advisory possible overlap with representative boards; all retained
+- DELETE_CANDIDATE: **0**; deleted stories: **0**
+- Full source-defined meta.title, Story export/name and meta/story/custom effective tags: `STORY-INVENTORY.md` and `story-inventory.json`.
+- Framework-injected dev/test/manifest tags are in compiled index.json rather than the source-tag inventory.
+- Before / built / inventory Story IDs: **289 / 289 / 289**, with no missing, added or renamed IDs.
+- LNB `iframe.html?id=patterns-layout-lnb--standalone-desktop` and `--standalone-mobile` references were found and both nested frames rendered.
+- Own Story change: GNB Mobile and Mobile Menu Open now start on global `hmMobile390`. Existing global presets, sorting, verification filtering and LNB 390 configuration were retained.
+
+## 8. Errors
+
+- Console: **no new errors observed** in the representative checks or final LAN tab; no Story not found, manager/addon or HMR errors observed after verification.
+- Network: **no asset 404 observed**. Direct LAN HTTP probes returned 200 for the font, two Theme JSON files, preview CSS, Vite client, manager JS and checked Story modules. LNB nested previews loaded successfully.
+- Known browser warning: Storybook 11 will require PopoverProvider ariaLabel. It was already present in the initial observation.
+- Known build warnings: documentation-example `bg-[var(...)]` CSS optimizer warning, chunks over 500kB, and Vite plugin timing notices. The repository's existing reports already document the CSS/chunk warnings. They did not fail the build.
+- Git emitted LF/CRLF normalization notices; `git diff --check` still passed.
+
+## 9. Validation
+
+- `npm run typecheck`: **PASS**, exit 0; generated Theme defaults matched, both workspace typechecks passed
+- `npm run build-storybook`: **PASS**, exit 0; local ignored `storybook-static/` output only
+- `git diff --check`: **PASS**, exit 0
+- Final integration validation source stability: **PASS**, no TS/TSX/JS/CSS/HTML files changed during the final check window
+- During an earlier validation window, another active task changed Dashboard Story/CSS. Those changes were preserved, and integration checks were rerun against the stable final source state, including the later concurrent changeDetection option in main.ts.
+
+## 10. Parallel Safety
+
+- packages/**: **UNCHANGED** (Production source; git clean for protected paths)
+- themes/**: **UNCHANGED**
+- package.json / package-lock.json: **UNCHANGED**
+- Protected file SHA-256 comparison: **277 files, 0 changes** from this session's baseline
+- Track A: **UNTOUCHED**, clean main and same HEAD
+- Package source edits: **NO**
+- package publish: **NO**; package version changes: **NO**
+- Runtime Theme contract/loader, exports/CSS contract and Gitea CI/CD changes: **NO**
+- Publishing Page QA / Publishing staticDirs / official hosting work: **NOT PERFORMED**
+
+## 11. Git
+
+Own changed/new files:
+
+- `src/patterns/gnb.stories.tsx`
+- `.storybook/qa/generate-inventory.mjs`
+- `.storybook/qa/story-inventory.json`
+- `.storybook/qa/STORY-INVENTORY.md`
+- `.storybook/qa/LAN-PREVIEW.md`
+- `.storybook/qa/LAN-PREVIEW-REPORT.md`
+
+Pre-existing or concurrent changes were preserved: `.storybook/main.ts`, `.storybook/manager.css`, `.storybook/preview.tsx`, `.storybook/preview-head.html`, `src/patterns/dashboard-layout.stories.tsx`, its Story-only CSS, `src/theme/designer-theme.stories.tsx`, and the six files in `src/foundation/`.
+
+- Commit: **NOT CREATED**
+- Merge: **NOT PERFORMED**
+- Rebase / cherry-pick: **NOT PERFORMED**
+- No automatic main integration or push was performed.
+
+## 12. Status
+
+- LAN TEMP PREVIEW: **READY** for Storybook cleanup and same-host LAN QA
+- Official Static Hosting: **NOT CONFIGURED** by this batch
+- This URL is an official deployment URL: **NO**
+- Other physical PCs can be declared verified: **NO**, pending actual cross-PC access
+
+## Required answers
+
+1. Storybook Worktree execution: **YES**, Track B.
+2. Execution on main: **NO**.
+3. 6008 bound to 0.0.0.0: **YES**.
+4. localhost:6008 opens: **YES**.
+5. 10.13.37.164:6008 opens on the same PC: **YES**.
+6. Opens from another physical PC: **NOT_VERIFIED**.
+7. Missing cross-PC verification explicitly marked: **YES**.
+8. Top Bar #266651 maintained: **YES**.
+9. Toolbar icon/text white: **YES**.
+10. Bottom panel default hidden: **YES**.
+11. Preview rail 0px: **YES**.
+12. 1280 preset available and measured: **YES**.
+13. 1024 preset available and measured: **YES**.
+14. 1023 preset available and measured: **YES**.
+15. 390 preset available and measured: **YES**.
+16. GNB/LNB 1024→1023 transition: **PASS in Chrome**, in-app-browser caveat above.
+17. Story HMR works: **YES**.
+18. Same-host LAN receives HMR changes: **YES**; cross-PC HMR **NOT_VERIFIED**.
+19. New console errors observed: **NO**.
+20. Asset 404 observed: **NO** in checked resources/screens.
+21. Track A modified: **NO**.
+22. Package source modified: **NO**.
+23. Package publish repeated: **NO**.
+24. Official deployment URL: **NO**.
+25. Current preview usable for Storybook cleanup: **YES**; second physical PC validation remains outstanding.
+
+## Time tracking (Asia/Seoul)
+
+- Started At: 2026-10-07 15:31:24 KST
+- Completed At: 2026-10-07 15:56:10 KST
+- Actual Duration: 24분 46초
+- Estimated Duration: 35~50분
+- Variance: 예상보다 10분 14초 ~ 25분 14초 짧음
diff --git a/.storybook/qa/LAN-PREVIEW.md b/.storybook/qa/LAN-PREVIEW.md
new file mode 100644
index 0000000..7c2d046
--- /dev/null
+++ b/.storybook/qa/LAN-PREVIEW.md
@@ -0,0 +1,78 @@
+# Track B temporary Storybook LAN preview
+
+Purpose: **TEMPORARY INTERNAL LAN PREVIEW / LAN TEMP PREVIEW** for Storybook cleanup. This is a development server with HMR, not official static hosting or a permanent URL.
+
+- Worktree: `D:\디자인시스템\HMDesignSystem-storybook`
+- Branch: `chore/storybook-cleanup`
+- Port: `6008`; bind: `0.0.0.0`
+- TEMP_STORYBOOK_URL: http://10.13.37.164:6008/
+- Local: http://localhost:6008/
+- IPv4 `10.13.37.164` was verified on 2026-10-07. Recheck it before later sharing; do not assume a fixed address.
+
+## Start and inspect
+
+Run from Track B in PowerShell:
+
+```powershell
+Set-Location -LiteralPath 'D:\디자인시스템\HMDesignSystem-storybook'
+git status -sb
+git branch --show-current
+git rev-parse HEAD
+# Only when node_modules is absent:
+# npm ci
+.\node_modules\.bin\storybook.cmd dev -p 6008 --host 0.0.0.0 --no-open --disable-telemetry --exact-port
+```
+
+The installed Storybook binary is version 10.6.1. `--exact-port` prevents silent fallback to another port. The official package.json script stays on 6007. Do not use that script without overriding the port for Track B. If 6008 is occupied, identify its process before stopping or replacing it.
+
+```powershell
+Get-NetIPAddress -AddressFamily IPv4
+Get-NetTCPConnection -State Listen -LocalPort 6008 |
+  Select-Object LocalAddress, LocalPort, OwningProcess
+# For a known PID from the result:
+# Get-CimInstance Win32_Process -Filter 'ProcessId=<PID>' |
+#   Select-Object ProcessId, CommandLine
+```
+
+Keep the server running while the preview is in use. For shutdown, stop only the confirmed Track B listener (Ctrl+C in its owning terminal, or its identified PID). Do not stop other tracks or other Node processes.
+
+The 2026-10-07 session reused an existing localhost-only Track B listener and replaced only the LAN listener with an explicit 6008 command. Thus localhost and LAN may be served by different processes using the same Track B source. Verify both addresses after subsequent changes.
+
+## QA viewports
+
+Use Chrome at browser zoom 100% and Storybook zoom 100%. Select a preset from the toolbar; use enough browser height to avoid clipping the configured iframe height.
+
+- HM Desktop · 1280: 1280 × 900
+- HM Desktop Boundary · 1024: 1024 × 900; Desktop GNB/LNB
+- HM Mobile Boundary · 1023: 1023 × 900; Mobile GNB/LNB
+- HM Mobile · 390: 390 × 844
+
+These are QA presets, not production breakpoint changes. GNB Mobile and Mobile Menu Open start at the shared `hmMobile390` preset. LNB's existing `hmMobile` 390 × 844 preset and direct iframe Story IDs remain intact.
+
+The Codex in-app browser showed a fractional-width boundary anomaly at 1023: `innerWidth` rounded to 1023 while both `(max-width: 1023px)` and `(min-width: 1024px)` were false. Chrome at devicePixelRatio 1 passed the exact boundary. Use Chrome for these two boundary checks; do not compensate by changing Production CSS.
+
+## Hierarchy and classification
+
+The sidebar order remains Foundation → Components → Patterns → Center Graphic → Theme. Existing `verification` filtering hides QA/tool stories by default while preserving direct URLs and tag-filter access.
+
+Refresh the full inventory from Track B:
+
+```powershell
+node .storybook/qa/generate-inventory.mjs
+```
+
+See `STORY-INVENTORY.md` and `story-inventory.json`. The helper uses the installed Storybook 10.6.1 CSF parser and reads every `src/**/*.stories.ts(x)` file. Tags in this inventory are source-defined meta/story tags; framework-generated dev/test/manifest tags are available in Storybook's index.json.
+
+KEEP and HIDE describe current navigation. MERGE_CANDIDATE is an advisory review flag, not a removal decision. The current batch does not delete stories or rename titles/exports/IDs. Confirm equivalent QA coverage and search references before future merging or deletion.
+
+## Preserve the boundary
+
+All edits must stay in Storybook configuration, stories, or Storybook-only helpers/layout/documentation. Do not modify Track A, packages, themes, Runtime Theme contracts/loaders, package exports/CSS contracts, package versions, publishing, CI/CD, staticDirs for Publishing, or official hosting. Do not merge, rebase, or cherry-pick this batch into main.
+
+For each completed cleanup batch, run typecheck, build-storybook, and git diff --check against the final source state. Build outputs are validation artifacts, not a deployment.
+
+## LAN verification
+
+Same-host LAN IP success does not prove access from another physical PC. On a second physical PC, check manager/sidebar/preview, fonts/themes/assets, navigation and HMR. Until then record **SECOND_PHYSICAL_PC: NOT_VERIFIED**.
+
+The current network profile was Public, with firewall profiles enabled and pre-existing inbound Node allow rules. No firewall rule or network profile was changed. If a second PC cannot connect, diagnose routing, client isolation and existing firewall policy; do not automatically add rules or change profiles.
diff --git a/.storybook/qa/STORY-INVENTORY.md b/.storybook/qa/STORY-INVENTORY.md
new file mode 100644
index 0000000..60ed74f
--- /dev/null
+++ b/.storybook/qa/STORY-INVENTORY.md
@@ -0,0 +1,614 @@
+# Internal Story inventory (ZIP excluded)
+
+Current references reconciled against the running Storybook index (288 entries). The historical Track B generator is not a recipient tool; this QA record is excluded from the test ZIP.
+
+This is a classification record. No Story IDs, exports or titles are renamed. HIDE uses the existing verification filter, not deletion. MERGE_CANDIDATE is advisory and can coexist with HIDE. Utility includes executable checks and compatibility/playground tools. No legacy or delete candidate is asserted without evidence.
+
+## Summary
+
+- PRIMARY: 65
+- VERIFICATION: 210
+- UTILITY: 13
+- LEGACY / DUPLICATE: 0
+- KEEP: 65
+- HIDE: 223
+- MERGE_CANDIDATE: 31
+- DELETE_CANDIDATE: 0
+- Story files: 61
+- Stories: 288
+- Hierarchy: Foundation → Components → Patterns → Center Graphic → Theme
+
+## Full inventory
+
+### Center Graphic/Facility
+
+Source: `src/center/center-facility.stories.tsx`; meta.tags: []
+
+- Tunnel — 터널; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Bridge — 교량; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Intersection — 교차로; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Junction — 분기점; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Interchange — 나들목; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Roadside — 휴게소 · 졸음쉼터; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Linked — 연계 시설물; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- TunnelPlayground — 직접 테스트 (터널); tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Center Graphic/Information
+
+Source: `src/center/center-information.stories.tsx`; meta.tags: []
+
+- Information — Information; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Center Graphic/Overview
+
+Source: `src/center/center-overview.stories.tsx`; meta.tags: []
+
+- Overview — Overview; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Center Graphic/Spatial
+
+Source: `src/center/center-spatial.stories.tsx`; meta.tags: []
+
+- Spatial — Spatial; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Center Graphic/Title
+
+Source: `src/center/center-title.stories.tsx`; meta.tags: []
+
+- Compositions — Title; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Disclosure/Accordion
+
+Source: `src/components/accordion.stories.tsx`; meta.tags: []
+
+- All — Accordion; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Single — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Multiple — Multiple; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Alert Dialog
+
+Source: `src/components/alert-dialog.stories.tsx`; meta.tags: []
+
+- All — Alert Dialog; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- ConfirmationOpen — Confirmation; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DestructiveOpen — Destructive; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Feedback/Alert
+
+Source: `src/components/alert.stories.tsx`; meta.tags: []
+
+- All — Alert; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Destructive — Destructive; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Aspect Ratio
+
+Source: `src/components/aspect-ratio.stories.tsx`; meta.tags: []
+
+- All — Aspect Ratio; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Wide — 16:9; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Square — 1:1; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Avatar
+
+Source: `src/components/avatar.stories.tsx`; meta.tags: []
+
+- All — Avatar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Image — Image; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- FallbackError — Fallback; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Badge
+
+Source: `src/components/badge.stories.tsx`; meta.tags: []
+
+- All — Badge; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Variants — Variants; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Breadcrumb
+
+Source: `src/components/breadcrumb.stories.tsx`; meta.tags: []
+
+- All — Breadcrumb; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Basic3 — Basic; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithEllipsis — Ellipsis; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongPath — Long Path; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Button
+
+Source: `src/components/button.stories.tsx`; meta.tags: []
+
+- All — Button; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Roles — Roles; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Sizes — Sizes; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- States — Brand States; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- StandardStates — Standard States; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabel — Long Label; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- KoreanLabels — Korean Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- IconTextNarrow — Icon Text Narrow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Destructive — Destructive; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Compatibility — Compatibility; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Calendar
+
+Source: `src/components/calendar.stories.tsx`; meta.tags: []
+
+- All — Calendar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- SingleSelection — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DisabledSelection — Disabled Dates; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- RangeSelection — Range; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Card
+
+Source: `src/components/card.stories.tsx`; meta.tags: []
+
+- All — Card; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Surfaces — Surfaces; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Action — Action; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Compatibility — Compatibility; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Carousel
+
+Source: `src/components/carousel.stories.tsx`; meta.tags: []
+
+- All — Carousel; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- BasicCarousel — Basic; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MultipleItems — Multiple Items; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LoopCarousel — Loop; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- VerticalCarousel — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Checkbox
+
+Source: `src/components/checkbox.stories.tsx`; meta.tags: []
+
+- All — Checkbox; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Unchecked — Unchecked; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Checked — Checked; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Indeterminate — Indeterminate; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Disclosure/Collapsible
+
+Source: `src/components/collapsible.stories.tsx`; meta.tags: []
+
+- All — Collapsible; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Closed — Closed; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Combobox
+
+Source: `src/components/combobox.stories.tsx`; meta.tags: []
+
+- All — Combobox; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- EmptyCombobox — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ControlledCombobox — Controlled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongOption — Long Option; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenBottom — Open Bottom; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenTop — Open Top; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Command
+
+Source: `src/components/command.stories.tsx`; meta.tags: []
+
+- All — Command; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Search — Search; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- GroupedList — Grouped; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Context Menu
+
+Source: `src/components/context-menu.stories.tsx`; meta.tags: []
+
+- All — Context Menu; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Search & Date/Date Picker
+
+Source: `src/components/date-picker.stories.tsx`; meta.tags: []
+
+- All — Date Picker; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- EmptyPicker — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- InvalidFocus — Invalid Focus; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedPicker — Selected; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ControlledPicker — Controlled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Dialog
+
+Source: `src/components/dialog.stories.tsx`; meta.tags: []
+
+- All — Dialog; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContentOpen — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WideContentOpen — Wide Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- BodyScrollOpen — Body Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DeleteConfirmationOpen — Delete Confirmation; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Drawer
+
+Source: `src/components/drawer.stories.tsx`; meta.tags: []
+
+- All — Drawer; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Form — Form; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Dropdown Menu
+
+Source: `src/components/dropdown-menu.stories.tsx`; meta.tags: []
+
+- All — Dropdown Menu; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Hover Card
+
+Source: `src/components/hover-card.stories.tsx`; meta.tags: []
+
+- All — Hover Card; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Input
+
+Source: `src/components/input.stories.tsx`; meta.tags: []
+
+- All — Input; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- InvalidFocus — Invalid Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ErrorMessage — Error Message; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Required — Required; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Readonly — Readonly; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Sizes — Compare Sizes; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Small — Small; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Medium — Medium; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Large — Large; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Label
+
+Source: `src/components/label.stories.tsx`; meta.tags: []
+
+- All — Label; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Components/Navigation/Menubar
+
+Source: `src/components/menubar.stories.tsx`; meta.tags: []
+
+- All — Menubar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- TriggerFocus — Trigger Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenFocus — Open Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Navigation Menu
+
+Source: `src/components/navigation-menu.stories.tsx`; meta.tags: []
+
+- All — Navigation Menu; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- NoViewport — No Viewport; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- IndicatorAlignment — Indicator Alignment; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Pagination
+
+Source: `src/components/pagination.stories.tsx`; meta.tags: []
+
+- All — Pagination; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- FirstPage — First Page; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LastPage — Last Page; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongRange — Long Range; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Popover
+
+Source: `src/components/popover.stories.tsx`; meta.tags: []
+
+- All — Popover; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Progress
+
+Source: `src/components/progress.stories.tsx`; meta.tags: []
+
+- All — Progress; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Zero — Zero; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Middle — Middle; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Full — Full; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- NonDefaultMax — Non Default Max; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Radio Group
+
+Source: `src/components/radio-group.stories.tsx`; meta.tags: []
+
+- All — Radio Group; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Vertical — Vertical; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Horizontal — Horizontal; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Disclosure/Resizable
+
+Source: `src/components/resizable.stories.tsx`; meta.tags: []
+
+- All — Resizable; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- HorizontalLayout — Horizontal; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- VerticalLayout — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MinMaxLayout — Min Max; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Scroll Area
+
+Source: `src/components/scroll-area.stories.tsx`; meta.tags: []
+
+- All — Scroll Area; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- VerticalScroll — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- HorizontalScroll — Horizontal; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Select
+
+Source: `src/components/select.stories.tsx`; meta.tags: []
+
+- All — Select; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- InvalidFocus — Invalid Focus; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Selected — Selected; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Sizes — Compare Sizes; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Medium — Medium; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Large — Large; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenLargeShort — Open Large Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenMediumLong — Open Medium Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenLargeLong — Open Large Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenTop — Open Top; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- OpenTopLong — Open Top Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ListSizeComparison — Medium Trigger / List Size Comparison; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Scroll — Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Separator
+
+Source: `src/components/separator.stories.tsx`; meta.tags: []
+
+- All — Separator; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Horizontal — Horizontal; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Vertical — Vertical; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+
+### Components/Overlay/Sheet
+
+Source: `src/components/sheet.stories.tsx`; meta.tags: []
+
+- All — Sheet; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Right — Right; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Left — Left; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Top — Top; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Bottom — Bottom; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Form — Form; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Data & Display/Skeleton
+
+Source: `src/components/skeleton.stories.tsx`; meta.tags: []
+
+- All — Skeleton; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Text — Text; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- CardList — Card List; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Slider
+
+Source: `src/components/slider.stories.tsx`; meta.tags: []
+
+- All — Slider; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- SingleValue — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- RangeValue — Range; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DisabledSlider — Disabled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Feedback/Sonner
+
+Source: `src/components/sonner.stories.tsx`; meta.tags: []
+
+- All — Sonner; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Components/Form/Switch
+
+Source: `src/components/switch.stories.tsx`; meta.tags: []
+
+- All — Switch; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Off — Off; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- On — On; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+
+### Components/Data & Display/Table
+
+Source: `src/components/table.stories.tsx`; meta.tags: []
+
+- All — Table; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Basic — Basic; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Selected — Selected; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongText — Long Text; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Overflow — Horizontal Overflow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Navigation/Tabs
+
+Source: `src/components/tabs.stories.tsx`; meta.tags: []
+
+- All — Tabs; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Secondary — Secondary; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedFirst — Selected First; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedLast — Selected Last; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Overflow — Overflow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SecondaryOverflow — Secondary Overflow; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabel — Long Label; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Textarea
+
+Source: `src/components/textarea.stories.tsx`; meta.tags: []
+
+- All — Textarea; tags: ["play-fn"]; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Focus — Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Error — Error; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- InvalidFocus — Invalid Focus; tags: ["verification","play-fn"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ErrorMessage — Error Message; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Required — Required; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Readonly — Readonly; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Disabled — Disabled; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Playground — Playground; tags: ["verification"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Toggle Group
+
+Source: `src/components/toggle-group.stories.tsx`; meta.tags: []
+
+- All — Toggle Group; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- SingleSelection — Single; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MultipleSelection — Multiple; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- VerticalGroup — Vertical; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ContentNodes — Content Nodes; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Form/Toggle
+
+Source: `src/components/toggle.stories.tsx`; meta.tags: []
+
+- All — Toggle; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- States — States; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- IconOnly — Icon Only; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- DisabledToggle — Disabled; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ContentNodes — Content Nodes; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Components/Overlay/Tooltip
+
+Source: `src/components/tooltip.stories.tsx`; meta.tags: []
+
+- All — Tooltip; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Open — Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Foundation/Color
+
+Source: `src/foundation/color.stories.tsx`; meta.tags: []
+
+- All — Color; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Foundation/Layout
+
+Source: `src/foundation/layout.stories.tsx`; meta.tags: []
+
+- All — Layout; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Foundation/Typography
+
+Source: `src/foundation/typography.stories.tsx`; meta.tags: []
+
+- All — Typography; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Patterns/Layout/Dashboard
+
+Source: `src/patterns/dashboard-layout.stories.tsx`; meta.tags: []
+
+- All — Dashboard; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- WithSidebar — Dashboard Header + Sidebar; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevel — Third Level; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SidebarOnly — Dashboard Sidebar; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongContent — Long Content; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Loading — Loading; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Empty — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Framed — Framed; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Data/Data Table
+
+Source: `src/patterns/data-table.stories.tsx`; meta.tags: []
+
+- All — Data Table; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- WithFilterBarStory — With Filter Bar; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Loading — Loading; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Empty — Empty; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Data/Filter Bar
+
+Source: `src/patterns/filter-bar.stories.tsx`; meta.tags: []
+
+- All — Filter Bar; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+
+### Patterns/Layout/GNB
+
+Source: `src/patterns/gnb.stories.tsx`; meta.tags: []
+
+- All — GNB; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Sticky — Sticky; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- NavigationMenuOpen — Navigation Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ShortDepthOpen — Short Depth Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- RightEdgeLongDepth — Right Edge Long Depth; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- FirstDepthShort — First Depth Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- FirstDepthLong — First Depth Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MiddleDepthShort — Middle Depth Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MiddleDepthLong — Middle Depth Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LastDepthShort — Last Depth Short; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LastDepthLong — Last Depth Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- EdgeFirstLong — Edge First Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- EdgeLastLong — Edge Last Long; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- UserMenuOpen — User Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabels — Long Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithLogo — With Logo; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Utilities — Utilities; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Mobile — Mobile; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- MobileMenuOpen — Mobile Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Layout/LNB
+
+Source: `src/patterns/lnb.stories.tsx`; meta.tags: []
+
+- All — LNB; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Default — Default; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Selected — Selected; tags: ["verification"]; VERIFICATION; HIDE; MERGE_CANDIDATE. Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.
+- Expanded — Expanded; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- SelectedChild — Selected Child; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- CollapsedWithSelection — Collapsed With Selection; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithLogo — With Logo; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LongLabels — Long Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Scroll — Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevel — Third Level; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevelLongLabels — Third Level Long Labels; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- ThirdLevelScroll — Third Level Scroll; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- WithGNB — With GNB; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- StandaloneDesktop — LNB Standalone Desktop; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- LNBProfileMenuOpen — LNB Profile Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- StandaloneMobile — LNB Standalone Mobile; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- StandaloneMobileMenuOpen — LNB Standalone Mobile Menu Open; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Patterns/Layout/Loading Screen
+
+Source: `src/patterns/loading-screen.stories.tsx`; meta.tags: []
+
+- All — Loading Screen; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- Inline — Inline; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Theme/Designer Playground
+
+Source: `src/theme/designer-theme.stories.tsx`; meta.tags: []
+
+- Editor — Designer Playground; tags: []; PRIMARY; KEEP. Representative story or distinct reference page.
+- LiveVerification — Live Verification; tags: ["verification","play-fn"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Theme/Runtime Contract/Loader
+
+Source: `src/theme/runtime-loader.stories.tsx`; meta.tags: ["verification"]
+
+- CdnVerification — Cdn Verification; tags: ["verification","play-fn"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+
+### Theme/Runtime Contract
+
+Source: `src/theme/runtime-theme.stories.tsx`; meta.tags: ["verification"]
+
+- Comparison — Comparison; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- GlobalExternal — Global External; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Verification — Verification; tags: ["verification","play-fn"]; UTILITY; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
+- Dashboard — Dashboard; tags: ["verification"]; VERIFICATION; HIDE. Keep direct URL and tag-filter access; excluded from default sidebar.
diff --git a/.storybook/qa/generate-inventory.mjs b/.storybook/qa/generate-inventory.mjs
new file mode 100644
index 0000000..8511d8c
--- /dev/null
+++ b/.storybook/qa/generate-inventory.mjs
@@ -0,0 +1,38 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { loadCsf } from 'storybook/internal/csf-tools'
+
+// Run from the Track B root: node .storybook/qa/generate-inventory.mjs
+// Only writes Storybook documentation; never renames or removes stories.
+const root = process.cwd()
+if (path.basename(root) !== 'HMDesignSystem-storybook') throw new Error('Run only from Track B')
+const walk = dir => fs.readdirSync(dir, { withFileTypes: true }).flatMap(e => e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)])
+const files = walk(path.join(root, 'src')).filter(f => /\.stories\.tsx?$/.test(f)).sort()
+const inventory = files.map(file => {
+  const csf = loadCsf(fs.readFileSync(file, 'utf8'), { makeTitle: title => title }).parse()
+  const title = csf.meta.title
+  if (!title) throw new Error(`Missing meta.title: ${file}`)
+  const metaTags = csf.meta.tags ?? []
+  const stories = Object.entries(csf._stories).map(([exportName, story]) => {
+    const storyTags = story.tags ?? []
+    const effectiveTags = [...new Set([...metaTags, ...storyTags])]
+    const utility = /Playground|Compatibility/.test(exportName) || /Verification$/.test(exportName) || exportName === 'Verification'
+    const category = utility ? 'UTILITY' : effectiveTags.includes('verification') ? 'VERIFICATION' : 'PRIMARY'
+    const duplicateCandidate = effectiveTags.includes('verification') && /^(Default|Sizes|Roles|Variants|States|Basic|Selected|Disabled|Horizontal|Vertical)$/.test(exportName)
+    return { id: story.id, exportName, name: story.name, storyTags, effectiveTags, category, decision: effectiveTags.includes('verification') ? 'HIDE' : 'KEEP', candidate: duplicateCandidate ? 'MERGE_CANDIDATE' : null, reason: duplicateCandidate ? 'Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed.' : effectiveTags.includes('verification') ? 'Keep direct URL and tag-filter access; excluded from default sidebar.' : 'Representative story or distinct reference page.' }
+  })
+  return { file: path.relative(root, file).replaceAll('\\', '/'), title, metaTags, stories }
+})
+const all = inventory.flatMap(f => f.stories)
+const summary = { storyFiles: files.length, stories: all.length, categories: Object.fromEntries(['PRIMARY', 'VERIFICATION', 'UTILITY', 'LEGACY / DUPLICATE'].map(c => [c, all.filter(s => s.category === c).length])), decisions: Object.fromEntries(['KEEP', 'HIDE', 'MERGE_CANDIDATE', 'DELETE_CANDIDATE'].map(c => [c, all.filter(s => s.decision === c || s.candidate === c).length])), hierarchy: ['Foundation', 'Components', 'Patterns', 'Center Graphic', 'Theme'] }
+const output = path.join(root, '.storybook', 'qa')
+fs.mkdirSync(output, { recursive: true })
+fs.writeFileSync(path.join(output, 'story-inventory.json'), JSON.stringify({ summary, inventory }, null, 2) + '\n')
+const lines = ['# Track B Story inventory', '', 'Generated from every `src/**/*.stories.ts(x)` using the installed Storybook CSF parser. Run `node .storybook/qa/generate-inventory.mjs` from Track B to refresh.', '', 'This is a classification record. No Story IDs, exports or titles are renamed. HIDE uses the existing verification filter, not deletion. MERGE_CANDIDATE is advisory and can coexist with HIDE. Utility includes executable checks and compatibility/playground tools. No legacy or delete candidate is asserted without evidence.', '', '## Summary', '', ...Object.entries(summary.categories).map(([k,v]) => `- ${k}: ${v}`), ...Object.entries(summary.decisions).map(([k,v]) => `- ${k}: ${v}`), `- Story files: ${summary.storyFiles}`, `- Stories: ${summary.stories}`, `- Hierarchy: ${summary.hierarchy.join(' → ')}`, '', '## Full inventory', '']
+for (const f of inventory) {
+  lines.push(`### ${f.title}`, '', `Source: \`${f.file}\`; meta.tags: ${JSON.stringify(f.metaTags)}`, '')
+  for (const s of f.stories) lines.push(`- ${s.exportName} — ${s.name}; tags: ${JSON.stringify(s.effectiveTags)}; ${s.category}; ${s.decision}${s.candidate ? `; ${s.candidate}` : ''}. ${s.reason}`)
+  lines.push('')
+}
+fs.writeFileSync(path.join(output, 'STORY-INVENTORY.md'), lines.join('\n'))
+console.log(JSON.stringify(summary))
diff --git a/.storybook/qa/story-inventory.json b/.storybook/qa/story-inventory.json
new file mode 100644
index 0000000..0d28449
--- /dev/null
+++ b/.storybook/qa/story-inventory.json
@@ -0,0 +1,4556 @@
+{
+  "summary": {
+    "storyFiles": 61,
+    "stories": 288,
+    "categories": {
+      "PRIMARY": 65,
+      "VERIFICATION": 210,
+      "UTILITY": 13,
+      "LEGACY / DUPLICATE": 0
+    },
+    "decisions": {
+      "KEEP": 65,
+      "HIDE": 223,
+      "MERGE_CANDIDATE": 31,
+      "DELETE_CANDIDATE": 0
+    },
+    "hierarchy": [
+      "Foundation",
+      "Components",
+      "Patterns",
+      "Center Graphic",
+      "Theme"
+    ]
+  },
+  "inventory": [
+    {
+      "file": "src/center/center-facility.stories.tsx",
+      "title": "Center Graphic/Facility",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "center-graphic-facility--tunnel",
+          "exportName": "Tunnel",
+          "name": "터널",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-facility--bridge",
+          "exportName": "Bridge",
+          "name": "교량",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-facility--intersection",
+          "exportName": "Intersection",
+          "name": "교차로",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-facility--junction",
+          "exportName": "Junction",
+          "name": "분기점",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-facility--interchange",
+          "exportName": "Interchange",
+          "name": "나들목",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-facility--roadside",
+          "exportName": "Roadside",
+          "name": "휴게소 · 졸음쉼터",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-facility--linked",
+          "exportName": "Linked",
+          "name": "연계 시설물",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-facility--tunnel-playground",
+          "exportName": "TunnelPlayground",
+          "name": "직접 테스트 (터널)",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/center/center-information.stories.tsx",
+      "title": "Center Graphic/Information",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "center-graphic-information--information",
+          "exportName": "Information",
+          "name": "Information",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/center/center-overview.stories.tsx",
+      "title": "Center Graphic/Overview",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "center-graphic-overview--overview",
+          "exportName": "Overview",
+          "name": "Overview",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/center/center-spatial.stories.tsx",
+      "title": "Center Graphic/Spatial",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "center-graphic-spatial--spatial",
+          "exportName": "Spatial",
+          "name": "Spatial",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/center/center-title.stories.tsx",
+      "title": "Center Graphic/Title",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "center-graphic-title--compositions",
+          "exportName": "Compositions",
+          "name": "Title",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "center-graphic-title--playground",
+          "exportName": "Playground",
+          "name": "Playground",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/accordion.stories.tsx",
+      "title": "Components/Disclosure/Accordion",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-disclosure-accordion--all",
+          "exportName": "All",
+          "name": "Accordion",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-disclosure-accordion--single",
+          "exportName": "Single",
+          "name": "Single",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-disclosure-accordion--multiple",
+          "exportName": "Multiple",
+          "name": "Multiple",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-disclosure-accordion--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-disclosure-accordion--long-content",
+          "exportName": "LongContent",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/alert-dialog.stories.tsx",
+      "title": "Components/Overlay/Alert Dialog",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-alert-dialog--all",
+          "exportName": "All",
+          "name": "Alert Dialog",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-alert-dialog--confirmation-open",
+          "exportName": "ConfirmationOpen",
+          "name": "Confirmation",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-alert-dialog--destructive-open",
+          "exportName": "DestructiveOpen",
+          "name": "Destructive",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/alert.stories.tsx",
+      "title": "Components/Feedback/Alert",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-feedback-alert--all",
+          "exportName": "All",
+          "name": "Alert",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-feedback-alert--default",
+          "exportName": "Default",
+          "name": "Default",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-feedback-alert--destructive",
+          "exportName": "Destructive",
+          "name": "Destructive",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/aspect-ratio.stories.tsx",
+      "title": "Components/Data & Display/Aspect Ratio",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-aspect-ratio--all",
+          "exportName": "All",
+          "name": "Aspect Ratio",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-aspect-ratio--wide",
+          "exportName": "Wide",
+          "name": "16:9",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-aspect-ratio--square",
+          "exportName": "Square",
+          "name": "1:1",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/avatar.stories.tsx",
+      "title": "Components/Data & Display/Avatar",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-avatar--all",
+          "exportName": "All",
+          "name": "Avatar",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-avatar--image",
+          "exportName": "Image",
+          "name": "Image",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-avatar--fallback-error",
+          "exportName": "FallbackError",
+          "name": "Fallback",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/badge.stories.tsx",
+      "title": "Components/Data & Display/Badge",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-badge--all",
+          "exportName": "All",
+          "name": "Badge",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-badge--variants",
+          "exportName": "Variants",
+          "name": "Variants",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-data-display-badge--playground",
+          "exportName": "Playground",
+          "name": "Playground",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/breadcrumb.stories.tsx",
+      "title": "Components/Navigation/Breadcrumb",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-navigation-breadcrumb--all",
+          "exportName": "All",
+          "name": "Breadcrumb",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-navigation-breadcrumb--basic-3",
+          "exportName": "Basic3",
+          "name": "Basic",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-breadcrumb--with-ellipsis",
+          "exportName": "WithEllipsis",
+          "name": "Ellipsis",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-breadcrumb--long-path",
+          "exportName": "LongPath",
+          "name": "Long Path",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/button.stories.tsx",
+      "title": "Components/Form/Button",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-button--all",
+          "exportName": "All",
+          "name": "Button",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-button--roles",
+          "exportName": "Roles",
+          "name": "Roles",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-button--sizes",
+          "exportName": "Sizes",
+          "name": "Sizes",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-button--states",
+          "exportName": "States",
+          "name": "Brand States",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-button--standard-states",
+          "exportName": "StandardStates",
+          "name": "Standard States",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-button--long-label",
+          "exportName": "LongLabel",
+          "name": "Long Label",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-button--korean-labels",
+          "exportName": "KoreanLabels",
+          "name": "Korean Labels",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-button--icon-text-narrow",
+          "exportName": "IconTextNarrow",
+          "name": "Icon Text Narrow",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-button--destructive",
+          "exportName": "Destructive",
+          "name": "Destructive",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-button--playground",
+          "exportName": "Playground",
+          "name": "Playground",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-button--compatibility",
+          "exportName": "Compatibility",
+          "name": "Compatibility",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/calendar.stories.tsx",
+      "title": "Components/Search & Date/Calendar",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-search-date-calendar--all",
+          "exportName": "All",
+          "name": "Calendar",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-search-date-calendar--single-selection",
+          "exportName": "SingleSelection",
+          "name": "Single",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-calendar--disabled-selection",
+          "exportName": "DisabledSelection",
+          "name": "Disabled Dates",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-calendar--range-selection",
+          "exportName": "RangeSelection",
+          "name": "Range",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/card.stories.tsx",
+      "title": "Components/Data & Display/Card",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-card--all",
+          "exportName": "All",
+          "name": "Card",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-card--surfaces",
+          "exportName": "Surfaces",
+          "name": "Surfaces",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-card--action",
+          "exportName": "Action",
+          "name": "Action",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-card--compatibility",
+          "exportName": "Compatibility",
+          "name": "Compatibility",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/carousel.stories.tsx",
+      "title": "Components/Data & Display/Carousel",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-carousel--all",
+          "exportName": "All",
+          "name": "Carousel",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-carousel--basic-carousel",
+          "exportName": "BasicCarousel",
+          "name": "Basic",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-carousel--multiple-items",
+          "exportName": "MultipleItems",
+          "name": "Multiple Items",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-carousel--loop-carousel",
+          "exportName": "LoopCarousel",
+          "name": "Loop",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-carousel--vertical-carousel",
+          "exportName": "VerticalCarousel",
+          "name": "Vertical",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/checkbox.stories.tsx",
+      "title": "Components/Form/Checkbox",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-checkbox--all",
+          "exportName": "All",
+          "name": "Checkbox",
+          "storyTags": [
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "play-fn"
+          ],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-checkbox--unchecked",
+          "exportName": "Unchecked",
+          "name": "Unchecked",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-checkbox--checked",
+          "exportName": "Checked",
+          "name": "Checked",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-checkbox--indeterminate",
+          "exportName": "Indeterminate",
+          "name": "Indeterminate",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-checkbox--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-checkbox--error",
+          "exportName": "Error",
+          "name": "Error",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-checkbox--playground",
+          "exportName": "Playground",
+          "name": "Playground",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/collapsible.stories.tsx",
+      "title": "Components/Disclosure/Collapsible",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-disclosure-collapsible--all",
+          "exportName": "All",
+          "name": "Collapsible",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-disclosure-collapsible--closed",
+          "exportName": "Closed",
+          "name": "Closed",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-disclosure-collapsible--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-disclosure-collapsible--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-disclosure-collapsible--long-content",
+          "exportName": "LongContent",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/combobox.stories.tsx",
+      "title": "Components/Search & Date/Combobox",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-search-date-combobox--all",
+          "exportName": "All",
+          "name": "Combobox",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-search-date-combobox--empty-combobox",
+          "exportName": "EmptyCombobox",
+          "name": "Empty",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-combobox--controlled-combobox",
+          "exportName": "ControlledCombobox",
+          "name": "Controlled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-combobox--long-option",
+          "exportName": "LongOption",
+          "name": "Long Option",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-combobox--open-bottom",
+          "exportName": "OpenBottom",
+          "name": "Open Bottom",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-combobox--open-top",
+          "exportName": "OpenTop",
+          "name": "Open Top",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/command.stories.tsx",
+      "title": "Components/Search & Date/Command",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-search-date-command--all",
+          "exportName": "All",
+          "name": "Command",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-search-date-command--search",
+          "exportName": "Search",
+          "name": "Search",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-command--grouped-list",
+          "exportName": "GroupedList",
+          "name": "Grouped",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/context-menu.stories.tsx",
+      "title": "Components/Overlay/Context Menu",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-context-menu--all",
+          "exportName": "All",
+          "name": "Context Menu",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-context-menu--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/date-picker.stories.tsx",
+      "title": "Components/Search & Date/Date Picker",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-search-date-date-picker--all",
+          "exportName": "All",
+          "name": "Date Picker",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-search-date-date-picker--empty-picker",
+          "exportName": "EmptyPicker",
+          "name": "Empty",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-date-picker--invalid-focus",
+          "exportName": "InvalidFocus",
+          "name": "Invalid Focus",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-date-picker--selected-picker",
+          "exportName": "SelectedPicker",
+          "name": "Selected",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-search-date-date-picker--controlled-picker",
+          "exportName": "ControlledPicker",
+          "name": "Controlled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/dialog.stories.tsx",
+      "title": "Components/Overlay/Dialog",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-dialog--all",
+          "exportName": "All",
+          "name": "Dialog",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-dialog--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-dialog--long-content-open",
+          "exportName": "LongContentOpen",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-dialog--wide-content-open",
+          "exportName": "WideContentOpen",
+          "name": "Wide Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-dialog--body-scroll-open",
+          "exportName": "BodyScrollOpen",
+          "name": "Body Scroll",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-dialog--delete-confirmation-open",
+          "exportName": "DeleteConfirmationOpen",
+          "name": "Delete Confirmation",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/drawer.stories.tsx",
+      "title": "Components/Overlay/Drawer",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-drawer--all",
+          "exportName": "All",
+          "name": "Drawer",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-drawer--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-drawer--form",
+          "exportName": "Form",
+          "name": "Form",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-drawer--long-content",
+          "exportName": "LongContent",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/dropdown-menu.stories.tsx",
+      "title": "Components/Overlay/Dropdown Menu",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-dropdown-menu--all",
+          "exportName": "All",
+          "name": "Dropdown Menu",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-dropdown-menu--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/hover-card.stories.tsx",
+      "title": "Components/Overlay/Hover Card",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-hover-card--all",
+          "exportName": "All",
+          "name": "Hover Card",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-hover-card--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/input.stories.tsx",
+      "title": "Components/Form/Input",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-input--all",
+          "exportName": "All",
+          "name": "Input",
+          "storyTags": [
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "play-fn"
+          ],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-input--default",
+          "exportName": "Default",
+          "name": "Default",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-input--focus",
+          "exportName": "Focus",
+          "name": "Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--error",
+          "exportName": "Error",
+          "name": "Error",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--invalid-focus",
+          "exportName": "InvalidFocus",
+          "name": "Invalid Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--error-message",
+          "exportName": "ErrorMessage",
+          "name": "Error Message",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--required",
+          "exportName": "Required",
+          "name": "Required",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-input--readonly",
+          "exportName": "Readonly",
+          "name": "Readonly",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--sizes",
+          "exportName": "Sizes",
+          "name": "Compare Sizes",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-input--small",
+          "exportName": "Small",
+          "name": "Small",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--medium",
+          "exportName": "Medium",
+          "name": "Medium",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--large",
+          "exportName": "Large",
+          "name": "Large",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-input--playground",
+          "exportName": "Playground",
+          "name": "Playground",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/label.stories.tsx",
+      "title": "Components/Form/Label",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-label--all",
+          "exportName": "All",
+          "name": "Label",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/components/menubar.stories.tsx",
+      "title": "Components/Navigation/Menubar",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-navigation-menubar--all",
+          "exportName": "All",
+          "name": "Menubar",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-navigation-menubar--trigger-focus",
+          "exportName": "TriggerFocus",
+          "name": "Trigger Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-menubar--open-focus",
+          "exportName": "OpenFocus",
+          "name": "Open Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/navigation-menu.stories.tsx",
+      "title": "Components/Navigation/Navigation Menu",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-navigation-navigation-menu--all",
+          "exportName": "All",
+          "name": "Navigation Menu",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-navigation-navigation-menu--default",
+          "exportName": "Default",
+          "name": "Default",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-navigation-navigation-menu--no-viewport",
+          "exportName": "NoViewport",
+          "name": "No Viewport",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-navigation-menu--indicator-alignment",
+          "exportName": "IndicatorAlignment",
+          "name": "Indicator Alignment",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/pagination.stories.tsx",
+      "title": "Components/Navigation/Pagination",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-navigation-pagination--all",
+          "exportName": "All",
+          "name": "Pagination",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-navigation-pagination--first-page",
+          "exportName": "FirstPage",
+          "name": "First Page",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-pagination--last-page",
+          "exportName": "LastPage",
+          "name": "Last Page",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-pagination--long-range",
+          "exportName": "LongRange",
+          "name": "Long Range",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/popover.stories.tsx",
+      "title": "Components/Overlay/Popover",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-popover--all",
+          "exportName": "All",
+          "name": "Popover",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-popover--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/progress.stories.tsx",
+      "title": "Components/Data & Display/Progress",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-progress--all",
+          "exportName": "All",
+          "name": "Progress",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-progress--zero",
+          "exportName": "Zero",
+          "name": "Zero",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-progress--middle",
+          "exportName": "Middle",
+          "name": "Middle",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-progress--full",
+          "exportName": "Full",
+          "name": "Full",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-progress--non-default-max",
+          "exportName": "NonDefaultMax",
+          "name": "Non Default Max",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/radio-group.stories.tsx",
+      "title": "Components/Form/Radio Group",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-radio-group--all",
+          "exportName": "All",
+          "name": "Radio Group",
+          "storyTags": [
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "play-fn"
+          ],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-radio-group--vertical",
+          "exportName": "Vertical",
+          "name": "Vertical",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-radio-group--horizontal",
+          "exportName": "Horizontal",
+          "name": "Horizontal",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-radio-group--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-radio-group--error",
+          "exportName": "Error",
+          "name": "Error",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/resizable.stories.tsx",
+      "title": "Components/Disclosure/Resizable",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-disclosure-resizable--all",
+          "exportName": "All",
+          "name": "Resizable",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-disclosure-resizable--horizontal-layout",
+          "exportName": "HorizontalLayout",
+          "name": "Horizontal",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-disclosure-resizable--vertical-layout",
+          "exportName": "VerticalLayout",
+          "name": "Vertical",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-disclosure-resizable--min-max-layout",
+          "exportName": "MinMaxLayout",
+          "name": "Min Max",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/scroll-area.stories.tsx",
+      "title": "Components/Data & Display/Scroll Area",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-scroll-area--all",
+          "exportName": "All",
+          "name": "Scroll Area",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-scroll-area--vertical-scroll",
+          "exportName": "VerticalScroll",
+          "name": "Vertical",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-scroll-area--horizontal-scroll",
+          "exportName": "HorizontalScroll",
+          "name": "Horizontal",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/select.stories.tsx",
+      "title": "Components/Form/Select",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-select--all",
+          "exportName": "All",
+          "name": "Select",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-select--default",
+          "exportName": "Default",
+          "name": "Default",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-select--invalid-focus",
+          "exportName": "InvalidFocus",
+          "name": "Invalid Focus",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--selected",
+          "exportName": "Selected",
+          "name": "Selected",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-select--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-select--sizes",
+          "exportName": "Sizes",
+          "name": "Compare Sizes",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-select--medium",
+          "exportName": "Medium",
+          "name": "Medium",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--large",
+          "exportName": "Large",
+          "name": "Large",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--long-content",
+          "exportName": "LongContent",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--open-large-short",
+          "exportName": "OpenLargeShort",
+          "name": "Open Large Short",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--open-medium-long",
+          "exportName": "OpenMediumLong",
+          "name": "Open Medium Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--open-large-long",
+          "exportName": "OpenLargeLong",
+          "name": "Open Large Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--open-top",
+          "exportName": "OpenTop",
+          "name": "Open Top",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--open-top-long",
+          "exportName": "OpenTopLong",
+          "name": "Open Top Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--list-size-comparison",
+          "exportName": "ListSizeComparison",
+          "name": "Medium Trigger / List Size Comparison",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--scroll",
+          "exportName": "Scroll",
+          "name": "Scroll",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-select--playground",
+          "exportName": "Playground",
+          "name": "Playground",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/separator.stories.tsx",
+      "title": "Components/Data & Display/Separator",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-separator--all",
+          "exportName": "All",
+          "name": "Separator",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-separator--horizontal",
+          "exportName": "Horizontal",
+          "name": "Horizontal",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-data-display-separator--vertical",
+          "exportName": "Vertical",
+          "name": "Vertical",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        }
+      ]
+    },
+    {
+      "file": "src/components/sheet.stories.tsx",
+      "title": "Components/Overlay/Sheet",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-sheet--all",
+          "exportName": "All",
+          "name": "Sheet",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-sheet--right",
+          "exportName": "Right",
+          "name": "Right",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-sheet--left",
+          "exportName": "Left",
+          "name": "Left",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-sheet--top",
+          "exportName": "Top",
+          "name": "Top",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-sheet--bottom",
+          "exportName": "Bottom",
+          "name": "Bottom",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-sheet--form",
+          "exportName": "Form",
+          "name": "Form",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-overlay-sheet--long-content",
+          "exportName": "LongContent",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/skeleton.stories.tsx",
+      "title": "Components/Data & Display/Skeleton",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-skeleton--all",
+          "exportName": "All",
+          "name": "Skeleton",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-skeleton--text",
+          "exportName": "Text",
+          "name": "Text",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-skeleton--card-list",
+          "exportName": "CardList",
+          "name": "Card List",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/slider.stories.tsx",
+      "title": "Components/Form/Slider",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-slider--all",
+          "exportName": "All",
+          "name": "Slider",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-slider--single-value",
+          "exportName": "SingleValue",
+          "name": "Single",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-slider--range-value",
+          "exportName": "RangeValue",
+          "name": "Range",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-slider--disabled-slider",
+          "exportName": "DisabledSlider",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-slider--focus",
+          "exportName": "Focus",
+          "name": "Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/sonner.stories.tsx",
+      "title": "Components/Feedback/Sonner",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-feedback-sonner--all",
+          "exportName": "All",
+          "name": "Sonner",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/components/switch.stories.tsx",
+      "title": "Components/Form/Switch",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-switch--all",
+          "exportName": "All",
+          "name": "Switch",
+          "storyTags": [
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "play-fn"
+          ],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-switch--off",
+          "exportName": "Off",
+          "name": "Off",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-switch--on",
+          "exportName": "On",
+          "name": "On",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-switch--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        }
+      ]
+    },
+    {
+      "file": "src/components/table.stories.tsx",
+      "title": "Components/Data & Display/Table",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-data-display-table--all",
+          "exportName": "All",
+          "name": "Table",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-data-display-table--basic",
+          "exportName": "Basic",
+          "name": "Basic",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-data-display-table--selected",
+          "exportName": "Selected",
+          "name": "Selected",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-data-display-table--long-text",
+          "exportName": "LongText",
+          "name": "Long Text",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-data-display-table--overflow",
+          "exportName": "Overflow",
+          "name": "Horizontal Overflow",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/tabs.stories.tsx",
+      "title": "Components/Navigation/Tabs",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-navigation-tabs--all",
+          "exportName": "All",
+          "name": "Tabs",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-navigation-tabs--secondary",
+          "exportName": "Secondary",
+          "name": "Secondary",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-tabs--selected-first",
+          "exportName": "SelectedFirst",
+          "name": "Selected First",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-tabs--selected-last",
+          "exportName": "SelectedLast",
+          "name": "Selected Last",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-tabs--focus",
+          "exportName": "Focus",
+          "name": "Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-tabs--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-navigation-tabs--overflow",
+          "exportName": "Overflow",
+          "name": "Overflow",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-tabs--secondary-overflow",
+          "exportName": "SecondaryOverflow",
+          "name": "Secondary Overflow",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-navigation-tabs--long-label",
+          "exportName": "LongLabel",
+          "name": "Long Label",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/textarea.stories.tsx",
+      "title": "Components/Form/Textarea",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-textarea--all",
+          "exportName": "All",
+          "name": "Textarea",
+          "storyTags": [
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "play-fn"
+          ],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-textarea--default",
+          "exportName": "Default",
+          "name": "Default",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-textarea--focus",
+          "exportName": "Focus",
+          "name": "Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-textarea--error",
+          "exportName": "Error",
+          "name": "Error",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-textarea--invalid-focus",
+          "exportName": "InvalidFocus",
+          "name": "Invalid Focus",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-textarea--error-message",
+          "exportName": "ErrorMessage",
+          "name": "Error Message",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-textarea--required",
+          "exportName": "Required",
+          "name": "Required",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-textarea--readonly",
+          "exportName": "Readonly",
+          "name": "Readonly",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-textarea--disabled",
+          "exportName": "Disabled",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-textarea--long-content",
+          "exportName": "LongContent",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-textarea--playground",
+          "exportName": "Playground",
+          "name": "Playground",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/toggle-group.stories.tsx",
+      "title": "Components/Form/Toggle Group",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-toggle-group--all",
+          "exportName": "All",
+          "name": "Toggle Group",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-toggle-group--single-selection",
+          "exportName": "SingleSelection",
+          "name": "Single",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-toggle-group--multiple-selection",
+          "exportName": "MultipleSelection",
+          "name": "Multiple",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-toggle-group--vertical-group",
+          "exportName": "VerticalGroup",
+          "name": "Vertical",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-toggle-group--content-nodes",
+          "exportName": "ContentNodes",
+          "name": "Content Nodes",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/toggle.stories.tsx",
+      "title": "Components/Form/Toggle",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-form-toggle--all",
+          "exportName": "All",
+          "name": "Toggle",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-form-toggle--states",
+          "exportName": "States",
+          "name": "States",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "components-form-toggle--icon-only",
+          "exportName": "IconOnly",
+          "name": "Icon Only",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-toggle--disabled-toggle",
+          "exportName": "DisabledToggle",
+          "name": "Disabled",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "components-form-toggle--content-nodes",
+          "exportName": "ContentNodes",
+          "name": "Content Nodes",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/components/tooltip.stories.tsx",
+      "title": "Components/Overlay/Tooltip",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "components-overlay-tooltip--all",
+          "exportName": "All",
+          "name": "Tooltip",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "components-overlay-tooltip--open",
+          "exportName": "Open",
+          "name": "Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/foundation/color.stories.tsx",
+      "title": "Foundation/Color",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "foundation-color--all",
+          "exportName": "All",
+          "name": "Color",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/foundation/layout.stories.tsx",
+      "title": "Foundation/Layout",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "foundation-layout--all",
+          "exportName": "All",
+          "name": "Layout",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/foundation/typography.stories.tsx",
+      "title": "Foundation/Typography",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "foundation-typography--all",
+          "exportName": "All",
+          "name": "Typography",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/patterns/dashboard-layout.stories.tsx",
+      "title": "Patterns/Layout/Dashboard",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "patterns-layout-dashboard-layout--all",
+          "exportName": "All",
+          "name": "Dashboard",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "patterns-layout-dashboard-layout--with-sidebar",
+          "exportName": "WithSidebar",
+          "name": "Dashboard Header + Sidebar",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-dashboard-layout--third-level",
+          "exportName": "ThirdLevel",
+          "name": "Third Level",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-dashboard-layout--sidebar-only",
+          "exportName": "SidebarOnly",
+          "name": "Dashboard Sidebar",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-dashboard-layout--long-content",
+          "exportName": "LongContent",
+          "name": "Long Content",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-dashboard-layout--loading",
+          "exportName": "Loading",
+          "name": "Loading",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-dashboard-layout--empty",
+          "exportName": "Empty",
+          "name": "Empty",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-dashboard-layout--framed",
+          "exportName": "Framed",
+          "name": "Framed",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/patterns/data-table.stories.tsx",
+      "title": "Patterns/Data/Data Table",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "patterns-data-data-table--all",
+          "exportName": "All",
+          "name": "Data Table",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "patterns-data-data-table--with-filter-bar-story",
+          "exportName": "WithFilterBarStory",
+          "name": "With Filter Bar",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-data-data-table--loading",
+          "exportName": "Loading",
+          "name": "Loading",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-data-data-table--empty",
+          "exportName": "Empty",
+          "name": "Empty",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/patterns/filter-bar.stories.tsx",
+      "title": "Patterns/Data/Filter Bar",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "patterns-data-filter-bar--all",
+          "exportName": "All",
+          "name": "Filter Bar",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        }
+      ]
+    },
+    {
+      "file": "src/patterns/gnb.stories.tsx",
+      "title": "Patterns/Layout/GNB",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "patterns-layout-gnb--all",
+          "exportName": "All",
+          "name": "GNB",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "patterns-layout-gnb--default",
+          "exportName": "Default",
+          "name": "Default",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "patterns-layout-gnb--sticky",
+          "exportName": "Sticky",
+          "name": "Sticky",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--navigation-menu-open",
+          "exportName": "NavigationMenuOpen",
+          "name": "Navigation Menu Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--short-depth-open",
+          "exportName": "ShortDepthOpen",
+          "name": "Short Depth Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--right-edge-long-depth",
+          "exportName": "RightEdgeLongDepth",
+          "name": "Right Edge Long Depth",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--first-depth-short",
+          "exportName": "FirstDepthShort",
+          "name": "First Depth Short",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--first-depth-long",
+          "exportName": "FirstDepthLong",
+          "name": "First Depth Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--middle-depth-short",
+          "exportName": "MiddleDepthShort",
+          "name": "Middle Depth Short",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--middle-depth-long",
+          "exportName": "MiddleDepthLong",
+          "name": "Middle Depth Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--last-depth-short",
+          "exportName": "LastDepthShort",
+          "name": "Last Depth Short",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--last-depth-long",
+          "exportName": "LastDepthLong",
+          "name": "Last Depth Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--edge-first-long",
+          "exportName": "EdgeFirstLong",
+          "name": "Edge First Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--edge-last-long",
+          "exportName": "EdgeLastLong",
+          "name": "Edge Last Long",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--user-menu-open",
+          "exportName": "UserMenuOpen",
+          "name": "User Menu Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--long-labels",
+          "exportName": "LongLabels",
+          "name": "Long Labels",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--with-logo",
+          "exportName": "WithLogo",
+          "name": "With Logo",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--utilities",
+          "exportName": "Utilities",
+          "name": "Utilities",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--mobile",
+          "exportName": "Mobile",
+          "name": "Mobile",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-gnb--mobile-menu-open",
+          "exportName": "MobileMenuOpen",
+          "name": "Mobile Menu Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/patterns/lnb.stories.tsx",
+      "title": "Patterns/Layout/LNB",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "patterns-layout-lnb--all",
+          "exportName": "All",
+          "name": "LNB",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "patterns-layout-lnb--default",
+          "exportName": "Default",
+          "name": "Default",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "patterns-layout-lnb--selected",
+          "exportName": "Selected",
+          "name": "Selected",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": "MERGE_CANDIDATE",
+          "reason": "Representative board may cover the same specimen; keep direct QA until behavioral equivalence is reviewed."
+        },
+        {
+          "id": "patterns-layout-lnb--expanded",
+          "exportName": "Expanded",
+          "name": "Expanded",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--selected-child",
+          "exportName": "SelectedChild",
+          "name": "Selected Child",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--collapsed-with-selection",
+          "exportName": "CollapsedWithSelection",
+          "name": "Collapsed With Selection",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--with-logo",
+          "exportName": "WithLogo",
+          "name": "With Logo",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--long-labels",
+          "exportName": "LongLabels",
+          "name": "Long Labels",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--scroll",
+          "exportName": "Scroll",
+          "name": "Scroll",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--third-level",
+          "exportName": "ThirdLevel",
+          "name": "Third Level",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--third-level-long-labels",
+          "exportName": "ThirdLevelLongLabels",
+          "name": "Third Level Long Labels",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--third-level-scroll",
+          "exportName": "ThirdLevelScroll",
+          "name": "Third Level Scroll",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--with-gnb",
+          "exportName": "WithGNB",
+          "name": "With GNB",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--standalone-desktop",
+          "exportName": "StandaloneDesktop",
+          "name": "LNB Standalone Desktop",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--lnb-profile-menu-open",
+          "exportName": "LNBProfileMenuOpen",
+          "name": "LNB Profile Menu Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--standalone-mobile",
+          "exportName": "StandaloneMobile",
+          "name": "LNB Standalone Mobile",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "patterns-layout-lnb--standalone-mobile-menu-open",
+          "exportName": "StandaloneMobileMenuOpen",
+          "name": "LNB Standalone Mobile Menu Open",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/patterns/loading-screen.stories.tsx",
+      "title": "Patterns/Layout/Loading Screen",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "patterns-layout-loading-screen--all",
+          "exportName": "All",
+          "name": "Loading Screen",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "patterns-layout-loading-screen--inline",
+          "exportName": "Inline",
+          "name": "Inline",
+          "storyTags": [
+            "verification"
+          ],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/theme/designer-theme.stories.tsx",
+      "title": "Theme/Designer Playground",
+      "metaTags": [],
+      "stories": [
+        {
+          "id": "theme-designer-playground--editor",
+          "exportName": "Editor",
+          "name": "Designer Playground",
+          "storyTags": [],
+          "effectiveTags": [],
+          "category": "PRIMARY",
+          "decision": "KEEP",
+          "candidate": null,
+          "reason": "Representative story or distinct reference page."
+        },
+        {
+          "id": "theme-designer-playground--live-verification",
+          "exportName": "LiveVerification",
+          "name": "Live Verification",
+          "storyTags": [
+            "verification",
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/theme/runtime-loader.stories.tsx",
+      "title": "Theme/Runtime Contract/Loader",
+      "metaTags": [
+        "verification"
+      ],
+      "stories": [
+        {
+          "id": "theme-runtime-contract-loader--cdn-verification",
+          "exportName": "CdnVerification",
+          "name": "Cdn Verification",
+          "storyTags": [
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    },
+    {
+      "file": "src/theme/runtime-theme.stories.tsx",
+      "title": "Theme/Runtime Contract",
+      "metaTags": [
+        "verification"
+      ],
+      "stories": [
+        {
+          "id": "theme-runtime-contract--comparison",
+          "exportName": "Comparison",
+          "name": "Comparison",
+          "storyTags": [],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "theme-runtime-contract--global-external",
+          "exportName": "GlobalExternal",
+          "name": "Global External",
+          "storyTags": [],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "theme-runtime-contract--verification",
+          "exportName": "Verification",
+          "name": "Verification",
+          "storyTags": [
+            "play-fn"
+          ],
+          "effectiveTags": [
+            "verification",
+            "play-fn"
+          ],
+          "category": "UTILITY",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        },
+        {
+          "id": "theme-runtime-contract--dashboard",
+          "exportName": "Dashboard",
+          "name": "Dashboard",
+          "storyTags": [],
+          "effectiveTags": [
+            "verification"
+          ],
+          "category": "VERIFICATION",
+          "decision": "HIDE",
+          "candidate": null,
+          "reason": "Keep direct URL and tag-filter access; excluded from default sidebar."
+        }
+      ]
+    }
+  ]
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..6512fc6
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,76 @@
+# HMDesignSystem 작업 지침
+
+## AI 화면 구현 Quick Start
+
+화면 구현 요청을 받으면 아래 순서를 그대로 따른다. 파일이나 API의 존재를 확인할 수 없으면 추측하지 말고 미확인으로 기록한다.
+
+1. **프로젝트 구조와 Runtime 확인**: 제공된 파일 범위를 살펴보고 `REACT_VITE | STATIC_HTML | VANILLA_WEB | OTHER_RUNTIME` 중 대상을 정한다. Component·Pattern 파일이 실제 범위에 있는지 확인한다.
+2. **Component 검색**: `packages/ui/src/components/ui/`와 `packages/ui/src/index.ts`에서 공개 Component·Props를 찾고, `docs/components/<component>.md`를 확인한다. 기존 공개 Component를 우선 사용한다.
+3. **Pattern 검색**: `packages/ui/src/patterns/`, `src/patterns/`, `packages/ui/src/index.ts`와 `docs/patterns/`에서 맞는 Pattern·공개 API를 찾아 구조와 상태 규칙을 따른다.
+4. **Storybook 확인**: `src/components/`, `src/patterns/`, `src/theme/`의 대표 `All` Story와 관련 문서를 확인한다. `verification` 전용 Story는 일반 화면의 기준으로 쓰지 않는다. Storybook을 실행할 수 없으면 Story 소스와 문서만 확인하고 시각 동작은 추측하지 않는다.
+5. **Theme 연결**: `themes/default.json`, `packages/ui/src/theme.css`, Runtime 계약과 Token 가이드를 확인해 기존 CSS Custom Properties 구조를 사용한다.
+6. **화면 구성**: Component와 Pattern을 조합하고 아래 단일 Navigation 정책을 지킨다. 기존 구성으로 해결되지 않을 때만 새 Component를 검토한다.
+7. **결과 확인 및 보고**: 실제 적용한 Component·Pattern, Theme 연결, Navigation Mode, 실행/화면 확인 결과와 미검증 항목을 보고한다.
+
+**Storybook / 화면 생성 분리**: Storybook은 기존 Component·Pattern·Theme·Variant·State·Interaction을 확인하는 Reference 환경이다. 일반 업무 화면 생성은 Storybook Story·사이드바에 등록하지 않고, 기존 대표 Story를 생성 화면으로 교체하지 않으며, Storybook 실행을 필수 확인 경로로 요구하지 않는다. 별도의 React 화면과 독립 미리보기를 만들고 화면별 빌드·필요한 검증을 수행한다. H-2(AI 생성 화면의 자동 빌드·캡처·검증, Storybook 배포와 별도이며 구현 완료 여부는 현재 파일로 확인)나 유사 자동화가 사용 가능한 경우에도 `preview.html`·desktop/mobile 이미지 같은 독립 미리보기 산출에만 사용하며 Storybook 등록과 혼동하지 않는다. Storybook 수정은 Component/Pattern 추가·수정, 대표/Verification Story 작성 또는 Storybook Reference 개선을 사용자가 명시한 경우에만 허용한다. Storybook 전용 helper/CSS는 운영 화면에 사용하지 않는다.
+
+상세 규칙은 이 문서의 [구현 기본값](#ai-implementation-defaults), [Runtime 계약](#runtime-portability-policy), [단일 Navigation 정책](#navigation-single-mode-policy)과 [Component / Pattern Reference Index](docs/guidelines/component-pattern-reference.md), [Component 구현 원칙](docs/guidelines/shadcn-기반-구현-원칙.md), [Runtime Theme](docs/guidelines/runtime-theme.md), [Navigation 정책](docs/guidelines/navigation-single-mode.md)을 따른다.
+
+**검색 원칙(도구 중립)**: 변경과 관련된 소스 경로부터 좁혀 검색하고, 생성물(`node_modules`, `dist`, `storybook-static`)과 로컬 작업본은 기본 제외한다. 필요한 최소 범위만 검증하며 실제로 확인하지 않은 기능을 PASS로 보고하지 않는다. 존재하지 않는 Component·Pattern·공개 API를 임의로 만들지 않고 없으면 없다고 보고한다.
+
+**Story 구분**: 운영 기준은 대표 `All` Story이고 `verification`·Compatibility·Fixture Story는 운영 예제가 아니다. Storybook 문서 화면은 `StoryPage` 공통 Inner를 사용하며, 이는 Storybook 표현용으로 `@hm-design/ui` 공개 API가 아니다.
+
+**화면 생성 시 필수 확인**: Navigation을 지정받으면 우선 적용하고, 미지정이면 화면 구조·대표 Pattern에서 선택 근거를 기록한다([선택 기준](docs/guidelines/navigation-single-mode.md#선택-근거)). GNB는 Desktop 메뉴와 `GNBMobileMenu`를 함께 구성하며 내부 Sidebar도 모바일 Sheet 하나만 사용한다([GNB 모바일](docs/patterns/gnb.md#8-desktop--mobile)). Dashboard 운영 화면에는 Sidebar를 생성하지 않는다. `DashboardSidebar` 공개 Export와 선택적 `sidebar` slot은 기존 호환성·검증용이며 운영 허용을 뜻하지 않는다. Dashboard 상태는 Theme 다음에 공개 Status CSS를 로드하고 기존 Badge mapping을 소비한다([상태 예제](docs/patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)). FilterBar의 입력 조건과 조회 적용 조건·초기화 책임을 구분한다([조회 예제](docs/patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제)). `REACT_VITE` 독립 화면은 bootstrap에서 기존 앱 CSS entry(`@/index.css` → `@/hm-theme.css` → 필요 시 공개 상태 CSS)를 로드하며, `@hm-design/ui/tailwind.css`만 단독 import하지 않는다. 빌드 후 `.flex`, `.grid` 등 대표 utility의 생성·실제 적용과 캡처 레이아웃을 확인하고, 빌드 성공만으로 화면 검증을 PASS 처리하지 않는다. React 소비자는 Tailwind 검색 범위와 HM package source를 확인하고([Tailwind](docs/guidelines/runtime-portability.md#21-tailwind-v4-소비자-검색-범위)), 폰트·Asset 경로는 실행 위치별로 확인한다([Asset](docs/guidelines/runtime-portability.md#4-asset과-실행-위치)).
+
+## AI Implementation Defaults
+
+**사용자가 별도로 "기존 컴포넌트/디자인 시스템을 사용해줘", "테마를 적용해줘", "Semantic Token을 사용해줘", "Navigation 정책을 따라줘"라고 요청하지 않아도 AI는 이를 모든 신규·수정 UI의 기본 구현 조건으로 자동 적용한다.**
+
+- 구현 전에 `STORYBOOK_ONLY | PRODUCTION_UI | BOTH` 중 변경 범위를 정한다.
+- 기존 Component와 유사 대표 Story를 먼저 검색한다. `packages/ui`, `src/components`, `src/patterns`, `src/center`, 기존 Storybook stories와 shared helpers를 확인하고 도메인에 맞는 구현을 재사용한다.
+- 재사용 순서: 기존 HM Component → 기존 Variant / Prop → 기존 Composition → shadcn → Radix Primitive → 최소 Custom. 새 Component는 기존 Component·Composition으로 표현 불가능하고 Variant 확장이 부적절하며 shadcn/Radix 조합도 어려운 경우에만 만든다. 재사용 불가 사유와 최소 추가 범위를 설명한다.
+- Storybook은 구현 Reference Catalog다. 대표/PRIMARY Story의 시각 언어와 공통 상태 mapping을 재사용하고 검증 전용 Story를 운영 예제로 삼지 않는다. 신규 업무 화면의 등록 대상이 아니며, 생성 결과는 별도 React 화면·독립 미리보기로 제공한다.
+- Theme은 구현 시작부터 적용한다. 기존 Semantic Token → 해당 Component Token → 기존 CSS Variable을 먼저 확인하고, 없을 때만 필요한 최소 Semantic 확장을 검토한다. 기존 Token이 있는 색상·spacing·값을 하드코딩하거나 같은 Token을 여러 파일에 중복 정의하지 않는다.
+- Theme 사용은 별도 승인 없이 기본 적용한다. Theme Source/값 수정은 명시적 필요성과 영향 범위를 확인한다. `themes/*.json` → Runtime Loader → CSS Custom Properties → Semantic → Component Mapping과 Primary / On Accent의 독립 fallback을 유지한다.
+- 한 페이지에 `GNB | LNB | DASHBOARD` 중 하나만 사용한다. 반응형도 같은 Navigation Mode를 유지한다.
+- 화면 구현 순서는 Quick Start를 따른다. 변경 작업 범위(STORYBOOK_ONLY | PRODUCTION_UI | BOTH)는 구현 전에 정한다.
+- package exports, public props/types, package entry, Story ID, `meta.title`을 불필요하게 변경하지 않는다. 필요한 변경은 소비처·호환성 영향을 먼저 확인한다. Storybook 표현 문제와 Production 동작 문제는 해당 범위에서 해결한다.
+- Badge/Button/FilterBar를 재사용하더라도 동일한 상태 ID·라벨·필터 매칭이 반복되면 화면별 helper로 남기지 말고 Runtime-neutral 상태 계약을 먼저 검토한다. 계약은 React 구현과 분리하고 `data-status`, 독립 flag attribute, `aria-pressed` 등 다른 Runtime이 재현할 수 있는 상태 vocabulary를 정의한다.
+- 명시적 실험·Theme 미적용 prototype·외부 디자인 완전 재현·독립 POC만 별도 격리 범위에서 예외를 검토한다. Navigation 혼합은 아래 단일 모드 정책의 별도 기준을 따른다.
+- Button은 `brand | solid | outline`의 사용 위치와 세트 규칙을 `docs/components/button.md` 기준으로 따른다: 실제 화면 Brand 최대 1개·팝업 Brand 금지, 일반 확인/작성은 Solid 세트, 삭제 확인·행/반복 작업은 Outline 세트이며 세트의 appearance와 size를 통일한다. Runtime 변환은 `docs/guidelines/runtime-portability.md`의 DOM/Theme/keyboard 계약을 함께 보존한다.
+- Dashboard 운영 화면은 전용 Header(48px)·업무 상태 필터와 Content로 구성하며 Sidebar 사용을 금지한다. Dashboard 대표 `Patterns/Layout/Dashboard → Dashboard` Story와 `docs/patterns/dashboard-layout.md`를 기준으로 하며, Header를 GNB로 대체하거나 일반 LNB/GNB를 함께 넣지 않는다. Sidebar verification Story는 신규 운영 화면의 Reference가 아니다.
+- Dashboard 및 DataTable은 기존 Pattern 구조를 우선한다. `Data Table` 대표 Story를 기준으로 하고 숨김 `With Filter Bar`는 verification 용도다.
+- Story의 fixture나 장식은 Component API나 Production 규칙과 구분한다. 대표 Story와 공개 API·사용 문서를 함께 확인한다.
+
+상세 Source of Truth: [AI/Component 구현 원칙](docs/guidelines/shadcn-기반-구현-원칙.md), [Theme/Token 정책](docs/guidelines/테마-토큰-가이드.md), [Runtime Theme 계약](docs/guidelines/runtime-theme.md). 이 기본 정책은 과거 문서·예제의 상충 지침보다 우선한다.
+
+## Runtime Portability Policy
+
+- 설치 없는 테스트 배포의 현재 검증 기준은 `HMDesignTest-Portable-Test-r3.zip`이다(r2·원본 `HMDesignTest-Portable-Test.zip`은 과거 기록). 포터블 ZIP은 기본 포트 6007이며 충돌 시 자동으로 다른 포트를 쓰고, 개발 저장소 Storybook은 6024다. 이 ZIP은 `start-preview.bat`과 동봉된 Windows x64 Node 런타임으로 사전 빌드된 Storybook을 실행한다. 테스트 사용자는 ZIP 해제 → 배치 더블클릭 → 표시된 로컬 URL 열기만 수행하며 Node/npm 설치, npm 명령, Git 작업, CDN/운영 업로드가 필요 없다. 아래 의존성 복원·빌드 절차는 소스 개발자 전용이다. [테스트 배포 안내](docs/guidelines/portable-test-distribution.md).
+- Runtime 구분: React 화면은 실제 `packages/ui` 공개 API와 workspace를 쓰는 `REACT_VITE`; 압축 ZIP에서 React 개발환경을 쓸 때는 먼저 `npm ci`로 의존성을 복원한다. `STATIC_HTML`은 파일을 `file://`로 직접 여는 HTML이며 Vite나 bare package import에 의존하지 않는다. `VANILLA_WEB`은 서버/정적 호스팅의 HTML·CSS·JS다. Storybook은 구현 기준을 확인하는 Reference 환경이며 Production Runtime을 뜻하지 않는다.
+- `HMDesignTest.zip`에는 `.storybook/` 설정·Story 소스·패키지 소스와 dist가 있지만 `node_modules/`, `storybook-static/`은 없다. 실제 포함 파일과 `package.json` scripts를 먼저 확인한다. `HMDesignTest.zip`의 Storybook 개발 서버는 기본 포트 6007이며(현재 개발 저장소는 6024) 정적 빌드가 필요하면 의존성을 복원한 뒤 `npm run build-storybook`을 실행한다. 현재 개발 저장소와 ZIP의 설정 차이가 있으면 대상 `package.json`을 다시 확인한다. 생성되기 전의 `storybook-static/`을 필수 Reference로 요구하지 않는다.
+- React는 구현 방식 중 하나일 뿐이다. 신규·변환 작업은 먼저 `REACT_VITE | STATIC_HTML | VANILLA_WEB | OTHER_RUNTIME` 중 Target Runtime을 정하고, HM Design/Theme/Component Contract를 유지한다.
+- `themes/default.json`, `packages/ui/src/theme/contract.ts`, `packages/ui/src/theme/runtime.ts`, `packages/ui/src/theme.css`와 [Runtime 계약표](docs/guidelines/runtime-theme-contract.md)를 실제 Source of Truth로 사용한다. 색상·spacing·radius·Typography를 추측하거나 하드코딩하지 않는다.
+- HTML/다른 Runtime 결과물은 기존 React를 대체하거나 별도 디자인으로 재작성하지 않고, 동일한 시각·상태·접근성·responsive 계약을 소비하는 adapter로 만든다. `STATIC_HTML`은 `file://` 직접 실행 검증을 포함한다.
+- Dashboard 상태 색상은 `src/patterns/dashboard-status-contract.css`의 Runtime-neutral 변수(`--hm-dashboard-status-active|hold|done|issue`)를 우선 사용한다. 이 파일의 active/hold/issue 값은 기존 승인된 Story 색상을 보존하는 compatibility mapping이며 Public Theme token으로 승격하지 않는다. 실제 Production 공통 소비가 확인될 때만 Semantic Token 승격을 제안한다.
+- 상세한 Target Runtime, asset 경로, 변환 규칙과 검증 기준은 [Runtime Portability Policy](docs/guidelines/runtime-portability.md)를 따른다.
+
+## Navigation Single Mode Policy
+
+**ONE PAGE = ONE NAVIGATION MODE = ONE HEADER/NAVIGATION EXPERIENCE**
+
+- 페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 선택한다.
+- 허용: GNB ONLY, LNB ONLY, DASHBOARD ONLY.
+- GNB ONLY 내부 Sidebar는 기존 LNB 부품을 재사용하는 허용 Composition이며 독립 LNB Mode가 아니다. 브랜드·사용자와 모바일 Header/Sheet는 GNB 하나가 담당한다([상세 범위](docs/guidelines/navigation-single-mode.md#gnb-only-내부-sidebar)).
+- 금지: GNB + LNB, GNB + Dashboard, LNB + Dashboard, GNB + LNB + Dashboard.
+- 이 정책은 AI 기반 코드 생성·제안, 신규 페이지 구현, 기존 화면 수정, 프로토타입, Storybook, 실제 Production 구현 전체에 동일하게 적용한다.
+- AI는 별도 요청이 없는 한 Navigation 조합을 생성하거나 제안하지 않는다. 별도 요청이 있더라도 기존 단일 모드 정책과 충돌함을 알리고 정책 변경인지 기술 검증인지 구분한다.
+- 반응형에서도 선택한 체계를 유지한다. LNB Desktop(≥1024px) → LNB Mobile Header(≤1023px)는 같은 LNB Mode이며 GNB로 전환하지 않는다.
+- Dashboard 운영 화면은 전용 Header/Menu와 Content만 사용하며 Sidebar는 금지한다. 외부 GNB나 일반 LNB를 slot에 넣지 않는다. 기존 `DashboardSidebar`와 `sidebar` slot은 호환성·검증용으로 유지하며 신규 운영 화면에 사용하지 않는다.
+- Dashboard Header는 GNB가 아니다. Dashboard 화면은 Dashboard Pattern과 대표 Story를 따르고, Header의 역할을 GNB로 대체하지 않는다.
+- GNB/LNB/Dashboard의 함께 쓰기는 위 단일 모드 허용 범위만 따른다. 과거 혼합 Navigation verification Story는 운영 화면 기준으로 사용하지 않는다.
+- Dashboard 운영 최소 폭은 Sidebar 없는 960px이며 그 이하에서는 Dashboard 내부 가로 스크롤을 유지한다. Sidebar 포함 1232px은 기존 호환성·검증 구성의 값으로 현재 운영 기준이 아니다.
+- Navigation 간 CSS 변수, height/width 계산, breakpoint, spacing override의 교차 의존성을 추가하지 않는다.
+- 대표/PRIMARY Story는 단일 모드만 사용한다. 기존 혼합 Story를 기술 검증 목적으로 유지할 경우 `verification` 태그와 **VERIFICATION ONLY** 표시를 모두 적용하고 운영 예제로 추천하지 않는다.
+
+상세 기준: [Navigation Single Mode Policy](docs/guidelines/navigation-single-mode.md). 이 사용자 확정 정책은 이전 Navigation 조합 문서·예제보다 우선한다.
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..df99a57
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,69 @@
+# HMDesignSystem
+
+shadcn/ui(Radix, Tailwind v4, CVA) 기반 HM 디자인 시스템 시제품. React + TypeScript + Vite, 개발 Storybook 포트 6024(포터블 테스트 ZIP은 기본 6007, 충돌 시 자동 변경). 실행법과 파일 위치는 `README.md`를 따른다.
+
+## 지침 문서
+
+규칙의 기준은 아래 문서이며, 이 파일에는 규칙 본문을 복사하지 않는다. 작업 전에 해당 문서를 읽는다.
+
+- `AGENTS.md` — AI Implementation Defaults와 Navigation 필수 요약. 기존 Component / Storybook Reference 우선, Theme / Semantic 기본 적용, 단일 Navigation, 최소 Custom은 사용자의 별도 지시 없이 모든 신규·수정 UI에 적용한다.
+- 일반 업무 화면은 Storybook에 등록하지 않고 별도 React 화면·독립 미리보기로 제공한다. Storybook 수정은 Component/Pattern 또는 명시적 Storybook Reference 작업에 한정한다. 상세한 Storybook / 화면 생성 분리는 `AGENTS.md`와 `docs/guidelines/shadcn-기반-구현-원칙.md`를 따른다.
+- `docs/guidelines/프로젝트-지침.md` — §6 컴포넌트·Storybook·CSS 작업 규칙 (모든 컴포넌트 작업 전 필독)
+- `docs/guidelines/shadcn-기반-구현-원칙.md` — Component / Pattern / Story의 재사용 우선순위와 Custom 구현 허용 조건 (관련 작업 전 필독)
+- `docs/guidelines/테마-토큰-가이드.md` — Token 구조, 이름 규칙, HM Default/External Runtime 계약, Light/Dark 없음
+- `docs/guidelines/개발-적용-가이드.md`, `운영-배포-가이드.md`, `theme-delivery.md` — JSON 원본/Runtime URL Loader/독립 Theme 배포와 향후 실제 CDN·Publish의 경계
+
+> `docs/guidelines/`의 개정안/검토용 표기와 관계없이 2026-10-07 사용자 확정 AI 기본 구현 정책과 2026-10-08 Navigation Sidebar 운영 정책은 필수 적용한다. 과거 로컬 지침은 현재 정책을 대체하지 않는다.
+
+## 반드시 지킬 것 (요약)
+
+- 구현 우선순위는 기존 `@hm-design/ui` → 기존 Variant / Prop → 기존 Composition → shadcn → Radix Primitive → 최소 Custom이다. Visual은 처음부터 기존 Theme / Semantic / Component Mapping에 연결한다. 상세 탐색·범위 분류·예외 조건은 `docs/guidelines/shadcn-기반-구현-원칙.md`를 따른다.
+- Behavior / Structure는 shadcn/Radix를 유지하고 Visual은 HM Theme로 조정한다. 디자인 차이만으로 별도 Component, interaction logic 또는 Production API를 만들지 않는다.
+- HM이 값을 지정한 속성은 Theme Token으로, 지정하지 않은 속성은 shadcn 기본 구현 그대로 둔다.
+- shadcn 구조(CVA, `data-slot`, `cn(..., className)`)와 공개 API를 불필요하게 바꾸지 않는다. wrapper를 추가하지 않는다.
+- `<Button />`처럼 기본 API만으로 HM 디자인이 적용되어야 한다. 소비자가 `hm-*` class를 붙이는 구조를 새로 만들지 않는다. `className`은 사용자 확장용이다.
+- Story는 소비 프로젝트와 같은 API로 작성한다. Story 전용 class로 외형을 보정하지 않는다.
+- HM Default와 외부 JSON은 같은 Runtime 계약을 쓴다(`docs/guidelines/runtime-theme.md`). 컬러 원본은 `themes/*.json`, package fallback은 생성한다. Storybook의 Designer JSON Preview/Editor는 이 계약의 소비자다. Light/Dark preset이나 `dark:` 분기/Dark Token은 추가하지 않는다.
+- 컴포넌트 CSS에 `html`, `body`, `*` 전역 규칙이나 페이지 레이아웃을 넣지 않는다.
+
+## 검색·검증 효율
+
+- 변경과 관련된 소스 경로(`packages/ui/src`, `src/components`, `src/patterns`, `docs/<영역>`)부터 검색한다. 드라이브나 저장소 전체 탐색은 하지 않는다.
+- `rg`를 우선 사용하고 `node_modules`, `_local`, `dist`, `storybook-static` 등 생성물·로컬 작업본은 기본 검색에서 제외한다(`-g '!…'`). 전체 검색 후 `grep -v`로 걸러내는 방식은 쓰지 않는다.
+- 검증은 변경 범위에 필요한 최소 단위로 한다. 공유 `dist`를 쓰는 build는 동시에 실행하지 않는다.
+- 속도를 이유로 파일 삭제나 캐시 정리를 하지 않는다.
+- 실제로 실행·확인하지 않은 항목은 PASS로 보고하지 않고 미검증으로 기록한다.
+
+## 디자인 규격 (ui_viz)
+
+> 2026-10-02: ui_viz는 최종 기준이 아니라 이전 테스트/검증 프로젝트이며 참고 자료다. 새 컴포넌트의 기준은 `프로젝트-지침.md` §6.9와 `docs/components/<name>.md`를 따른다. 아래 항목은 이 기준으로 읽는다.
+
+- 정합성 감사의 1차 Source of Truth는 현재 Production 코드와 실제 Storybook이다. 이 저장소 문서는 코드와 대조하며 과거 보고서는 참고 자료다. 외부 ui_viz는 ZIP 미포함 선택적 Reference이며, 제공받은 경우에만 당시 `Confirmed` 근거를 참고한다. `TBD`/`HOLD`/`Candidate`/`Temporary`/`REVIEW VALUE`는 확정값이 아니다.
+- 해당 도메인의 HM 문서와 대표 Story부터 읽는다: UI는 `docs/components/<component>.md`, Layout은 `docs/patterns/`, Theme은 `docs/guidelines/runtime-theme.md`를 따른다. 외부 ui_viz의 owner 문서·asset은 제공된 경우에만 관련 범위에서 참고한다. CENTER 자료는 `center-graphic` 작업에만 사용하며 UI 규격과 섞지 않는다.
+- UI 컴포넌트를 수정할 때는 이 저장소의 `docs/components/<component>.md`를 먼저 읽고 현재 코드와 대조한다. HM 사용자 확정 결정은 외부 ui_viz보다 우선한다. 외부 문서 경로는 이 저장소의 동명 문서와 구분한다. 상세는 `프로젝트-지침.md` §6.8.
+- ui_viz의 Web class와 DOM은 복사하지 않고 shadcn API로 구현한다. 상세는 `프로젝트-지침.md` §6.7.
+- Layout/Pattern(GNB, LNB, Dashboard, Page) 작업도 현재 HM 대표 Story / Pattern과 단일 Navigation 정책을 먼저 따른다. 외부 ui_viz의 기존 테스트 레이아웃(ZIP 미포함)은 현재 HM 기준과 충돌하지 않는 구조·시각 참고 자료로 사용한다(`프로젝트-지침.md` §6.11).
+
+## 작업 방식
+
+- 요청하지 않은 리팩토링을 하지 않는다. 변경은 요청된 컴포넌트와 직접 필요한 범위로 제한한다.
+- 새 패턴은 기준 컴포넌트(Button)에서 먼저 검증한 뒤 다른 컴포넌트로 확장한다.
+- 다른 작업자나 AI가 같은 파일을 수정 중일 수 있다. 수정 전 파일의 현재 상태를 다시 읽는다.
+
+## 현재 상태
+
+- Button(`variant`=역할, `appearance`=treatment, `size`), Input(`size`, native 상태 selector), Select(Trigger `size`, Radix 상태 속성)는 ui_viz Confirmed 규격으로 구현했다. Card도 `<Card />`만으로 HM 스타일이 적용된다(ui_viz Content Card, `packages/ui/src/theme/card.css`). Dialog도 `<DialogContent />`만으로 HM 스타일이 적용된다(`packages/ui/src/theme/dialog.css`).
+- 구조(2026-10-02 패키지 분리, npm workspaces): UI 컴포넌트·Theme 구현은 `packages/ui`(`@hm-design/ui`, 컴포넌트 `src/components/ui/`, Theme `src/theme/*.css`, 진입점 `src/theme.css`·`src/tailwind.css`), 컴포넌트 문서는 `docs/components/`, Storybook·Demo는 루트(`.storybook/`, `src/`; Demo 스타일은 `src/hm-theme.css`), `packages/center-graphic`(`@hm-design/center-graphic`)은 CENTER 구현(제목·정보·노선/공간·시설물), 기준 문서는 `docs/center-graphic/`다.
+- 작업 순서: 컴포넌트 문서 정리, Card, Dialog, 패키지 분리, CENTER 구현, 1단계 UI 컴포넌트(Textarea, Tabs, Label, Checkbox, Radio Group, Switch, Badge, Alert, Separator)와 2단계 A묶음 Floating(Dropdown Menu, Popover, Tooltip, Hover Card)과 B묶음 Modal(Sheet, Drawer(vaul), Alert Dialog)과 C묶음 Expand(Accordion, Collapsible)과 D묶음 Navigation(Breadcrumb, Pagination, Navigation Menu, Menubar)까지 완료로 2단계 UI가 끝났다. 3단계 A묶음 Data/Feedback(Table, Progress, Skeleton, Avatar, Scroll Area)과 B묶음 Selection Controls(Slider, Toggle, Toggle Group)과 C묶음 Search/Date(Calendar, Command, Date Picker, Combobox)까지 완료(새 dependency: `react-day-picker`, `cmdk`)과 D묶음 Layout/Media(Carousel, Aspect Ratio, Resizable)까지 완료로 3단계 UI가 끝났다(새 dependency: `embla-carousel-react`, `react-resizable-panels`). floating surface Semantic 정합성 작업도 완료했다. 4단계 A묶음 독립 UI(Context Menu, Toast/Sonner)까지 완료(새 dependency: `sonner`). 4단계 B묶음 업무 Pattern(Data Table, Filter Bar)까지 완료(새 dependency: `@tanstack/react-table` v9)로 4단계 핵심이 끝났다. Layout Pattern은 GNB·LNB·Page Header·Dashboard Layout까지 완료(`docs/patterns/gnb.md`, `lnb.md`, `page-header.md`, `dashboard-layout.md`, ui-viz 시각 기준)했다. 각 Navigation Mode는 독립 레이아웃을 소유한다. GNB ONLY는 기존 LNB 메뉴 부품을 재사용하는 내부 Sidebar를 허용하며 외곽 배경만 Green Light 2로 적용한다. DASHBOARD ONLY 운영 화면은 전용 Header(48px)·업무 상태 필터 + Content로 구성하고 Sidebar를 금지한다. 운영 최소 폭 960px·내부 가로 스크롤을 유지한다. 기존 DashboardSidebar Export·sidebar slot·1232px 구성은 호환성·검증용이며 신규 운영 Reference가 아니다. LNB 3뎁스(`LNBGroup` 중첩, 2026-10-06)와 모바일 Sheet 중첩 그룹까지 완료(`docs/patterns/lnb.md` §3a). 현재 LNB 모바일은 독립 LNB Mobile Header와 Sheet를 사용한다(`lnb.md` §3b). 과거 GNB+LNB 조합·Brand ownership·gradient 접점 기준은 Navigation Single Mode Policy로 대체되었다. 한 페이지에는 GNB / LNB / DASHBOARD 중 하나만 사용하며 기존 혼합 Story는 verification / VERIFICATION ONLY 조건의 기술 검증에만 한정한다. 경로: UI primitive `packages/ui/src/components/ui`, Pattern `packages/ui/src/patterns`, Pattern 문서 `docs/patterns`. Field는 코드 없이 `docs/components/field.md` 소비 가이드만 둔다.
+- 두 패키지는 서로 의존하지 않으며 `private: false`, compiled dist export(JS·타입·CSS)와 library build가 구현되어 있다. Registry publish 이력은 ZIP 검증 범위 밖이다. Runtime Theme URL Loader와 Theme JSON 독립 산출은 구현되었고 실제 CDN infrastructure/publish pipeline은 미구현이다. CENTER 기준은 `docs/center-graphic/README.md`, `packages/center-graphic/src/`, `src/center/`의 현재 HM 구현과 대표 Story다. 외부 ui_viz owner 자료는 제공된 경우에만 참고하며 필수 실행 경로가 아니다. UI와 CENTER 규격을 섞지 않는다.
+
+> 위 작업 순서는 구현 이력이다. 현재 API·제약은 코드와 Component/Pattern 문서를 대조한다.
+
+## Runtime Theme 구현 (2026-10-06)
+
+- 공개 계약/API: packages/ui/src/theme/contract.ts 및 runtime.ts, @hm-design/ui/theme 진입점. src/theme/preview.ts는 호환 어댑터다.
+- HM Default CSS preset과 defaultRuntimeTheme는 같은 계약이다. Partial override, atomic invalid fallback, cleanup, Global/독립 Scoped override를 지원한다.
+- Scoped Theme의 Portal은 DOM 경계를 따른다. SelectContent/PopoverContent/DatePicker에는 현재 container 전달 API가 없으므로 wrapper Scoped Theme가 body Portal에 자동 전달되지 않는다. Global Theme는 Portal에도 적용된다. Scoped popup 지원은 별도 API 검토 항목이다.
+- Runtime의 fetch/resolve/load API는 구현되어 있고 실제 CDN/Publish/pipeline은 미구현이다. `build:themes`는 UI/Graphic build 없이 JSON만 산출한다. Theme Runtime은 HM_THEME / Theme infrastructure이며 새 Component HM_CUSTOM 항목이 아니다.
+- 상세 계약·제한·사용법: `docs/guidelines/runtime-theme.md`, `docs/guidelines/runtime-theme-contract.md`.
+
diff --git a/PORTABLE-R4-VERIFICATION.md b/PORTABLE-R4-VERIFICATION.md
new file mode 100644
index 0000000..ffc3ca5
--- /dev/null
+++ b/PORTABLE-R4-VERIFICATION.md
@@ -0,0 +1,15 @@
+# HMDesignTest Portable r4 Verification
+
+- Candidate: `HMDesignTest-Portable-Test-r4-final-2026-10-08.zip`
+- 기준: `HMDesignTest-Portable-Test-r3.zip` 보존, r3 구조를 staging 기준으로 재사용
+- Storybook 정적 빌드: PASS (`npm run build-storybook`)
+- Dashboard Production export build: PASS (`npm run build:dashboard-export`)
+- Dashboard 엔트리: PASS — `src/exports/dashboard/main.tsx`가 `DashboardScreen`을 사용하며 Storybook 모듈을 import하지 않음
+- Portable HTTP server: PASS — 내장 Node HTTP 서버와 `/storybook-static` 정적 경로 확인
+- Dashboard 별도 경로: NOT RUN — 현재 포터블 서버는 Dashboard export를 별도 URL로 서비스하지 않으며, 실행기 변경은 범위 밖
+- Storybook 대표 Dashboard: PASS 대상 — `/` 및 Storybook story route로 제공
+- 브라우저 실제 확인: NOT RUN (현재 환경에서 포터블 브라우저 검증을 수행하지 않음)
+- H-2: Storybook과 분리된 `scripts/h2-preview.mjs` 및 관련 소스 유지
+- 기존 r3 ZIP: 보존 확인
+
+경고: Storybook 빌드에서 기존 CSS arbitrary-value 경고와 chunk-size 경고가 출력되었으나 빌드는 성공했다.
diff --git a/PORTABLE-R5-CANDIDATE-VERIFICATION.md b/PORTABLE-R5-CANDIDATE-VERIFICATION.md
new file mode 100644
index 0000000..23d7a9a
--- /dev/null
+++ b/PORTABLE-R5-CANDIDATE-VERIFICATION.md
@@ -0,0 +1,53 @@
+# HMDesignTest Portable r5 candidate verification
+
+## Result
+
+PORTABLE EXECUTION RESULT: PARTIAL
+
+The portable server starts with the bundled Node runtime and prints separate Storybook and Dashboard URLs. The r5 candidate routes `/` to `storybook-static/` and `/dashboard/` to `dist-dashboard/` without changing UI source, Theme, Component, Pattern, or Storybook files.
+
+## Candidate artifact
+
+- Path: `HMDesignTest-Portable-Test-r5-candidate-2026-10-08.zip`
+- Size: 108,362,960 bytes
+- SHA-256: `2CD5BE30C6B6D7CCAC21D1081E9A0152CDA402D3D2F9218CCBCA6E253A0B9A38`
+- ZIP entries: 2,065
+- Duplicate archive paths: none
+
+## Portable execution
+
+- Bundled runtime: present at `HMDesignTest/runtime/node/node.exe`
+- Server startup: PASS; bundled Node v22.23.3 started the candidate server.
+- Example selected port during verification: 6009.
+- Printed addresses: `http://127.0.0.1:6009/` and `http://127.0.0.1:6009/dashboard/`.
+- Port collision fallback: retained; server increments from 6007 through 6023 and then fails cleanly if all are unavailable.
+- Binding: retained at `127.0.0.1`.
+- Path traversal and backslash rejection: retained.
+
+## Static checks
+
+- Storybook entry present: `HMDesignTest/storybook-static/index.html`
+- Dashboard entry present: `HMDesignTest/dist-dashboard/index.html`
+- Dashboard JS present: `HMDesignTest/dist-dashboard/assets/dashboard-export.js`
+- Dashboard CSS present: `HMDesignTest/dist-dashboard/assets/style-BJ7gb3jH.css`
+- Dashboard Noto Sans KR font present: `HMDesignTest/dist-dashboard/assets/NotoSansKR-variable-k7NQXPol.ttf`
+- Dashboard source is the production export; no Storybook story import was added.
+- r3/r4 preserved: PASS; no existing archive was overwritten.
+
+## Browser verification
+
+NOT RUN for the r5 candidate. The available browser could not connect to the locally spawned candidate server (`ERR_CONNECTION_TIMED_OUT`), and the shell HTTP client was blocked from accessing the local test socket by the execution sandbox. Therefore HTTP 200, rendered production Dashboard, filter/search/reset interaction, and console-error checks are not claimed as PASS.
+
+## Inventory comparison
+
+| Archive | Bytes | Entries | SHA-256 |
+|---|---:|---:|---|
+| r3 | 59,256,057 | 1,214 | `DA1F6DAD261D3F780BEE1E70F734F2464C5E6648A8BE94A75720B6F3D8F8FF08` |
+| r4 | 108,362,799 | 2,065 | `3ED64BAD1E9BF062CC168B6F253C6905244F3645F75EE70CFA7FAAB63C9A1F31` |
+| r5 candidate | 108,362,960 | 2,065 | `2CD5BE30C6B6D7CCAC21D1081E9A0152CDA402D3D2F9218CCBCA6E253A0B9A38` |
+
+The r5 delta from r4 is limited to the launcher/server patch and ZIP metadata; no duplicate archive paths were found.
+
+## User test status
+
+Not yet fully user-testable as a verified release because browser-level HTTP/rendering and interaction checks remain NOT RUN. The candidate is suitable for a manual local test once the ZIP is extracted on a machine where localhost browser access is permitted.
diff --git a/PORTABLE-R5-VERIFICATION.md b/PORTABLE-R5-VERIFICATION.md
new file mode 100644
index 0000000..88613a4
--- /dev/null
+++ b/PORTABLE-R5-VERIFICATION.md
@@ -0,0 +1,42 @@
+# HMDesignTest Portable r5 Verification
+
+## Result
+
+PORTABLE R5 AUTO OPEN RESULT: PARTIAL
+
+## Artifact
+
+- Path: `HMDesignTest-Portable-Test-r5-2026-10-08.zip`
+- Size: `108,382,038` bytes
+- SHA-256: `547FB98292406D5BF3FC8B8EF4FA229196115FB1C3111358B5F56EE85D6FC234`
+- ZIP entries: `2,062`
+- Inventory file count: `1,946`
+- ZIP root: `HMDesignTest/`
+
+## Applied change
+
+- Reused the existing candidate/r4-derived portable contents.
+- Replaced only `HMDesignTest/preview-server.cjs` with the current source launcher.
+- Browser launch occurs from the server `listening` event, uses the selected `127.0.0.1` port, invokes the Windows default browser through `cmd /c start`, and is guarded to one launch per process.
+- Browser launch errors are reported while the server remains running and the URL is printed.
+
+## Verification
+
+| Check | Result | Evidence |
+|---|---|---|
+| Bundled Node runtime | PASS | Node v22.23.3 (x64) started the staged server |
+| Default port 6007 | PASS | Server printed `http://127.0.0.1:6007/` |
+| 6007 collision fallback | PASS | Test occupant remained running; server selected port 6009 and printed its URL |
+| Browser launch code path | PASS by execution path | `listening` invoked the launch function in both runs |
+| Visual browser opened once | NOT RUN | Browser UI was not independently observable in this environment |
+| BAT double-click | NOT RUN | Same limitation; equivalent bundled-node server invocation was run |
+| Korean/space extraction path | NOT RUN | No separate user-style extraction/double-click run performed |
+| Storybook render, Theme, Font, Asset | NOT RUN | No browser-level rendering verification claimed |
+| Dashboard and H-2 | NOT RUN | Not changed or rebuilt |
+
+## Source/archive note
+
+The requested `HMDesignTest-Portable-Test-r4-final-2026-10-08.zip` was not present at the specified path. The existing `HMDesignTest-Portable-Test-r5-candidate-2026-10-08.zip`, together with `PORTABLE-R4-VERIFICATION.md`, was used as the preserved r4-derived staging source. The candidate launcher did not contain the browser patch; only the launcher was replaced.
+
+Original r3/r4 archives were not overwritten. No Git commit/push, npm install/ci, production upload, component/pattern/theme change, or additional ZIP was performed.
+
diff --git a/PORTABLE-R6-VERIFICATION.md b/PORTABLE-R6-VERIFICATION.md
new file mode 100644
index 0000000..7930b6f
--- /dev/null
+++ b/PORTABLE-R6-VERIFICATION.md
@@ -0,0 +1,41 @@
+# HMDesignTest Portable r6 Verification
+
+## Result
+
+PORTABLE R6 DUAL LAUNCH RESULT: PARTIAL
+
+## Artifact
+
+- ZIP: `HMDesignTest-Portable-Test-r6-2026-10-08.zip`
+- Size: `108,409,779` bytes
+- SHA-256: `BCBFDFEE73CA3AE0CBDF8E810DAFAB6535578A655E3334CEB65B0E73F61C0ED0`
+- Source candidate: `HMDesignTest-Portable-Test-r5-candidate-2026-10-08.zip`
+- Source candidate SHA-256: `2CD5BE30C6B6D7CCAC21D1081E9A0152CDA402D3D2F9218CCBCA6E253A0B9A38`
+
+## Packaging verification
+
+- ZIP entries: `1,948` regular files; all paths begin with `HMDesignTest/`.
+- Independent extraction: PASS.
+- Extracted files: `1,948`.
+- Inventory-managed files: `1,946`.
+- Explicitly excluded: `FILE-INVENTORY-R6.json`, `PORTABLE-R6-VERIFICATION.md`.
+- Inventory hash comparison: PASS; `0` mismatches.
+- `node_modules/` and `.git/`: absent.
+- Root layout includes `HMDesignTest/start-preview.bat`, `preview-server.cjs`, `runtime/node/`, `storybook-static/`, `dist-dashboard/`, `packages/`, `themes/`, `docs/`, `AGENTS.md`, `CLAUDE.md`, and `README.md`.
+
+## Execution verification
+
+- Bundled Node: PASS — `v22.23.3 (x64)`.
+- Extracted BAT: PASS — `cmd.exe /c start-preview.bat` launched the bundled server.
+- Default port: PASS — both URLs printed on `6007`.
+- Port fallback: PASS — a second server selected `6009` when lower ports were occupied; both printed URLs used that port.
+- Browser launch path: PASS by execution path — Dashboard and Storybook each have one guarded Windows default-browser launch call after `listening`.
+- Korean/space path: PASS — extracted under `D:\디자인시스템\HMDesignSystem\r6 verify 한글 space\` and BAT started successfully.
+
+## Not run
+
+The shell and available browser could not access the locally spawned localhost socket (`access denied` / `ERR_CONNECTION_TIMED_OUT` or `ERR_CONNECTION_REFUSED`). Therefore HTTP 200, actual browser-rendered Dashboard/Storybook, Theme/font/asset loading in-browser, Dashboard filter/search/reset interaction, and console/runtime error checks are `NOT RUN`, not PASS.
+
+## Scope preservation
+
+Dashboard asset hashes match the current repository `dist-dashboard` outputs. No Component, Pattern, Theme, Storybook, H-2, source, existing ZIP, Git, npm install, full build, commit/push, or upload was performed.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a8c0885
--- /dev/null
+++ b/README.md
@@ -0,0 +1,114 @@
+# HM Design System
+
+React + TypeScript + Vite와 shadcn/Radix 기반 HM 디자인 시스템입니다. UI Component·업무/Layout Pattern·CENTER Graphic을 독립 workspace 패키지와 통합 Storybook으로 확인합니다.
+
+## Navigation 정책
+
+**ONE PAGE = ONE NAVIGATION MODE.** GNB ONLY / LNB ONLY / DASHBOARD ONLY 중 하나를 선택한다. 모바일도 선택한 Navigation 자체의 Responsive Variant를 사용한다. 이 정책은 AI 코드 생성·제안, 신규 페이지, 기존 화면 수정, 프로토타입, Storybook, Production에 동일하게 적용한다. [상세 정책](docs/guidelines/navigation-single-mode.md), [AI 작업 지침](AGENTS.md).
+
+새 화면을 구현하는 AI는 [AI 화면 구현 Quick Start](AGENTS.md#ai-화면-구현-quick-start)의 7단계를 순서대로 따른다. 세부 Component·Pattern·Theme·Runtime 계약과 대표 Story 경로도 그 지침에서 연결한다.
+
+## Storybook Reference와 화면 생성
+
+Storybook은 기존 HM Component·Pattern·Theme·Variant·State·Interaction을 확인하는 Reference 환경이다. 일반적인 업무 화면 생성에서는 신규 화면을 Storybook Story나 사이드바에 등록하지 않고, 대표 Story를 교체하지 않으며, Storybook 실행을 필수 미리보기 경로로 요구하지 않는다. AI는 별도의 React 화면을 만들고 화면별 빌드·필요한 검증과 독립 미리보기를 제공한다. H-2 또는 유사 자동화가 사용 가능한 경우에는 `preview.html`·desktop/mobile 이미지 같은 독립 미리보기 산출에만 사용하며 Storybook 등록 기능으로 취급하지 않는다. Storybook 전용 helper/CSS는 운영 화면에 사용하지 않는다. Component·Pattern 추가/수정, 대표/Verification Story 작성 또는 Storybook Reference 개선을 명시적으로 요청한 경우에만 Storybook을 수정한다.
+
+## 설치 없는 테스트 배포
+
+현재 검증된 테스트 배포 기준은 `HMDesignTest-Portable-Test-r3.zip`입니다. 사전 빌드된 Storybook과 Windows x64 포터블 Node를 포함하며 정확한 포함 범위는 r3의 BUILD-INFO·Inventory를 기준으로 확인합니다. `HMDesignTest-Portable-Test-r2.zip`과 `HMDesignTest-Portable-Test.zip`은 이전 스냅샷 기록으로 보존하며 현재 기준이 아닙니다. 포터블 ZIP의 기본 포트는 6007이고 충돌 시 자동으로 다른 포트를 사용합니다. 개발 저장소 Storybook의 6024와는 별개입니다. 테스트 사용자는 ZIP 해제 → `HMDesignTest/start-preview.bat` 더블클릭 → 표시된 로컬 URL 열기만 수행합니다. 별도 Node/npm 설치, npm 명령, Git 작업 또는 운영 업로드는 필요 없습니다. [실행 및 포함 범위](docs/guidelines/portable-test-distribution.md).
+
+## 오전 소스 ZIP / 개발자 전용 절차 (AI 참조용)
+
+오전 소스 배포의 역사적 기준은 `HMDesignTest.zip`입니다. 당시 전달 구성에서는 `.git` 디렉터리와 Git 이력·원격 연결 정보를 제외하고 `.gitignore`와 소스·Storybook·문서·패키지 설정을 유지했습니다. 이 절의 수량·실행 조건은 오전 ZIP에 대한 기록이며 현재 포터블 r3의 포함 범위는 위 절과 BUILD-INFO를 기준으로 확인합니다. `HMDesignSystem-test-2026-10-08-r4.zip`, `HMDesignSystem-Distribution-Test-v2.zip`, `HMDesignSystem-AI-Reference-Test.zip`은 오전 기준을 대체하지 않습니다.
+
+기준 ZIP에는 UI·Pattern·CENTER Graphic, 공개 API, Theme, Storybook 소스, 문서, 예제, 패키지 dist, lockfile 및 폰트가 포함됩니다. `node_modules`와 `storybook-static`은 포함되지 않으므로 ZIP 단독으로 정적 Storybook을 바로 열 수는 없습니다.
+
+오전 소스 ZIP을 개발 환경으로 실행할 경우 Node.js 20.20.1 / npm 10.8.2 환경의 프로젝트 루트에서 다음을 실행합니다.
+
+```powershell
+# ZIP을 풀고 프로젝트 루트에서 실행
+npm ci
+npm run build:packages
+npm run dev
+npm run storybook
+```
+
+HM 패키지는 ZIP 안의 workspace를 사용하므로 HM Registry 설치가 필요하지 않습니다. `npm ci`로 의존성을 복원하고 `npm run build:packages`로 패키지를 빌드한 뒤 앱과 Storybook을 시작합니다. 정적 Storybook이 필요하면 `npm run build-storybook`을 실행합니다. 이 문서는 배포본의 새 환경 실행 결과를 보증하지 않습니다.
+
+- Storybook: 기준 ZIP의 `npm run storybook`은 기본 포트 6007입니다. 다른 포트는 `npm run storybook -- --port <available-port>`로 지정할 수 있습니다.
+- ZIP 확인 빌드: `npm run build`, `npm run build-storybook`
+
+현재 개발 저장소는 ZIP과 별개로 `npm run storybook` 기본 포트가 6024이며(포터블 ZIP 6007과 통일하지 않음), `npm run build:dashboard-export` → `dist-dashboard/index.html`도 제공합니다. `dist-dashboard`는 H-1(독립 단일 HTML 미리보기 POC, PASS)의 성공 산출물과 동일하지 않으며 ZIP에도 있다고 가정하지 않습니다. H-2(AI 생성 화면의 자동 빌드·캡처·검증)는 Storybook 배포와 별도 기능이며 구현 완료 여부는 현재 파일과 별도 작업 결과로 확인합니다.
+
+## 사용 (workspace)
+
+```ts
+import { Button } from "@hm-design/ui"
+import { CenterTitle, TunnelFacility } from "@hm-design/center-graphic"
+import { DataTable, FilterBar, useDataTable } from "@hm-design/ui" // Patterns: docs/patterns/
+```
+
+```css
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+```
+
+이 CSS entry를 소비 앱 bootstrap에서 import합니다. Dashboard 업무 상태를 표시할 때는 Theme 다음에 `@hm-design/ui/dashboard-status.css`를 추가하고 [기존 Badge 색상 mapping과 React 예제](docs/patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)를 적용합니다. API import나 Status CSS만으로 Badge 색상이 자동 선택되지는 않습니다.
+
+별도 React 앱은 [Tailwind v4 검색 범위 가이드](docs/guidelines/runtime-portability.md#21-tailwind-v4-소비자-검색-범위)를 확인합니다. `source("./")`는 CSS 위치에 따라 범위가 달라지며 HM `tailwind.css`의 명시 source를 유지해야 합니다. 공개 package Theme는 동봉된 `dist/fonts/`를 상대 URL로 참조합니다. 개발 저장소·포터블 ZIP·React 소비자·단일 HTML의 차이는 [폰트·Asset 경로](docs/guidelines/runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)를 따릅니다.
+
+화면 생성 Reference: [Navigation 선택 근거](docs/guidelines/navigation-single-mode.md#선택-근거), [GNB Desktop·Mobile 구성](docs/patterns/gnb.md#8-desktop--mobile)과 [내부 Sidebar](docs/patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08), [FilterBar 조회·초기화 소비 예제](docs/patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제). 일반 업무 목록의 모드를 임의 확정하거나 FilterBar에 조회 API가 있다고 가정하지 않습니다.
+
+루트 `package.json`의 `workspaces`(`packages/*`)로 연결됩니다. 확인: `npm run typecheck`, `npm run build`. 두 패키지는 `private: false`이며 ESM JS·타입 선언·CSS를 `dist`에서 export합니다. `npm run build:packages`로 재빌드할 수 있고, Registry publish 이력은 이번 ZIP 검증 범위에 포함하지 않습니다.
+
+## 파일 위치
+
+아래 경로는 저장소 루트(압축 해제 시 `HMDesignTest/`) 기준입니다. `packages/ui/` 하위 경로도 전체 상대경로로 표기합니다.
+
+- `packages/ui/` (`@hm-design/ui`): UI Component·업무/Layout Pattern과 HM Theme
+  - `packages/ui/src/components/ui/`: shadcn 기반 컴포넌트, `packages/ui/src/patterns/`: 조합 Pattern(Data Table, Filter Bar 등), `packages/ui/src/index.ts`: 공개 export
+  - `packages/ui/src/theme/primitives.css`, `packages/ui/src/theme/default.css`: Default JSON에서 생성한 package fallback과 Semantic/shadcn 연결
+  - `packages/ui/src/theme/<component>.css`: 컴포넌트별 Theme 매핑과 상태 스타일
+  - `packages/ui/src/theme.css`: Theme CSS 진입점, `packages/ui/src/tailwind.css`: Tailwind 쪽 설정
+- `packages/center-graphic/` (`@hm-design/center-graphic`): CENTER 그래픽(제목·정보·노선/공간·시설물), `@hm-design/ui`에 의존하지 않음
+- `src/center/`: CENTER Storybook (`Center Graphic` 그룹)
+- `docs/center-graphic/`: CENTER 구현 기준 문서
+- `src/App.tsx`: 기본 UI 확인 화면 (`@hm-design/ui` 사용)
+- `src/hm-theme.css`: App/Storybook 예시 화면 스타일. 장식용 시제품 색상은 고정값으로 남아 있음
+- `themes/default.json`, `themes/service-example.json`: 공식 Default 컬러와 partial 서비스 예제; UI package와 별도 배포
+- `scripts/theme-templates/`, `scripts/theme-defaults.mjs`: JSON에서 package fallback CSS/데이터 생성; 값은 JSON만 편집
+- `packages/ui/src/theme/contract.ts`, `runtime.ts`, `loader.ts`: 공개 Runtime 계약·검증·Global/Scoped 적용 및 URL Loader. `@hm-design/ui/theme`으로 export
+- `src/theme/preview.ts`: 패키지 Runtime API의 호환 어댑터. `themes/drafts/`는 Theme 초안 자료
+- `src/components/*.stories.tsx`, `src/patterns/*.stories.tsx`: Component/Pattern 대표 Story와 숨김 verification Story
+- `src/theme/*.stories.tsx`: Default/External 및 Runtime 계약 검증 Story
+- `docs/components/`: 컴포넌트별 현재 구현 기준 문서
+- `public/fonts/`: 기존 자료의 Noto Sans KR 글꼴과 라이선스
+- `docs/guidelines/`: 프로젝트 지침·구현 원칙·Theme Token·적용/배포 가이드
+- 로컬 검증·감사·진단 자료는 테스트 ZIP에서 제외합니다.
+
+## 참고 범위
+
+초기 디자인의 색상, Typography, Radius와 Button·Input·Select·Dialog에는 외부 ui_viz Reference를 참고했습니다. 이 Reference는 ZIP에 포함되지 않으며 실행에 필요하지 않습니다. 현재 Source of Truth는 HM Component/Pattern 구현, 대표 Storybook Story와 아래 공식 정책 문서입니다.
+
+HM Default 컬러의 운영 원본은 `themes/default.json`이며 생성한 CSS preset은 최초 렌더와 네트워크 실패 시 package fallback입니다. 외부 Theme도 같은 공개 계약을 사용합니다. Active와 Focus는 독립 Semantic이고 Global override와 독립 Scoped override를 지원합니다. `Theme/Designer Playground/Editor`에서 JSON URL/파일 Preview와 컬러 편집·Reset·Export/Import를 지원합니다. Portal은 실제 DOM scope를 따릅니다.
+
+Component Mapping은 Semantic/Theme palette를 참조하며 기본 API로 HM 스타일이 적용됩니다. Input/Select 크기 규격, Calendar/Date Picker, GNB/LNB 3Depth·Standalone Mobile, Dashboard 내부 Navigation까지 구현되어 있습니다. 현재 상태와 제한은 `docs/components/`, `docs/patterns/`, `docs/guidelines/runtime-theme.md`에서 확인합니다.
+
+하나의 Git Repository에서 UI/Graphic/Theme를 관리합니다. UI는 `.`·`/theme`·`/theme.css`·`/dashboard-status.css`·`/tailwind.css`, CENTER는 `.`·`/reference`·`/style.css`를 compiled dist에서 export합니다. Runtime URL Loader와 Theme JSON 독립 산출은 구현했습니다. `npm run build:themes`는 `theme-dist/themes/`만 생성하며 UI/Graphic build나 version up을 수행하지 않습니다. Default fallback을 새 package에 반영할 때는 `npm run generate:theme-defaults`를 사용합니다. 상세 적용·배포: [Theme delivery](docs/guidelines/theme-delivery.md). 디자인팀 사용법: [Theme guide](docs/guidelines/designer-theme-guide.md).
+
+## 공식 가이드 / Source of Truth
+
+- AI 구현·Component 재사용: [AGENTS](AGENTS.md), [Component 구현 원칙](docs/guidelines/shadcn-기반-구현-원칙.md)
+- Component / Pattern 탐색: [통합 Reference Index](docs/guidelines/component-pattern-reference.md), `packages/ui/src/index.ts`, 구현 소스·사용 문서·대표 Story
+- Theme: [Token 정책](docs/guidelines/테마-토큰-가이드.md), [Runtime 계약·사용법](docs/guidelines/runtime-theme.md)
+- Runtime portability: [Runtime / AI Independent Portability Policy](docs/guidelines/runtime-portability.md)
+- Navigation: [단일 모드 정책](docs/guidelines/navigation-single-mode.md)
+- Dashboard: [Dashboard Pattern](docs/patterns/dashboard-layout.md)
+- CENTER: [CENTER 구현·사용 범위](docs/center-graphic/README.md)
+- 프로젝트·서비스 적용: [프로젝트 지침](docs/guidelines/프로젝트-지침.md), [개발 적용](docs/guidelines/개발-적용-가이드.md)
+
+## Package Registry / Publish (별도 내부 운영 정보)
+
+패키지 build와 Registry publish는 별도 단계입니다. Registry 설치·publish·실제 CDN 운영은 이번 테스트 ZIP의 실행 조건이나 검증 범위가 아닙니다. 서비스 배포·버전·캐시·롤백 계획은 [운영/배포 가이드](docs/guidelines/운영-배포-가이드.md)를 따릅니다.
+
+CENTER Graphic은 현재 내부 테스트/검토 목적 범위에서 제공합니다. 외부 공개 또는 사외 배포 전 별도 License 확정이 필요합니다. 임의의 오픈소스 License를 부여하지 않습니다.
diff --git a/docs/center-graphic/README.md b/docs/center-graphic/README.md
new file mode 100644
index 0000000..ff6abbc
--- /dev/null
+++ b/docs/center-graphic/README.md
@@ -0,0 +1,100 @@
+# Center Graphic (`@hm-design/center-graphic`)
+
+CENTER 도메인(제목 · 정보 표기 · 노선/공간 · 시설물)의 현재 HM 구현 기준 문서. UI 컴포넌트 문서(`docs/components/`)와 별개이며 UI 규격을 근거로 쓰지 않는다. 공통 원칙은 `docs/guidelines/프로젝트-지침.md` §5.1을 따른다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | ui-viz **CENTER Web Reference 구현을 TypeScript 패키지로 이식** (Title · Information · Spatial · Facility). 규격을 새로 만들거나 재해석하지 않았다 |
+| 기준일 | 2026-10-02 |
+| 패키지 | `packages/center-graphic` (`@hm-design/center-graphic`, `private: false`, compiled dist JS·타입·CSS export) |
+| Storybook | 최상위 그룹 `Center Graphic` (`src/center/*.stories.tsx`). UI는 기존 `Components` 유지 |
+| 의존 | `@hm-design/ui`에 의존하지 않음. peer는 `react`, `react-dom`뿐 |
+
+## 2. 원본 근거
+
+현재 Source of Truth는 이 문서, `packages/center-graphic/src/`와 `src/center/`의 대표 Story다. 아래 표는 초기 이식 당시 외부 ui_viz Reference의 출처 목록이며 ZIP 내부 경로가 아니다. 외부 자료는 ZIP에 포함되지 않고 실행에 필요하지 않으며 제공된 경우에만 참고한다.
+
+| 파일 | 역할 |
+|---|---|
+| `docs/governance/center-domain.md` (§0.1, §1, §2.4, §5) | CENTER 색인, 상태 어휘, 미결(TBD/HOLD) registry |
+| `docs/usage/center-usage.md` | CENTER 구성과 사용 순서, 승인 asset 위치 |
+| `docs/visualization/README.md` | visualization owner 문서 목록 |
+| `docs/foundation/center-typography.md` (family, 폰트 fallback 부분) | 글꼴 Noto Sans KR |
+| `implementations/web/center/components/*.jsx, *.css` | Web Reference 구현 (이식 원본) |
+| `implementations/web/assets/center/facility/` | Reference가 불러오는 runtime SVG 128개 |
+| `assets/center/source/facility/` | 승인 Canonical Asset 128개 (runtime 사본과 바이트 비교용) |
+| `implementations/web/storybook/center/*.stories.jsx`, `center-shared.jsx` | Story 구성 참고 |
+
+외부 Reference가 제공된 경우의 참고 우선순위: owner 문서의 명시적 상태(`CONFIRMED_CANONICAL` / `CONFIRMED_BY_DESIGN` → `PLATFORM_MAPPING` → `Candidate`/`TBD`/`HOLD`) → 승인 asset → Web Reference 구현. `docs/visualization/*.md`는 이름에 `center-`가 없어도 CENTER owner 문서다.
+
+**읽지 않은 것(검증 한계)**: owner 문서(`route.md`, `facility.md`, `spatial-map.md`, `spatial-section.md`, `center-title.md`, `center-information-*.md`, `center-scale.md`, `center-color.md` 등)의 본문 전체와 `_local/`, `generated/`, `verification/`. 이식은 Web Reference 구현의 동작·값을 그대로 가져온 것이며, 구현 값이 owner 문서의 각 절과 일치하는지를 절 단위로 다시 대조하지는 않았다.
+
+문서 간 충돌: 읽은 범위에서 값 충돌은 발견하지 못했다. Reference 코드 주석이 말하는 `KNOWN_DEVIATION`(예: 구도·면도·이도 윤곽, 고속도로 노선명 높이)은 원본 그대로 보존된다.
+
+## 3. 구현 목록
+
+| 영역 | 컴포넌트 | 비고 |
+|---|---|---|
+| 배율 | `CenterRepresentation` | 제작 대상 7680×2160 = 1.00, 3840×2160 = 0.75 (`CONFIRMED_BY_DESIGN` 배율 쌍). 다른 크기는 `PREVIEW_ONLY` 1.00 |
+| 제목 | `CenterTitle` | 유형 1–4 (`projectName`, `projectNameRoute`, `routeProjectName`, `routeProjectNameRoute`). HTML 텍스트 + CSS, Source SVG 미사용 |
+| 정보 | `CenterInformationBox`(list / definition), `CenterInformationTable`, `CenterInformationEmphasis` | 팔레트 5종 `CENTER_INFORMATION_PALETTES`. chevron / arrow는 인라인 벡터 |
+| 노선/공간 | `RouteLine`, `ProjectRoute`, `RouteNameBadge`, `RouteNumberBadge`, `DirectionBadge`, `AdministrativeLabel`, `NorthArrow`, `BoundaryLine`, `ProjectExtent` | 노선 분류 7종 `ROUTE_CLASSES`, 상태 `existing` / `underConstruction` / `planned`. SVG asset을 불러오지 않고 규칙으로 그림 |
+| 시설물 | `TunnelFacility`, `LocalAssetFacility` + `FACILITY_CONFIGS`(bridge · intersection · junction · interchange), `RoadsideFacilityTag`, `CompactFacilityConnection` | 승인 SVG 128개를 **바이트 그대로** 사용. 좌·중·우 조각 중 중앙만 가로로 확장 |
+
+구현하지 않은 것: 표시 배율 HOLD(Q2b·Q3) 화면, 통합 배치(`IntegratedPlacementScene`, `PREVIEW_ONLY`), `CenterCompositions` · Facility `Assets` Story, POI/Terrain Symbol(`symbol.md`, 구현 없음), 후보(Candidate) SVG 64종.
+
+## 4. 규격
+
+초기 수치와 규칙의 출처는 외부 ui-viz owner 문서다. 현재 HM 구현·검토는 포함된 코드·대표 Story와 이 문서를 기준으로 하며 외부 자료 접근을 전제로 하지 않는다. 구현에서 확인한 값:
+
+- 시설물 총 너비(기준 이름): 터널 위치도 210 · 실사화 220 (Source reference total과 일치).
+- 노선: 중심선 18u, 윤곽 중심선의 20%, 그림자 층 순서 Shadow → Outline → Primary Stroke(`CONFIRMED`).
+- 글꼴: Noto Sans KR(Canonical). 폰트 파일 배포와 fallback 순서는 `PLATFORM_MAPPING`/`TBD`이며 이 패키지는 폰트를 포함하지 않는다.
+- 상태: 노선만 상태(기본/공사중/계획)를 가진다. Facility는 정적이며 Selected/Hover가 없다.
+
+## 5. Public API
+
+```ts
+import { CenterRepresentation, CenterTitle, CenterInformationBox, RouteLine, TunnelFacility, LocalAssetFacility, FACILITY_CONFIGS } from "@hm-design/center-graphic"
+// Storybook 검수용 demo 페이지 (컴포넌트 API 아님)
+import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"
+```
+
+전체 export 목록은 `packages/center-graphic/src/index.ts`. Reference 코드의 `className` 등 기존 prop은 그대로이며 타입만 추가했다(`CenterTitleComposition`, `RouteClassKey`, `FacilityConfig` 등).
+
+## 6. Token / Style
+
+- CENTER 전용 token은 별도 파일 없이 각 컴포넌트 CSS 안에 있다(`--cid-*`, `--csi-*`, `--tunnel-*` 등). UI의 `--hm-*` token을 쓰지 않는다.
+- CSS는 컴포넌트가 import하므로 별도 theme.css entry를 만들지 않았다.
+- `--center-font-family`: Reference CSS가 UI 쪽 `--font-family-base`를 참조하던 두 곳을 CENTER 전용 변수로 바꿨다(기본값 `'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif` — Title이 이미 쓰던 체인, FNT-03 승인 fallback). 독립성을 위한 유일한 CSS 변경이다.
+- Reference **demo 프레임**(`.cid-demo__*`, `.center-title-reference__*`, `.center-representation__note`)은 `--color-fg-secondary` 등 외부 token을 읽는다. 그래픽 자체는 쓰지 않으며, Storybook은 `src/center/center-stories.css`에서 값을 공급한다.
+
+## 7. Storybook
+
+`Center Graphic` 그룹(기본 sidebar): `Overview`, `Title`, `Information`, `Spatial`, `Facility`(터널 · 교량 · 교차로 · 분기점 · 나들목 · 휴게소·졸음쉼터 · 연계 시설물), verification 숨김: Title `Playground`, Facility `직접 테스트 (터널)`. 제작 대상 해상도는 주소 `?centerResolution=3840x2160`으로 지정한다.
+
+## 8. 미확정 / 보류 (원본 기준)
+
+center-domain.md §5 registry를 따른다: 표시 배율 Q2b·Q3 `HOLD`, Facility §12.24 `OWNER_REVIEW`, Information 일부 `TBD`/`Candidate`, Title Resolution B `TBD`, 전체 layer order·collision `TBD`, 철도 윤곽 두께·line join `TBD`, `symbol.md` 정확한 기하·팔레트 `TBD`, 폰트 binary 승인 `TBD`. Storybook `Overview`에 상태 표가 있다. 이 구현은 위 항목을 확정하지 않는다.
+
+## 9. 관련 파일
+
+```
+packages/center-graphic/src/index.ts, reference.ts, env.d.ts
+packages/center-graphic/src/components/*.tsx, *.css   (7개 컴포넌트)
+packages/center-graphic/src/assets/facility/          (SVG 128)
+src/center/*.stories.tsx, center-shared.tsx, center-stories.css
+```
+
+## 10. 검증 상태
+
+- TypeScript: 루트 `npm run typecheck`(두 패키지 포함) 통과. `npm run build` 통과(루트 Demo는 center-graphic을 import하지 않는다).
+- Storybook: 11개 Center story가 렌더되고 오류 없음. 11개 story의 `img` 전부 로드(깨진 이미지 0). 터널 기준 이름의 총 너비가 위치도 210 · 실사화 220으로 reference total과 일치. Title 유형 1–2, Spatial 노선 영역, Facility 터널 화면을 눈으로 확인.
+- 승인 asset 바이트 일치: 패키지의 SVG 128개(batch 122 + 터널 6) 전부가 `assets/center/source/facility/` 승인 원본과 바이트 동일(상이 0, 누락 0).
+- 미확인: 원본 Storybook과의 픽셀 단위 비교, owner 문서 절 단위 대조, 3840×2160(0.75) 화면, 교량·교차로·분기점·나들목·휴게소·연계 시설물·Information 화면의 눈 확인(렌더 오류와 이미지 로드만 확인), 접근성/긴 label 추가 검증.
+
+## 내부 테스트 사용 범위 / License
+
+CENTER Graphic은 현재 내부 테스트/검토 목적 범위에서 제공합니다. CENTER 자체 License는 미확정이며 외부 공개 또는 사외 배포 전 별도 License 확정이 필요합니다. 특정 오픈소스 License를 부여하지 않습니다.
diff --git a/docs/components/accordion.md b/docs/components/accordion.md
new file mode 100644
index 0000000..7b92e95
--- /dev/null
+++ b/docs/components/accordion.md
@@ -0,0 +1,112 @@
+# Accordion
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Accordion 고유의 API·Token·상태·결정만 기록한다. Collapsible(`collapsible.md`)과 값을 공유하지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Accordion (Radix `Accordion`) |
+| 대표 Story | `Components/Disclosure/Accordion` → `All` (이름 "Accordion") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Accordion이 컴포넌트 이름으로만 있고 규격은 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계(fg, stroke, divider 계열 Primitive)로 새로 정했다.
+- **구현 방식**: shadcn / Radix Accordion 구조(Root·Item·Header·Trigger·Content), shadcn chevron과 open/close animation을 유지하고 theme CSS로 HM 스타일을 연결.
+- **Collapsible과의 구분**: Accordion은 여러 item이 연속된 정보 구조라 item 사이 divider가 구조를 만든다. 단일 독립 disclosure는 Collapsible을 쓴다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 | 비고 |
+|---|---|---|
+| Container | 바깥 박스·배경 없음 | |
+| Item divider | 1px `--hm-sem-stroke-input-default`, 마지막 item 제외 | Dialog·Card와 같은 윤곽색(값 참조만) |
+| Trigger | min-height 48px, padding `12px 0`, gap 16px, 위 정렬이 아니라 세로 가운데 | |
+| Trigger typography | 16 / 24 / 500 | |
+| Trigger 전경 | `--hm-sem-fg-primary` | |
+| Indicator | shadcn `ChevronDownIcon` 20px, `--hm-sem-fg-secondary`, 열리면 180° 회전(200ms) | shadcn 유지 |
+| Content | 14 / 20 / 400, `--hm-sem-fg-primary`, 아래 padding 16px | 안쪽 div에 padding |
+| 긴 텍스트 | `overflow-wrap: anywhere`, 고정 높이 없음 | |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Closed / Open | Radix `data-state` |
+| Hover | Trigger background `transparent`, cursor pointer. 기존 underline/focus 정책 유지, disabled 제외 |
+| Focus (`:focus-visible`) | shadcn ring (`ring-3 ring-ring/50`) 유지 |
+| Disabled | `opacity: 0.6`(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), `cursor: not-allowed`, 키보드 이동에서 제외 |
+| Open / Close animation | shadcn `accordion-down` / `accordion-up` 0.2s ease-out (height). 첫 렌더에서는 Radix가 animation을 막는다 |
+
+## 5. API
+
+Radix Accordion props 그대로. export: `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`.
+
+- `Accordion`: `type="single" | "multiple"`, `collapsible`(single), `value`/`defaultValue`/`onValueChange`, `disabled`, `orientation`, `dir`.
+- `AccordionItem`: `value`(필수), `disabled`.
+- `AccordionTrigger`: chevron을 내장한다. 출력 `data-slot="accordion-trigger"`, 아이콘 `data-slot="accordion-trigger-icon"`.
+- `AccordionContent`: `className`은 안쪽 div(`data-slot="accordion-content-inner"`)에 적용된다. Radix Content(`data-slot="accordion-content"`)는 `overflow-hidden`과 animation만 가진다.
+- `variant`, `size`, `appearance` 등 HM 전용 prop은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/accordion.css` (`--hm-accordion-*`).
+
+`text`, `content-text`, `divider-width`, `divider-color`, `trigger-min-height`, `trigger-padding-y`, `trigger-gap`, `trigger-font-size|line-height|font-weight`, `icon-size`, `icon-color`, `content-font-size|line-height`, `content-padding-bottom`, `disabled-opacity`. Semantic과 Theme palette만 참조하고 다른 컴포넌트의 Component Token을 쓰지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`aria-expanded`, `aria-controls`, `role=region`)·키보드(Arrow Up/Down은 trigger 사이 이동하며 끝에서 순환, Home/End, Enter/Space)·single/multiple/collapsible 동작, Header 요소(`h3`), `data-slot`, `cn(..., className)`, chevron 회전, `accordion-down/up` animation, focus ring.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `py-4 text-sm font-medium hover:underline`, `size-4` 아이콘, Item `border-b`, Content `pb-4 text-sm` class를 제거하고 theme CSS로 이전.
+- shadcn은 Content 안쪽 div가 없는 구조도 있었으나 height animation이 padding에 의해 흔들리지 않도록 padding은 안쪽 div에 둔다.
+- Trigger의 `disabled:pointer-events-none`을 `disabled:cursor-not-allowed`로 교체(커서가 보이도록).
+- animation을 `animate-[accordion-down_0.2s_ease-out]` 임의 값으로 연결(`animate-accordion-*` utility theme 변수가 이 패키지에 없다. keyframe은 `shadcn/tailwind.css`가 제공).
+
+## 9. Storybook
+
+- 대표 Story `All`("Accordion"): `StateBoard`로 Single(첫 항목 열림), Collapsible Single, Multiple(두 항목 열림), Disabled Item, Long Content(여러 줄 Trigger + 긴 콘텐츠 + 공백 없는 문자열)를 한 페이지에 둔다. 모두 실제 클릭·키보드로 동작.
+- verification: `Single`, `Multiple`, `Disabled`, `Long Content`.
+- meta에 `component`를 지정하지 않는다(Accordion props가 `single | multiple` union이라 args 없는 Story가 타입을 통과하지 못함).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(48px, 16/24/500, padding, divider 색, Disabled opacity 0.6)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- 현재 Hover는 `transparent`다. Focus Light 2 50% 3px ring과 Disabled opacity 0.6·cursor not-allowed는 유지.
+- Indicator는 shadcn chevron 유지(Select의 HM glyph와 별개). 별도 Source glyph 없음.
+- Motion 규칙이 없어 shadcn animation 유지. `prefers-reduced-motion` 대응은 추가하지 않았다(기존 구현에도 없음).
+- Container 외곽 박스/Card형 variant는 만들지 않았다.
+- 소비 조합: Trigger 안 아이콘·부가 정보 슬롯은 정의하지 않았다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/accordion.tsx
+packages/ui/src/theme/accordion.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/accordion.stories.tsx
+```
+
+## 13. 검증 상태
+
+> HISTORICAL_RECORD: 아래 날짜별 검증은 당시 구현의 기록이다. 과거 soft surface 측정은 보존하며, 현재 Hover 규격은 §4의 `transparent`를 따른다.
+
+- 2026-10-06 Visual QA: 1280/1024/768/390px에서 Closed/Open Hover의 전체 soft surface·pointer, Focus 3px ring, Disabled opacity 0.6·not-allowed 및 가로 overflow 없음 확인. `typecheck`, `build`, `build-storybook` 통과.
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): ArrowDown으로 trigger 이동(비활성 항목 건너뜀, 끝에서 처음으로 순환), Home/End, Enter로 열기, Space로 닫기, single(다른 항목을 열면 이전 항목 닫힘, 열린 항목 재클릭은 닫히지 않음), collapsible single(재클릭으로 모두 닫힘), multiple(여러 항목 동시 열림), disabled 항목 클릭 무반응(`disabled`, `data-disabled`).
+- animation: 열 때 `accordion-down`이 적용되고 높이가 5 → 36px로 변하는 것을 샘플링으로 확인.
+- computed style: trigger 48px·16/24/500, 전경 `rgb(10,34,29)`, divider `1px rgb(222,219,210)`, icon 20px `rgb(110,103,89)`, content 14/20·아래 padding 16px. 긴 콘텐츠에서 가로 overflow 없음, 긴 Trigger는 여러 줄로 줄바꿈.
+- 미확인: ArrowUp(ArrowDown과 대칭), 닫힘 animation 시각, 실제 pointer hover/focus ring 시각, 390px 폭.
diff --git a/docs/components/alert-dialog.md b/docs/components/alert-dialog.md
new file mode 100644
index 0000000..b8d9a98
--- /dev/null
+++ b/docs/components/alert-dialog.md
@@ -0,0 +1,108 @@
+# Alert Dialog
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Alert Dialog 고유의 API·Token·상태·결정만 기록한다. Dialog(`dialog.md`)와 값을 공유하지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Alert Dialog (Radix `AlertDialog`) |
+| 대표 Story | `Components/Overlay/Alert Dialog` → `All` (이름 "Alert Dialog") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 Dialog 문서가 Alert Dialog를 FOLLOW_UP(DIALOG-03)으로만 두고 규격은 없다. 의도(확인·취소를 명시적으로 요구하는 중요한 결정)를 참고했다. 현재 Button 조합은 사용자 확정 규칙에 따라 일반 확인은 취소 Gray Solid / 확인 Green Solid, 삭제 확인은 취소 Gray Outline / 삭제 Red Outline이며 같은 세트의 appearance·size를 통일한다.
+- **현재 HM 규격**: 아래 §3~§4. Dialog의 접근성 원칙과 `asChild` 처리 규칙은 재사용하고 수치는 현재 HM Semantic으로 새로 정했다.
+- **구현 방식**: shadcn / Radix AlertDialog 구조 유지. Dialog + destructive 플래그로 합치지 않고 별도 컴포넌트로 둔다.
+- **Dialog와의 차이**: Close(X) 없음, 바깥 클릭으로 닫히지 않음, 초기 focus가 Cancel, Body·Header divider 없음, 폭 400px 고정 상한.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Surface / 전경 | `--hm-sem-bg-surface` / `--hm-sem-fg-primary` |
+| Border / Radius / Shadow | 1px `--hm-sem-stroke-input-default` / 8px / `0 0 12px rgb(0 0 0 / .2)` |
+| 위치 | viewport 가운데(shadcn 기본) |
+| 폭 | `min(400px, 100vw − 32px)`, 최대 높이 `100dvh − 32px`(넘치면 content scroll) |
+| Padding | 24px 사방 |
+| Title | 18 / 28 / 700 |
+| Description | 14 / 20 / 400, `--hm-sem-fg-secondary`, Title과 gap 8px |
+| Footer(Actions) | Header와 24px 간격, gap 8px, 오른쪽 정렬(좁은 화면은 세로, Cancel이 아래) |
+| Action / Cancel | HM Button(아래 §5) |
+| Overlay / animation | shadcn 기본(`bg-black/10` + blur, fade + zoom) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Closed / Open | Radix `data-state`, 열림 시 modal, 배경 aria-hidden, scroll lock, `role=alertdialog` |
+| 초기 focus | **Cancel**(Radix AlertDialog 기본: 파괴적 action 대신 안전한 쪽) |
+| 닫힘 조건 | Cancel, Action, Escape. **바깥 클릭으로는 닫히지 않음** |
+| focus 복귀 | 닫히면 trigger로 복귀 |
+| Confirmation / Destructive | 컴포넌트 상태가 아니라 Button 조합(§5) |
+
+## 5. API
+
+Radix AlertDialog props 그대로. export: `AlertDialog`, `AlertDialogTrigger`, `AlertDialogPortal`, `AlertDialogOverlay`, `AlertDialogContent`, `AlertDialogHeader`, `AlertDialogFooter`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogAction`, `AlertDialogCancel`.
+
+- `AlertDialogAction`: HM Button을 Radix Action 위에 `asChild`로 합성(`<Button asChild><AlertDialogPrimitive.Action/></Button>`). 기본 `variant="primary"` `appearance="solid"`, `size` 기본 `default`. 위험한 작업은 `variant="destructive" appearance="outline"`.
+- `AlertDialogCancel`: 같은 방식, 기본 `variant="cancel"` `appearance="solid"`.
+- `AlertDialogAction variant="destructive"`만 지정하면 기본 `solid`가 적용되어 **미지원 Destructive Solid**가 된다. 삭제 확인은 Action과 Cancel 모두 `appearance="outline"`을 명시하고 같은 size를 사용한다. 자동 appearance 변경은 없다. [Button 허용 조합·기본값 주의](button.md#62-기본값별칭합성-주의)를 따른다.
+- 합성한 Radix 요소에는 `data-slot`을 붙이지 않는다. 붙이면 `asChild` Slot 병합에서 자식 값이 이겨 Button의 `data-slot="button"`이 사라지고 HM Button 스타일이 적용되지 않는다(Dialog에서 해결한 문제와 같은 원인). 출력 속성은 Button의 `data-slot="button"`, `data-variant`, `data-appearance`, `data-size`.
+- Alert Dialog 자체에는 Button 스타일을 정의하지 않는다. Button API(`variant`/`appearance`/`size`)만 전달한다.
+- `AlertDialogContent`에 Close(X)는 없다. 새 prop(`size`, `variant`, `destructive`)은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/alert-dialog.css` (`--hm-alert-dialog-*`).
+
+`background`, `text`, `border-width`, `border-color`, `radius`, `shadow`, `width`, `edge`, `padding`, `header-gap`, `actions-gap`, `actions-margin-top`, `title-*`, `description-*`. Semantic과 Theme palette만 참조하며 `--hm-dialog-*`를 참조하지 않는다. 신규 Primitive 없음. Button 색은 Button 문서의 token을 따른다.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix AlertDialog 구조 전부: Portal·Overlay·modal·focus trap·초기 focus(Cancel)·Escape·바깥 클릭 무시·focus 복귀·`role=alertdialog`·`aria-labelledby/describedby`, 중앙 위치 class, 열림/닫힘 animation class, `data-slot`(Content·Header·Footer·Title·Description).
+
+## 8. HM에서 변경한 항목
+
+- shadcn `bg-background`, `ring-1`, `rounded-xl`, `p-4`, `gap-4`, `max-w-xs`/`sm:max-w-sm`, size 변형 제거 → theme CSS.
+- `AlertDialogAction`/`Cancel`을 `buttonVariants` class 적용 방식에서 **HM Button 합성**으로 변경. 선택지 `variant`/`appearance`/`size`를 Button API로 받는다.
+- 방향별 Header/Footer 배치와 `AlertDialogMedia` 같은 shadcn 부가 요소는 추가하지 않았다.
+
+## 9. Storybook
+
+- 대표 Story `All`("Alert Dialog"): 트리거 2개(로그아웃 = 일반 확인, 삭제 = destructive)가 각각 실제 Alert Dialog를 연다.
+- verification: `Confirmation`, `Destructive`(처음부터 열림).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(400px, 18px Title, 24px padding, 그림자)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Overlay 색·blur, Motion은 shadcn 기본 유지.
+- 파괴적 작업의 기본 강조(Red outline)는 Dialog 삭제 확인과 같은 조합이며 Alert Dialog 고유 규칙이 아니다.
+- 아이콘/Media slot, non-dismissible 정책 변경(예: Escape 막기)은 만들지 않았다.
+- 소비 화면의 공통 header/footer 높이 대응 없음.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/alert-dialog.tsx
+packages/ui/src/theme/alert-dialog.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/alert-dialog.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): 키보드(Enter)로 열기, `role=alertdialog`, 초기 focus가 "취소", Tab으로 "삭제" 이동 후 다시 Tab하면 "취소"로 순환(focus trap), 바깥 클릭에 닫히지 않음, Escape 닫힘과 trigger focus 복귀, Cancel·Action 클릭 닫힘과 trigger 복귀, Close(X) 없음.
+- Button 합성: Action·Cancel 모두 `data-slot="button"`, `data-variant`(destructive/cancel), `data-appearance`가 유지되고 HM 색(Cancel `rgb(118,118,118)`, 삭제 글자 `rgb(211,47,47)`)이 적용됨.
+- computed style: width 400px, radius 8px, padding 24px, shadow `0 0 12px .2`.
+- 390×844: 폭 358px(좌우 16px), Footer 세로 쌓임(Cancel 아래), 가로 overflow 없음.
+- 미확인: Enter/Space로 Action 키보드 실행, Radix `AlertDialogAction` 비동기 처리, 닫기 animation 시각.
diff --git a/docs/components/alert.md b/docs/components/alert.md
new file mode 100644
index 0000000..9ae2d79
--- /dev/null
+++ b/docs/components/alert.md
@@ -0,0 +1,89 @@
+# Alert
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Alert 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Alert (CVA, grid + 선행 svg) |
+| 대표 Story | `Components/Feedback/Alert` → `All` (이름 "Alert") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz 기존 테스트 규격에는 Alert 규격이 없다(후보 목록, 상태 색 success/warning/information 미정). Toast와 별개로 참고만 했다.
+- **현재 HM 규격**: §3~§4.
+- **구현 방식**: shadcn Alert 구조(`role="alert"`, 선행 svg 아이콘 grid, `AlertTitle`, `AlertDescription`)를 유지하고 `data-variant`로 theme CSS를 선택.
+- **보류**: §11.
+
+## 3. 기본 규격
+
+| 항목 | 값 |
+|---|---|
+| Container | border 1px, radius 4px, padding `12px 16px`, 면 `--hm-sem-bg-surface` |
+| Icon | 16px (소비자가 lucide 등 svg를 첫 자식으로), 컬럼 gap 12px |
+| Title | 14 / 20 / 500 |
+| Description | 14 / 20 / 400, 색 `--hm-sem-fg-secondary` |
+| Close action | 없음 |
+
+## 4. 상태 규격
+
+| variant | border | Title·icon 색 |
+|---|---|---|
+| `default` | `--hm-sem-stroke-default` | `--hm-sem-fg-primary` |
+| `destructive` | `--hm-sem-action-destructive` | `--hm-sem-action-destructive` |
+
+아이콘이 없으면 텍스트가 왼쪽에서 시작한다.
+
+## 5. API
+
+```
+Alert:   variant?: "default" | "destructive"   기본 "default"
+AlertTitle, AlertDescription
+```
+`Alert`는 `role="alert"`로 렌더. 출력 속성: `data-slot="alert|alert-title|alert-description"`, `data-variant`.
+
+## 6. Token
+
+`packages/ui/src/theme/alert.css` (`--hm-alert-*`): `radius`, `padding-x/y`, `border-width`, `icon-size`, Title/Description typography, variant별 `{default,destructive}-{background,border-color,title-color,description-color}`. Semantic 참조. Primitive 신규 추가 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+`role="alert"`, grid 레이아웃(`has-[>svg]`), `data-slot`, `cn(..., className)`, `AlertTitle` line-clamp.
+
+## 8. HM에서 변경한 항목
+
+shadcn `rounded-lg border px-4 py-3 text-sm`, destructive의 색 class 제거 → theme CSS. 아이콘을 16px로 고정.
+
+## 9. Storybook
+
+대표 Story `All`: `default`, `destructive`, `no-icon`, `title-only`, `long`. verification: `Default`, `Destructive`.
+
+## 10. 사용자 확정 결정
+
+2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 이 컴포넌트에 대한 개별 수치 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- success / warning / information variant: HM 상태 색 미정이라 만들지 않았다(neutral·destructive만).
+- 닫기 버튼, action 슬롯: 없음. Toast와 혼합하지 않는다.
+- 수치(12/16 padding, 16px 아이콘)는 현재 HM 규격이며 디자인 확정 시 재검토.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/alert.tsx
+packages/ui/src/theme/alert.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Alert, AlertTitle, AlertDescription)
+src/components/alert.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- computed style: `role=alert`, border 1px, radius 4px, padding `12px 16px`, Title 14px/500, destructive border·Title `rgb(211,47,47)`, 아이콘 16px, 아이콘 유무에 따른 Title 시작 위치(45px / 17px) 확인.
+- 미확인: 사이드바 화면, 390px 폭.
diff --git a/docs/components/aspect-ratio.md b/docs/components/aspect-ratio.md
new file mode 100644
index 0000000..a3adde6
--- /dev/null
+++ b/docs/components/aspect-ratio.md
@@ -0,0 +1,79 @@
+# Aspect Ratio
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Aspect Ratio 고유의 API·결정만 기록한다.
+
+## 1. 상태와 성격
+
+| 항목 | 내용 |
+|---|---|
+| 성격 | **Layout primitive** (비율 유지). 시각 디자인이 없는 utility |
+| 구현 상태 | 구현 완료 |
+| 기준일 | 2026-10-03 |
+| 기반 | shadcn/ui Aspect Ratio = Radix `AspectRatio` |
+| 대표 Story | `Components/Data & Display/Aspect Ratio` → `All` (이름 "Aspect Ratio") |
+| 보류 | 아래 §10 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Aspect Ratio가 없다. 참고할 수치가 없다.
+- **현재 HM 규격**: 시각 규격이 없다. 비율 박스만 제공하며 surface, background, radius, border, 이미지 처리는 소비자가 자식에 구성한다(HM 디자인을 이유로 이미지 스타일을 내부에 넣지 않는다).
+- **구현 방식**: Radix AspectRatio를 그대로 감싼다(`data-slot="aspect-ratio"`).
+- **보류**: §10.
+
+## 3. 기본 규격
+
+| 항목 | 값 |
+|---|---|
+| Ratio | `ratio` prop(너비 / 높이, 예: `16 / 9`). 기본 1 |
+| 폭 | 부모 폭 100%(Radix wrapper가 `padding-bottom`으로 높이를 계산) |
+| 시각 | 없음(배경, 윤곽, radius 모두 투명/0) |
+| 자식 | Radix가 `position:absolute; inset:0`으로 채운다. 이미지는 소비자가 `size-full object-cover rounded-md` 등으로 구성 |
+
+## 4. 상태 규격
+
+상태 없음.
+
+## 5. API
+
+Radix AspectRatio props 그대로. export: `AspectRatio`.
+
+- `ratio`, `asChild`, 그리고 `div` props. `size`, `variant`, `mediaType`은 만들지 않았다.
+
+## 6. Dependency
+
+새 dependency 없음(`radix-ui`에 이미 포함).
+
+## 7. Token / Theme CSS
+
+**없다.** 시각 규격이 없어 `--hm-aspect-ratio-*` Token과 `aspect-ratio.css`를 만들지 않았고 `theme.css`에도 연결하지 않았다.
+
+## 8. 소비자 확장성
+
+- 폭은 부모가 정한다(Story는 wrapper의 `max-width`). `className`/`style`이 그대로 적용된다.
+- 이미지 fit, radius, border는 자식 요소에서 소비자가 정한다. Card와 조합해도 AspectRatio는 Card에 의존하지 않는다(Story에서 Card 안에 4:3으로 조합).
+
+## 9. Storybook
+
+- 대표 Story `All`("Aspect Ratio"): 16:9, 4:3, 1:1 이미지(inline data URI, 네트워크 비의존), video-like placeholder, Card 안 조합을 한 페이지에 둔다.
+- verification: `16:9`, `1:1`.
+
+## 10. 사용자 확정 결정 / 보류
+
+- 2026-10-03: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 시각 규격은 정하지 않는다.
+- 보류: 비율 preset(예: `ratio="video"`), 이미지 로딩 placeholder, 모서리 radius 기본값은 만들지 않았다.
+- CSS `aspect-ratio` 속성 기반 구현(Radix는 `padding-bottom` hack)은 Radix 구현을 따르며 바꾸지 않았다.
+
+## 11. 관련 파일
+
+```
+packages/ui/src/components/ui/aspect-ratio.tsx
+packages/ui/src/index.ts             (export)
+src/components/aspect-ratio.stories.tsx
+```
+
+## 12. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-03).
+- 레이아웃(Browser pane, 390×844): 16:9는 320×180(비율 1.778), 4:3은 320×240(1.333), 1:1은 320×320(1.000), video placeholder 320×180, Card 안 4:3은 270×203(1.333). wrapper style은 `position: relative; width: 100%; padding-bottom: 56.25%` 등 Radix 계산이며 이미지가 같은 크기로 채워지고(`object-fit: cover`, 로드됨) 배경·border·radius가 없다. 페이지 가로 overflow 없음.
+- 부모 폭이 바뀌면 높이가 비율대로 변한다(Story의 max-width 320 → 390px 뷰포트에서 320, Card 안에서는 270).
+- 미확인: 부모 폭을 연속으로 resize할 때의 reflow, `ratio` 동적 변경.
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
new file mode 100644
index 0000000..a5ea97d
--- /dev/null
+++ b/docs/components/avatar.md
@@ -0,0 +1,96 @@
+# Avatar
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Avatar 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Avatar (Radix `Avatar`) |
+| 대표 Story | `Components/Data & Display/Avatar` → `All` (이름 "Avatar") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Avatar가 컴포넌트 이름으로만 있고 규격은 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3. 현재 HM Semantic(accent 면)으로 새로 정했다. size 체계는 Button/Input size를 복사하지 않고 shadcn Avatar API(`sm`/`default`/`lg`)에 맞춰 24/32/40px로 정했다.
+- **구현 방식**: shadcn / Radix Avatar 구조(Root, Image, Fallback)를 유지하고 theme CSS로 연결.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Size | `sm` 24px, `default` 32px, `lg` 40px (정사각형) |
+| Shape | 원형(radius 9999px), `overflow: hidden` |
+| Image | `size-full`, `object-cover`, `aspect-square` (중앙 crop) |
+| Fallback 면 | `--accent` (green tint), 글자 `--accent-foreground` |
+| Fallback typography | weight 500, `sm` 10px / `default` 12px / `lg` 14px, line-height 1, 한 줄 `nowrap`, 넘치면 잘림 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| 이미지 로드 성공 | Radix가 Image를 렌더하고 Fallback은 렌더하지 않는다 |
+| 이미지 로드 실패 / 로딩 중 | Fallback 표시(`delayMs` prop으로 지연 가능) |
+| Focus / Disabled | 없음(비 interactive) |
+
+## 5. API
+
+Radix Avatar props 그대로. export: `Avatar`, `AvatarImage`, `AvatarFallback`.
+
+- `Avatar`: `size` `"sm" | "default" | "lg"`(기본 `default`, shadcn API 유지). 출력 `data-size`.
+- `AvatarImage`: `src`, `alt`, `onLoadingStatusChange`. `AvatarFallback`: `delayMs`.
+- 접근성: 이름이 보이는 곳에서는 `alt=""`, 단독으로 쓰면 `alt`로 이름을 준다.
+- 새 prop은 만들지 않았다. 크기는 `size` prop(또는 `--hm-avatar-size-*` Token)으로만 바꾼다. theme CSS가 레이어 밖이라 `className="size-12"` 같은 utility는 이기지 못한다.
+- shadcn 최신 버전에 있는 `AvatarBadge`/`AvatarGroup`은 만들지 않았다(필요가 생기면 추가).
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/avatar.css` (`--hm-avatar-*`).
+
+`size-sm|md|lg`, `radius`, `fallback-background`, `fallback-text`, `fallback-font-weight`, `fallback-font-size-sm|md|lg`. Semantic(`--accent`, `--accent-foreground`)만 참조한다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 이미지 로드 상태 처리와 Fallback 표시 규칙, 구조, `size` prop, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `size-8`/`data-[size=lg]:size-10`, `bg-muted` fallback, 글자 크기 class를 제거하고 Token으로 연결. 크기는 24/32/40.
+- Fallback 면을 `muted`가 아니라 accent(green tint)로 했다(HM 팔레트에서 대비가 있는 면).
+
+## 9. Storybook
+
+- 대표 Story `All`("Avatar"): Image(sm/default/lg, data URI 이미지로 네트워크 비의존), Fallback(깨진 이미지 주소로 initials: 한글 두 글자, 영문 두 글자, 한 글자, 긴 fallback), Composition(이름 + 소속)을 한 페이지에 둔다.
+- verification: `Image`, `Fallback`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- Size(24/32/40)와 fallback 색은 현재 HM 규격이며 Dashboard/GNB의 실제 사용이 정해지면 재검토.
+- 긴 fallback(예: 10자)은 가운데에서 잘린다. 1~2자 initials가 전제이며 줄임 규칙은 만들지 않았다.
+- Icon fallback(사람 아이콘) 규칙, 상태 badge, 겹침 그룹은 정의하지 않았다.
+- 이미지 비율이 다른 원본은 중앙 crop(`object-cover`)만 한다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/avatar.tsx
+packages/ui/src/theme/avatar.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/avatar.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 렌더(Browser pane): 로드되는 이미지 Avatar는 `img`만 있고 fallback 요소가 없음(24/32/40px, radius 9999px). 깨진 이미지 주소의 Avatar는 `img` 없이 fallback이 렌더되고 `김한`/`HM`/`한`/`ABCDEFGHIJ`가 32×32 안에서 레이아웃 변동 없이 표시, 배경 `rgb(189,223,212)`·글자 `rgb(18,51,40)`·12px.
+- Responsive(390×844): Avatar 구성이 한 줄로 들어가고 가로 overflow 없음.
+- 미확인: 이미지가 느리게 로드될 때 fallback에서 image로 전환되는 순간의 깜빡임, `delayMs`, 대비 비율의 수치 측정.
diff --git a/docs/components/badge.md b/docs/components/badge.md
new file mode 100644
index 0000000..ee9543e
--- /dev/null
+++ b/docs/components/badge.md
@@ -0,0 +1,94 @@
+# Badge
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Badge 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Badge (CVA, `asChild` Slot) |
+| 대표 Story | `Components/Data & Display/Badge` → `All` (이름 "Badge") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz 기존 테스트 규격에는 Badge 문서가 없다(Border 1px 등 일부 언급만). 참고만 했다.
+- **현재 HM 규격**: §3~§4.
+- **구현 방식**: shadcn Badge 구조(CVA `variant`, `data-slot`, `asChild`, `cn(..., className)`)를 유지하고 `data-variant`로 theme CSS를 선택. Button variant를 재사용하지 않는다.
+- **보류**: §11.
+
+## 3. 기본 규격
+
+| 항목 | 값 |
+|---|---|
+| Typography | 12 / 18 / 500 |
+| Padding | `2px 8px` (높이 24px) |
+| Border / Radius | 1px / `--hm-radius-control-md` (4px) |
+| Gap | shadcn `gap-1`, 아이콘 12px (`size-3`) |
+
+## 4. 상태 규격
+
+| variant | 면 | 글자 | 테두리 |
+|---|---|---|---|
+| `default` | `--hm-sem-action-primary` (Primary Green `#123328`) | `--hm-sem-on-action-primary` (White) | 면과 동일 |
+| `secondary` | `--hm-sem-bg-subtle` | `--hm-sem-fg-secondary` | 면과 동일 |
+| `destructive` | `--hm-sem-action-destructive` | White | 면과 동일 |
+| `outline` | `--hm-sem-bg-surface` | `--hm-sem-fg-primary` | `--hm-sem-stroke-default` |
+
+상호작용 상태 없음 (`asChild`로 링크/버튼에 감쌀 때 그 요소가 담당).
+
+## 5. API
+
+```
+Badge:
+  variant?: "default" | "secondary" | "destructive" | "outline"   기본 "default"
+  asChild?: boolean
+```
+나머지는 `<span>` props. 출력 속성: `data-slot="badge"`, `data-variant`. `badgeVariants`도 export.
+
+## 6. Token
+
+`packages/ui/src/theme/badge.css` (`--hm-badge-*`): `radius`, `padding-x/y`, `border-width`, `font-size/line-height/font-weight`, variant별 `{default,secondary,destructive,outline}-{background,text,border-color}`. Semantic 참조. Primitive 신규 추가 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+CVA 구조, `asChild`(Radix Slot), `data-slot`, `cn(..., className)`, 아이콘 크기 규칙(`[&>svg]:size-3`).
+
+## 8. HM에서 변경한 항목
+
+shadcn `rounded-full`·`px-2 py-0.5 text-xs`·focus/invalid ring·hover class 제거 → theme CSS(radius 4). variant 이름은 shadcn 4종을 유지하고 색만 HM으로 매핑.
+
+## 9. Storybook
+
+대표 Story `All`: `variants`, `icon`, `long`, `link`(asChild). verification: `Variants`, `Playground`.
+
+## 10. 사용자 확정 결정
+
+2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 이 컴포넌트에 대한 개별 수치 결정은 없다.
+
+2026-10-06 (Badge 원복): 직전 Active Semantic 후속에서 `default`를 Light 2(`--hm-sem-state-active`)로 바꾼 변경을 취소했다. `default`는 Strong Brand / Primary인 Primary Green(`--hm-sem-action-primary` / `--hm-sem-on-action-primary`)을 쓰며 Active Semantic 적용 대상이 아니다. Component Token 이름은 유지하고 참조만 되돌렸다. `secondary`·`outline`·`destructive`는 그대로다. Badge는 비인터랙티브 label이라 hover 면을 두지 않는다.
+
+## 11. 미확정 / 보류
+
+- success / warning / information 같은 상태 variant: HM 상태 색이 정해지지 않아 만들지 않았다.
+- size 변형, 점(dot) badge: 미결정.
+- 수치(12/18/500, 2/8, radius 4)는 현재 HM 규격이며 디자인 확정 시 재검토.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/badge.tsx
+packages/ui/src/theme/badge.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Badge, badgeVariants)
+src/components/badge.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- computed style: 4 variant 모두 12px/18px/500, padding `2px 8px`, radius 4px, 높이 24px, 색 위 표와 일치, 아이콘 12px.
+- 미확인: `asChild` 링크 focus 표시, 사이드바 화면, 390px 폭.
+- 2026-10-06 Badge 원복: `default` 면·테두리 `rgb(18,51,40)`(`#123328`), 글자 `rgb(255,255,255)`. secondary·destructive·outline 값 변화 없음.
diff --git a/docs/components/breadcrumb.md b/docs/components/breadcrumb.md
new file mode 100644
index 0000000..53ed71f
--- /dev/null
+++ b/docs/components/breadcrumb.md
@@ -0,0 +1,102 @@
+# Breadcrumb
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Breadcrumb 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Breadcrumb (Radix 없음, `nav > ol > li` + `Slot`) |
+| 대표 Story | `Components/Navigation/Breadcrumb` → `All` (이름 "Breadcrumb") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Breadcrumb이 컴포넌트 이름으로만 있고 규격은 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계(fg-primary/secondary)로 새로 정했다.
+- **구현 방식**: shadcn Breadcrumb 구조 유지, theme CSS로 HM 스타일 연결. 페이지 안에 직접 놓이는 navigation primitive라 Portal·overlay가 없다.
+- **역할 범위**: 현재 위치와 상위 이동만 담당한다. 메뉴 시스템·자동 접기(`maxItems`)는 없다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Typography | 14 / 20 / 400 |
+| Item 간격 | 8px(Item 안 gap, 목록 gap) |
+| Link | `--hm-sem-fg-secondary`, hover 시 `--hm-sem-fg-primary` + 밑줄(offset 4px) |
+| Current Page | `--hm-sem-fg-primary`, weight 700, 기본 커서 |
+| Separator | shadcn `ChevronRightIcon` 16px, `--hm-sem-fg-secondary` |
+| Ellipsis | 20px 영역, 아이콘 16px, `--hm-sem-fg-secondary` |
+| 긴 경로 | `flex-wrap`으로 줄바꿈 (`break-words`) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Hover (Link) | 전경 primary + 밑줄 |
+| Focus (`:focus-visible`) | ring 모양 `0 0 0 3px ring 50%`, radius 2px |
+| Current | `aria-current="page"`, `aria-disabled="true"`, `role="link"` (shadcn), 링크가 아닌 `span` |
+| Disabled | 없음(없는 상태를 만들지 않음) |
+
+## 5. API
+
+export: `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis`.
+
+- `BreadcrumbLink`: 기본 `a`, `asChild`로 router Link 등과 조합(특정 router에 의존하지 않음).
+- `BreadcrumbPage`: 현재 위치 표시용 `span`. 클릭할 수 없다.
+- `BreadcrumbSeparator`: 기본 chevron, `children`으로 교체(예: `/`). `aria-hidden`, `role="presentation"`.
+- `BreadcrumbEllipsis`: 표시용(`aria-hidden`, sr-only "More"). Dropdown과 자동 결합하지 않는다. 메뉴 연결은 소비 조합(Story 예시).
+- `variant`, `size`, `maxItems`는 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/breadcrumb.css` (`--hm-breadcrumb-*`).
+
+`font-size`, `line-height`, `font-weight`, `gap`, `link-color`, `link-hover-color`, `page-color`, `page-font-weight`, `separator-color`, `separator-size`, `ellipsis-size`, `focus-radius`. Semantic만 참조하고 다른 컴포넌트 Token을 쓰지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn에서 유지한 항목
+
+`nav aria-label="breadcrumb"`, `ol`/`li` 구조, `BreadcrumbPage`의 ARIA, separator의 `aria-hidden`, `asChild`(Slot), chevron·`MoreHorizontal` 아이콘, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `text-sm text-muted-foreground gap-1.5 sm:gap-2.5`, Link `hover:text-foreground`, Page `font-normal text-foreground`, 아이콘 `size-3.5`/`size-9` class 제거 → theme CSS.
+- Current Page를 weight 700으로 강조(shadcn은 normal).
+- Link에 밑줄 hover 및 focus ring 추가(shadcn은 색 변화만).
+
+## 9. Storybook
+
+- 대표 Story `All`("Breadcrumb"): Basic(3 depth), Ellipsis(Dropdown Menu 조합), Long path, Custom link(asChild)와 custom separator를 한 페이지에 둔다.
+- verification: `Basic`, `Ellipsis`, `Long Path`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(14/20, gap 8px, Current weight 700, chevron 16px)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- 긴 경로의 자동 접기(`maxItems`)와 모바일 축약 표현은 만들지 않았다. 지금은 줄바꿈만 한다.
+- Separator 색은 Link와 같은 secondary(별도 색 결정 없음).
+- Ellipsis는 표시용이다. 접힌 항목을 보여주는 메뉴 규칙은 소비 조합으로 남긴다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/breadcrumb.tsx
+packages/ui/src/theme/breadcrumb.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/breadcrumb.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): Link는 `a`, Current Page는 `span`(`aria-current="page"`, `aria-disabled="true"`, 커서 default), Tab으로 Link 사이 이동하고 Current Page는 포커스 대상이 아님, Separator·Ellipsis `aria-hidden`.
+- computed style: Link `rgb(110,103,89)` 14/20, Current `rgb(10,34,29)` 700.
+- Responsive: 390×844에서 목록 폭 358px, 긴 경로(7 depth)는 4줄(76px)로 줄바꿈되고 가로 overflow 없음.
+- 미확인: 실제 pointer hover/focus ring 시각, Ellipsis 안 Dropdown Menu 키보드 흐름.
diff --git a/docs/components/button.md b/docs/components/button.md
new file mode 100644
index 0000000..e4c765d
--- /dev/null
+++ b/docs/components/button.md
@@ -0,0 +1,191 @@
+# Button
+
+현재 HM 구현과 Runtime-neutral 사용 기준 문서. 공통 원칙은 `AGENTS.md`와 `docs/guidelines/runtime-portability.md`를 따른다. 이 문서는 Button API·Token·상태·사용 위치·조합 계약을 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | HM 스타일 적용 완료 (`hm-*` class 없음) |
+| 기준일 | 2026-10-08 (Role × Appearance 계약·현재 Story 대조) |
+| 기반 | shadcn/ui Button (CVA, Radix `Slot`) |
+| 대표 Story | `Components/Form/Button` → `All` (이름 "Button") |
+| 보류 | Brand label Text Border 두께(EXPERIMENTAL, 미적용), Focus(ui_viz TBD) |
+
+## 2. 적용 근거
+
+- **ui_viz Confirmed**: size, padding-x, label size/line-height(button.md §26, D-087), Brand gradient·bevel(D-087), Standard Solid/Outline 색(§28, D-086, D-087), Hover/Pressed 동일 Black 20%(§12), Red Outline Hover/Pressed Red 8%.
+- **HM 사용자 확정 규칙**: 실제 화면 Brand 최대 1개·팝업 Brand 금지, 일반 확인/작성 Solid 세트, 삭제 확인·행/반복 작업 Outline 세트, 같은 세트의 appearance와 size 통일(§5). Disabled `0.6`은 ui_viz 규격 값이며, Input·Select의 2026-10-02 결정과는 별개다.
+- **shadcn 유지**: 구조(CVA, `data-slot`, `cn(..., className)`), focus/invalid ring class, `ghost`·`link` variant와 기존 size 이름.
+- **미정의/TBD**: Focus 표현(ui_viz TBD → shadcn 기본 focus ring 유지), `aria-invalid` 표현(ui_viz에 없음 → shadcn class 유지), `ghost`·`link`의 규격(ui_viz 없음).
+
+## 3. 기본 규격
+
+| Size | Height(min) | Padding-x | Font / Line-height |
+|---|---|---|---|
+| `sm` | 28 | 10 | 12 / 18 |
+| `default` | 34 | 14 | 13 / 20 |
+| `lg` | 42 | 18 | 15 / 22 |
+
+- 높이는 `min-height`다. 기본 라벨은 `nowrap`으로 한 줄을 유지한다. 여러 줄이 필요한 경우 기존 `className="whitespace-normal"`을 명시하며, 이때만 줄바꿈에 따라 높이가 늘어난다(가운데 정렬, `overflow-wrap: anywhere`).
+- 세로 padding은 `(height − line-height) / 2 − border`로 계산한다.
+- Radius `--hm-radius-button`, font-family `--hm-font-family-base`.
+- Weight: Brand 700, Standard 500.
+- 아이콘 전용 size(`icon*`)와 `xs`는 shadcn 기본이며 HM 규격이 없다(`data-appearance`가 있는 버튼에 한해 `default|sm|lg`만 HM 크기 적용).
+
+## 4. 상태 규격
+
+| 상태 | 값 | 근거 |
+|---|---|---|
+| Default | treatment별 face/border (아래 Token) | ui_viz Confirmed |
+| Hover / Pressed (Brand, Solid) | face 위에 Black 20% overlay (`inset` shadow) | ui_viz §12 Confirmed |
+| Hover (Outline) | role ink로 채움 + 흰 글자 | ui_viz Confirmed |
+| Pressed (Outline) | 흰 face + Black 20% overlay | ui_viz Confirmed |
+| Red Outline Hover/Pressed | Red 8% face, Black overlay 없음 | ui_viz D-087 Confirmed |
+| Disabled | `opacity: 0.6`, `cursor: not-allowed`, Default paint 유지 | ui_viz Confirmed (HM roles) |
+| Focus | shadcn 기본 `focus-visible` ring | ui_viz TBD → shadcn 유지 |
+| Invalid | shadcn `aria-invalid` ring | ui_viz 미정의 → shadcn 유지 |
+
+- Brand/Solid의 Hover·Pressed는 `:not(:disabled)`에만 적용된다.
+- transition과 눌림 이동(`translate-y-px`)은 HM role에서 제거한다.
+- **`ghost`·`link`의 Disabled는 `opacity-50`(shadcn 기본)** 이다. HM role(`0.6`)과 값이 다르다. 규격이 없는 호환 variant라 그대로 둔다(아래 §11).
+
+## 5. 사용 위치와 버튼 세트
+
+- `brand`: 페이지 대표 실행에 사용한다. 실제 서비스 화면당 최대 1개이며 팝업에서는 사용하지 않는다. Storybook 비교 갤러리는 예외다.
+- `solid`: 일반 실행과 등록·저장·확인에 사용한다.
+- `outline`: 반복·보조 작업과 표/목록 행 작업에 사용한다.
+- 일반 작성·수정창: 취소 Solid + 등록/저장 Solid.
+- 일반 확인창: 취소 Solid + 확인 Solid.
+- 삭제 확인창: 취소 Outline + 삭제 Outline.
+- 표/목록 행과 반복·보조 작업: 동일 `appearance`의 Outline 조합.
+- FilterBar 대표 Story의 초기화·조회: `cancel` + `primary`, 둘 다 Outline·`size="default"`. 목록의 반복 조회·보조 작업 세트다.
+- 하나의 세트는 `appearance`와 `size`를 통일한다. 역할 차이는 variant의 기존 역할색과 문구로 표현한다.
+
+사용 위치를 기준으로 appearance를 명시하며 버튼 문구만으로 판단하지 않는다. 컴포넌트는 appearance 생략 시 기본 `brand`를 출력하므로, 팝업·버튼 세트에서는 기본값에 의존하지 않는다.
+
+## 6. API
+
+```
+variant:    shadcn "default | outline | secondary | ghost | destructive | link"
+            →
+            HM "primary | secondary | modify | destructive | cancel"
+            + 별칭 "default"(= primary), "outline"(= primary + outline appearance)
+            + 호환 "ghost", "link"
+appearance: (신규) "brand | solid | outline"   기본 "brand"
+size:       "default | xs | sm | lg | icon | icon-xs | icon-sm | icon-lg"  (shadcn 그대로)
+asChild:    shadcn 그대로
+```
+
+- 기본값: `variant="primary"`, `appearance="brand"`, `size="default"`.
+- 출력 속성: `data-slot="button"`, `data-variant`(별칭은 role로 정규화), `data-appearance`(`ghost`/`link`은 없음), `data-size`.
+- `secondary`의 의미가 바뀌었다: shadcn 회색 보조 → ui_viz Brown 역할. 기존 사용처 영향은 별도 확인하지 않았다.
+
+### 6.1 허용 Role × Appearance (AI Reference)
+
+현재 `button.css`의 역할별 Mapping과 대표 `All` Story의 `rolesFor`가 지원하는 조합은 다음과 같다.
+
+- `primary` (Green): `brand`, `solid`, `outline`.
+- `secondary` (Brown): `brand`, `solid`, `outline`.
+- `modify` (Orange): `brand`, `solid`. **`outline` 미지원**.
+- `cancel` (Gray): `solid`, `outline`. **`brand` 미지원**.
+- `destructive` (Red): `outline`만 지원. **`brand`, `solid` 미지원**.
+
+공개 Props는 `variant`와 `appearance`를 독립적으로 받는다. TypeScript 통과나 Storybook Controls에서 선택 가능하다는 사실은 해당 조합의 디자인 지원을 뜻하지 않는다. 미지원 조합에는 필요한 역할별 CSS Custom Property가 없으며 자동 보정·fallback도 없다. 기존 CSS 변수에 임의 fallback이나 새로운 역할색을 추가하지 않는다.
+
+### 6.2 기본값·별칭·합성 주의
+
+- `<Button>`은 Primary Brand다. `variant="destructive"`만 지정하면 미지원 Destructive Brand, `variant="cancel"`만 지정하면 미지원 Cancel Brand가 된다. 각각 허용 appearance를 명시한다.
+- `variant="default"`는 Primary 별칭이며 appearance 생략 시 Brand다. `variant="outline"`는 Primary Outline 별칭이며 전달한 appearance보다 우선한다. Red Outline은 `variant="destructive" appearance="outline"`로 작성한다.
+- `ghost`/`link`는 HM Role × Appearance 계약 밖의 shadcn 호환 variant다. `data-appearance`를 출력하지 않으며 appearance를 전달해도 HM treatment를 적용하지 않는다.
+- `AlertDialogAction`과 `AlertDialogCancel`의 기본 appearance는 Button과 달리 `solid`다. `<AlertDialogAction variant="destructive">`만 지정하면 미지원 Destructive Solid다. 삭제 확인은 Action과 Cancel **모두** `appearance="outline"`을 명시한다. 자세한 합성 API는 [Alert Dialog](alert-dialog.md#5-api)를 따른다.
+
+```tsx
+// 삭제·취소: 같은 appearance와 size (DialogClose asChild로도 합성 가능)
+<Button variant="cancel" appearance="outline" size="default">취소</Button>
+<Button variant="destructive" appearance="outline" size="default">삭제</Button>
+
+// Alert Dialog 삭제 확인: 두 요소 모두 Outline을 명시
+<AlertDialogCancel appearance="outline" size="default">취소</AlertDialogCancel>
+<AlertDialogAction variant="destructive" appearance="outline" size="default">삭제</AlertDialogAction>
+```
+
+미지원 조합 추가, role별 자동 appearance 선택, 기본 appearance 변경은 사용자 결정이 필요한 별도 변경이다. 현재 계약과 공개 API를 유지한다.
+
+## 7. Token
+
+Component Mapping 위치: `packages/ui/src/theme/button.css` (`--hm-button-*`). 공통 값은 `packages/ui/src/theme/default.css`, Primitive는 `packages/ui/src/theme/primitives.css`.
+
+- 공통 Semantic 재사용: `--hm-radius-button`, `--hm-font-family-base`, `--hm-font-weight-*`, `--hm-color-text-inverse`, `--hm-color-surface-default`, `--hm-color-action-*`, `--hm-sem-surface/border-action-primary`.
+- `--hm-button-height-md`는 `--hm-control-height-md`(34)를 참조한다. sm/lg 높이는 Button 전용 값이다.
+- Brand/Solid의 색 Token은 role별(`green|brown|orange|gray`)로 Component 안에 둔다. Brown/Orange gradient의 일부 stop과 Gray 값은 `default.css`의 공개 Theme palette를 참조한다. `button.css`에 직접 HEX는 남아 있지 않다.
+- Input·Select와 높이 값(28/34/42)이 겹쳐도 alias하지 않는다. 각 ui_viz 규격이 따로 확정한 값이기 때문이다.
+
+## 8. Runtime-neutral DOM 계약
+
+React가 아닌 Runtime도 배포된 `@hm-design/ui/theme.css` 또는 승인된 standalone Theme CSS를 먼저 로드하고, semantic `<button>`에 다음 속성을 사용한다.
+
+- `data-slot="button"`, `data-variant="primary|secondary|modify|destructive|cancel"`, `data-appearance="brand|solid|outline"`, `data-size="default|sm|lg"`.
+- Role × Appearance는 §6.1의 허용 조합만 사용한다. 위 속성 vocabulary가 모든 곱집합을 허용하는 것은 아니다.
+- CSS는 `--hm-button-*` Component variable과 `--hm-sem-*`/기존 Theme variable을 소비한다. HEX와 임의 variable을 추가하지 않는다.
+- native `disabled`, `:hover`, `:active`, `:focus-visible`로 Disabled/Hover/Pressed/Focus 계약을 유지한다. `aria-disabled`만으로 native disabled를 대체하지 않는다.
+- 팝업의 취소/확인 조합은 같은 `size`를 사용하고, 삭제 확인은 취소·삭제 모두 Outline이어야 한다. Escape, Tab 순서, 초기 포커스와 닫힌 뒤 trigger 포커스 복귀는 modal primitive 또는 동등한 keyboard contract로 보존한다.
+
+React의 `variant` prop을 그대로 복제할 필요는 없지만, 동일한 role/treatment attribute와 시각·상태·접근성 계약을 유지해야 한다.
+
+## 9. shadcn / Radix에서 유지한 항목
+
+CVA 구조, `data-slot`, `asChild`(Radix `Slot`), `className` 확장, focus-visible/invalid ring class, `[&_svg]` 아이콘 규칙, 기존 size 이름, `ghost`·`link` variant.
+
+## 10. HM에서 변경한 항목
+
+- `variant`를 ui_viz 역할로 재정의하고 `appearance` 추가.
+- HM role의 transition·눌림 이동 제거, `disabled:cursor-not-allowed`.
+- 높이를 `min-height` + 계산 padding으로 구성. 일반 라벨은 한 줄 유지하며, Long Label specimen은 명시적 `whitespace-normal`로 줄바꿈 지원.
+- shadow에 shadcn ring shadow(`--tw-ring-*`)를 끝에 포함해 bevel과 ring이 함께 보이게 함(지침 §6.7).
+- `hm-*` class 제거.
+
+## 11. Storybook
+
+- 대표 Story `All`("Button")이 기본 sidebar의 유일한 Button 항목이다 → 1뎁스.
+- `All`의 구역: Overview → Sizes → Variants → States. 기본 버튼·크기·허용 조합·Brand/Standard 상태를 보여준다. Red Outline은 Variants와 Standard States에도 포함되며, 삭제·취소 세트와 Long Label은 verification Story에서 따로 확인한다.
+- verification(`tags: ["verification"]`, 기본 sidebar 제외): `Roles`, `Sizes`, `States`("Brand States"), `StandardStates`, `LongLabel`, `KoreanLabels`, `IconTextNarrow`, `Destructive`, `Playground`(HM 전용), `Compatibility`(ghost/link, default/outline 별칭). Controls는 조합별 선택을 제한하지 않으므로 §6.1의 허용 조합을 직접 지킨다. Verification은 기술 점검용이며 운영 화면의 사용 위치·세트 규칙은 §5가 우선한다.
+- 대표 경로/ID: `Components/Form/Button → All` (`components-form-button--all`), `Components/Overlay/Dialog → All` (`components-overlay-dialog--all`), `Components/Overlay/Alert Dialog → All` (`components-overlay-alert-dialog--all`), `Patterns/Data/Filter Bar → Filter Bar` (`patterns-data-filter-bar--all`). 삭제 세트 점검 ID는 `components-form-button--destructive`(verification)다.
+- 운영 규칙은 `프로젝트-지침.md` §6.3, §7 참조.
+
+## 12. 사용자 확정 결정
+
+사용자가 확정한 사용 위치·세트 규칙은 §5에 기록한다. 2026-10-08 정합성 점검에서는 기존 허용 조합과 기본값을 유지하고 미지원 조합을 새로 지원하지 않는다.
+
+## 13. 미확정 / 보류
+
+- **EXPERIMENTAL**: Brand label Text Border 두께 — 적용하지 않음.
+- **TBD(ui_viz)**: Focus 표현.
+- **ui_viz 미정의**: `aria-invalid`, `ghost`/`link`, `xs`·`icon*` size, `ghost`/`link` Disabled(현재 0.5, shadcn 기본).
+- Disabled `0.6`은 Input·Select의 사용자 결정과 별개이며, 전역 Disabled Token이 아니다.
+
+## 14. 관련 파일
+
+```
+packages/ui/src/components/ui/button.tsx
+packages/ui/src/theme/button.css
+src/components/button.stories.tsx
+src/components/story-board.tsx
+```
+
+## 15. 검증 상태
+
+### 2026-10-08 Button 조합 정합성 점검
+
+- 기존 6024 Storybook 재사용. 대표 Button의 허용 조합·고정 Hover/Pressed·Disabled를 computed style로 확인: 높이 28/34/42px, Disabled opacity `0.6`, Solid Hover/Pressed Black 20%, Red Outline Hover/Pressed Red 8%와 Red 전경 유지. 삭제 버튼의 실제 포인터 Hover도 같은 면을 확인했다.
+- Playground에서 Destructive Brand/Solid와 Modify Outline을 직접 렌더했다. Destructive Brand/Solid는 역할 배경 변수가 비어 투명 배경·흰 글자, Modify Outline은 역할 ink 변수가 비어 기본 전경색으로 표시된다. 디자인 계약상 미지원이며 이 점검에서 지원을 추가하지 않았다.
+- 대표 Dialog / Alert Dialog: 일반 확인 Solid 세트·삭제 확인 Outline 세트, 동일 `size="default"`·높이 34px 확인. AlertDialog Action/Cancel의 `data-slot="button"`과 역할·appearance 합성이 유지된다. Dialog의 Escape, Alert Dialog의 취소·Escape 닫기 후 trigger 포커스 복귀, Alert Dialog 초기 Cancel focus·Tab 순환 확인.
+- 대표 Filter Bar: 초기화 Cancel Outline / 조회 Primary Outline·동일 크기 확인. 검색 조건 입력 후 초기화로 빈 검색어·조건 0개 복원. 조회는 기존 callback 없는 조합 예시다.
+- 관련 브라우저 Console warning/error 없음. `npm run check:theme-defaults` 통과. Component·CSS·Theme 값·공개 API 변경 없음. 전체 회귀·build·브라우저별 비교는 요청 범위에 따라 생략했다.
+
+### 과거 검증 기록
+
+- TypeScript, `npm run build`: 통과(2026-10-02, 복구 후).
+- 2026-10-06 ui_viz Storybook 화면 비교: 대표·verification Story의 버튼 51개(+대표 49개) computed style 일치(Red Outline 8% 면은 흰 바탕 합성값으로 같은 RGB, `cursor`는 ui_viz도 Web Mapping으로 분류해 shadcn 기본 유지). 대표 Story를 ui_viz 4구역으로 복원(Story만 변경).
+- 과거 Storybook 기록: Long Label·Destructive 및 verification Story ID 렌더 확인. 현재 `All` 구역 구성은 §11을 따른다.
+- 당시 미확인: 실제 사이드바 화면, Disabled computed opacity(Button), 브라우저별 렌더, `secondary` 의미 변경의 기존 사용처 영향. Disabled computed opacity는 위 2026-10-08 점검에서 확인했다.
diff --git a/docs/components/calendar.md b/docs/components/calendar.md
new file mode 100644
index 0000000..4425ac1
--- /dev/null
+++ b/docs/components/calendar.md
@@ -0,0 +1,120 @@
+# Calendar
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Calendar 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태와 성격
+
+| 항목 | 내용 |
+|---|---|
+| 성격 | **Primitive component** (날짜 선택 UI). Date Picker 자체가 아니다 |
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Calendar = **react-day-picker v10** |
+| 대표 Story | `Components/Search & Date/Calendar` → `All` (이름 "Calendar") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Calendar가 없다(인벤토리에 Date Picker 이름만). 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다. Button/Input/Popover Token은 참조하지 않는다(Navigation 버튼이 Button처럼 보여도 Calendar Token으로 관리).
+- **구현 방식**: react-day-picker가 날짜 계산, 월 이동, 키보드, 선택 모드, ARIA grid를 소유한다. HM은 시각만 입힌다. 라이브러리의 기본 class(`rdp-*`)와 날짜 셀의 `data-*` 상태 속성을 그대로 두고 `[data-slot="calendar"]` 아래에서 CSS로 스타일한다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Surface | 없음(투명). 감싸는 컨테이너(Popover, Card 등)가 면과 윤곽을 가진다 |
+| Padding / 폭 | 12px / 내용 폭(`fit-content`, 한 달 276px) |
+| Caption | 가운데, 높이 32px, 14 / 20 / 700 |
+| Navigation 버튼 | 28 × 28px, radius 4px, 아이콘 16px(lucide chevron), Caption 줄 양끝에 절대 배치 |
+| Weekday | 12 / 18 / 500, `--hm-sem-fg-secondary`, 폭 36px |
+| Day | 36 × 36px 셀과 버튼, radius 4px, 14 / 20 |
+| 여러 달 | `numberOfMonths`에 따라 flex로 나란히, 좁으면 줄바꿈(gap 16px) |
+| Locale | 기본 **한국어**(`react-day-picker/locale`의 `ko`, 추가 dependency 없음). `locale` prop으로 교체 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Default | 투명 |
+| Hover | 배경 `--accent` 45% |
+| Focus (`:focus-visible`) | ring 모양 `0 0 0 3px ring 50%` |
+| Today (`data-today`) | 배경 `--hm-sem-bg-subtle`, weight 700 |
+| Selected (`data-selected`) | 배경 `--hm-sem-state-active`(Light 2 `#266651`), 글자 `--hm-sem-on-state-active`(흰색) (hover해도 유지, focus 시 fill + Focus ring) |
+| Outside (`data-outside`) | 글자 `--hm-sem-fg-secondary`, opacity 0.6 |
+| Disabled (`data-disabled`) | opacity 0.4(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), cursor not-allowed, 선택 불가 |
+| Range start / middle / end (`rdp-range_*`) | start·end는 Active 면(`--hm-calendar-range-edge-*` → `--hm-sem-state-active`, hover해도 유지, 안쪽 모서리 직각), middle은 `--accent` 45% 면 + 직각 |
+| Nav 버튼 disabled | opacity 0.4 (`startMonth`/`endMonth` 경계) |
+
+기반 라이브러리가 실제로 제공하는 상태만 쓴다. HM 전용 상태 속성은 없다.
+
+## 5. API
+
+react-day-picker `DayPicker` props 그대로. export: `Calendar`.
+
+- `mode` `"single" | "multiple" | "range"`, `selected`, `onSelect`, `required`, `defaultMonth`, `month`/`onMonthChange`, `disabled`(Matcher), `startMonth`/`endMonth`, `numberOfMonths`, `captionLayout`, `weekStartsOn`, `today`, `locale` 등.
+- Calendar가 바꾸는 기본값: `showOutsideDays=true`, `locale=ko`, Chevron 아이콘을 lucide로 교체(`components.Chevron`).
+- 출력 `data-slot="calendar"`. 날짜 셀은 `td.rdp-day`(`data-selected`, `data-today`, `data-outside`, `data-disabled`, `data-focused`, `aria-selected`).
+- `variant`, `size`는 만들지 않았다.
+
+## 6. Dependency
+
+- `react-day-picker` ^10.0.2 (`packages/ui`에 추가, shadcn Calendar의 기반). 날짜 계산용으로 `date-fns`와 `@date-fns/tz`가 이 패키지의 dependency로 따라 들어온다. HM이 직접 date 라이브러리를 추가하지 않았다.
+- locale은 같은 패키지의 `react-day-picker/locale`(`ko`)을 사용(추가 설치 없음).
+- CENTER 패키지에는 추가하지 않았다.
+
+## 7. Token
+
+Component Mapping 위치: `packages/ui/src/theme/calendar.css` (`--hm-calendar-*`).
+
+`padding`, `text`, `month-gap`, `caption-*`, `nav-size|radius|icon-size|hover-background`, `weekday-*`, `day-size|radius|font-size|line-height|hover-background`, `today-background|font-weight`, `selected-background|text`, `range-edge-background|text`, `range-middle-background|text`, `outside-color|opacity`, `disabled-opacity`. Semantic/Theme palette를 참조한다. Selected·Range edge는 `--hm-sem-state-active` / `--hm-sem-on-state-active`(2026-10-06 Active Semantic)를 참조한다. 신규 Primitive 없음.
+
+## 8. react-day-picker에서 유지한 항목
+
+날짜 계산, 월 이동, 키보드 모델(방향키, Home/End, PageUp/PageDown), 선택 모드와 `required`, disabled/outside/hidden 날짜, 숫자·날짜 접근성 label(locale 기반), `role="grid"`/`gridcell`, `aria-selected`, roving tabindex.
+
+## 9. Storybook
+
+- 대표 Story `All`("Calendar"): Single(오늘 10/2, 선택 10/15), Disabled dates(5일 이전·일요일), Range(10/8–10/14), Two months를 한 페이지에 둔다. `today`는 라이브러리 prop으로 2026-10-02에 고정(어느 날 열어도 같게 보이기 위함).
+- 2026-10-06 Visual QA: Two months 구역만 `StateBoard`의 `wide`를 사용한다. Desktop에서 252px month 두 개 + 16px gap + Calendar padding 24px + frame border 2px가 들어가며 좁은 폭에서는 기본 wrap을 유지한다. Production Calendar API/CSS는 변경하지 않았다.
+- verification: `Single`, `Disabled Dates`, `Range`.
+- meta에 `component`를 지정하지 않는다(props가 선택 모드 union이라 args 없는 Story가 타입을 통과하지 못함).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(36px 셀, 12px padding, Today 면, Selected 면)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- 기본 locale을 한국어로 둔 것은 현재 HM 서비스 기준이며, 다국어는 소비자가 `locale`을 넘긴다. i18n 시스템은 만들지 않았다.
+- 주 시작 요일은 locale 기본(한국어는 일요일).
+- `captionLayout="dropdown"`(월/연도 select)의 시각은 스타일링하지 않았다(`.rdp-dropdown*`). 사용이 정해지면 추가.
+- 주 번호(`showWeekNumber`), footer, 달력 애니메이션(`animate`)은 스타일링하지 않았다.
+- **모바일**: 한 달은 276px로 390px 폭에 들어간다. `numberOfMonths > 1`은 좁은 화면에서 줄바꿈으로 세로로 쌓이며 별도 responsive calendar는 만들지 않았다.
+- Range의 hover 미리보기, 최소/최대 길이 표현은 없음.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/calendar.tsx
+packages/ui/src/theme/calendar.css
+packages/ui/package.json             (dependency: react-day-picker)
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/calendar.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-06 Visual QA: Two months는 1280/1024/768px 한 행, 390px wrap, 모든 month 폭 252px 및 페이지 가로 overflow 없음. Production CSS 변경 없음. `typecheck`, `build`, `build-storybook` 통과.
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 렌더/DOM(Browser pane): 한국어 caption "2026년 10월", 요일 "일월화수목금토", `role="grid"`, 날짜 폭 36px, Selected `rgb(18,51,40)`·흰 글자, Today `rgb(244,241,234)`·700, 이전/다음 달 버튼 label이 한국어("이전 달로 이동"/"다음 달로 이동").
+- pointer: 날짜 클릭으로 선택(`aria-selected=true`), 다음/이전 달 버튼으로 월 이동(10월 → 11월, 10월 → 9월).
+- keyboard: 포커스 후 ArrowRight 10 → 11, ArrowDown 11 → 18(다음 주), Enter와 Space로 선택, PageDown으로 다음 달(11월), Home으로 주의 첫 날. roving tabindex가 선택된 날짜에 있음.
+- disabled: 5일 이전과 일요일은 `data-disabled`, 버튼 `disabled`, opacity 0.4, 클릭해도 선택 안 됨. 가능한 날짜는 선택됨.
+- range: 시작/끝은 Active 면(안쪽 직각), 중간은 accent 45% 면(모서리 0)으로 구분됨(처음에는 `data-selected` 규칙이 중간 면을 덮는 버그가 있어 specificity를 올려 수정).
+- Responsive(390×844): Calendar 폭 276px(두 달은 줄바꿈되어 356px), 페이지 가로 overflow 없음.
+- 미확인: 실제 pointer hover 면 시각, focus ring 시각, `multiple` 모드, `captionLayout="dropdown"`, RTL, 타임존(`@date-fns/tz`) 동작.
diff --git a/docs/components/card.md b/docs/components/card.md
new file mode 100644
index 0000000..3c24927
--- /dev/null
+++ b/docs/components/card.md
@@ -0,0 +1,181 @@
+# Card
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Card 고유의 API·Token·상태·결정만 기록한다.
+
+> 아래 외부 ui_viz 문서는 ZIP 미포함 초기 출처이며 실행·구현의 필수 의존성이 아니다. 현재 기준은 이 문서와 HM 구현·대표 Story다. ui_viz에는 `docs/components/card.md`가 없다. Card 규격은 `docs/patterns/content-container.md`(Type B **Content Card**)와 `docs/patterns/content-header.md`(`content` profile)가 소유한다. 두 문서는 "범용 Card System이 아니다"라고 명시하며, 상태·Footer·Media·elevation을 만들지 않았다(Out of Scope). HM Card는 이 Type B를 shadcn Card에 적용한 것이다. Type A(Section Panel)는 구현하지 않았다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | HM 스타일 적용 완료 (`<Card />`만으로 적용, `hm-card` class 없음) |
+| 기준일 | 2026-10-02 (문서·주석 정합성 정정 2026-10-08, 디자인 값 변경 없음) |
+| 기반 | shadcn/ui Card (div 기반, Radix 없음) |
+| 대표 Story | `Components/Data & Display/Card` → `All` (이름 "Card") |
+| 보류 | Eyebrow, Divider, Footer·Media, 반응형, 폭 (§11) |
+
+## 2. 적용 근거
+
+- **ui_viz Confirmed**: 컨테이너 radius 4px(`radius.container.default`), 표면 White(`color.bg.surface`)/Beige(`color.bg.content`), 제목 전경 `color.fg.primary`.
+- **ui_viz 채택(SOURCE_ADOPTED, Canonical Pattern Q6 `YES`, 2026-09-28)**: border 1px, body-padding 24px 사방, header↔body 간격 24px(D-093 D-042/D-059), title↔action 간격 20px, 교차축 중앙 정렬, 상태 없음. 이 값들은 문서상 `Confirmed` 표기가 아니라 owner가 채택한 Canonical 값이다. HM Card는 이 채택 값을 적용한다.
+- **ui_viz LOCAL_EXCEPTION(컴포넌트 범위 값)**: border 색 `#DEDBD2`(전역 token 아님, Tabs·Search Field와 값만 같고 alias 금지), Beige border `#ECD4A2`(Primitive `hm-brown-light-4`와 같은 값). **현재 HM 구현은 이 두 값을 컴포넌트 전용 값으로 두지 않고 공유 Semantic Token에 연결한다.** 차이는 §6.1에 기록한다.
+- **ui_viz CANONICAL_OVERRIDE**: Title Source 19px/700 → `heading-md` 20/28/600.
+- **HM 사용자 결정**: 없음.
+- **shadcn 유지**: 아래 §7.
+- **ui_viz 미정의**: Description, Footer, `size="sm"`, Media, Hover/Selected/Clickable, shadow.
+
+## 3. 기본 규격
+
+| 항목 | 값 | 근거 |
+|---|---|---|
+| Background | White (`--hm-sem-bg-surface`) / Beige (`--hm-sem-bg-content`) | Confirmed |
+| Border | 1px solid `--hm-sem-stroke-input-default`(Default `#dedbd2`) / Beige는 `--hm-sem-palette-brown-light-4`(Default `#ecd4a2`) | 두께는 채택. 색 값은 LOCAL_EXCEPTION 값과 같고 Token 연결은 §6.1 |
+| Radius | 4px | Confirmed |
+| Shadow | 없음 | ui_viz: "Source의 컨테이너는 그림자를 쓰지 않는다" |
+| Padding | 24px 사방 (Card 위/아래, Header·Content 좌우) | 채택 |
+| Header ↔ Content 간격 | 24px | 채택 (D-093) |
+| 자식 clipping | 하지 않음 (`overflow: visible`) | 채택 (Type B) |
+| Title | 20px / 28px / 600, `--hm-sem-fg-primary` | CANONICAL_OVERRIDE |
+| Header 안 Title ↔ Action 간격 | 20px (`column-gap`) | 채택 |
+| Action 정렬 | Title 반대쪽 끝, 교차축 중앙 | 채택 |
+| Description | shadcn 기본 (`text-sm text-muted-foreground`), HM Card CSS 미적용. 사용 범위는 §5.1 | ui_viz 미정의 |
+| 폭/높이 | 내용과 레이아웃이 결정. 고정 token 없음 | ui_viz: "Card width token을 만들지 않는다" |
+
+## 4. 상태 규격
+
+- 존재하는 상태는 **Default 하나**다. Hover / Focus / Pressed / Selected / Disabled는 ui_viz가 `NOT_APPLICABLE`로 명시했고 추가하지 않았다. Clickable·Interactive 변형도 없다.
+- Card 안의 Button·Input 등은 각자의 컴포넌트 문서에 따른 상태를 가진다.
+
+## 5. API
+
+```
+Card:
+  size?: "default" | "sm"                (shadcn 그대로)
+  →
+  size?: "default" | "sm"                (유지)
+  surface?: "surface" | "content"        (신규) 기본 "surface" — ui_viz surface 축 (White / Beige)
+
+CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter: shadcn API 그대로
+```
+
+- 출력 속성: `data-slot="card"`, `data-size`, `data-surface`.
+- 새 prop은 `surface` 하나다. ui_viz가 Content Card의 표면 축(`surface`/`content`)을 정의했기 때문이다. `variant`·`interactive`·`selected` 등은 근거가 없어 만들지 않았다.
+- Eyebrow는 shadcn Card에 대응 요소가 없다. 필요하면 소비자가 조합한다(미구현, §11).
+
+### 5.1 CardDescription 사용 범위
+
+- 공개 API로 export되며(`packages/ui/src/index.ts`) shadcn 구현 그대로다. `packages/ui/src/theme/card.css`는 `card-description`을 선택하지 않으므로 HM 전용 Typography·색이 없다(`text-sm text-muted-foreground`).
+- ui_viz Content Card Anatomy에 Description이 없다. 대표 Story `All`에는 넣지 않으며, HM Card 규격 요소가 아니라 **shadcn 호환 요소**로만 둔다.
+- 현재 저장소의 실제 사용처:
+
+| 위치 | 용도 | 비고 |
+|---|---|---|
+| `src/components/card.stories.tsx` `Compatibility` | shadcn 호환 확인 | verification 전용 |
+| `src/patterns/dashboard-layout.stories.tsx` | 업무 목록 건수(`role="status"`), KPI 라벨(Title 없이 Description만), 가로 스크롤 안내 | Pattern Story 안의 소비 예시. 별도 스타일 없음 |
+| `src/App.tsx` (Demo) | Panel 부제 | `.hm-panel-header`가 11px·`--hm-muted`로 덮어씀. Demo 전용(§8.1) |
+
+- Header에 Description이 있으면 shadcn의 `has-data-[slot=card-description]:grid-rows-[auto_auto]`로 2행 grid가 되고, `CardAction`은 `row-span-2`로 두 행에 걸친다. 이 동작은 shadcn 그대로다.
+- Description의 HM Token·크기·색은 미정의다. 필요해지면 이 문서에서 결정한 뒤 Token으로 추가한다(§11).
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/card.css` (`--hm-card-*`), `packages/ui/src/theme.css`에서 import.
+
+- 재사용한 공통 값: `--hm-radius-container`(radius), `--hm-sem-bg-surface`, `--hm-sem-bg-content`, `--hm-sem-fg-primary`, `--hm-sem-stroke-input-default`(White border), `--hm-sem-palette-brown-light-4`(Beige border). Border 연결 상세는 §6.1.
+- Card 전용 값: `--hm-card-radius`, `--hm-card-border-width`(1px), `--hm-card-padding`(24px), `--hm-card-border-color`, `--hm-card-border-color-on-content`, `--hm-card-surface`, `--hm-card-surface-content`, `--hm-card-text`, `--hm-card-header-gap`(20px), `--hm-card-title-font-size|line-height|font-weight|color`.
+- **Primitive 신규 추가 1건**: `--hm-brown-light-4: #ecd4a2` (`packages/ui/src/theme/primitives.css`). ui_viz가 Confirmed Primitive `hm-brown-light-4`로 명시한 값이다. Card CSS는 이 Primitive를 직접 참조하지 않고 Semantic alias `--hm-sem-palette-brown-light-4`를 참조한다.
+- shadcn의 `--card-spacing` 변수를 24px(`--hm-card-padding`)로 채운다. `size="sm"`은 TSX class의 12px을 그대로 쓴다.
+- Input·Select·Button과 값(4px, `#dedbd2`)이 겹쳐도 그쪽 Component Token을 alias하지 않는다. `--hm-card-radius`는 `--hm-radius-container`를 참조하고 `--hm-radius-input`과는 연결하지 않는다(ui_viz가 alias 금지를 명시).
+- `--card-spacing`과 Title 규칙은 `:where()`로 감싸 specificity를 낮췄으므로 소비자 `className`과 Demo 스타일이 덮어쓸 수 있다. border·radius·surface 규칙(`[data-slot="card"]`, `[data-surface="content"]`)은 `:where()` 없는 attribute selector다.
+
+### 6.1 Border Token 실제 연결 (LOCAL_EXCEPTION과의 차이)
+
+| Card 변수 | 실제 참조 (`card.css`) | Runtime 계약 key (`contract.ts`) | HM Default 해석 경로 (`default.css` → `primitives.css`) | Default 값 |
+|---|---|---|---|---|
+| `--hm-card-border-color` | `var(--hm-sem-stroke-input-default)` | `color.stroke.input.default` | `--hm-color-border-control` → `--hm-sem-palette-warm-neutral-pale` → `--hm-warm-neutral-pale` | `#dedbd2` |
+| `--hm-card-border-color-on-content` | `var(--hm-sem-palette-brown-light-4)` | `color.palette.brown-light-4` | `--hm-brown-light-4` | `#ecd4a2` |
+
+- **ui_viz 기술**: 두 border 색은 LOCAL_EXCEPTION 컴포넌트 값이며, 전역 token이 아니고 다른 컴포넌트 값과 alias하지 않는다.
+- **현재 구현**: Default 렌더 값은 ui_viz 값과 같다. 다만 White border는 Input·Select·Dialog·Separator 등이 함께 쓰는 공유 Semantic `--hm-sem-stroke-input-default`를, Beige border는 공유 Palette Semantic `--hm-sem-palette-brown-light-4`를 참조한다. 다른 Component Token(`--hm-input-*` 등)은 alias하지 않는다.
+- **결과**: 외부 Theme JSON이 `color.stroke.input.default` 또는 `color.palette.brown-light-4`를 override하면 Card border도 함께 바뀐다. Card만 따로 조정하려면 Component 변수 `--hm-card-border-color` / `--hm-card-border-color-on-content`를 덮어써야 하며, 이 변수는 Runtime 계약 key가 아니다.
+- 이 절은 문서 정정이다. Token 연결과 렌더 값은 바꾸지 않았다. Card 전용 border token으로 분리할지는 미결정이다(§11).
+
+## 7. shadcn / Radix에서 유지한 항목
+
+semantic HTML(`div`), React composition(Header/Title/Description/Action/Content/Footer), `data-slot`, `cn(..., className)`, header의 grid 구조와 `has-data-[slot=card-action]` 2열 전환, Footer(`border-t`, `bg-muted/50`, 전체 폭), 첫/마지막 `img` 처리, `has-data-[slot=card-footer]:pb-0`, `size="sm"`, Description 스타일. Radix 사용 없음.
+
+## 8. HM에서 변경한 항목
+
+- `rounded-xl`, `bg-card`, `ring-1 ring-foreground/10`, `overflow-hidden`, 기본 `--card-spacing: 16px`을 TSX에서 제거하고 theme CSS(border, radius 4px, surface, 24px)가 담당.
+- ring 대신 실제 1px border 사용, shadow 없음.
+- Title을 20/28/600으로 변경(`size="sm"` 제외).
+- Header 열 간격 20px, Action 교차축 중앙 정렬.
+- Footer 아래 모서리를 컨테이너 radius(border 안쪽 3px)에 맞춤. Footer 표면은 shadcn 그대로다.
+- `surface` prop 추가.
+
+### 8.1 Demo `.hm-panel`과 운영 Card 구분
+
+- **운영 Card**: `@hm-design/ui`의 `<Card />`와 `packages/ui/src/theme/card.css`. 이 문서 §3의 값(padding 24px, Title 20/28/600 등)과 대표 Story `All`이 기준이다. 소비 프로젝트는 `hm-panel*` class 없이 이 API만 쓴다.
+- **Demo Panel**: `src/App.tsx`의 4개 Card에 붙은 `hm-panel`, `hm-panel-header`, `hm-panel-icon`, `hm-panel-content` class와 `src/hm-theme.css` 규칙. 패키지(`packages/ui`)에 포함되지 않으며 Card 규격 Reference가 아니다.
+- `.hm-panel`은 Card 외형(border, radius, background, shadow)을 지정하지 않는다. 다만 Demo class 묶음은 운영 Card 값을 다음처럼 덮어쓴다.
+
+| Demo class | 덮어쓰는 값 | 운영 Card 값 |
+|---|---|---|
+| `.hm-panel` | `gap: 0`, `--card-spacing: 16px` | gap·padding 24px |
+| `.hm-panel-header` | 아이콘 34px 열 grid, `column-gap: 11px`, `border-bottom: 1px solid #ede9df`, `padding: 22px 23px 17px` | Header 좌우 24px, column-gap 20px, divider 없음 |
+| `.hm-panel-header [data-slot="card-title"]` | 15px / 1.35 / 700, letter-spacing -.02em | 20 / 28 / 600 |
+| `.hm-panel-header [data-slot="card-description"]` | 11px, `--hm-muted`, margin-top 2px | shadcn 기본 `text-sm text-muted-foreground` |
+| `.hm-panel-icon` | 34px 아이콘 박스 | 해당 요소 없음 |
+| `.hm-panel-content` | `padding: 23px` | 좌우 24px |
+
+- Demo 값은 HM Token이 아닌 hex 값을 포함한다. Card Token·Story의 근거로 쓰지 않으며, Demo 화면을 Card 디자인 Reference로 캡처·인용하지 않는다.
+
+## 9. Storybook
+
+- 대표 Story `All`("Card")이 기본 sidebar의 유일한 Card 항목이다 → 1뎁스. 구역: `surface`(White), `content`(Beige), `action`(Title + Action), `form`(본문에 Input).
+- verification(`tags: ["verification"]`): `Surfaces`, `Action`, `Compatibility`(HM 전용: Description, Footer, `size="sm"`).
+- 운영 규칙은 `프로젝트-지침.md` §6.3, §7 참조.
+- 대표 Story에 Hover/Selected/Footer/Media는 넣지 않았다(ui_viz 미정의).
+
+## 10. 사용자 확정 결정
+
+추가 사용자 결정 없음.
+
+## 11. 미확정 / 보류
+
+- **Eyebrow**: ui_viz `content` header는 Eyebrow(11→12px/700, letter-spacing .12em, `#3E3523`)를 필수 요소로 둔다. shadcn Card에 대응 요소가 없고 이번 범위에 추가하지 않았다. 현재 Title만 있는 Header는 ui_viz Anatomy의 부분 구현이다.
+- **Divider(선택)**: ui_viz는 Header 뒤 24px + 1px + 18px의 선택 divider를 정의한다(`CONTENT_CARD_DIVIDER_OPTIONAL`). 기본은 없음이라 구현하지 않았다.
+- **Tabs Meta**: Meta가 Tabs일 때 Header↔Body 간격이 0이 되는 예외는 구현하지 않았다.
+- **ui_viz 미정의**: Description, Footer(`footer variant`는 Out of Scope), Media, `size="sm"`, 반응형, Card 폭.
+- **자식 clipping**: ui_viz Type B는 하지 않음이다. `overflow-hidden`을 제거했다. 대신 Footer 모서리를 CSS로 맞췄고 이미지 모서리는 shadcn `rounded-*`가 남아 있다.
+- **LOCAL_EXCEPTION**: ui_viz는 border 색 두 값을 전역 token이 아닌 컴포넌트 값으로 두고 tokenization을 follow-up으로 둔다. 현재 HM 구현은 공유 Semantic(`color.stroke.input.default`, `color.palette.brown-light-4`)에 연결되어 있다(§6.1). Card 전용 Semantic/Runtime key로 분리할지는 미결정이며, 이번 정정에서 Token 연결을 바꾸지 않았다.
+- **CardDescription HM 규격**: Typography·색·간격 미정의. shadcn 호환 요소로만 둔다(§5.1).
+- **Type A Section Panel**: 구현하지 않았고 미구현 상태를 유지한다. Demo `.hm-panel`은 Type A 구현이 아니며 대체 Reference로 쓰지 않는다(§8.1).
+- **Confirmed 표기 해석**: border 1px·padding 24px 등은 ui_viz에서 `Confirmed`가 아니라 owner 채택 Canonical 값이다. Confirmed만 적용한다는 기준으로 보면 재확인이 필요한 항목이다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/card.tsx
+packages/ui/src/theme/card.css
+packages/ui/src/theme/primitives.css      (--hm-brown-light-4, --hm-warm-neutral-pale)
+packages/ui/src/theme/default.css         (--hm-sem-stroke-input-default, --hm-sem-palette-brown-light-4 연결)
+packages/ui/src/theme/contract.ts         (Runtime key color.stroke.input.default, color.palette.brown-light-4)
+themes/default.json                       (HM Default 컬러 원본)
+packages/ui/src/theme.css                 (card.css import)
+src/components/card.stories.tsx
+src/components/story-board.tsx
+src/patterns/dashboard-layout.stories.tsx (CardDescription 소비 예시)
+src/App.tsx                               (Demo, hm-panel* class 사용)
+src/hm-theme.css                          (.hm-panel* Demo 전용 스타일, §8.1)
+```
+
+## 13. 검증 상태
+
+- TypeScript, `npm run build`: 통과(2026-10-02).
+- Storybook computed style(대표 Story 4개 구역): background White/Beige(`rgb(255,255,255)` / `rgb(245,240,229)`), border 1px `rgb(222,219,210)` / `rgb(236,212,162)`, radius 4px, shadow none, 위 padding 24px, Header·Content 좌우 24px, Header→Content 24px, overflow visible, Title 20px/28px/600 `rgb(10,34,29)`, column-gap 20px, Action 교차축 center, Action–Title 간격 20px — 문서 값과 일치.
+- Compatibility: Footer 아래 모서리 3px, `size="sm"` 위 padding 12px·Title 14px 확인.
+- Demo(App): 4개 Card가 border 1px/radius 4px/shadow none, 위 padding 16px, row-gap 0으로 렌더 확인. 이 값은 Demo `.hm-panel` 결과이며 운영 Card 값이 아니다(§8.1).
+- 2026-10-08 문서 정정: Border Token 연결(`card.css` ↔ `default.css` ↔ `contract.ts` ↔ `themes/default.json`), CardDescription 사용처, Demo class 규칙을 코드와 대조했다. `card.tsx`·`card.css`는 주석만 고쳤고 CSS 값·Component 동작·공개 API·Story는 바꾸지 않았다.
+- Story: `All` + verification 3개 ID 확인, 기본 sidebar는 `All` 하나만 보이는 1뎁스 구조(실제 사이드바 화면은 확인하지 못함).
+- 미확인: 사이드바 실제 화면, 브라우저별 렌더, Demo 화면 시각 비교(그림자 제거로 달라짐), 이미지 포함 Card.
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
new file mode 100644
index 0000000..ea00295
--- /dev/null
+++ b/docs/components/carousel.md
@@ -0,0 +1,116 @@
+# Carousel
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Carousel 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태와 성격
+
+| 항목 | 내용 |
+|---|---|
+| 성격 | **Interactive layout component** (slide 탐색). 단순 가로 scroll이 아니다 |
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-03 |
+| 기반 | shadcn/ui Carousel = **Embla** (`embla-carousel-react` 8.6.0) |
+| 대표 Story | `Components/Data & Display/Carousel` → `All` (이름 "Carousel") |
+| 보류 | 아래 §12 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Carousel이 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다. Button/Scroll Area Token은 참조하지 않는다.
+- **구현 방식**: Embla가 drag/swipe, snap, loop, align, plugin, scroll 계산을 소유한다. Carousel은 이전/다음 control, 방향키, carousel 접근성 속성을 더하고 Embla API를 `setApi`로 노출한다. 데이터 fetching이나 paging은 소유하지 않는다.
+- **보류**: §12.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Slide 폭 | 기본 `basis-full`(한 개). 여러 개는 소비자가 `CarouselItem`에 `basis-1/2` 등을 준다. 카드 폭을 컴포넌트가 강제하지 않는다 |
+| Gap | 16px (Track이 `-16px`만큼 당겨지고 각 Slide가 16px padding, 가로는 left / 세로는 top) |
+| Control | 32 × 32px 원형 버튼, 흰 면 + 1px `--hm-sem-stroke-input-default` + `--hm-sem-fg-primary` 화살표 16px |
+| Control 위치 | **carousel 가장자리 안쪽 8px**(가로: 좌우 가운데, 세로: 위/아래 가운데이며 화살표를 90° 회전). shadcn은 바깥(-48px)이라 좁은 부모에서 잘리는 문제가 있어 안쪽으로 정했다 |
+| Content 커서 | `grab` / 누르는 동안 `grabbing` |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Initial | Previous disabled(loop가 아니면), Next enabled |
+| Disabled (경계) | opacity 0.6(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), cursor not-allowed. loop일 때는 비활성되지 않는다 |
+| Hover | Control 배경 `--accent` |
+| Focus (`:focus-visible`) | Control에 ring 모양 `0 0 0 3px ring 50%` |
+| Dragging | Embla pointer drag, 커서 `grabbing` |
+| Active slide | 컴포넌트 속성은 없다. `setApi`로 `selectedScrollSnap()`을 읽어 소비자가 표시한다(Story의 `slide n / total`) |
+| Vertical | `orientation="vertical"`, Control이 위/아래로 이동하고 화살표가 회전 |
+
+## 5. API
+
+shadcn 구조 그대로. export: `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `useCarousel`, type `CarouselApi`.
+
+- `Carousel`: `orientation` `"horizontal" | "vertical"`, `opts`(Embla options: `loop`, `align`, `dragFree`, `startIndex`…), `plugins`, `setApi`. 출력 `data-orientation`.
+- `CarouselContent`: Embla viewport(`overflow-hidden`)와 track을 렌더한다(`data-slot="carousel-content"`, 안쪽 `carousel-track`). `className`은 track에 적용된다.
+- `CarouselItem`: slide. `className`으로 `basis-*` 지정.
+- `CarouselPrevious`/`CarouselNext`: Carousel 전용 `button`(Button 컴포넌트가 아님). sr-only 텍스트 "Previous slide" / "Next slide".
+- `variant`, `size`, `cardType` 등은 만들지 않았다.
+- **접근성**: Root `role="region"` + `aria-roledescription="carousel"`(이름은 소비자의 `aria-label`), Slide `role="group"` + `aria-roledescription="slide"`, Control은 disabled일 때 native `disabled`, ArrowLeft/ArrowRight가 이전/다음(캡처 단계에서 처리).
+- **Root `min-w-0`**: grid/flex 부모의 `min-width:auto`가 Embla track의 intrinsic width로 커져 페이지가 밀리는 것을 막기 위해 Root에 `min-w-0`을 둔다. 한 단계 더 감싼 wrapper(grid item)에는 소비자가 `min-w-0`을 줘야 한다(Story가 그렇게 한다).
+
+## 6. Dependency
+
+- `embla-carousel-react` ^8.6.0 (`packages/ui`에 추가, shadcn Carousel의 기반). 사용: Carousel. CENTER 패키지에는 추가하지 않았다.
+
+## 7. Token
+
+Component Mapping 위치: `packages/ui/src/theme/carousel.css` (`--hm-carousel-*`).
+
+`gap`, `control-size`, `control-inset`, `control-icon-size`, `control-background`, `control-text`, `control-border-width|color`, `control-hover-background`, `disabled-opacity`. Semantic과 Primitive(`--hm-warm-neutral-pale`)만 참조한다. 신규 Primitive와 Semantic 없음. 모든 규칙이 `@layer components`에 있어 소비자의 utility(`className`: gap, control 위치와 크기)가 이긴다.
+
+## 8. Embla에서 유지한 항목
+
+pointer drag/swipe와 snap, loop·align·dragFree·skipSnaps 등 options, plugins, `canScrollPrev/Next`, `reInit`/`select` 이벤트, `scrollPrev/Next` 구현.
+
+## 9. Storybook
+
+- 대표 Story `All`("Carousel"): Basic(한 개 + `setApi`로 `slide n / 5` 표시), Multiple items(`basis-1/2`), Loop(3개), Vertical(세로), Media(AspectRatio 조합)를 한 페이지에 둔다. Card와 AspectRatio는 Story 조합이며 Carousel은 둘을 import하지 않는다.
+- verification: `Basic`, `Multiple Items`, `Loop`, `Vertical`.
+
+## 10. 소비자 확장성
+
+- Slide 폭: `className="basis-1/2"`이 그대로 적용된다(확인).
+- Gap/Control 위치·크기: CSS가 `@layer components`라 `className`의 utility가 이긴다(예: `CarouselPrevious className="-left-12"`로 바깥 배치 가능).
+- Track 높이(세로): `CarouselContent style/className`으로 높이를 준다.
+
+## 11. 사용자 확정 결정
+
+- 2026-10-03: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). Control은 Button 조합이 아니라 Carousel 전용 control로 둔다(Button Token과 분리).
+
+## 12. 미확정 / 보류
+
+- 수치(32px control, 8px inset, 16px gap)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Control이 slide 위에 겹치므로 카드 안쪽 콘텐츠를 가릴 수 있다(특히 세로 carousel의 첫/끝 항목). 바깥 배치는 `className`으로 선택한다.
+- 인디케이터(dot), autoplay, 썸네일 동기화는 만들지 않았다(Embla plugin과 `setApi`로 소비자가 조합).
+- 반응형(breakpoint별 `basis`)은 소비자 `className`(`md:basis-1/3`)이다. 자동 responsive carousel은 만들지 않았다.
+- 포인터가 컨트롤 위일 때 drag 시작 동작, 스크린리더가 slide 변경을 알리는 live region은 정의하지 않았다.
+
+## 13. 관련 파일
+
+```
+packages/ui/src/components/ui/carousel.tsx
+packages/ui/src/theme/carousel.css
+packages/ui/package.json             (dependency: embla-carousel-react)
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/carousel.stories.tsx
+```
+
+## 14. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-03).
+- 실제 DOM(Browser pane): Root `role=region`, `aria-roledescription=carousel`, `aria-label`, Slide `role=group`/`slide`, 5개 slide, 초기 Previous `disabled`, Control 32px·radius 9999px·흰 면, `setApi` readout이 `slide 1 / 5`.
+- navigation: Next 클릭으로 `slide 2 / 5`와 Previous 활성화, Previous 클릭으로 `slide 1 / 5`와 Previous 비활성화. 버튼에 focus를 둔 채 ArrowRight/ArrowLeft로 3 → 2. 끝(5/5)에서 Next `disabled`.
+- pointer: 왼쪽 drag로 `slide 2 → 3`, 오른쪽 drag로 `3 → 2`.
+- loop: 첫 slide에서 Previous가 활성이고 클릭하면 `3 / 3`, Next로 `1 / 3`, 계속 눌러도 Next가 비활성되지 않음.
+- vertical: `data-orientation=vertical`, Previous `top: 8px`·`rotate: 90deg`, Next `bottom: 8px`, Next 클릭 후 Previous 활성화, slide가 위아래로 쌓임.
+- 레이아웃: Slide 폭이 Root 폭(`basis-full`), `basis-1/2`이면 절반(390px에서 187px), gap 16px(Track `-16px`, Item padding 16px).
+- Responsive(390×844): 모든 carousel이 358px 안(좌 16px)에 들어가고 Control이 안쪽에 있어 잘리지 않으며 페이지 가로 overflow 없음. (처음에는 grid wrapper의 `min-width:auto` 때문에 페이지가 436px로 밀려 Root에 `min-w-0`과 Story wrapper의 `minWidth:0`을 추가해 해결했다.)
+- 참고: 이 검증 환경은 페이지가 화면에 그려질 때만 animation frame이 진행되어, scroll 위치(translate)는 screenshot으로 frame을 만든 뒤에야 최종값에 도달했다. 위 검증은 Embla의 `selectedScrollSnap`(readout)과 버튼 상태 기준이다.
+- 미확인: 터치 기기에서의 swipe(마우스 drag로 대체), `dragFree`·plugin(autoplay), 스크린리더 실제 읽기, 소비자의 `md:basis-*` breakpoint 동작.
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
new file mode 100644
index 0000000..1f5a084
--- /dev/null
+++ b/docs/components/checkbox.md
@@ -0,0 +1,137 @@
+# Checkbox
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Checkbox 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Checkbox (Radix `Checkbox`) |
+| 대표 Story | `Components/Form/Checkbox` → `All` (이름 "Checkbox") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz 기존 테스트 규격에는 Checkbox 문서가 없다(border·radius·indicator는 TBD, mark는 native UA 소유, HOLD). 구현 값으로 쓸 수 있는 확정 규격이 없어 참고만 했다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계(surface, stroke, action-primary, state-active, on-state-active)로 새로 정했다.
+- **구현 방식**: shadcn / Radix Checkbox 구조(Root/Indicator, `data-state`, indeterminate, 키보드, Label 연결, 폼 동작)를 유지하고 theme CSS로 HM 스타일을 연결.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 | 비고 |
+|---|---|---|
+| Box | 18 × 18px | 현재 HM |
+| Border | 1px `--hm-sem-stroke-default` | Semantic |
+| Radius | `--hm-radius-control-md` (4px) | 공통 control radius |
+| Face | `--hm-sem-bg-surface` | Semantic |
+| Indicator | shadcn `CheckIcon` / `MinusIcon`, 14px, `--hm-sem-on-state-active` | shadcn 아이콘 유지 |
+| Hit area | 18px box + 연결된 `Label` 클릭 | 별도 확장 없음 |
+
+shadcn(lucide) 아이콘을 유지했다. 별도 HM glyph는 만들지 않았다.
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Unchecked | 위 기본 규격 |
+| Checked (`data-state="checked"`) | border·face `--hm-sem-state-active`, 체크 아이콘 |
+| Indeterminate (`data-state="indeterminate"`) | Checked와 같은 면, 마이너스 아이콘 |
+| Hover (미체크) | border `--hm-sem-action-primary` |
+| Hover (체크·indeterminate) | Black 20% overlay (`--hm-color-action-overlay-hover`) |
+| Focus (`:focus-visible`) | shadcn ring (`ring-3 ring-ring/50`) 유지 |
+| Error (`aria-invalid="true"`) | border `--hm-sem-action-destructive` |
+| Disabled | `opacity: 0.6` (이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), `cursor: not-allowed` |
+
+## 5. API
+
+Radix Checkbox props 그대로 (`checked` / `defaultChecked` / `onCheckedChange`, `"indeterminate"`, `disabled`, `required`, `name`, `value`, `form`). 추가 prop 없음. 출력 속성: `data-slot="checkbox"`, Radix `data-state`·`data-disabled`.
+
+- Label과의 연결은 `<Label htmlFor>` 또는 감싸기. Label·Helper·Error 조합은 소비 조합(`field.md`).
+
+### Form 연결 및 Reset
+
+- Form 내부에서는 기존 native Form 연결을 사용한다. 외부에서는 `form="target"`과 `<form id="target">`으로 연결한다.
+- 기본 버튼 렌더링에 `form`을 지정하면 HM은 Radix의 공개 `asChild` 경로로 같은 Checkbox 버튼에도 `form`을 전달한다. 추가 DOM wrapper, 별도 상태, Reset listener 또는 숨김 input 강제 조작은 없다. 호출자가 명시한 `asChild` 경로는 기존대로 유지한다.
+- Uncontrolled는 `defaultChecked`로 초기 상태를 지정한다. Native Reset 버튼과 `form.reset()`은 Radix가 보관한 최초 상태를 복원한다. 이후 `defaultChecked` 변경을 현재 선택값 변경으로 사용하지 않는다.
+- Controlled는 부모의 `checked`가 상태의 기준이다. 부모 `onReset`에서 초기값을 복원하고 `onCheckedChange`로 변경 요청을 반영한다. 외부 Form에도 내부 Form과 같은 Radix Reset callback 계약이 적용된다.
+- Checked는 `name` / `value`로 제출된다(기본 `value="on"`). Unchecked와 indeterminate는 제출되지 않는다. Indeterminate는 `aria-checked="mixed"`이며 native input의 `checked`는 false다. Disabled는 버튼과 숨김 input 모두 비활성화되어 제출되지 않는다.
+
+```tsx
+const initialChecked = true
+const [checked, setChecked] = React.useState(initialChecked)
+
+return (
+  <>
+    <form id="target" onReset={() => setChecked(initialChecked)}>
+      <button type="reset">초기화</button>
+    </form>
+    <Checkbox
+      form="target"
+      name="agreement"
+      checked={checked}
+      onCheckedChange={setChecked}
+    />
+  </>
+)
+```
+
+Uncontrolled 예제는 `checked` / `onCheckedChange` 대신 `defaultChecked={true}`를 사용하며 부모의 Reset 상태 관리는 필요하지 않다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/checkbox.css` (`--hm-checkbox-*`).
+
+`size`, `radius`, `border-width`, `icon-size`, `background`, `border-color`, `hover-border-color`, `checked-background`, `checked-border-color`, `checked-hover-overlay`, `indicator-color`, `error-border-color`. Semantic(`--hm-sem-*`)을 참조하고 Input 등 다른 컴포넌트 Token을 쓰지 않는다. Primitive 신규 추가 없음(`--hm-sem-action-destructive`는 기존 Primitive를 직접 참조).
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`role=checkbox`, `aria-checked`)·키보드, `data-slot`, `cn(..., className)`, `transition-colors`, `outline-none` + focus ring, disabled 커서, lucide `CheckIcon`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `size-4 rounded-[4px] border shadow-xs`, `dark:` 및 `data-[state=checked]:bg-primary` 계열 class 제거 → theme CSS.
+- `MinusIcon` 추가(shadcn 기본은 indeterminate 아이콘이 없다). 두 아이콘은 `data-state`에 따라 CSS로 전환.
+- Disabled opacity 50 → 60.
+
+## 9. Storybook
+
+- 대표 Story `All`("Checkbox"): `unchecked`, `checked`, `indeterminate`, `interactive`(controlled), `hover`, `focus`, `error`, `disabled`, `long`. Focus는 `play`로 실제 focus.
+- verification: `Unchecked`, `Checked`, `Indeterminate`, `Disabled`, `Error`, `Playground`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- Checkbox Group 간격, group Label·Error 슬롯, option label 전경 role: 미결정.
+- 수치(18px, 14px 아이콘 등)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Checkbox Group, Error 문구 슬롯: 컴포넌트 없음(소비 조합).
+- Hit area 확장(24px 타깃 등) 미적용.
+- Disabled opacity `0.6`: 이 컴포넌트 값이며 전역 Disabled 규칙으로 승격하지 않는다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/checkbox.tsx
+packages/ui/src/theme/checkbox.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Checkbox)
+src/components/checkbox.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- Storybook computed style: 18×18, border 1px `rgb(154,146,132)`, radius 4px; Checked/Indeterminate bg·border `rgb(18,51,40)`; Error border `rgb(211,47,47)`; Disabled opacity 0.6; 체크/마이너스 아이콘이 상태에 따라 하나만 표시.
+- 실제 interaction: controlled indeterminate → click → checked → click → unchecked, Label 클릭으로 토글 확인.
+- 2026-10-08, React 19.3 / Radix Checkbox 1.3.11: 프로젝트 외부 격리 환경의 수정된 HM 패키지로 실제 브라우저 검증. 수정 전 외부 Form의 true·false·indeterminate Reset 불일치를 재현했고, 수정 후 모두 PASS.
+- Form 내부·외부에서 Space로 상태 변경 후 Native Reset 버튼 및 `form.reset()`을 실행: `defaultChecked` true·false·indeterminate와 Controlled 부모 `onReset`의 상태·ARIA·숨김 input·FormData 복원 확인. Indeterminate 복원 시 숨김 input은 `checked=false`, `indeterminate=true`, 제출값 없음.
+- 기존 Radix 동작도 구분해 확인: 최초 indeterminate 렌더에서는 숨김 input의 `indeterminate` 속성이 false다(내부·외부 및 수정 전·후 동일). UI/ARIA는 mixed, input의 `checked=false`, FormData 제외는 정상이며 이번 외부 Form Reset 수정에서 이 초기화 동작은 변경하지 않는다.
+- Native Form HTTP POST 8건: 내부·외부·Controlled의 Checked 값은 `choice=accepted`, Unchecked·indeterminate·Disabled 값은 제외. `required` native 유효성 및 ARIA, Disabled Tab 제외, BUTTON ref 유지 확인.
+- 수정 전·후 같은 Theme에서 Checked·Unchecked·Indeterminate·Disabled computed style과 아이콘 일치: 18×18px, border 1px, radius 4px, icon 14px, Disabled opacity 0.6. 키보드 focus-visible 3px ring도 일치. CSS·Theme·대표 Story 변경 없음.
+- UI 전체 타입 검사 및 공식 UI 패키지 빌드를 격리 경로에서 통과. 테스트에 사용한 Checkbox 소스와 실제 수정본의 SHA-256 일치. 공용 dist는 이 검증에서 빌드하지 않음.
+- 미확인: 실제 pointer hover, 사이드바 화면, 390px 폭. Hover 관련 CSS와 class는 변경하지 않음.
diff --git a/docs/components/collapsible.md b/docs/components/collapsible.md
new file mode 100644
index 0000000..f28a717
--- /dev/null
+++ b/docs/components/collapsible.md
@@ -0,0 +1,102 @@
+# Collapsible
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Collapsible 고유의 API·Token·상태·결정만 기록한다. Accordion(`accordion.md`)과 값을 공유하지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Collapsible (Radix `Collapsible`) |
+| 대표 Story | `Components/Disclosure/Collapsible` → `All` (이름 "Collapsible") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Collapsible이 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계로 새로 정했다.
+- **구현 방식**: shadcn / Radix Collapsible 구조(Root·Trigger·Content)를 유지. shadcn Collapsible은 스타일이 없는 primitive라, 일반 trigger(asChild 없음)에만 텍스트 trigger 모양을 주고 content 간격·타이포를 정했다.
+- **Accordion과의 구분**: Collapsible은 단일 영역의 간단한 disclosure다. divider 구조와 chevron 내장이 없다. Accordion을 항목 하나로 쓰는 용도가 아니다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Trigger(일반) | inline-flex, gap 8px, 배경·border·padding 없음, 14 / 20 / 500, `--hm-sem-fg-primary`, 포인터 커서 |
+| Trigger(`asChild`) | 자식이 자기 스타일을 유지(예: HM Button). HM trigger 스타일은 적용되지 않는다 |
+| Indicator | trigger 바로 아래 자식 `svg`가 있으면 16px, `--hm-sem-fg-secondary`, 열리면 180° 회전 |
+| Content | 위 padding 8px, 14 / 20 / 400, `--hm-sem-fg-primary` |
+| 긴 텍스트 | `overflow-wrap: anywhere`, 고정 높이 없음 |
+| Divider / border | 없음 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Closed / Open | Radix `data-state`. 닫힌 content는 `hidden`(display: none) |
+| Hover | 일반 trigger 밑줄(disabled 제외) |
+| Focus (`:focus-visible`) | ring 모양 `0 0 0 3px ring 50%` (일반 trigger) |
+| Disabled | `opacity: 0.6`(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), `cursor: not-allowed` |
+| Animation | 없음(shadcn Collapsible에 없고 HM Motion 규칙도 없다) |
+
+## 5. API
+
+Radix Collapsible props 그대로. export: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`.
+
+- `Collapsible`: `open`/`defaultOpen`/`onOpenChange`, `disabled`.
+- `CollapsibleTrigger`: `asChild`. **`asChild`일 때는 `data-slot`을 붙이지 않는다**(DialogClose와 같은 규칙). 붙이면 자식 Button의 `data-slot="button"`이 덮여 HM Button 스타일이 사라진다. 일반 trigger 출력은 `data-slot="collapsible-trigger"`.
+- `CollapsibleContent`: 출력 `data-slot="collapsible-content"`.
+- 새 prop은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/collapsible.css` (`--hm-collapsible-*`).
+
+`trigger-text`, `trigger-gap`, `trigger-font-size|line-height|font-weight`, `icon-size`, `icon-color`, `content-gap`, `content-text`, `content-font-size|line-height`, `disabled-opacity`. Semantic만 참조하고 `--hm-accordion-*` 등 다른 컴포넌트의 Token을 쓰지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`aria-expanded`, `aria-controls`)·Enter/Space·controlled/uncontrolled·disabled·`asChild`, `data-slot`, `cn(..., className)`, Content의 `hidden` 처리.
+
+## 8. HM에서 변경한 항목
+
+- 일반 trigger의 텍스트 trigger 스타일, Content 간격·타이포, indicator 회전은 shadcn에 없던 시각 규격을 추가한 것이다.
+- `CollapsibleTrigger`의 `asChild` data-slot 처리(위 §5).
+- Animation은 추가하지 않았다.
+
+## 9. Storybook
+
+- 대표 Story `All`("Collapsible"): `StateBoard`로 Closed, Open, Disabled, Long Content, Controlled + Button trigger를 한 페이지에 둔다. trigger 안 chevron은 일반 소비 조합(`lucide-react` 아이콘)이다.
+- verification: `Closed`, `Open`, `Disabled`, `Long Content`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(14/20/500, gap 8px, Disabled opacity 0.6)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- 열림/닫힘 animation 없음. Motion 규칙이 정해지면 Accordion과 함께 재검토.
+- indicator는 컴포넌트에 내장하지 않고 소비 조합으로 둔다(Accordion과 다름). 내장 여부는 사용 사례가 쌓이면 결정.
+- 박스형(border/배경) Content variant는 만들지 않았다.
+- Hover 밑줄은 일반 trigger에만 적용한다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/collapsible.tsx
+packages/ui/src/theme/collapsible.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/collapsible.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): Enter로 열기(`aria-expanded=true`, indicator 180° 회전), Space로 닫기, 닫힌 content `display: none`, disabled 클릭 무반응(opacity 0.6, cursor not-allowed), controlled(Button trigger asChild)에서 클릭으로 열리고 상태 문구와 버튼 라벨(`접기`)이 갱신됨.
+- Button trigger: `data-slot="button"`, `data-variant="primary"`와 HM Button 색이 유지됨.
+- computed style: 일반 trigger 14/20/500, `rgb(10,34,29)`, 배경 투명, icon 16px, content 위 padding 8px. 긴 콘텐츠에서 가로 overflow 없음.
+- 미확인: 포인터 클릭(JS click과 키보드만 사용), focus ring 시각, 390px 폭, uncontrolled `defaultOpen=false`에서 trigger 클릭(키보드 Enter로 대체 확인).
diff --git a/docs/components/combobox.md b/docs/components/combobox.md
new file mode 100644
index 0000000..7079971
--- /dev/null
+++ b/docs/components/combobox.md
@@ -0,0 +1,132 @@
+# Combobox
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Combobox 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태와 성격
+
+| 항목 | 내용 |
+|---|---|
+| 성격 | **Reusable component, Popover + Command 조합** (typed `options` wrapper) |
+| 구현 상태 | 구현 완료 (single-select, 현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | `Popover`(public API) + `Command`(public API) 조합. shadcn 공식 Combobox는 예시 조합이다 |
+| 대표 Story | `Components/Search & Date/Combobox` → `All` (이름 "Combobox") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Combobox가 없다(Select와 Search Field는 다른 컴포넌트). 참고할 수치가 없었다.
+- **Component로 만든 이유**: 검색 가능한 단일 선택은 서비스에서 반복되고(trigger 텍스트, 검색, 선택 표시, 닫힘, focus 복귀가 동일) 최소 API(`options`)로 충분해서 typed wrapper를 제공한다. 더 복잡한 항목(그룹, 아이콘 등)은 소비자가 `Command`를 직접 조합한다.
+- **구현 방식**: Popover(Portal, collision, Escape, focus 복귀)와 Command(검색, 필터링, 키보드, listbox ARIA)를 그대로 조합한다. Select의 구현이나 연결형 윤곽을 복제하지 않았다.
+- **보류**: §11.
+
+## 3. Select와의 구분
+
+| | Select | Combobox |
+|---|---|---|
+| 용도 | 정해진 짧은 목록에서 선택, 검색 불필요 | 검색/필터가 필요한 선택 |
+| 구현 | Radix Select | Popover + Command(cmdk) |
+| 목록 | trigger에 붙은 연결형 윤곽, 선택 항목은 면으로 표시 | 독립 floating 패널(검색 Input + 목록), 선택 항목은 Accent 45% 면 + check 아이콘 |
+| 접근성 모델 | Radix Select(listbox) | `role=combobox` trigger + 패널 안 cmdk combobox/listbox |
+
+## 4. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Size | `large`(기본, 44px, 16 / 24), `medium`(34px, 14 / 20) — Select와 같은 두 크기 |
+| Trigger | 폭 100%(부모 폭), padding-x 12px, 1px `--hm-sem-stroke-input-default`, radius 4px, 흰 면, 오른쪽 chevron 18px |
+| 값 / placeholder | 선택된 option의 label, 없으면 placeholder("선택", `--hm-sem-fg-placeholder`), 길면 말줄임 |
+| Popup | padding 0, 폭 = trigger 폭(`--radix-popover-trigger-width`), 독립 4px gap. Focus Light 2 border, input radius 4px(네 모서리), shadow `0 2px 24px black 12%` |
+| 검색 | Command Input(placeholder 기본 "검색...") |
+| 목록 | Command List(최대 280px), Item 높이 36px·padding-x 12px·radius 0·weight 400. Large 16/24, Medium 14/20. 선택 check 16px, 긴 label은 말줄임 |
+| Empty | "결과가 없습니다."(`emptyText`) |
+
+## 5. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Focus / Open | trigger 테두리 전체가 `--hm-sem-stroke-input-focus` (Input·Select와 같은 방식) |
+| Highlighted option | `--hm-sem-surface-highlight` (Accent 45%) |
+| Selected option | check 아이콘 + Accent 45% 면(`data-checked`). Command highlight가 다른 항목으로 옮겨져도 유지 |
+| Disabled (combobox) | opacity 0.6(이 컴포넌트 값), cursor not-allowed, 열리지 않음 |
+| Disabled option | Command의 disabled(opacity 0.6), 방향키 이동·선택 제외 |
+| 선택 후 | 값 갱신, Popover 닫힘, focus가 trigger로 복귀. 다시 열면 검색어가 비어 있다(Command가 닫을 때 unmount됨) |
+
+## 6. API
+
+export: `Combobox`, types `ComboboxOption`(`{ value, label, disabled? }`), `ComboboxSize`.
+
+- `options`(필수), `value`/`defaultValue`/`onValueChange(value)`, `placeholder`, `searchPlaceholder`, `emptyText`, `size`, `disabled`, 그리고 `button` props(`id`, `aria-label`, `className`…).
+- 필터링: option의 `value`와 `label`(keywords)에 cmdk 기본 fuzzy 필터를 쓴다.
+- 이미 선택된 option을 다시 선택해도 값은 유지된다(해제 UI는 없다).
+- **접근성**: Trigger는 `role="combobox"`, `aria-haspopup="listbox"`, `aria-expanded`. 패널 안 Command Input이 `role=combobox`(`aria-controls` → `role=listbox`), option은 `role=option`. 이름은 `<label htmlFor=id>` 또는 `aria-label`을 소비자가 준다. 실제 ARIA combobox(편집 가능한 trigger input)가 아니라 **버튼 trigger + 패널 내 검색 combobox** 구조다(shadcn 공식 구조).
+- generic data framework, 다중 선택, 비동기 로딩은 만들지 않았다.
+
+### 값 소유권과 외부 초기화
+
+- `controlled?: boolean`은 선택적 값 소유권 설정이다. `true`이면 `value`가 `undefined`여도 Controlled이며, 부모 값만 표시한다. `undefined`는 선택 없음이다. 사용자 선택은 기존 `(string) => void` 콜백으로 전달하며, 부모가 값을 반영하지 않으면 표시값은 유지된다.
+- `controlled={false}`이면 내부 state가 소유권을 가진다. `value`는 사용하지 않고 `defaultValue`를 최초 마운트 시에만 적용한다. 이후 `defaultValue` 변경은 초기화가 아니다. 사용자 선택은 내부 state를 갱신하고 콜백을 호출한다.
+- **Legacy 호환**: `controlled`를 생략하면 기존 `value !== undefined` 판정을 유지한다. 문자열이 있으면 Controlled, `undefined`이면 Uncontrolled이다. 이 방식으로 외부 값을 `undefined`로 바꾸면 과거 내부 값/defaultValue가 다시 표시될 수 있다. 기존 소비 코드의 동작은 변경하지 않았다.
+- 신규 Controlled 사용과 FilterBar 연동은 `controlled={true}`를 사용한다. `controlled` 옵션과 값 소유권 모드는 마운트 중 변경하지 않는 사용 계약을 권장한다. Controlled에서 `defaultValue`를 함께 전달해도 부모 `value`가 우선한다.
+- `""`은 유효한 문자열 옵션 값이며 `undefined`와 동일한 빈 값으로 정규화하지 않는다. `value=""`는 빈 문자열 옵션이 있으면 그 label을 표시하고, 없으면 기존처럼 placeholder를 표시한다. 빈 문자열을 가진 항목을 선택하면 콜백은 `""`을 전달한다.
+
+```tsx
+const [category, setCategory] = useState<string | undefined>()
+
+<Combobox controlled={true} options={categories} value={category} onValueChange={setCategory} />
+// 외부 항목 지정/갱신: setCategory("design")
+// 외부 초기화: setCategory(undefined) — key remount 불필요
+```
+
+외부 값 갱신/초기화는 `onValueChange`를 호출하지 않는다. FilterBar의 부모는 항목 state와 조회 조건을 함께 초기화한다. 선택값 clear는 팝업 닫기나 검색어 초기화를 의미하지 않는다. 열린 팝업의 검색어를 강제로 지우는 새 계약이나 clear UI는 추가하지 않는다. `controlled`를 생략한 Legacy 호출의 remount 우회는 이 신규 계약과 구분한다.
+
+## 7. Dependency
+
+새 dependency 없음(`Command`의 `cmdk`, `Popover`의 Radix를 그대로 사용).
+
+## 8. Token
+
+Component Mapping 위치: `packages/ui/src/theme/combobox.css` (`--hm-combobox-*`). Trigger와 선택 check만 스타일하며 Popover와 Command의 스타일은 중복 정의하지 않는다.
+
+`height-md|lg`, `border-width`, `padding-x`, `gap`, `radius`, `font-size|line-height-md|lg`, `background`, `text`, `placeholder`, `border-color`, `focus-border-color`, `icon-size|color`, `check-size`, `disabled-opacity`. Semantic/Theme palette를 참조하며 `--hm-popover-*`, `--hm-command-*`, `--hm-select-*`는 참조하지 않는다. 기본 모양은 `@layer components`(소비자의 `className`이 이김). Trigger에는 `min-width: 0; max-width: 100%`를 두어 긴 값이 grid/flex 부모를 넓히지 않고 말줄임된다.
+
+**Popover 결합 지점**: Popup의 padding과 폭을 `PopoverContent`의 inline style로 `--hm-popover-padding: 0px`, `--hm-popover-width: var(--radix-popover-trigger-width)`로 지정해 Popover token 값을 인스턴스 단위로 덮는다(Popover 코드는 변경하지 않음).
+
+## 9. 조합한 컴포넌트에서 유지한 항목
+
+Popover: Portal, collision, Escape, 바깥 클릭 닫힘, trigger focus 복귀. Command: 필터링, 방향키/Home/End/Enter, disabled 건너뜀, Empty, listbox/option ARIA.
+
+## 10. Storybook
+
+- 대표 Story `All`("Combobox"): Empty placeholder + search(Remix는 disabled option), Selected(controlled, 값 표시), Medium, Long option, Disabled를 한 페이지에 둔다. Label은 Story 조합이다.
+- verification: `Empty`, `Controlled`, `Long Option`.
+
+## 11. 사용자 확정 결정 / 보류
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다. Combobox는 최소 `options` wrapper로 제공한다(작업 지시 B안).
+- 보류: 수치(44/34px, check 아이콘 위치)는 현재 HM 규격이며 디자인 확정 시 재검토. clear 버튼, 다중 선택(chips), 그룹 option, 새 항목 생성, 비동기 검색, 편집 가능한 trigger(input형 combobox)는 만들지 않았다. 선택 option의 label 줄바꿈 표시(긴 옵션 전체 보기)는 말줄임으로 대체.
+- Popup 방향/collision은 Popover 기본(`align="start"`).
+- 2026-10-06 Visual QA: `combobox.css`의 `[data-combobox-popup]` scope로 Select의 시각 언어와 정합. Command/Popover 공용 CSS·동작은 유지. 대표 Story의 Select 비교 구역에서 두 size를 확인한다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/combobox.tsx
+packages/ui/src/theme/combobox.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/combobox.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-08 Controlled 초기화: 실제 소스를 직접 묶은 격리 Headless Edge 환경에서 수정 전 과거 값 재표시를 재현했다. `controlled={true}`의 undefined → A → B → undefined, 최초 Controlled 값 clear, 부모 선택 거부, 외부 값 갱신, 콜백 횟수, Legacy/defaultValue/명시적 Uncontrolled, 빈 문자열 옵션, 열린 팝업 clear와 검색어/focus 유지, 키보드 선택·disabled 제외·focus 복귀를 확인했다. 소스 기준 영향 범위 타입 검사 통과. 공용 dist / Storybook 빌드 및 전체 시각 회귀는 수행하지 않았다.
+
+- 2026-10-06 Visual QA: 1280/1024/768/390px에서 popup 폭=trigger, gap 4px, 선택 면 지속, 검색/Empty/키보드 선택·focus 복귀·disabled 건너뜀·긴 label 말줄임 통과. Select 비교에서 Item 높이는 36/42px를 유지하고 Medium 14/20·Large 16/24 typography를 일치시켰다. Command/Popover 공용 변경 없음. `typecheck`, `build`, `build-storybook` 통과.
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): trigger에서 Enter로 열림(`role=combobox`, `aria-expanded` true, Popup 폭 = trigger 폭 320px), 검색 Input으로 focus 이동, 첫 항목 highlight, 검색 "nu" → Nuxt만 남아 highlight, Enter로 선택하면 trigger가 "Nuxt"로 바뀌고 Popover가 닫히며 focus가 trigger로 복귀. ArrowDown 이동에서 disabled `Remix` 건너뜀(Nuxt → Astro), Escape로 닫힘과 trigger focus 복귀(값 유지), 결과 없음 "zzz"는 Empty 문구, 다시 열면 검색어가 비어 있고 전체 5개 표시.
+- 선택 표시: 선택된 option에만 check 아이콘(opacity 1)과 `data-checked`. 클릭으로 선택하면 trigger와 controlled 값이 갱신됨.
+- Popover 스타일 확인: border `rgb(222,219,210)`, radius 4px, 그림자, padding 0, 흰 면(처음에 `data-slot` 덮어쓰기로 이 스타일이 빠진 문제를 수정함).
+- Responsive(390×844): trigger 320px, popup(304px)이 viewport 안에 들어감, 긴 option의 값과 항목이 말줄임, 페이지 가로 overflow 없음(처음에는 trigger의 `min-width:auto` 때문에 페이지가 833px로 밀리는 문제가 있어 `min-width:0`으로 수정).
+- 미확인: 클릭 선택 직후 닫힘 animation 시각, 포인터 hover 시각, 화면 하단에서 popup이 위로 flip 되는 경우, 스크린리더 실제 읽기.
diff --git a/docs/components/command.md b/docs/components/command.md
new file mode 100644
index 0000000..083619e
--- /dev/null
+++ b/docs/components/command.md
@@ -0,0 +1,105 @@
+# Command
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Command 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태와 성격
+
+| 항목 | 내용 |
+|---|---|
+| 성격 | **Primitive component** (검색 가능한 command/list). Combobox 자체가 아니다 |
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Command = **cmdk** |
+| 대표 Story | `Components/Search & Date/Command` → `All` (이름 "Command") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Command가 없다(Search Field의 후보 목록은 다른 컴포넌트). 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다. Input·Popover·Dropdown Menu Token은 참조하지 않는다(Command Input은 Command 전용 Token).
+- **구현 방식**: cmdk가 검색 필터링, 방향키/Home/End 이동, Enter 선택, disabled 건너뜀, 그룹, Empty, listbox/option ARIA를 소유한다. HM은 cmdk의 속성(`data-selected`, `data-disabled`, `[cmdk-group-heading]`)에 시각을 연결한다.
+- **범위**: 전역 Command Palette(`CommandDialog`)는 만들지 않았다(별도 고급 패턴).
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Command | 흰 면(`--hm-sem-bg-surface`), 글자 `--hm-sem-fg-primary`, radius 4px. **border·shadow 없음**(Popover 등 컨테이너 안에서 쓰는 것을 전제) |
+| Input | 높이 40px, padding-x 12px, 14 / 20, 아래 1px `--hm-sem-stroke-input-default` 구분선, 검색 아이콘 16px `--hm-sem-fg-secondary`, placeholder `--hm-sem-fg-placeholder` |
+| List | 최대 높이 280px(넘치면 세로 scroll), padding 4px |
+| Item | 최소 높이 36px, padding-x 12px, gap 8px, radius 2px, 14 / 20, 아이콘 16px |
+| Group heading | 12 / 18 / 500, `--hm-sem-fg-secondary`, padding `6px 12px` |
+| Separator | 1px `--hm-sem-stroke-input-default`, List 폭 전체 |
+| Shortcut | 12px, `--hm-sem-fg-secondary`, letter-spacing .05em |
+| Empty | padding 24px 12px, 가운데, `--hm-sem-fg-secondary` |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Highlighted (`data-selected="true"`) | 배경 Accent 45%(`--hm-sem-surface-highlight`), 글자 `--accent-foreground`. 포인터 hover와 키보드 이동이 공유 |
+| Disabled (`data-disabled="true"`) | opacity 0.6(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), cursor not-allowed, 방향키 이동에서 제외 |
+| Empty | 필터 결과가 없을 때 `CommandEmpty` 표시 |
+| Focus | Input에 있음(`outline-hidden`). 이동은 Highlighted 면으로 표시 |
+
+## 5. API
+
+cmdk props 그대로. export: `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut`.
+
+- `Command`: `value`/`onValueChange`(highlight), `filter`(사용자 정의 필터), `shouldFilter`, `loop`, `label`.
+- `CommandItem`: `value`, `keywords`, `disabled`, `onSelect`.
+- `CommandInput`: Input + 검색 아이콘 wrapper(`data-slot="command-input-wrapper"`)를 포함한다.
+- **필터링은 cmdk 기본(fuzzy) 그대로**이며 HM이 검색 알고리즘을 만들지 않았다.
+- 접근성: `CommandInput`은 `role="combobox"`, `aria-expanded`, `aria-controls`(listbox), `aria-autocomplete="list"`; `CommandList`는 `role="listbox"`; `CommandItem`은 `role="option"`.
+
+## 6. Dependency
+
+- `cmdk` ^1.1.1 (`packages/ui`에 추가, shadcn Command의 기반). CENTER 패키지에는 추가하지 않았다.
+
+## 7. Token
+
+Component Mapping 위치: `packages/ui/src/theme/command.css` (`--hm-command-*`).
+
+`background`, `text`, `radius`, `input-*`(height, padding-x, gap, font, placeholder, icon), `divider-color`, `list-max-height|padding`, `item-*`(height, padding-x, gap, radius, font), `highlight-background|text`, `group-label-*`, `shortcut-*`, `empty-*`, `disabled-opacity`. Semantic과 Primitive(`--hm-warm-neutral-pale`)만 참조한다. 신규 Primitive와 Semantic 없음. 이 CSS는 cmdk 내부 속성에 맞춘 일반 CSS이며 `@layer`를 쓰지 않는다(`className`으로 Command의 높이 등을 바꾸는 것은 TSX class 영역).
+
+## 8. cmdk에서 유지한 항목
+
+필터링과 정렬, 키보드(ArrowUp/Down, Home/End, Enter, disabled 건너뜀), 그룹 숨김(결과 없는 그룹), Empty, `data-selected`/`data-disabled`, listbox/option ARIA, 마우스 hover가 highlight를 옮기는 동작.
+
+## 9. Storybook
+
+- 대표 Story `All`("Command"): Search + disabled item(선택 로그), Groups·icons·shortcut(`CalendarIcon`, `UserIcon`, `SettingsIcon`), Long list(30개, List가 scroll)를 한 페이지에 둔다. 테두리 박스는 Story 조합이다.
+- verification: `Search`, `Grouped`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(40px Input, 36px Item, 280px List 최대 높이)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Command Palette(`CommandDialog`, 전역 단축키 호출)는 별도 패턴으로 남겼다.
+- 로딩 상태(`Command.Loading`), 중첩 페이지는 스타일링하지 않았다.
+- 선택됨(value) 표시는 Command에 없다(highlight와 다르다). Combobox가 check 아이콘으로 따로 표시한다.
+- Command의 Escape는 Command 자체에서는 하는 일이 없다(Popover/Dialog 안에서는 컨테이너가 닫는다).
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/command.tsx
+packages/ui/src/theme/command.css
+packages/ui/package.json             (dependency: cmdk)
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/command.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- ARIA(Browser pane): Input `role=combobox`·`aria-expanded=true`·`aria-controls`·`aria-autocomplete=list`, List `role=listbox`, Item `role=option`, disabled Item에 `data-disabled="true"`.
+- keyboard: 첫 항목이 처음부터 highlight, ArrowDown으로 이동(비활성 항목 건너뜀: 바나나 → 포도), Enter로 선택(`onSelect` 로그 갱신), 그룹 간 이동(ArrowUp 환경설정 → 프로필), End로 마지막 활성 항목(비활성 `결제`는 제외).
+- 검색: 한글 "바나" 입력 시 바나나만 표시, 결과 없는 "zzz"는 Empty 문구, 입력을 지우면 전체 4개로 복귀하고 첫 항목이 highlight. Escape는 Input focus를 유지(Command 단독에서는 동작 없음).
+- computed style: Input 래퍼 40px, List 최대 280px·padding 4px, Item 36px·padding `0 12px`·14/20, Highlighted `rgb(189,223,212)`, Group heading 12px/500 `rgb(110,103,89)`, Shortcut 12px.
+- 미확인: 긴 List의 키보드 scroll 시각, 모바일 폭(Combobox 안에서만 확인), pointer hover 시각, `CommandItem`의 `keywords` 외 사용자 정의 `filter`.
diff --git a/docs/components/context-menu.md b/docs/components/context-menu.md
new file mode 100644
index 0000000..f5caa1f
--- /dev/null
+++ b/docs/components/context-menu.md
@@ -0,0 +1,93 @@
+# Context Menu
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Context Menu 고유의 API·Token·상태·결정만 기록한다. Dropdown Menu와 같은 메뉴 계열이므로 상세 값은 `dropdown-menu.md`와 대응한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-03 |
+| 기반 | shadcn/ui Context Menu (Radix `ContextMenu`, `radix-ui` 1.6.7 / `@radix-ui/react-context-menu` 2.3.7) |
+| 대표 Story | `Components/Overlay/Context Menu` → `All` (이름 "Context Menu") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz에는 Context Menu 규격이 없다. 최종 기준은 현재 `@hm-design/ui` 구현과 Dropdown Menu 문서다.
+- **현재 HM 규격**: 면·윤곽·radius·그림자는 Floating Surface Semantic(`--hm-sem-floating-*`)을 source로 쓰고, item·text 값은 Dropdown Menu와 같은 현재 HM 값이다.
+- **구현 방식**: shadcn / Radix Context Menu 구조 유지. 상태는 Radix 속성(`data-highlighted`, `data-disabled`, `data-state`)만 쓴다.
+
+## 3. Dropdown Menu와 역할 차이
+
+| | Dropdown Menu | Context Menu |
+|---|---|---|
+| 여는 방법 | 명시적 버튼(Trigger) 클릭 / Enter / Space / 방향키 | 대상 영역 우클릭, context-menu key / Shift+F10, 터치 long press |
+| 위치 | Trigger 기준 anchored (`sideOffset` 4) | 포인터 위치 기준 (`sideOffset` 없음) |
+| 용도 | 버튼이 가진 Action 목록 | 대상 객체에 대한 보조 Action |
+| 닫힐 때 focus | Trigger로 복귀 | Trigger가 포커스 가능한 요소일 때만 복귀(§7) |
+
+브라우저 native context menu 대신 HM Context Menu가 열린다(Radix가 `contextmenu` 이벤트를 막음).
+
+## 4. 기본 규격 / 상태 규격
+
+`dropdown-menu.md` §3·§4와 값이 같다(Surface White, 1px pale border, radius 4px, 12px glow 그림자, item 36px·14/20, Highlighted Accent 45%(`--hm-sem-surface-highlight`), Disabled opacity 50, Destructive `--hm-sem-action-destructive`, Check 16px / Radio 8px). 값이 같아도 `--hm-dropdown-menu-*`는 참조하지 않는다.
+
+## 5. API
+
+Radix Context Menu props 그대로. export: `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuGroup`, `ContextMenuLabel`, `ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubTrigger`, `ContextMenuSubContent`, `ContextMenuPortal`.
+
+- `ContextMenuItem`: shadcn `variant="default" | "destructive"`, `inset`. Label·CheckboxItem·RadioItem·SubTrigger: `inset`.
+- 출력 속성: `data-slot="context-menu-*"`, Radix `data-state`·`data-highlighted`·`data-disabled`·`data-side`.
+- HM 전용 prop 없음.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/context-menu.css` (`--hm-context-menu-*`).
+
+- Surface 5개(`background`, `border-width`, `border-color`, `radius`, `shadow`)는 **Floating Surface Semantic을 source로 참조**한다: `--hm-sem-floating-background|border-width|border-color|radius|shadow`.
+- 나머지(`text`, `padding`, `item-*`, `font-*`, `highlight-*`, `destructive-*`, `label-*`, `shortcut-*`, `separator-color`, `indicator-size`, `radio-dot-size`)는 Dropdown Menu와 같은 현재 HM 값을 자체 정의한다.
+- 다른 컴포넌트의 Component Token을 쓰지 않는다. 신규 Primitive·Semantic 없음. 기존 Floating Semantic을 유지한다.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`role=menu`, `menuitem*`)·키보드(방향키, Home/End, Enter/Space, 오른쪽 방향키 sub menu, Escape, typeahead)·Portal·collision·`data-slot`·`cn(..., className)`·open/close animation class·`z-50`·lucide 아이콘.
+
+**접근성 주의**: Radix `ContextMenuTrigger`는 기본적으로 포커스할 수 없는 `span`이다. 키보드 사용자가 여는 경로(Shift+F10 / context-menu key)를 제공하려면 소비자가 Trigger 영역에 `tabIndex={0}`을 주거나 `asChild`로 포커스 가능한 요소(버튼, 행 등)를 감싸야 한다. 우클릭만으로 접근 가능한 기능을 만들지 않는다. 대표 Story의 영역은 `tabIndex={0}`을 준다.
+
+## 8. HM에서 변경한 항목
+
+Dropdown Menu와 동일: shadcn 시각 class(`rounded`, `shadow`, `p-1`, `focus:bg-accent` 등)를 제거하고 theme CSS + `data-highlighted`로 대체. Radio는 CSS 크기 token을 쓰는 원(`context-menu-radio-dot`), Check / Radio indicator span에 `data-slot="context-menu-item-indicator"` 추가. Context Menu에는 `sideOffset`이 없다.
+
+## 9. Storybook
+
+- 대표 Story `All`("Context Menu"): 점선 영역을 우클릭하면 전체 메뉴가 열린다(Label, Item + Shortcut, disabled, Separator, Checkbox, Radio Group, Sub menu, destructive).
+- verification: `Open`(로드 시 합성 `contextmenu` 이벤트로 열린 상태, fullscreen).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-03: Context Menu는 Dropdown Menu와 같은 floating menu 계열이므로 Floating Surface Semantic을 Component Token의 source로 쓴다. Component Token은 유지하고 `--hm-dropdown-menu-*`는 참조하지 않는다(작업 지시).
+
+## 11. 미확정 / 보류
+
+- 수치는 Dropdown Menu와 같은 현재 HM 규격이며 디자인 확정 시 함께 재검토.
+- Home/End·typeahead·long press(터치)는 확인하지 못했다.
+- Shift+F10 / context-menu key는 자동화 입력이 브라우저의 native `contextmenu` 이벤트를 만들지 못해 확인하지 못했다(Radix는 이 이벤트로 여는 구조이며 우클릭과 같은 경로).
+- 메뉴가 닫힌 뒤 Trigger가 포커스 불가면 focus는 body에 남는다(Radix 동작).
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/context-menu.tsx
+packages/ui/src/theme/context-menu.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/context-menu.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-03).
+- 실제 interaction(Browser pane): 우클릭 시 native 메뉴 대신 HM 메뉴가 열림, 방향키 이동(disabled 항목 건너뜀), Enter로 Checkbox 토글(메뉴 유지), 방향키 아래 + 오른쪽으로 Sub menu 열림과 첫 항목 focus, Escape 두 번으로 sub → menu 순서 닫힘.
+- computed style: Content·Sub Content 모두 white, `1px solid rgb(222,219,210)`, radius 4px, `0 0 12px .2` 그림자, item 36px, Dropdown Menu(`Open` Story) 값과 동일. role `menu`.
+- Dropdown Menu의 같은 값이 변하지 않음을 확인(회귀 없음).
diff --git a/docs/components/date-picker.md b/docs/components/date-picker.md
new file mode 100644
index 0000000..179b2e4
--- /dev/null
+++ b/docs/components/date-picker.md
@@ -0,0 +1,142 @@
+# Date Picker
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Date Picker 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태와 성격
+
+| 항목 | 내용 |
+|---|---|
+| 성격 | **Reusable component, Popover + Calendar 조합** (새 날짜 engine 없음) |
+| 구현 상태 | 구현 완료 (single-date, 현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | `Popover`(public API) + `Calendar`(public API) 조합. shadcn 공식 Date Picker는 예시 조합이다 |
+| 대표 Story | `Components/Search & Date/Date Picker` → `All` (이름 "Date Picker") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Date Picker가 이름뿐이고 규격이 없다. 참고할 수치가 없었다.
+- **Component로 만든 이유**: 서비스의 모든 날짜 선택이 같은 trigger 텍스트 형식, 선택 후 닫힘, 값 처리, focus 복귀를 필요로 해 반복 사용이 확실하다고 판단했다. 값 처리(`value`/`defaultValue`/`onValueChange`)는 패키지가 소유한다.
+- **구현 방식**: Popover(Portal, collision, Escape, focus 복귀)와 Calendar(날짜 모델, 키보드)를 그대로 조합한다. Popover 내부 구현을 복제하지 않았다.
+- **Trigger**: Button이 아니라 Input/Select의 field language를 따르는 필드형 버튼이다. Button/Input/Select Token은 참조하지 않고 `--hm-date-picker-*`로 관리한다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Size | `large`(기본, 안쪽 42px + 1px border = 44px, 16 / 24), `medium`(안쪽 32px = 34px, 14 / 20) — Select와 같은 두 크기 |
+| Trigger | 폭 100%(부모 폭), padding-x 12px, 1px `--hm-sem-stroke-input-default`, radius 4px, 흰 면, 오른쪽 달력 아이콘 18px `--hm-sem-fg-secondary` |
+| 값 / placeholder | 선택값은 `--hm-sem-fg-primary`, placeholder("날짜 선택")는 `--hm-sem-fg-placeholder`, 길면 말줄임 |
+| 날짜 표시 | 로컬 `Date`의 연·월·일 → `YYYY.MM.DD` (예: `2026.01.09`, `2026.10.06`). `format` prop으로 교체 |
+| Popup | Popover 면(흰 면, 1px pale border, 4px radius, 그림자)에 Popover padding 0, 폭 `auto`로 Calendar에 맞춤 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Empty / Selected | `data-empty`가 있으면 placeholder 색 |
+| Focus / Open | 테두리 전체가 `--hm-sem-stroke-input-focus`(ring 없음, Input·Select와 같은 방식). 열림은 Radix `data-state="open"` |
+| Invalid (`aria-invalid="true"`) | Trigger border 1px `--hm-sem-action-destructive`. 새 `invalid` / `error` / `status` prop 없음 |
+| Invalid + Keyboard Focus (`:focus-visible`) | Destructive border 유지 + Focus Semantic 3px / 50% outer ring |
+| Invalid + Open | Trigger Error border 유지. Calendar Selected는 기존 Active, 날짜 Keyboard Focus는 기존 Focus Semantic 유지 |
+| Disabled | opacity 0.6(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), cursor not-allowed, 열리지 않음 |
+| 선택 후 | 값 갱신, Popover 닫힘, focus가 trigger로 복귀 |
+
+## 5. API
+
+export: `DatePicker`, type `DatePickerSize`.
+
+- `value`/`defaultValue`(Date), `onValueChange(date)`, `placeholder`, `size` `"medium" | "large"`(기본 `large`), `disabled`, `format(date) => string`, `calendarProps`(`disabled`, `startMonth`, `endMonth`, `locale`, `captionLayout`, `weekStartsOn`, `today`), 그리고 `button` props(`id`, `aria-label`, `className`…).
+- 선택은 `required`라 선택된 날짜를 다시 눌러도 해제되지 않는다(해제/clear UI는 없음).
+- **접근성**: Trigger는 `button`에 Radix Popover의 `aria-haspopup="dialog"`, `aria-expanded`, 팝업은 `role="dialog"`. 접근 가능한 이름은 `<label htmlFor=id>`(Story) 또는 `aria-label`을 소비자가 준다. 선택값은 버튼 텍스트로 읽힌다.
+- Popover가 열릴 때 Radix 기본은 첫 tabbable(이전 달 버튼)에 focus하므로, DatePicker가 `onOpenAutoFocus`로 **Calendar의 tab stop(선택일, 없으면 오늘)에 focus**를 보낸다.
+- 범위(range) Date Picker는 만들지 않았다(필요가 명확해질 때 추가).
+
+### 값 소유권과 외부 초기화
+
+- `controlled?: boolean`은 선택적 값 소유권 설정이다. `true`이면 `value`가 `undefined`여도 Controlled이며, 부모 값만 표시한다. `defaultValue`는 표시값을 대신하지 않는다. 사용자 선택은 기존 `(Date | undefined) => void` 콜백으로 전달하며, 부모가 값을 반영하지 않으면 표시값은 유지된다.
+- `controlled={false}`이면 내부 state가 소유권을 가진다. `value`는 사용하지 않고 `defaultValue`를 최초 마운트 시에만 적용한다. 이후 `defaultValue` 변경은 초기화가 아니다. 사용자 선택은 내부 state를 갱신하고 콜백을 호출한다.
+- **Legacy 호환**: `controlled`를 생략하면 기존 `value !== undefined` 판정을 유지한다. 날짜가 있으면 Controlled, `undefined`이면 Uncontrolled이다. 이 방식으로 외부 값을 `undefined`로 바꾸면 과거 내부 값/defaultValue가 다시 표시될 수 있다. 기존 소비 코드의 동작은 변경하지 않았다.
+- 신규 Controlled 사용과 FilterBar 연동은 `controlled={true}`를 사용한다. `controlled` 옵션과 값 소유권 모드는 마운트 중 변경하지 않는 사용 계약을 권장한다. Controlled에서 `defaultValue`를 함께 전달해도 부모 `value`가 우선한다.
+
+```tsx
+const [date, setDate] = useState<Date | undefined>()
+
+<DatePicker controlled={true} value={date} onValueChange={setDate} />
+// 외부 날짜 지정/갱신: setDate(new Date(2026, 9, 6))
+// 외부 초기화: setDate(undefined) — key remount 불필요
+```
+
+외부 값 갱신/초기화는 `onValueChange`를 호출하지 않는다. FilterBar의 부모는 날짜 state와 조회 조건을 함께 초기화한다. 선택값 clear는 팝업 닫기나 달력의 현재 월/focus 초기화를 의미하지 않으며, 새 clear UI를 추가하지 않는다. `controlled`를 생략한 Legacy 호출의 remount 우회는 이 신규 계약과 구분한다.
+
+## 6. Dependency
+
+새 dependency 없음(`Calendar`의 `react-day-picker`, `Popover`의 Radix를 그대로 사용). 날짜 표시는 `Intl.DateTimeFormat`, 값은 native `Date`이며 별도 date 라이브러리를 추가하지 않았다.
+
+## 7. Token
+
+Component Mapping 위치: `packages/ui/src/theme/date-picker.css` (`--hm-date-picker-*`). Trigger만 스타일하며 Popover와 Calendar의 스타일은 중복 정의하지 않는다. 선택일 색은 Calendar Selected(`--hm-sem-state-active`)를 그대로 상속하며 Date Picker 전용 selected 색이나 scope override는 없다.
+
+`height-md|lg`, `border-width`, `padding-x`, `gap`, `radius`, `font-size|line-height-md|lg`, `background`, `text`, `placeholder`, `border-color`, `focus-border-color`, `icon-size|color`, `disabled-opacity`. Semantic/Theme palette를 참조하며 `--hm-popover-*`와 `--hm-calendar-*`는 참조하지 않는다. 기본 모양은 `@layer components`에 두어 소비자의 `className`(폭, 높이)이 이긴다.
+
+**Popover 결합 지점**: Popup의 padding과 폭을 `PopoverContent`의 inline style로 `--hm-popover-padding: 0px`, `--hm-popover-width: auto`를 지정해 Popover의 token 값을 인스턴스 단위로 덮는다. Popover 코드를 바꾸지 않는 선택이며, Popover token 이름에 대한 약한 결합이다.
+
+## 8. 조합한 컴포넌트에서 유지한 항목
+
+Popover: Portal, collision 처리, Escape, 바깥 클릭 닫힘, trigger focus 복귀, `role=dialog`. Calendar: 키보드(방향키, Enter/Space, PageUp/Down), disabled 날짜, 월 이동, locale(기본 한국어).
+
+## 9. Storybook
+
+- 대표 Story `All`("Date Picker"): Empty, Selected(`2026.10.06`), 기본 형식(`2026.01.09`)/custom override, Controlled(값 표시), Medium, Disabled dates(5일 이전·일요일), Disabled를 한 페이지에 둔다. Label은 Story 조합이며 `today`는 Calendar prop으로 2026-10-02에 고정.
+- verification: `Empty`, `Selected`, `Controlled`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다. Date Picker는 실제 소비 API가 필요한 Component로 만든다(작업 지시).
+- 2026-10-06 Visual QA: Trigger 기본 formatter만 `YYYY.MM.DD`로 변경. Calendar 날짜 셀·caption·locale, custom `format`은 유지.
+
+## 11. 미확정 / 보류
+
+- 기본 표시 형식은 `YYYY.MM.DD`로 확정했다. 다른 형식은 `format`으로 교체한다.
+- 선택 해제(clear) 버튼, 직접 입력(typing) 입력, Range Date Picker, 시간 선택은 만들지 않았다.
+- 타임존: native `Date`의 로컬 시간 기준이다.
+- Popup의 방향/collision은 Popover 기본(`align="start"`, 아래쪽 우선).
+- 좁은 화면 전용 picker(바텀시트 등)는 만들지 않았다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/date-picker.tsx
+packages/ui/src/theme/date-picker.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/date-picker.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-08 Controlled 초기화: 실제 소스를 직접 묶은 격리 Headless Edge 환경에서 수정 전 과거 값 재표시를 재현했다. `controlled={true}`의 undefined → A → B → undefined, 최초 Controlled 값 clear, 부모 선택 거부, 외부 값 갱신, 콜백 횟수, Legacy/defaultValue/명시적 Uncontrolled, 열린 팝업 clear, 키보드 날짜 선택·focus 복귀를 확인했다. 소스 기준 영향 범위 타입 검사 통과. 공용 dist / Storybook 빌드 및 전체 시각 회귀는 수행하지 않았다.
+
+- 2026-10-06 Visual QA: 1280/1024/768/390px에서 `2026.10.06`, `2026.01.09`, custom override, Korean caption, 키보드 날짜 선택과 focus 복귀 통과. `typecheck`, `build`, `build-storybook` 통과. 아래 2026-10-02 interaction의 긴 한국어 날짜 표시는 당시 기록이다.
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): trigger에서 Enter로 열림(`aria-haspopup=dialog`, `aria-expanded` true), 선택된 날짜/오늘에 focus, ArrowRight 2 → 3, Enter로 선택하면 trigger 텍스트가 `2026년 10월 3일`로 바뀌고 Popover가 닫히며 focus가 trigger로 복귀(controlled 값 `2026. 10. 3.`). 다시 열면 선택일(3)에 focus, Escape로 닫혀도 값은 유지되고 trigger로 복귀, 날짜 클릭(20)으로도 선택과 닫힘. Disabled trigger는 클릭해도 열리지 않음.
+- computed style: Large 44px / 16·24, Medium 34px / 14, border `rgb(222,219,210)`, radius 4px, placeholder `rgb(153,153,153)`, Disabled opacity 0.6·cursor not-allowed.
+- Responsive(390×844): trigger 폭 320px, popup 264px(왼쪽 23px)이 viewport 안에 들어가고 페이지 가로 overflow 없음.
+- 수정한 문제: 처음에 `PopoverContent`에 `data-slot="date-picker-content"`를 넘겨 Popover의 `data-slot`을 덮어쓰는 바람에 Popover 스타일(윤곽, 그림자)이 빠졌다. 제거했다.
+- 미확인: Disabled dates가 popup 안에서 선택 불가한 것(Calendar 문서의 검증으로 갈음), 포인터 hover 시각, 좁은 viewport의 collision flip, `calendarProps.locale` 교체.
+
+- 숨김 `InvalidFocus` Story (`tags: ["verification"]`)를 추가하여 기본 Sidebar는 유지한다.
+
+
+### Invalid + Focus 검증 (2026-10-07)
+
+- Focus ring: `--ring` → `--hm-sem-stroke-input-focus` → `--hm-color-border-focus`. Invalid border: 기존 `--hm-sem-action-destructive`. 새 Runtime Role / Production Error prop / 메시지 컴포넌트 없음.
+- Chromium computed style: Invalid border `rgb(211, 47, 47)`, Invalid + Keyboard Focus box-shadow `color(srgb 0.14902 0.4 0.317647 / 0.5) 0px 0px 0px 3px`, `outline-style: none`. Invalid 단독은 `box-shadow: none`.
+- Theme Designer UI에서 Focus `#c75b00`, Destructive `#d41466`, Active `#007f73`, Accent `#ffd36d`로 분리. Invalid border `rgb(212, 20, 102)` + Focus shadow `color(srgb 0.780392 0.356863 0 / 0.5) 0px 0px 0px 3px` 확인.
+- `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. 기존 문서 예시 CSS warning 및 Storybook chunk 크기 / plugin timing warning 유지.
+- 검증 범위: Chromium 환경. 다른 브라우저의 렌더링은 별도 확인이 필요하다.
+- 숨김 `InvalidFocus`의 실제 Trigger DOM `aria-invalid="true"` 확인. Trigger Invalid border computed 1px, Focus 전후 shadow none → 3px Focus ring. 대표 `All` Default / Selected / Medium / Disabled 유지.
+- Enter / Space open, ArrowRight 날짜 이동, Enter 선택 후 닫힘 및 Trigger focus return, Escape close / focus return, Tab / Shift+Tab 확인. 2026.10.06 → 2026.10.07 선택값 표시 확인.
+- Calendar Selected `rgb(0, 127, 115)`(Active), 선택 날짜 Focus `color(srgb 0.780392 0.356863 0 / 0.5) 0px 0px 0px 3px` 유지. 일반 Calendar 대표 Story의 Single 및 Range 끝점은 Active, Range 중간 면은 Accent 45% 유지. Calendar CSS/API 수정 없음.
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
new file mode 100644
index 0000000..4f84123
--- /dev/null
+++ b/docs/components/dialog.md
@@ -0,0 +1,156 @@
+# Dialog
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Dialog 고유의 API·Token·상태·결정만 기록한다.
+
+> 근거 문서: ui_viz `docs/components/dialog.md`(Dialog / Modal). 문서가 스스로 `NO_SOURCE_EVIDENCE`(Source Dashboard에 Dialog specimen 없음)라고 밝히며, 값의 상당수는 D-093(2026-09-29) Dialog-local Confirmed다. Foundation `elevation.*`, `z-index.*`, `motion.*`는 TBD이고 Dialog 범위 값을 Foundation token으로 올리지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | HM 스타일 적용 완료 (`<DialogContent />`만으로 적용, `hm-dialog` class 없음) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Dialog + Radix `Dialog` |
+| 대표 Story | `Components/Overlay/Dialog` → `All` (이름 "Dialog") |
+| 보류 | Overlay 수치, Close 버튼 규격, 초기 focus 대상, 좁은 화면 Actions 배치 등 (§11) |
+
+## 2. 적용 근거
+
+- **ui_viz Confirmed (Dialog-local)**: radius 8px(USER_DECISION 2026-09-17), shadow `0 0 12px rgba(0,0,0,.2)`(D-093 D-088), 내용 기준 크기와 최대 너비·높이 공식(D-088), Header `24/24/16`·Title↔Description 8·Body 24·Actions `0/24/24`·Action gap 8(D-093), Header 아래 inset divider 위치·두께와 Footer divider 없음, Body만 scroll, 긴 텍스트 줄바꿈, 표는 Body 안 가로 scroll, 표면 `color.bg.surface`·전경 `color.fg.primary`, Title/Description/Body 타이포.
+- **CANONICAL_OVERRIDE**: Title `heading-md` 20/28 중 weight **700**은 Dialog Title에만 적용(D-006, 600 대체). Foundation `heading-md`는 600 그대로.
+- **현재 HM Actions**: Footer padding은 `16px 24px 24px`이며 divider는 없다. 위 ui_viz 도입 근거의 `0/24/24`와 구분한다.
+- **Temporary / TBD(적용했으나 확정값 아님)**: 외곽선·Header divider 색 `#DEDBD2`는 `Temporary`, Token relation TBD(DIALOG-10 FOLLOW_UP). 이전 확정 색(`#9A9284`/`#E0DACE`)은 대체됐고 D-093 실행 화면과 같은 값이라 현재 구현을 따랐다. 색 역할이 정해지기 전까지 Dialog 범위 값이다.
+- **PARTIAL / REFERENCE_ONLY(적용)**: Description 전경 `color.fg.secondary`(DIALOG-06 PARTIAL, 현재 style 보존). edge 16px(REVIEW).
+- **REFERENCE_ONLY(미적용)**: Backdrop Black 42%. 확정값이 아니어서 shadcn 기본 Overlay를 유지했다.
+- **HM 사용자 결정**: 없음.
+- **shadcn 유지**: Overlay, 열림/닫힘 animation, Close 버튼, Footer `showCloseButton`, `showCloseButton` prop.
+- **Radix 유지**: 아래 §7.
+
+## 3. 기본 규격
+
+| 항목 | 값 | 근거 |
+|---|---|---|
+| Overlay | shadcn 기본(`bg-black/10`, `backdrop-blur-xs`, `fixed inset-0`, z-50) | ui_viz backdrop 수치 TBD/REFERENCE_ONLY |
+| Container 크기 | 내용 기준(`width: max-content` + max-width = `min(내용, 최대 너비)`). `fit-content`는 shadcn `left: 50%` 배치에서 가용 폭이 화면 절반이 되어 쓰지 않는다(2026-10-06) | Confirmed D-088 |
+| max-width | `100vw − 2 × edge(16px)` | Confirmed 공식 / edge는 REVIEW |
+| max-height | `100dvh − app header − app footer − 2 × edge` | Confirmed 공식, header/footer 기본 0 |
+| 위치 | 가용 영역(앱 header·footer 제외) 가운데 | Confirmed |
+| Background / 글자 | `--hm-sem-bg-surface` / `--hm-sem-fg-primary` | Confirmed reuse |
+| Border | 1px solid `#DEDBD2` | 두께 Confirmed / 색 Temporary |
+| Radius | 8px (Container만) | Confirmed |
+| Shadow | `0 0 12px rgb(0 0 0 / 0.2)` | Confirmed (Dialog-local) |
+| Container padding | 0 (영역별 padding) | 구조 |
+| Header | padding `24px 0 15px` + 아래 1px divider `#DEDBD2`(= ui_viz `24/24/16`, 선은 16px 안쪽 마지막 1px), 좌우 margin 24px(inset 24px) | Confirmed 위치·두께 / 색 Temporary |
+| Title ↔ Description | gap 8px (Description이 없으면 없음) | Confirmed |
+| Title | 20px / 28px / 700, `fg.primary` | Confirmed (Dialog-local) |
+| Description | 14px / 20px / 400, `fg.secondary` | 크기 Confirmed / 색 PARTIAL |
+| Body | padding 24px 사방, 16px / 24px / 400, 첫·마지막 child margin 0 | Confirmed |
+| Footer(Actions) | padding `16px 24px 24px`, gap 8px, 오른쪽 정렬, 위 divider 없음 | 현재 HM 구현 |
+| 긴 텍스트 | `overflow-wrap: anywhere` | Confirmed |
+| Close 버튼 | shadcn 기본 (ghost `icon-sm` 28px, 오른쪽 위 8px 안쪽, `XIcon`, sr-only "Close") | ui_viz 미정의 |
+
+## 4. 상태 규격
+
+| 상태 | 값 | 근거 |
+|---|---|---|
+| Closed / Open | Radix `data-state` (`open`/`closed`). Open 시 modal, 배경 inert, scroll lock | Radix |
+| Open animation | shadcn 기본(fade + zoom, 100ms) | ui_viz motion TBD → shadcn 유지 |
+| Focus | 전역 focus ring은 ui_viz TBD. 조합한 Button이 각자의 focus를 가짐 | TBD |
+| Long Content | Header·Footer 고정, Body만 세로 scroll, 짧으면 scrollbar 없음 | Confirmed |
+| Wide Content | Body 안 가로 scroll, 페이지 가로 overflow 없음 | Confirmed |
+| Confirmation / Destructive | 컴포넌트 상태가 아니라 Button 조합: 일반 확인은 취소 `cancel`+`solid` / 확인 `primary`+`solid`, 삭제 확인은 취소 `cancel`+`outline` / 삭제 `destructive`+`outline`. 같은 세트의 appearance·size 통일, Brand 금지 | HM 사용자 확정 Button 세트 규칙 |
+
+Loading, Selected, Disabled 등 Dialog 자체의 다른 상태는 ui_viz에 없어 만들지 않았다.
+
+## 5. API
+
+```
+Dialog, DialogTrigger, DialogPortal, DialogOverlay, DialogContent,
+DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose:
+  shadcn / Radix API 그대로 (open, defaultOpen, onOpenChange, modal, asChild, className ...)
+
+DialogBody:
+  (신규) <div data-slot="dialog-body"> — ui_viz Body region
+
+DialogClose:
+  shadcn: 항상 data-slot="dialog-close"
+  →
+  HM: asChild일 때는 data-slot을 붙이지 않음 (자식 Button의 data-slot="button" 유지)
+```
+
+- `DialogContent`의 `showCloseButton`(기본 true), `DialogFooter`의 `showCloseButton`(기본 false)은 shadcn 그대로.
+- 새 prop(`size`, `variant`, `destructive`, `loading`, `placement`, `dismissible`)은 근거가 없어 만들지 않았다.
+- `DialogBody`를 추가한 이유: ui_viz가 Body를 필수 region이자 유일한 scroll owner로 정의하기 때문이다. Body 없이도 동작하지만(자식이 그대로 놓임) 이 경우 Body padding과 내부 scroll이 적용되지 않는다.
+- `DialogClose` 변경 이유: shadcn은 `DialogClose asChild`의 `data-slot="dialog-close"`가 자식 `<Button>`의 `data-slot="button"`을 덮어써 HM Button 스타일(`[data-slot="button"]`)이 사라진다. Dialog Actions는 Button 조합이 규격(§4)이라 Dialog 쪽에서 고쳤다.
+- Actions의 Button에는 appearance를 명시한다. Button 기본값은 Brand이며, Destructive는 Outline만 지원한다. [Button 허용 조합·기본값 주의](button.md#61-허용-role--appearance-ai-reference)를 따른다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/dialog.css` (`--hm-dialog-*`), `packages/ui/src/theme.css`에서 import.
+
+- 재사용한 공통 값: `--hm-sem-bg-surface`, `--hm-sem-fg-primary`, `--hm-sem-fg-secondary`, `--hm-sem-stroke-input-default`(`#dedbd2`).
+- Dialog 전용 값: `--hm-dialog-radius`(8px), `--hm-dialog-shadow`, `--hm-dialog-background`, `--hm-dialog-text`, `--hm-dialog-border-width|color`, `--hm-dialog-divider-color`, `--hm-dialog-padding`(24px), `--hm-dialog-header-padding-bottom`(16px), `--hm-dialog-header-gap`(8px), `--hm-dialog-actions-gap`(8px), Title/Description/Body 글자 크기·줄 높이·굵기, `--hm-dialog-description-color`, `--hm-dialog-edge`(16px, REVIEW).
+- 소비 화면이 설정하는 Web Mapping 이름: `--hm-dialog-app-header-height`, `--hm-dialog-app-footer-height` (기본 0). ui_viz도 Canonical token이 아니라고 명시한다.
+- Primitive 신규 추가 없음.
+- Card(radius 4px, border `#dedbd2`)·Input·Button과 값이 겹쳐도 alias하지 않는다. 8px radius는 ui_viz가 Dialog container에만 허용하고 다른 곳으로 확장하지 말라고 명시한다.
+- Overlay·Close 버튼·animation은 token을 만들지 않았다(shadcn 기본).
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조 전부를 그대로 둔다: Portal(`DialogPortal`), Overlay, modal 동작과 배경 `aria-hidden`/inert, focus trap, 열릴 때 initial focus(Radix 기본), 닫힐 때 trigger로 focus 복귀, Escape 닫기, outside interaction 처리, `role="dialog"`와 `aria-labelledby`/`aria-describedby` 연결(`DialogTitle`/`DialogDescription`), Tab 순환, body scroll lock, controlled/uncontrolled(`open`/`defaultOpen`/`onOpenChange`), `asChild`, Close 동작(`DialogPrimitive.Close` 유지, `setOpen` 직접 호출 없음), Close 버튼의 sr-only 레이블과 focus-visible, 열림/닫힘 animation class, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- `DialogContent`에서 `grid`, `w-full max-w-[calc(100%-2rem)] sm:max-w-sm`, `gap-4`, `rounded-xl`, `bg-popover`, `p-4`, `ring-1`, `text-popover-foreground`를 제거하고 theme CSS로 이전: 내용 기준 크기(`max-content` + max-width), 최대 너비·높이 공식, 8px radius, 1px border, shadow, 흰 표면.
+- Header 아래 inset divider, Header·Body·Footer 간격 24/16/8, 타이포.
+- `DialogFooter`의 `-mx-4 -mb-4`, `border-t`, `bg-muted/50`, `rounded-b-xl`, `p-4`, `gap-2` 제거(경계·배경 없는 Actions 영역).
+- `DialogBody` 추가, `DialogClose asChild`의 data-slot 처리.
+- `hm-dialog` class 제거. Demo의 `.hm-dialog-summary`(Dialog 안 내용 레이아웃)는 Demo 전용으로 남겼다.
+
+## 9. Storybook
+
+- 대표 Story `All`("Dialog")이 기본 sidebar의 유일한 Dialog 항목이다 → 1뎁스. overlay라 StateBoard를 쓰지 않고, 트리거 버튼 6개(기본, 긴 내용, 넓은 표, 본문 스크롤, 삭제 확인, 폼)가 각각 실제 Dialog를 연다.
+- 본문 스크롤은 ui_viz "세로 스크롤 · 본문만"과 같은 조건(앱 공통 Header 70px / Footer 48px 제외)이다. Portal 때문에 앱 높이는 trigger wrapper가 아니라 `DialogContent`의 `style`로 `--hm-dialog-app-header-height`/`--hm-dialog-app-footer-height`를 넘긴다.
+- verification(`tags: ["verification"]`, 닫힌 채가 아니라 처음부터 열림): `Open`, `Long Content`, `Wide Content`, `Body Scroll`, `Delete Confirmation`.
+- pseudo-state helper로 열린 상태를 흉내 내지 않는다.
+- 운영 규칙은 `프로젝트-지침.md` §6.3, §7 참조.
+
+## 10. 사용자 확정 결정
+
+추가 사용자 결정 없음. (Radius 8px의 2026-09-17 USER_DECISION은 ui_viz 쪽 기록이다.)
+
+## 11. 미확정 / 보류
+
+- **Overlay**: Black 42%는 REFERENCE_ONLY, 색·opacity는 TBD. 현재 shadcn 기본 `black/10` + blur를 쓰며 ui_viz는 blur를 정의하지 않는다. DECISION_REQUIRED.
+- **외곽선·Header divider 색**: `#DEDBD2`는 Temporary, Token relation TBD(DIALOG-10 FOLLOW_UP).
+- **초기 focus**: ui_viz(DIALOG-07, 2026-09-17)는 미지정 시 Dialog 자체가 initial focus를 받는다고 정했다. 현재는 Radix 기본(첫 tabbable 요소; 대표 Story에서는 "취소")이다. Radix 동작을 바꾸지 않기 위해 구현하지 않았다. DECISION_REQUIRED.
+- **Close(X) 버튼**: ui_viz에 규격이 없다. shadcn 기본이며 긴 Title이 버튼과 겹칠 수 있는지 확인하지 않았다.
+- **좁은 화면 Actions 배치**: ui_viz TBD. shadcn(`flex-col-reverse sm:flex-row`)을 유지.
+- **Description 전경**: PARTIAL. **edge 16px**: REVIEW. **motion·z-index·focus ring**: TBD.
+- **ui_viz FOLLOW_UP**: Alert Dialog·non-dismissible(DIALOG-03), Nested Dialog(DIALOG-04), Select portal 조합과 업무 Dialog 검수(DIALOG-09), `heading-md` 600→700(DIALOG-11). 현재 Alert Dialog는 별도 Component로 구현되어 있다(`alert-dialog.md`). non-dismissible/Nested 조합의 별도 검수는 여전히 보류다.
+- 공통 header/footer 높이 변수는 소비 화면이 연결해야 하며 이번에 실제 화면에 연결하지 않았다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/dialog.tsx
+packages/ui/src/theme/dialog.css
+packages/ui/src/theme.css                  (dialog.css import)
+src/components/dialog.stories.tsx
+src/App.tsx                    (Demo Dialog: hm-dialog 제거, DialogBody 사용)
+src/hm-theme.css               (.hm-dialog 규칙 제거, .hm-dialog-summary 유지)
+```
+
+## 13. 검증 상태
+
+> HISTORICAL_RECORD: 아래 측정값은 각 검증 당시 기록이다. 현재 Footer top padding은 §3의 16px이며 과거 크기·padding 측정값을 현재값으로 덮어쓰지 않는다.
+
+- TypeScript, `npm run build`: 통과(2026-10-02).
+- Storybook 실제 상호작용(1280×800): 트리거 클릭으로 열림, Escape로 닫힘, 닫힌 뒤 trigger로 focus 복귀, Close(X) 클릭으로 닫힘 후 trigger focus 복귀, `role="dialog"`·`aria-labelledby`·`aria-describedby`, body scroll lock(`data-scroll-locked`) 확인.
+- computed style(기본 Dialog): background `rgb(255,255,255)`, border 1px `rgb(222,219,210)`, radius 8px, shadow `0 0 12px rgba(0,0,0,.2)`, 크기 344×227(fit-content), 화면 정중앙, max-width 1248px(=1280−32)·max-height 768px(=800−32), Title 20px/28px/700 `rgb(10,34,29)`, Description 14px/20px/400 `rgb(110,103,89)`, Title↔Description 8px, Header margin-inline 24px·padding 24/16·divider 1px, Body padding 24px·16px/24px, Footer padding `0 24px 24px`·gap 8px·border 0·배경 투명, Close 28×28 오른쪽·위 9px(8px + 외곽선 1px).
+- Long Content: Dialog 730px(viewport 안), Header·Footer 보임, Body만 scroll(client 613 / scroll 1712), 페이지 가로 overflow 없음. Wide Content: Body 가로 scroll, 페이지 가로 overflow 없음.
+- Actions: 취소 Gray Solid(`rgb(118,118,118)`/`rgb(90,90,90)`), 삭제 Red Outline(`rgb(211,47,47)`) 적용 확인(`DialogClose` 수정 후).
+- Story: `All` + verification 4개 ID 확인. 기본 sidebar는 `All` 하나만 보이는 1뎁스 구조(실제 사이드바 화면은 확인하지 못함).
+- 2026-10-06 ui_viz Storybook 화면 비교(1280/768/390, Chromium): REGRESSION 2건 수정 — ① `fit-content`가 shadcn `left: 50%` 배치에서 화면 절반만 가용 폭으로 받아 390px에서 Dialog가 195px로 좁아짐 → `width: max-content` + max-width, ② Header가 divider 1px만큼 큼(97px) → bottom padding에서 divider 두께를 뺌(96px). 수정 후 Header 96px·기본 높이 228px이 ui_viz와 같고, 본문 스크롤 Dialog는 3개 viewport 모두 ui_viz와 같은 크기·위치(1280: 580×750 @350,86 / 390: 358×750 @16,86). Tab·Shift+Tab 순환, `aria-labelledby`/`aria-describedby`, scroll lock, Escape·액션·X 닫기 후 trigger focus 복귀 확인(1280/390).
+- 의도적 차이(유지): Overlay(ui_viz 42% REFERENCE_ONLY), Close X(ui_viz 미정의), 640px 미만 Footer 세로 stack(ui_viz TBD), 초기 focus(Radix 기본 = 첫 focus 가능 요소, ui_viz는 Title/Cancel).
+- 미확인: Demo(App)의 Dialog 열림 시각 확인, Select를 Dialog 안에 둔 조합.
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
new file mode 100644
index 0000000..a931254
--- /dev/null
+++ b/docs/components/drawer.md
@@ -0,0 +1,113 @@
+# Drawer
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Drawer 고유의 API·Token·상태·결정만 기록한다. Dialog·Sheet와 값을 공유하지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Drawer = **vaul** (`vaul@1.1.2`, 이번에 `@hm-design/ui` dependency로 추가) + Radix Dialog |
+| 대표 Story | `Components/Overlay/Drawer` → `All` (이름 "Drawer") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Drawer가 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. Dialog의 접근성 원칙과 `asChild` 처리 규칙은 재사용하고 수치는 현재 HM Semantic으로 새로 정했다.
+- **구현 방식**: shadcn Drawer 구조(vaul)를 유지하고 theme CSS로 HM 스타일 연결. drag·snap·dismiss는 vaul 기본이며 재구현하지 않았다.
+- **vaul 추가 이유**: shadcn 공식 Drawer가 vaul 기반이다(Radix에 Drawer가 없음). 프로젝트에 없던 dependency라서 추가했다(`npm install vaul --workspace @hm-design/ui`).
+- **Sheet와의 역할 구분**: Drawer = 손가락/포인터로 끌어 닫는 하단 중심 임시 panel(handle 포함), Sheet = 버튼으로 닫는 edge panel.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Surface / 전경 | `--hm-sem-bg-surface` / `--hm-sem-fg-primary` |
+| Border | 1px `--hm-sem-stroke-input-default`, 화면을 향한 한 변 |
+| Radius | 8px, 화면 안쪽 두 모서리(bottom이면 위 두 모서리) |
+| Shadow | `0 0 12px rgb(0 0 0 / .2)` |
+| bottom / top | 폭 100%, 높이 내용 기준, 최대 `85dvh` |
+| left / right | 폭 `min(400px, 100vw − 48px)`, 높이 100% |
+| Handle(bottom만) | 48 × 4px 알약, `--hm-sem-stroke-default`, 위 12px |
+| Padding | 24px |
+| Header | padding `24 24 16`, gap 8px |
+| Title | 18 / 28 / 700 |
+| Description | 14 / 20 / 400, `--hm-sem-fg-secondary` |
+| Body | 14 / 20 / 400, 좌우 padding 24px, 유일한 scroll 영역 |
+| Footer | padding `16 24 24`, gap 8px, 세로 쌓임(주 action이 위, shadcn 기본) |
+| Close(X) | 없음(handle drag, Overlay 클릭, Escape, `DrawerClose`) |
+| Overlay | shadcn 기본(`bg-black/10` + blur) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Closed / Open | vaul `data-state`, 열림 시 modal, 배경 aria-hidden, scroll lock |
+| Drag | handle 또는 panel을 아래로 끌어 닫음(vaul 기본). 내부 scroll 영역이 있으면 vaul이 scroll과 drag를 구분 |
+| Focus | 열릴 때 첫 tabbable로 이동, Tab 순환, 닫힐 때 trigger로 복귀 |
+| Long Content | Header·Footer 고정, Body만 scroll |
+
+## 5. API
+
+vaul `Drawer.Root` props 그대로(`direction`, `snapPoints`, `dismissible`, `shouldScaleBackground`, `modal`, `open`/`onOpenChange` …). export: `Drawer`, `DrawerTrigger`, `DrawerPortal`, `DrawerOverlay`, `DrawerClose`, `DrawerContent`, `DrawerHeader`, `DrawerBody`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription`.
+
+- `Drawer`: **`autoFocus` 기본값을 true로 둔다**(vaul 기본은 false). vaul 기본값은 Radix의 초기 focus를 취소해, 열린 뒤에도 focus가 aria-hidden 처리된 trigger에 남고 Tab이 Drawer 밖으로 나간다(실측). `autoFocus={false}`로 vaul 동작을 되돌릴 수 있다.
+- `DrawerContent`: 방향은 root의 `direction`(기본 bottom), `data-vaul-drawer-direction`으로 출력.
+- `DrawerBody`(신규): scroll owner.
+- `DrawerClose`: `asChild`일 때 자식의 `data-slot`을 유지(DialogClose와 같은 규칙).
+- 새 prop은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/drawer.css` (`--hm-drawer-*`).
+
+`background`, `text`, `border-width`, `border-color`, `radius`, `shadow`, `max-height`, `width`, `edge-gap`, `padding`, `header-gap`, `footer-gap`, `handle-width|height|color|margin-top`, `title-*`, `description-*`, `body-*`. Semantic과 Theme palette만 참조하며 `--hm-sheet-*`·`--hm-dialog-*`를 참조하지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / vaul / Radix에서 유지한 항목
+
+vaul의 drag·snap·dismiss·body 처리와 `data-vaul-*` 속성, Radix의 Portal·focus trap·Escape·ARIA·focus 복귀, 방향별 position class, `data-slot`, `cn(..., className)`, handle 요소(bottom 방향에서만 표시), Overlay.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `bg-background`, 방향별 `rounded-*`/`border-*`/`max-h-[80vh]`, handle `h-2 w-[100px] bg-muted`, Header/Footer `p-4` 제거 → theme CSS.
+- `Drawer`의 `autoFocus` 기본 true(위 §5).
+- `DrawerBody` 추가, `DrawerClose asChild` data-slot 처리.
+- Handle을 `data-slot="drawer-handle"` 요소로 구분해 token으로 스타일.
+
+## 9. Storybook
+
+- 대표 Story `All`("Drawer"): 트리거 3개(기본, 폼, 긴 내용)가 각각 실제 Drawer를 연다. 핸들을 끌어 닫을 수 있다.
+- verification: `Open`, `Form`, `Long Content`(처음부터 열림).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(85dvh, 18px Title, handle 크기, 그림자)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Overlay, drag/transition Motion은 vaul·shadcn 기본 유지. `shouldScaleBackground`는 쓰지 않았다.
+- snap points 사용 예는 만들지 않았다(API는 vaul 그대로 사용 가능).
+- left/right/top 방향의 시각은 CSS에 두었으나 Story로는 검증하지 않았다(bottom만 사용 예).
+- Drawer와 Sheet의 사용 경계 가이드는 후속.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/drawer.tsx
+packages/ui/src/theme/drawer.css
+packages/ui/package.json             (dependency: vaul)
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/drawer.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): 클릭 열기, focus가 "확인"으로 이동(`autoFocus` 적용 전에는 trigger에 남음), Tab 3회 후에도 Drawer 안(focus trap), Escape 닫힘과 trigger 복귀, handle을 아래로 drag해 닫힘과 focus 복귀, 바깥(Overlay) 클릭 닫힘.
+- 390×844 긴 내용: Drawer 높이 717px(85dvh), Body만 scroll, Footer가 viewport 하단, 가로 overflow 없음, Footer 버튼 세로 쌓임.
+- computed style: radius `8px 8px 0 0`, border-top `rgb(222,219,210)`, handle 48×4 `rgb(154,146,132)`.
+- 미확인: 실제 터치 drag(마우스 drag만 확인), snap points, scroll 영역 안에서 drag와 scroll 구분, 닫기 animation 시각, left/right/top 방향 시각.
diff --git a/docs/components/dropdown-menu.md b/docs/components/dropdown-menu.md
new file mode 100644
index 0000000..2bc8b64
--- /dev/null
+++ b/docs/components/dropdown-menu.md
@@ -0,0 +1,112 @@
+# Dropdown Menu
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Dropdown Menu 고유의 API·Token·상태·결정만 기록한다. Floating 계열 공통 사항은 §14.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Dropdown Menu (Radix `DropdownMenu`) |
+| 대표 Story | `Components/Overlay/Dropdown Menu` → `All` (이름 "Dropdown Menu") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Dropdown Menu 규격이 없다(인벤토리에 "상세 디자인·API 보류"). Select의 option 목록 패턴(높이·hover 면)만 참고했다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계(surface, fg, stroke, destructive)와 Select option의 highlight 면(shadcn `accent`)에 맞춰 새로 정했다.
+- **구현 방식**: shadcn / Radix Dropdown Menu 구조를 유지하고 theme CSS로 HM 스타일을 연결. 상태는 Radix 속성(`data-highlighted`, `data-disabled`, `data-state`)만 쓴다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 | 비고 |
+|---|---|---|
+| Surface | `--hm-sem-bg-surface` (White) | Semantic |
+| Border | 1px `--hm-sem-stroke-input-default` | Dialog·Card와 같은 윤곽색 |
+| Radius | `--hm-radius-container` (4px) | 공통 container radius |
+| Shadow | `0 0 12px rgb(0 0 0 / .2)` | HM의 기존 floating 그림자 |
+| Content padding | 4px | |
+| Item | min-height 36px, padding-x 12px, gap 8px, radius 2px | |
+| Typography | 14 / 20 / 400 | Label·Shortcut은 12px (Label 12/18/500) |
+| 전경 | `--hm-sem-fg-primary` / Label·Shortcut `--hm-sem-fg-secondary` | |
+| Separator | 1px `--hm-sem-stroke-input-default`, Content 폭 전체 | |
+| Check / Radio | 16px indicator 열(12px 안쪽), shadcn `CheckIcon`, 8px 채운 원 | shadcn 아이콘 유지 |
+| Sub menu chevron | shadcn `ChevronRightIcon` | |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Default | 위 기본 규격 |
+| Highlighted (`data-highlighted`) | 배경 Accent 45%(`--hm-sem-surface-highlight`), 전경 `--accent-foreground` (포인터 hover와 키보드 이동 공통) |
+| Disabled (`data-disabled`) | shadcn `opacity-50`, 포인터 무시, 키보드 이동에서 제외 |
+| Checked / Selected | `ItemIndicator`가 check 또는 원을 표시 (Radix `data-state`) |
+| Sub menu open | SubTrigger `data-state="open"`이 Highlighted와 같은 면 유지 |
+| Destructive (`variant="destructive"`) | 전경 `--hm-sem-action-destructive`, Highlighted 면 `--hm-color-action-destructive-hover` |
+| Focus | 항목 자체 outline 없음(`outline-hidden`), Highlighted 면이 focus 표시 |
+
+## 5. API
+
+Radix Dropdown Menu props 그대로. export: `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuLabel`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`, `DropdownMenuPortal`.
+
+- `DropdownMenuContent`: `sideOffset` 기본 4, Radix `align`·`side`·collision props.
+- `DropdownMenuItem`: shadcn `variant="default" | "destructive"`, `inset`. 출력 `data-variant`.
+- Label·CheckboxItem·RadioItem·SubTrigger: `inset`.
+- 출력 속성: `data-slot="dropdown-menu-*"`, Radix `data-state`·`data-highlighted`·`data-disabled`·`data-side`.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/dropdown-menu.css` (`--hm-dropdown-menu-*`).
+
+`background`, `text`, `border-width`, `border-color`, `radius`, `shadow`, `padding`, `item-height`, `item-padding-x`, `item-gap`, `item-radius`, `font-size`, `line-height`, `font-weight`, `highlight-background`, `highlight-text`, `destructive-text`, `destructive-highlight-background`, `label-*`, `shortcut-*`, `separator-color`, `indicator-size`, `radio-dot-size`. Semantic 또는 Theme palette만 참조하고 다른 컴포넌트의 Component Token은 쓰지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`role=menu`, `menuitem*`)·키보드(방향키, Home/End, Enter/Space, 오른쪽 방향키 sub menu, Escape, typeahead)·focus 복귀, Portal·positioning·collision, `data-slot`, `cn(..., className)`, open/close animation(`data-open:`/`data-closed:` class), `z-50`, lucide 아이콘.
+
+## 8. HM에서 변경한 항목
+
+- shadcn의 색·`rounded`·`shadow`·`p-1`·`px-2 py-1.5`·`text-sm` 등 시각 class와 `focus:bg-accent` 계열을 제거하고 theme CSS + `data-highlighted`로 대체.
+- Radio 표시를 별도 아이콘 import 대신 CSS 크기 token을 쓰는 원(`data-slot="dropdown-menu-radio-dot"`)으로 구현.
+- Check / Radio indicator span에 `data-slot="dropdown-menu-item-indicator"` 추가(위치·크기 token용).
+
+## 9. Storybook
+
+- 대표 Story `All`("Dropdown Menu"): 트리거로 실제 메뉴를 연다(Label, Item + Shortcut, disabled, Separator, Checkbox, Radio Group, Sub menu, destructive).
+- verification: `Open`(열린 상태, fullscreen).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(36px item, 12px padding, 4px content padding, 그림자 등)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Disabled opacity는 shadcn 기본 50 유지(전역 Disabled 규칙 없음).
+- Hover/Highlight 면은 Select와 같은 공통 Accent 45% 정책을 쓴다.
+- icon 크기·check 위치(시작 위치) 등 icon 세부는 shadcn 기본 유지.
+- Motion 규칙은 정의되지 않아 shadcn 기본 animation을 유지.
+- 자체 scroll 처리(긴 목록)는 `max-h` available height + overflow로 둔다. 별도 규격 없음.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/dropdown-menu.tsx
+packages/ui/src/theme/dropdown-menu.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/dropdown-menu.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): Enter로 열기, 방향키 이동(disabled 항목 건너뜀), Enter로 Checkbox 토글, Radio 선택 시 닫힘과 trigger focus 복귀, 오른쪽 방향키로 Sub menu 열림과 첫 항목 focus, Escape로 sub → menu 순서 닫힘과 trigger focus 복귀.
+- computed style: Surface white, border `rgb(222,219,210)`, radius 4px, shadow `0 0 12px .2`, item 36px/14·20, Highlighted `rgb(189,223,212)`.
+- 미확인: Home/End·typeahead 입력, 실제 pointer hover, 좁은 viewport collision 시각.
+
+## 14. Floating 계열 공통
+
+Popover·Tooltip·Hover Card와 surface(White, 1px pale border, 4px radius, 12px glow) 값이 같지만 각각 `--hm-<component>-*`를 둔다. 공통 Semantic 승격 후보는 `docs/components/popover.md` §14에 함께 기록했다.
diff --git a/docs/components/field.md b/docs/components/field.md
new file mode 100644
index 0000000..cbc5a93
--- /dev/null
+++ b/docs/components/field.md
@@ -0,0 +1,48 @@
+# Field / Form Field
+
+**보류 — 컴포넌트를 만들지 않았다.** 현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6.7), 이 문서는 보류 이유와 소비 조합 기준만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | **보류** (코드·Story 없음) |
+| 기준일 | 2026-10-02 |
+| 기반 | 해당 없음 |
+| 대표 Story | 없음 |
+
+## 2. 적용 근거 (보류 이유)
+
+- 외부 ui_viz Reference (ZIP 미포함) `docs/components/field-semantics.md`: "COMMON SEMANTIC RELATIONSHIP / NON-GEOMETRY-OWNER … **새 Field Component/API를 정의하지 않는다.**" 높이·gap·inset·색·text role·state paint를 공통 Field에 넣지 않으며 DOM/ARIA 연결도 "공통 Field 구현을 요구하지 않는다".
+- Field 관계(Label → Control → Message)는 컴포넌트별 owner가 소유한다: Input §5·§13·§15·§17.1, Textarea §1·§3·§4, Select.
+- `프로젝트-지침.md` §6.7: Field/Label 컴포넌트 도입은 별도 결정이며 Input/Textarea/Select에 Field wrapper를 다시 넣지 않는다.
+- Checkbox Group의 Label/Heading, error slot 계층, helper/error 우선순위는 ui_viz Pattern §4–5에서 `TBD`다.
+- 근거 없이 Form 시스템을 설계하지 않는다.
+
+## 3~10. 해당 없음
+
+구현이 없으므로 기본/상태 규격, API, Token, 유지·변경 항목, Storybook, 사용자 결정은 없다.
+
+## 11. 소비 조합 기준 (구현이 아니라 기록)
+
+현재 Input/Textarea Story가 쓰는 조합이며 ui_viz 값이다.
+
+| 항목 | 값 | 출처 |
+|---|---|---|
+| 순서 | Label → Control → Helper/Error | input.md §5, textarea.md §1 |
+| Label | `<Label>` 컴포넌트(14/20/500, `fg.secondary`) | `docs/components/label.md` |
+| Field gap | 8px (`input.field.gap`, `OWNER_CONFIRMED_REVISION`) — `space.*`로 승격하지 않음 | input.md §8 |
+| Helper | 12 / 18 / 400, `fg.secondary` | input.md §9 |
+| Error | 11 / 18 / 400, `#D32F2F` + `aria-invalid` + `aria-describedby`, 색 단독 전달 금지 | input.md §9, §15 |
+| Required | 별표 `#D32F2F`, `aria-hidden`; 의미는 native `required` | input.md, TEXTAREA-07 |
+| 라벨 위치 | 등록·수정 폼은 상단(gap 8), PC 조회·필터는 좌측 라벨(라벨↔입력 12, 묶음 사이 24) | input.md §17.1 |
+
+보류 해제 조건: ui_viz가 Field를 Component/Pattern으로 확정하거나 사용자가 별도 결정으로 도입을 지시할 때. 이 경우에도 Input/Textarea/Select 내부에 구조를 넣지 않고 composition 컴포넌트로 추가한다.
+
+## 12. 관련 파일
+
+없음 (`docs/components/label.md`, `input.md`, `textarea.md` 참조).
+
+## 13. 검증 상태
+
+해당 없음.
diff --git a/docs/components/hover-card.md b/docs/components/hover-card.md
new file mode 100644
index 0000000..9f1ce92
--- /dev/null
+++ b/docs/components/hover-card.md
@@ -0,0 +1,102 @@
+# Hover Card
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Hover Card 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Hover Card (Radix `HoverCard`) |
+| 대표 Story | `Components/Overlay/Hover Card` → `All` (이름 "Hover Card") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Hover Card 규격이 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. Popover와 같은 floating surface이며 현재 HM Semantic 체계로 새로 정했다.
+- **구현 방식**: shadcn / Radix Hover Card 구조를 유지하고 theme CSS로 HM 스타일을 연결.
+- **역할 구분**: Tooltip = 짧고 즉각적인 설명, Hover Card = 제목·설명·metadata를 가진 정보 미리보기(non-interactive 중심), Popover = click으로 여는 panel/form.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Surface | `--hm-sem-bg-surface` |
+| 전경 | `--hm-sem-fg-primary` |
+| Border | 1px `--hm-sem-floating-border-color` |
+| Radius | `--hm-radius-container` (4px) |
+| Shadow | `0 0 12px rgb(0 0 0 / .2)` |
+| Padding | 16px |
+| Width | 320px (viewport − 16px 이하로 제한), 긴 문자열은 줄바꿈 |
+| Typography | 14 / 20 / 400 |
+| Position | `sideOffset` 4, `align` center |
+| Delay | Radix 기본 유지(open 700ms, close 300ms) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Open / Closed | Radix `data-state`, shadcn open/close animation |
+| 열림 조건 | trigger hover 또는 keyboard focus |
+| 유지 | trigger → content로 pointer 이동 시 유지(Radix hover bridge) |
+| 닫힘 조건 | pointer가 trigger와 content를 떠난 뒤 close delay, blur, Escape |
+
+## 5. API
+
+Radix Hover Card props 그대로. export: `HoverCard`, `HoverCardTrigger`, `HoverCardContent`.
+
+- `HoverCardContent`: `align` 기본 `center`, `sideOffset` 기본 4. `HoverCard`에 `openDelay`, `closeDelay`.
+- 출력 속성: `data-slot="hover-card-*"`, Radix `data-state`·`data-side`·`data-align`.
+- 접근성 주의: Hover Card는 sighted pointer user용 보조 정보이며 keyboard focus로도 열리지만 content 안으로 focus를 옮기지 않는다. 필수 정보나 interactive 요소는 넣지 않는다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/hover-card.css` (`--hm-hover-card-*`).
+
+`background`, `text`, `border-width`, `border-color`, `radius`, `shadow`, `padding`, `width`, `font-size`, `line-height`, `font-weight`. 다른 컴포넌트의 Component Token을 참조하지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·delay·hover bridge·Escape·focus 열림, Portal·positioning·collision, `data-slot`, `cn(..., className)`, animation class, `z-50`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `w-64 rounded-md border p-2.5 shadow-md bg-popover` 등 시각 class 제거 → theme CSS.
+- 폭 256 → 320px, padding 10 → 16px(Popover와 구분되는 미리보기 폭).
+
+## 9. Storybook
+
+- 대표 Story `All`("Hover Card"): 기본 preview(제목 / 설명 / metadata), 긴 콘텐츠 edge case.
+- verification: `Open`(열린 상태).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(320px, 16px padding, 그림자)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- delay는 Radix 기본. HM delay 규칙은 없다.
+- arrow 없음(shadcn 기본에 없음).
+- Motion 규칙은 정의되지 않아 shadcn 기본 animation 유지.
+- 제목·metadata 타이포 role은 소비 조합(Story는 shadcn Token 유틸 사용). 전용 slot 컴포넌트 없음.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/hover-card.tsx
+packages/ui/src/theme/hover-card.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/hover-card.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): hover로 열림, trigger → content 이동 시 유지, 영역 이탈 후 닫힘, keyboard focus로 열림, Escape 닫힘.
+- computed style: width 320px, white, border `rgb(222,219,210)` 1px, padding 16px, shadow `0 0 12px .2`.
+- 미확인: open/close delay 시간의 정확한 측정, 긴 콘텐츠 시각, 좁은 viewport collision.
diff --git a/docs/components/input.md b/docs/components/input.md
new file mode 100644
index 0000000..7b621a4
--- /dev/null
+++ b/docs/components/input.md
@@ -0,0 +1,133 @@
+# Input
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Input 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | HM 스타일 적용 완료 (`hm-input` class 없음) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Input (native `<input>`) |
+| 대표 Story | `Components/Form/Input` → `All` (이름 "Input") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **ui_viz Confirmed**: size·padding-x(input.md §24, §16), border/radius/색(§10, §11, D-005), Focus/Error 표현.
+- **ui_viz owner decision**: size별 value·placeholder 글자(§9, §21 `INPUT_VALUE_ROLE_FOLLOWS_SIZE`).
+- **HM 사용자 결정**: Disabled opacity `0.6`(2026-10-02, §10).
+- **shadcn 유지**: native input 동작, `file:` 스타일 class, disabled 포인터/커서 처리.
+- **ui_viz 미정의**: 아래 §11 참조.
+
+## 3. 기본 규격
+
+| Size | Height(min) | Padding-x | Font / Line-height |
+|---|---|---|---|
+| `small` | 28 | 10 | 12 / 18 |
+| `medium` | 34 | 12 | 14 / 20 |
+| `large` (기본) | 42 | 12 | 16 / 24 |
+
+- 높이는 `min-height`, 한 줄 텍스트는 가운데.
+- Border 1px(`--hm-sem-stroke-input-default`), radius `--hm-radius-input`, face `--hm-sem-bg-surface`, 글자색 `--hm-sem-fg-primary`, weight 400.
+- Placeholder: `--hm-sem-fg-placeholder`, `opacity: 1`.
+
+## 4. 상태 규격
+
+| 상태 | 값 | 근거 |
+|---|---|---|
+| Default | 위 기본 규격 | ui_viz Confirmed |
+| Focus (`:focus-visible`) | border 1.5px `--hm-sem-stroke-input-focus`, shadow/glow 없음, padding으로 0.5px 보정해 값이 움직이지 않음 | ui_viz Confirmed |
+| Error (`[aria-invalid="true"]`) | border 1.5px `--hm-sem-action-destructive`, ring 없음 | ui_viz Confirmed |
+| Error + Keyboard Focus | Destructive border 유지 + HM Focus Semantic 3px / 50% outer ring, `outline: none` | 2026-10-06 사용자 결정 |
+| Disabled | White face 유지, `opacity: 0.6`, `cursor: not-allowed`, `pointer-events: none` | face: ui_viz Confirmed / opacity: 사용자 결정 |
+| Readonly (`[readonly]`) | 박스 없음(border 0, padding-x 0, 투명 face), dim 없음, 항상 Large 치수 | ui_viz |
+| Hover / Active | 정의 없음(별도 스타일 없음) | ui_viz 미정의 |
+
+Focus ring chain은 `--ring` → `--hm-sem-stroke-input-focus` → `--hm-color-border-focus`다. Error border는 `--hm-input-error-border-color` → `--hm-sem-action-destructive`를 따른다. 일반 Focus / Readonly의 기존 표현은 유지하며, editable Invalid + Focus에서 UA outline 의존을 제거했다.
+
+## 5. API
+
+```
+Input:
+  size?: native <input size> (number)
+  →
+  size?: "small" | "medium" | "large"     기본 "large"
+```
+
+- native `size`(글자 수 폭)를 대체한다. native 속성이 CSS 폭과 무관해 쓰임이 없다는 판단(지침 §6.7).
+- 출력 속성: `data-slot="input"`, `data-size`.
+- 상태는 새 prop이 아니라 native 속성으로 준다: `aria-invalid`, `disabled`, `readOnly`.
+- Field(Label, Required 별표, Helper/Error 문구)는 Input에 포함하지 않는다. 소비 조합이다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/input.css` (`--hm-input-*`).
+
+- 재사용한 공통 Semantic: `--hm-radius-input`, `--hm-sem-bg-surface`, `--hm-sem-fg-primary`, `--hm-sem-fg-placeholder`, `--hm-sem-stroke-input-default`, `--hm-sem-stroke-input-focus`, `--hm-sem-action-destructive`(Semantic 참조).
+- Input 전용 값: `--hm-input-height-{sm,md,lg}`, `--hm-input-padding-x-*`, `--hm-input-font-size-*`, `--hm-input-line-height-*`, `--hm-input-state-border-width`(1.5px).
+- Primitive 신규 추가 없음.
+- Button의 높이 Token(`--hm-button-height-*`)·Select 높이와 값이 겹쳐도 alias하지 않는다. 각 ui_viz 규격이 따로 확정한 값이다.
+- Disabled opacity는 Token이 아니라 `ui/input.tsx`의 `disabled:opacity-60`으로 적용된다(§11).
+
+## 7. shadcn / Radix에서 유지한 항목
+
+native `<input>` 동작 전체(`type`, `file:` 스타일 class, `placeholder`), `data-slot`, `cn(..., className)`, `transition-colors`, `outline-none`, disabled의 `pointer-events-none`/`cursor-not-allowed`. Radix 사용 없음.
+
+## 8. HM에서 변경한 항목
+
+- `size` API 교체, 기본 Large, `data-size` 추가.
+- shadcn의 기본 높이/padding/border/ring/dark class 제거 → theme CSS가 담당.
+- 일반 Focus는 border 1.5px로 표시, Error 단독은 ring 없음. Error + `:focus-visible`만 독립 Focus ring을 표시한다.
+- Readonly 전용 표현 추가.
+- `hm-input` class 제거.
+
+## 9. Storybook
+
+- 대표 Story `All`("Input"): 구역 `sizes`, `default`, `focus`, `error`, `error-message`, `disabled`, `readonly`. Focus는 `play` 함수로 실제 focus를 준다.
+- verification(`tags: ["verification"]`): `Default`, `Focus`, `Error`, `InvalidFocus`, `ErrorMessage`, `Required`, `Disabled`, `Readonly`, `Sizes`("Compare Sizes"), `Small`, `Medium`, `Large`, `Playground`(HM 전용).
+- Error Message·Required 표시는 Story 안의 조합 예시이며 Input 컴포넌트의 일부가 아니다.
+- sidebar는 `All` 하나만 보이는 1뎁스. 운영 규칙은 지침 §6.3, §7 참조.
+
+## 10. 사용자 확정 결정
+
+**2026-10-02**
+
+- Input Disabled opacity `0.6` 확정.
+- ui_viz에서 Temporary로 기록된 이력이 있으나, 현재 HM 구현에서는 사용자 결정이 우선한다. 이전의 "Temporary → 미적용" 판단은 이 결정으로 superseded.
+- 이 값은 Input에 대한 현재 최종값이다. 전체 디자인 시스템 공통 Disabled opacity로 자동 확대하지 않는다.
+- 근거: Select 작업에서 확정된 Disabled 시각 intent와의 정합. Select Trigger도 `0.6`(select.md 참조).
+
+## 11. 미확정 / 보류
+
+- ui_viz 미정의: Hover, Active 표현, Error 메시지 컴포넌트, Input 내부 아이콘/clear 버튼.
+- Disabled opacity `0.6`은 Input 한정 사용자 결정이다. 다른 컴포넌트에 적용하지 않는다.
+- `file:` 타입 스타일은 shadcn 기본이며 HM 규격 없음.
+- Readonly에서 Disabled 조합 동작은 별도로 확인하지 않았다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/input.tsx
+packages/ui/src/theme/input.css
+src/components/input.stories.tsx
+src/components/story-board.tsx
+```
+
+## 13. 검증 상태
+
+- TypeScript, `npm run build`: 통과(2026-10-02).
+- Storybook computed style: `Components/Form/Input` Disabled `opacity` = `0.6` 확인.
+- Story: `All`의 구역 7개와 verification Story ID 존재 확인.
+- 2026-10-06 ui_viz Storybook 화면 비교(1280/768/390, Chromium): 대표 Story 7구역의 컨트롤·Label·Error 문구 computed style 일치, placeholder 색, Focus·Error 경계, Error+Focus의 outline 유지, 긴 값 가로 스크롤 일치. Readonly는 ui_viz `<p>` 대신 native `input[readonly]`로 같은 42px·16/24 표시. Error Message·Required Story에 ui_viz처럼 placeholder를 넣음(Story만 변경).
+- 미확인: 브라우저별 렌더(Chromium 외).
+
+
+### Invalid + Focus 검증 (2026-10-07)
+
+- Focus ring: `--ring` → `--hm-sem-stroke-input-focus` → `--hm-color-border-focus`. Invalid border: 기존 `--hm-sem-action-destructive`. 새 Runtime Role / Production Error prop / 메시지 컴포넌트 없음.
+- Chromium computed style: Invalid border `rgb(211, 47, 47)`, Invalid + Keyboard Focus box-shadow `color(srgb 0.14902 0.4 0.317647 / 0.5) 0px 0px 0px 3px`, `outline-style: none`. Invalid 단독은 `box-shadow: none`.
+- Theme Designer UI에서 Focus `#c75b00`, Destructive `#d41466`, Active `#007f73`, Accent `#ffd36d`로 분리. Invalid border `rgb(212, 20, 102)` + Focus shadow `color(srgb 0.780392 0.356863 0 / 0.5) 0px 0px 0px 3px` 확인.
+- `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. 기존 문서 예시 CSS warning 및 Storybook chunk 크기 / plugin timing warning 유지.
+- 검증 범위: Chromium 환경. 다른 브라우저의 렌더링은 별도 확인이 필요하다.
+- 대표 `All`과 숨김 `InvalidFocus` 확인. 일반 Focus는 border만 변경, Small/Medium/Large 28/34/42px 및 12/14/16px 유지. Readonly border 0 / padding 0, Disabled opacity 0.6 유지. Border CSS 계약 1.5px, 이 브라우저 환경의 computed border-width는 1px으로 정규화; padding 보정은 11.5px 유지. 기존 non-invalid Readonly의 UA outline 정책은 이번 범위에서 유지.
diff --git a/docs/components/label.md b/docs/components/label.md
new file mode 100644
index 0000000..2c2de5b
--- /dev/null
+++ b/docs/components/label.md
@@ -0,0 +1,94 @@
+# Label
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Label 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | HM 스타일 적용 완료 (typography·color만, `hm-label` class 없음) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Label (Radix `Label`) |
+| 대표 Story | `Components/Form/Label` → `All` (이름 "Label") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- ui_viz에는 **독립 Label 문서가 없다.** Field Label 역할은 Input·Textarea가 소유한다: `docs/components/input.md` §9(14/20/500, `label-md`), §10·§16(`color.fg.secondary` `#6E6759`, Confirmed), `textarea.md` §2.2·§2.
+- **ui_viz Confirmed (Input·Textarea Field Label 범위)**: 14 / 20 / 500, 색 `color.fg.secondary`. (Source 13/700은 `CANONICAL_OVERRIDE`로 14/20/500이 확정. D-093 원본 실행본 13/700은 `KNOWN_DEVIATION / FOLLOW_UP`.)
+- **shadcn/Radix 유지**: 라벨 연결(`htmlFor`/감싸기), 클릭 시 컨트롤 focus, `select-none`, Disabled 연동 class.
+- Required 표시, Checkbox/Radio option label의 별도 규칙은 ui_viz에 없다 → §11.
+
+## 3. 기본 규격
+
+| 항목 | 값 |
+|---|---|
+| Typography | 14 / 20 / 500 |
+| 색 | `--hm-sem-fg-secondary` (`#6E6759`) |
+| 배치 | `flex w-fit items-center gap-2` (shadcn 기본, 부모 grid에서 시작 정렬) |
+
+Label ↔ Control 간격 8px(`input.field.gap`)은 Field 조합의 값이며 Label이 소유하지 않는다.
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Default | 위 기본 규격 |
+| Disabled | shadcn 기본: 연결된 컨트롤이 `peer`이고 disabled면 `opacity-50`, `cursor-not-allowed` (또는 상위 `group[data-disabled=true]`) |
+
+Hover/Focus/Active 스타일 없음.
+
+## 5. API
+
+Radix `Label` props 그대로 (`htmlFor`, `asChild` 등). 출력 속성: `data-slot="label"`.
+
+- Required 표시(`*`)를 위한 prop은 만들지 않았다(ui_viz `field-semantics.md` §1: Select/Checkbox/Radio 등에 required API·표시를 새로 추가하지 않는다). 소비자가 `aria-hidden` span으로 조합한다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/label.css` (`--hm-label-*`).
+
+- `--hm-label-font-size`(14px), `--hm-label-line-height`(20px), `--hm-label-font-weight`(500), `--hm-label-text`(→ `--hm-sem-fg-secondary`).
+- Primitive 신규 추가 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix Label 동작·접근성, `data-slot`, `cn(..., className)`, `select-none`, `group-data-[disabled=true]`·`peer-disabled` 연동.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `leading-none font-medium text-sm` 대신 theme CSS가 typography·색을 정한다.
+- `flex` 라벨이 한 줄 전체를 차지하지 않도록 `w-fit`을 추가(ui_viz Label `justify-self: start`).
+
+## 9. Storybook
+
+- 대표 Story `All`("Label"): 구역 `default`(htmlFor), `required`(소비 조합), `disabled`, `long`.
+- 별도 verification Story 없음(구역이 단순).
+
+## 10. 사용자 확정 결정
+
+- 추가 사용자 결정 없음.
+
+## 11. 미확정 / 보류
+
+- 독립 Label 규격 없음. Input·Textarea Field Label 값을 Label 컴포넌트에 적용한 것이다. Checkbox/Radio option label의 전경 role은 ui_viz `TBD`(`field-semantics.md` §3)이므로 해당 컴포넌트 작업에서 따로 확인한다.
+- Disabled opacity: Input의 "Label·Message 포함 .6"(2026-10-02 Input 한정 결정)은 확대하지 않고 shadcn 기본 0.5를 유지.
+- Required 표시 색(`#D32F2F`, TEXTAREA-07)과 표시 방식은 소비 조합이다. 컴포넌트 API 없음.
+- D-093 원본 실행본 13/700: `KNOWN_DEVIATION / FOLLOW_UP`.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/label.tsx
+packages/ui/src/theme/label.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Label)
+src/components/label.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- Storybook computed style(`components-form-label--all`): 14px / 20px / 500, color `rgb(110,103,89)`, Disabled 연결 시 opacity 0.5.
+- 라벨 클릭 시 연결된 input으로 실제 focus 이동 확인.
+- 2026-10-02 당시 미확인: 사이드바 화면, 390px 폭, Checkbox/Radio와의 조합. 현재 Checkbox/Radio는 구현되어 있으나 이 과거 검증 기록이 조합 검증 완료를 뜻하지는 않는다.
diff --git a/docs/components/menubar.md b/docs/components/menubar.md
new file mode 100644
index 0000000..aceb1a1
--- /dev/null
+++ b/docs/components/menubar.md
@@ -0,0 +1,112 @@
+# Menubar
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Menubar 고유의 API·Token·상태·결정만 기록한다. Dropdown Menu(`dropdown-menu.md`), Navigation Menu(`navigation-menu.md`)와 값을 공유하지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-06 |
+| 기반 | shadcn/ui Menubar (Radix `Menubar`) |
+| 대표 Story | `Components/Navigation/Menubar` → `All` (이름 "Menubar") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Menubar 규격이 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계로 새로 정했다. Dropdown Menu에서 확인한 Radix menu 운영 원칙(Radix 상태 속성, highlighted/disabled, submenu, Escape, focus 복귀, Portal/collision, shadcn 아이콘 유지)만 참고하고 token은 참조하지 않았다.
+- **구현 방식**: shadcn / Radix Menubar 구조 유지, theme CSS로 HM 스타일 연결. 상태는 Radix 속성(`data-highlighted`, `data-disabled`, `data-state`)만 쓴다.
+- **역할 구분**: 데스크톱 menu bar(좌우 키로 상위 메뉴 이동)다. Navigation Menu(목적지 링크)와 접근성 모델이 다르고(`role=menubar`/`menu`), Dropdown Menu(단일 trigger)와도 다르다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Bar | 폭 내용 기준(`fit-content`), 높이 38px, padding 2px, gap 2px, 1px `--hm-sem-stroke-input-default` border, radius 4px, 흰 면 |
+| 상위 Trigger | padding `0 12px`, radius 2px, 14 / 20 / 500 |
+| Content / SubContent | 흰 면, 1px `--hm-sem-stroke-input-default`, radius 4px, shadow `0 0 12px rgb(0 0 0 / .2)`, padding 4px |
+| Item | min-height 36px, padding-x 12px, gap 8px, radius 2px, 14 / 20 / 400 |
+| Label | 12 / 18 / 500, `--hm-sem-fg-secondary` |
+| Shortcut | 12px, `--hm-sem-fg-secondary` |
+| Separator | 1px `--hm-sem-stroke-input-default`, Content 폭 전체 |
+| Check / Radio | 16px indicator 열, shadcn `CheckIcon`, 8px 채운 원 |
+| Sub menu chevron | shadcn `ChevronRightIcon` |
+| 위치 | Content `sideOffset` 8, `alignOffset` -4, `align` start (shadcn 기본) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| 상위 Trigger Highlighted / Open | 배경 Accent 100%(`--hm-menubar-trigger-highlight-background` → `--accent`), 글자 `--accent-foreground` |
+| 상위 Trigger Focus (`:focus-visible`) | 기존 강조 면 위에 독립 3px `--ring` 50% box-shadow ring (`--ring` → `--hm-sem-stroke-input-focus`) |
+| 상위 Trigger Open + Focus | Accent 100% 면 + Focus ring 동시 표시. Focus가 Open 면을 대체하지 않음 |
+| Item Highlighted (`data-highlighted`) | 배경 Accent 45%(`--hm-sem-surface-highlight`), 글자 `--accent-foreground` (포인터 hover와 키보드 이동 공통) |
+| Disabled (`data-disabled`) | Item은 shadcn `opacity-50`, 상위 Trigger는 `opacity: 0.6`, 키보드 이동에서 제외 |
+| Checked / Selected | `ItemIndicator`가 check 또는 원을 표시 (Radix `data-state`) |
+| Sub menu open | SubTrigger `data-state="open"`이 Highlighted와 같은 면 유지 |
+| Destructive (`variant="destructive"`) | 글자 `--hm-sem-action-destructive`, Highlighted 면 `--hm-color-action-destructive-hover` |
+
+## 5. API
+
+Radix Menubar props 그대로. export: `Menubar`, `MenubarMenu`, `MenubarTrigger`, `MenubarContent`, `MenubarItem`, `MenubarCheckboxItem`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarLabel`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubTrigger`, `MenubarSubContent`, `MenubarGroup`, `MenubarPortal`.
+
+- `MenubarItem`: shadcn `variant="default" | "destructive"`(출력 `data-variant`), `inset`. Label·CheckboxItem·RadioItem·SubTrigger도 `inset`.
+- 새 prop은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/menubar.css` (`--hm-menubar-*`).
+
+Bar: `background`, `text`, `border-width|color`, `radius`, `height`, `padding`, `gap`. Trigger: `trigger-*`. Content: `content-background|border-color|radius|shadow|padding`. Item: `item-height|padding-x|gap|radius`, `font-size`, `line-height`, `highlight-*`, `destructive-*`, `label-*`, `shortcut-*`, `separator-color`, `indicator-size`, `radio-dot-size`. Semantic과 Theme palette(`--hm-sem-stroke-input-default`)만 참조한다. `--hm-dropdown-menu-*`는 참조하지 않는다(값이 같아 보이는 부분은 후속 token 정리 후보). 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`role=menubar`, `menu`, `menuitem*`)·키보드 모델(Down/Enter/Space로 열기, Up/Down, Home/End, Left/Right, sub menu, typeahead, Escape)·focus 이동/복귀, Portal·positioning·collision, `data-slot`, `cn(..., className)`, open/close animation, lucide 아이콘.
+
+## 8. HM에서 변경한 항목
+
+- shadcn의 `rounded-lg border bg-background h-9 p-1 shadow-xs`, Trigger `rounded-sm px-2 py-1 text-sm font-medium focus:bg-accent`, Content·Item의 색/radius/padding class를 제거하고 theme CSS + `data-highlighted`로 대체.
+- Radio 표시를 별도 아이콘 import 대신 CSS 크기 token을 쓰는 원으로 구현(Dropdown Menu와 같은 방식).
+- Check / Radio indicator span에 `data-slot="menubar-item-indicator"` 추가.
+- Bar 폭을 `fit-content`로 지정(shadcn의 `flex`는 가로 전체로 늘어난다).
+
+## 9. Storybook
+
+- 대표 Story `All`("Menubar"): 파일(item+shortcut, disabled, separator, sub menu 내보내기, destructive 종료), 편집, 보기(Label, Checkbox, Radio Group)를 가진 실제 bar.
+- 숨김 verification: `TriggerFocus`, `OpenFocus`. `OpenFocus`는 검수 목적으로 Story의 `play`에서 실제 열린 menu의 Trigger에 focus를 준다. 일반 Story/Production은 Radix 기본대로 메뉴 항목에 focus를 이동한다.
+- Focus 검수는 일반 Story의 computed style 기준으로 한다. Designer의 `.hm-designer button:focus-visible` 장식 outline을 컴포넌트 ring의 근거로 사용하지 않는다.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(38px bar, 12px padding, 36px item, 그림자)는 현재 HM 규격이며 디자인 확정 시 재검토. Dropdown Menu와 값이 같은 부분은 공통 Semantic 후보이며 이번에 승격·리팩터링하지 않았다.
+- **모바일**: 데스크톱 중심 컴포넌트다. 390px에서의 구성(상위 메뉴가 넘칠 때)은 검증하지 않았고, 모바일 menu 패턴은 별도로 정한다.
+- Disabled opacity: Item은 shadcn 50, 상위 Trigger는 0.6으로 서로 다르다(전역 Disabled 규칙 없음).
+- Motion은 shadcn 기본.
+- Menu 안 항목을 링크로 쓰는 예는 정하지 않았다(링크 목적지는 Navigation Menu).
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/menubar.tsx
+packages/ui/src/theme/menubar.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/menubar.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-06 Focus 정합: `typecheck`, `build`, `build-storybook`, `git diff --check` 통과. 기존 문서 예시 CSS(`bg-[var(...)]`)와 Storybook chunk 크기 경고 유지.
+- Theme Designer에서 Primary `#6837a8`, Active `#007f73`, Focus `#c75b00`, Accent `#ffd36d`를 분리 적용한 뒤 **일반 Story**에서 확인: Open + Focus Trigger 면 `rgb(255,211,109)` + Focus 50% / 3px ring. 실제 `:focus-visible`, `data-state="open"` 동시 성립, Designer wrapper 없음, computed outline `none`으로 장식 CSS 영향 배제.
+- 단독 override: Focus는 Trigger ring만, Accent는 Top Trigger 면과 Item Highlighted(45%)만 변경. Primary/Active는 Menubar 면·ring에 영향 없음. Disabled Trigger shadow 없음·opacity 0.6, Disabled Item opacity 0.5 유지.
+- 일반 키보드 Enter는 실제 첫 Item에 focus를 이동하며 Trigger는 Accent 100% Open 면 / ring 없음, Item은 Accent 45% Highlighted를 유지한다. Escape는 닫힌 Trigger로 focus를 복귀시키며 독립 ring을 표시한다. Navigation Menu 일반 Story에서도 Accent 면 + 3px Focus ring·좌우 키 이동을 확인했고 소스는 변경하지 않았다.
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 키보드(Browser pane): 상위 Trigger에서 Enter로 열기(첫 항목에 focus), ArrowDown/Up으로 이동(disabled 항목 건너뜀), Home/End, 오른쪽 방향키로 Sub menu 열림과 왼쪽 방향키로 Sub menu 닫힘(상위 menu 유지), Sub menu 안에서 오른쪽 방향키로 다음 상위 메뉴 Trigger로 이동, 상위 Trigger에서 오른쪽 방향키로 다음 Trigger 이동, ArrowDown으로 보기 menu 열기, Enter로 Checkbox 토글(menu가 닫히고 Trigger로 focus 복귀, 재오픈 시 `눈금자` checked), Escape로 닫힘과 Trigger focus 유지.
+- computed style: Bar 38px / radius 4px / border `rgb(222,219,210)` / 흰 면, Trigger 14/20/500, Content radius 4px, shadow `0 0 12px .2`, padding 4px, Item 36px, Highlighted `rgb(189,223,212)`.
+- 미확인: Radio 선택 키보드 동작(Radix 동일 구조, Checkbox만 확인), 실제 pointer hover, typeahead, 좁은 viewport.
diff --git a/docs/components/navigation-menu.md b/docs/components/navigation-menu.md
new file mode 100644
index 0000000..6f246b6
--- /dev/null
+++ b/docs/components/navigation-menu.md
@@ -0,0 +1,109 @@
+# Navigation Menu
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Navigation Menu 고유의 API·Token·상태·결정만 기록한다. Dropdown Menu(`dropdown-menu.md`), Menubar(`menubar.md`)와 값을 공유하지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Navigation Menu (Radix `NavigationMenu`) |
+| 대표 Story | `Components/Navigation/Navigation Menu` → `All` (이름 "Navigation Menu") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Navigation Menu 규격이 없다. 현재 위치(Current) 의미와 Hover/Focus는 독립이라는 ui-viz의 navigation 안내만 참고했다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계로 새로 정했다. Dropdown Menu의 운영 원칙(Radix 상태 속성, Escape, focus 복귀, Portal/viewport)만 참고하고 token은 참조하지 않았다.
+- **구현 방식**: shadcn / Radix NavigationMenu 구조(Root, List, Item, Trigger, Content, Link, Viewport, Indicator) 유지, theme CSS로 HM 스타일 연결.
+- **역할 구분**: 목적지 이동(링크) 중심이다. Dropdown Menu(명령)·Menubar(메뉴 바)와 접근성 모델이 다르다(`role=menu`가 아니라 disclosure + link).
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| 상위 Trigger / Link | 높이 34px, padding `0 12px`, radius 4px, 14 / 20 / 500, `--hm-sem-fg-primary`, 항목 gap 4px |
+| Trigger indicator | shadcn `ChevronDownIcon` 12px, open 시 180° 회전 |
+| Content / Viewport 면 | `--hm-sem-bg-surface`, 1px `--hm-sem-floating-border-color`, radius 4px, shadow `0 0 12px rgb(0 0 0 / .2)` |
+| Content | padding 8px, min-width 240px, 폭은 안의 내용이 정함 |
+| Content 안 Link(목적지) | 세로 배치, padding `8px 12px`, gap 2px, radius 2px. `data-description` 자식은 12 / 18 / 400 secondary |
+| Indicator(화살표) | shadcn 회전 사각형, `--hm-sem-floating-border-color` |
+| 열기 | hover(Radix 기본 delay)·click·keyboard. 이동 animation은 shadcn 기본 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Hover / Focus / Open (Trigger) | 배경 `--accent`, 글자 `--accent-foreground`. Focus는 ring 모양 `0 0 0 3px ring 50%` 추가 |
+| Link Hover / Focus | Trigger와 같은 면 |
+| Active Link (`active`) | Radix `data-active` + `aria-current="page"`. 글자 `--hm-sem-action-primary`, weight 700, 배경 `--accent` 45% (hover면 일반 hover 면) |
+| Disabled Trigger | `opacity: 0.6`(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), `cursor: not-allowed`, native `disabled` |
+| Open / Closed | Radix `data-state`, 이동 방향은 `data-motion` (shadcn animation) |
+
+## 5. API
+
+Radix NavigationMenu props 그대로. export: `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuIndicator`, `NavigationMenuViewport`.
+
+- `NavigationMenu`: `viewport`(기본 true, shadcn). `false`면 각 Content가 자기 Trigger 아래에 열린다. 출력 `data-viewport`.
+- `NavigationMenuLink`: `active`(현재 위치), `asChild`로 router Link 조합(router에 의존하지 않음). disabled link는 지원하지 않는다.
+- `NavigationMenuTrigger`: chevron 내장. `disabled`는 native 속성.
+- `NavigationMenuIndicator`: 선택 사용(Story의 viewport 예시에서 사용).
+- 2026-10-06 Visual QA: viewport 모드의 Item은 static으로 두어 Radix List wrapper가 Trigger의 `offsetParent`가 되도록 한다. `viewport={false}`에서만 Item의 relative anchor를 유지한다. Indicator에 임의 위치 보정값을 넣지 않는다. `IndicatorAlignment` verification Story는 서로 다른 label width의 첫·중간·마지막 Trigger와 두 viewport 모드를 검증한다.
+- 대표 Story의 고정 360/300px 내용은 좁은 화면에서 자연 폭을 사용한다. Desktop 폭도 Story frame container에 제한하며, 모바일 inline Content의 absolute 배치는 Story 범위에서만 적용한다(Production CSS 변경 없음).
+- 새 prop은 만들지 않았다. Content 안 title/description은 소비 조합이며 `data-description` 속성으로 보조 문구를 표시한다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/navigation-menu.css` (`--hm-navigation-menu-*`).
+
+`height`, `padding-x`, `gap`, `radius`, `font-size|line-height|font-weight`, `text`, `icon-size`, `hover-background|text`, `active-background|text|font-weight`, `background`, `border-width|color`, `surface-radius`, `shadow`, `content-padding`, `content-min-width`, `item-padding|gap|radius`, `description-*`, `disabled-opacity`. Semantic과 Theme palette(`--hm-sem-floating-border-color`)만 참조한다. `--hm-dropdown-menu-*`, `--hm-tab-*`, `--hm-button-*`는 참조하지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·동작(hover open delay, Arrow 키와 Tab 이동, Escape 닫힘, focus 복귀, Viewport 크기 측정, Indicator 위치), ARIA(`aria-expanded`, `aria-controls`, `aria-current`), 이동 animation(`data-motion`), viewport/non-viewport 구조, chevron, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `navigationMenuTriggerStyle`(rounded-md, h-9, bg-background, hover/focus/open `bg-accent/50`)과 Content·Viewport의 `bg-popover text-popover-foreground rounded-md border shadow` 등을 제거하고 theme CSS로 이전.
+- Content 안 Link는 shadcn에서 별도 class로 꾸미던 것을 선택자(`content` 하위 `link`)로 처리.
+- Active Link 스타일(색·weight·배경)을 정의(shadcn은 `data-[active=true]:bg-accent/50`).
+
+## 9. Storybook
+
+- 대표 Story `All`("Navigation Menu"): `Viewport(기본)`과 `viewport={false}` 두 구성을 한 페이지에 둔다. 제품(설명 있는 3 링크), 자료(2열 4 링크), 회사(현재 위치 링크), 문의(일반 링크), 준비 중(disabled Trigger).
+- verification: `Default`, `No Viewport`.
+- Story의 Content 폭은 `style` 인라인으로 지정한다(새 Story 파일의 Tailwind 임의값 클래스가 개발 서버에서 생성되지 않는 일이 있었다).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(34px, 12px padding, Content 240px 최소 폭, 그림자, Active 표현)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- **모바일**: Radix NavigationMenu는 데스크톱 GNB 구조다. 390px에서 Viewport의 폭은 Content 폭(Story에서 360px)을 따라가며 `max-width` 제한이 없어 우측 끝에 닿았다(가로 overflow는 없음). 모바일 navigation(햄버거, Sheet/Drawer 조합 등)은 GNB/Layout 단계에서 별도 패턴으로 검토한다.
+- disabled link 지원 없음. 필요하면 `aria-disabled` 규칙을 Pagination과 같은 방식으로 후속 검토.
+- Indicator 사용 여부와 색은 현재 선택 사항이며 별도 규격이 없다.
+- 열림/닫힘 Motion은 shadcn 기본.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/navigation-menu.tsx
+packages/ui/src/theme/navigation-menu.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/navigation-menu.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-06 Visual QA: 1280/1024/768/390px에서 제품 Trigger/Arrow center 48.8828/49px, 자료 118.6484/119px. 다른 label width(제품/기술 자료/지원 센터)도 Arrow 오차 절댓값 0.45px 이내. inline 모드의 각 Content가 자기 Trigger 아래에 열림 확인. 대표 Story 두 모드의 열린 패널이 viewport 안에 있고 페이지 가로 overflow 없음. `typecheck`, `build`, `build-storybook` 통과.
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): 키보드로 Enter 열림(`aria-expanded=true`), Tab으로 Content 안 첫 링크, 다음 링크로 이동, Escape로 닫히고 Trigger로 focus 복귀, ArrowRight로 다음 상위 항목으로 이동, 마우스 hover로 해당 Content가 열림, 현재 위치 링크가 `aria-current="page"`·`data-active`·weight 700.
+- computed style: Viewport 흰 면, border `rgb(222,219,210)`, radius 4px, shadow `0 0 12px .2`. Content 폭이 안의 목록(360px) 폭에 맞춰 376px.
+- 390×844: 열린 Viewport 폭 378px, 좌측 16px에서 시작해 오른쪽 끝에 닿음(가로 overflow 없음). 한계는 §11.
+- 미확인: 닫힘 animation 시각, `viewport={false}` 구성의 열림(코드 경로는 Radix/shadcn 기본), 두 Content 사이 이동 animation 시각, ArrowDown으로 Content 진입.
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
new file mode 100644
index 0000000..9dc1f6e
--- /dev/null
+++ b/docs/components/pagination.md
@@ -0,0 +1,102 @@
+# Pagination
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Pagination 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Pagination (`nav > ul > li > a`, Radix 없음) |
+| 대표 Story | `Components/Navigation/Pagination` → `All` (이름 "Pagination") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Pagination이 컴포넌트 이름으로만 있고 규격은 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계(fg-primary, action-primary, accent)로 새로 정했다.
+- **구현 방식**: shadcn Pagination 구조 유지. Presentational / navigation primitive로, page state와 href는 소비자가 관리한다. 링크는 `a`로 유지하고 Button으로 바꾸지 않는다.
+- **Button과의 관계**: shadcn은 `buttonVariants`를 입혀 Button처럼 그리지만, HM Button은 `data-slot="button"` 기반이라 이를 그대로 쓰면 HM 스타일이 적용되지 않고 Button token도 재사용하면 안 된다. 그래서 `PaginationLink`는 독립 anchor 스타일(`--hm-pagination-*`)로 구현했다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Page link | 34 × 34px(min-width 34), radius 4px(`--hm-radius-control-md`), 14 / 20 / 500, `--hm-sem-fg-primary` |
+| Previous / Next | 높이 34px, padding `0 12px`, 아이콘 16px, 라벨 `hidden sm:block`("Previous"/"Next", 모바일은 아이콘만) |
+| 간격 | 목록 gap 4px |
+| Current Page | 배경 `--hm-sem-action-primary`(Primary Green `#123328`), 글자 `--hm-sem-on-action-primary`(흰색), weight 700 |
+| Ellipsis | 34 × 34 영역, 아이콘 16px, `--hm-sem-fg-secondary` |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Hover | 배경 `--accent` 45%, 글자 `--accent-foreground` |
+| Focus (`:focus-visible`) | ring 모양 `0 0 0 3px ring 50%` |
+| Current (`isActive`) | `aria-current="page"`, 위 Current 스타일(hover에도 `Current`로 보이도록 hover 배경 대신 유지) |
+| Disabled (`aria-disabled="true"`) | `opacity: 0.6`(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), `cursor: not-allowed`, hover 면 없음, `tabIndex -1`, 클릭 취소(`preventDefault`) |
+
+## 5. API
+
+export: `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis`.
+
+- `PaginationLink`: `a` props + `isActive`(현재 페이지), `size` `"default" | "icon"`(기본 `icon`; shadcn은 Button size, HM은 `default`/`icon` 둘만). 출력 `data-slot="pagination-link"`, `data-active`, `data-size`.
+- disabled: 별도 prop 없이 `aria-disabled`를 쓴다. `aria-disabled="true"`이면 컴포넌트가 `tabIndex=-1`로 두고 클릭(onClick 호출 포함)을 취소한다. anchor에는 native disabled가 없어 class만으로는 접근성이 보장되지 않기 때문에 보완했다.
+- `PaginationPrevious`/`PaginationNext`: 기본 `aria-label`("Go to previous/next page")과 라벨, `children`으로 교체 가능.
+- 새 상태 관리, `page`/`total` 같은 prop은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/pagination.css` (`--hm-pagination-*`).
+
+`gap`, `height`, `min-width`, `padding-x`, `radius`, `font-size|line-height|font-weight`, `icon-size`, `text`, `hover-background`, `hover-text`, `active-background`, `active-text`, `active-font-weight`, `ellipsis-color`, `disabled-opacity`. Semantic만 참조하고 `--hm-button-*` 등 다른 컴포넌트 Token을 쓰지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn에서 유지한 항목
+
+`nav role="navigation" aria-label="pagination"`, `ul`/`li` 구조, `a` 링크, `isActive`→`aria-current="page"`, Previous/Next 아이콘과 `aria-label`, Ellipsis의 `aria-hidden` + sr-only, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- `buttonVariants` 합성을 제거하고 독립 anchor 스타일로 대체(위 §2).
+- `size`를 shadcn의 Button size 전체에서 `default`/`icon`으로 좁혔다.
+- `aria-disabled` 처리(tabIndex, 클릭 취소)를 추가했다.
+- 현재 페이지를 outline 대신 채움(primary)으로 표시.
+
+## 9. Storybook
+
+- 대표 Story `All`("Pagination"): First page, Middle page, Last page, Long range with ellipsis(1 … 9 10 11 … 20)를 한 페이지에 둔다. 각 Specimen이 local state를 가지고 클릭 시 현재 페이지가 실제로 바뀐다(`#page-N` href + `preventDefault`).
+- verification: `First Page`, `Last Page`, `Long Range`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+- 2026-10-06 (Pagination Current 원복): 직전 Active Semantic 작업에서 Current를 `--hm-sem-state-active`(Light 2)로 바꾼 변경을 취소하고 이전 값 `--hm-sem-action-primary` / `--hm-sem-on-action-primary`(Primary Green `#123328`, 흰색)로 복원했다. Current + Hover도 Current 색을 유지한다. Hover의 `--accent` 45%는 유지한다. Focus·Disabled·API·구조 변경 없음.
+
+## 11. 미확정 / 보류
+
+- 수치(34px, 4px radius, 12px padding, 채움 current, Disabled opacity 0.6)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- page range(ellipsis 계산)는 소비자 책임이다(Story의 `pageRange`는 예시일 뿐 컴포넌트가 아님).
+- 언어: Previous/Next 기본 라벨은 shadcn 영어 그대로(`children`으로 교체).
+- 좁은 화면 compact 표현은 shadcn의 라벨 숨김(`sm` 미만)만 유지. 별도 compact variant 없음.
+- 페이지 크기 선택, 결과 수 표시는 범위 밖.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/pagination.tsx
+packages/ui/src/theme/pagination.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/pagination.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane, JS click): page 4 클릭으로 current가 4로 변경, Next로 5, 첫 페이지의 Previous(`aria-disabled`)와 마지막 페이지의 Next 클릭은 상태를 바꾸지 않음. `aria-disabled` 링크는 `tabindex=-1`, opacity 0.6, cursor not-allowed. Current는 `aria-current="page"`, 34×34, 배경 `rgb(18,51,40)`, 글자 white, weight 700.
+- 구조: `a` 요소, ellipsis 위치(1 … 9 10 11 … 20)와 First/Last 상태 확인.
+- Responsive: 390×844에서 Previous/Next 라벨이 숨겨져 아이콘만 남고, 20페이지 범위(`1 … 9 10 11 … 20`)가 350px 한 줄에 들어가며 가로 overflow 없음.
+- 미확인: 실제 키보드 Tab/Enter 순서, pointer hover·focus ring 시각.
diff --git a/docs/components/popover.md b/docs/components/popover.md
new file mode 100644
index 0000000..5a270ec
--- /dev/null
+++ b/docs/components/popover.md
@@ -0,0 +1,130 @@
+# Popover
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Popover 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Popover (Radix `Popover`) |
+| 대표 Story | `Components/Overlay/Popover` → `All` (이름 "Popover") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Popover 규격이 없다(인벤토리 "상세 디자인·API 보류"). 같은 floating surface인 Dialog의 윤곽 의도만 참고했다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계로 새로 정했다.
+- **구현 방식**: shadcn / Radix Popover 구조를 유지하고 theme CSS로 HM 스타일을 연결. Popover는 일반 floating panel이며 modal이 아니다(overlay·focus trap 없음).
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Surface | `--hm-sem-bg-surface` |
+| 전경 | `--hm-sem-fg-primary` |
+| Border | 1px `--hm-sem-floating-border-color` |
+| Radius | `--hm-radius-container` (4px) |
+| Shadow | `0 0 12px rgb(0 0 0 / .2)` |
+| Padding | 16px |
+| Width | 288px (viewport − 16px 이하로 제한) |
+| Typography | 14 / 20 / 400 |
+| Position | `sideOffset` 4, `align` center (기본) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Open / Closed | Radix `data-state`, shadcn open/close animation |
+| Focus | 열릴 때 Radix가 content 안 첫 focus 가능 요소로 이동, 닫힐 때 trigger로 복귀(Escape/Close) |
+| 바깥 클릭 | 닫힘. focus는 클릭한 곳에 둔다 |
+
+## 5. API
+
+Radix Popover props 그대로. export: `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverAnchor`, `PopoverClose`.
+
+- `PopoverContent`: `align` 기본 `center`, `sideOffset` 기본 4.
+- `PopoverClose`: `asChild`일 때 자식의 `data-slot`을 유지(DialogClose와 같은 규칙, Button HM 스타일 보존).
+- 출력 속성: `data-slot="popover-*"`, Radix `data-state`·`data-side`·`data-align`.
+
+### 접근성 이름
+
+`PopoverContent`는 `role="dialog"`로 출력된다. 소비자는 패널의 목적을 나타내는 접근성 이름을 `aria-label` 또는 `aria-labelledby`로 지정한다. Trigger의 텍스트는 패널 이름으로 자동 연결되지 않는다.
+
+```tsx
+<PopoverContent aria-label="프로젝트 이름 변경">
+  {/* 입력 폼 */}
+</PopoverContent>
+```
+
+보이는 제목이 있다면 해당 제목의 고유 ID를 연결한다. 같은 화면에서 반복되는 패널은 `React.useId()` 등으로 서로 다른 ID를 생성한다.
+
+```tsx
+const titleId = React.useId()
+
+<PopoverContent aria-labelledby={titleId}>
+  <h2 id={titleId}>프로젝트 안내</h2>
+  <p>일정과 담당자 정보를 확인합니다.</p>
+</PopoverContent>
+```
+
+대표 Story는 정보·폼·정렬 예제 각각에 `aria-label`을 제공한다. 이름 지정은 기존 레이아웃과 Radix의 focus 이동·Escape·닫힘 동작을 바꾸지 않는다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/popover.css` (`--hm-popover-*`).
+
+`background`, `text`, `border-width`, `border-color`, `radius`, `shadow`, `padding`, `width`, `font-size`, `line-height`, `font-weight`. 다른 컴포넌트의 Component Token을 참조하지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`role=dialog`, `aria-expanded`, `aria-controls`)·Escape·바깥 클릭 닫힘·focus 이동/복귀, Portal·positioning·collision, `data-slot`, `cn(..., className)`, animation class, `z-50`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `w-72 rounded-md border p-4 shadow-md bg-popover text-popover-foreground` 등 시각 class 제거 → theme CSS.
+- `PopoverClose` 추가 export (shadcn 기본 export에 없는 Radix `Close`).
+
+## 9. Storybook
+
+- 대표 Story `All`("Popover"): 정보 패널, 폼 패널(Input + 취소/저장 `PopoverClose`), `align` start/center/end 비교.
+- verification: `Open`(열린 상태).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(288px, 16px padding, 그림자)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- arrow 없음(shadcn 기본에 없음).
+- 크기 variant 없음. 폭은 `className`으로 확장.
+- Motion 규칙은 정의되지 않아 shadcn 기본 animation 유지.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/popover.tsx
+packages/ui/src/theme/popover.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/popover.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-08: 대표 Story의 정보·폼·정렬 3종, 총 5개 `role="dialog"` 접근성 이름을 확인했다. 키보드 Enter·Tab·Escape, 폼 자동 focus, 취소/저장 `PopoverClose`의 닫힘·trigger focus 복귀, 바깥 클릭 닫힘을 Browser에서 확인했다. 공개 API 타입 검사 통과, 최종 검증 Console 오류 없음.
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): 클릭 열기(focus가 content 안 Input으로 이동), Escape 닫힘과 trigger focus 복귀, 바깥 클릭 닫힘.
+- computed style: width 288px, white, border `rgb(222,219,210)` 1px, radius 4px, padding 16px, shadow `0 0 12px .2`.
+- 미확인: 좁은 viewport collision 시각.
+
+## 14. Floating 계열 공통 (Semantic 승격 완료)
+
+Dropdown Menu·Popover·Hover Card는 surface(White, 1px pale border, 4px radius, `0 0 12px .2` 그림자)가 같다. 의미(떠 있는 패널의 면·윤곽·그림자)도 같아 공통 Semantic 후보는 아래이며, `default.css`의 `--hm-sem-floating-*`로 승격했고 각 컴포넌트의 `--hm-<component>-*`가 이를 참조한다(Component Token은 유지). Dialog(Dialog 전용 값), Tooltip(dark inverse face)은 같은 면이 아니다.
+
+- Floating background / border / shadow / radius
+
+Popover만 다르게 하려면 `--hm-popover-*`만 override한다. Date Picker·Combobox popup은 Popover를 그대로 쓰므로 이 값을 따른다.
diff --git a/docs/components/progress.md b/docs/components/progress.md
new file mode 100644
index 0000000..23ccec9
--- /dev/null
+++ b/docs/components/progress.md
@@ -0,0 +1,99 @@
+# Progress
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Progress 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격, 기본 Progress 하나) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Progress (Radix `Progress`) |
+| 대표 Story | `Components/Data & Display/Progress` → `All` (이름 "Progress") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Progress가 컴포넌트 이름으로만 있고 규격은 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다.
+- **구현 방식**: shadcn / Radix Progress 구조(Root + Indicator)를 유지하고 theme CSS로 연결.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Track | 높이 8px, radius 9999px, 배경 `--hm-sem-palette-warm-neutral-light` |
+| Indicator | 배경 `--hm-sem-state-active`(현재 Active와 Progress의 색 정책이 같아 같은 Semantic을 쓴다. 의미가 달라지면 별도 Semantic으로 분리), 폭 = value/max 비율(`translateX`), `transition-all`(shadcn 기본) |
+| 폭 | 부모 폭 100% |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Loading / Complete | Radix `data-state="loading"`(0 ≤ value < max), `"complete"`(value = max) |
+| Indeterminate | `value`를 주지 않으면 Radix `data-state="indeterminate"`. 현재는 Indicator가 비어 있다(별도 표현 없음) |
+| Success / Warning / Error | 만들지 않았다(HM 상태색 미확정) |
+
+## 5. API
+
+Radix Progress props 그대로. export: `Progress`.
+
+- `value`, `max`(기본 100), `getValueLabel`, `asChild`. Indicator는 내부에서 렌더하며 별도 export 없음(shadcn 구조).
+- ARIA: `role="progressbar"`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`(Radix). 접근 가능한 이름은 소비자가 `aria-label`/`aria-labelledby`로 지정.
+- `variant`, `size`, `status` 같은 prop은 만들지 않았다. 높이나 색을 바꾸려면 `--hm-progress-*` Token을 덮는다(unlayered theme 규칙이라 `className`의 높이 utility는 이기지 못한다).
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/progress.css` (`--hm-progress-*`).
+
+`height`, `radius`, `track-background`, `indicator-background`. Semantic과 Theme palette(`--hm-sem-palette-warm-neutral-light`)만 참조한다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA·`data-state`, Indicator의 `translateX` 표현(폭 계산은 HM에서 value/max 비율로 보정), `transition-all`, `overflow-hidden`, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `h-1 rounded-full bg-muted`, Indicator `bg-primary` class를 제거하고 theme CSS로 이전. 높이를 4px에서 8px로 키웠다.
+- 트랙색을 `muted`가 아닌 `--hm-sem-palette-warm-neutral-light`로 정했다(`muted`는 베이지 배경에서 거의 안 보임).
+
+## 9. Storybook
+
+- 대표 Story `All`("Progress"): 0%, 50%, 100%, max=200, Interactive value(`-25`/`+25` 버튼, local state)를 한 페이지에 둔다.
+- verification: `Zero`, `Middle`, `Full`, `NonDefaultMax`(max=200의 0/50/200/indeterminate). 대표 Story에도 동일 specimen을 둔다.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(8px, 트랙색)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- 상태 variant(success/warning/error)는 HM 상태색 확정 후.
+- Indeterminate 표현(움직이는 막대)은 없다. Motion 규칙이 정해지면 검토.
+- 값 label/퍼센트 텍스트는 소비 조합(컴포넌트에 없음).
+- `prefers-reduced-motion` 대응은 추가하지 않았다(`transition-all`은 shadcn 기본).
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/progress.tsx
+packages/ui/src/theme/progress.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/progress.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 DOM(Browser pane): `role="progressbar"`, `aria-valuemin=0`, `aria-valuemax=100`, `aria-valuenow`가 0/50/100/30(interactive), `data-state` loading/complete, indicator 채움이 0/50/100%.
+- value 변경: `+25` 클릭으로 `aria-valuenow`가 30 → 55, 이어서 100으로 클램프되고 indicator transform이 `translateX(0%)`, 렌더 후 채움 100%. 0과 max 경계 확인.
+- computed style: 높이 8px, radius 9999px, 트랙 `rgb(224,218,206)`, indicator `rgb(18,51,40)`.
+- Responsive(390×844): 트랙이 부모 폭 358px을 따르고 가로 overflow 없음.
+- 미확인: indeterminate 표시, `max`를 100이 아닌 값으로 쓴 경우(Indicator 계산이 value를 %로 간주하므로 `max≠100`이면 소비자가 환산해야 함).
+
+### 2026-10-06 정합성 감사 수정
+
+위 2026-10-02 검증 이력의 max≠100 제한은 해소했다. Indicator는 Radix와 같은 유효 범위/기본 max를 사용하여 value/max 비율로 채운다. max=200, value=50은 ARIA 50/200과 25% 채움이 일치하며 값 없음은 기존 indeterminate 빈 Track을 유지한다.
diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md
new file mode 100644
index 0000000..30d6954
--- /dev/null
+++ b/docs/components/radio-group.md
@@ -0,0 +1,87 @@
+# Radio Group
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Radio Group 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Radio Group (Radix `RadioGroup`) |
+| 대표 Story | `Components/Form/Radio Group` → `All` (이름 "Radio Group") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz 기존 테스트 규격에는 Radio 문서가 없다(`RADIO-01` TBD, HOLD, group spacing·전경 role TBD). 확정 규격이 없어 참고만 했다.
+- **현재 HM 규격**: §3~§4. Checkbox와 같은 HM Semantic 체계로 새로 정했다(Component Token은 따로 둔다).
+- **구현 방식**: Radix RadioGroup(roving focus, 방향키 선택, `role=radiogroup/radio`, `data-state`, `data-orientation`)을 유지하고 theme CSS로 연결. shadcn `CircleIcon`을 inner dot으로 유지.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Outer | 18 × 18px 원, border 1px `--hm-sem-stroke-default`, face `--hm-sem-bg-surface` |
+| Inner dot | 8px, `--hm-sem-state-active` (shadcn `CircleIcon`, fill) |
+| Group gap | vertical 12px, horizontal 16px (wrap) |
+| Orientation | Radix `orientation` prop → `data-orientation`. 기본 vertical(grid), horizontal은 flex |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Unchecked | 위 기본 규격 |
+| Checked | border `--hm-sem-state-active` + inner dot |
+| Hover | border `--hm-sem-action-primary` |
+| Focus (`:focus-visible`) | shadcn ring 유지 |
+| Error (`aria-invalid="true"` on item) | border `--hm-sem-action-destructive` |
+| Disabled | `opacity: 0.6`, `cursor: not-allowed` (항목 또는 그룹 `disabled`) |
+
+## 5. API
+
+Radix `RadioGroup`/`RadioGroupItem` props 그대로 (`value`/`defaultValue`/`onValueChange`, `orientation`, `disabled`, `name`, `required`, `loop`, `value` on item). 추가 prop 없음. 출력 속성: `data-slot="radio-group"`, `"radio-group-item"`, `"radio-group-indicator"`. 그룹 이름은 `aria-label` 또는 `aria-labelledby`로 준다.
+
+## 6. Token
+
+`packages/ui/src/theme/radio-group.css` (`--hm-radio-*`): `size`, `border-width`, `dot-size`, `background`, `border-color`, `hover-border-color`, `checked-border-color`, `dot-color`, `error-border-color`, `group-gap`, `group-gap-horizontal`. Semantic 참조, Checkbox 등 다른 컴포넌트 Token 미사용. Primitive 신규 추가 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA·roving tabindex·방향키 선택, `data-slot`, `cn(..., className)`, `transition-colors`, `CircleIcon`, focus ring, disabled 커서.
+
+## 8. HM에서 변경한 항목
+
+shadcn `size-4 border-input text-primary shadow-xs dark:` class 제거 → theme CSS. Group gap `gap-3` 고정 대신 Token + horizontal 레이아웃. Disabled opacity 50 → 60.
+
+## 9. Storybook
+
+대표 Story `All`: `vertical`, `horizontal`, `hover`, `focus`, `error`, `disabled-item`, `disabled-group`. Focus는 `play`로 실제 focus. verification: `Vertical`, `Horizontal`, `Disabled`, `Error`.
+
+## 10. 사용자 확정 결정
+
+2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서(작업 지시). 개별 수치 결정 없음.
+
+## 11. 미확정 / 보류
+
+- 그룹 Label/Heading, Error·Helper 슬롯의 소유와 우선순위(컴포넌트 없음, 소비 조합).
+- 수치(18px, 8px dot, gap 12/16)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Hit area 확장 미적용.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/radio-group.tsx
+packages/ui/src/theme/radio-group.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export RadioGroup, RadioGroupItem)
+src/components/radio-group.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- computed style: 18×18, 50% radius, border 1px; Checked border `rgb(18,51,40)`, dot 8px; Unchecked `rgb(154,146,132)`; Error `rgb(211,47,47)`; Disabled opacity 0.6; vertical gap 12px, horizontal `flex` gap 16px.
+- interaction: 항목 click으로 선택 변경, ArrowUp으로 선택·focus가 이전 항목으로 이동, roving tabindex(선택 항목 0, 나머지 -1) 확인.
+- 미확인: 실제 pointer hover·focus ring 시각, 사이드바 화면, 390px 폭.
diff --git a/docs/components/resizable.md b/docs/components/resizable.md
new file mode 100644
index 0000000..a10e70e
--- /dev/null
+++ b/docs/components/resizable.md
@@ -0,0 +1,110 @@
+# Resizable
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Resizable 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태와 성격
+
+| 항목 | 내용 |
+|---|---|
+| 성격 | **Interactive layout primitive** (panel 크기 조절). Dashboard/Sidebar/persistence를 소유하지 않는다 |
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-03 |
+| 기반 | shadcn/ui Resizable = **react-resizable-panels v4** (`^4.14.2`) |
+| 대표 Story | `Components/Disclosure/Resizable` → `All` (이름 "Resizable") |
+| 보류 | 아래 §12 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Resizable이 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다. Separator Token은 참조하지 않는다.
+- **구현 방식**: 라이브러리가 drag, 최소/최대, collapsing, layout 계산, 키보드 resize, pointer hit-target 확장, separator ARIA를 소유한다. HM은 divider와 선택형 grip만 스타일한다.
+- **v4 주의**: 라이브러리 이름과 API가 v3와 다르다. v3의 `PanelGroup`/`PanelResizeHandle`가 아니라 **`Group`/`Panel`/`Separator`**이고, 크기는 **숫자 = 픽셀, 단위 없는 문자열(`"30"`) 또는 `"30%"` = 퍼센트**다. shadcn 이름(`ResizablePanelGroup`/`ResizablePanel`/`ResizableHandle`)은 유지했다.
+- **보류**: §12.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Group | `flex h-full w-full`. `orientation` `"horizontal"`(기본) / `"vertical"`. Group·Panel의 inline sizing은 라이브러리 것이라 덮을 수 없다 |
+| Divider(Separator) | 1px, `--hm-sem-stroke-input-default`. 나란한 panel 사이는 세로선(`aria-orientation="vertical"`), 쌓인 panel 사이는 가로선 |
+| Pointer target | 라이브러리가 1px divider 둘레로 확장한다(DOM 크기가 아니라 hit test). 8px 떨어진 곳은 잡히지 않았다 |
+| Grip (`withHandle`) | 12 × 16px, 흰 면, 1px pale border, radius 2px, `GripVerticalIcon` 10px `--hm-sem-fg-secondary`, divider 가운데. 쌓인 panel 사이에서는 90° 회전 |
+| 크기 | 소비자(Group의 `className`/부모)가 정한다. 컴포넌트가 높이/폭을 강제하지 않는다 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Hover (`data-separator="hover"`) | divider와 1px halo가 `--hm-sem-stroke-default` |
+| Dragging (`data-separator="active"`) | divider와 1px halo가 `--hm-sem-action-primary` |
+| Focus (`:focus-visible`) | divider와 1px halo가 `--hm-sem-stroke-input-focus` |
+| Disabled | opacity 0.6(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함) |
+| Collapsed panel | 라이브러리의 collapse(`collapsible`, `collapsedSize`). `aria-valuenow`가 0 |
+
+## 5. API
+
+라이브러리 props 그대로. export: `ResizablePanelGroup`(= `Group`), `ResizablePanel`(= `Panel`), `ResizableHandle`(= `Separator`).
+
+- `ResizablePanelGroup`: `orientation`, `defaultLayout`, `onLayoutChange`/`onLayoutChanged`, `groupRef`, `disabled`, `resizeTargetMinimumSize`, `id`. 저장(`useDefaultLayout`) 같은 persistence는 라이브러리에 있지만 HM이 래핑하거나 쓰지 않았다.
+- `ResizablePanel`: `defaultSize`, `minSize`, `maxSize`, `collapsible`, `collapsedSize`, `panelRef`, `onResize`, `id`.
+- `ResizableHandle`: `withHandle`(shadcn, grip 표시), `disabled`, `disableDoubleClick`, 그리고 div props(`aria-label` 등). `data-slot="resizable-handle"`, grip은 `resizable-handle-grip`.
+- 접근성(라이브러리): Separator는 `role="separator"`, `aria-orientation`, `aria-valuenow|min|max`(%), `aria-controls`(앞 panel id), `tabindex=0`. 키보드: 가로 배치는 ←/→(5% 단계), 세로 배치는 ↑/↓, Home/End는 최소/최대, collapsible이면 Enter가 접힘을 토글. 의미 있는 이름은 소비자가 `aria-label`로 준다.
+- Group에는 `role`이 붙지 않는다(라이브러리 구조). 이름은 `aria-label`을 소비자가 준다.
+
+## 6. Dependency
+
+- `react-resizable-panels` ^4.14.2 (`packages/ui`에 추가, shadcn Resizable의 기반). 사용: Resizable. CENTER 패키지에는 추가하지 않았다.
+
+## 7. Token
+
+Component Mapping 위치: `packages/ui/src/theme/resizable.css` (`--hm-resizable-*`).
+
+`divider-width|color`, `hover-color`, `active-color`, `focus-color`, `halo-width`, `grip-width|height|radius|background|border-color|icon-size|icon-color`, `disabled-opacity`. Semantic과 Primitive(`--hm-warm-neutral-pale`, `--hm-warm-neutral-mid`)만 참조하며 `--hm-separator-*`는 참조하지 않는다. 신규 Primitive와 Semantic 없음. 규칙은 `@layer components`에 있어 소비자 utility가 이긴다.
+
+## 8. 라이브러리에서 유지한 항목
+
+drag(pointer)와 최소/최대 clamp, collapsible, keyboard resize, double click 동작, layout callback, ARIA, 커서 처리, panel inline sizing.
+
+## 9. 소비자 확장성
+
+- Group 크기: `className`/`style`(Story는 frame의 `height`/`max-width`)로 정한다.
+- Divider/Grip 색과 크기: `--hm-resizable-*` token을 덮거나 `ResizableHandle className`의 utility를 쓴다.
+- Panel 내용과 최소 크기: 소비자가 `minSize`를 정한다(**`minSize` 없이 끌면 panel이 0까지 줄어들 수 있다.** Story는 모든 panel에 `minSize`를 둔다).
+
+## 10. Storybook
+
+- 대표 Story `All`("Resizable"): Horizontal(list min 15%), Vertical with grip, Horizontal with grip, Min/max(25%–60%), Collapsible panel을 한 페이지에 둔다. 프레임과 panel 내용은 Story 배치이며 Dashboard가 아니다.
+- verification: `Horizontal`, `Vertical`, `Min Max`.
+
+## 11. 사용자 확정 결정
+
+- 2026-10-03: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). Dashboard state, 저장, preset은 이후 Layout Pattern에서 조합한다(작업 지시).
+
+## 12. 미확정 / 보류
+
+- 수치(1px divider, 12×16 grip, hover/active 색)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- **모바일**: 390px에서 가로 분할은 사용 가능하다(panel 107/249px). 하지만 좁은 화면의 가로 분할은 정보 밀도에 부적합할 수 있어, 자동으로 세로로 바꾸는 responsive는 만들지 않았다. 모바일 layout 대체는 Dashboard/Layout 단계에서 검토한다.
+- 중첩 Group, 3개 이상 panel, Grid(`Grid`/`Cell`/`Gridline`, 2D)는 검증하지 않았다.
+- 레이아웃 저장(`useDefaultLayout`, localStorage)과 사용자 preference는 만들지 않았다.
+- 터치 기기에서의 pointer target(`resizeTargetMinimumSize.coarse`)은 라이브러리 기본이다.
+
+## 13. 관련 파일
+
+```
+packages/ui/src/components/ui/resizable.tsx
+packages/ui/src/theme/resizable.css
+packages/ui/package.json             (dependency: react-resizable-panels)
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/resizable.stories.tsx
+```
+
+## 14. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-03).
+- 실제 DOM(Browser pane): Separator `role=separator`, `aria-orientation`(가로 배치는 vertical, 세로 배치는 horizontal), `aria-valuenow`가 30 → 50.6(drag 후), `aria-valuemin`/`max`가 panel의 min/max를 반영(예: list min 15, 다른 panel min 20이면 max 80), `aria-controls`, `tabindex=0`, divider 1px `rgb(222,219,210)`.
+- pointer drag: divider를 오른쪽으로 끌어 30% → 50.6%(panel 282/275), 왼쪽으로 끝까지 끌어 min 15%(84px)에서 멈춤, 오른쪽 끝까지 끌면 다른 panel에 `minSize`가 없어 0까지 줄어듦(Story에 `minSize`를 추가하는 근거). 세로 분할은 아래로 drag해 40% → 67%.
+- keyboard: 가로에서 ArrowLeft가 5%씩 줄고, Home이 최소(15), End가 최대, 세로에서는 ArrowUp이 줄고 ArrowRight는 무시, collapsible에서 Home이 0으로 접고 Enter가 이전 크기(30%)로 복원. focus 시 divider와 halo가 `rgb(18,51,40)`.
+- 레이아웃: Group `flex`, panel 크기는 라이브러리 inline style, grip은 12×16px이고 쌓인 panel 사이에서 90° 회전.
+- Responsive(390×844): 모든 Group이 356px 안에 들어가고 페이지 가로 overflow 없음, 가로 분할 panel 107/249px.
+- 미확인: 터치 drag, 중첩/3개 이상 panel, hover 상태(`data-separator="hover"`)의 pointer 시각, 포인터 hit target의 정확한 범위(8px 밖은 잡히지 않음만 확인).
diff --git a/docs/components/scroll-area.md b/docs/components/scroll-area.md
new file mode 100644
index 0000000..5c2315c
--- /dev/null
+++ b/docs/components/scroll-area.md
@@ -0,0 +1,98 @@
+# Scroll Area
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Scroll Area 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Scroll Area (Radix `ScrollArea`) |
+| 대표 Story | `Components/Data & Display/Scroll Area` → `All` (이름 "Scroll Area") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Scroll Area가 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3. 현재 HM Primitive로 새로 정했다.
+- **구현 방식**: shadcn / Radix ScrollArea 구조를 유지. scroll 동작(wheel, touch, native keyboard, viewport 측정, thumb drag)은 Radix가 소유하고 scrollbar 모양만 정한다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Scrollbar | 두께 10px(`p-px`, 투명 border로 가장자리 여백), 트랙은 투명 |
+| Thumb | `--hm-sem-stroke-default`, hover/drag 중 `--hm-sem-fg-secondary`, radius 9999px |
+| 노출 | Radix 기본 `type="hover"`: 마우스가 올라가 있거나 scroll 중에만 scrollbar가 나타난다 |
+| Orientation | 세로는 기본, 가로는 `<ScrollBar orientation="horizontal" />`를 추가 |
+| Corner | Radix Corner |
+| 크기 | 없음. Root에 `className`/`style`로 높이·폭 지정(Story의 크기는 Story 배치) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Scrollbar visible / hidden | Radix `data-state="visible" | "hidden"` |
+| Thumb hover / active | 색이 한 단계 어두워짐 |
+| Viewport focus | shadcn ring(`focus-visible:ring-[3px] ring-ring/50`) 유지 |
+
+## 5. API
+
+Radix ScrollArea props 그대로. export: `ScrollArea`, `ScrollBar`.
+
+- `ScrollArea`: `type`(`hover` 기본 | `auto` | `always` | `scroll`), `scrollHideDelay`, `dir`. Viewport, 세로 ScrollBar, Corner를 내장한다.
+- `ScrollBar`: `orientation` `"vertical"`(기본) | `"horizontal"`. 가로 scroll이 필요하면 소비자가 직접 추가한다(shadcn 구조).
+- 출력 `data-slot="scroll-area|scroll-area-viewport|scroll-area-scrollbar|scroll-area-thumb"`, `data-orientation`.
+- 새 prop은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/scroll-area.css` (`--hm-scroll-area-*`).
+
+`scrollbar-size`, `thumb-background`, `thumb-hover-background`, `thumb-radius`. Semantic(`--hm-sem-stroke-default`, `--hm-sem-fg-secondary`)을 참조한다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·scroll 동작·scrollbar `type`, viewport의 focus ring, `touch-none select-none` scrollbar, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `bg-border` thumb과 scrollbar 두께 class(`w-2.5`/`h-2.5`)를 Token으로 이전, thumb 색을 베이지 배경에서 보이는 warm neutral로 지정.
+- 노출 방식은 변경하지 않았다(Radix 기본 hover).
+
+## 9. Storybook
+
+- 대표 Story `All`("Scroll Area"): Vertical, Horizontal, Both axes, Table-like content를 한 페이지에 둔다.
+- verification: `Vertical`, `Horizontal`.
+- 영역 크기는 Story 배치(`style`)이며 Scroll Area의 크기 API가 아니다.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 두께 10px, thumb 색, 항상 노출 vs hover 노출은 현재 HM 규격이며 디자인 확정 시 재검토(지금은 Radix 기본 hover).
+- 터치 기기에서는 Radix가 native scroll을 쓰지만 scrollbar 노출은 `type`에 따른다.
+- native 키보드 scroll: Viewport는 `tabindex=-1`이라 Tab 순서에 들어가지 않는다(shadcn 구조 그대로). 키보드 사용자를 위한 focus 가능 scroll 영역 정책(예: `tabIndex={0}`)은 사용처가 정해질 때 결정한다.
+- 가로 scroll이 필요한 경우 `ScrollBar orientation="horizontal"` 추가를 잊기 쉽다(shadcn 구조).
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/scroll-area.tsx
+packages/ui/src/theme/scroll-area.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/scroll-area.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): 마우스 wheel로 세로 scroll(`scrollTop` 0 → 300), thumb 위에서 아래로 drag해 `scrollTop` 300 → 456, 가로 wheel로 `scrollLeft` 0 → 300, 마우스를 올리면 scrollbar가 `data-state="visible"`로 나타나고 thumb 7×39, 색 `rgb(154,146,132)`, scrollbar 폭 10px.
+- 구조: 4개 Specimen에서 세로/가로/양방향 overflow가 각각 의도대로(세로만, 가로만, 둘 다) 생김. Viewport는 `focus()` 가능.
+- Responsive(390×844): 영역이 고정 크기(280×200 등)로 유지되고 페이지 가로 overflow 없음.
+- 미확인: 화살표 키 native scroll(도구의 합성 키 입력으로 확인되지 않음), 터치 scroll, 가로 scrollbar thumb drag, corner 시각.
diff --git a/docs/components/select.md b/docs/components/select.md
new file mode 100644
index 0000000..caa2bf7
--- /dev/null
+++ b/docs/components/select.md
@@ -0,0 +1,152 @@
+# Select
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Select 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | HM 스타일 적용 완료 (`hm-select-trigger` class 없음) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Select, Radix `Select` |
+| 대표 Story | `Components/Form/Select` → `All` (이름 "Select") |
+| 보류 | Item Disabled, 일반 Focus 두께 등 (§11) |
+
+## 2. 적용 근거
+
+- **ui_viz Confirmed**: size/높이(select.md §1.1 D-004, §8), 색·border(§10, §1.3, D-005, M06), indicator glyph(§7, 사용자 제공 Source), Trigger/Content 연결 윤곽(§8).
+- **ui_viz BASELINE_VALUE**: padding-x 12, gap 12, option 높이 42(§8, §17) — "현재 적용 계약"으로 표기된 값.
+- **HM 사용자 결정**: Trigger Disabled opacity `0.6`(2026-10-02, §10).
+- **shadcn/Radix 유지**: 구조·접근성·positioning(§7).
+- **HM 사용자 결정(2026-10-06)**: Error는 Destructive border, Keyboard Focus는 독립 Focus Semantic ring.
+
+## 3. 기본 규격
+
+| Size | 외곽 | Trigger 내부 높이 | Trigger 글자 |
+|---|---|---|---|
+| `medium` | 34 | 32 | 14 / 20 / 400 |
+| `large` (기본) | 44 | 42 | 16 / 24 / 400 |
+
+- 높이는 `min-height = 내부 높이 + 1px border × 2`.
+- Padding-x 12, gap 12, border 1px `--hm-sem-stroke-input-default`, radius `--hm-radius-input`, face `--hm-sem-bg-surface`.
+- Placeholder(`[data-placeholder]`): `--hm-sem-fg-placeholder`.
+- Trigger와 Value는 `min-width: 0`; 긴 placeholder/선택값은 한 줄 ellipsis로 줄고 18px indicator를 밀지 않는다. ui_viz 공개 Story에 없던 현재 HM 복원력 규칙이며 parity 판정 근거로 쓰지 않는다.
+- Icon: HM glyph, 18×18 `viewBox`, `M5 7 L9 11 L13 7`, stroke 1.50542, 색 `#2d2d2d`(`--hm-select-indicator-color`).
+- Content: Trigger와 같은 폭(`--radix-select-trigger-width`), border 1px focus 색, `bottom`일 때 아래쪽만 radius.
+- Option: Trigger의 size를 따른다. min-height 42(두 size 공통, ui_viz §8), padding-x 12, 글자 Medium 14/20/400(Medium Trigger와 동일) · Large 16/24/400, radius 0. ui_viz는 Medium Option 글자 Role을 TBD로 남겼고, 2026-10-06 Trigger 값에 맞추기로 했다(사용자 요청). 높이·폭은 size로 바꾸지 않는다(Content = Trigger 외곽 폭).
+- size 전달: `SelectTrigger size`가 유일한 지정처다. `Select`가 내부 context로 받아 Portal된 `SelectContent`의 `data-size`로 노출하고, `select.css`가 `[data-slot="select-content"][data-size]`로 Option profile을 정한다. `SelectContent`·`SelectItem`에는 size prop이 없다.
+
+## 4. 상태 규격
+
+| 상태 | 값 | 근거 |
+|---|---|---|
+| Default | 위 기본 규격 | ui_viz Confirmed |
+| Focus (`:focus`) | border 색 → `--hm-sem-stroke-input-focus`, 두께 1px 유지 | ui_viz Confirmed (1.5px 두께는 ui_viz FOLLOW_UP으로 보류) |
+| Open (`[data-state="open"]`) | border 색 → focus 색, 위쪽 모서리만 round(리스트와 이어짐) | ui_viz Confirmed |
+| Selected (Item `[data-state="checked"]`) | Hover와 같은 배경 면(`--hm-sem-surface-highlight`, Accent 45%), border·check icon 없음 | 표현: ui_viz Confirmed / 색: shadcn Token(`accent`) |
+| Highlighted (Item `focus:`/`data-highlighted`) | Accent 45%(`--hm-sem-surface-highlight`) | 위와 동일 |
+| Disabled (Trigger `:disabled`) | Default paint 유지, `opacity: 0.6`, `cursor: not-allowed` | opacity: 사용자 결정 |
+| Disabled (Item `data-disabled`) | shadcn 기본 `opacity-50`, 포인터 차단 | **미검증**(§11) |
+| Invalid (`aria-invalid="true"`) | border 1px `--hm-sem-action-destructive`, Error ring 없음 | 2026-10-06 사용자 결정 |
+| Invalid + Keyboard Focus (`:focus-visible`) | Destructive border 유지 + Focus Semantic 3px / 50% outer ring | 위와 동일 |
+| Invalid + Open | Trigger Destructive border, 연결 seam은 Neutral. Content의 기존 Surface / Focus outer border / Accent 45% Option 유지 | 위와 동일 |
+| Disabled Invalid | Destructive border + 기존 opacity 0.6, focus 불가 | 위와 동일 |
+
+## 5. API
+
+```
+SelectTrigger size:
+  "sm" | "default"
+  →
+  "medium" | "large"      기본 "large"
+
+SelectContent sideOffset:
+  shadcn 기본 4
+  →
+  기본 -1  (Trigger와 1px border를 공유)
+
+SelectItem:
+  children 앞의 ItemIndicator(check icon) 제거. children만 ItemText로 렌더.
+```
+
+- `Select`, `SelectValue`, `SelectGroup`, `SelectLabel`, `SelectSeparator`, 스크롤 버튼은 shadcn API 그대로.
+- 출력 속성: `data-slot="select-trigger"`, `data-size`. HM 전용 `error`/`open`/`focused` prop은 없다. 상태는 Radix 속성(`data-state`, `data-placeholder`, `data-highlighted`, `data-side`)과 `:disabled`로 적용한다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/select.css` (`--hm-select-*`).
+
+- 재사용한 공통 Semantic: `--hm-radius-input`(radius), `--hm-sem-bg-surface`, `--hm-sem-fg-primary`, `--hm-sem-fg-placeholder`, `--hm-sem-stroke-input-default`, `--hm-sem-stroke-input-focus`.
+- Select 전용 값: `--hm-select-control-height-{md,lg}`(32/42), `--hm-select-padding-x`, `--hm-select-gap`, `--hm-select-option-height`, `--hm-select-font-size-*`, `--hm-select-disabled-opacity`, `--hm-select-indicator-color`.
+- indicator는 `--hm-select-indicator-color` → `--hm-sem-palette-indicator`를 참조한다(Default `#2d2d2d`). 신규 Primitive 없음.
+- Input·Button과 값(42 등)이 겹쳐도 alias하지 않는다. 각 ui_viz 규격이 따로 확정한 값이다.
+- `--hm-select-disabled-opacity: 0.6`은 Select 전용 Component Token이며 Input의 Disabled와 공유하지 않는다.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix Root/Trigger/Portal/Content/Viewport/Item/ItemText 구조, 키보드 조작·typeahead·focus 관리, Portal, popper positioning(`position="popper"`, `align="start"`), 스크롤 버튼, 열림/닫힘 animation class, `data-slot`, `cn(..., className)`, Trigger의 native `aria-invalid` 전달, Item의 `data-disabled` 처리.
+
+## 8. HM에서 변경한 항목
+
+- Size API(`sm|default` → `medium|large`), 기본 `large`, `data-size`.
+- `sideOffset` 기본 `-1`, Content 폭을 Trigger 폭에 맞춤, Trigger/Content 연결형 윤곽.
+- chevron 아이콘을 HM glyph(inline SVG)로 교체.
+- Item check indicator 제거, Selected를 배경 면으로 표현.
+- shadcn Trigger의 높이·padding·border·focus ring class 제거 → theme CSS가 담당.
+- `hm-select-trigger` class 제거.
+- 변경하지 않음: 스크롤 버튼의 lucide chevron(ChevronUp/Down).
+
+## 9. Storybook
+
+- 대표 Story `All`("Select"): 구역 `default`(Large, size 생략), `selected`, `disabled`, `open`.
+- verification(`tags: ["verification"]`): `Default`, `Open`, `Selected`, `Disabled`, `Sizes`("Compare Sizes"), `Medium`, `Large`, `LongContent`, `Scroll`, `Playground`(HM 전용).
+- `Disabled` Story 구성: Trigger 비활성 상태들(placeholder 포함).
+- `InvalidFocus` verification Story: 앞/뒤 버튼 사이의 Invalid Trigger와 Disabled Invalid Trigger. Tab / Shift+Tab, Enter / Space, Escape 및 focus return을 실제 키보드로 확인한다.
+- `LongContent`와 `Scroll`은 ui_viz 공개 Story parity가 아니라 좁은 폭·긴 값·Radix scroll 회귀를 확인하는 HM 전용 Story다.
+- sidebar는 `All` 하나만 보이는 1뎁스. 운영 규칙은 지침 §6.3, §7 참조.
+
+## 10. 사용자 확정 결정
+
+**2026-10-02**
+
+- Select Trigger Disabled opacity `0.6` 확정(`select.css`의 `--hm-select-disabled-opacity`).
+- 같은 날 Input Disabled `0.6`도 확정되었다(input.md 참조). 현재 적용 범위는 Input / Select이며 전체 디자인 시스템 Disabled opacity로 자동 확대하지 않는다.
+- **Select Item의 Disabled opacity는 이 결정에 포함하지 않는다.** Trigger와 같은 규격이라고 판단하지 않는다.
+
+## 11. 미확정 / 보류
+
+- **Item Disabled**: 현재 shadcn 기본 `opacity-50`. 사용자 결정·ui_viz 근거 없음. 미검증.
+- **FOLLOW_UP(ui_viz)**: Focus/Open 상태의 border 1.5px 두께.
+- **ui_viz 미정의**: Group/Label/Separator 규격, 스크롤 버튼 규격, `item-aligned` position. Error 표현은 2026-10-06 HM 사용자 결정이 우선한다.
+- **BASELINE_VALUE**: padding-x 12, gap 12, option 42는 "현재 적용 계약"이며 별도 Confirmed 결정은 아니다.
+- Selected/Highlighted는 현재 공통 Accent 45% 정책을 쓴다. ui_viz Temporary 표기는 도입 당시 근거다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/select.tsx
+packages/ui/src/theme/select.css
+src/components/select.stories.tsx
+src/components/story-board.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-05: `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. 기존 generated CSS의 `bg-[var(...)]` 경고와 500kB chunk warning은 유지된다.
+- Storybook computed style: Medium/Large Trigger 34/44px, padding-x 12px, radius 4px, border 1px, Option 42px·16/24/400, Disabled Trigger opacity `0.6` 확인.
+- Open: Trigger와 Content 폭 동일, `sideOffset=-1` 접점, Focus/Open `#123328`, Content border/radius/shadow와 Portal listbox 확인.
+- Interaction: click open, ArrowUp/Down, Home/End, typeahead, Enter select, Escape, focus return, Disabled open 차단, 32개 Option의 wheel/keyboard scroll 확인.
+- Responsive: 1280/768/390px에서 popup clipping·문서 가로 overflow 없음. 390px의 280px Trigger에서 긴 placeholder/선택값 ellipsis와 indicator 비중첩 확인.
+- Story: `All`의 공개 구역 4개와 숨김 `LongContent`/`Scroll` verification Story 확인.
+- 미확인/보류: Item Disabled 시각, collision으로 `side="top"`이 된 연결 윤곽의 별도 디자인(원 ui_viz도 viewport edge flip TBD), 브라우저별 렌더 차이.
+
+
+### Invalid + Focus 검증 (2026-10-07)
+
+- Focus ring: `--ring` → `--hm-sem-stroke-input-focus` → `--hm-color-border-focus`. Invalid border: 기존 `--hm-sem-action-destructive`. 새 Runtime Role / Production Error prop / 메시지 컴포넌트 없음.
+- Chromium computed style: Invalid border `rgb(211, 47, 47)`, Invalid + Keyboard Focus box-shadow `color(srgb 0.14902 0.4 0.317647 / 0.5) 0px 0px 0px 3px`, `outline-style: none`. Invalid 단독은 `box-shadow: none`.
+- Theme Designer UI에서 Focus `#c75b00`, Destructive `#d41466`, Active `#007f73`, Accent `#ffd36d`로 분리. Invalid border `rgb(212, 20, 102)` + Focus shadow `color(srgb 0.780392 0.356863 0 / 0.5) 0px 0px 0px 3px` 확인.
+- `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. 기존 문서 예시 CSS warning 및 Storybook chunk 크기 / plugin timing warning 유지.
+- 검증 범위: Chromium 환경. 다른 브라우저의 렌더링은 별도 확인이 필요하다.
+- 숨김 `InvalidFocus`에서 Closed Invalid / Tab Focus / Invalid Open / 방향키 강조 / Disabled Invalid 확인. Invalid border computed 1px; Tab 전후 shadow none → 3px Focus ring. Tab은 Disabled를 건너뛰고, Shift+Tab으로 복귀. Enter / Space open, ArrowDown 이동, Escape close 및 Trigger focus return 확인.
+- Invalid + Open은 Trigger Destructive border와 Neutral seam `rgb(222, 219, 210)`을 동시에 유지. Popup white Surface, 외곽 `rgb(199, 91, 0)`(Focus), Selected / Highlighted `color(srgb 1 0.827451 0.427451 / 0.45)`(Accent) 확인. Popup에 Error 색 없음. 대표 `All` 회귀 확인.
diff --git a/docs/components/separator.md b/docs/components/separator.md
new file mode 100644
index 0000000..c5cd67f
--- /dev/null
+++ b/docs/components/separator.md
@@ -0,0 +1,79 @@
+# Separator
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Separator 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Separator (Radix `Separator`) |
+| 대표 Story | `Components/Data & Display/Separator` → `All` (이름 "Separator") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz에는 독립 Separator 규격이 없다(컴포넌트별 divider 값만 있다). 참고만 했다.
+- **현재 HM 규격**: §3~§4.
+- **구현 방식**: Radix Separator의 `orientation`과 `decorative`(기본 true, `role=none`) API를 유지하고 theme CSS로 두께·색을 연결.
+- **보류**: §11.
+
+## 3. 기본 규격
+
+| 항목 | 값 |
+|---|---|
+| Thickness | 1px (`--hm-separator-thickness`) |
+| Color | `--hm-separator-color` → Semantic `--hm-sem-stroke-input-default` (`#DEDBD2`) |
+| Horizontal | 높이 1px, 폭 100% |
+| Vertical | 폭 1px, `align-self: stretch`, `min-height: 1em` (flex row 안에서 사용) |
+
+## 4. 상태 규격
+
+상태 없음. `decorative`(기본 true)는 `role="none"`, `decorative={false}`는 `role="separator"`.
+
+## 5. API
+
+Radix Separator props 그대로 (`orientation`: `"horizontal"` 기본 / `"vertical"`, `decorative`: 기본 true). 출력 속성: `data-slot="separator"`, `data-orientation`.
+
+## 6. Token
+
+`packages/ui/src/theme/separator.css`: `--hm-separator-thickness`, `--hm-separator-color`. 현재 공통 `--hm-sem-stroke-input-default`를 참조한다. Component Token은 독립적으로 유지한다.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 접근성(`decorative`, `aria-orientation`), `data-slot`, `cn(..., className)`, `shrink-0`.
+
+## 8. HM에서 변경한 항목
+
+shadcn의 `bg-border`, `h-px`/`w-px` class를 제거하고 theme CSS가 두께·색을 담당.
+
+## 9. Storybook
+
+대표 Story `All`: `horizontal`, `vertical`, `semantic`(decorative=false). verification: `Horizontal`, `Vertical`.
+
+## 10. 사용자 확정 결정
+
+2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 이 컴포넌트에 대한 개별 수치 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 구분선 전용 Semantic(`stroke.divider` 등) 도입: 미결정. 현재 공통 stroke Semantic과 구분할 필요가 생기면 재검토.
+- 텍스트가 들어간 구분선("or"), 두께 변형: 없음.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/separator.tsx
+packages/ui/src/theme/separator.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Separator)
+src/components/separator.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- computed style: horizontal 높이 1px·폭 100%, vertical 폭 1px·높이 24px(flex row stretch), 색 `rgb(222,219,210)`.
+- a11y: 기본 `role=none`, `decorative={false}`이면 `role=separator` 확인.
+- 미확인: 사이드바 화면.
diff --git a/docs/components/sheet.md b/docs/components/sheet.md
new file mode 100644
index 0000000..939eca4
--- /dev/null
+++ b/docs/components/sheet.md
@@ -0,0 +1,108 @@
+# Sheet
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Sheet 고유의 API·Token·상태·결정만 기록한다. Dialog 문서(`dialog.md`)와 값을 공유하지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Sheet (Radix `Dialog`) |
+| 대표 Story | `Components/Overlay/Sheet` → `All` (이름 "Sheet") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Sheet가 없다(Dialog 문서가 "side sheet"를 범위 밖으로 둠). 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. Dialog에서 검증한 접근성 원칙(Radix modal, `asChild` 처리)은 재사용하고, 면·윤곽·그림자 등 수치는 현재 HM Semantic으로 새로 정했다. `--hm-dialog-*`를 참조하지 않는다.
+- **구현 방식**: shadcn / Radix Dialog 기반 Sheet 구조와 `side` API 유지, theme CSS로 HM 스타일 연결.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Surface / 전경 | `--hm-sem-bg-surface` / `--hm-sem-fg-primary` |
+| Border | 1px `--hm-sem-stroke-input-default`, 페이지를 향한 한 변에만 |
+| Shadow | `0 0 12px rgb(0 0 0 / .2)` |
+| Radius | 없음(viewport edge에 붙음) |
+| left / right | 폭 `min(400px, 100vw − 48px)`, 높이 100% |
+| top / bottom | 폭 100%, 높이 내용 기준, 최대 `100dvh − 48px` |
+| Padding | 24px (Header·Footer·Body 좌우) |
+| Header | padding `24 (24+36) 16 24` (오른쪽은 Close 버튼 자리), Title↔Description gap 8px |
+| Title | 20 / 28 / 700 |
+| Description | 14 / 20 / 400, `--hm-sem-fg-secondary` |
+| Body | 14 / 20 / 400, 좌우 padding 24px, 유일한 scroll 영역 |
+| Footer | padding `16 24 24`, gap 8px, 오른쪽 정렬(좁은 화면은 세로, shadcn `flex-col-reverse sm:flex-row`) |
+| Close(X) | shadcn 기본(ghost `icon-sm`, 오른쪽 위 12px, sr-only "Close") |
+| Overlay / animation | shadcn 기본(`bg-black/10` + blur, side별 slide) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Closed / Open | Radix `data-state`, 열림 시 modal, 배경 aria-hidden, scroll lock |
+| Focus | 열릴 때 Radix 기본(첫 tabbable), 닫힐 때 trigger로 복귀 |
+| Long Content | Header·Footer 고정, Body만 세로 scroll |
+| Form | 소비 조합(Body 안 Label + Input) |
+
+## 5. API
+
+Radix Dialog props 그대로. export: `Sheet`, `SheetTrigger`, `SheetClose`, `SheetPortal`, `SheetOverlay`, `SheetContent`, `SheetHeader`, `SheetBody`, `SheetFooter`, `SheetTitle`, `SheetDescription`.
+
+- `SheetContent`: `side` `"top" | "right" | "bottom" | "left"` (기본 `right`, shadcn API 유지), `showCloseButton`(기본 true). 출력 `data-side`.
+- `SheetBody`(신규): scroll owner. 없어도 동작하지만 이 경우 Body padding과 내부 scroll이 없다.
+- `SheetClose`: `asChild`일 때 자식의 `data-slot`을 유지(DialogClose와 같은 규칙, Button HM 스타일 보존).
+- 새 prop(`size`, `variant`)은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/sheet.css` (`--hm-sheet-*`).
+
+`background`, `text`, `border-width`, `border-color`, `shadow`, `width`, `edge-gap`, `padding`, `header-gap`, `footer-gap`, `close-clearance`, `title-*`, `description-*`, `body-font-size`, `body-line-height`. Semantic과 Theme palette(`--hm-sem-stroke-input-default`)만 참조한다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`role=dialog`, `aria-labelledby/describedby`)·focus trap·initial focus·focus 복귀·Escape·바깥 클릭 닫힘·scroll lock, Portal·Overlay, position(`inset-*`)·side별 slide animation class, `data-slot`, `cn(..., className)`, Close 버튼.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `bg-popover text-popover-foreground shadow-lg gap-4 border-*`, side별 `w-3/4 sm:max-w-sm`·`h-auto`, Header/Footer `p-4` 제거 → theme CSS.
+- `SheetBody` 추가(scroll owner), `SheetClose asChild` data-slot 처리.
+- 폭을 `min(400px, 100vw − 48px)`로 지정(좁은 화면에서 Overlay 띠 48px 유지).
+
+## 9. Storybook
+
+- 대표 Story `All`("Sheet"): 트리거 6개(right, left, top, bottom, 폼, 긴 내용)가 각각 실제 Sheet를 연다.
+- verification: `Right`, `Left`, `Top`, `Bottom`, `Form`, `Long Content`(처음부터 열림).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(400px 폭, 24px padding, 그림자, 48px edge gap)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Overlay 색·blur, Motion은 정해진 규칙이 없어 shadcn 기본 유지.
+- Header/Footer divider 없음(미정의). Close 버튼 규격은 shadcn 기본.
+- top/bottom side 사용처는 Drawer와 겹친다. 둘의 역할 경계(Drawer = 드래그로 닫는 하단 panel)는 사용 가이드로 정리 예정.
+- 소비 화면이 쓰는 공통 header/footer 높이 대응은 없음.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/sheet.tsx
+packages/ui/src/theme/sheet.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/sheet.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): 클릭 열기(focus가 "취소"로 이동, `role=dialog`), Escape 닫힘과 trigger focus 복귀, 바깥(Overlay) 클릭 닫힘과 focus 복귀, X 닫기, 네 방향 위치(right 우측 400px, left 좌측 0, top/bottom 전체 폭), 긴 내용에서 Body만 scroll하고 Footer가 화면 안.
+- 390×844: right Sheet 폭 342px(left 82px), 가로 overflow 없음.
+- computed style: white, border-left `rgb(222,219,210)`, shadow `0 0 12px .2`.
+- 미확인: focus trap의 Tab 순환(코드 경로는 Radix 기본), side별 닫힘 animation 시각, top/bottom의 모바일 높이 한계.
diff --git a/docs/components/skeleton.md b/docs/components/skeleton.md
new file mode 100644
index 0000000..b15b199
--- /dev/null
+++ b/docs/components/skeleton.md
@@ -0,0 +1,89 @@
+# Skeleton
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Skeleton 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Skeleton (`div` + `animate-pulse`, Radix 없음) |
+| 대표 Story | `Components/Data & Display/Skeleton` → `All` (이름 "Skeleton") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Skeleton이 컴포넌트 이름으로만 있고 규격은 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3. 현재 HM Primitive로 새로 정했다.
+- **구현 방식**: shadcn Skeleton을 유지. loading 로직이 없는 시각 placeholder primitive이며 크기·모양은 `className`으로 정한다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| 배경 | `--hm-sem-palette-warm-neutral-light` |
+| Radius | `--hm-radius-control-md` (4px). 원형은 `className="rounded-full"` |
+| Animation | shadcn `animate-pulse`(2s). `prefers-reduced-motion: reduce`에서는 animation 없음 |
+| 크기 | 없음. `className`으로 `h-*`, `w-*`, `size-*` 지정 |
+
+## 4. 상태 규격
+
+상태 없음(placeholder). 배경과 radius는 `@layer components`에 있어 `className`의 utility(`rounded-full`, `bg-*`)가 이긴다. 다른 컴포넌트의 theme CSS(레이어 없음)와 달리 Skeleton은 모양을 소비자가 정하는 것이 역할이기 때문이다.
+
+## 5. API
+
+export: `Skeleton`. `div` props 그대로. 출력 `data-slot="skeleton"`.
+
+- `width`/`height`/`variant` prop은 만들지 않았다. Text line, Avatar, Card 등은 Story처럼 `className`으로 조합한다.
+- 접근성: placeholder 자체에는 ARIA를 두지 않는다. loading 영역의 `aria-busy` 등은 소비자 책임.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/skeleton.css` (`--hm-skeleton-*`).
+
+`background`, `radius`. Theme palette(`--hm-sem-palette-warm-neutral-light`)와 공통 control radius만 참조한다. 신규 Primitive 없음.
+
+## 7. shadcn에서 유지한 항목
+
+`div` 구조, `animate-pulse`, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `bg-muted rounded-md`(또는 `bg-accent`) class를 제거하고 Token으로 연결(배경 `--hm-warm-neutral-light`, radius 4px).
+- reduced-motion에서 pulse를 끈다(shadcn 기본에는 대응이 없다). 새 Motion token은 만들지 않았다.
+- 배경·radius 규칙을 `@layer components`에 둔 것은 이 컴포넌트만의 결정이다(§4).
+
+## 9. Storybook
+
+- 대표 Story `All`("Skeleton"): Text(3줄), Avatar + text, Card/list loading(Card 안 조합)을 한 페이지에 둔다. 데이터 fetch는 없다.
+- verification: `Text`, `Card List`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 배경색과 radius는 현재 HM 규격이며 디자인 확정 시 재검토.
+- Pulse 속도·형태(shimmer 등)는 Motion 규칙이 정해질 때 다룬다.
+- Text line 높이 등 사전 정의된 크기 preset은 만들지 않았다.
+- 전체 loading 영역의 ARIA(`aria-busy`, live region) 가이드는 Data Table Pattern 등 조합 단계에서 정한다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/skeleton.tsx
+packages/ui/src/theme/skeleton.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/skeleton.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 렌더(Browser pane): 배경 `rgb(224,218,206)`, radius 4px, animation `pulse 2s`. `className="size-10 rounded-full"`이 radius override를 받아 원형으로 표시(처음에는 unlayered CSS가 `rounded-full`을 덮는 문제가 있어 `@layer components`로 수정).
+- Responsive(390×844): Text, Avatar+text, Card 구성이 부모 폭 안에 들어가고 가로 overflow 없음.
+- 미확인: 실제 `prefers-reduced-motion` 환경에서의 animation 정지(CSS만 작성).
diff --git a/docs/components/slider.md b/docs/components/slider.md
new file mode 100644
index 0000000..804a2b7
--- /dev/null
+++ b/docs/components/slider.md
@@ -0,0 +1,116 @@
+# Slider
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Slider 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-06 |
+| 기반 | shadcn/ui Slider (Radix `Slider`) |
+| 대표 Story | `Components/Form/Slider` → `All` (이름 "Slider") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Slider가 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다.
+- **구현 방식**: shadcn / Radix Slider 구조(Root, Track, Range, Thumb)를 유지하고 theme CSS로 연결. Slider는 값 입력 컨트롤이며 Toggle/Button 계열과 역할이 다르다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Track | 두께 6px, radius 9999px, 배경 `--hm-sem-palette-warm-neutral-light` |
+| Range | `--hm-sem-state-active` |
+| Thumb | 18px 원, 배경 `--hm-sem-bg-surface`, 2px `--hm-sem-state-active` border |
+| Thumb halo | Hover 4px / Drag(`:active`) 6px Primary 20% 후광. 키보드 Focus는 같은 크기의 Focus Semantic 20% 후광, 커서 grab/grabbing 유지 |
+| 폭/높이 | Root에 `className`. 기본은 부모 폭 100%, vertical은 높이 100%·최소 176px(shadcn 기본) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Default | 후광 없음, 커서 grab |
+| Hover | 4px `--hm-sem-action-primary` 20% 후광 |
+| Focus (`:focus-visible`) | 4px `--hm-sem-stroke-input-focus` 20% 후광 |
+| Drag (`:active`) | 6px Primary 20% 후광, 커서 grabbing |
+| Focus + Hover | Focus 색 우선, 4px Focus 20% 후광 |
+| Focus + Drag | Focus 색 우선, Drag의 6px 크기와 grabbing 커서 유지 |
+| Disabled (`data-disabled`) | Root `opacity: 0.6`(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), 후광 없음, 커서 not-allowed, thumb이 focus를 받지 않음 |
+| Orientation | `data-orientation` horizontal / vertical |
+
+우선순위: Disabled > Focus 색 > Hover/Drag interaction 색. Drag는 halo 크기만 6px로 확대한다. Radix의 pointer focus 정책은 유지한다(pointer로 thumb을 잡으면 `focusVisible: false`로 focus하므로 일반 pointer drag는 Primary halo). Focus + Drag 규칙은 실제로 `:focus-visible`과 `:active`가 겹칠 때 적용하며, interaction 규칙이 Focus 표시를 덮지 않는다.
+
+## 5. API
+
+Radix Slider props 그대로. export: `Slider`.
+
+- `value`/`defaultValue`/`onValueChange`/`onValueCommit`, `min`/`max`/`step`, `minStepsBetweenThumbs`, `orientation`, `dir`, `inverted`, `disabled`, `name`.
+- 값이 배열이면 항목 수만큼 thumb을 렌더한다(두 개면 range). Range용 별도 컴포넌트는 없다.
+- `value`와 `defaultValue`를 모두 생략하면 초기값은 `[min]`이고 thumb은 하나다(`min` 기본값 0). 숨겨진 추가 thumb이나 빈 FormData 항목을 만들지 않는다.
+- Uncontrolled의 `defaultValue`는 마운트 시 초기값이다. 이후 `defaultValue` 배열이나 항목 수를 바꿔도 내부 값과 thumb 수는 초기 배열을 유지한다. 초기화가 필요하면 새 `key`로 재마운트하고, 동적 값 변경에는 Controlled `value`를 사용한다. Controlled/Uncontrolled 모드는 컴포넌트 수명 동안 유지한다.
+- Form 안에서 `name`을 지정하면 Enabled Slider는 현재 값을 제출한다(단일값은 `name`, 범위값은 `name[]`으로 여러 항목). `form="id"`로 외부 Form을 연결할 수도 있다.
+- Disabled Slider는 FormData와 native Form Submit에서 제외한다. 설치된 Radix Slider 1.4.7의 내부 input에 `disabled`가 전달되지 않아 HM은 disabled일 때 Radix에 넘기는 `name`을 생략한다. 다시 Enabled로 바꾸면 기존 `name`으로 현재 값 제출을 재개한다. Controlled/Uncontrolled에 동일하게 적용하며 값·callback·키보드·ARIA 계약은 유지한다.
+- **`aria-label`**: `role="slider"`는 Root가 아니라 Thumb이므로 Slider가 `aria-label`을 모든 thumb에 전달한다(thumb이 둘 이상이면 `"label 1/2"`, `"label 2/2"`). `aria-label`이 없으면 Radix 기본 thumb 이름(Minimum/Maximum)이 남는다.
+- `variant`, `status`, `appearance` 같은 prop은 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/slider.css` (`--hm-slider-*`).
+
+`track-size`, `track-background`, `range-background`, `thumb-size`, `thumb-background`, `thumb-border-width|color`, `thumb-halo-color|size|size-active`, `thumb-focus-halo-color`, `disabled-opacity`. Interaction halo는 Primary, Focus halo는 기존 Focus Semantic을 참조한다. 다른 컴포넌트 Token을 쓰지 않는다. 신규 Primitive 없음. Track/Range/Thumb은 내부 부품이라 theme CSS(레이어 밖)로 정하고, Slider Root의 폭·높이는 `className` 영역이다.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·동작(pointer drag, track 클릭 이동, 키보드, thumb 정렬/교차 방지), ARIA(`role=slider`, `aria-valuemin|max|now`, `aria-orientation`), 배열 value에서 thumb 수를 계산하는 shadcn 로직, `touch-none select-none`, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `bg-muted`, `h-1`, `bg-primary`, thumb `size-3 border-ring ring-*` class를 제거하고 Token으로 이전. thumb을 12px에서 18px로 키웠다.
+- `aria-label`을 thumb으로 전달(shadcn은 Root에만 붙어 thumb에 이름이 없었다).
+
+## 9. Storybook
+
+- 대표 Story `All`("Slider"): Single(값 label), Range(두 thumb, `minStepsBetweenThumbs` 5), Step(25), Disabled, Vertical을 한 페이지에 둔다. 값 label은 Story 조합(local state)이다.
+- verification: `Single`, `Range`, `Disabled`, `Focus`(실제 thumb focus). 기본 Sidebar에서 숨긴다.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(6px track, 18px thumb, halo 4/6px)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- 값 tooltip/label 표시, tick mark, 범위 밖 구간 표현은 정의하지 않았다.
+- 상태색 range(예: 경고)는 HM 상태색 확정 후.
+- hit area: thumb 18px이 터치 타깃(44px 권장)보다 작다. 터치 기기 정책은 미정.
+- 대표 Story의 form 예시는 만들지 않았다. 기본값 및 Enabled/Disabled 제출 계약은 §5를 따른다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/slider.tsx
+packages/ui/src/theme/slider.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/slider.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-08 기능 개선: 프로젝트 외부 UI 복사본에서 타입 검사와 패키지 빌드 통과. 실제 프로젝트 Slider 소스와 복사본의 SHA-256이 일치하며, 브라우저는 해당 패키지 빌드 결과를 사용했다.
+- 브라우저 Form 검증: 기본값 생략/`min=10`은 thumb 하나·정상 `aria-valuenow`·빈 제출 항목 없음. 명시적 단일/범위, Controlled 값·배열 길이 변경, Uncontrolled `defaultValue` 배열 길이 변경 시 초기 thumb 수 유지 확인. Controlled/Uncontrolled 단일·범위의 Disabled → Enabled → Disabled 전환에서 FormData와 실제 native POST 제출 결과 정상. 키보드·callback·ARIA와 외부 `form` 연결의 FormData 확인.
+- 디자인 보존: Slider CSS·Theme JSON·대표 Story 변경 없음. 수정 전후 computed style에서 thumb 18px/2px border, track 6px, Disabled opacity 0.6, Hover/Focus 4px 후광 일치. 검증 예제와 POST 수집 서버는 외부 임시 환경에서만 실행했다.
+- 2026-10-06 Focus 정합: `typecheck`, `build`, `build-storybook`, `git diff --check` 통과. 기존 문서 예시 CSS(`bg-[var(...)]`)와 Storybook chunk 크기 경고 유지.
+- Theme Designer에서 Primary `#6837a8`, Active `#007f73`, Focus `#c75b00`, Accent `#ffd36d`를 분리 적용한 뒤 **일반 verification Story**의 computed style로 확인: Range·Thumb border `rgb(0,127,115)`, Hover/Drag는 Primary 20% / 4·6px, Focus/Focus + Hover는 Focus 20% / 4px, Focus + Drag는 Focus 20% / 6px, Default/Disabled는 shadow 없음. Hover/Drag 중첩은 기존 Storybook pseudo-state mirror로 고정하고 Focus는 실제 DOM focus다.
+- 각 역할을 단독 override해도 Primary는 interaction halo, Active는 Range·Thumb border, Focus는 Focus halo만 변경하며 Accent는 Slider에 영향 없음. 실제 ArrowRight로 값·ARIA·label 40 → 41 확인. Focus Semantic 이름·값·Runtime/JSON 계약 변경 없음.
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 DOM(Browser pane): thumb `role="slider"`, `aria-valuemin=0`, `aria-valuemax=100`, `aria-valuenow`가 실제 값과 일치, vertical은 `aria-orientation=vertical`, disabled thumb은 focus 불가. `aria-label`이 단일 thumb에 `볼륨`, range에 `가격 범위 1/2`·`2/2`로 반영됨.
+- keyboard: ArrowRight 40 → 41, ArrowLeft → 40, End 100, Home 0, step 25에서 ArrowRight 50 → 75, vertical ArrowUp 30 → 31. 값 label과 ARIA가 함께 변함.
+- pointer: thumb을 오른쪽으로 drag해 40 → 79(range 폭 382/484), track 클릭으로 23, 왼쪽 경계 밖으로 drag해 0에 고정. Range에서 첫 thumb을 두 번째 thumb 너머로 drag해도 값이 정렬 상태(75, 100)로 유지됨.
+- computed style: track 6px `rgb(224,218,206)`, range `rgb(18,51,40)`, thumb 18px·2px border·흰 면, disabled Root opacity 0.6.
+- Responsive(390×844): Slider 폭 358px(좌우 16px), thumb이 잘리지 않고 페이지 가로 overflow 없음.
+- 미확인: PageUp/PageDown, 터치 drag, `inverted`/RTL, thumb halo의 시각(hover/active 상태 pointer 시각).
diff --git a/docs/components/sonner.md b/docs/components/sonner.md
new file mode 100644
index 0000000..8142f7b
--- /dev/null
+++ b/docs/components/sonner.md
@@ -0,0 +1,120 @@
+# Sonner (Toast)
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Toast 고유의 API·Token·상태·결정만 기록한다. public export가 `Toaster` / `toast`이고 shadcn 컴포넌트명이 Sonner이므로 문서명은 `sonner.md`로 하며 `toast.md`는 만들지 않는다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-03 |
+| 기반 | shadcn/ui Sonner (`sonner` 2.0.8) |
+| 대표 Story | `Components/Feedback/Sonner` → `All` (이름 "Toast") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz에는 Toast 규격이 없고 `color.status.success|warning|information`은 TBD다. 새 Status Palette를 만들지 않았다.
+- **현재 HM 규격**: surface·text·radius·shadow는 현재 HM Semantic(surface, fg, stroke, destructive)에서 정했다.
+- **구현 방식**: Sonner가 queue·stack·timeout·hover pause·swipe·promise·`aria-live`를 소유한다. 오래된 Radix Toast는 만들지 않는다(Toast는 Sonner 하나).
+
+## 3. Alert / Dialog와 차이
+
+| | 성격 | 닫힘 | focus |
+|---|---|---|---|
+| Alert | 화면 안에 지속적으로 존재하는 in-page feedback | 사용자가 처리하거나 화면이 바뀔 때까지 | 흐름을 막지 않음 |
+| Toast | 일시적인 global notification (저장 완료, 오류, 비동기 진행) | timeout 또는 닫기 / action | 흐름을 막지 않음 |
+| Alert Dialog | 사용자의 응답이 필요한 modal 확인 | 응답으로만 | focus trap |
+
+Toast는 anchored floating panel이 아니라 notification surface이므로 Floating Surface Semantic(`--hm-sem-floating-*`)을 쓰지 않고 `--hm-toast-*`를 별도로 둔다.
+
+## 4. 기본 규격 / 상태 규격
+
+| 항목 | 값 |
+|---|---|
+| Width | 356px (Sonner 기본 유지), 좁은 화면(≤600px)은 Sonner가 좌우 16px offset으로 줄임 |
+| Surface | `--hm-sem-bg-surface`, 1px `--hm-sem-stroke-input-default`, radius `--hm-radius-container`(4px), 그림자 `0 0 12px rgb(0 0 0 / .2)` |
+| Padding / gap | 16px / 12px |
+| Title | 14 / 20 / 500, Description 13 / 18 / 400 `--hm-sem-fg-secondary` |
+| Icon | 16px, shadcn(lucide) `CircleCheck`·`Info`·`TriangleAlert`·`OctagonX`·`LoaderCircle(spin)` |
+| Default / Success / Info / Warning / Loading | 중립 면. 의미는 icon과 문구가 전달한다 |
+| Error (`data-type="error"`) | 윤곽·icon·title `--hm-sem-action-destructive` (Alert destructive와 같은 방침) |
+| Action | 높이 28px, radius 4px, 12/500, `--hm-sem-action-primary` 면 + `--hm-sem-on-action-primary` 글자 |
+| Cancel | `--hm-sem-bg-subtle` 면 + `--hm-sem-fg-secondary` 글자 |
+| Close button | Sonner `closeButton` 옵션. 면·윤곽은 Toast와 같고 글자 `--hm-sem-fg-secondary` |
+
+Action은 HM `Button`을 넣지 않고 Sonner의 `action` / `cancel` 버튼을 Toast 전용 token으로 스타일한다(Button token 상속 없음).
+
+## 5. API
+
+```tsx
+import { Toaster, toast } from "@hm-design/ui"
+// 앱 root에 한 번:  <Toaster />
+toast("저장했습니다")
+toast.success("..."); toast.error("..."); toast.warning("..."); toast.info("..."); toast.loading("...")
+toast.promise(promise, { loading, success, error })
+toast("삭제했습니다", { action: { label: "실행 취소", onClick }, cancel: { label, onClick }, closeButton: true, duration })
+toast.dismiss()
+```
+
+- `Toaster`는 Sonner `Toaster`에 shadcn icon set만 주입한 것이다. `position`, `closeButton`, `expand`, `richColors`, `duration`, `offset` 등 Sonner props를 그대로 받는다. HM 전용 prop과 position system은 없다.
+- `toast`는 `sonner`의 `toast`를 re-export한다. 소비자는 `sonner`를 직접 import하거나 설치할 필요가 없다. 타입 `ToasterProps`, `ExternalToast`도 export한다.
+- Light/Dark 전환(`next-themes`)은 쓰지 않는다. `theme`은 Sonner 기본값이다.
+- `richColors`를 켜면 Sonner의 자체 상태 색이 적용되어 HM 규격 밖이 되므로 쓰지 않는다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/sonner.css` (`--hm-toast-*`).
+
+`width`, `background`, `text`, `border-width`, `border-color`, `radius`, `shadow`, `padding`, `gap`, `font-family`, `title-*`, `description-*`, `icon-size`, `icon-color`, `error-border-color`, `error-text`, `action-*`, `cancel-*`, `close-*`. Semantic 또는 Theme palette만 참조한다. 신규 Primitive·Semantic 없음.
+
+Sonner 변수(`--width`, `--border-radius`, `--normal-bg|border|text`)는 `[data-sonner-toaster]`에서 이 token으로 연결한다. 상태 hook은 Sonner의 자체 속성(`[data-sonner-toast]`, `[data-type]`, `[data-button]`, `[data-cancel]`, `[data-close-button]`)이다. Sonner CSS가 런타임에 주입되므로 selector에 속성을 겹쳐 specificity를 확보했다.
+
+**Notification Semantic 후보(미승격)**: Toast 표면 값이 Floating surface와 현재 같지만 역할이 달라 별도 Semantic으로 승격하지 않았다. Status(success·warning·information) 색이 확정되면 `--hm-sem-status-*` 후보와 함께 검토한다.
+
+## 7. shadcn / Sonner에서 유지한 항목
+
+queue·stack·expand·hover pause·swipe·timeout·promise lifecycle, `section[aria-live="polite"]`(label `Notifications alt+T`, `aria-relevant`), 단축키(Alt+T로 focus), toast의 `tabindex=0`, 기본 position(`bottom-right`), 모바일 offset·폭 처리, shadcn icon set.
+
+## 8. HM에서 변경한 항목
+
+- shadcn Sonner의 `next-themes`·`--popover` 계열 inline style을 제거하고 theme CSS로 대체.
+- Sonner 기본 font(`ui-sans-serif`)를 HM font family로, 기본 radius 8px를 4px로 변경.
+- action 버튼의 Sonner 기본 반전색(`--normal-bg`/`--normal-text`)을 HM primary로 변경.
+
+## 9. Storybook
+
+- 대표 Story `All`("Sonner"): 버튼으로 실제 Toast를 생성한다 — Types(Default·Success·Error·Warning·Info·Loading), Action / Action + Cancel / Close button, Promise(→ Success / → Error, 로컬 timeout), Stack ×3 / Long message / Dismiss all.
+- `Toaster`는 `.storybook/preview.tsx`에 한 번만 둔다(Story별 중복 없음). 정적 Toast specimen은 없다.
+- Root Demo에는 추가하지 않았다(필수 아님).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-03: Toast는 Sonner 하나로 통일한다(Radix Toast 미사용). Floating Semantic과 분리된 Notification UI로 설계한다. 새 Status Palette를 임의로 만들지 않는다(작업 지시).
+
+## 11. 미확정 / 보류
+
+- Success / Warning / Info의 상태 색은 ui-viz에서 TBD라 중립 면으로 두었다. 확정되면 `--hm-toast-<status>-*`를 추가한다.
+- 수치(356px, 16px padding, 28px action 등)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- 한국어 문장이 좁은 폭에서 어절 중간에서 줄바꿈될 수 있다(Sonner 기본 `word-break`). 규격이 정해지면 `keep-all` 검토.
+- `position` 비교, 키보드 focus 이동(Alt+T → Tab), 스크린 리더 낭독, swipe 닫기는 확인하지 못했다.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/sonner.tsx
+packages/ui/src/theme/sonner.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+packages/ui/package.json             (dependency: sonner)
+.storybook/preview.tsx               (Toaster 1회)
+src/components/sonner.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-03).
+- 실제 interaction(Browser pane): Default·Success·Error·Warning·Info·Loading 생성, Stack ×3(겹침과 hover 펼침), Action + Cancel 표시와 Action 클릭 시 닫힘, Close button 표시, Dismiss all, Promise → Error(loading → error 전환, 윤곽·icon·title destructive), timeout 자동 닫힘.
+- DOM: `section[aria-live=polite][aria-relevant="additions text"]`, label `Notifications alt+T`, toast `tabindex=0`.
+- computed style: surface white, border `rgb(222,219,210)`, radius 4px, shadow `0 0 12px .2`, width 356px, padding 16px, title 14px, action `rgb(18,51,40)`·28px.
+- 390px: 폭 358px(좌우 16px), 가로 스크롤 없음, 긴 title·description·action·close button 모두 폭 안에서 줄바꿈.
diff --git a/docs/components/switch.md b/docs/components/switch.md
new file mode 100644
index 0000000..26c7e22
--- /dev/null
+++ b/docs/components/switch.md
@@ -0,0 +1,86 @@
+# Switch
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Switch 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Switch (Radix `Switch`) |
+| 대표 Story | `Components/Form/Switch` → `All` (이름 "Switch") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz 기존 테스트 규격에는 Switch 규격이 없다(후보 목록뿐). 참고할 수치가 없어 현재 HM Semantic으로 새로 정했다.
+- **현재 HM 규격**: §3~§4.
+- **구현 방식**: Radix Switch(`role=switch`, `data-state`, Space/Enter, 폼 동작)와 shadcn의 transition(`transition-all`, 썸 `transition-transform`)을 유지하고 theme CSS로 HM 스타일을 연결. 새 motion은 정의하지 않았다.
+- **보류**: §11.
+
+## 3. 기본 규격
+
+| 항목 | 값 |
+|---|---|
+| Track | 36 × 20px, pill radius |
+| Thumb | 16px 원, `--hm-sem-bg-surface`, 좌우 offset 2px (On: translate `36 − 16 − 2`) |
+| Off 색 | track `--hm-sem-stroke-default` |
+| On 색 | track `--hm-sem-state-active` |
+| Label | `<Label htmlFor>` 조합 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Off / On | 위 기본 규격 (`data-state="unchecked"` / `"checked"`) |
+| Hover | Black 20% overlay (`--hm-color-action-overlay-hover`) |
+| Focus (`:focus-visible`) | shadcn ring 유지 |
+| Disabled | `opacity: 0.6`, `cursor: not-allowed` |
+
+## 5. API
+
+Radix Switch props 그대로 (`checked`/`defaultChecked`/`onCheckedChange`, `disabled`, `required`, `name`, `value`). 추가 prop 없음. 출력 속성: `data-slot="switch"`, `"switch-thumb"`, Radix `data-state`.
+
+## 6. Token
+
+`packages/ui/src/theme/switch.css` (`--hm-switch-*`): `width`, `height`, `thumb-size`, `thumb-offset`, `off-background`, `on-background`, `thumb-color`, `hover-overlay`. Semantic 참조. Primitive 신규 추가 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA·키보드, `data-slot`, `cn(..., className)`, shadcn transition, focus ring, disabled 커서.
+
+## 8. HM에서 변경한 항목
+
+shadcn의 `h-[1.15rem] w-8`, `border`, `shadow-xs`, `dark:` class 제거 → theme CSS. Off 색을 `input`(옅음) 대신 stroke 색으로, Disabled opacity 50 → 60.
+
+## 9. Storybook
+
+대표 Story `All`: `off`, `on`, `interactive`(controlled), `hover`, `focus`, `disabled`. Focus는 `play`로 실제 focus. verification: `Off`, `On`, `Disabled`.
+
+## 10. 사용자 확정 결정
+
+2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 이 컴포넌트에 대한 개별 수치 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- size 변형(sm/md), 라벨 위치 규칙: 미결정.
+- 수치(36×20, 썸 16)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- motion은 shadcn 기본 유지.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/switch.tsx
+packages/ui/src/theme/switch.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Switch)
+src/components/switch.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- computed style: track 36×20, Off `rgb(154,146,132)`, On `rgb(18,51,40)`, 썸 16px White, translate 2px / 18px, Disabled opacity 0.6.
+- interaction: controlled click으로 `data-state`·`aria-checked` 토글 확인.
+- 미확인: 실제 pointer hover·focus ring 시각, transition 실제 재생, 사이드바 화면.
diff --git a/docs/components/table.md b/docs/components/table.md
new file mode 100644
index 0000000..c19f921
--- /dev/null
+++ b/docs/components/table.md
@@ -0,0 +1,105 @@
+# Table
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Table 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Table (semantic HTML table, Radix 없음) |
+| 대표 Story | `Components/Data & Display/Table` → `All` (이름 "Table") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격(`docs/components/table.md`)을 참고했다: 연한 녹색 header 띠, 1px 행 구분선, 셀 padding 14/12, 기본 최소 폭 520px, radius 없음, 행 hover는 면만 변경, header 13/20/700, 셀 14/20/400, 숫자 tabular numerals. 값은 현재 HM Token(Primitive 조합)으로 다시 연결했다.
+- **현재 HM 규격**: 아래 §3~§4. ui-viz에 없던 selected row와 footer는 새로 정했다.
+- **구현 방식**: shadcn Table 구조(container div + table 요소들)를 유지하고 theme CSS로 연결. **정적 표시 primitive**이며 이후 Data Table Pattern(정렬·필터·선택 state·페이지·열 표시)의 기반이다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Table | min-width 520px(기본값, 덮어쓸 수 있음), 폭 100%, 배경 `--hm-sem-bg-surface`, 글자 `--hm-sem-fg-primary`, radius 없음, `border-collapse: collapse` |
+| Header cell | 13 / 20 / 700, 글자 `--hm-sem-palette-green-light-1`, 배경 흰색에 `--hm-sem-palette-green-tint` 30% 섞은 연한 면, 위 1px `--hm-sem-palette-green-light-2`, 아래 1px 같은 색 20% |
+| Cell | 14 / 20 / 400, padding `14px 12px`, 위 1px `--hm-sem-stroke-input-default` 구분선(첫 body 행은 header 경계가 대신함), `tabular-nums` |
+| Footer | 배경 `--hm-sem-bg-subtle`, weight 500, 위 1px 구분선 |
+| Caption | 12 / 18, `--hm-sem-fg-secondary`, 왼쪽 정렬, 표 아래(caption-bottom), 위 간격 12px |
+| 긴 텍스트 | Cell은 줄바꿈(`overflow-wrap: anywhere`), Header는 `nowrap` |
+| 숫자 열 | 소비자가 `className="text-right"` 지정 |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Row Hover | body 행 배경 `--accent` 45%(`color-mix`, 면만 변경, header 제외) |
+| Selected (`data-state="selected"`) | 행 배경 `--accent` 45%. 소비자가 속성을 붙인다 |
+| Selected + Hover | `--accent` 45% 유지(농도 변화 없음) |
+| Focus / Disabled / Loading | Table 자체에는 없음(셀 안 content가 각자 가진다) |
+
+## 5. API
+
+shadcn 구조 그대로. export: `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableHead`, `TableRow`, `TableCell`, `TableCaption`.
+
+- `Table`: `table` props. `div[data-slot=table-container]`(overflow-x auto)로 감싼다.
+- `TableRow`: `data-state="selected"`를 지원하는 스타일(shadcn 규칙). 선택 state 관리는 소비자.
+- `density`, `variant`, `striped`, `interactive` 같은 prop은 만들지 않았다. 정렬·필터·선택·column visibility·페이지·resize·server loading은 넣지 않았다(Data Table Pattern에서 조합).
+- Checkbox 등 셀 안 요소는 소비 조합이며 Table은 runtime 의존이 없다. `[role=checkbox]` 포함 셀은 오른쪽 padding을 줄이고 checkbox를 2px 내리는 shadcn 규칙만 유지.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/table.css` (`--hm-table-*`).
+
+`min-width`, `background`, `text`, `font-size|line-height|font-weight`, `cell-padding-y|x`, `divider-width|color`, `header-background|text|font-size|font-weight|border-top|border-bottom`, `row-hover-background`, `row-selected-background`, `footer-background|font-weight`, `caption-*`. Semantic과 Theme palette(`--hm-sem-palette-green-*`, `--hm-sem-stroke-input-default`, `--hm-sem-palette-white`)를 참조하고 다른 컴포넌트 Token을 쓰지 않는다. 신규 Primitive 없음(ui-viz의 `#EDF4F1`은 기존 Primitive의 `color-mix`로 표현). row hover / selected는 shadcn `--accent`의 `color-mix` 45%(Select·Menu·Pagination hover와 같은 Soft Surface 규칙, 공통 `--hm-sem-surface-highlight`를 Component Token이 참조).
+
+## 7. shadcn에서 유지한 항목
+
+container(`overflow-x-auto`)와 table 구조, `caption-bottom`, Head/Cell의 checkbox 보정 class, `data-slot`, `cn(..., className)`, `data-state="selected"` 규칙.
+
+## 8. HM에서 변경한 항목
+
+- shadcn의 `text-sm`, `h-10 px-2 font-medium`, `p-2`, `border-b`, `hover:bg-muted/50`, `bg-muted/50`, Caption `mt-4 text-muted-foreground` class를 제거하고 theme CSS로 이전.
+- Cell의 `whitespace-nowrap`을 제거해 긴 텍스트가 줄바꿈되게 했다(Header는 nowrap 유지).
+- Header 띠 스타일과 숫자 `tabular-nums`, 최소 폭 520px은 ui-viz를 참고한 신규 규격.
+
+## 9. Storybook
+
+- 대표 Story `All`("Table"): Basic(Badge, 숫자 열, footer, caption), Selected row(Checkbox, local state), Long text, Horizontal overflow(1100px 표)를 한 페이지에 둔다.
+- verification: `Basic`, `Selected`, `Long Text`, `Horizontal Overflow`.
+- Checkbox·Badge는 Story 조합이다. Story의 폭 wrapper에는 `minWidth: 0`이 필요하다(grid item의 `min-width:auto`가 Table 최소 폭만큼 부모를 넓힘).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+- 2026-10-06 (컬러 역할 정리): 행은 넓은 Soft Surface이므로 Hover·Selected·Selected+Hover 모두 `--accent` 45%를 쓴다(이전 `--hm-green-tint` 18% / 40%). Active State Semantic(Light 2)은 쓰지 않는다. 선택 구분은 면 색이 아니라 행 안의 Checkbox(Active Semantic)가 담당한다. `--accent` 값 자체는 바꾸지 않았다. Table row highlight surface는 Select Highlight / Selected와 동일한 Accent 45% 정책을 사용한다.
+
+## 11. 미확정 / 보류
+
+- 수치(520px, 14/12 padding, header 띠 색)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- zebra, sticky header, 정렬/필터/선택/페이지, column resize, empty/loading 표현: 이후 Data Table Pattern.
+- 모바일: Table을 카드로 자동 변환하지 않는다. container 가로 scroll만 제공하며 모바일용 Data Table 패턴은 Layout/Data Table 단계에서 정한다.
+- header 수치 13px는 ui-viz 참고값이며 공통 typography role과 연결하지 않았다.
+- 말줄임(ellipsis) 셀 규칙 없음.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/table.tsx
+packages/ui/src/theme/table.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/table.stories.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 구조/스타일(Browser pane): `th`/`td` 구조, header 13/700 `rgb(32,82,65)`, 위 border `rgb(38,102,81)`, cell 14/20·padding 14/12, 표 폭 100%·최소 520px, caption bottom·왼쪽 정렬.
+- 선택 행: Checkbox Space로 선택하면 해당 행이 `data-state="selected"`가 되고 header Checkbox가 `mixed`, header Checkbox 클릭으로 전체 선택. Tab이 행 Checkbox로 이동.
+- Responsive(390×844): container 폭 358px에 표 520px(1100px 표)이 container 안에서 가로 scroll, 페이지(`scrollWidth` 390) 가로 overflow 없음, 긴 텍스트는 셀 안에서 줄바꿈(89px 행).
+- 2026-10-06 ui_viz Storybook 화면 비교(1280/768/390, Chromium): header·cell padding/typography/색, divider, 텍스트 행 49px, 실제 pointer hover 면 `rgba(189,223,212,.18)` 일치. header/첫 행 경계는 ui_viz가 td 위 선을 두고 HM은 없애지만 border-collapse에서 header 하단선이 이기므로 렌더 픽셀이 같음(197,215,208 / 196,216,209). header 면 ±2 차이는 §6 `color-mix` 근사. 390px에서 ui_viz Story는 페이지가 544px로 넘치고 HM은 container scroll만 생김.
+- 2026-10-06 Accent 45% 전환(실제 pointer hover): Hover·Selected·Selected+Hover 모두 `color(srgb 0.741 0.875 0.831 / 0.45)`(= `#bddfd4` 45%). Data Table 선택 행 동일 + 선택 Checkbox `rgb(38,102,81)` + focus ring 기존 그대로. Dialog Wide Content: header·cell typography·padding·행 높이 49px 유지, hover 동일 값, 좁은 Dialog에서 container만 가로 scroll(1600 / 750).
+- 미확인: 가로 scroll을 사용자가 끝까지 끌었을 때의 clipping, Dropdown Menu·Pagination 조합(Story에 없음).
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
new file mode 100644
index 0000000..ad7b6d0
--- /dev/null
+++ b/docs/components/tabs.md
@@ -0,0 +1,218 @@
+# Tabs
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Tabs 고유의 API·Token·상태·결정만 기록한다.
+
+## 기본 사용: Primary (2026-10-08)
+
+앱 진입점에서 `@hm-design/ui/theme.css`를 로드한다. `TabsList`의 기본값은 `fill=true`, `panelSurface="content"`이며 기본 API만으로 Primary가 적용된다.
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@hm-design/ui"
+
+<Tabs defaultValue="overview">
+  <TabsList aria-label="업무 보기">
+    <TabsTrigger value="overview">개요</TabsTrigger>
+    <TabsTrigger value="details">상세</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview" className="border bg-background rounded-b p-4">개요 콘텐츠</TabsContent>
+  <TabsContent value="details" className="border bg-background rounded-b p-4">상세 콘텐츠</TabsContent>
+</Tabs>
+```
+
+- **Primary**: `<TabsList>`, `<TabsList fill>`, `<TabsList fill panelSurface="content">`는 같은 디자인이다. 선택 면은 White → `--hm-sem-bg-content` Gradient다.
+- **Secondary 명시적 사용**: 위 예제의 List를 `<TabsList fill panelSurface="surface" aria-label="업무 보기">`로 바꾸고 **각** `TabsContent`에 `border bg-card rounded-b p-4`를 사용한다. 선택 면은 기존 White surface다.
+- **Legacy non-fill 명시적 사용**: `<TabsList fill={false} aria-label="업무 보기">`와 **각** `TabsContent`의 `border bg-card rounded-b p-4` 조합으로 이전 스타일을 유지한다. `<TabsList fill={false} panelSurface="surface">`도 같은 시각이다. OLD_TEST_ONLY / REMOVE_CANDIDATE 이력은 유지하며 별도 승인 없이 삭제하지 않는다.
+
+`TabsContent`는 패널 배경·테두리를 자동으로 지정하지 않는다. 소비자가 Primary에는 `bg-background`(content), Secondary / Legacy에는 `bg-card`(surface)를 연결한다. `panelSurface`는 List의 선택 면·연결 곡선에만 적용되며 콘텐츠 색을 바꾸지 않는다. Bar와 패널 사이에 gap이나 별도 구분선을 넣지 않는다. 상태·Variant는 §4.1, 외부 소비자 변경 안내는 §15를 따른다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 기본 Primary Fill + 명시적 Secondary Fill + Legacy non-fill + 넘침 이동 버튼(D-090) 구현 (`hm-tab` class 없음) |
+| 기준일 | 2026-10-08 (Primary 기본값 승인 반영) |
+| 기반 | shadcn/ui Tabs (Radix `Tabs`) |
+| 대표 Story | `Components/Navigation/Tabs` → `All` (이름 "Tabs"): Primary(Fill + content) / Secondary(Fill + surface) |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: ui-viz 기존 테스트 규격(`docs/components/tabs.md`, `brand/hanmac/components/tab.md`)의 기본 profile, `fill` 콘텐츠 전환 profile, 넘침 이동 버튼의 디자인 의도와 수치.
+- **현재 HM 규격**: Primary / Secondary는 §4.1, Legacy non-fill은 §3~§4. 수치는 ui-viz에서 가져왔지만 HM 구현에서 다시 검토해 유지한 것이다(아래 검토 결과).
+- **구현 방식**: shadcn / Radix Tabs 구조(roving focus, 방향키·Home/End, 자동 활성화, ARIA)를 유지하고 theme CSS로 HM 스타일을 연결. `TabsList`가 frame과 이동 버튼을 렌더.
+- **보류**: §11.
+
+**ui-viz 비확정 값 검토 (2026-10-02)**: Default 면(`green-tint` 45%)·Default 테두리(`green-light-2` 35%)는 ui-viz에서 비확정 표기였으나 HM Primitive 팔레트의 값을 투명도로 합성한 것이고 Selected(White)와의 대비가 분명해 HM 방향에 맞는다고 판단, 현재 HM 규격으로 유지한다. 곡선 반경 8px도 같은 이유로 유지한다. 단 값은 디자인 확정 시 조정될 수 있다. ui-viz의 볼록 gradient(미구현), 13px 라벨(미채택)은 가져오지 않았다.
+
+## 3. Legacy non-fill 규격 (`fill={false}`)
+
+이 표의 배치·인접 경계는 이전 non-fill profile이다. 높이·padding·radius·Typography·Bar 규격은 Fill에서도 공유하지만, 균등 폭·인접 경계·선택 면·연결 곡선은 §4.1을 따른다.
+
+| 항목 | 값 |
+|---|---|
+| Tab 높이 | 34px (`height` + `min-height`), Button·radius token과 alias 없음 |
+| Padding | `0 16px` |
+| Radius | `4px 4px 0 0` |
+| Border | 1px. 인접 탭은 `border-left: 0`으로 단일 경계 |
+| Typography | 16 / 24 / 700 (Selected 동일, 구분은 색·면·테두리로) |
+| 배치 | `flex-end` 정렬, gap 0, nowrap, `flex: none`, 각 탭 `position: relative` |
+| Bar | 자체 표면·padding·border·radius 없음, `margin-bottom: -1px`, `overflow-x: auto`, scrollbar 숨김, `max-width: 100%` |
+
+크기·variant 축 없음 (ui_viz Out of Scope). 방향은 horizontal 하나.
+
+## 4. Legacy non-fill 상태 규격 (`fill={false}`)
+
+`panelSurface="surface"` / `"content"`는 이 상태표에 시각적 영향을 주지 않는다. 아래 Default는 비선택 상태를 뜻하며 기본 Variant를 뜻하지 않는다.
+
+| 상태 | 면 | 테두리 | 전경 |
+|---|---|---|---|
+| Default (`data-state="inactive"`) | `rgba(189,223,212,.45)` | top/right `rgba(38,102,81,.35)`, bottom `#DEDBD2` | `#266651` |
+| Selected (`data-state="active"`) | `#FFFFFF` (`--hm-sem-bg-surface`) | top/right/left `#DEDBD2`, bottom 1px 표면색(기준선을 덮어 콘텐츠와 연결), `z-index: 2` | `#123328` |
+| Hover (비선택만, `:hover`) | 기본 면 + Black 20% overlay (`linear-gradient`) | 변화 없음 | `#123328` |
+| Hover (선택) | 적용 안 함 | — | — |
+| Focus (`:focus-visible`) | shadcn ring 유지 | — | — |
+| Disabled | shadcn 기본 `opacity-50`, 클릭 불가 | — | — |
+
+전환: 면·전경 0.15s ease (테두리·geometry는 전환하지 않음). Selected 하단 stroke는 indicator가 아니라 연결 수단이다.
+
+### 4.1 현재 Fill 디자인: Primary / Secondary State · Variant
+
+- **Primary (기본값)**: `fill=true`, `panelSurface="content"`. Selected는 White → bg-content Gradient, top / left / right는 Green Light 3(`--hm-tab-fill-line-color`), bottom은 content 패널색이다.
+- **Secondary**: `fill=true`, `panelSurface="surface"`. Selected는 기존 White surface 면, 같은 Green Light 3 테두리, bottom은 surface 패널색이다.
+- **공통 Geometry**: 기존 높이 34px, Typography 16/24/700, 좌우 padding 16px, 상단 radius 4px, 선택 탭의 8px 곡선 연결을 유지한다. Overflow가 없으면 균등 폭, 모든 Fill 이웃은 1px left border와 `margin-left: -1px`로 경계를 공유한다. Overflow이면 라벨 필요 폭을 유지한다.
+- **Inactive**: 면·top / vertical border·전경은 §4의 기존 비선택 값, bottom line만 Green Light 3다.
+- **Hover**: 비선택·활성화 가능한 탭에만 기존 Black 20% overlay와 전경 전환을 적용한다. Selected Gradient / White 면은 유지한다.
+- **Focus / Disabled**: 기존 shadcn focus-visible ring / Disabled opacity 0.5·클릭 불가·Radix 키보드 건너뛰기를 유지한다. 선택·ARIA·키보드 동작은 §7, Overflow 이동은 §5·§8을 따른다.
+
+## 5. API
+
+shadcn/Radix 그대로. `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` (Radix `Tabs.Root/List/Trigger/Content` props). 추가(기존 API 무변경, 모두 선택):
+
+```
+TabsList:
+  fill?: boolean                          기본 true. Primary / Secondary Fill; false는 Legacy non-fill
+  panelSurface?: "surface" | "content"    기본 "content". Fill 선택 면이 이어지는 panel 바탕 (임의 색 미지원 = TABS_PANEL_SURFACE_ENUM)
+```
+
+- `TabsList`는 Radix list를 감싸는 frame(`data-slot="tabs-frame"`)을 렌더한다(ui_viz `.hm-tabs-frame`과 같은 구조). `role`·`aria-*`·`className`·ref·나머지 props는 tablist로 간다. frame에 `data-overflow`, `data-fill`, `data-panel-surface`.
+- `panelSurface`는 `fill=false`이면 시각적으로 무시한다. Props 이름·타입·선택 여부와 공개 export는 유지하며 기본 렌더링만 변경한다(§15).
+- 넘칠 때만 frame 안에 이동 버튼 2개(`data-slot="tabs-arrow"`, `aria-label` 「이전 탭 보기」「다음 탭 보기」, `aria-controls`=tablist id)를 tablist 밖에 렌더한다. Tab 순서: 이전 버튼 → 선택 tab → 다음 버튼, 끝 방향 버튼은 `disabled`.
+
+- `value`/`defaultValue`/`onValueChange`, `disabled`, `activationMode`, `orientation` 등은 Radix 동작 그대로다. ui_viz의 controlled-only `<Tabs value onValueChange><Tab/></Tabs>` API는 복제하지 않는다.
+- 출력 속성: `data-slot="tabs|tabs-list|tabs-trigger|tabs-content"`, Radix `data-state`·`data-orientation`.
+- `TabsList`에는 `aria-label` 또는 `aria-labelledby`를 넘겨야 한다(ui_viz §6).
+- 이동 버튼은 기존 `Button`을 쓰지 않는 Tabs 전용 control이다.
+- Selected가 이어지는 콘텐츠 표면은 소비자의 panel이다. Tabs가 자체 표면·구분선을 만들지 않는다. Tab Bar와 콘텐츠 사이에 구분선을 넣으면 연결이 깨진다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/tabs.css` (`--hm-tab-*`).
+
+- Tabs 전용: `--hm-tab-{height,padding-x,radius-top,border-width}`, `--hm-tab-font-{size,weight}`, `--hm-tab-line-height`, `--hm-tab-{background,border-color,text}`, `--hm-tab-selected-{background,border-color,text}`, `--hm-tab-hover-{overlay,text}`, `--hm-tab-transition-duration`.
+- 재사용한 공통 값: `--hm-sem-bg-surface`(Selected 면), 역할 Semantic `--hm-sem-action-primary`, `--hm-sem-stroke-input-default`, Theme palette `--hm-sem-palette-green-tint`, `--hm-sem-palette-green-light-2`, `--hm-sem-palette-black`. Component Token은 독립적으로 유지한다. Primitive 직접 참조 설명은 초기 구현 이력이다.
+- 이동 버튼: `--hm-tab-arrow-{size,icon-size,background,border-color,icon-color,disabled-opacity}`. fill: `--hm-tab-fill-line-color`(→ `--hm-sem-palette-green-light-3`), `--hm-tab-fill-curve-radius`(8px, REVIEW VALUE), 내부 `--hm-tab-fill-{panel,face}`.
+- **초기 Primitive 추가 이력**: `--hm-green-light-3: #249473` (ui-viz 팔레트의 Green Light 3). 현재 Tabs fill은 공개 Theme palette `--hm-sem-palette-green-light-3`를 통해 참조한다.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix Tabs 구조·ARIA(`role=tablist/tab/tabpanel`, `aria-selected`)·roving tabindex·방향키 순환·Home/End·자동 활성화, `data-slot`, `cn(..., className)`, trigger의 focus ring, Disabled 처리.
+
+## 8. HM에서 변경한 항목
+
+- shadcn의 list `bg-muted`·rounded·padding, trigger의 흰색 pill/dark 스타일, root `gap-2`, list variant(`default`/`line`) 제거 → theme CSS가 담당.
+- Bar는 콘텐츠와 gap 없이 붙는다.
+- `TabsList`가 frame wrapper와 이동 버튼을 렌더(ui_viz 구조 반영, 프로젝트 지침상 필요한 wrapper).
+- 선택 tab을 보이게 유지: click/keyboard 선택, resize·글꼴 로딩·항목 변경 시 list `scrollLeft` 보정(ResizeObserver/MutationObserver).
+
+## 9. Storybook
+
+- 대표 Story `All`("Tabs"): **Overview**는 fill / panelSurface를 생략한 기본 Primary, **Default API**는 `fill`만 명시한 Primary와 `fill` + `panelSurface="content"`를 명시한 Primary를 비교한다. **Variants**는 명시적 Secondary, **States**는 기본 Primary + 8개 탭 + 260px wrapper Overflow다. 기존 대표 Story ID와 메뉴를 유지한다. Hover는 실제 포인터로 확인한다.
+- verification(`tags: ["verification"]`): `Secondary`, `SelectedFirst`, `SelectedLast`, `Focus`, `Disabled`, `Overflow`, `SecondaryOverflow`, `LongLabel`. Primary 기준이며 Secondary는 같은 CSS 경로를 쓴다. Focus는 `play`로 실제 focus를 준다.
+- `LongLabel`은 짧은 라벨, 긴 라벨 1개, 긴 라벨 여러 개, 260px 좁은 container를 함께 검증한다. 라벨은 `nowrap`·무말줄임이며 실제 필요 폭이 넘을 때 이동 버튼으로 전환한다.
+- non-fill Story(`Selected`, `SelectedMiddle`, `Fill`, `FillContent`, `FillOverflow`와 대표의 non-fill 구역)는 2026-10-06에 제거했다. API(`fill=false`, Legacy profile CSS)는 유지한다(§10).
+- 2026-10-08 숨김 `Compatibility`(`verification` 태그 + **VERIFICATION ONLY** 표시)는 Legacy `fill={false}` / `fill={false} panelSurface="surface"` 동일성과 `panelSurface="surface"`만 명시한 경우의 Secondary 전환을 확인한다. 일반 Story 메뉴를 추가하지 않는다.
+- Story의 콘텐츠 panel은 Primary `TabsContent` + `border bg-background`, Secondary / Legacy `TabsContent` + `border bg-card` 소비자 조합 예시다.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-06: Tabs의 최종 디자인 언어는 **Primary = Fill + `panelSurface="content"`**(기본형), **Secondary = Fill + `panelSurface="surface"`**(서브형) 두 가지다. 이 결정이 ui_viz보다 우선한다. non-fill 기본 profile은 OLD_TEST_ONLY로 분류해 대표 Story에서 내렸다.
+- **2026-10-06 당시 범위**는 Storybook 대표형에 한정했다. 당시 Public API 기본값(`fill=false`, `panelSurface="surface"`)과 non-fill CSS branch는 유지하고 기본값 변경·branch 삭제를 별도 승인 대상으로 남겼다. 당시 저장소 내 소비처가 없다는 관찰은 외부 소비자의 무영향을 보장하지 않는다.
+- **2026-10-08 추가 개선 E 승인**: `TabsList` 기본값을 `fill=true`, `panelSurface="content"`로 변경한다. Primary / Secondary / Legacy의 기존 CSS 디자인 값·선택자·동작·Theme / Token을 유지한다. non-fill의 OLD_TEST_ONLY / REMOVE_CANDIDATE 이력과 명시적 사용 API는 유지하며 삭제 승인은 포함하지 않는다. `panelSurface`는 Fill일 때만 효과가 있는 List prop이다(`Tabs` Root prop이 아님).
+
+## 11. 미확정 / 보류
+
+- 이동 후 가장자리 정렬 세부 (다음 버튼은 오른쪽에 걸친 첫 항목의 끝을 보이는 영역 끝에 맞춤), 이동 버튼 포커스 수치(global focus TBD, box-shadow 3px 링 사용), fill에서도 Bar −1px 겹침 유지, Brown 콘텐츠 탭·dark mode TBD.
+- `panelSurface`는 `surface`/`content`만 지원(현재 제한).
+- Default 면·테두리 합성색과 곡선 반경 8px는 디자인 확정 시 재검토.
+- Focus 수치: global focus `TBD`. shadcn ring 유지.
+- Disabled: ui_viz P0 제외. shadcn 기본.
+- 볼록 Gradient: `TABS_CONVEX_GRADIENT_KNOWN_DEVIATION`, 평면으로 출하(구현도 평면).
+- Typography: expanded Source의 13px는 `TABS_SOURCE_LABEL_SIZE_13_UNADOPTED`로 16px 유지.
+- 앞 탭 right border가 2번째 이후 Selected의 좌측을 대신 그리는 관계는 ui_viz `BASELINE_BEHAVIOR_ACCEPTABLE`이며 그대로 구현.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/tabs.tsx
+packages/ui/src/theme/tabs.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Tabs, TabsContent, TabsList, TabsTrigger)
+src/components/tabs.stories.tsx
+src/components/story-board.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-08 추가 개선 E: 기존 6024 Storybook 재사용. 대표 `All`에서 기본 Props / `fill`만 명시 / 두 Props 명시가 모두 Primary(`data-fill="true"`, `data-panel-surface="content"`)이며 같은 Gradient·Green Light 3 경계·34px·16/24/700·8px 곡선을 확인했다. Secondary의 White 면·패널과 Bar / panel 1px 겹침도 유지했다.
+- 숨김 `Compatibility`: `fill={false}`의 content / surface 조합은 같은 White 선택 면·Legacy 경계·라벨 필요 폭이고 곡선이 없다. `panelSurface="surface"`만 명시하면 Secondary다. CSS 주석을 제외한 모든 규칙·값과 Production의 기본값 두 개를 제외한 코드가 작업 시작 상태와 동일함을 비교했다.
+- 실제 포인터 / 키보드: 클릭·ArrowLeft / Right·Home / End 선택과 콘텐츠 전환, 비선택 Hover Black 20% / 선택 Gradient 유지, focus-visible 3px 링, Disabled opacity 0.5·pointer-events none·tabIndex -1·방향키 건너뛰기를 확인했다. 독립 Overflow Story는 260px frame / 192px list에서 다음 이동 `scrollLeft 0→33.33`, 이전 이동 `→0`, 끝 버튼 Disabled 전환과 선택 유지가 정상이다.
+- 1280px / 390px: 대표 Story의 문서 가로 넘침 없음. 390px의 기본·명시적 Fill frame은 약 342.67px, Overflow specimen은 260px. 390px Compatibility도 문서 가로 넘침 없이 Legacy list 약 226px를 유지했다. HM Theme의 content / surface / Green Light 3 연결은 유지한다.
+- `npm run build:ui`(UI 패키지·선언 빌드), `node node_modules/typescript/bin/tsc -p tsconfig.app.json`(Story 포함) 통과. Tabs 변경 파일의 diff whitespace 검사 통과. 전체 회귀·전체 Storybook 정적 빌드는 이번 범위에서 실행하지 않았다.
+- Console: 패키지 dist 재생성 중 기존 브라우저에 Vite `src/index.css` reload 오류가 한 번 기록됐으나 복구됐다. 빌드 후 새 브라우저에서 대표 / Compatibility를 확인한 Console error / warning은 0건이다. 외부 소비자 전체 호환성은 §15의 한계를 따른다.
+- 2026-10-04: `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. build의 기존 Tailwind 문서 예시 경고(`bg-[var(...)]`)와 Storybook 500kB chunk 경고 외 신규 경고 없음.
+- Storybook computed style(`components-navigation-tabs--all`): 높이 34px, padding `0 16px`, radius `4px 4px 0 0`, 16/24/700, Default/Selected 색과 연결선 일치. fill 선택 경계 `rgb(36,148,115)`, 선택 면과 8×8 곡선 확인.
+- 실제 pointer + keyboard: 비선택 hover Black 20% overlay·전경 전환, 선택 hover 비적용, 클릭·ArrowRight/Left·Home/End 자동 선택, 3px focus-visible ring, `tabpanel` 내용 전환과 54px panel 높이 유지.
+- Disabled: `disabled=true`, `tabIndex=-1`, opacity 0.5, 활성화 불가.
+- Overflow: 260px frame에서 192px list / 605px scroll width, 이동 버튼 1회 `scrollLeft 0→36`, 선택값 유지, 이전 버튼 활성화.
+- Long Label: `nowrap`, `text-overflow: clip`, 단일/복수 긴 라벨에서 실제 필요 폭 기준 overflow. 가시 영역보다 넓은 선택 탭은 시작점을 목록 왼쪽에 맞춘다.
+- Responsive: 1280 / 768 / 390px 모두 문서 가로 overflow 없음(`scrollWidth == clientWidth`). 390px에서 기본·fill은 frame 343px, 명시적 narrow specimen은 260px로 유지.
+- 2026-10-06 smoke check(ui_viz Storybook 나란히): fill 인접 경계(`margin-left:-1px` + 1px 경계)·선택 탭 8×8 곡선 ±8px 접점·34px·16/24/700·색 유지. Overflow/Fill Overflow/Long Label은 3개 viewport에서 이동 버튼 전환, 선택 탭 시작점 왼쪽 정렬, 페이지 넘침 없음. Click·ArrowRight·Home 동작 확인. 새 회귀 없음.
+- 2026-10-08 저장소 소스 검색: Production / Dashboard에는 TabsList 소비처가 없으며 `src/components/tabs.stories.tsx`만 소비한다. 외부 프로젝트는 이 확인 범위에 포함하지 않는다.
+
+## 14. ui-viz 직접 비교 (2026-10-04)
+
+2026-10-06 비교는 외부 ui_viz의 보존된 두 원본 사본의 Tabs JSX/CSS SHA-256 일치를 확인한 뒤 동일 소스와 당시 캡처를 참고했다. 외부 자료는 ZIP에 포함되지 않으며 현재 Source of Truth는 HM 구현·대표 Story와 이 문서다. 당시 백업 Storybook은 dependency가 제거되어 실행하지 못했으므로, 비교 범위는 보존된 소스·캡처와 HM computed value였다.
+
+| 항목 | ui-viz | 수정 전 HM | 판정 / 최종 처리 |
+|---|---|---|---|
+| 구조·상태 | 자체 controlled Tabs/Tab + roving focus | Radix Root/List/Trigger/Content | `IMPLEMENTATION_CHANGE`; Radix 유지 |
+| 기본 geometry·색·type | 34px, 0 16px, 4px, 16/24/700, 연결형 border | computed value 일치 | `MATCHED` |
+| hover / selected | inactive만 Black 20%, selected surface 연결 | 일치 | `MATCHED` |
+| focus / disabled | 전역 수치 미정 / P0 제외 | 명확한 Radix focus ring / opacity 0.5 | `INTENTIONAL_CHANGE` |
+| fill 인접 경계 | 모든 이웃이 `margin-left:-1px` + left border 복원 | active 이웃만 부분 복원 | `REGRESSION`; 원본 겹침 관계 복구 |
+| fill 곡선 접점 | active edge에서 정확히 ±8px | edge 밖으로 1px 이격 | `REGRESSION`; ±8px 접점 복구 |
+| overflow | 실제 필요 폭, 34px 양끝 control, 한 항목 이동 | 수치·동작 일치 | `MATCHED` |
+| 매우 긴 선택 탭 | item이 viewport보다 넓으면 시작점 left align | right align으로 라벨 앞부분이 가려짐 | `REGRESSION`; left align 복구 |
+| Long Label 검증 | 실제 사용 specimen 존재 | 전용 Story 없음 | `MISSING`; 숨김 verification Story와 대표 구역 추가 |
+| controlled-only API·13px 실험 라벨 | ui-viz Web mapping/미채택 값 | Radix 양방향 API·16px | `OLD_TEST_ONLY`; 미도입 |
+
+### Before / After
+
+| 항목 | Before | After | ui-viz |
+|---|---|---|---|
+| fill 이웃 경계 | 후속 inactive left border 0 | left border 1px + margin-left -1px | 동일 |
+| fill 곡선 | active edge와 1px gap | edge 기준 `-8px` | 동일 |
+| viewport보다 넓은 선택 tab | 오른쪽 끝 정렬 | 왼쪽 시작점 정렬 | 왼쪽 시작점 정렬 |
+| Long Label Story | 없음 | 단일/복수/260px 검증 | 사용 specimen 존재 |
+
+## 15. 외부 소비자 영향 / 호환성 (2026-10-08)
+
+- **변경 전**: `<TabsList>` → Legacy non-fill (`fill=false`, `panelSurface="surface"`).
+- **변경 후**: `<TabsList>` → Primary Fill (`fill=true`, `panelSurface="content"`).
+- **이전 스타일 유지**: `<TabsList fill={false}>`. 이전 White 패널 조합(`bg-card`)도 유지한다. `panelSurface="surface"`를 함께 명시해도 non-fill 시각은 같다.
+- **`fill`만 명시한 기존 소비자**: 이전에는 Secondary(surface), 이제는 Primary(content)가 된다. 이전 Secondary를 유지하려면 `<TabsList fill panelSurface="surface">`와 surface 패널을 사용한다.
+- **`panelSurface`만 명시한 기존 소비자**: 이전에는 non-fill이라 시각적으로 무시했지만 이제 Fill이 적용된다. `"surface"`는 Secondary, `"content"`는 Primary다. non-fill을 유지하려면 `fill={false}`를 추가한다.
+- **두 Props 모두 명시**: 기존 조합의 시각은 유지한다. Props 이름·타입·Radix props·export·DOM 구조는 변경하지 않는다. 타입 호환성과 기본 디자인 호환성은 구분한다.
+- **레이아웃 차이**: non-fill은 라벨 필요 폭, Fill은 Overflow가 없을 때 컨테이너 전체를 균등 분할한다. 높이 34px은 같으나 탭 폭·공유 경계·선택 연결 곡선·패널색이 달라질 수 있다. 좁은 폭에서는 기존 Overflow 이동 버튼이 나타날 수 있다.
+- **CSS Override 영향**: frame의 기본 attribute가 `data-fill="false"` / `data-panel-surface="surface"`에서 `"true"` / `"content"`로 바뀐다. non-fill 조건 selector, list width / flex, active background / border, 곡선 pseudo-element override를 사용하는 소비자는 검토가 필요하다. `className`과 ref는 계속 tablist에 전달된다.
+- **확인 범위**: 현재 저장소의 TabsList 사용은 Story만 확인했다. 외부 소비자 전체의 명시적 Props·패널색·레이아웃·CSS Override는 실제 확인하지 못했으므로 위 내용은 영향 가능성과 이행 안내이며 외부 호환성 전체 검증을 뜻하지 않는다.
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
new file mode 100644
index 0000000..fe5b458
--- /dev/null
+++ b/docs/components/textarea.md
@@ -0,0 +1,134 @@
+# Textarea
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Textarea 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | HM 스타일 적용 완료 (`hm-textarea` class 없음) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Textarea (native `<textarea>`) |
+| 대표 Story | `Components/Form/Textarea` → `All` (이름 "Textarea") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+원본: 외부 ui_viz Reference (ZIP 미포함)의 `docs/components/textarea.md` (+ `brand/hanmac/foundation/{color,border}.md`, `foundation/token-inventory.md`의 입력 계열 Semantic).
+
+- **ui_viz Confirmed**: border 1px / radius 4px(§2, §2.2), 면·값·Placeholder 색(§2.2), 기본 테두리 `color.stroke.input.default`, Focus `color.stroke.input.focus`, Error `color.stroke.input.error`, Focus/Error 두께 1.5px(D-005 상속, §2.2), Hover = Default(§3.3 사용자 결정 TEXTAREA-05, Confirmed), Readonly 표현(§3.1), 값 typography 16/24/400(§2).
+- **SCOPED_DESIGN_APPROVAL** (2026-09-17 owner, Textarea 한정): min-height `112px`, padding `8px 12px`(§8.1, TEXTAREA-01/02). D-093 디자인 확정값이 아니며 ui_viz Canonical은 `TBD`다. Textarea 범위에서만 사용하고 `size.*`/`space.*`로 승격하지 않는다.
+- **Component-local**: `resize` 정책(vertical 기본, none/both 선택, Readonly는 none 고정).
+- **shadcn 유지**: native textarea 동작, `transition-colors`, `outline-none`, Disabled opacity와 커서.
+- **HM 사용자 결정(2026-10-06)**: Error border와 Keyboard Focus ring을 독립 Semantic으로 표시한다.
+
+## 3. 기본 규격
+
+| 항목 | 값 | 상태 |
+|---|---|---|
+| Width | 부모 폭 100% (`w-full`) | Canonical |
+| Min-height | 112px | SCOPED_DESIGN_APPROVAL |
+| Padding | 8px (block) / 12px (inline) | SCOPED_DESIGN_APPROVAL |
+| Border / Radius | 1px `--hm-sem-stroke-input-default` / `--hm-radius-input`(4px) | Confirmed |
+| Face / 값 색 | `--hm-sem-bg-surface` / `--hm-sem-fg-primary` | Confirmed |
+| Typography | 16 / 24 / 400 | Existing role |
+| Placeholder | `--hm-sem-fg-placeholder`, `opacity: 1` | Confirmed |
+| Resize | `vertical` 기본 | Component-local |
+
+Size 체계 없음. Input의 Small/Medium/Large와 공유하지 않는다(ui_viz Textarea에 size 정의 없음). `field.gap` 8px 등 Field 관계는 Textarea 밖(소비 조합)이다.
+
+## 4. 상태 규격
+
+| 상태 | 값 | 근거 |
+|---|---|---|
+| Default | 위 기본 규격 | Confirmed |
+| Hover | Default와 동일 (hover rule 없음) | Confirmed (사용자 결정 TEXTAREA-05) |
+| Focus (`:focus-visible`) | border 1.5px `--hm-sem-stroke-input-focus`, shadow/glow 없음, padding으로 0.5px 보정해 글자 위치 유지 | Confirmed (D-005 상속) |
+| Error (`[aria-invalid="true"]`) | border 1.5px `--hm-sem-action-destructive`, ring 없음, 동일 padding 보정 | Confirmed (D-005 상속) |
+| Error + Keyboard Focus | Destructive border 유지 + HM Focus Semantic 3px / 50% outer ring, `outline: none` | Input과 동일, 2026-10-06 사용자 결정 |
+| Disabled | surface face 유지, `cursor: not-allowed`, `opacity: 0.6` | opacity: 사용자 결정(§10) |
+| Readonly (`[readonly]`) | Default와 같은 면·테두리·typography, `opacity: 1`, `resize: none` 고정 | Component-local (§3.1) |
+
+Chromium은 1.5px 테두리를 `getComputedStyle` 기준 1px로 계산한다(ui_viz도 같은 관측을 기록). padding 보정(7.5px/11.5px)은 선언 1.5px 기준으로 적용된다.
+
+## 5. API
+
+```
+Textarea:
+  resize?: "vertical" | "none" | "both"     기본 "vertical"
+```
+
+- 나머지는 native `<textarea>` props 그대로(`rows`, `placeholder`, `disabled`, `readOnly`, `aria-invalid` 등).
+- 출력 속성: `data-slot="textarea"`, `data-resize`.
+- 상태는 새 prop이 아니라 native 속성으로 준다.
+- Field(Label, Required 별표, Helper/Error 문구)는 Textarea에 포함하지 않는다. 소비 조합이다.
+- auto-grow, 글자 수 카운터는 범위 밖이다. shadcn의 `field-sizing-content`(auto-grow)는 제거했다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/textarea.css` (`--hm-textarea-*`).
+
+- 재사용한 공통 Semantic: `--hm-radius-input`, `--hm-sem-bg-surface`, `--hm-sem-fg-primary`, `--hm-sem-fg-placeholder`, `--hm-sem-stroke-input-default`, `--hm-sem-stroke-input-focus`, `--hm-sem-action-destructive`(Semantic 참조).
+- Textarea 전용 값: `--hm-textarea-min-height`, `--hm-textarea-padding-{block,inline}`, `--hm-textarea-font-{size,weight}`, `--hm-textarea-line-height`, `--hm-textarea-border-width`, `--hm-textarea-state-border-width`(1.5px).
+- Primitive 신규 추가 없음.
+- Input의 `--hm-input-*`와 값이 겹쳐도 alias하지 않는다(ui_viz도 Input·Textarea를 별도 owner로 두고 값을 각각 소비).
+
+## 7. shadcn / Radix에서 유지한 항목
+
+native `<textarea>` 동작 전체, `data-slot`, `cn(..., className)`, `transition-colors`, `outline-none`, `disabled:cursor-not-allowed`. Radix 사용 없음.
+
+## 8. HM에서 변경한 항목
+
+- `resize` prop, `data-resize` 추가.
+- shadcn의 기본 min-height/padding/border/ring/shadow/`dark:`/`field-sizing-content` class 제거 → theme CSS가 담당.
+- 일반 Focus는 border 1.5px로 표시, Error 단독은 ring 없음. Error + `:focus-visible`만 독립 Focus ring을 표시한다.
+- Readonly 전용 표현(resize 고정) 추가.
+
+## 9. Storybook
+
+- 대표 Story `All`("Textarea"): 구역 `default`, `hover`, `focus`, `error`, `error-message`, `readonly`, `disabled`, `multiline`, `resize`. Focus는 `play` 함수로 실제 focus를 준다. Hover는 별도 pseudo 복제 없이 Default와 같다는 설명만 둔다.
+- verification(`tags: ["verification"]`): `Default`, `Focus`, `Error`, `InvalidFocus`, `ErrorMessage`, `Required`, `Readonly`, `Disabled`, `LongContent`, `Playground`(HM 전용).
+- Error Message·Required 표시는 Story 안의 조합 예시이며 Textarea 컴포넌트의 일부가 아니다.
+
+## 10. 사용자 확정 결정
+
+**2026-10-02**: Textarea Disabled opacity `0.6` 확정. ui_viz에서 `Temporary`지만 현재 HM 구현에서는 이 결정이 우선한다. Textarea 한정이며 전역 Disabled opacity로 확대하지 않는다 (Input·Select와 같은 값). Token이 아니라 `ui/textarea.tsx`의 `disabled:opacity-60`으로 적용.
+- ui_viz에 기록된 결정을 따른다: 2026-09-17 Hover = Default(TEXTAREA-05), min-height 112 / padding 8·12 Textarea 한정 승인(TEXTAREA-01/02). 2026-10-01 필수 별표 `#D32F2F`(TEXTAREA-07, Textarea에 별표 없음 — Story 조합 예시는 shadcn `text-destructive`).
+
+## 11. 미확정 / 보류
+
+- **min-height 112 / padding 8·12**: Textarea 한정 owner 승인이지만 ui_viz Canonical은 `TBD`, D-093 미확정(TEXTAREA-01/02/06, `NO_SOURCE_EVIDENCE`). 변경 가능성이 있다.
+- **Label 14/20/500 · Value 16/24 · Error 11/18 vs D-093 원본 실행본 13/700 등**: `KNOWN_DEVIATION / FOLLOW_UP`(TEXTAREA-08). 확정 근거 없어 ui_viz 문서값을 사용.
+- **Error + Focus**: HM 사용자 결정(2026-10-06)으로 Input과 같은 3px / 50% Focus Semantic ring을 적용한다.
+- auto-grow, 글자 수 카운터(TEXTAREA-03): 범위 밖. max length 관련 표현 없음.
+- 전역 focus ring 수치: TBD.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/textarea.tsx
+packages/ui/src/theme/textarea.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export Textarea, TextareaResize)
+src/components/textarea.stories.tsx
+src/components/story-board.tsx
+```
+
+## 13. 검증 상태
+
+- `npm run typecheck`(root + ui + center-graphic), `npm run build`: 통과(2026-10-02).
+- Storybook computed style(`components-form-textarea--all`): Default min-height 112px / padding 8px 12px / border 1px rgb(222,219,210) / radius 4px / bg white / 16·24·400 / resize vertical / Placeholder rgb(153,153,153), Error border rgb(211,47,47) + padding 7.5px 11.5px, Readonly resize none · opacity 1, `resize="none"` 적용, Disabled opacity 0.6.
+- 실제 클릭 focus: `:focus-visible` 매칭, border rgb(18,51,40), padding 7.5px 11.5px 확인.
+- Story ID: `All` + verification 8개 존재 확인(index.json). `@hm-design/ui`에서 `import { Textarea }`로 Story가 빌드됨.
+- 2026-10-06 ui_viz Storybook 화면 비교(1280/768/390, Chromium): 컨트롤 computed style 일치(ui_viz Story의 114px은 `rows=4` 때문), Error+Focus outline 유지, 긴 내용은 내부 세로 scroll·가로 넘침 없음, Readonly 편집 불가·선택 가능, Disabled focus 불가. ui_viz는 Disabled에서 Field 전체(라벨 포함)를 흐리지만 HM은 컨트롤만 흐리고 라벨은 `Label`의 disabled 연동(소비 조합)이 맡는다 — 의도적 차이. 대표 Story는 ui_viz 5구역을 모두 포함한 상위 집합(Hover = Default, Error Message, Resize none 추가)이라 변경하지 않음.
+- 미확인: 브라우저별 렌더(Chromium 외).
+
+
+### Invalid + Focus 검증 (2026-10-07)
+
+- Focus ring: `--ring` → `--hm-sem-stroke-input-focus` → `--hm-color-border-focus`. Invalid border: 기존 `--hm-sem-action-destructive`. 새 Runtime Role / Production Error prop / 메시지 컴포넌트 없음.
+- Chromium computed style: Invalid border `rgb(211, 47, 47)`, Invalid + Keyboard Focus box-shadow `color(srgb 0.14902 0.4 0.317647 / 0.5) 0px 0px 0px 3px`, `outline-style: none`. Invalid 단독은 `box-shadow: none`.
+- Theme Designer UI에서 Focus `#c75b00`, Destructive `#d41466`, Active `#007f73`, Accent `#ffd36d`로 분리. Invalid border `rgb(212, 20, 102)` + Focus shadow `color(srgb 0.780392 0.356863 0 / 0.5) 0px 0px 0px 3px` 확인.
+- `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. 기존 문서 예시 CSS warning 및 Storybook chunk 크기 / plugin timing warning 유지.
+- 검증 범위: Chromium 환경. 다른 브라우저의 렌더링은 별도 확인이 필요하다.
+- 대표 `All`과 숨김 `InvalidFocus` 확인. 일반 Focus / Invalid의 padding 7.5px 11.5px, 기본 min-height 112px / 16px 글자 / Readonly resize none / Disabled opacity 0.6 유지. Border CSS 계약 1.5px, 이 브라우저 환경의 computed border-width는 1px으로 정규화. Input과 같은 Invalid + Focus ring.
diff --git a/docs/components/toggle-group.md b/docs/components/toggle-group.md
new file mode 100644
index 0000000..bae8b88
--- /dev/null
+++ b/docs/components/toggle-group.md
@@ -0,0 +1,111 @@
+# Toggle Group
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Toggle Group 고유의 API·Token·상태·결정만 기록한다. Toggle(`toggle.md`)과 역할 비교는 거기 §14.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Toggle Group (Radix `ToggleGroup`) |
+| 대표 Story | `Components/Form/Toggle Group` → `All` (이름 "Toggle Group") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Toggle Group이 없다. 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다. Toggle과 같은 선택 언어(On = accent 면)를 공유하지만 Token은 `--hm-toggle-group-*`로 따로 두고 Toggle의 CSS에 의존하지 않는다.
+- **구현 방식**: shadcn / Radix ToggleGroup 구조(Root + Item)와 `variant`·`size`·`spacing` API(context로 Item에 전달)를 유지한다. Item은 Toggle 컴포넌트가 아니라 독립 요소다.
+- **Tabs와의 구분**: Tabs는 content 전환(navigation), Toggle Group은 상태 선택이다.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Item | 높이 `sm` 28 / `default` 34 / `lg` 42px, padding-x 8 / 12 / 16px, radius 4px, 14 / 20 / 500, icon + text gap 8px |
+| Icon-only | 단일 React element + 직계 `svg` 하나인 경우 `data-icon-only`와 CSS로 padding 0, 높이와 같은 정사각형. SVG + text node는 size별 padding 8/12/16px 유지 |
+| Off / On | Off는 투명 배경과 `--hm-sem-fg-primary`, On은 `--accent` 배경과 `--accent-foreground` |
+| `outline` variant | 1px `--hm-sem-stroke-input-default` border |
+| Connected (`spacing={0}`, 기본) | 안쪽 모서리 직각, 바깥 모서리 4px, outline border는 1px씩 겹침(`-1px`), On Item은 위로 올림(`z-index`) |
+| Separated (`spacing > 0`) | 각 Item이 독립 radius, 간격 = `spacing × 4px` |
+| 방향 | horizontal(기본), vertical(`orientation="vertical"`, 세로 연결 모서리) |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Off / On | Radix `data-state`. single은 Item `role="radio"` + `aria-checked`(Root `role="radiogroup"`), multiple은 `aria-pressed`(Root `role="toolbar"`) |
+| Hover (off) | 배경 `--accent` 45% |
+| Selected + Hover (on) | 배경 `--accent` 100%, 글자·아이콘 `--accent-foreground` 유지 |
+| Focus (`:focus-visible`) | shadcn ring, focus된 Item이 인접 Item 위로(`z-10`) |
+| Disabled (그룹 또는 Item) | `opacity: 0.6`(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), 클릭·focus 불가, 방향키 이동에서 제외 |
+
+## 5. API
+
+Radix ToggleGroup props 그대로. export: `ToggleGroup`, `ToggleGroupItem`.
+
+- `ToggleGroup`: `type="single" | "multiple"`, `value`/`defaultValue`/`onValueChange`, `orientation`, `disabled`, `rovingFocus`, `loop`, `dir`. shadcn: `variant`, `size`, `spacing`(기본 0). 출력 `data-variant`, `data-size`, `data-spacing`, `data-orientation`(`orientation`을 줄 때만).
+- `ToggleGroupItem`: `value`(필수), `disabled`. `variant`/`size`는 그룹에서 내려온다.
+- single에서 선택된 Item을 다시 누르면 선택이 해제되어 `onValueChange("")`가 호출된다(Radix 동작). 항상 하나를 유지하려면 소비자가 빈 값을 무시한다(Story 참고).
+- icon-only Item은 `aria-label`을 준다.
+- 새 selection state 관리는 만들지 않았다.
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/toggle-group.css` (`--hm-toggle-group-*`).
+
+`height-sm|md|lg`, `padding-x-sm|md|lg`, `radius`, `gap`, `font-size|line-height|font-weight`, `off-background|off-text`, `hover-background`, `on-background|on-text`, `border-width|color`, `disabled-opacity`. Semantic과 Theme palette(`--hm-sem-stroke-input-default`)만 참조한다. `--hm-toggle-*`, `--hm-button-*`는 참조하지 않는다. 신규 Primitive와 Semantic 없음. `--hm-toggle-group-gap`은 `spacing` 값으로 인라인 style이 덮어쓴다.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA·roving focus(방향키, Home/End, disabled 건너뜀, `loop`)·Enter/Space·controlled/uncontrolled, shadcn context 방식의 `variant`/`size`/`spacing`, focus ring class, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn의 `data-[spacing=0]:*` 계열 class와 Toggle 색 class를 제거하고 theme CSS로 이전. 연결형 모서리·border 겹침을 CSS 선택자로 처리.
+- Radix가 `orientation`을 주지 않으면 `data-orientation`을 출력하지 않으므로 가로 연결형은 `:not([data-orientation="vertical"])`로 선택한다.
+- 기본 모양을 `@layer components`에 두어 소비자의 `className`이 이긴다.
+
+## 9. Storybook
+
+- 대표 Story `All`("Toggle Group"): Single(local state, 값 표시), Multiple(icon-only, local state), Disabled group / item, Vertical(icon-only), `spacing={2}`, Many items(`spacing={1}` + `flex-wrap`)을 한 페이지에 둔다.
+- verification: `Single`, `Multiple`, `Vertical`.
+- meta에 `component`를 지정하지 않는다(props가 `single | multiple` union이라 args 없는 Story가 타입을 통과하지 못함).
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). Toggle Group은 Button과 독립 Component Token을 쓰며 Tabs와 같은 모양으로 만들지 않는다(작업 지시).
+- 2026-10-06 Selected 원복: Git baseline `d101530`의 On 매핑 `--accent` / `--accent-foreground`를 복원했다. Selected + Hover도 Accent 100%와 동일 전경을 유지하고 아이콘은 `currentColor`를 따른다. Border는 기존 default 투명 / outline `--hm-sem-stroke-input-default`를 유지한다. Active Semantic은 참조하지 않고 Focus는 `--ring` → `--hm-sem-stroke-input-focus`(Light 2), `ring-ring/50`을 유지한다. Hover·Disabled·Icon-only / Icon+Text padding·Theme JSON·Runtime 계약 변경 없음.
+
+## 11. 미확정 / 보류
+
+- 수치(28/34/42px, 연결형 기본, On 면 accent, Disabled opacity 0.6)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- **줄바꿈**: 연결형(`spacing={0}`) 그룹이 `flex-wrap`으로 여러 줄이 되면 두 번째 줄 첫 Item의 border 겹침(`-1px`)과 모서리가 어색하다. 항목이 많거나 폭이 좁으면 `spacing > 0`을 쓰고 `className="flex-wrap"`을 소비자가 선택한다. 자동 responsive 배치는 만들지 않았다.
+- vertical 그룹의 폭: Item 폭이 서로 다르면 가장 넓은 Item에 맞춰 늘어난다(`items-stretch`).
+- 선택 해제 가능 정책(single에서 재클릭)은 Radix 기본.
+- 스크린리더 안내 문구(그룹 이름)는 소비자의 `aria-label`.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/toggle-group.tsx
+packages/ui/src/theme/toggle-group.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/toggle-group.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-06 Selected 원복 검증: Storybook `All` / `ContentNodes`에서 Default·실제 Hover·Selected·Selected + Hover·키보드 Focus·Disabled·Icon-only·Icon+Text 확인. Selected 배경 `rgb(189, 223, 212)` / 전경·아이콘 `rgb(18, 51, 40)`, outline border `rgb(222, 219, 210)`, Focus는 Light 2 `#266651` 50%의 3px ring. Runtime API의 Active override는 Selected에 영향 없음, Accent/on Accent override는 면·전경만 변경, Focus override는 ring만 변경. 1280/390px에서 sm/default/lg Icon-only 28/34/42px square·padding 0, Icon+Text/Text-only padding-x 8/12/16px 및 Array/Fragment 조합 유지. `typecheck`, `build`, `build-storybook`, `git diff --check` 통과(기존 CSS 예시·Storybook chunk 경고 유지).
+
+- 2026-10-06 Visual QA: Icon+Text item도 기존 `:has(> svg:only-child)`에 실제 매칭됨을 확인하고 Toggle과 함께 수정. 1280/1024/768/390px, sm/default/lg에서 Icon-only PL/PR 0/0px·28/34/42px square, Icon+Text와 Text-only PL/PR 각각 8/12/16px, pressed 상태 정상. Array/Fragment 조합 확인. `typecheck`, `build`, `build-storybook` 통과.
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 DOM(Browser pane): single은 `radiogroup`/`radio`(`aria-checked`), multiple은 `toolbar`와 `aria-pressed`.
+- single keyboard: 포커스 후 ArrowRight로 다음 Item, Enter로 선택(`value = center`), End로 마지막, Space로 선택(`value = right`), Home으로 처음. multiple: Enter/Space로 각각 토글되어 `[bold, italic, underline]`. vertical: ArrowDown으로 이동, ArrowRight는 이동하지 않음. disabled: ArrowRight가 비활성 Item을 건너뛰어 A → C, 비활성 그룹은 클릭해도 상태 불변. (ArrowLeft는 첫 입력이 한 번 무시되는 경우가 있었고 두 번째 입력에서 A로 이동. 입력 도구의 타이밍으로 보이며 ArrowRight 건너뜀은 확인됨.)
+- computed style: 연결형에서 첫/끝 Item만 바깥 모서리 4px, 가운데 0, outline Item margin `-1px`, vertical은 위/아래 모서리, `spacing={2}`는 각 Item 4px radius.
+- Responsive(390×844): 모든 그룹이 부모 폭 안에서 페이지 가로 overflow 없음, `spacing={1}` + `flex-wrap` 그룹은 358px 안에서 두 줄로 줄바꿈.
+- 미확인: 실제 pointer hover 면 시각, focus ring 시각, `loop={false}`·`rovingFocus={false}`, RTL.
diff --git a/docs/components/toggle.md b/docs/components/toggle.md
new file mode 100644
index 0000000..1dc910e
--- /dev/null
+++ b/docs/components/toggle.md
@@ -0,0 +1,119 @@
+# Toggle
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Toggle 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Toggle (Radix `Toggle`) |
+| 대표 Story | `Components/Form/Toggle` → `All` (이름 "Toggle") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Toggle이 없다(인벤토리에 Switch 계열 기능 이름으로만 언급). 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic/Primitive로 새로 정했다.
+- **구현 방식**: shadcn / Radix Toggle 구조와 `variant`(default | outline), `size`(default | sm | lg) API를 유지하고, 모양은 HM 독립 Token(`--hm-toggle-*`)으로 정한다.
+- **Button과의 관계**: 이 문서 §14.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Size | `sm` 28px, `default` 34px, `lg` 42px (높이). padding-x 8 / 12 / 16px |
+| Icon-only | 단일 React element + 직계 `svg` 하나인 경우 `data-icon-only`와 CSS로 padding 0. SVG + text node는 size별 padding 8/12/16px 유지 |
+| Radius | `--hm-radius-control-md` (4px) |
+| Typography | 14 / 20 / 500, icon + text는 gap 8px |
+| Off | 배경 투명, 글자 `--hm-sem-fg-primary` |
+| On | 배경 `--accent`, 글자 `--accent-foreground` (full Accent; Select 선택 항목의 Accent 45% 면과는 별도 정책) |
+| `outline` variant | 1px `--hm-sem-stroke-input-default` border(`default`는 border 없음) |
+| 커서 | pointer |
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Off / On | Radix `data-state="off" | "on"`, `aria-pressed` |
+| Hover (off) | 배경 `--accent` 45% (on 상태는 그대로 On 면) |
+| Selected + Hover (on) | 배경 `--accent` 100%, 글자·아이콘 `--accent-foreground` 유지. Hover 45% 면으로 내려가지 않음 |
+| Focus (`:focus-visible`) | shadcn ring (`ring-3 ring-ring/50`) 유지 |
+| Disabled | `opacity: 0.6`(이 컴포넌트 값, 전역 Disabled 규칙으로 승격 안 함), `cursor: not-allowed`, 클릭·hover 무반응 |
+
+## 5. API
+
+Radix Toggle props 그대로. export: `Toggle`, `toggleVariants`.
+
+- `pressed`/`defaultPressed`/`onPressedChange`, `disabled`, `asChild`.
+- `variant` `"default" | "outline"`, `size` `"default" | "sm" | "lg"`(shadcn 호환). 출력 `data-variant`, `data-size`, `data-slot="toggle"`.
+- icon-only Toggle은 소비자가 `aria-label`을 준다(Story 참고).
+- 새 variant는 만들지 않았다(`default`, `outline` 두 개만 유지).
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/toggle.css` (`--hm-toggle-*`).
+
+`height-sm|md|lg`, `padding-x-sm|md|lg`, `radius`, `gap`, `font-size|line-height|font-weight`, `off-background|off-text`, `hover-background`, `on-background|on-text`, `outline-border-width|color`, `disabled-opacity`. Semantic과 Theme palette(`--hm-sem-stroke-input-default`)만 참조한다. `--hm-button-*`와 Button의 role 체계는 참조하지 않는다. 신규 Primitive와 Semantic 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·`aria-pressed`·`data-state`·Enter/Space·controlled/uncontrolled·disabled·`asChild`, shadcn `variant`/`size` API와 `toggleVariants`(cva), focus ring class, svg 정렬 class, `data-slot`, `cn(..., className)`.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `toggleVariants`의 색·크기 class(`h-8 min-w-8 px-2.5`, `hover:bg-muted`, `data-[state=on]:bg-muted`, outline `border-input shadow-xs`)를 제거하고 theme CSS로 이전. On 면은 `muted`가 아닌 accent.
+- 기본 모양을 `@layer components`에 두어 소비자의 `className`(폭, radius, 레이아웃 utility)이 이긴다. 다른 theme CSS(레이어 밖)와 달리 Toggle은 Story에서 `className="w-40 rounded-full"`이 적용되는 것을 확인했다.
+
+## 9. Storybook
+
+- 대표 Story `All`("Toggle"): Off/On(default·outline), Icon-only와 icon + text(`BoldIcon`, `ItalicIcon`, `StarIcon`), Sizes, Disabled(off/on), Controlled(`pressed` 상태 표시), className 확장을 한 페이지에 둔다.
+- verification: `States`, `Icon Only`, `Disabled`.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). Toggle은 Button과 독립 Component Token을 쓴다(작업 지시).
+- 2026-10-06 Selected 원복: Git baseline `d101530`의 `--accent` / `--accent-foreground` 매핑을 복원했다. 아이콘은 `currentColor`로 전경을 따른다. Border는 baseline대로 default 투명 / outline `--hm-sem-stroke-input-default`이며 Selected 전용 border는 없다. Active Semantic은 참조하지 않고 Focus는 기존 `--ring` → `--hm-sem-stroke-input-focus`(Light 2)와 `ring-ring/50`을 유지한다. Hover·Disabled·Icon-only / Icon+Text padding·Theme JSON·Runtime 계약 변경 없음.
+
+## 11. 미확정 / 보류
+
+- 수치(28/34/42px, padding, On 면 accent, Disabled opacity 0.6)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- On 상태 hover는 On 면 그대로이다(별도 hover 면을 정하지 않음).
+- On 상태를 Primary(진한 녹색 면)로 강하게 표시하는 variant는 만들지 않았다.
+- 아이콘 크기는 shadcn 기본(16px) 유지.
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/toggle.tsx
+packages/ui/src/theme/toggle.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/toggle.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-06 Selected 원복 검증: Storybook `All` / `ContentNodes`에서 Default·실제 Hover·Selected·Selected + Hover·키보드 Focus·Disabled·Icon-only·Icon+Text 확인. Selected 배경 `rgb(189, 223, 212)` / 전경·아이콘 `rgb(18, 51, 40)`, Focus는 Light 2 `#266651` 50%의 3px ring. Runtime API의 Active override는 Selected에 영향 없음, Accent/on Accent override는 면·전경만 변경, Focus override는 ring만 변경. 1280/390px에서 sm/default/lg Icon-only 28/34/42px square·padding 0, Icon+Text/Text-only padding-x 8/12/16px 및 Array/Fragment 조합 유지. `typecheck`, `build`, `build-storybook`, `git diff --check` 통과(기존 CSS 예시·Storybook chunk 경고 유지).
+
+- 2026-10-06 Visual QA: 1280/1024/768/390px, sm/default/lg에서 Icon-only PL/PR 0/0px·28/34/42px square, Icon+Text와 Text-only PL/PR 각각 8/12/16px, pressed 상태 정상. Array/Fragment icon과 Fragment/element label 조합도 확인. `typecheck`, `build`, `build-storybook` 통과.
+
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): 클릭으로 off → on → off(`aria-pressed`, `data-state` 일치), 키보드 focus 후 Enter로 on, Space로 off, disabled는 클릭과 focus 불가, controlled는 클릭으로 `pressed = true`와 `data-state="on"` 동기화.
+- computed style: default 34px / On 배경 `rgb(189,223,212)`·글자 `rgb(18,51,40)`, outline border `rgb(222,219,210)`, `sm` 28px, `lg` 42px, icon-only 34×34, disabled opacity 0.6, `className="w-40 rounded-full"` 적용(폭 160px, radius 최대).
+- 미확인: 실제 pointer hover 면 시각, focus ring 시각, 390px(단일 버튼이라 폭 문제 없음).
+
+## 14. 역할 구분 (Button · Checkbox · Radio Group · Switch와의 차이)
+
+| 컴포넌트 | 역할 |
+|---|---|
+| Button | **Action 실행**(일회성). `variant`가 역할(primary/secondary/destructive…), `appearance`가 treatment |
+| Toggle | **pressed 상태 유지**(툴바식 on/off). `aria-pressed` |
+| Toggle Group | **선택 그룹**(단일/다중 선택, roving focus) |
+| Checkbox | 폼의 boolean / 다중 선택 |
+| Radio Group | 폼의 배타적 선택 |
+| Switch | 설정 on/off(즉시 적용되는 설정 값) |
+
+Toggle은 Button과 모양이 비슷해 보여도 Button의 action 중심 variant 체계(role/appearance)와 `--hm-button-*` Token을 상속하지 않는다. 역할이 다르고, Button 규격이 바뀔 때 Toggle이 함께 바뀌면 안 되기 때문이다. 공통 의미(선택 면의 accent, control radius)만 Semantic으로 공유한다.
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
new file mode 100644
index 0000000..0bb4822
--- /dev/null
+++ b/docs/components/tooltip.md
@@ -0,0 +1,113 @@
+# Tooltip
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Tooltip 고유의 API·Token·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-02 |
+| 기반 | shadcn/ui Tooltip (Radix `Tooltip`) |
+| 대표 Story | `Components/Overlay/Tooltip` → `All` (이름 "Tooltip") |
+| 보류 | 아래 §11 |
+
+## 2. 적용 근거
+
+- **참고 근거**: 외부 ui_viz Reference (ZIP 미포함)의 기존 테스트 규격에는 Tooltip 규격이 없다(인벤토리 "상세 동작·디자인 보류"). 참고할 수치가 없었다.
+- **현재 HM 규격**: 아래 §3~§4. 현재 HM Semantic 체계(fg-primary, text-inverse)로 새로 정했다.
+- **구현 방식**: shadcn / Radix Tooltip 구조(Provider, Root, Trigger, Content, Arrow)를 유지하고 theme CSS로 HM 스타일을 연결.
+- **보류**: §11.
+
+## 3. 기본 규격 (현재 HM 규격)
+
+| 항목 | 값 |
+|---|---|
+| Background | `--hm-sem-fg-primary` (진한 녹색) |
+| Text | `--hm-color-text-inverse` (White) |
+| Radius | `--hm-radius-container` (4px) |
+| Padding | 6px 10px |
+| Max width | 240px, 긴 문장은 줄바꿈(`text-balance`, `overflow-wrap: anywhere`) |
+| Typography | 12 / 18 / 400 |
+| Arrow | shadcn 회전 사각형, 면과 같은 색(배경·fill) |
+| Position | `sideOffset` 4, shadcn 기본 side(top) |
+| Delay | `TooltipProvider delayDuration` 기본 0 (shadcn 기본 유지) |
+
+Tooltip은 짧고 즉각적인 설명만 담는다. 긴 설명·interactive 콘텐츠는 Popover / Hover Card를 쓴다. 그림자와 border는 없다.
+
+## 4. 상태 규격
+
+| 상태 | 값 |
+|---|---|
+| Open / Closed | Radix `data-state`(`delayed-open` 포함), shadcn open/close animation |
+| 열림 조건 | trigger hover 또는 keyboard focus |
+| 닫힘 조건 | pointer leave, blur, Escape, trigger 클릭 |
+
+## 5. API
+
+Radix Tooltip props 그대로. export: `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent`.
+
+- `Tooltip`은 상위 HM `TooltipProvider`가 없을 때만 자체 Provider를 만든다. 단독 사용은 그대로 지원하며 기본 `delayDuration`은 0이다.
+- 그룹에는 `@hm-design/ui`의 `TooltipProvider`를 둔다. 내부 Provider를 추가하지 않아 가장 가까운 Provider의 `delayDuration`, `skipDelayDuration`, `disableHoverableContent`와 그룹의 skip-delay 상태를 공유한다. Radix Provider를 직접 사용하는 대신 HM Provider를 사용한다.
+- 개별 `Tooltip delayDuration`은 Provider의 delay를 override한다. `skipDelayDuration`은 Provider에서 지정하며, skip 구간의 다음 Tooltip은 즉시 열린다. `skipDelayDuration={0}`이면 각 hover에 delay가 적용된다. keyboard focus는 delay 없이 열리고 Escape로 닫힌다.
+- `TooltipContent`: `sideOffset` 기본 4. 출력 속성: `data-slot="tooltip-*"`, Radix `data-state`·`data-side`. Arrow는 `data-slot="tooltip-arrow"`.
+
+```tsx
+<TooltipProvider delayDuration={700} skipDelayDuration={300}>
+  <Tooltip>
+    <TooltipTrigger asChild><button>저장</button></TooltipTrigger>
+    <TooltipContent>변경 사항을 저장합니다</TooltipContent>
+  </Tooltip>
+  {/* 같은 Provider 아래의 Tooltip은 skip-delay 상태를 공유한다. */}
+</TooltipProvider>
+```
+
+## 6. Token
+
+Component Mapping 위치: `packages/ui/src/theme/tooltip.css` (`--hm-tooltip-*`).
+
+`background`, `text`, `radius`, `padding-x`, `padding-y`, `max-width`, `font-size`, `line-height`, `font-weight`. 다른 컴포넌트의 Component Token을 참조하지 않는다. 신규 Primitive 없음.
+
+## 7. shadcn / Radix에서 유지한 항목
+
+Radix 구조·ARIA(`role=tooltip`, `aria-describedby`)·Escape·hover/focus 동작, Provider 구조와 delay, Portal·positioning·collision, `data-slot`, `cn(..., className)`, animation class, `z-50`, Arrow.
+
+## 8. HM에서 변경한 항목
+
+- shadcn `bg-foreground text-background rounded-md px-3 py-1.5 text-xs` 및 arrow의 `bg-foreground fill-foreground` class 제거 → theme CSS.
+- 최대 폭 240px 추가(shadcn은 `w-fit`만 있어 긴 문장 한계가 없었다).
+
+## 9. Storybook
+
+- 대표 Story `All`("Tooltip"): 기본, 긴 텍스트, 비활성 버튼(wrapper trigger), 4방향 placement 비교.
+- verification: `Open`(열린 상태).
+- interactive control은 넣지 않는다.
+
+## 10. 사용자 확정 결정
+
+- 2026-10-02: ui-viz는 참고 자료이며 최종 기준은 현재 HM 구현과 이 문서다(작업 지시). 개별 수치에 대한 별도 결정은 없다.
+
+## 11. 미확정 / 보류
+
+- 수치(240px, padding, 12px 글자)는 현재 HM 규격이며 디자인 확정 시 재검토.
+- delay: shadcn 기본 0 유지. HM delay 규칙은 없다.
+- Motion 규칙은 정의되지 않아 shadcn 기본 animation 유지.
+- 비활성 control에 붙이는 방식은 소비 조합(wrapper element).
+
+## 12. 관련 파일
+
+```
+packages/ui/src/components/ui/tooltip.tsx
+packages/ui/src/theme/tooltip.css
+packages/ui/src/theme.css            (import)
+packages/ui/src/index.ts             (export)
+src/components/tooltip.stories.tsx
+```
+
+## 13. 검증 상태
+
+- 2026-10-08: 공개 패키지 빌드·타입 검사 통과. Browser에서 mouse `PointerEvent`로 단독 사용, 상위/중첩 HM Provider delay, Root override, 그룹 skip-delay·만료·0 설정과 pointer leave를 검증했다. 실제 키보드로 focus·blur·Escape, controlled `open`/`onOpenChange`, `asChild`·ref, 비활성 wrapper를 확인했다. 주요 computed style은 수정 전과 동일하다. 실제 마우스 이동을 통한 hover는 별도 미검증이다.
+- `npm run typecheck`, `npm run build`: 통과(2026-10-02).
+- 실제 interaction(Browser pane): keyboard focus로 열림(`role=tooltip` 확인), Escape 닫힘.
+- computed style: bg `rgb(10,34,29)`, text white, radius 4px, padding 6px 10px, 12/18, arrow fill 같은 색.
+- 미확인: 실제 pointer hover 열림·pointer leave 닫힘, 긴 텍스트 줄바꿈 시각, 4방향 placement 시각, 비활성 wrapper trigger.
diff --git a/docs/guidelines/component-pattern-reference.md b/docs/guidelines/component-pattern-reference.md
new file mode 100644
index 0000000..918ad7e
--- /dev/null
+++ b/docs/guidelines/component-pattern-reference.md
@@ -0,0 +1,99 @@
+# Component / Pattern Reference Index
+
+AI 화면 구현 Quick Start의 Component·Pattern 검색에 사용하는 파일 인덱스다. 오전 `HMDesignTest.zip`과 현재 개발 저장소는 별도 스냅샷이다. 현재 검증된 최신 테스트 배포 기준 `HMDesignTest-Portable-Test-r3.zip`에는 아래 44개 Component와 8개 Pattern 모듈, Dashboard Status 소스/export/CSS/문서/정적 예제와 사전 빌드된 Storybook을 모두 포함한다. `HMDesignTest-Portable-Test-r2.zip`, 기존 `HMDesignTest-Portable-Test.zip` 및 오전 ZIP은 이전 스냅샷이며, 아래 오전 ZIP 수량은 역사적 비교로 표시한다. 공개 심볼의 Source of Truth는 [`packages/ui/src/index.ts`](../../packages/ui/src/index.ts)이며, Props와 상태는 각 연결 문서 및 구현을 확인한다. 파일 수, 공개 API 심볼 수, Story 그룹 수는 서로 다른 집계 단위다.
+
+## Component
+
+현재 `packages/ui/src/components/ui/`에는 구현 TSX 44개가 있다. 각 구현 파일은 `packages/ui/src/index.ts`의 공개 export를 통해 소비한다. 아래 Story는 실제 Story 파일의 대표 그룹이다.
+
+| Component | 구현·공개 API (`@hm-design/ui`) | 사용 문서 | 대표 Story |
+|---|---|---|---|
+| Accordion | `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`<br>[구현](../../packages/ui/src/components/ui/accordion.tsx) | [문서](../components/accordion.md) | [Disclosure/Accordion](../../src/components/accordion.stories.tsx) |
+| Alert | `Alert`, `AlertDescription`, `AlertTitle`<br>[구현](../../packages/ui/src/components/ui/alert.tsx) | [문서](../components/alert.md) | [Feedback/Alert](../../src/components/alert.stories.tsx) |
+| Alert Dialog | `AlertDialog`, `AlertDialogAction`, `AlertDialogCancel`, `AlertDialogContent`, `AlertDialogDescription`, `AlertDialogFooter`, `AlertDialogHeader`, `AlertDialogOverlay`, `AlertDialogPortal`, `AlertDialogTitle`, `AlertDialogTrigger`<br>[구현](../../packages/ui/src/components/ui/alert-dialog.tsx) | [문서](../components/alert-dialog.md) | [Overlay/Alert Dialog](../../src/components/alert-dialog.stories.tsx) |
+| Aspect Ratio | `AspectRatio`<br>[구현](../../packages/ui/src/components/ui/aspect-ratio.tsx) | [문서](../components/aspect-ratio.md) | [Data & Display/Aspect Ratio](../../src/components/aspect-ratio.stories.tsx) |
+| Avatar | `Avatar`, `AvatarFallback`, `AvatarImage`<br>[구현](../../packages/ui/src/components/ui/avatar.tsx) | [문서](../components/avatar.md) | [Data & Display/Avatar](../../src/components/avatar.stories.tsx) |
+| Badge | `Badge`, `badgeVariants`<br>[구현](../../packages/ui/src/components/ui/badge.tsx) | [문서](../components/badge.md) | [Data & Display/Badge](../../src/components/badge.stories.tsx) |
+| Breadcrumb | `Breadcrumb`, `BreadcrumbEllipsis`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbList`, `BreadcrumbPage`, `BreadcrumbSeparator`<br>[구현](../../packages/ui/src/components/ui/breadcrumb.tsx) | [문서](../components/breadcrumb.md) | [Navigation/Breadcrumb](../../src/components/breadcrumb.stories.tsx) |
+| Button | `Button`, `buttonVariants`, `ButtonAppearance`<br>[구현](../../packages/ui/src/components/ui/button.tsx) | [문서](../components/button.md) | [Form/Button](../../src/components/button.stories.tsx) |
+| Calendar | `Calendar`<br>[구현](../../packages/ui/src/components/ui/calendar.tsx) | [문서](../components/calendar.md) | [Search & Date/Calendar](../../src/components/calendar.stories.tsx) |
+| Card | `Card`, `CardAction`, `CardContent`, `CardDescription`, `CardFooter`, `CardHeader`, `CardTitle`, `CardSurface`<br>[구현](../../packages/ui/src/components/ui/card.tsx) | [문서](../components/card.md) | [Data & Display/Card](../../src/components/card.stories.tsx) |
+| Carousel | `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselNext`, `CarouselPrevious`, `useCarousel`, `CarouselApi`<br>[구현](../../packages/ui/src/components/ui/carousel.tsx) | [문서](../components/carousel.md) | [Data & Display/Carousel](../../src/components/carousel.stories.tsx) |
+| Checkbox | `Checkbox`<br>[구현](../../packages/ui/src/components/ui/checkbox.tsx) | [문서](../components/checkbox.md) | [Form/Checkbox](../../src/components/checkbox.stories.tsx) |
+| Collapsible | `Collapsible`, `CollapsibleContent`, `CollapsibleTrigger`<br>[구현](../../packages/ui/src/components/ui/collapsible.tsx) | [문서](../components/collapsible.md) | [Disclosure/Collapsible](../../src/components/collapsible.stories.tsx) |
+| Combobox | `Combobox`, `ComboboxOption`, `ComboboxSize`<br>[구현](../../packages/ui/src/components/ui/combobox.tsx) | [문서](../components/combobox.md) | [Search & Date/Combobox](../../src/components/combobox.stories.tsx) |
+| Command | `Command`, `CommandEmpty`, `CommandGroup`, `CommandInput`, `CommandItem`, `CommandList`, `CommandSeparator`, `CommandShortcut`<br>[구현](../../packages/ui/src/components/ui/command.tsx) | [문서](../components/command.md) | [Search & Date/Command](../../src/components/command.stories.tsx) |
+| Context Menu | `ContextMenu`, `ContextMenuCheckboxItem`, `ContextMenuContent`, `ContextMenuGroup`, `ContextMenuItem`, `ContextMenuLabel`, `ContextMenuPortal`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubContent`, `ContextMenuSubTrigger`, `ContextMenuTrigger`<br>[구현](../../packages/ui/src/components/ui/context-menu.tsx) | [문서](../components/context-menu.md) | [Overlay/Context Menu](../../src/components/context-menu.stories.tsx) |
+| Date Picker | `DatePicker`, `DatePickerSize`<br>[구현](../../packages/ui/src/components/ui/date-picker.tsx) | [문서](../components/date-picker.md) | [Search & Date/Date Picker](../../src/components/date-picker.stories.tsx) |
+| Dialog | `Dialog`, `DialogBody`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`<br>[구현](../../packages/ui/src/components/ui/dialog.tsx) | [문서](../components/dialog.md) | [Overlay/Dialog](../../src/components/dialog.stories.tsx) |
+| Drawer | `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`<br>[구현](../../packages/ui/src/components/ui/drawer.tsx) | [문서](../components/drawer.md) | [Overlay/Drawer](../../src/components/drawer.stories.tsx) |
+| Dropdown Menu | `DropdownMenu`, `DropdownMenuCheckboxItem`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuPortal`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`<br>[구현](../../packages/ui/src/components/ui/dropdown-menu.tsx) | [문서](../components/dropdown-menu.md) | [Overlay/Dropdown Menu](../../src/components/dropdown-menu.stories.tsx) |
+| Hover Card | `HoverCard`, `HoverCardContent`, `HoverCardTrigger`<br>[구현](../../packages/ui/src/components/ui/hover-card.tsx) | [문서](../components/hover-card.md) | [Overlay/Hover Card](../../src/components/hover-card.stories.tsx) |
+| Input | `Input`, `InputSize`<br>[구현](../../packages/ui/src/components/ui/input.tsx) | [문서](../components/input.md) | [Form/Input](../../src/components/input.stories.tsx) |
+| Label | `Label`<br>[구현](../../packages/ui/src/components/ui/label.tsx) | [문서](../components/label.md) | [Form/Label](../../src/components/label.stories.tsx) |
+| Menubar | `Menubar`, `MenubarCheckboxItem`, `MenubarContent`, `MenubarGroup`, `MenubarItem`, `MenubarLabel`, `MenubarMenu`, `MenubarPortal`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubContent`, `MenubarSubTrigger`, `MenubarTrigger`<br>[구현](../../packages/ui/src/components/ui/menubar.tsx) | [문서](../components/menubar.md) | [Navigation/Menubar](../../src/components/menubar.stories.tsx) |
+| Navigation Menu | `NavigationMenu`, `NavigationMenuContent`, `NavigationMenuIndicator`, `NavigationMenuItem`, `NavigationMenuLink`, `NavigationMenuList`, `NavigationMenuTrigger`, `NavigationMenuViewport`<br>[구현](../../packages/ui/src/components/ui/navigation-menu.tsx) | [문서](../components/navigation-menu.md) | [Navigation/Navigation Menu](../../src/components/navigation-menu.stories.tsx) |
+| Pagination | `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious`<br>[구현](../../packages/ui/src/components/ui/pagination.tsx) | [문서](../components/pagination.md) | [Navigation/Pagination](../../src/components/pagination.stories.tsx) |
+| Popover | `Popover`, `PopoverAnchor`, `PopoverClose`, `PopoverContent`, `PopoverTrigger`<br>[구현](../../packages/ui/src/components/ui/popover.tsx) | [문서](../components/popover.md) | [Overlay/Popover](../../src/components/popover.stories.tsx) |
+| Progress | `Progress`<br>[구현](../../packages/ui/src/components/ui/progress.tsx) | [문서](../components/progress.md) | [Data & Display/Progress](../../src/components/progress.stories.tsx) |
+| Radio Group | `RadioGroup`, `RadioGroupItem`<br>[구현](../../packages/ui/src/components/ui/radio-group.tsx) | [문서](../components/radio-group.md) | [Form/Radio Group](../../src/components/radio-group.stories.tsx) |
+| Resizable | `ResizableHandle`, `ResizablePanel`, `ResizablePanelGroup`<br>[구현](../../packages/ui/src/components/ui/resizable.tsx) | [문서](../components/resizable.md) | [Disclosure/Resizable](../../src/components/resizable.stories.tsx) |
+| Scroll Area | `ScrollArea`, `ScrollBar`<br>[구현](../../packages/ui/src/components/ui/scroll-area.tsx) | [문서](../components/scroll-area.md) | [Data & Display/Scroll Area](../../src/components/scroll-area.stories.tsx) |
+| Select | `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`, `SelectSize`<br>[구현](../../packages/ui/src/components/ui/select.tsx) | [문서](../components/select.md) | [Form/Select](../../src/components/select.stories.tsx) |
+| Separator | `Separator`<br>[구현](../../packages/ui/src/components/ui/separator.tsx) | [문서](../components/separator.md) | [Data & Display/Separator](../../src/components/separator.stories.tsx) |
+| Sheet | `Sheet`, `SheetBody`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetOverlay`, `SheetPortal`, `SheetTitle`, `SheetTrigger`<br>[구현](../../packages/ui/src/components/ui/sheet.tsx) | [문서](../components/sheet.md) | [Overlay/Sheet](../../src/components/sheet.stories.tsx) |
+| Skeleton | `Skeleton`<br>[구현](../../packages/ui/src/components/ui/skeleton.tsx) | [문서](../components/skeleton.md) | [Data & Display/Skeleton](../../src/components/skeleton.stories.tsx) |
+| Slider | `Slider`<br>[구현](../../packages/ui/src/components/ui/slider.tsx) | [문서](../components/slider.md) | [Form/Slider](../../src/components/slider.stories.tsx) |
+| Sonner | `Toaster`, `toast`, `ExternalToast`, `ToasterProps`<br>[구현](../../packages/ui/src/components/ui/sonner.tsx) | [문서](../components/sonner.md) | [Feedback/Sonner](../../src/components/sonner.stories.tsx) |
+| Switch | `Switch`<br>[구현](../../packages/ui/src/components/ui/switch.tsx) | [문서](../components/switch.md) | [Form/Switch](../../src/components/switch.stories.tsx) |
+| Table | `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`<br>[구현](../../packages/ui/src/components/ui/table.tsx) | [문서](../components/table.md) | [Data & Display/Table](../../src/components/table.stories.tsx) |
+| Tabs | `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`, `TabsPanelSurface`<br>[구현](../../packages/ui/src/components/ui/tabs.tsx)<br>기본 `<TabsList>` = Primary (`fill=true`, `panelSurface="content"`). Secondary: `fill panelSurface="surface"`. Legacy: `fill={false}` (panelSurface 시각 무시). 패널은 Primary `bg-background`, Secondary / Legacy `bg-card`로 조합한다 | [문서·기본값 변경 영향](../components/tabs.md) | [Navigation/Tabs](../../src/components/tabs.stories.tsx) |
+| Textarea | `Textarea`, `TextareaResize`<br>[구현](../../packages/ui/src/components/ui/textarea.tsx) | [문서](../components/textarea.md) | [Form/Textarea](../../src/components/textarea.stories.tsx) |
+| Toggle | `Toggle`, `toggleVariants`<br>[구현](../../packages/ui/src/components/ui/toggle.tsx) | [문서](../components/toggle.md) | [Form/Toggle](../../src/components/toggle.stories.tsx) |
+| Toggle Group | `ToggleGroup`, `ToggleGroupItem`<br>[구현](../../packages/ui/src/components/ui/toggle-group.tsx) | [문서](../components/toggle-group.md) | [Form/Toggle Group](../../src/components/toggle-group.stories.tsx) |
+| Tooltip | `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`<br>[구현](../../packages/ui/src/components/ui/tooltip.tsx) | [문서](../components/tooltip.md) | [Overlay/Tooltip](../../src/components/tooltip.stories.tsx) |
+
+`packages/ui/src/index.ts`에는 위 44개 Component 모듈의 named export 222개(값과 type 포함)가 연결되어 있다. 사용 시 API·Props·Variant·주요 상태·Theme 연결은 해당 Component 문서의 API/상태/Token/Storybook 절을 따른다. 문서 45개 중 `field.md`는 별도 `field.tsx` 공개 Component를 나타내지 않는 Field 소비 가이드다.
+
+## Pattern
+
+현재 개발 저장소와 포터블 r3의 `packages/ui/src/patterns/`에는 8개 디렉터리와 62개 named export(값과 type 포함)가 있다. 역사적 오전 배포 기준 `HMDesignTest.zip`에는 7개 Pattern 모듈과 50개 named export가 있었다. Pattern 소스 디렉터리, Story 파일, Story 그룹 수는 별도 집계다.
+
+| Pattern / 분류 | 공개 API 위치 | 사용 문서 | 대표 Reference / 계약 |
+|---|---|---|---|
+| Dashboard Layout — Layout Pattern | 운영: `DashboardLayout`, `DashboardHeader`, `DashboardMain`, `DashboardContent`, `DashboardLayoutProps`.<br>기존 호환성·검증용: `DashboardSidebar`, 선택적 `sidebar` slot. 공개 Export 존재는 운영 허용을 뜻하지 않음 | [dashboard-layout.md](../patterns/dashboard-layout.md) | [Patterns/Layout/Dashboard → Dashboard](../../src/patterns/dashboard-layout.stories.tsx) — Sidebar 없는 48px Header·업무 상태 필터·960px 최소 폭 |
+| Dashboard Status — Runtime 상태 계약 | `countDashboardFilter`, `dashboardFilterDefinitions`, `dashboardFilterIds`, `dashboardStatusAttributes`, `dashboardStatusDefinitions`, `matchesDashboardFilter`, `DashboardFilterDefinition`, `DashboardFilterId`, `DashboardStatusDefinition`, `DashboardStatusId`, `DashboardStatusRecord`, `DashboardStatusTone` | [Dashboard 문서의 상태 계약 절](../patterns/dashboard-layout.md#3-storybook) | **최신 포터블 테스트 ZIP에 export·소스·CSS·Static HTML·빌드 결과 포함. 오전 ZIP에는 없음.** [현재 contract.ts](../../packages/ui/src/patterns/dashboard-status/contract.ts), [Runtime-neutral CSS](../../src/patterns/dashboard-status-contract.css), [React 대표 Story](../../src/patterns/dashboard-layout.stories.tsx), [Static HTML 예제](../patterns/dashboard-status-static.html) |
+| Data Table — 여러 Component 조합 Pattern | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions`, `dataTableSelectColumn`, `useDataTable`, `DataTableColumnDef`, `DataTableInstance`, `DataTableOptions`, `DataTableProps` | [data-table.md](../patterns/data-table.md) | [Patterns/Data/Data Table → Data Table](../../src/patterns/data-table.stories.tsx) |
+| Filter Bar — 여러 Component 조합 Pattern | `FilterBar`, `FilterBarActions`, `FilterBarSearch` 및 `FilterBarSearchProps` | [filter-bar.md](../patterns/filter-bar.md) | [Patterns/Data/Filter Bar → Filter Bar](../../src/patterns/filter-bar.stories.tsx) |
+| GNB — Navigation Pattern | `GNB`, `GNBBrand`, `GNBMobileGroup`, `GNBMobileLink`, `GNBMobileMenu`, `GNBNav`, `GNBUser`, `GNBUtilities`, `GNBMobileMenuProps`, `GNBUserProps` | [gnb.md](../patterns/gnb.md) | [Patterns/Layout/GNB](../../src/patterns/gnb.stories.tsx) |
+| LNB — Navigation Pattern | `LNB`, `LNBBrand`, `LNBGroup`, `LNBItem`, `LNBNav`, `LNBProfile`, `LNBMobileHeader`, `LNBMobileBrand`, `LNBMobileMenu`, `LNBMobileLink`, `LNBMobileGroup`, `LNBMobileMenuProps`, `LNBGroupProps`, `LNBProfileProps` | [lnb.md](../patterns/lnb.md) | [Patterns/Layout/LNB](../../src/patterns/lnb.stories.tsx) |
+| Loading Screen — 화면 UI Pattern | `LoadingScreen` | [loading-screen.md](../patterns/loading-screen.md) | [Patterns/Layout/Loading Screen](../../src/patterns/loading-screen.stories.tsx) |
+| Page Header — 화면 구성 Pattern | `PageHeader`, `PageHeaderActions`, `PageHeaderContent`, `PageHeaderDescription`, `PageHeaderTitle` | [page-header.md](../patterns/page-header.md) | [Patterns/Layout/Page Header → Page Header](../../src/patterns/page-header.stories.tsx) (`patterns-layout-page-header--all`). Breadcrumb + Title + Description + 단일 Brand Action. [Dashboard 조합](../../src/patterns/dashboard-layout.stories.tsx)은 Dashboard Layout 계약을 따름 |
+
+Data Table은 기존 Table·Pagination·Checkbox·Select·Dropdown Menu 등을 조합한다. 연동 예제가 필요하면 Data Table Story 안의 `With Filter Bar`를 참고하되 숨김 `verification` Story이므로 일반 화면의 단독 기본 Reference로 삼지 않는다. Filter Bar는 단독으로도 사용 가능하며 검색·Select·Combobox·Date Picker 등 조회 조건의 layout이다. Dashboard 빠른 상태 필터는 Filter Bar API가 아니라 Dashboard Status 계약을 따른다.
+
+오전 소스 ZIP을 받은 AI는 Dashboard Status 행의 현재 개발 경로를 사용할 수 있다고 가정하지 않는다. 최신 포터블 ZIP에서는 해당 상대경로와 공개 API를 사용할 수 있다. ZIP에 실제 포함된 Dashboard 구현·Story와 해당 ZIP 안의 Dashboard 문서를 확인하고, Status 공개 API가 없으면 없다고 보고한다.
+
+## Reference 읽는 순서
+
+### 화면 생성 시 놓치기 쉬운 소비 계약
+
+- Navigation 미지정: [선택 근거](navigation-single-mode.md#선택-근거)를 기록한다. GNB/LNB의 목적과 대표 화면 구조로 판단하며 일반 목록의 기본 모드를 임의 확정하지 않는다.
+- GNB ONLY: [Desktop·Mobile 구성](../patterns/gnb.md#8-desktop--mobile)을 함께 구현한다. 대표 `patterns-layout-gnb--all`의 Overview·Usage · GNB Sidebar를 확인하고 [Sidebar 예제](../patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08)도 Sheet 하나만 사용한다.
+- LNB ONLY: 기존 독립 LNB 구조와 [LNB Mobile Header/Menu](../patterns/lnb.md#3b-lnb-mobile-header-2026-10-07)를 유지한다.
+- DASHBOARD ONLY: Sidebar를 생성하지 않는다. 대표 `patterns-layout-dashboard-layout--all`의 전용 Header(48px)·업무 상태 필터 + Content, 최소 폭 960px·내부 가로 스크롤을 따른다. `DashboardSidebar`와 `sidebar` slot은 호환성·검증용이며 과거 Sidebar verification Story는 신규 운영 화면 구현 기준이 아니다.
+- Dashboard Status: 공개 `@hm-design/ui/dashboard-status.css`는 변수만 제공한다. [Theme → Status CSS → 기존 Outline Badge mapping·React 소비 예제](../patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)를 사용한다. `issue`는 독립 flag다. [Static HTML Reference](../patterns/dashboard-status-static.html)도 같은 계약을 소비한다.
+- FilterBar: [입력 draft / 조회 applied·초기화 예제](../patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제)를 확인한다. 대표 `patterns-data-filter-bar--all`은 조회 callback 없는 조합 예시이며 DataTable의 `patterns-data-data-table--with-filter-bar-story`는 즉시 적용 verification이다.
+- React 소비 CSS: [Tailwind v4 검색 범위와 HM source 유지](runtime-portability.md#21-tailwind-v4-소비자-검색-범위), [Runtime Theme 연결](runtime-theme.md)을 확인한다.
+- 실행 위치별 Asset: [Noto Sans KR·폰트 URL·단일 HTML 내장](runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)을 확인한다.
+
+### 탐색 절차
+
+1. 이 인덱스에서 후보를 찾고 실제 파일·공개 API가 존재하는지 확인한다.
+2. 사용 문서에서 Props/Variant, 상태, Theme Token, 조합 규칙을 확인한다.
+3. 대표 Story에서 시각 언어와 실제 composition을 확인한다. Storybook을 실행할 수 없으면 Story 소스에서 확인한다.
+4. `verification` Story는 계약·상태 검사로, Compatibility 예제는 호환성 확인으로, Fixture는 시각 테스트 데이터로 분류한다. 이들을 Production API나 운영 화면 예제로 일반화하지 않는다.
+5. Dashboard는 GNB/LNB와 함께 사용하지 않는다. 허용되는 페이지 모드와 Responsive 규칙은 [Navigation Single Mode Policy](navigation-single-mode.md)를 따른다.
+6. Theme Source of Truth는 `themes/default.json` 및 공개 Runtime 계약이다. Component Token/상태 mapping은 연결된 Theme 문서를 확인한다.
+
+정적 Storybook 빌드가 없거나 실행할 수 없는 환경에서는 확인된 Story 소스와 문서만 근거로 삼고, 검증하지 않은 시각 동작은 미확인으로 보고한다.
diff --git a/docs/guidelines/consistency-audit-2026-10-06.md b/docs/guidelines/consistency-audit-2026-10-06.md
new file mode 100644
index 0000000..b9a9805
--- /dev/null
+++ b/docs/guidelines/consistency-audit-2026-10-06.md
@@ -0,0 +1,93 @@
+# HMDesignSystem 전체 정합성 감사 — 2026-10-06
+
+> HISTORICAL_RECORD: 2026-10-06 감사 시점의 저장소 상태·실측·보류 판단을 보존한다. 이후 상태 정책과 구현을 이 기록으로 대체하지 않는다. 현재 Component/Pattern 상태는 각 [Component 문서](../components/)/[Pattern 문서](../patterns/), Runtime 적용은 [Runtime Theme](runtime-theme.md), Designer 사용은 [Theme 가이드](designer-theme-guide.md)를 따른다.
+
+현재 Production 코드와 실제 Storybook을 1차 기준으로 새로 대조했다. 문서/CLAUDE.md는 비교 대상이며 과거 작업 보고서의 검증 수치를 이번 결과로 재사용하지 않았다. 수정 전 분류를 먼저 보고한 뒤 명백한 불일치만 수정했다.
+
+## 범위와 현재 구조
+
+- `packages/ui`: private source export 패키지. Component, 7개 Pattern, CSS Theme와 `@hm-design/ui/theme` Runtime API를 소유한다.
+- `packages/center-graphic`: UI와 서로 의존하지 않는 private source export 패키지. 통합 Storybook에서 별도 그룹으로 제공한다.
+- 루트 `src`, `.storybook`: Demo와 Component/Pattern/Theme/CENTER Story. UI 44개 그룹, Pattern 6개 그룹(Page Header는 Dashboard에서 조합), 전체 56개 Story 파일을 확인했다.
+- 대조 문서: Component 45개(Field 소비 가이드 포함), Pattern 7개, 기존 guideline 9개 및 CLAUDE.md/README.md. 현재 API·상태·Token·Story 경로를 비교하고 날짜가 있는 과거 검증 기록은 이력으로 읽었다.
+- 현재 루트에 `.git`이 없다. Git diff/커밋 검증 대신 수정 전 확보한 파일과 로컬 변경 기록을 사용했다. 과거 기준 화면 snapshot과 보고서/CSV를 재생성하지 않았다.
+
+Theme 흐름은 `primitives.css` → `default.css`의 Semantic/Theme palette 및 shadcn adapter → Component Mapping → CSS selector/utility → 실제 UI다. `theme.css`가 Default를 먼저 import한다. Component Mapping은 `:root, [data-hm-theme]`에서 다시 계산된다.
+
+Runtime 계약은 `contract.ts`의 73개 입력이며 `runtime.ts`가 unknown 입력 전체를 검증한다. 색상은 6자리 불투명 HEX, input/container radius는 2–12px 정수, gradient는 세트 전체 또는 미지정이다. Partial/empty, atomic invalid fallback, 교체/cleanup, host inline value/priority 복원을 지원한다. Global 아래 명시적 Scoped Theme는 독립 HM Default + 자기 override이며 미지정 값이 Global override를 이어받지 않는다. 네트워크 Loader와 운영 Publish는 아직 없다.
+
+## MATCHED — 유지한 구현
+
+- **Active / Focus 분리**: Checkbox/Radio/Switch/Slider/Progress/Calendar selected·range edge는 Active, 일반 focus border/ring은 Focus를 사용한다. Runtime에서 Primary `#6837a8`, Active `#007f73`, Focus `#c75b00`을 분리해 기존 자동 검증을 새로 실행했고 실제 Checkbox/Calendar 채움과 Focus shadow 검사를 통과했다. Default에서는 Active/일반 Focus 모두 `#266651`이나 서로 alias하지 않는다.
+- **Calendar / Date Picker**: selected와 range edge는 Active, hover/range middle은 Accent 45%, today는 Subtle Surface다. Global External에서 실제 Date Picker를 열면 body Portal의 selected day가 `rgb(0,127,115)`이고, 10/16 선택 후 닫히며 트리거로 Focus가 복귀했다. Wrapper Scoped popup의 제한은 아래 FOLLOW_UP이다.
+- **Badge / Pagination**: Default Badge와 Pagination Current는 Primary Green(Default `#123328`). Global External에서는 둘 다 Primary purple로 바뀌고 Active teal과 구분된다. 실제 Pagination 일반 링크 hover는 Accent yellow 45%, Current는 Primary를 유지했다.
+- **Table / Data Table**: row hover/selected는 공통 Accent 45%. Global Table에서 실제 hover/selected를 같은 `color(srgb 1 0.827451 0.427451 / 0.45)`로 확인했다. Data Table에서 행 선택 후 선택 면은 Default Accent 45%, Checkbox는 전환 종료 후 `rgb(38,102,81)`(Active), Current 페이지는 `rgb(18,51,40)`(Primary), 선택 요약은 `1개 선택됨 · 전체 47개`였다. Header 팔레트 장식은 별도 정책이다.
+- **LNB 3Depth**: 기존 LNBGroup 중첩/Collapsible 조합을 유지한다. 3Depth 행 48px, padding-start 88px, weight 500/current 700, connector 40%와 current 배경·상위 노랑을 코드 및 실제 DOM으로 대조했다. Enter/Space 접기·펼치기와 소비자가 제어하는 중첩 open 상태가 유지된다.
+- **Brand / Mobile / Scroll**: GNB+LNB는 GNBBrand 1개와 LNBBrand 0개. Standalone은 desktop LNBBrand, mobile Local bar의 서비스명으로 대체한다. 1023px에서는 GNB 56px/LNB hidden, 1024px에서는 GNB 70px/LNB 표시, 문서 폭은 viewport와 같다. 높이 700에서 LNB nav는 y=98→610, client 512/scroll 526; 실제 scrollTop=14에도 Profile y=610, GNB y=0을 유지했다. nav RTL/내용 LTR로 scrollbar를 시작 쪽에 배치한다. Standalone Mobile Sheet의 지역 3Depth 메뉴, Escape 닫힘과 `서비스 메뉴` 트리거 Focus 복귀를 확인했다.
+- **Dashboard composition**: header/sidebar/children slot과 main scroll 소유권, desktop GNB/LNB 접점 및 mobile 전환이 현재 문서와 일치한다. KPI/Filter Bar/Data Table은 공개 primitive/pattern 조합이다. GNB+LNB 조립은 이미 구현되어 있다.
+- **Dialog Wide Table**: 390px viewport에서 Dialog 358px, 문서 scrollWidth 390px, Table container client 308px/scrollWidth 1600px/overflow-x auto. 가로 스크롤은 내부 Table container가 소유한다. Header 13/20, Cell 14/20, padding 14/12를 유지하고 Escape 후 `넓은 표` 트리거 Focus 복귀를 확인했다.
+- **Filter Bar Search Input**: 기본 padding-start 36px, focus 상태 35.5px 보정으로 아이콘 뒤 텍스트 시작점을 유지한다. 실제 검색 입력/조건 수/지우기와 좁은 화면 overflow를 확인했다. Input 구현/CSS는 수정하지 않았다.
+- **Storybook**: favicon override는 실제 Manager DOM에서 icon link 1개, href `data:,`로 확인했다. 최종 빌드 index는 254개 Story/56개 그룹이며 UI 44개와 Pattern 6개 그룹은 각각 대표 Story 하나다. Theme 4개 Story는 verification으로 기본 숨김. 새 Progress NonDefaultMax도 숨김 verification이며 대표 Story에 같은 specimen이 있다.
+
+## DOC_FIX — 수정 완료
+
+- Component/Pattern의 오래된 Story 경로를 현재 category/title로 갱신했다. Page Header는 별도 Story 없이 `Patterns/Layout/Dashboard Layout`에서 사용한다.
+- Primitive 직접 참조 설명을 현재 Semantic/Theme palette 연결에 맞췄다. Input/Textarea/Radio의 Destructive, Table/Subtle, Slider/Progress track, Tabs/Separator/Scroll Area, GNB/LNB/Loading Screen을 대조했다.
+- Button의 로컬 HEX 잔존 설명, Select indicator 리터럴 설명, Select/Menu/Command의 full Accent 설명을 실제 palette/Accent 45% 연결로 고쳤다. Toggle on/full Accent와 Select selected/45%의 차이를 명시했다.
+- Runtime API 미구현/Preview 전용, root 아래 Production 경로, toolbar 전환, 초기 5개 Component 상태를 현재 workspaces/API/Story 구조로 정정했다. Library build/registry/Loader/Publish 목표 절차와 현재 구현을 구분했다.
+- CLAUDE.md의 Portal container API 설명을 실제 HM popup API 제한으로 바로잡았다. general Focus 설명에 기존 Slider/GNB/LNB 예외를 명시했다.
+- Data Table의 With Filter Bar를 두 번째 대표 Story라고 한 설명을 숨김 verification으로 정정했다. Filter Bar 문서의 연동 대상도 Data Table로 유지했다.
+- 과거 검증 절의 당시 색상·측정·실패/미확인 기록은 현재 결과로 덮지 않았다. Progress의 이전 max 제한에는 이번 수정 기록을 추가했다.
+
+## CODE_FIX — 수정 완료
+
+**Progress의 max 비율 계산 한 곳**을 수정했다(`packages/ui/src/components/ui/progress.tsx`). 이전에는 value를 백분율로 간주하므로 max=200/value=50에서 ARIA는 50/200인데 채움은 50%였다. 이제 유효 value/max 비율로 25% 채우며 Radix 기본 max/유효 범위 및 값 없음 상태를 따른다. 디자인/CSS/공개 API는 유지했다.
+
+`src/components/progress.stories.tsx`에 max=200의 0/50/200/값 없음 specimen과 ARIA/Indicator 회귀 검증을 추가했다. 실제 DOM은 각각 transform -100%/-75%/0%/-100%, ARIA 0/50/200/valuenow 없음으로 일치했다. 기존 max=100 대표 상태와 interactive specimen도 유지했다.
+
+Production 수정은 위 파일 1개, Story 수정은 Progress 파일 1개다. 기존 문서는 58개 파일에 경로/Token/현재 상태를 정정했으며 Component·Pattern 구현을 재작성하지 않았다.
+
+## STALE — 현재 설명에서 정리
+
+- 초기 5개 Component/Medium Preview만 구현된 상태.
+- Storybook toolbar Default/Draft 전환과 Runtime API 공개 여부를 미래 결정으로 적은 설명.
+- Dashboard가 다음 작업이거나 GNB+LNB 조립 자체가 아직 없는 상태.
+- Alert Dialog 미구현, Dialog 이후 구조 안정화 대기, Select의 근거 없는 동시 작업 추측.
+
+날짜가 있는 이전 작업 보고서, CSV, ui-viz 비교표는 폐기하지 않았다. 현재 구현 증거로 재사용하지 않고 당시 이력으로 구분했다.
+
+## AMBIGUOUS — 이번에 변경하지 않음
+
+- Slider Primary 20% halo, desktop GNB/LNB inverse outline(current는 Primary)까지 일반 Focus Semantic으로 통합할지. 현재 component 문서와 Runtime 문서는 예외를 명시하지만 일반 Focus 표현을 한 가지로 확대하면 디자인 결정이 필요하다. 일반 Focus의 Light 2 자체도 가이드에 시험 적용값으로 남아 있다.
+- GNB+LNB gradient 이음새/콘텐츠 모서리의 최종 시각 승인. 조립과 Brand ownership은 구현/확정되었고, 이 부분은 Dashboard/GNB 문서에서 확정 대기로 남아 있다.
+- 선택 경로 전체 connector 강조와 모바일 LNB의 14px 지역 메뉴/상위 current 표현 등 기존 미확정 Layout 항목. 현재 문서에 없는 최종 정책을 추정해 바꾸지 않았다.
+
+## FOLLOW_UP — 별도 작업
+
+- HM SelectContent/PopoverContent/DatePicker의 wrapper Scoped Theme 전달 API. 현재 body Portal은 Global Theme를 따르며 자동 Scoped 전달을 제공하지 않는다.
+- Date Picker/Combobox를 undefined로 비우는 controlled reset 제약(현재 문서대로 key remount 사용). 새 API/상태 모델 작업으로 분리한다.
+- FilterBarSearch에 disabled/readOnly를 전달할 때 별도 지우기 버튼의 활성 정책. 현재 input props는 Input에 전달되고 clear callback은 독립적으로 실행된다. 이번에 새 상태 계약을 만들지 않았다.
+- Center Graphic/Facility의 7개 노출 Story는 서로 다른 시설물 export를 묶은 그룹이다. UI와 같은 단일 집계 대표 Story로 정리할지 검수 구조를 별도로 결정한다. 기존 CENTER 구현은 이번에 변경하지 않았다.
+- 문서 예시를 자동 탐색해 생기는 CSS warning, Storybook chunk size와 docgen callback 성능 안내. 빌드 실패는 아니며 source 탐색/번들 최적화는 별도 범위다.
+- Library 산출물/Registry, 네트워크 Loader, Theme Publish 운영은 아직 미구현이다.
+
+## 최종 통합 검증
+
+- `npm run typecheck`: PASS / exit 0. 루트와 두 workspace 포함.
+- `npm run build`: PASS / exit 0. CSS 예시 warning 1개 유지.
+- `npm run build-storybook`: PASS / exit 0. CSS 예시 warning, 500kB chunk 안내 및 PLUGIN_TIMINGS 성능 안내가 출력되었다.
+- 현재 실제 Storybook Runtime 자동 검증: **PASS — 136 checks; 63 rendered parts**. Default parity, 73개 공개 입력, 의미 독립성, partial/empty/invalid, switching/cleanup, Global/Scoped, geometry를 새로 실행했다.
+- CSS 변수 의존성/현재 문서 Token·Story 경로/73개 계약표를 정적으로 대조했다. Loading spinner index는 TSX inline style로 선언되며 LNB collapsed-width는 문서에서 명시적으로 없는 변수다.
+- 최종 빌드 index에서 대표/verification 태그와 신규 NonDefaultMax 포함을 확인했다. 전체 254개 Story의 모든 play/interaction을 실행했다는 의미는 아니다. 실제 동작 검수는 위 핵심 대상에 집중했으며 다른 브라우저/실기기는 미검증이다.
+
+로그/변경 기록: `_local/consistency-typecheck.log`, `consistency-build.log`, `consistency-storybook-build.log`, `consistency-audit-data.json`, `consistency-audit-diff.txt`. 로컬 비교용 파일은 `_local/consistency-audit-before/`에 확보 시점 기준으로 보관했다. Page Header 경로 및 Loading Screen Token의 단일 문구 수동 수정은 위 수정 범위에 별도로 기록했다.
+
+화면 증거: `_local/consistency-progress.png`, `_local/consistency-progress-final.png`(실제 Manager에서 대표 Story 하나와 max=200), `_local/consistency-dialog-mobile.png`. Runtime 검증의 PASS 수치는 현재 브라우저의 result output에서 직접 읽었다.
+
+## 작업 시간 (KST)
+
+- Started At: 2026-10-06 15:03:01
+- Estimated Duration: 40–60분(분석 20–30 / 최소 수정 10–15 / 통합 검증 10–15)
+- Completed At: 2026-10-06 15:25:46
+- Actual Duration: 22분 45초
+- Variance: 예상보다 17분 15초–37분 15초 단축
diff --git a/docs/guidelines/designer-theme-guide.md b/docs/guidelines/designer-theme-guide.md
new file mode 100644
index 0000000..caf5646
--- /dev/null
+++ b/docs/guidelines/designer-theme-guide.md
@@ -0,0 +1,52 @@
+# 디자인팀 컬러 Theme 사용 방법
+
+Storybook에서 **Theme → Designer Playground → Editor**를 엽니다.
+로컬 기본 주소: http://localhost:6007/?path=/story/theme-designer-playground--editor
+
+1. 처음 열면 `themes/default.json` 기반 HM Default 컬러가 표시됩니다. **Load Default JSON**, **Load Service Example JSON**으로 repository JSON을 URL에서 불러오거나 **Theme JSON URL**에 CDN URL을 입력한 뒤 **Load URL**을 누릅니다. 같은 탭에 저장값이 있다면 마지막 유효 Theme를 다시 표시합니다. **Reset to HM Default**로 기본값을 다시 불러옵니다.
+2. Primary / Active / Focus / Accent / Destructive 등 역할의 컬러 피커 또는 HEX 입력을 수정합니다. 불투명 6자리 HEX(`#123abc`)를 사용합니다. 유효한 값은 입력 즉시 적용되며 별도의 Apply 버튼이 필요 없습니다. 미완성 입력은 마지막 유효 색을 유지합니다.
+3. 오른쪽 Live Preview에서 여러 컴포넌트를 함께 확인합니다. 화면이 좁으면 편집기 아래에 Preview가 이어집니다. Focus 확인은 Tab 키로 Checkbox/Input 등에 이동합니다. Select, Date Picker, Combobox 및 메뉴를 열면 Global Theme가 팝업에도 적용됩니다.
+4. 다른 Component / Pattern Story로 이동해도 같은 Theme를 확인할 수 있습니다. 값 변경 자체에는 reload, 파일 저장, Vite HMR, build, Storybook 재시작이 필요 없습니다. 기존 Runtime Contract 검증 Story는 독립 검증을 위해 편집 Theme를 적용하지 않습니다.
+5. **Reset to HM Default**는 현재 override를 해제하고 기본값을 즉시 복원합니다. 컴포넌트 API와 레이아웃은 바꾸지 않습니다.
+6. **Show JSON**으로 현재 데이터를 표시하고 **Copy JSON**으로 복사하거나 **Export JSON**으로 `hm-color-theme.json`을 내려받습니다. 클립보드 접근이 막히면 JSON 입력란에서 직접 복사합니다. 수정한 키만 저장하므로 나머지는 HM Default입니다.
+7. JSON을 입력란에 붙여 넣고 **Import JSON**을 누르거나 파일 입력으로 JSON을 선택하면 바로 적용됩니다. 이전 Theme와 병합하지 않고 새 Theme로 교체합니다. 잘못된 JSON/키/값/불완전한 gradient 그룹은 거부하고 마지막 유효 Theme를 유지합니다. 이 편집기는 컬러 전용이므로 radius 입력을 거부합니다.
+8. Export한 JSON을 `themes/<서비스명>.json`에 저장하고 검증·Git diff/review·commit/push 후 Theme artifact를 CDN에 별도 배포합니다. 개발팀은 설정한 Theme URL을 `loadRuntimeTheme`에 전달하거나 API/로컬 JSON을 `applyRuntimeTheme`에 전달하면 됩니다. 이미 지원하는 Theme JSON의 color-only 변경에는 UI package 재빌드·version up·재배포가 필요 없습니다. Component CSS 규칙이나 Runtime 계약 변경은 package 릴리스 경로를 따릅니다. 자세한 배포 절차: [Theme delivery](theme-delivery.md).
+
+```ts
+import "@hm-design/ui/theme.css"
+import { applyRuntimeTheme, resetRuntimeTheme, isRuntimeTheme } from "@hm-design/ui/theme"
+
+// 설정/API/사용자 입력에서 받아온 공식 v1 Theme JSON.
+const theme = { schemaVersion: 1, tokens: { "color.state.active": "#007f73" } }
+if (isRuntimeTheme(theme)) applyRuntimeTheme(document.documentElement, theme)
+// 같은 root에 새로운 Theme를 전달하면 즉시 교체된다.
+// isRuntimeTheme은 DOM을 건드리지 않는 사전 검증이다.
+resetRuntimeTheme(document.documentElement)
+```
+
+## 컬러 역할과 적용 범위
+
+- Primary는 Badge default, Pagination current, Button outline 및 내비게이션 강조 글자에 적용합니다. Brand Button/GNB의 gradient와 일부 palette 장식은 별도 기존 계약을 유지합니다. Primary 하나로 모든 gradient stop을 재설계하지 않습니다.
+- Active는 Checkbox, Radio, Switch, Slider, Progress 및 Calendar/Date Picker의 선택 면을 바꿉니다. Focus와 독립적입니다. On Active는 그 위 아이콘/텍스트입니다.
+- Focus는 일반 입력 테두리와 Checkbox/Calendar 등의 ring, Slider Keyboard Focus의 Focus Semantic 20% halo입니다. Slider Hover/Drag halo는 Primary 20%이며 GNB/LNB는 contextual navigation focus 예외를 유지합니다.
+- Accent 45%는 Select/메뉴 Item/Calendar range middle·hover/Pagination hover/Table hover·selected의 Soft Highlight 면입니다. Combobox는 Command를 조합하므로 같은 강조 역할을 사용합니다. Toggle/Toggle Group Selected, Menubar 상위 Highlighted/Open 및 Navigation Menu Trigger/Open은 Accent 100% + On Accent를 사용합니다. Navigation Current는 Primary + contextual surface로 Control Active와 구분합니다.
+- Destructive는 오류, invalid 및 destructive 표현입니다. Primary/Active/Focus와 독립적입니다.
+- 각 입력란은 Default JSON + partial override의 실제 계산된 역할 값을 표시합니다. Export는 표시값 전체가 아니라 명시적으로 수정·Import한 데이터를 저장합니다. Primary와 On Accent는 sibling Semantic이며 Default JSON과 CSS-only package fallback 모두 독립값을 유지합니다. 기본값이 같아도 Primary override가 On Accent를 함께 바꾸지는 않습니다.
+
+## 저장과 알려진 제한
+
+- 서버/DB/Publish 기능은 없습니다. 같은 브라우저 탭의 Storybook preview origin에 `sessionStorage`로 보관하며, 세션 저장을 사용할 수 없는 환경에서도 현재 화면의 편집/Export는 동작합니다. 장기 보관은 JSON Export를 사용하세요.
+- Global Theme는 `document.documentElement`에 적용하며 body Portal도 같은 Theme를 사용합니다. wrapper 밖으로 Portal된 popup은 Scoped Theme를 자동 전달받지 않습니다. 이 제한은 기존 FOLLOW_UP입니다.
+- 전체 Runtime Contract는 73개 입력을 유지합니다. 배포하는 Default JSON은 71개 컬러이며 radius/geometry는 package에서 관리합니다. 편집 화면은 상위 컬러 역할 17개만 노출하며 Component Token, radius, palette/gradient 개별 입력 UI를 만들지 않습니다. 기존 컬러 계약의 palette/gradient는 유효 JSON으로 Import할 수 있으며 gradient는 세트 전체를 제공해야 합니다.
+- 명시적 `[data-hm-theme]` scope는 독립 HM preset이므로 Global Theme를 이어받지 않습니다. Production에서 같은 root는 한 owner가 Apply/Reset을 관리합니다.
+- Storybook 편집기 설치는 이번 코드 변경을 적용하는 최초 빌드가 필요합니다. 설치 후 컬러 값을 바꾸는 운영에는 재빌드가 필요 없습니다.
+
+## 개발팀의 Default 유지보수
+
+Default 컬러의 사람이 관리하는 원본은 `themes/default.json`입니다. `contract.ts`는 공개 key/property/type을 정의하고 Default literal을 중복 소유하지 않습니다. `scripts/theme-templates/`는 컬러 literal 없이 alias/geometry만 유지합니다.
+
+Storybook의 `src/theme/designer-preview.tsx`는 `themes/default.json`을 직접 import합니다. 디자인팀이 `default.json`을 수정하면 개발 서버의 Storybook HMR로 기본값이 갱신됩니다. Preview는 이 Default와 partial override를 병합하며, Reset은 override를 비워 현재 Default를 확인합니다.
+
+Theme-only 배포는 `npm run build:themes`로 독립 JSON artifact만 생성합니다. UI package의 fallback snapshot까지 새 버전에서 갱신할 때 `npm run generate:theme-defaults`로 `primitives.css`, `default.css`, `default-values.generated.ts`를 생성합니다. `typecheck`, `build`, `build-storybook`의 pre hook은 생성 결과의 일치를 검사합니다. 이미 배포한 UI package를 그대로 두고 CDN JSON만 바꿀 수 있습니다.
+
+공식 전체 입력표: [Runtime Theme Contract](runtime-theme-contract.md). Runtime 적용·제한: [Runtime Theme](runtime-theme.md).
diff --git a/docs/guidelines/designer-theme-report.md b/docs/guidelines/designer-theme-report.md
new file mode 100644
index 0000000..636e93b
--- /dev/null
+++ b/docs/guidelines/designer-theme-report.md
@@ -0,0 +1,150 @@
+# 디자인팀 External Runtime Color Theme 운영 결과
+
+> HISTORICAL_RECORD: 작성·검증 시점(2026-10-06)의 기록이다. 아래 baseline·실측·당시 Slider/On Accent 설명을 보존한다. 현재 Slider Focus, 독립 On Accent fallback, Default JSON 직접 import/Preview/Reset 흐름은 [디자인팀 Theme 가이드](designer-theme-guide.md), Runtime 계약은 [Runtime Theme](runtime-theme.md), 배포는 [Theme delivery](theme-delivery.md)를 따른다.
+
+기준: `main` / `d1015309ab43fba69c8959a3dda660358e0e8fa1`. 시작 시 HEAD 일치, working tree clean을 실제 확인했다. 이전 감사 문서의 수치는 이번 증거로 재사용하지 않았다.
+
+## 1. 기존 Runtime Theme 구조
+
+`packages/ui/src/theme/runtime.ts`의 framework-independent Apply/Reset은 이미 `@hm-design/ui/theme`에서 공개되어 있었다. `src/theme/preview.ts`는 이 API를 재수출하는 Storybook 호환 adapter였다. Production API와 Preview를 동일시하지 않고 실제 package export를 확인했다. CSS의 Primitive → Default/Semantic → Component Mapping을 유지한다.
+
+## 2. 기존에 가능했던 디자인팀 작업
+
+공식 v1 JSON과 CSS variable override, Default preset 데이터, 부분/빈 Theme, invalid fallback, Global/Scoped, 원래 inline 값/priority cleanup이 가능했다. Comparison/GlobalExternal/Verification/Dashboard는 개발·검증용 숨김 Story였다. 디자인팀의 직접 편집·전달 workflow는 없었다.
+
+## 3. 부족했던 것과 구현
+
+JSON을 컬러 원본으로 연결하고 URL fetch/검증·Apply 분리, Default/partial resolve, CDN 실패 fallback, Theme JSON 독립 산출을 추가했다. 기존 편집기를 JSON URL/파일 Preview 소비자로 재사용하고 Default 표시/같은 세션의 여러 Story 확인/즉시 Reset/Copy·Export·Import를 제공한다. DOM을 변경하지 않는 `isRuntimeTheme`은 기존 validator에서 분리했다. 새 Theme engine/React Production Provider/서버/DB/Portal API는 만들지 않았다.
+
+## 4. Default HM Theme Source of Truth
+
+운영 컬러의 원본은 **`themes/default.json` / 서비스별 `themes/*.json`**이다. Default는 기존 계약의 71개 컬러 값을 포함하며 Component Token은 없다. `contract.ts`의 반복된 Default literal을 제거했다. `scripts/theme-defaults.mjs`가 JSON + 컬러 literal 없는 alias/geometry template에서 package `primitives.css`, `default.css`, `default-values.generated.ts`를 생성한다. `defaultRuntimeTheme`는 이 데이터로 구성된다. 2개 radius/geometry는 package template에 유지한다. 현재 생성 CSS의 실제 선언값/alias는 baseline과 동일하며 diff는 생성 설명 주석뿐이다.
+
+`npm run build:themes`는 Theme-only JSON 산출이며 UI/Graphic build·version up을 수행하지 않는다. 새 UI package fallback snapshot을 갱신할 때만 `npm run generate:theme-defaults`; `typecheck/build/build-storybook` pre hook은 stale 생성 데이터를 거부한다. 이미 배포한 package fallback은 해당 버전의 Default snapshot이고 최신 Default JSON은 CDN으로 독립 적용할 수 있다. 자세한 저장/배포/캐시 정책은 [Theme delivery](theme-delivery.md)에 정리했다.
+
+## 5. Public Runtime Theme Contract
+
+전체 공식 계약은 기존 73개 그대로이며 [전체 표](runtime-theme-contract.md)를 유지한다. 편집기는 아래 17개 상위 역할만 노출한다. Component Token은 노출하지 않는다. 각 입력에는 실제 계산된 컬러를 표시한다.
+
+| Theme Role | Token | Default | Runtime Editable | 영향 |
+|---|---|---|---|---|
+| Primary / Brand | `color.action.primary` | `#123328` | Yes | Badge, Pagination current, Button outline, navigation current ink |
+| Active / Selected | `color.state.active` | `#266651` | Yes | Checkbox, Radio, Switch, Slider, Progress, Calendar/Date Picker selected |
+| On Active | `color.on.state.active` | `#ffffff` | Yes | 선택 아이콘/텍스트 |
+| Focus | `color.stroke.input.focus` | `#266651` | Yes | 일반 입력/Checkbox/Calendar ring |
+| Accent | `color.accent` | `#bddfd4` | Yes | 45% soft highlight |
+| On Accent | `color.on.accent` | `#123328` | Yes | 강조 면 글자; JSON Default에서는 독립값 |
+| Destructive | `color.action.destructive` | `#d32f2f` | Yes | 오류, invalid, destructive |
+| Surface | `color.bg.surface` | `#ffffff` | Yes | Input, Card, Popup |
+| Content Surface | `color.bg.content` | `#f5f0e5` | Yes | 콘텐츠 면 |
+| Subtle Surface | `color.bg.subtle` | `#f4f1ea` | Yes | 은은한 면, Calendar today |
+| Text Primary | `color.fg.primary` | `#0a221d` | Yes | 주요 텍스트 |
+| Text Secondary | `color.fg.secondary` | `#6e6759` | Yes | 보조 텍스트 |
+| Placeholder | `color.fg.placeholder` | `#999999` | Yes | 입력 안내 |
+| Inverse Text | `color.fg.inverse` | `#ffffff` | Yes | 반전 텍스트 |
+| Default Border | `color.stroke.default` | `#9a9284` | Yes | 컨트롤/Badge/Scroll Area |
+| Input Border | `color.stroke.input.default` | `#dedbd2` | Yes | 입력/패널 |
+| Cancel | `color.action.cancel` | `#6e6759` | Yes | 취소 동작 |
+
+## 6. Live Theme Apply 경로
+
+Designer JSON URL/file/HEX → 공식 v1 `RuntimeTheme` → Storybook 세션 store → `resolveRuntimeTheme(theme, defaultJson)` → Global decorator → Production `applyRuntimeTheme(document.documentElement, theme)` → inline CSS Custom Properties → 기존 Semantic/Derived/Component Mapping → Components/body Portal.
+
+Production은 서비스 설정 URL → `fetchRuntimeTheme` → 기존 validation → 선택적 Default/partial resolve → Apply이며, 편의 함수 `loadRuntimeTheme`도 같은 경로를 사용한다. Fetch와 Apply는 각각 따로 사용할 수 있다. 회사 CDN URL은 하드코딩하지 않는다.
+
+Storybook 전용 UI/저장과 Production 계약/주입 함수를 분리한다. Component는 Theme 출처를 알지 못한다.
+
+## 7. Default Theme Load
+
+처음에는 `themes/default.json` + 빈 override를 같은 Runtime 경로로 적용하고 실제 계산값으로 입력을 채운다. 같은 탭 저장값은 Default JSON 위 partial로 사용한다. Reset으로 JSON Default를 다시 적용한다. Load Default JSON 버튼은 `/themes/default.json`을 실제 fetch/검증하여 적용한다. CSS minifier의 HEX3 결과는 편집기의 공식 HEX6 표현으로 정규화한다.
+
+## 8. Live Update
+
+유효한 컬러 입력을 받은 순간 Global CSS 변수가 바뀐다. 값 변경에는 페이지 reload, 파일 저장, Vite HMR, build, Storybook 재시작/재빌드가 필요 없다. 같은 세션의 다른 Story에서도 적용한다. 기존 `Theme/Runtime Contract` 검증군은 고정 baseline과 분리하기 위해 editor override를 사용하지 않는다.
+
+## 9. Reset
+
+`Reset to HM Default`는 session override를 비우고 JSON Default를 즉시 복원한다. invalid HEX draft와 pending URL 요청도 초기화한다. Production `resetRuntimeTheme`은 원래 host inline 값/priority와 package CSS fallback을 복원하며 pending load를 무효화한다.
+
+## 10. Partial Override
+
+Export/Import는 입력 문서/명시한 key만 포함하며 부분 JSON을 지원한다. 새 Theme로 교체하여 이전 key를 남기지 않는다. Storybook과 supplied Default를 사용하는 Production resolve는 JSON Default + partial을 합친다. 별도 Default를 전달하지 않는 URL Loader는 package CSS fallback + partial을 사용한다. Primary/Active 두 역할만 전달할 수 있으며 전체 73개 값은 필요하지 않다.
+
+## 11. Export / Import
+
+Show JSON, Copy JSON(클립보드 제한 시 직접 복사), JSON 파일 다운로드, JSON 텍스트/파일 Import를 제공한다. 모두 동일한 `{schemaVersion:1,tokens:{...}}` 계약을 사용한다. 유효하지 않은 Import는 현재 Theme를 유지한다. 컬러 작업 범위의 layout 회귀를 막기 위해 편집기에서는 radius를 거부한다. Production의 기존 radius 계약은 유지한다. 서버/DB 없음; 임시 보관은 sessionStorage, 전달/장기 보관은 Export다.
+
+## 12. Production 적용 방법
+
+`import "@hm-design/ui/theme.css"` 후 `loadRuntimeTheme(document.documentElement, serviceConfig.themeUrl)`을 호출한다. 별도로 받은 Default JSON + 서비스 partial은 `resolveRuntimeTheme(serviceTheme, defaults)` 후 Apply한다. JSON fetch/validation은 `fetchRuntimeTheme`, 데이터 Apply/Reset은 기존 API로 분리한다. HTTP/JSON/validation/abort 실패 시 package HM fallback이 유지된다. 오래된 요청 응답은 새로운 Apply/Load/Reset을 덮지 않는다. 상세 실제 API 예제와 갱신/캐시 정책은 [Theme delivery](theme-delivery.md)에 기록했다. CDN 인프라/credentials/publish는 이번 범위에서 만들지 않았다.
+
+## 13. Active / Focus / Primary / Accent 독립성
+
+Verification 컬러는 Primary `#6837a8`, Active `#007f73`, Focus `#c75b00`, Accent `#ffd36d`, Destructive `#d41466`로 서로 다르다. 다섯 역할을 하나씩 입력하며 다른 네 역할이 유지되는지 확인한다. 기존 일반 Focus 검증은 실제 Checkbox/Calendar shadow의 색을 검사한다. 기존 Slider Primary 20% halo와 GNB/LNB inverse outline 예외는 보존한다.
+
+## 14. Component 검증
+
+공유 Specimens는 Button/Input/Checkbox/Radio/Switch/Slider/Progress/Select/Calendar single·range/DatePicker/Pagination/Badge/Table/GNB/LNB/Command를 기존 API 그대로 렌더링한다. Designer extras에 실제 DataTable, Combobox, DropdownMenu, ContextMenu, Menubar를 추가했다. 기존 Specimens 내용과 고정 `verification-baseline.json`은 변경하지 않고 파일로 추출했다.
+
+새 LiveVerification은 실제 input/Import/Reset 버튼으로 Default 17개 표시, 핵심 역할 독립성, 실제 주요 컴포넌트 색, Accent 45%의 10개 Mapping, Export→Import, invalid 보존, partial 교체, 17개 입력, geometry 및 동일 document를 검사한다. Loader 검증은 실제 정적 `/themes/*.json` HTTP 요청, 71개 Default와 생성 데이터 일치, partial/merge/reset/invalid/HTTP 실패/abort와 delayed response race simulation을 검사한다. 기존 Runtime Verification은 모든 73개 입력/Default visual parity/실제 Focus/cleanup/Global·Scoped 등을 다시 검사한다. 정적 빌드 HEX3 정규화만 검증 코드에 추가했다. baseline snapshot은 변경하지 않았다.
+
+## 15. Scoped Portal 제한
+
+Global document Theme는 body Portal에도 적용한다. 명시적 scope는 독립 HM Default + 자기 override이며 wrapper 밖으로 Portal된 UI는 Global을 사용한다. scope/Portal 자동 전달은 기존 FOLLOW_UP으로 유지한다.
+
+## 16. 수정 파일
+
+- Production: `packages/ui/src/theme/contract.ts`, `default-values.generated.ts`, `runtime.ts`, `requests.ts`, `loader.ts`, `index.ts`, 생성 `default.css`/`primitives.css`(현재 선언은 baseline과 동일).
+- 원본/산출: `themes/default.json`, `service-example.json`; `scripts/theme-contract.mjs`, `theme-defaults.mjs`, `theme-artifacts.mjs`, `theme-templates/`; 루트 `package.json`/`.gitignore`.
+- Storybook: `.storybook/main.ts`/`preview.tsx`, `src/theme/designer-preview.tsx`, `designer-theme.stories.tsx`, `designer-theme.css`, `designer-extras.tsx`, `specimens.tsx`, `runtime-loader.stories.tsx`, 기존 `runtime-theme.stories.tsx`(Specimens 추출/검증 색 정규화).
+- 문서: 이 보고서/사용법/Theme delivery, README/CLAUDE, 기존 contract/report/테마 토큰 가이드의 후속 섹션 및 runtime/개발 적용/운영 배포/프로젝트 지침의 현재 상태.
+
+## 17. Git diff 요약
+
+baseline에서 Theme 운영 관련 변경만 관리했다. Component/Pattern 구현, Component API, Primitive 값/Default CSS 선언, viewport/breakpoint 및 layout 토큰을 변경하지 않았다. 새 editor만 자신의 responsive layout CSS를 갖는다. Git commit/push는 수행하지 않았다. 추적되지 않은 신규 파일도 검토 범위에 포함한다.
+
+## 18. 문서 및 감사 이력
+
+[디자인팀 사용법](designer-theme-guide.md)과 [Theme delivery](theme-delivery.md)에 JSON 원본/Preview/Runtime/CDN 배포/캐시/롤백/개발팀 workflow/제한을 정리했다. 기존 Runtime 계약/보고서/테마 토큰 가이드에는 추가 결정을 기록했다. 기존 hardcode audit CSV와 consistency audit는 당시 이력이며 Component 색상 Mapping을 바꾸지 않아 재작성하지 않았다.
+
+## 19. Build / 최종 브라우저 검증
+
+- `npm run typecheck`: PASS / exit 0, 루트와 UI/CENTER workspaces.
+- `npm run build`: PASS / exit 0.
+- `npm run build-storybook`: PASS / exit 0.
+- `npm run build:themes`: PASS, 독립 JSON 2개를 `theme-dist/themes/`에 산출.
+- **1280 / 768 / 390px 각각**: 기존 Runtime **136 checks / 63 rendered parts**, Designer workflow **96 checks**, URL Loader **119 checks** 모두 PASS. 정적 빌드를 사용하여 Vite HMR이 없는 환경에서 검증했다. 해상도 간 이동 시 문서를 새로 열었고, 각 검증 안의 Theme 변경은 동일 document에서 reload 0으로 수행했다.
+- Default baseline 색상/geometry parity, 전체 73개 기존 계약, 실제 Checkbox/Calendar Focus, 독립 핵심 역할, partial/reset/invalid/cleanup, JSON Export→Import, HTTP Default/External load, Abort와 응답 race를 확인했다.
+- 실제 Editor의 Load Default JSON / Load Service Example JSON 버튼을 클릭해 즉시 반영을 확인했다. 기존 Badge Story로 이동한 뒤에도 Primary `rgb(104,55,168)`과 Destructive `rgb(212,20,102)`가 세션에서 유지되었다.
+- 실제 body Select Portal의 selected 면은 Accent yellow 45% `color(srgb 1 0.827451 0.427451 / 0.45)`, Date Picker selected는 Active `rgb(0,127,115)`였다. Combobox/Dropdown/Context/MenuBar의 실제 highlight와 Table/DataTable selected도 같은 Accent 45%였다.
+- 별도 임시 fixture의 **8개 generation/artifact checks** PASS: stale fallback 검사, JSON 역할→CSS 생성, 나머지 geometry/Default 유지, Theme-only 산출 시 UI 파일 불변, 최신 운영 JSON 포함, 삭제된 source의 stale artifact 제거, 실제 workspace 원본 미변경.
+- JSON 텍스트 Export→Import는 검증했다. 파일 Export는 DOM download 링크와 Blob 수명 처리를 구현했으나 내장 브라우저가 download 완료 이벤트를 반환하지 않아 파일 저장 완료는 확인하지 못했다. UI는 다운로드 요청으로 표시하고 Show JSON 직접 복사 경로를 제공한다. 클립보드 권한도 환경에 따라 제한될 수 있다.
+- 실제 회사 CDN/CORS/캐시·registry publish는 미검증이다. HTTP 검증은 localhost의 정적 Theme JSON으로 CDN delivery를 모사했다. 브라우저/실기기 전체 호환성을 검증했다는 의미는 아니다.
+
+기존 CSS 예시 최적화 warning 1개, Storybook chunk 크기/성능 안내는 비차단으로 유지한다. 처음 sandbox에서 esbuild spawn EPERM이 발생한 빌드는 승인된 실행 환경에서 다시 수행하여 통과했다. 검증 중 HEX3 직렬화/검사 대기 문제는 검증 코드에 보완했고 최종 PASS 결과만 기록했다.
+
+증거: `_local/designer-typecheck.log`, `designer-build.log`, `designer-storybook-build.log`, `designer-runtime-verification.json`, `theme-generation-verification.json`, `designer-external-preview.jpg`. 이전 감사 CSV/136 checks 결과를 복사한 것이 아니라 현재 정적 빌드 output에서 직접 읽었다.
+
+## 20. 최종 판정
+
+**COMPLETE — 요청한 Runtime/JSON/독립 artifact/Preview 구현 범위.**
+
+- External override: PASS.
+- 디자인팀 실시간 JSON Preview/편집/Reset/공식 JSON 전달: PASS. JSON 텍스트 Export/Import로 전달 가능하다. 파일 다운로드 완료는 위 환경 제한을 구분한다.
+- A. 한 Git Repository인가: **YES**, baseline main/commit 확인.
+- B. UI와 Theme 배포 단위가 분리되는가: **YES**, `build:themes`는 JSON만 산출한다. UI/CENTER는 독립 workspaces.
+- C. 컬러 Source of Truth: **`themes/default.json` / 서비스별 top-level `themes/*.json`**. package CSS/Default 데이터는 생성물이고 template는 alias/geometry만 소유한다.
+- D. UI package 재배포 없이 Theme 변경 가능한가: **YES**, 변경 JSON을 독립 배포하고 Loader를 다시 호출한다.
+- E. CDN JSON으로 적용 가능한가: **YES**, 소비 서비스의 설정 URL을 공식 fetch/load API에 전달한다. 실제 회사 CDN은 미정/미배포.
+- F. CDN 실패 시 Default 유지되는가: **YES**, 기존 host override가 없는 통상 root에서 package의 HM Default snapshot을 복원한다. host 소유 inline 값이 있었다면 기존 정책대로 그 값을 복원한다.
+- G. Default/External이 같은 계약/Loader를 사용하는가: **YES**, 동일 v1 JSON과 fetch/validation/Apply 경로; supplied Default + partial resolve도 제공한다.
+
+실제 CDN 인프라/업로드, registry release, Git commit/push는 실행하지 않았다. 이러한 운영 배포는 이번 범위와 분리하며 Theme-only artifact와 절차는 준비했다. Scoped Portal 자동 전달은 기존 FOLLOW_UP을 유지한다.
+
+## 작업 시간 (KST)
+
+- Started At: 2026-10-06 15:41:55 KST
+- Completed At: 2026-10-06 16:16:53 KST
+- Actual Duration: 34분 58초
+- Estimated Duration: 45~70분 (범위 수정 후 50~75분)
+- Variance: 최초 예상보다 10분 2초~35분 2초 단축
diff --git a/docs/guidelines/hm-custom-implementation.md b/docs/guidelines/hm-custom-implementation.md
new file mode 100644
index 0000000..61c6be6
--- /dev/null
+++ b/docs/guidelines/hm-custom-implementation.md
@@ -0,0 +1,270 @@
+# HM Custom Implementation Inventory
+
+> 조사 기준일: 2026-10-06. 실제 코드(`packages/ui/src`) 기준의 현황 기록이며 확정 규격이 아니다. 구현은 바꾸지 않았다.
+> 신규 구현은 [AI/Component 구현 원칙](shadcn-기반-구현-원칙.md)과 [Navigation Single Mode Policy](navigation-single-mode.md)의 2026-10-07 확정 정책을 따른다. 아래 조사 이력은 운영 예제나 정책 예외를 허용하는 근거가 아니다.
+> Select의 `UNDER_REVIEW`는 2026-10-06 조사 당시 설계 평가이며 현재 작업 진행 상태를 뜻하지 않는다. 현재 API·동작은 `docs/components/select.md`와 실제 구현·대표 Story를 따른다.
+
+> **현재 탐색 기준 (2026-10-08 개발 저장소)**: UI 구현 TSX 44개, 공개 Component 모듈 44개(222 named export), Component Story 파일/그룹 44개, Component 문서 45개(`field.md`는 독립 구현이 아닌 소비 가이드)다. Pattern은 소스 디렉터리/공개 모듈 8개(62 named export), Story 파일/그룹 6개, Pattern 문서 7개다. 확정 배포 기준 `HMDesignTest.zip`에는 Component 구성은 동일하고 Pattern 모듈 7개(50 named export)가 포함되며 Dashboard Status 모듈은 없다. 파일·심볼·그룹은 서로 다른 집계 단위다. 현재 경로 연결은 [Component / Pattern Reference Index](component-pattern-reference.md)를 따른다. 아래 표와 분석은 2026-10-06 당시의 분류 기록이다.
+
+## 0. 한 줄 요약
+
+shadcn/Radix를 그대로 쓰지 않고 **실제로 API·State·Behavior·Structure가 추가된 Component는 44개 중 15개**다. 나머지 29개는 shadcn 구조를 유지하고 CSS/Token만 얹었다. Pattern 7종은 모두 기존 Component의 조합이다.
+
+| 질문 | 답 |
+|---|---|
+| 꼭 필요한가? | Component 기준 15개 중 `REQUIRED` 13, `CAN_SIMPLIFY` 1(Textarea), `UNDER_REVIEW` 1(Select). 항목 단위로는 `CAN_SIMPLIFY` 3건, `LEGACY` 1건(Button alias) (§4, §11, §12) |
+| Public API에 영향을 주는가? | 12건이 consumer에게 노출된다 (§8). 내부 전용은 6건 (§7) |
+| shadcn 업데이트 시 관리해야 하는가? | **Tabs(HIGH)** 우선, 이어서 Button·Select(MEDIUM). 나머지는 LOW |
+
+> 위 숫자는 아래 표의 합이다. 표를 고치면 이 요약도 함께 고친다.
+
+## 1. 목적
+
+- shadcn 업데이트·재생성 시 "무엇을 손으로 지켜야 하는가"를 한 문서에서 확인한다.
+- HM 스타일이 들어갔다는 이유만으로 Custom으로 부르지 않는다. Behavior / Structure를 유지하고 CSS/Token만 바꾼 것은 `HM_THEME`다.
+- 이 문서는 가시화·분류·유지보수 기준만 다룬다. 제거·단순화 판단은 별도 작업이다.
+- Visual 값(height, radius, color 등)은 각 `docs/components/<name>.md`, `docs/patterns/<name>.md`가 담당하므로 여기에 나열하지 않는다.
+
+## 2. 분류 기준
+
+| 분류 | 정의 |
+|---|---|
+| `SHADCN_BASE` | shadcn/Radix 구조·API 그대로. `.tsx`에 HM 전용 코드가 없고 Theme CSS도 얇은 Token 매핑 수준 |
+| `HM_THEME` | Behavior / Structure는 shadcn/Radix 그대로, Visual만 HM CSS / Token. 독립 Custom 아님 |
+| `HM_CUSTOM` | shadcn에 없는 Public API, 상태/behavior, Radix 동작 확장, 추가 Context/state, helper logic, 구조 확장 중 하나 이상 |
+| `HM_COMPOSITION` | 기존 HM/shadcn Component를 조합한 Pattern |
+| `STORY_ONLY` | 검증용 Story, StateBoard 등. Production Custom 아님 |
+
+조사 한계(반드시 읽을 것):
+
+- 현재 저장소는 Git으로 관리한다. 2026-10-06 조사는 shadcn 원본 사본과의 Git diff를 수행하지 않았다. 따라서 당시 분류는 "shadcn 원본과의 diff"가 아니라 **현재 코드와 코드 주석을 읽고 shadcn v4(Radix) 구조에 대한 지식과 대조**해 판정했다. 경계 항목은 `shadcn add`로 원본을 받아 diff하면 확정할 수 있다.
+- `SHADCN_BASE`와 `HM_THEME`의 경계는 휴리스틱이다: `.tsx`가 shadcn 그대로이면서 `packages/ui/src/theme/<name>.css`가 약 70줄 이하이면 `SHADCN_BASE`, 그보다 크면 `HM_THEME`. 둘 다 "Custom 아님"이므로 유지보수 판단에는 영향이 없다.
+- Story는 전수 검토하지 않고 공용 helper와 파일 구성만 확인했다.
+
+## 3. 전체 요약
+
+| Category | Count | 비고 |
+|---|---:|---|
+| Component 총계 | 44 | `packages/ui/src/components/ui/` |
+| `SHADCN_BASE` | 16 | §5 |
+| `HM_THEME` | 13 | §5 |
+| `HM_CUSTOM` | 15 | §4 (Public 12건 + Internal 6건이 이 15개에 걸쳐 있음) |
+| `HM_COMPOSITION` | 7 | Pattern (§6, Component 44개와 별도) |
+| `STORY_ONLY` | 4 묶음 | §9 |
+
+## 4. Components — HM_CUSTOM
+
+한 Component 안에 Visual(HM_THEME)과 구조 Custom이 함께 있을 수 있다. 아래는 구조·API·상태 부분만 적었다. 평가: `REQUIRED` 현재 필요 / `CAN_SIMPLIFY` shadcn 방식으로 단순화 가능 / `LEGACY` 필요성 불명확 / `UNDER_REVIEW` 작업 중·미결정.
+
+| Component | Base | Custom 종류 | Scope | 평가 | Risk |
+|---|---|---|---|---|---|
+| Button | shadcn + Radix Slot + CVA | API, Structure | Public | REQUIRED (+ alias는 LEGACY) | MEDIUM |
+| Input | shadcn | API | Public | REQUIRED | LOW |
+| Textarea | shadcn | API | Public | CAN_SIMPLIFY | LOW |
+| Card | shadcn | API | Public | REQUIRED | LOW |
+| Select | Radix Select | API, State, Structure | Public + Internal | UNDER_REVIEW | MEDIUM |
+| Tabs | Radix Tabs | API, State, Behavior, Structure | Public + Internal | REQUIRED | HIGH |
+| Dialog | Radix Dialog | API(Structure), Behavior | Public + Internal | REQUIRED | LOW |
+| Sheet | Radix Dialog | API(Structure), Behavior | Public + Internal | REQUIRED | LOW |
+| Drawer | vaul | API(Structure), Behavior | Public + Internal | REQUIRED | LOW |
+| Alert Dialog | Radix Alert Dialog | API | Public | REQUIRED | LOW |
+| Combobox | Popover + Command (cmdk) | API, State, Composition | Public | REQUIRED | LOW |
+| Date Picker | Popover + Calendar (react-day-picker) | API, State, Behavior | Public + Internal | REQUIRED | LOW |
+| Popover | Radix Popover | Behavior | Internal | REQUIRED | LOW |
+| Collapsible | Radix Collapsible | Behavior | Internal | REQUIRED | LOW |
+| Slider | Radix Slider | Behavior | Internal | REQUIRED | LOW |
+
+### 4.1 항목별 기록
+
+**Button** — `button.tsx`, `theme/button.css`
+- 추가: `variant`를 역할(`primary|secondary|modify|destructive|cancel`)로 교체, `appearance`(`brand|solid|outline`) 추가, `data-variant/data-appearance/data-size`. `default`·`outline`은 shadcn 호환 alias로 `primary`/`primary+outline`에 매핑, `ghost`·`link`는 shadcn 기본 유지.
+- 이유: ui_viz 역할/처리(treatment) 2축 규격. `<Button />`만으로 HM 디자인 적용.
+- Public API 영향: 있음(`variant` 값 집합, `appearance`). 기존 shadcn `variant="default|outline"` 코드는 alias로 동작.
+- 구조 주의: `data-slot="button"`을 `{...props}` **뒤에** 둔다. 앞에 두면 `<XTrigger asChild><Button/></XTrigger>`가 trigger의 `data-slot`으로 덮어써 HM 스타일이 사라진다(§7 I3).
+- 대체 가능한 shadcn 방식: shadcn `variant` 값에 HM 역할을 추가하는 방식은 가능하나 `appearance` 2축은 표현 불가.
+- 리스크 사유: `buttonVariants` CVA 정의를 통째로 다시 썼다. shadcn이 `buttonVariants`를 바꾸면 수동 병합이 필요하다. 코드에 `dark:` 잔재 2곳(§11).
+- 유지 필요성: REQUIRED. 단, `default`/`outline` alias는 LEGACY(호환 목적이며 소비처가 정리되면 제거 후보).
+
+**Input** — `input.tsx`
+- 추가: `size="small|medium|large"`(기본 large). 네이티브 `size`(문자 폭) 속성은 `Omit`으로 가려져 **사용 불가**.
+- Public API 영향: 있음, 네이티브 속성 가림. 대체: `className` 높이 지정(2축 상태 규칙은 불가). 유지 REQUIRED. Risk LOW.
+
+**Textarea** — `textarea.tsx`
+- 추가: `resize="vertical|none|both"`(기본 vertical)를 `data-resize`로 노출. readonly→none은 CSS에서 처리.
+- 대체: `className="resize-none"` 등. 기본 정책을 컴포넌트가 갖게 하려는 목적이라 단순화 가능. CAN_SIMPLIFY, Risk LOW.
+
+**Card** — `card.tsx`
+- 추가: `surface="surface|content"`(`data-surface`). `size="sm"`은 shadcn 기존 API.
+- 유지 REQUIRED(ui_viz Content Card 면 구분). Risk LOW.
+
+**Select** — `select.tsx`, `theme/select.css` (size 계약 구현됨; 구조 선택은 아래 UNDER_REVIEW)
+- 추가(조사 시점 코드):
+  - `SelectTrigger`의 `size="medium|large"`(shadcn `sm|default` 대체), `data-size`.
+  - `SelectSizeContext` + `Select` Root를 Provider로 감싸 `useState`로 size 보관, Trigger가 `useLayoutEffect`로 등록. Portal 안의 `SelectContent`가 `data-size`를 읽는다. 즉 **Root가 shadcn처럼 순수 `SelectPrimitive.Root`가 아니라 Provider 래퍼**다.
+  - 아이콘을 Radix 기본 대신 18×18 SVG로 교체, `SelectItem`의 check indicator 제거(선택 표시는 배경 면), `SelectContent` 기본값 `position="popper"`, `sideOffset=-1`(border 1px 공유 seam).
+  - long text ellipsis와 seam(`--hm-select-seam-color`)은 CSS 처리(`select.css`).
+- Public API 영향: `size` prop(Public). Context·`setSize`는 노출되지 않는 Internal.
+- 대체 가능한 shadcn 방식: shadcn은 Content가 `size`를 몰라도 되게 Trigger 쪽만 `data-size`를 둔다. Content까지 size 연동이 필요한 이유가 Portal 때문이므로 대안은 (a) Content에도 `size` prop을 직접 전달, (b) CSS만으로 처리, (c) 현 Context 유지. **어느 쪽이 맞는지 결정되지 않았다.**
+- 유지 필요성: UNDER_REVIEW. Risk MEDIUM(Root 래퍼 + 렌더 후 `useLayoutEffect`로 state를 갱신하는 구조라, 첫 렌더에서 Content가 기본 `large`로 보일 수 있는 타이밍 의존이 있음).
+- 이 항목은 Final Spec이 아니다.
+
+**Tabs** — `tabs.tsx`, `theme/tabs.css`
+- 추가:
+  - `TabsList`에 `fill`(동일 폭·초록 선택 border·곡선 연결)과 `panelSurface="surface|content"` prop.
+  - `TabsList`가 Radix List를 `<div data-slot="tabs-frame">`로 **한 겹 감싼다**(DOM 구조 변경).
+  - 넘침 감지(`ResizeObserver`, `MutationObserver`, scroll 리스너, `document.fonts.ready`), 이전/다음 이동 버튼(`aria-label` 한국어 고정), 선택 탭 가시 유지(`keepSelectedVisible`), `prefers-reduced-motion` 분기, `useId`로 List id 생성, 외부 `ref` 병합.
+  - 연결 곡선은 `tabs.css`의 `::before/::after` + `radial-gradient`(HM 고유 구조 CSS).
+- Public API 영향: `fill`, `panelSurface`(Public). 나머지는 Internal.
+- 대체: shadcn Tabs는 위 기능이 전혀 없다. 넘침 버튼 없이 가로 스크롤만 허용하는 단순화는 가능하나 ui_viz D-090 규격을 포기해야 한다.
+- 유지 REQUIRED. **Risk HIGH**: 원본 `TabsList` 구조를 크게 바꿨고 Observer 기반 로직과 한국어 문구가 컴포넌트 안에 있다.
+- 2026-10-06: 대표 형태를 Primary(`fill` + `panelSurface="content"`)·Secondary(`fill` + `panelSurface="surface"`) 두 가지로 정리했다. Story 노출만 줄였고 코드·API·CSS branch는 그대로라 **Custom complexity 변화 없음**. non-fill branch는 REMOVE_CANDIDATE(사용자 확정 대기).
+- 2026-10-08 추가 개선 E 승인: 당시 `fill=false`, `panelSurface="surface"` 기본값을 현재 `fill=true`, `panelSurface="content"`(Primary)로 변경했다. Props 이름·타입·기존 CSS 디자인 값·선택자·Observer 동작은 유지하므로 **Custom complexity 변화 없음**. Legacy non-fill은 `fill={false}`로 유지하고 OLD_TEST_ONLY / REMOVE_CANDIDATE 삭제 대기 이력도 보존한다. 외부 기본 렌더링·명시적 Props 조합·CSS Override 영향은 [Tabs 문서 §15](../components/tabs.md#15-외부-소비자-영향--호환성-2026-10-08)를 따른다. 외부 소비자 전체 호환성은 미검증이다.
+
+**Dialog / Sheet / Drawer** — `dialog.tsx`, `sheet.tsx`, `drawer.tsx`
+- 추가(Public): `DialogBody`, `SheetBody`, `DrawerBody` — 스크롤 소유 영역(Header/Footer 고정, Body만 스크롤). shadcn에는 없는 구조 API.
+- 추가(Internal): `*Close`가 `asChild`일 때 `data-slot`을 넘기지 않는 규칙(§7 I3).
+- Drawer 추가: `autoFocus` 기본값을 `true`로(vaul 기본은 `false`라 modal에서 포커스가 trigger에 남음). 소비자가 `autoFocus={false}`로 되돌릴 수 있다 → Public 동작 차이.
+- `showCloseButton`, `side`는 shadcn 기존 API(Custom 아님). Radius·shadow 등은 HM_THEME.
+- 대체: Body는 `className`이 붙은 `div`로 대체 가능하나 `data-slot` 기반 CSS 선택이 사라진다. REQUIRED, Risk LOW.
+
+**Alert Dialog** — `alert-dialog.tsx`
+- 추가: `AlertDialogAction`/`AlertDialogCancel`이 `variant|appearance|size`를 받고 `Button asChild`로 합성. 기본값 Action=`primary/solid`, Cancel=`cancel/solid`. shadcn도 Button 스타일을 입히지만 `appearance`는 HM 전용.
+- REQUIRED, Risk LOW.
+
+**Combobox** — `combobox.tsx`
+- shadcn에는 파일이 아닌 recipe(Popover+Command)만 있고 HM은 이를 **`options` 기반 컴포넌트**로 만들었다. Public: `options`(value/label/disabled), `value/defaultValue/onValueChange`, `placeholder/searchPlaceholder/emptyText`, `size="medium|large"`. State: `open`, 비제어용 `inner`(제어/비제어 분기 직접 구현). 한국어 기본 문구 포함.
+- 대체: Popover+Command를 소비자가 직접 조합(shadcn 방식). REQUIRED(서비스 공통 필요), Risk LOW(원본 파일이 없어 업스트림 충돌 없음).
+- 내부: `PopoverContent`에 인라인 `--hm-popover-padding/width` 주입 → CAN_SIMPLIFY(§11).
+
+**Date Picker** — `date-picker.tsx`
+- 같은 성격. Public: `value/defaultValue/onValueChange`, `placeholder`, `size`, `format`, `calendarProps`(Calendar 옵션 일부). 제어/비제어 상태 직접 구현. Behavior: `onOpenAutoFocus`에서 Calendar의 tab stop 날짜로 포커스 이동(Internal). 한국어 기본 포맷.
+- 대체: Popover+Calendar 직접 조합. REQUIRED, Risk LOW.
+
+**Popover / Collapsible** — `popover.tsx`, `collapsible.tsx`
+- `PopoverClose`, `CollapsibleTrigger`의 `asChild` data-slot 규칙만 추가(§7 I3). Risk LOW.
+
+**Slider** — `slider.tsx`
+- 추가: `aria-label`을 Root가 아니라 **각 Thumb**에 전달(Range는 `"라벨 1/2"`). `role="slider"`가 Thumb에 있기 때문. Internal. shadcn 원본에는 없음. REQUIRED(접근성), Risk LOW.
+
+## 5. Components — HM_THEME / SHADCN_BASE
+
+`.tsx`에 HM 구조·API·State 추가가 없는 Component. 시각 값은 각 Component 문서가 관리한다.
+
+**SHADCN_BASE (16)**: Accordion, Alert, Aspect Ratio, Avatar, Badge, Breadcrumb, Checkbox, Hover Card, Label, Progress, Radio Group, Scroll Area, Separator, Skeleton, Switch, Tooltip
+
+**HM_THEME (13)**: Calendar, Carousel, Command, Context Menu, Dropdown Menu, Menubar, Navigation Menu, Pagination, Resizable, Sonner, Table, Toggle, Toggle Group
+
+참고(Custom으로 보지 않은 이유):
+
+- Alert·Badge: 사용 가능한 `variant`를 HM Theme에 있는 의미로 **줄였다**(Alert=default/destructive, Badge=4종). API 축소이며 추가가 아니다.
+- Calendar: 기본 `locale`을 한국어(`ko`)로 두었다. shadcn도 `Chevron` 컴포넌트를 교체한다. 기본값 하나의 차이라 THEME로 둔다.
+- Command: shadcn의 `CommandDialog`가 **없다**(의도적 제외, 코드 주석 명시). 기능 제거이며 추가 Custom 아님.
+- Toggle Group: shadcn 그대로 Context를 쓰며 `spacing`을 CSS 변수(`--hm-toggle-group-gap`)로 넘기는 한 줄이 추가됐다.
+- Carousel: shadcn 원본 로직(Context, Embla, 키보드)이 그대로다.
+- Tooltip: 원본처럼 `Tooltip`이 자체 `TooltipProvider`를 가진다(shadcn v4).
+
+## 6. Patterns — HM_COMPOSITION
+
+`packages/ui/src/patterns/`. 모두 기존 HM Component의 조합이며 별도 primitive가 아니다. 전부 shadcn에 없는 **Public API**다(Pattern 이름 자체).
+
+| Pattern | Composition | Custom Logic | Public API |
+|---|---|---|---|
+| GNB | Navigation Menu, Dropdown Menu, Avatar, Sheet, Button | 있음: `GNBMobileMenu`(open state, Context, Sheet 합성), `GNBMobileLink`가 `preventDefault`된 클릭에도 Sheet를 닫음, `GNBUser` 기본 `aria-label` | `GNB`(`sticky`), `GNBBrand`, `GNBNav`, `GNBUtilities`, `GNBUser`, `GNBMobileMenu`, `GNBMobileLink`, `GNBMobileGroup` |
+| LNB | Collapsible, Slot | 없음(`LNBGroup`은 Collapsible 합성) | `LNB`, `LNBBrand`, `LNBNav`, `LNBItem`, `LNBGroup`, `LNBProfile` |
+| Dashboard Layout | 현재는 Dashboard 내부 Header/Menu/Sidebar 조합만 허용 | 없음(레이아웃) | `DashboardLayout`(`header`, `sidebar`), `DashboardMain`, `DashboardContent` |
+| Page Header | Breadcrumb·Button을 child로 받음 | 없음 | `PageHeader`, `PageHeaderContent/Title/Description/Actions` |
+| Loading Screen | 없음(자체 요소) | 24개 막대 렌더, CSS 애니메이션·reduced-motion, `role="status"` | `LoadingScreen`(`fullscreen`) |
+| Filter Bar | Input, Select·Combobox·Date Picker·Button을 child로 받음 | 있음: `FilterBarSearch`(검색 아이콘 + Input + 지우기 버튼, `aria-label` 기본값) | `FilterBar`, `FilterBarSearch`, `FilterBarActions` |
+| Data Table | Table, Checkbox, Dropdown Menu, Pagination, Select, Skeleton, Button + TanStack Table v9 | 있음: 기능(feature) 등록, `useDataTable`, `dataTableSelectColumn`, `DataTableColumnHeader`(정렬 순환·`aria-sort`), `DataTableViewOptions`, `DataTablePagination`(`pageRange`), loading/empty 상태 | `DataTable`, `useDataTable`, `dataTableSelectColumn`, `DataTableColumnHeader`, `DataTableViewOptions`, `DataTablePagination` |
+
+CSS 자체가 구조를 구현하는 항목(HM 고유): GNB 아래쪽 concave join과 current 항목 연결 곡선(`gnb.css`), LNB와 콘텐츠 join(`lnb.css`, `--hm-lnb-join`), Loading Screen 막대 애니메이션(`loading-screen.css`). 각 Navigation Mode는 독립 레이아웃을 소유하며 Dashboard에 외부 GNB/LNB를 넣지 않는다.
+
+과거 조사에서는 GNB+LNB 동시 조립과 Brand ownership을 기록했으나 현재 단일 Navigation 정책으로 대체되었다. 혼합 Story는 기술 검증 목적의 `verification` 태그와 **VERIFICATION ONLY** 표시가 있을 때만 유지할 수 있으며 운영 Reference로 사용하지 않는다(`docs/patterns/gnb.md`, `lnb.md`).
+
+## 7. Internal Custom
+
+consumer에게 노출되지 않는 내부 구현. 6건.
+
+| # | 항목 | 위치 | 평가 | Risk |
+|---|---|---|---|---|
+| I1 | Select size Context + `useLayoutEffect` 등록 (**작업 중일 수 있음**) | `select.tsx` | UNDER_REVIEW | MEDIUM |
+| I2 | Tabs 넘침 측정(Observer·scroll·state) 과 이동 버튼 | `tabs.tsx` | REQUIRED | HIGH |
+| I3 | `asChild` 시 `data-slot`을 child에 남기는 규칙(Dialog/Sheet/Drawer/Popover/Collapsible의 Close·Trigger, Button의 `data-slot` 후순위 배치) | 여러 파일 | REQUIRED | LOW |
+| I4 | Slider thumb별 `aria-label` 전달 | `slider.tsx` | REQUIRED | LOW |
+| I5 | Date Picker `onOpenAutoFocus` 날짜 포커스 | `date-picker.tsx` | REQUIRED | LOW |
+| I6 | Combobox·Date Picker의 `PopoverContent` 인라인 `--hm-popover-*` 변수 | `combobox.tsx`, `date-picker.tsx` | CAN_SIMPLIFY | LOW |
+
+## 8. Public API Custom
+
+shadcn 원본에 없는 consumer-facing 확장. Component 12건 + Pattern 전체(§6).
+
+| # | Component | HM API | shadcn 원본 | Risk |
+|---|---|---|---|---|
+| P1 | Button | `variant`(역할 5종+alias), `appearance` | `variant` 값이 다름 | MEDIUM |
+| P2 | Input | `size="small|medium|large"` | 네이티브 `size` 가림 | LOW |
+| P3 | Textarea | `resize` | 없음 | LOW |
+| P4 | Card | `surface` | 없음(`size`는 있음) | LOW |
+| P5 | SelectTrigger | `size="medium|large"` (**작업 중일 수 있음**) | `sm|default` | MEDIUM |
+| P6 | TabsList | `fill`, `panelSurface` (+ 프레임 DOM) | 없음 | HIGH |
+| P7 | Dialog | `DialogBody` | 없음 | LOW |
+| P8 | Sheet | `SheetBody` | 없음 | LOW |
+| P9 | Drawer | `DrawerBody`, `autoFocus` 기본 `true` | 없음 / vaul 기본 `false` | LOW |
+| P10 | AlertDialogAction / Cancel | `appearance` (`variant`·`size` 포함) | `appearance` 없음 | LOW |
+| P11 | Combobox | `options` 등 전체 API | 파일 없음(recipe) | LOW |
+| P12 | Date Picker | `format`, `calendarProps` 등 전체 API | 파일 없음(recipe) | LOW |
+
+## 9. Storybook-only Custom (`STORY_ONLY`)
+
+Production Custom 목록에 포함하지 않는다. 4묶음.
+
+| 묶음 | 위치 | 내용 |
+|---|---|---|
+| StateBoard helper | `src/components/story-board.tsx` | `BoardState`(`note`, `noteAfter`, `wide`), `StateBoard`. 39개 Story 파일이 사용 |
+| 고정 상태·검증 Story | `src/components/*.stories.tsx`, `src/patterns/*.stories.tsx` | `States`, `StandardStates`, `ListSizeComparison` 등 비교·검증용 export. 전수 검토하지 않았음 |
+| 샘플 데이터 | `src/patterns/sample-users.ts` | Data Table Story용 |
+| Demo / CENTER Story | `src/hm-theme.css`, `src/theme/preview.ts`, `src/center/*` | Demo 스타일, preview 설정, `center-graphic` 전용 Story(UI 규격과 분리) |
+
+## 10. External Library Base
+
+| Library | 사용처 | 구분 |
+|---|---|---|
+| `radix-ui` | 대부분의 primitive | Base. Custom은 §4 |
+| `class-variance-authority` | Button, Badge, Alert, Toggle | shadcn 구조. Button만 CVA 정의를 HM 값으로 교체 |
+| `cmdk` | Command, Combobox | Library Base + HM Theme (Combobox는 HM_CUSTOM 합성) |
+| `vaul` | Drawer | Library Base + HM Custom(`DrawerBody`, `autoFocus` 기본값) |
+| `embla-carousel-react` | Carousel | Library Base + HM Theme (shadcn 로직 그대로) |
+| `react-resizable-panels` | Resizable | Library Base + HM Theme |
+| `react-day-picker` | Calendar, Date Picker | Library Base + HM Theme (Date Picker는 HM_CUSTOM 합성) |
+| `sonner` | Sonner(Toast) | Library Base + HM Theme |
+| `@tanstack/react-table` v9 | Data Table | Library Base + HM Composition (v9 feature 등록 방식) |
+| `lucide-react` | 아이콘 전반 | shadcn 기본 |
+
+## 11. CAN_SIMPLIFY 후보
+
+평가만 한다. 변경은 하지 않았다.
+
+| 항목 | 단순화 방향 | 비고 |
+|---|---|---|
+| Textarea `resize` (P3) | `className`(`resize-none` 등)로 대체 가능 | 기본 정책을 컴포넌트에 두려는 의도라면 유지 |
+| Combobox·Date Picker 인라인 `--hm-popover-*` (I6) | CSS 선택자·`data-slot`으로 이동 | |
+| `dark:` 잔재 | 현재 `button.tsx` 2개 행에만 남아 있고 `select.tsx`에는 없다. 기존 upstream `dark:` 분기는 보존할 수 있으며 새 HM Dark 분기는 추가하지 않는다 | HM_CUSTOM이 아니라 shadcn 원본 잔재. 정리 후보 |
+
+## 12. UNDER_REVIEW / LEGACY
+
+| 항목 | 상태 | 비고 |
+|---|---|---|
+| Select `size` Context (P5 + I1) | UNDER_REVIEW | 조사 당시 미결 설계 평가. 대안은 §4.1 Select 참조. 현재 작업 중이라는 뜻이 아니며 현재 API는 Select 문서·코드를 따른다 |
+| Button `default`/`outline` alias (P1) | LEGACY | shadcn 호환용. 소비처 사용 여부 미확인 |
+
+## 13. 유지 원칙
+
+1. HM_THEME·SHADCN_BASE는 CSS/Token만 바꾼다. `.tsx`에 구조·상태를 추가하려면 `shadcn-기반-구현-원칙.md` §6의 Custom 허용 조건과 기록 요건을 확인하고 이 문서에 행을 추가한다.
+2. shadcn 재생성·업데이트 시 우선 확인 순서: **Tabs → Button → Select → 나머지 Body/Close 규칙(I3)**. 이 파일들은 덮어쓰지 않고 수동 병합한다.
+3. `data-slot`을 child에 남기는 규칙(I3)은 새 `asChild` 지원 컴포넌트에도 같은 방식으로 적용한다.
+4. 새 Pattern은 §6 표에 "Composition / Custom Logic / Public API"를 한 행으로 기록한다.
+5. 이 문서의 수치는 조사 시점(2026-10-06) 기준이다. Select 설계 평가가 변경되면 §4·§7·§8·§12를 함께 갱신한다.
+
+## 2026-10-06 Theme infrastructure
+
+Default/External 동일 Runtime 계약, 패키지 theme API, Semantic/팔레트 연결과 Accent derived 공통화는 HM_THEME / Theme infrastructure다. Component DOM/props/state/Portal/breakpoint를 바꾸지 않았으므로 위 HM_CUSTOM Inventory 수를 늘리지 않는다. 상세: [Runtime Theme](runtime-theme.md).
+
diff --git a/docs/guidelines/navigation-single-mode.md b/docs/guidelines/navigation-single-mode.md
new file mode 100644
index 0000000..2f53968
--- /dev/null
+++ b/docs/guidelines/navigation-single-mode.md
@@ -0,0 +1,64 @@
+# Navigation Single Mode Policy
+
+2026-10-07 사용자 확정 정책. 이전 GNB/LNB/Dashboard 조합 기준을 대체한다. 2026-10-08 GNB ONLY 내부 Sidebar 허용 및 DASHBOARD ONLY Sidebar 운영 사용 금지를 명확히 했다.
+
+**ONE PAGE = ONE NAVIGATION SYSTEM = ONE HEADER/NAVIGATION EXPERIENCE**
+
+## 적용 범위
+
+AI 기반 코드 생성과 제안, 신규 페이지 구현, 기존 화면 수정, 프로토타입, Storybook 대표/PRIMARY Story, 실제 Production 구현 전체에 동일하게 적용한다. AI는 별도 요청이 없는 한 Navigation 조합을 생성하거나 제안하지 않는다. 별도 요청도 혼합 운영 구조를 자동 허용하지 않으며 정책 변경 또는 기술 검증의 목적을 먼저 구분한다.
+
+## 모드 선택
+
+페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 결정한다. 이 표기는 페이지 설계 계약이며 현재 공통 Page 컴포넌트의 prop이 아니다.
+
+| 선택 | 허용 구조 | 함께 사용하지 않는 체계 |
+|---|---|---|
+| GNB | Page → GNB Header + Content, 또는 GNB Header + 내부 Sidebar + Content | 독립 LNB Mode, Dashboard |
+| LNB | Page → LNB + Content | GNB, Dashboard |
+| DASHBOARD | Page → Dashboard 전용 Header(48px)·업무 상태 필터 + Content, Sidebar 없음 | 모든 Sidebar, 외부 GNB, 일반 LNB |
+
+독립 Navigation Mode를 결합하는 GNB + LNB, GNB + Dashboard, LNB + Dashboard, GNB + LNB + Dashboard는 모두 금지한다. GNB ONLY 내부 Sidebar의 구현 부품 재사용은 아래 범위에서 허용한다. 콘텐츠의 Breadcrumb, Filter Bar, 사용자 Dropdown 등은 새로운 페이지 Navigation Mode가 아니다.
+
+## 선택 근거
+
+1. 사용자 요청에 모드가 있으면 우선 적용한다. 요청이 독립 모드 혼합을 포함하면 이 정책과의 충돌을 기록하고 정책 변경인지 기술 검증인지 확인한다.
+2. 미지정이면 제공된 화면의 Navigation 구조와 현재 대표 Story를 대조한다. 서비스 전역 상단 메뉴·브랜드·사용자 영역이 중심이면 [GNB](../patterns/gnb.md), 현재 영역의 계층 메뉴·독립 Sidebar와 모바일 Header가 중심이면 [LNB](../patterns/lnb.md), Dashboard 내부 Header/상태 메뉴·최소 폭 프레임이 중심이면 [Dashboard](../patterns/dashboard-layout.md)를 선택한다.
+3. 일반 업무 목록이나 DataTable 사용 여부만으로 GNB/LNB를 확정하지 않는다. GNB에서도 내부 Sidebar Composition을 사용할 수 있고, Dashboard Header는 GNB가 아니다.
+4. 선택 근거가 부족하면 가정한 모드와 이유를 보고한다. 기존 화면과의 일관성을 판단할 정보가 없으면 사용자 확인 필요 사항으로 남긴다. 모든 일반 화면에 적용하는 기본 모드는 없다.
+
+## GNB ONLY 내부 Sidebar
+
+- GNB Sidebar는 GNB ONLY의 하위 화면 구성이다. 공개 `LNB / LNBNav / LNBGroup / LNBItem`과 필요한 모바일 부품을 재사용해도 독립 LNB ONLY Mode를 추가한 것이 아니다.
+- 메뉴 DOM/data-slot, 폭, 폰트, 아이콘, 간격, Depth, Hover/Current, 그룹 펼침·접힘과 메뉴 스크롤은 기존 LNB 계약을 유지한다. Sidebar 범위의 `--hm-lnb-background`만 `var(--hm-sem-palette-green-light-2)`로 지정한다. 공통 Theme 값과 LNB 기본 스타일은 변경하지 않는다.
+- 브랜드·사용자 영역은 GNB가 담당한다. 기본 Sidebar에는 `LNBBrand / LNBProfile`을 넣지 않는다. Desktop/Mobile 모두 현재 경로는 하나로 관리하며, Sidebar 그룹과 GNB 팝업의 열림 상태는 독립적이다. 선택에 따른 새로운 자동 펼침·접힘은 추가하지 않는다.
+- 이 허용은 GNB 내부 Sidebar에 한정한다. 독립 LNB Header/브랜드 체계의 동시 추가, Dashboard와의 조합, 기존 혼합 verification Story의 운영 승격은 허용하지 않는다. Dashboard Header는 GNB가 아니다.
+
+## Responsive
+
+- GNB는 자체 Responsive / Mobile Header를 사용한다.
+- GNB Sidebar는 ≥1024px에서 표시하고 ≤1023px에서 숨긴다. 모바일은 기존 GNB Header의 메뉴 버튼 하나와 Sheet 하나에 LNB 모바일 링크/그룹을 재사용한다. `LNBMobileHeader`나 두 번째 Sheet를 추가하지 않는다. Sheet 기본 배경, 링크 높이·폰트·선택 동작, Escape·포커스 복귀를 유지한다. 그룹은 기존 모바일 링크 목록이며 새 disclosure 동작을 만들지 않는다.
+- LNB는 ≥1024px에서 Desktop LNB만, ≤1023px에서 LNB Mobile Header만 표시한다. Mobile Header와 Sheet는 같은 메뉴·선택 상태를 공유하는 LNB의 모바일 표현이며 별도의 GNB가 아니다.
+- 독립 LNB ONLY를 Desktop LNB → Mobile GNB Mode로 전환하거나 모바일 두 종류를 동시에 노출하지 않는다. GNB 내부 Sidebar의 모바일 표현은 처음부터 끝까지 GNB ONLY다.
+- Dashboard 운영 화면은 모든 viewport에서 Sidebar 없이 전용 Header(48px)·업무 상태 필터·Content를 유지한다. 최소 폭은 960px이며 그 이하에서는 Dashboard 내부에서 가로 스크롤한다. 일반 LNB의 모바일 숨김이나 GNB breakpoint에 의존하지 않는다.
+
+## Layout 및 Storybook
+
+Navigation 간 height/width 계산이나 CSS 변수·breakpoint·spacing 교차 의존성을 만들지 않는다. Dashboard 운영 화면의 `header`에는 전용 DashboardHeader를 넣고 `sidebar`는 전달하지 않는다. 각각의 모드는 자기 변수와 공통 Semantic Token을 사용한다.
+
+`DashboardSidebar` 공개 Export와 선택적 `sidebar` slot은 기존 소비자 호환성·검증을 위해 유지하는 API다. 존재가 운영 허용을 뜻하지 않으며 신규 Dashboard 운영 화면에는 사용하지 않는다. Sidebar 포함 1232px 규칙은 해당 호환성·검증 구성에만 남는 값으로 현재 운영 기준이 아니다. 기능 제거·런타임 차단은 소비처 영향 조사와 사용자 결정을 거치는 별도 작업이다.
+
+GNB 내부 Sidebar의 Composition은 기존 LNB 구현을 재사용하기 위해 `--hm-lnb-width / --hm-lnb-join`과 LNB 부품의 토큰을 소비할 수 있다. 이는 독립 Navigation 간 결합이 아니다. 높이는 소비자 프레임의 Grid 행으로 배분하고 GNB/LNB/Dashboard의 토큰 정의나 breakpoint를 서로 수정하지 않는다. 사용 구조는 [GNB §15](../patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08)를 따른다.
+
+대표/PRIMARY Story는 선택된 모드의 운영 예제만 보여준다. 기존 혼합 Story와 Dashboard Sidebar Story가 기술 검증에 필요한 경우에만 `verification` 태그와 화면·Story 이름의 **VERIFICATION ONLY — 운영 사용 금지** 표시로 유지한다. 운영 예제, 신규 코드 생성의 근거로 사용하지 않는다. 과거 검증 기록은 HISTORICAL로 보존하며 현재 운영 계약으로 재해석하지 않는다.
+
+## 구현·리뷰 완료 조건
+
+- 페이지 모드가 하나로 결정되어 있고 다른 Navigation 체계를 추가하지 않았는가?
+- 모바일도 같은 모드의 Responsive Variant이며 Navigation 두 종류가 동시에 보이지 않는가?
+- LNB의 1024/1023 경계와 Sidebar 없는 Dashboard의 48px Header·업무 상태 필터·960px 최소 폭·내부 스크롤 계약을 지키는가?
+- Navigation 간 CSS 변수 및 조합 전용 breakpoint/spacing 의존성을 추가하지 않았는가?
+- 대표 Story 및 AI 생성 지침이 같은 정책을 따르는가?
+- GNB Sidebar가 기존 LNB 부품·단일 현재 경로를 재사용하며 모바일 Header/Sheet/메뉴 버튼이 중복되지 않는가?
+
+관련 구현: [GNB](../patterns/gnb.md), [LNB](../patterns/lnb.md), [Dashboard](../patterns/dashboard-layout.md).
diff --git a/docs/guidelines/portable-test-distribution.md b/docs/guidelines/portable-test-distribution.md
new file mode 100644
index 0000000..a8e1110
--- /dev/null
+++ b/docs/guidelines/portable-test-distribution.md
@@ -0,0 +1,39 @@
+# 설치 없는 Windows 테스트 배포
+
+현재 검증된 테스트 배포 기준은 `HMDesignTest-Portable-Test-r3.zip`이며 내부 테스트용이다. 이하 실행 절차·포함 범위는 r3 기준이다. 루트 폴더는 `HMDesignTest/`이며 기존 오전 `HMDesignTest.zip`을 대체하거나 덮어쓰지 않는다.
+
+## 테스트 사용자 실행
+
+1. ZIP을 압축 해제한다.
+2. `HMDesignTest/start-preview.bat`을 더블클릭한다.
+3. 콘솔에 표시된 `http://127.0.0.1:<port>/` 주소를 브라우저에서 연다.
+
+Windows x64용 공식 Node.js 22.23.3 런타임을 동봉한다. Node.js/npm 설치, npm install/ci/run, 패키지/Storybook 빌드, Git Clone/Pull은 필요 없다. 서버는 127.0.0.1에만 바인딩하며 기본 포트는 6007이고(개발 저장소 Storybook 6024와 별개) 6007이 사용 중이면 다음 포트 또는 OS가 배정한 사용 가능한 포트를 안내한다. 기존 프로세스를 종료하지 않는다. 한글·공백 경로를 지원한다. 콘솔에서 Ctrl+C로 종료한다.
+
+## 포함 범위와 Reference
+
+최신 UI Component 44개, 8개 Pattern 모듈(Dashboard Status 포함), 공개 API 및 declarations, UI/CENTER 패키지 dist, Theme/Token/Runtime, Story 소스/설정, 완전한 정적 Storybook, 문서/AI Reference, 기존 화면 예제, 폰트/Asset 및 라이선스를 포함한다. 소스의 저장소 상대 구조를 보존한다.
+
+Dashboard Status의 `active | hold | done`, 필터 `all | active | hold | done | issue`, 독립 issue flag와 CSS/export/문서를 함께 제공한다. 대표 Dashboard Story는 Header 48px, 상태 필터, DASHBOARD ONLY 기준이다. `docs/patterns/dashboard-status-static.html`은 상태 계약 정적 예제이며 전체 Dashboard 대체 실행본이 아니다.
+
+독립 Dashboard export는 포터블 ZIP의 필수 구성이 아니다. 기존 `dist-dashboard/`는 H-1(독립 단일 HTML 미리보기 POC, PASS) 성공 산출물과 동일하지 않다. STEP 5에서 UI Preview를 표시한 미검증 `dist-dashboard/`는 제외하고 검증 대상은 정적 Storybook의 대표 Dashboard로 한정한다. export 소스와 개발자 계약은 보존한다.
+
+`.git`, 인증 정보, node_modules, 캐시, 로그, 로컬 설정, 오래된 중복 ZIP/배포 결과를 제외한다. `FILE-INVENTORY.json`에는 포함 파일의 상대경로·크기·SHA-256이 있다(인벤토리 자신은 제외). 외부 ZIP 해시 파일과 검증 보고서를 함께 제공한다.
+
+## 현재 ZIP의 시점
+
+현재 검증된 기준은 `HMDesignTest-Portable-Test-r3.zip`이다. 아래 r2와 기존 `HMDesignTest-Portable-Test.zip`은 과거 기록으로만 보존하며 현재 기준이 아니다. r3의 정확한 내용·해시는 r3의 BUILD-INFO, Inventory 및 Verification 자료를 기준으로 확인한다.
+
+과거 기록(r2): `HMDesignTest-Portable-Test-r2.zip`은 2026-10-08 최종 통합 PASS 빌드를 재사용하여 Button·Tabs·DatePicker/Combobox·Slider·Checkbox·Tooltip·Popover 개선, GNB 내부 Sidebar, Dashboard Status CSS 공개 경로, PageHeader 대표 Story를 반영한다. 당시 스냅샷·산출물 해시와 독립 실행 결과는 r2의 BUILD-INFO, Inventory 및 Verification 자료를 기준으로 확인한다. 사용자 실행 절차(위 3단계)와 AI/개발자 내부 빌드 절차(README-DEVELOPER의 `npm ci`, `build:packages`)는 서로 다르며 테스트 사용자는 후자를 수행하지 않는다.
+
+## 개발자와 운영 문서의 구분
+
+ZIP 루트 `README.md`는 위 세 단계만 테스트 실행 필수 절차로 안내한다. `README-DEVELOPER.md`와 기존 개발·운영 문서는 소스 수정, 재빌드, 장기 운영용이다. 개발자 절차의 npm 설치/빌드와 Registry/CDN/운영 업로드는 테스트 사용자의 실행 조건이 아니다. 이번 배포에서 운영 서버 업로드, STEP 7 AI 재현 테스트는 수행하지 않는다.
+
+## AI 구현 재현성 검증 상태
+
+STEP 7에서 ZIP 파일 접근 정책으로 실행하지 못한 모델 테스트는 실행 환경의 접근 제한으로 기록한다. 이를 AI의 HM 구현 실패나 지침 불이행 결과로 판정하지 않는다. 실제 모델별 화면 구현·재현성 비교 검증은 완료되지 않았으며, STEP 6의 ZIP 실행·Storybook 검증 통과가 모델별 구현 성공을 보증하지 않는다. STEP 8에서는 모델 테스트를 반복하지 않고 이 미검증 상태만 명시한다.
+
+## 라이선스
+
+공식 런타임의 전체 LICENSE와 README, 다운로드 URL 및 공식 SHA-256 증거를 `runtime/node/`에 보존한다. Node 라이선스는 저작권·허가 고지 보존 조건으로 배포를 허용한다. 원문: https://raw.githubusercontent.com/nodejs/node/v22.23.3/LICENSE . 검증 목록: https://nodejs.org/download/release/v22.23.3/SHASUMS256.txt . 폰트 OFL과 번들 의존성의 라이선스/NOTICE도 포함한다. HM/CENTER의 기존 내부 테스트 범위를 유지하며 별도 오픈소스 라이선스를 부여하지 않는다.
diff --git a/docs/guidelines/runtime-portability.md b/docs/guidelines/runtime-portability.md
new file mode 100644
index 0000000..1fd9fe7
--- /dev/null
+++ b/docs/guidelines/runtime-portability.md
@@ -0,0 +1,172 @@
+# Runtime / AI Independent Portability Policy
+
+이 문서는 HM Design System 결과물을 React 외 실행 형식으로 옮길 때 지켜야 하는 공통 계약이다. 특정 AI 모델, IDE, 유료 기능, 프레임워크 또는 빌드 도구를 전제로 하지 않는다.
+
+## 1. Source of Truth와 Target Runtime
+
+디자인 시스템의 기준은 다음 순서다.
+
+1. Design Token과 `themes/*.json`
+2. CSS Custom Properties와 Runtime Theme 계약
+3. Component visual state 및 interaction contract
+4. Component implementation
+5. Storybook/Preview
+
+작업 시작 전에 Target Runtime을 기록한다. Source of Truth 우선순위는 `themes/default.json`/공개 Theme contract → Runtime-neutral Component/Pattern contract → CSS Custom Properties → Runtime adapter → Storybook/Preview 순서다.
+
+- `REACT_VITE`: 현재 React/Vite workspace와 `@hm-design/ui` 공개 API를 사용한다.
+- `STATIC_HTML`: HTML을 `file://`로 직접 열 수 있어야 한다. JSX/TSX/TypeScript, Vite 전용 기능, bare package import를 사용하지 않는다. 저장소 내 샘플은 승인된 상대 Theme artifact와 상대 font/compatibility CSS를 사용하며, `file://`에서 `/src/...` 절대 경로를 사용하지 않는다.
+- `VANILLA_WEB`: 일반 웹 서버 또는 정적 호스팅에서 HTML/CSS/JavaScript로 실행한다.
+- `OTHER_RUNTIME`: Vue, Svelte, Angular, Web Component 등으로 변환하더라도 HM Token·Theme·Component Contract를 유지한다.
+
+Runtime이 달라져도 디자인을 재해석하거나 React 구현을 삭제하지 않는다. 기존 구현을 Reference로 삼아 같은 Design Contract와 Theme Contract를 소비하는 adapter/standalone implementation을 추가한다.
+
+## 2. 실제 HM 계약과 파일 경로
+
+다음 파일을 추측으로 복제하거나 별도 값으로 재작성하지 않는다.
+
+- `themes/default.json`: HM Default 컬러의 공식 원본
+- `packages/ui/src/theme/contract.ts`: 공개 Runtime Token, CSS property, 타입·검증 계약
+- `packages/ui/src/theme/runtime.ts`: Global/Scoped 적용·해제와 atomic validation
+- `packages/ui/src/theme/loader.ts`: URL fetch/resolve/load 경로
+- `packages/ui/src/theme.css`: package Theme CSS 진입점
+- `packages/ui/src/theme/default.css`, `primitives.css`, `<component>.css`: fallback, Semantic, Component Mapping
+- `packages/ui/package.json`: 공개 export인 `@hm-design/ui/theme`, `@hm-design/ui/theme.css`, `@hm-design/ui/tailwind.css`
+- `docs/guidelines/runtime-theme-contract.md`: Token별 CSS variable, 기본값, 영향 범위
+
+React 소비 앱은 다음 순서로 HM CSS를 로드한다.
+
+```css
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+```
+
+Standalone 결과물은 승인된 Theme CSS artifact를 상대 경로로 연결하거나, 프로젝트가 생성한 standalone artifact를 포함한다. AI가 `#...` 색상, 임의 spacing/radius, Theme variable을 추측해 복제하지 않는다. 실제 변수명과 허용 입력은 Runtime 계약표를 기준으로 한다.
+
+### 2.1 Tailwind v4 소비자 검색 범위
+
+현재 저장소의 `package.json`과 lockfile은 `tailwindcss / @tailwindcss/vite` **4.3.3**을 사용하며, [Vite 설정](../../vite.config.ts)은 `react()`와 `tailwindcss()` plugin을 연결한다. 앱은 [src/index.css](../../src/index.css)의 Tailwind/HM Tailwind와 [src/hm-theme.css](../../src/hm-theme.css)의 HM Theme를 [main.tsx](../../src/main.tsx)에서 로드한다. 외부 React 소비 앱도 CSS entry를 실제 bootstrap에서 import해야 한다.
+
+Tailwind는 기본적으로 실행 cwd를 기준으로 자동 검색하고 `node_modules`, `.gitignore` 대상 등을 제외한다. 외부 프로젝트의 junction 또는 넓은 실행 루트에서 검색 지연이 발생하면 실제 CSS 위치·실행 cwd·연결 폴더를 확인한 뒤 앱 소스 범위만 지정한다. `source("./")`는 CSS 파일의 위치를 기준으로 자동 검색 기준 경로를 정하는 지원 구문이며, 모든 junction 지연을 해결한다고 보증하지 않는다. 아래는 **소비 앱 CSS가 `src/index.css`이고 앱 코드가 `src/`에 있는 경우**의 예다.
+
+```css
+@import "tailwindcss" source("./");
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+/* Dashboard 상태를 표시하는 화면만 Theme 다음에 추가 */
+@import "@hm-design/ui/dashboard-status.css";
+@source "../index.html";
+```
+
+CSS entry가 루트에 있으면 같은 `source("./")`는 루트 전체를 뜻하므로 제한 효과가 다르다. `src/` 밖 공유 UI가 있다면 그 실제 경로를 `@source`로 추가한다. 명시 목록으로 제한할 때는 `source(none)` + 필요한 `@source`도 지원하지만, 앱·공유 UI·HM source를 빠짐없이 지정해야 한다. [공식 Tailwind 소스 검색 문서](https://tailwindcss.com/docs/detecting-classes-in-source-files).
+
+**HM Component 클래스 보존**: 공개 `@hm-design/ui/tailwind.css`를 생략하지 않는다. [패키지 소스](../../packages/ui/src/tailwind.css)는 `./components / ./patterns`를 검색하고, [기존 package build](../../scripts/build-package.mjs)는 배포 CSS에서 이를 `@source "./index.js"`로 바꾼다. 따라서 앱 자동 검색을 `src/`로 좁혀도 HM compiled 클래스는 해당 CSS의 명시 source를 통해 검색한다. 소비자가 소스 alias로 직접 연결한다면 배포 CSS와 경로가 같다고 가정하지 말고 실제 source 파일 존재를 확인한다. HM package 전체나 외부 `node_modules` 전체를 추가 검색 대상으로 삼지 않는다.
+
+완료 시 앱 CSS import 순서, HM `@source` 대상 존재, 필요한 utility 생성 여부(예: GNB 모바일 trigger의 `lg:hidden`, Badge의 flex·크기 class)를 실제 소비 빌드에서 확인한다. 이 문서 작업에서는 버전·설정·구문 지원·source 연결만 대조했다. junction 지연 재현과 외부 앱 utility 생성은 미검증이며, 새 설정 파일·의존성·빌드는 추가하지 않았다.
+
+## 3. 변환 시 보존해야 하는 계약
+
+layout, spacing, typography, border, radius, icon 크기·정렬, responsive behavior와 hover/focus/active/selected/disabled/checked/error/loading 상태를 유지한다. 접근성 semantic element, keyboard behavior, ARIA 속성도 Target Runtime에 맞는 방식으로 보존한다.
+
+프레임워크 기능은 Target Runtime의 최소 구현으로 변환한다.
+
+- React state/props → 명시적 DOM state와 Vanilla JavaScript state
+- event handler → `addEventListener`
+- conditional className → class/attribute toggle
+- component composition → semantic HTML structure
+- package icon → 배포 가능한 SVG 또는 허용된 icon artifact
+
+단순 layout·typography·color·responsive 표현은 JavaScript에 의존하지 않는다. JavaScript는 accordion, dropdown, modal, tabs 등 실제 interaction에만 추가한다.
+
+### 3.1 Dashboard 상태 계약
+
+Dashboard 업무 상태의 Runtime-neutral 기준은 `packages/ui/src/patterns/dashboard-status/contract.ts`다. 별도 Runtime은 다음을 동일하게 유지한다.
+
+- 상태 ID: `active`, `hold`, `done`; 필터 ID: `all`, `active`, `hold`, `done`, `issue`
+- `issue`는 독립 Boolean flag이며 상태 값과 동시에 존재할 수 있음
+- `done` label은 `완료`
+- `all`은 모든 record, `issue`는 `issue === true`, 나머지는 `record.status === filter`로 매칭
+- 상태 표시에는 `data-status`, 이슈에는 `data-issue="true"`, 필터 컨트롤에는 `data-filter`, 선택에는 `aria-pressed="true|false"` 사용
+- CSS 원본은 `packages/ui/src/patterns/dashboard-status/dashboard-status.css`이며, 패키지 소비자는 `@hm-design/ui/theme.css` 다음에 `@hm-design/ui/dashboard-status.css`를 로드한다. 기존 `src/patterns/dashboard-status-contract.css`는 같은 원본을 import하는 호환 경로다. 상태 CSS는 Custom Property만 정의하므로 Badge와 필터 숫자 등의 색상 mapping은 Runtime adapter에서 연결하며 색상 literal을 복제하지 않는다. active/hold/issue 값은 기존 Story 시각 보존용 compatibility mapping이며 HM Theme JSON을 변경하지 않는다. React/HTML의 `done`은 모두 `--hm-dashboard-status-done`을 사용하고, `:root` 및 `[data-hm-theme]`에서 해당 scope의 HM white token으로 재계산한다. [적용 순서와 Badge mapping](../patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약).
+
+React는 이 계약을 `Badge`와 `Button`/기존 `FilterBar` 조합으로 표현한다. Static HTML은 같은 attribute를 가진 semantic button/span과 `addEventListener` 기반 필터링으로 표현하며, `aria-controls`와 결과 count의 갱신도 유지한다. `selected`, `hover`, `focus-visible`, `disabled`는 CSS와 native button semantics로 보존한다.
+
+### 3.2 Static HTML 실행 체크리스트
+
+1. `docs/patterns/dashboard-status-static.html`을 브라우저에서 직접 `file:///...`로 연다.
+2. `../../packages/ui/dist/theme.css`, `../../src/patterns/dashboard-status-contract.css`, `../../public/fonts/NotoSansKR-variable.ttf`가 모두 로드되는지 확인한다.
+3. 전체/진행/보류/완료/이슈 버튼의 `aria-pressed`와 결과 count를 확인한다.
+4. 이슈 record가 상태 Badge와 독립 이슈 flag를 동시에 표시하는지 확인한다.
+5. 결과가 0건인 필터에서 Empty State와 `aria-live` 갱신을 확인한다.
+6. DevTools Console에 오류가 없는지 확인한다. 자동화 환경이 `file://`를 차단하면 PASS로 기록하지 않고 미검증으로 남긴다.
+
+### 3.3 AI 독립 재현 체크리스트
+
+이전 대화 없이도 다음 파일만으로 재현 가능해야 한다: `AGENTS.md`, `packages/ui/src/patterns/dashboard-status/contract.ts`, `src/patterns/dashboard-status-contract.css`, `src/patterns/dashboard-layout.stories.tsx`, `docs/patterns/dashboard-status-static.html`, `packages/ui/dist/theme.css`, `docs/guidelines/runtime-theme-contract.md`. 구현 후 상태 ID/label, matching/count, DOM attributes, Theme artifact 상대 경로, React/Static HTML 차이, `file://` 검증 결과를 각각 보고한다.
+
+### 3.2 Button 사용 계약
+
+Button의 공통 기준은 [Button 문서](../components/button.md)의 역할·조합 규칙을 따른다. `brand`는 실제 화면당 최대 1개이고 팝업에는 사용하지 않으며, 일반 확인/작성은 같은 `size`의 Solid 세트, 삭제 확인과 반복·보조 작업은 같은 `size`의 Outline 세트를 사용한다. Static HTML과 다른 프레임워크는 React API를 복제하지 않아도 되지만, semantic button, `data-slot`/`data-variant`/`data-appearance`/`data-size` 계약, 기존 Theme CSS variable, native disabled 및 keyboard/modal 동작을 보존해야 한다.
+
+## 4. Asset과 실행 위치
+
+`STATIC_HTML`은 Vite asset resolution을 사용하지 않는다. HTML과 함께 이동 가능한 상대 경로를 사용한다.
+
+```text
+./assets/
+./styles/
+./fonts/
+./icons/
+```
+
+CSS, JavaScript, SVG/image/icon, font, theme stylesheet를 모두 확인한다. package의 compiled CSS가 사용하는 font 경로와 source 개발 서버의 경로가 다를 수 있으므로, package 산출물 사용 시 package `dist`와 export 계약을 우선한다. 현재 source `packages/ui/src/theme.css`의 개발용 font 경로는 `/fonts/NotoSansKR-variable.ttf`이며 App/Storybook은 `public/fonts/`를 사용한다.
+
+### 4.1 Noto Sans KR 경로: 실행 환경별 확인
+
+- **HMDesignSystem 개발 저장소**: 원본은 `public/fonts/NotoSansKR-variable.ttf`, 라이선스는 같은 폴더의 `NotoSansKR-OFL.txt`다. Theme source의 `@font-face`는 `/fonts/NotoSansKR-variable.ttf`를 사용한다. Vite는 `public/`을 루트에서 제공하고 Storybook은 [.storybook/main.ts](../../.storybook/main.ts)의 `staticDirs`로 `/fonts`에 연결한다. 이 경로는 해당 서버 환경의 계약이다.
+- **포터블 테스트 ZIP(현재 기준 r3, 아래는 r2 시점 확인 기록)**: r2 ZIP 안 `HMDesignTest/public/fonts/`, `HMDesignTest/packages/ui/dist/fonts/`, `HMDesignTest/storybook-static/fonts/`에 기존 폰트와 라이선스가 모두 있다. 포터블 실행기는 사전 빌드된 Storybook을 제공하므로 실행 화면은 그 안의 font/CSS asset을 사용한다. 개발 폴더의 `/fonts` 경로를 다른 실행 위치에 그대로 적용한다고 가정하지 않는다. r2는 문서 개선 이전 과거 스냅샷으로 보존하며 현재 기준이 아니다. r3의 폰트 포함 여부는 r3 Inventory로 별도 확인한다.
+- **별도 React 소비자**: `@hm-design/ui/theme.css`는 공개 export인 `dist/theme.css`다. 기존 build가 원본 font-face URL을 `./fonts/NotoSansKR-variable.ttf`로 바꾸고 폰트·OFL 파일을 `dist/fonts/`로 복사한다. 정상 package를 CSS import로 소비할 때 별도 앱 `/fonts` 복사에 의존하지 않는다. Vite가 CSS `url()` 자산을 처리하므로 최종 배포 `base`와 출력 URL을 확인한다. Theme 소스 파일만 복사하거나 CSS만 분리하면 이 계약이 사라지므로 실제 폰트와 상대 경로도 함께 배치한다. [Vite 공식 Asset 문서](https://vite.dev/guide/assets.html).
+- **단일 `preview.html`**: `file://`에서는 `/fonts/...`가 HTML 옆 폴더를 뜻하지 않는다. 파일과 폴더를 함께 전달한다면 상대 CSS/font URL을 사용하고, CSS 안 URL은 HTML이 아닌 해당 CSS 파일 위치 기준으로 계산한다. [기존 Static HTML](../patterns/dashboard-status-static.html)은 상대 package Theme와 별도 상대 font-face를 사용하는 **다중 파일** Reference다. HTML 하나만 전달하려면 승인된 Theme·소비 CSS의 import를 모두 펼쳐 inline하고 폰트·아이콘·이미지 등 외부 자산도 내장한다. Tailwind 입력 CSS의 `@source / @apply`나 bare package import를 브라우저에 그대로 전달하지 않는다.
+
+단일 HTML의 font-face는 기존 TTF를 data URL로 내장할 수 있다. 아래는 저장소 루트에서 기존 폰트로 **삽입할 CSS 문자열만 만드는** PowerShell 예이며, Theme/다른 Asset의 내장을 대신하지 않는다.
+
+```powershell
+$fontPath = Join-Path (Get-Location) 'public/fonts/NotoSansKR-variable.ttf'
+$fontData = [Convert]::ToBase64String([System.IO.File]::ReadAllBytes($fontPath))
+$fontRule = '@font-face { font-family: "Noto Sans KR"; src: url("data:font/ttf;base64,' + $fontData + '") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }'
+# 기존 font-face를 $fontRule로 교체해 preview.html의 <style>에 삽입한다.
+```
+
+Font Family `Noto Sans KR`, 기존 variable weight `100 900`, 폰트 파일·라이선스를 유지한다. 폴더 배포에는 OFL을 함께 전달하고 단일 HTML 배포에는 기존 OFL 전문을 HTML comment 등으로 포함한다. base64는 파일 크기를 늘리므로 내장 여부는 전달 형식에 따라 선택한다. 최종 font 요청·fallback 여부·다른 Asset 로드와 `file://` 실행은 소비 결과물에서 검증하며, 이번 문서 작업에서 새 HTML 생성·실행은 하지 않았다.
+
+## 5. Target Runtime별 최소 검증
+
+### 5.1 React Dashboard standalone export
+
+설치 없는 테스트 ZIP은 사전 빌드된 Storybook의 Dashboard 대표 Story를 제공한다. 독립 Dashboard export는 기존 배포 필수 구성이 아니며, STEP 5에서 UI Preview로 표시된 미검증 `dist-dashboard/`는 포터블 ZIP에서 제외한다. 아래는 개발자용 별도 export 계약이며 해당 빌드 결과의 성공을 보증하지 않는다. [포터블 테스트 안내](portable-test-distribution.md). 이 `dist-dashboard/` export는 H-1(독립 단일 HTML 미리보기 POC, PASS)의 성공 산출물과 동일하지 않다. H-2(AI 생성 화면의 자동 빌드·캡처·검증)는 Storybook 배포와 별도 기능이며 구현 완료 여부를 이 문서가 보증하지 않는다.
+
+Dashboard Production 화면은 Storybook Story를 import하지 않는 독립 React composition을 소비하는 Vite entry로 생성한다. Storybook은 구조·상태의 Reference이며 Production export의 CSS 또는 bootstrap source가 아니다.
+
+- Source: `src/patterns/dashboard-composition.tsx`의 `DashboardScreen`
+- Entry: `src/exports/dashboard/index.html` + `src/exports/dashboard/main.tsx`
+- Build: `npm run build:dashboard-export`
+- Output: `dist-dashboard/`
+- CSS entry 순서: `@/index.css` → `@/hm-theme.css` → `@hm-design/ui/dashboard-status.css` → `./dashboard-export.css`. `@/index.css`가 Tailwind 본체와 HM Tailwind CSS를 로드하므로 `@hm-design/ui/tailwind.css`만 단독 import하지 않는다.
+- Runtime: React compiled IIFE bundle, classic `defer` script, dynamic import disabled, relative asset base
+
+이 export는 Storybook manager·Story CSS·개발 서버에 의존하지 않는다. `DashboardScreen`은 Dashboard Production Composition을 직접 사용하며, `dist-dashboard/index.html`은 HTTP 정적 서버와 `file://` 직접 실행을 각각 별도로 검증한다. HTTP 성공은 `file://` 성공을 의미하지 않는다. 빌드 성공 또는 CSS 텍스트의 선택자 존재만으로 화면 검증을 통과시키지 말고, 실제 렌더링에서 `.flex`·`.grid` 등의 utility, Theme CSS Variables, Dashboard Status CSS 및 Header/Layout/Card/FilterBar 레이아웃 적용을 확인한다.
+
+- `REACT_VITE`: Vite 실행, Theme 적용, component rendering, interaction, responsive behavior를 확인한다.
+- `STATIC_HTML`: 실제 HTML 파일을 `file://`로 직접 열어 CSS/JavaScript/font/SVG/image/icon 로드, HM CSS Custom Properties, responsive behavior, interaction, console runtime error를 확인한다. Vite dev server 성공만으로 완료 처리하지 않는다.
+- `VANILLA_WEB`/`OTHER_RUNTIME`: 실제 실행 환경에서 Theme Contract, visual/state/interaction/responsive parity와 asset resolution을 확인한다.
+
+검증은 전체 회귀보다 변환된 범위의 최소 실행 검증을 우선한다. 확인이 불가능한 항목은 성공으로 간주하지 말고 차이와 제한을 기록한다.
+
+## 6. 구현 및 AI 독립성
+
+작업에 필요한 정보는 저장소의 코드, Theme artifact, 문서, package export와 Reference Story에 있어야 한다. 이전 AI 대화, Memory, 특정 IDE/Agent 전용 기능을 전제로 하지 않는다. 구현 편의를 위해 Theme이나 Component visual contract를 변경하지 않는다.
+
+우선순위는 `HM Theme/Token 정확성 → visual parity → state parity → responsive behavior → accessibility → interaction → runtime 편의성`이다.
+
+관련 문서: [Runtime Theme](runtime-theme.md), [Runtime 계약표](runtime-theme-contract.md), [Theme delivery](theme-delivery.md), [Theme/Token 가이드](테마-토큰-가이드.md), [개발 적용 가이드](개발-적용-가이드.md).
diff --git a/docs/guidelines/runtime-theme-contract.md b/docs/guidelines/runtime-theme-contract.md
new file mode 100644
index 0000000..06052be
--- /dev/null
+++ b/docs/guidelines/runtime-theme-contract.md
@@ -0,0 +1,98 @@
+# Public Runtime Theme Contract
+
+계약 Source of Truth: `packages/ui/src/theme/contract.ts`. 모든 입력은 선택적이며 외부 override 가능. Component/derived 변수는 공개 입력이 아니다.
+
+| Runtime JSON Token | CSS Token | Default | 의미 | 외부 override | 주요 영향 |
+|---|---|---|---|---|---|
+| `color.bg.content` | `--hm-sem-bg-content` | `#f5f0e5` | 콘텐츠 면 | Yes | gnb, lnb |
+| `color.bg.surface` | `--hm-sem-bg-surface` | `#ffffff` | 기본/카드/입력 면 | Yes | checkbox, radio, switch, slider, badge, table, input, select, button, gnb |
+| `color.fg.primary` | `--hm-sem-fg-primary` | `#0a221d` | 주요 텍스트 | Yes | calendar, pagination, badge, table, input, select, gnb |
+| `color.fg.secondary` | `--hm-sem-fg-secondary` | `#6e6759` | 보조 텍스트 | Yes | calendar, pagination, badge, table, gnb |
+| `color.fg.placeholder` | `--hm-sem-fg-placeholder` | `#999999` | Placeholder | Yes | input, select |
+| `color.action.primary` | `--hm-sem-action-primary` | `#123328` | Strong / Primary ink | Yes | checkbox/radio hover, slider Hover/Drag halo, pagination current, badge default, button outline, navigation current ink |
+| `color.action.cancel` | `--hm-sem-action-cancel` | `#6e6759` | 공개 취소 역할 | Yes | Button `variant="cancel"` + `appearance="outline"` |
+| `color.action.destructive` | `--hm-sem-action-destructive` | `#d32f2f` | 오류/위험 역할 | Yes | checkbox, radio, badge, input, button |
+| `color.stroke.default` | `--hm-sem-stroke-default` | `#9a9284` | 기본 border | Yes | checkbox, radio, switch, badge |
+| `color.stroke.input.default` | `--hm-sem-stroke-input-default` | `#dedbd2` | 입력/패널 divider border | Yes | table, input, select |
+| `color.stroke.input.focus` | `--hm-sem-stroke-input-focus` | `#266651` | 공통 Focus border/ring | Yes | input, select, button, checkbox, calendar, slider Keyboard Focus halo 등; GNB/LNB는 contextual 예외 |
+| `color.bg.brand.stop.0` | `--hm-sem-brand-bg-stop-0` | `#0a221d` | 기존 gradient stop: color.bg.brand.stop.0 | Yes | Theme palette / adapter |
+| `color.bg.brand.stop.12` | `--hm-sem-brand-bg-stop-12` | `#071e18` | 기존 gradient stop: color.bg.brand.stop.12 | Yes | Theme palette / adapter |
+| `color.bg.brand.stop.42` | `--hm-sem-brand-bg-stop-42` | `#123328` | 기존 gradient stop: color.bg.brand.stop.42 | Yes | Theme palette / adapter |
+| `color.bg.brand.stop.78` | `--hm-sem-brand-bg-stop-78` | `#266651` | 기존 gradient stop: color.bg.brand.stop.78 | Yes | Theme palette / adapter |
+| `color.bg.brand.stop.100` | `--hm-sem-brand-bg-stop-100` | `#205241` | 기존 gradient stop: color.bg.brand.stop.100 | Yes | Theme palette / adapter |
+| `surface.action.primary.stop.0` | `--hm-sem-action-surface-stop-0` | `#1f8265` | 기존 gradient stop: surface.action.primary.stop.0 | Yes | button, gnb |
+| `surface.action.primary.stop.30` | `--hm-sem-action-surface-stop-30` | `#165c47` | 기존 gradient stop: surface.action.primary.stop.30 | Yes | button, gnb |
+| `surface.action.primary.stop.65` | `--hm-sem-action-surface-stop-65` | `#114838` | 기존 gradient stop: surface.action.primary.stop.65 | Yes | button, gnb |
+| `surface.action.primary.stop.100` | `--hm-sem-action-surface-stop-100` | `#08241c` | 기존 gradient stop: surface.action.primary.stop.100 | Yes | button, gnb |
+| `surface.action.primary.border.stop.0` | `--hm-sem-action-border-stop-0` | `#0a221d` | 기존 gradient stop: surface.action.primary.border.stop.0 | Yes | button |
+| `surface.action.primary.border.stop.50` | `--hm-sem-action-border-stop-50` | `#34daaa` | 기존 gradient stop: surface.action.primary.border.stop.50 | Yes | button |
+| `surface.action.primary.border.stop.100` | `--hm-sem-action-border-stop-100` | `#08241c` | 기존 gradient stop: surface.action.primary.border.stop.100 | Yes | button |
+| `radius.input.default` | `--hm-radius-input` | `4px` | Input/Select radius | Yes | input, select |
+| `radius.container.default` | `--hm-radius-container` | `4px` | Container radius | Yes | Theme palette / adapter |
+| `color.state.active` | `--hm-sem-state-active` | `#266651` | Checked / Selected / ON fill | Yes | checkbox, radio, switch, slider, progress, calendar |
+| `color.on.state.active` | `--hm-sem-on-state-active` | `#ffffff` | Active 위 텍스트/indicator | Yes | checkbox, calendar |
+| `color.fg.inverse` | `--hm-sem-on-action-primary` | `#ffffff` | 반전 텍스트 | Yes | pagination, badge, button, gnb, lnb |
+| `color.bg.subtle` | `--hm-sem-bg-subtle` | `#f4f1ea` | 은은한 면 | Yes | calendar, badge, table |
+| `color.accent` | `--hm-sem-accent` | `#bddfd4` | Soft Highlight 45% / Selected·Open surface 100% 원색 | Yes | select, combobox, menu item, table, calendar, pagination hover / toggle, menubar, navigation-menu trigger |
+| `color.on.accent` | `--hm-sem-on-accent` | `#123328` | Accent 위 텍스트; Primary와 독립 sibling | Yes | select, combobox, menu item, calendar, pagination hover, toggle, menubar, navigation-menu |
+| `color.palette.green-light-4` | `--hm-sem-palette-green-light-4` | `#34daaa` | 선택적 Theme 팔레트: green-light-4 | Yes | button |
+| `color.palette.green-light-3` | `--hm-sem-palette-green-light-3` | `#249473` | 선택적 Theme 팔레트: green-light-3 | Yes | data-table Sort Direction Accent, tabs 장식, lnb gradient |
+| `color.palette.green-light-2` | `--hm-sem-palette-green-light-2` | `#266651` | 선택적 Theme 팔레트: green-light-2 | Yes | checkbox, radio, switch, slider, progress, calendar, table, input, select, gnb, lnb |
+| `color.palette.green-light-1` | `--hm-sem-palette-green-light-1` | `#205241` | 선택적 Theme 팔레트: green-light-1 | Yes | table, button, lnb |
+| `color.palette.green-default` | `--hm-sem-palette-green-default` | `#123328` | 선택적 Theme 팔레트: green-default | Yes | checkbox, radio, slider, calendar, pagination, badge, select, button, gnb, lnb |
+| `color.palette.green-dark-1` | `--hm-sem-palette-green-dark-1` | `#0a221d` | 선택적 Theme 팔레트: green-dark-1 | Yes | calendar, pagination, badge, table, input, select, button, gnb |
+| `color.palette.green-dark-2` | `--hm-sem-palette-green-dark-2` | `#071e18` | 선택적 Theme 팔레트: green-dark-2 | Yes | Theme palette / adapter |
+| `color.palette.brown-light-2` | `--hm-sem-palette-brown-light-2` | `#897445` | 선택적 Theme 팔레트: brown-light-2 | Yes | button |
+| `color.palette.brown-light-1` | `--hm-sem-palette-brown-light-1` | `#604f32` | 선택적 Theme 팔레트: brown-light-1 | Yes | button |
+| `color.palette.brown-default` | `--hm-sem-palette-brown-default` | `#3e3523` | 선택적 Theme 팔레트: brown-default | Yes | button |
+| `color.palette.brown-dark-1` | `--hm-sem-palette-brown-dark-1` | `#352d1d` | 선택적 Theme 팔레트: brown-dark-1 | Yes | button |
+| `color.palette.brown-light-4` | `--hm-sem-palette-brown-light-4` | `#ecd4a2` | 선택적 Theme 팔레트: brown-light-4 | Yes | Theme palette / adapter |
+| `color.palette.orange-light-4` | `--hm-sem-palette-orange-light-4` | `#feba88` | 선택적 Theme 팔레트: orange-light-4 | Yes | button |
+| `color.palette.orange-default` | `--hm-sem-palette-orange-default` | `#cc5200` | 선택적 Theme 팔레트: orange-default | Yes | button |
+| `color.palette.warm-neutral-light` | `--hm-sem-palette-warm-neutral-light` | `#e0dace` | 선택적 Theme 팔레트: warm-neutral-light | Yes | slider, progress |
+| `color.palette.warm-neutral-mid` | `--hm-sem-palette-warm-neutral-mid` | `#9a9284` | 선택적 Theme 팔레트: warm-neutral-mid | Yes | checkbox, radio, switch, badge |
+| `color.palette.warm-neutral-dark` | `--hm-sem-palette-warm-neutral-dark` | `#6e6759` | 선택적 Theme 팔레트: warm-neutral-dark | Yes | calendar, pagination, badge, table, gnb |
+| `color.palette.beige-light` | `--hm-sem-palette-beige-light` | `#f5f0e5` | 선택적 Theme 팔레트: beige-light | Yes | gnb, lnb |
+| `color.palette.red-danger` | `--hm-sem-palette-red-danger` | `#d32f2f` | 선택적 Theme 팔레트: red-danger | Yes | checkbox, radio, badge, input, button |
+| `color.palette.white` | `--hm-sem-palette-white` | `#ffffff` | 선택적 Theme 팔레트: white | Yes | checkbox, radio, switch, slider, calendar, pagination, badge, table, input, select, button, gnb, lnb |
+| `color.palette.black` | `--hm-sem-palette-black` | `#000000` | 선택적 Theme 팔레트: black | Yes | checkbox, switch, select, button, gnb, lnb |
+| `color.palette.neutral-gray-500` | `--hm-sem-palette-neutral-gray-500` | `#999999` | 선택적 Theme 팔레트: neutral-gray-500 | Yes | input, select |
+| `color.palette.green-tone-1` | `--hm-sem-palette-green-tone-1` | `#1f8265` | 선택적 Theme 팔레트: green-tone-1 | Yes | button, gnb |
+| `color.palette.green-tone-2` | `--hm-sem-palette-green-tone-2` | `#165c47` | 선택적 Theme 팔레트: green-tone-2 | Yes | button, gnb |
+| `color.palette.green-tone-3` | `--hm-sem-palette-green-tone-3` | `#114838` | 선택적 Theme 팔레트: green-tone-3 | Yes | button, gnb |
+| `color.palette.green-tone-4` | `--hm-sem-palette-green-tone-4` | `#08241c` | 선택적 Theme 팔레트: green-tone-4 | Yes | button, gnb |
+| `color.palette.warm-neutral-pale` | `--hm-sem-palette-warm-neutral-pale` | `#dedbd2` | 선택적 Theme 팔레트: warm-neutral-pale | Yes | table, input, select |
+| `color.palette.warm-neutral-secondary` | `--hm-sem-palette-warm-neutral-secondary` | `#ede8db` | 선택적 Theme 팔레트: warm-neutral-secondary | Yes | Theme palette / adapter |
+| `color.palette.warm-neutral-muted` | `--hm-sem-palette-warm-neutral-muted` | `#f4f1ea` | 선택적 Theme 팔레트: warm-neutral-muted | Yes | calendar, badge, table |
+| `color.palette.green-tint` | `--hm-sem-palette-green-tint` | `#bddfd4` | 선택적 Theme 팔레트: green-tint | Yes | calendar, pagination, table, select, gnb, lnb |
+| `color.palette.yellow-accent` | `--hm-sem-palette-yellow-accent` | `#ffc600` | 선택적 Theme 팔레트: yellow-accent | Yes | lnb |
+| `color.palette.brown-deep` | `--hm-sem-palette-brown-deep` | `#221d13` | 선택적 Theme 팔레트: brown-deep | Yes | button |
+| `color.palette.brown-highlight` | `--hm-sem-palette-brown-highlight` | `#a98d53` | 선택적 Theme 팔레트: brown-highlight | Yes | button |
+| `color.palette.orange-light` | `--hm-sem-palette-orange-light` | `#d35a00` | 선택적 Theme 팔레트: orange-light | Yes | button |
+| `color.palette.orange-mid` | `--hm-sem-palette-orange-mid` | `#ce5600` | 선택적 Theme 팔레트: orange-mid | Yes | button |
+| `color.palette.orange-dark` | `--hm-sem-palette-orange-dark` | `#b44b00` | 선택적 Theme 팔레트: orange-dark | Yes | button |
+| `color.palette.orange-deep` | `--hm-sem-palette-orange-deep` | `#783402` | 선택적 Theme 팔레트: orange-deep | Yes | button |
+| `color.palette.orange-border` | `--hm-sem-palette-orange-border` | `#bc4c00` | 선택적 Theme 팔레트: orange-border | Yes | button |
+| `color.palette.orange-border-deep` | `--hm-sem-palette-orange-border-deep` | `#5e2902` | 선택적 Theme 팔레트: orange-border-deep | Yes | button |
+| `color.palette.gray` | `--hm-sem-palette-gray` | `#767676` | 선택적 Theme 팔레트: gray | Yes | button |
+| `color.palette.gray-dark` | `--hm-sem-palette-gray-dark` | `#5a5a5a` | 선택적 Theme 팔레트: gray-dark | Yes | button |
+| `color.palette.indicator` | `--hm-sem-palette-indicator` | `#2d2d2d` | 선택적 Theme 팔레트: indicator | Yes | select |
+
+총 73개. 기존 25개 + 핵심 역할 6개 + 선택적 팔레트 42개. 팔레트는 컴포넌트별 계약이 아니며 Primary / Active / Focus를 개별 지정하면 팔레트 alias보다 우선한다. Focus와 Active, Primary와 On Accent는 각각 sibling이며 서로 alias하지 않는다.
+
+`color.action.cancel`은 Button의 `variant="cancel"` Outline ink를 위한 Public Runtime role로 사용한다. Solid 취소는 기존 gray Component mapping을 유지하고, Outline 취소는 이 semantic role을 소비한다. 외부 소비 가능성이 있으므로 deprecated로 간주하지 않는다. 적용·병합·fallback·scope 정책은 [Runtime Theme](runtime-theme.md)를 따른다.
+# 디자인팀 Runtime 운영 추가 결정 — 2026-10-06
+
+기존 v1 입력 73개와 CSS property/type 계약을 유지한다. 공개 API `isRuntimeTheme(unknown): value is RuntimeTheme`를 제공한다. 이 사전 검증은 DOM을 변경하지 않는다. 기존 `applyRuntimeTheme`의 invalid 입력 시 reset 정책은 유지한다. 편집기는 사전 검증으로 invalid Import를 차단해 마지막 유효 Theme를 보존한다.
+
+Default 컬러의 운영 원본은 `themes/default.json`(71개 컬러)이다. `scripts/theme-defaults.mjs`가 JSON과 컬러 literal 없는 alias/geometry template에서 package `primitives.css`, `default.css`, `default-values.generated.ts`를 생성한다. `contract.ts`의 defaultValue와 `defaultRuntimeTheme`는 생성 데이터를 읽는다. 2개 radius/geometry는 template에서 유지한다. CSS fallback/현재 색을 유지하고 세 가지 최종 명령의 pre hook에서 stale 생성 데이터를 검사한다. Theme-only 산출은 `npm run build:themes`로 분리한다.
+
+Storybook `Theme/Designer Playground/Editor`는 17개 상위 컬러 역할과 JSON URL/파일 Preview를 제공하는 소비자다. Global decorator에서 `resolveRuntimeTheme(theme, defaultJson)` 후 Production `applyRuntimeTheme(document.documentElement, theme)` → CSS Custom Properties → 기존 Mapping으로 적용한다. JSON Export/Import는 동일 v1 계약이다. 컬러 artifact/편집기만 radius를 거부한다. Production API의 기존 radius/gradient 계약은 유지한다.
+
+추가 Production API는 `fetchRuntimeTheme(url, request?)`, `resolveRuntimeTheme(theme, defaults?)`, `loadRuntimeTheme(root,url,options?)`다. fetch는 DOM과 분리되며 validation은 기존 `isRuntimeTheme`을 재사용한다. Loader 실패는 HM package fallback, partial은 같은 계약으로 교체/병합하며 superseded 요청은 새 Theme를 덮거나 reset하지 않는다. 회사 CDN URL은 하드코딩하지 않는다.
+
+사용법: [디자인팀 Theme 가이드](designer-theme-guide.md), [Theme 운영/배포](theme-delivery.md). 적용·fallback·scope 정책: [Runtime Theme](runtime-theme.md).
+
+## Dashboard 상태 색상 범위
+
+Dashboard의 `active / hold / done / issue` 업무 상태 계약은 `packages/ui/src/patterns/dashboard-status/contract.ts`에서 ID·label·tone을 제공한다. 상태 변수 원본은 `packages/ui/src/patterns/dashboard-status/dashboard-status.css`이며 `@hm-design/ui/dashboard-status.css`로 배포한다. `src/patterns/dashboard-status-contract.css`는 기존 Story/HTML 경로의 호환 import다. Theme CSS 다음에 상태 CSS를 로드하고 `--hm-dashboard-status-active|hold|done|issue`를 화면 요소의 색상에 별도로 연결한다. 상태 CSS 자체는 Badge나 `data-status`를 자동으로 꾸미지 않는다. active/hold/issue는 기존 Story 색상을 보존하는 compatibility mapping이고 done은 `:root` 및 `[data-hm-theme]`에서 해당 scope의 기존 HM white token을 참조한다. 기존 HM Theme 및 Public Runtime Token/JSON 73개는 변경하지 않으며, 실제 Production 소비처가 반복되어 공통 색상 의미가 확정될 때만 Semantic Token 승격을 검토한다.
diff --git a/docs/guidelines/runtime-theme-hardcode-audit.csv b/docs/guidelines/runtime-theme-hardcode-audit.csv
new file mode 100644
index 0000000..c78b42c
--- /dev/null
+++ b/docs/guidelines/runtime-theme-hardcode-audit.csv
@@ -0,0 +1,1314 @@
+"phase","file","line","value","classification","action"
+"before","packages/ui/src/theme/alert-dialog.css","12","rgb(0 0 0 / 0.2)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/badge.css","33","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/breadcrumb.css","41","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/button.css","30","#221d13","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","31","#a98d53","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","31","#221d13","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","32","#d35a00","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","32","#ce5600","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","32","#b44b00","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","32","#783402","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","33","#bc4c00","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","33","#5e2902","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","44","#767676","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","45","#5a5a5a","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/button.css","90","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/button.css","91","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/button.css","92","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/button.css","96","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/button.css","96","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/button.css","131","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/button.css","171","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/calendar.css","19","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/calendar.css","30","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/calendar.css","39","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/calendar.css","98","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/calendar.css","109","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/calendar.css","150","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/calendar.css","162","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/carousel.css","67","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/checkbox.css","47","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/checkbox.css","47","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/collapsible.css","29","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/collapsible.css","43","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/command.css","30","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/command.css","69","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/context-menu.css","22","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/dashboard-layout.css","11","rgb(7 30 24 / 0.18)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/dashboard-layout.css","12","rgb(7 30 24 / 0.18)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/default.css","6","color-mix(in srgb, var(--hm-color-primary) 85%, var(--hm-black))","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/default.css","7","color-mix(in srgb, var(--hm-color-primary) 70%, var(--hm-black))","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/default.css","21","color-mix(in srgb, var(--hm-color-action-destructive) 8%, var(--hm-color-surface-default))","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/default.css","22","color-mix(in srgb, var(--hm-black) 20%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/default.css","23","color-mix(in srgb, var(--hm-black) 30%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/default.css","24","color-mix(in srgb, var(--hm-white) 10%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/default.css","25","color-mix(in srgb, var(--hm-black) 25%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/default.css","89","rgb(0 0 0 / 0.2)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/dialog.css","6","rgb(0 0 0 / 0.2)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/dialog.css","102","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/drawer.css","11","rgb(0 0 0 / 0.2)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/dropdown-menu.css","22","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/gnb.css","20","color-mix(in srgb, var(--hm-black) 30%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/gnb.css","22","color-mix(in srgb, var(--hm-black) 10%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/gnb.css","50","rgb(0 0 0 / 0.1)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/gnb.css","83","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/gnb.css","205","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/gnb.css","242","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/gnb.css","246","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/gnb.css","298","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/gnb.css","335","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/gnb.css","349","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/gnb.css","473","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/input.css","100","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/lnb.css","21","color-mix(in srgb, var(--hm-black) 30%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/lnb.css","44","color-mix(in srgb, var(--hm-black) 10%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/lnb.css","51","rgb(0 0 0 / 0.3)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/lnb.css","51","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/lnb.css","52","rgb(0 0 0 / 0.2)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/lnb.css","52","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/lnb.css","53","rgb(0 0 0 / 0.2)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/lnb.css","53","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/lnb.css","55","color-mix(in srgb, var(--hm-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/lnb.css","74","color-mix(in srgb, var(--hm-green-tint) 40%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/lnb.css","75","color-mix(in srgb, var(--hm-green-light-2) 40%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/lnb.css","178","color-mix(in srgb, var(--hm-white) 35%, transparent) transparent","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/lnb.css","192","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/lnb.css","249","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/lnb.css","253","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/loading-screen.css","10","rgb(0 0 0 / 0.45)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/loading-screen.css","24","color-mix(in srgb, var(--hm-loading-screen-foreground) 60%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/menubar.css","38","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/navigation-menu.css","19","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/navigation-menu.css","56","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/navigation-menu.css","74","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/pagination.css","16","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/pagination.css","56","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/pagination.css","69","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/primitives.css","3","#34daaa","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","4","#249473","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","5","#266651","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","6","#205241","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","7","#123328","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","8","#0a221d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","9","#071e18","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","11","#897445","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","12","#604f32","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","13","#3e3523","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","14","#352d1d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","16","#ecd4a2","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","18","#feba88","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","19","#cc5200","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","21","#e0dace","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","22","#9a9284","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","23","#6e6759","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","24","#f5f0e5","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","26","#d32f2f","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","27","#ffffff","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","28","#000000","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","29","#999999","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","32","#1f8265","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","33","#165c47","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","34","#114838","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","35","#08241c","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","36","#dedbd2","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","37","#ede8db","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","38","#f4f1ea","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","39","#bddfd4","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/primitives.css","44","#ffc600","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"before","packages/ui/src/theme/radio-group.css","50","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/radio-group.css","50","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/select.css","40","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/select.css","42","rgb(0 0 0 / 0.12)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/select.css","47","#2d2d2d","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/sheet.css","10","rgb(0 0 0 / 0.2)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/slider.css","14","color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/sonner.css","13","rgb(0 0 0 / 0.2)","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"before","packages/ui/src/theme/switch.css","33","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/switch.css","33","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/table.css","18","color-mix(in srgb, var(--hm-green-tint) 30%, var(--hm-white))","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/table.css","23","color-mix(in srgb, var(--hm-green-light-2) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/table.css","26","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/table.css","27","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/tabs.css","17","color-mix(in srgb, var(--hm-green-tint) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/tabs.css","18","color-mix(in srgb, var(--hm-green-light-2) 35%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/tabs.css","24","color-mix(in srgb, var(--hm-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/tabs.css","47","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/tabs.css","87","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/tabs.css","87","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/tabs.css","131","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/tabs.css","175","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/tabs.css","191","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/tabs.css","197","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/toggle-group.css","20","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/toggle-group.css","22","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/toggle-group.css","42","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/toggle.css","18","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/theme/toggle.css","20","color-mix(in srgb, var(--accent) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"before","packages/ui/src/theme/toggle.css","41","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"before","packages/ui/src/tailwind.css","55","oklch(1 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","56","oklch(0.145 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","57","oklch(1 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","58","oklch(0.145 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","59","oklch(1 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","60","oklch(0.145 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","61","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","62","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","63","oklch(0.97 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","64","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","65","oklch(0.97 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","66","oklch(0.556 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","67","oklch(0.97 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","68","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","69","oklch(0.577 0.245 27.325)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","70","oklch(0.922 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","71","oklch(0.922 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","72","oklch(0.708 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","73","oklch(0.87 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","74","oklch(0.556 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","75","oklch(0.439 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","76","oklch(0.371 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","77","oklch(0.269 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","79","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","80","oklch(0.145 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","81","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","82","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","83","oklch(0.97 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","84","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","85","oklch(0.922 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","86","oklch(0.708 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","90","oklch(0.145 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","91","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","92","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","93","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","94","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","95","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","96","oklch(0.922 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","97","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","98","oklch(0.269 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","99","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","100","oklch(0.269 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","101","oklch(0.708 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","102","oklch(0.269 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","103","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","104","oklch(0.704 0.191 22.216)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","105","oklch(1 0 0 / 10%)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","106","oklch(1 0 0 / 15%)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","107","oklch(0.556 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","108","oklch(0.87 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","109","oklch(0.556 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","110","oklch(0.439 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","111","oklch(0.371 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","112","oklch(0.269 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","113","oklch(0.205 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","114","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","115","oklch(0.488 0.243 264.376)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","116","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","117","oklch(0.269 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","118","oklch(0.985 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","119","oklch(1 0 0 / 10%)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"before","packages/ui/src/tailwind.css","120","oklch(0.556 0 0)","INTENTIONAL","HM 중복 root/dark preset 제거, chart/sidebar base fallback 유지"
+"after","packages/ui/src/components/ui/alert-dialog.tsx","35","bg-black/10","INTENTIONAL","shadcn 원본 overlay class 유지; 실제 색상은 overlay.css의 Semantic이 override"
+"after","packages/ui/src/components/ui/dialog.tsx","47","bg-black/10","INTENTIONAL","shadcn 원본 overlay class 유지; 실제 색상은 overlay.css의 Semantic이 override"
+"after","packages/ui/src/components/ui/drawer.tsx","49","bg-black/10","INTENTIONAL","shadcn 원본 overlay class 유지; 실제 색상은 overlay.css의 Semantic이 override"
+"after","packages/ui/src/components/ui/sheet.tsx","43","bg-black/10","INTENTIONAL","shadcn 원본 overlay class 유지; 실제 색상은 overlay.css의 Semantic이 override"
+"after","packages/ui/src/tailwind.css","56","oklch(0.87 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","57","oklch(0.556 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","58","oklch(0.439 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","59","oklch(0.371 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","60","oklch(0.269 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","61","oklch(0.985 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","62","oklch(0.145 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","63","oklch(0.205 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","64","oklch(0.985 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","65","oklch(0.97 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","66","oklch(0.205 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","67","oklch(0.922 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/tailwind.css","68","oklch(0.708 0 0)","INTENTIONAL","upstream chart/sidebar fallback 유지"
+"after","packages/ui/src/theme/alert-dialog.css","12","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/badge.css","33","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/breadcrumb.css","41","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/button.css","90","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/button.css","91","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/button.css","92","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/button.css","96","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/button.css","96","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/button.css","131","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/button.css","171","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/calendar.css","98","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/calendar.css","109","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/calendar.css","150","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/calendar.css","162","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/carousel.css","67","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/checkbox.css","47","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/checkbox.css","47","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/collapsible.css","29","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/collapsible.css","43","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/command.css","69","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/contract.ts","3","#f5f0e5","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","4","#ffffff","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","5","#0a221d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","6","#6e6759","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","7","#999999","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","8","#123328","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","9","#6e6759","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","10","#d32f2f","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","11","#9a9284","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","12","#dedbd2","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","13","#266651","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","14","#0a221d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","15","#071e18","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","16","#123328","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","17","#266651","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","18","#205241","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","19","#1f8265","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","20","#165c47","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","21","#114838","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","22","#08241c","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","23","#0a221d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","24","#34daaa","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","25","#08241c","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","28","#266651","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","29","#ffffff","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","30","#ffffff","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","31","#f4f1ea","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","32","#bddfd4","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","33","#123328","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","34","#34daaa","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","35","#249473","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","36","#266651","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","37","#205241","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","38","#123328","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","39","#0a221d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","40","#071e18","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","41","#897445","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","42","#604f32","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","43","#3e3523","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","44","#352d1d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","45","#ecd4a2","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","46","#feba88","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","47","#cc5200","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","48","#e0dace","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","49","#9a9284","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","50","#6e6759","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","51","#f5f0e5","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","52","#d32f2f","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","53","white","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","53","#ffffff","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","54","black","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","54","#000000","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","55","#999999","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","56","#1f8265","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","57","#165c47","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","58","#114838","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","59","#08241c","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","60","#dedbd2","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","61","#ede8db","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","62","#f4f1ea","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","63","#bddfd4","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","64","#ffc600","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","65","#221d13","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","66","#a98d53","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","67","#d35a00","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","68","#ce5600","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","69","#b44b00","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","70","#783402","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","71","#bc4c00","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","72","#5e2902","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","73","#767676","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","74","#5a5a5a","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/contract.ts","75","#2d2d2d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/dashboard-layout.css","11","color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/dashboard-layout.css","12","color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/default.css","7","color-mix(in srgb, var(--hm-sem-action-primary) 85%, var(--hm-sem-palette-black))","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","8","color-mix(in srgb, var(--hm-sem-action-primary) 70%, var(--hm-sem-palette-black))","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","22","color-mix(in srgb, var(--hm-sem-action-destructive) 8%, var(--hm-sem-bg-surface))","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","23","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","24","color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","25","color-mix(in srgb, var(--hm-sem-palette-white) 10%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","26","color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","88","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","158","#221d13","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","160","#a98d53","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","162","#d35a00","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","164","#ce5600","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","166","#b44b00","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","168","#783402","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","170","#bc4c00","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","172","#5e2902","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","174","#767676","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","176","#5a5a5a","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","178","#2d2d2d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","180","color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/default.css","181","color-mix(in srgb, var(--hm-sem-accent) 45%, transparent)","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/dialog.css","6","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/dialog.css","102","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/drawer.css","11","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/gnb.css","20","color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/gnb.css","22","color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/gnb.css","50","color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/gnb.css","83","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/gnb.css","205","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/gnb.css","242","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/gnb.css","246","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/gnb.css","298","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/gnb.css","335","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/gnb.css","349","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/gnb.css","473","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/input.css","100","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/lnb.css","21","color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","44","color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","51","color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent), transparent 6px) 0 0 / 75% 100% no-repeat,","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","52","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat,","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","53","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","55","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","74","color-mix(in srgb, var(--hm-sem-palette-green-tint) 40%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","75","color-mix(in srgb, var(--hm-sem-palette-green-light-2) 40%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","178","color-mix(in srgb, var(--hm-sem-palette-white) 35%, transparent) transparent","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/lnb.css","192","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/lnb.css","249","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/lnb.css","253","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/loading-screen.css","10","color-mix(in srgb, var(--hm-sem-palette-black) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/loading-screen.css","24","color-mix(in srgb, var(--hm-loading-screen-foreground) 60%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/navigation-menu.css","56","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/navigation-menu.css","74","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/pagination.css","56","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/pagination.css","69","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/primitives.css","3","#34daaa","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","4","#249473","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","5","#266651","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","6","#205241","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","7","#123328","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","8","#0a221d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","9","#071e18","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","11","#897445","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","12","#604f32","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","13","#3e3523","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","14","#352d1d","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","16","#ecd4a2","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","18","#feba88","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","19","#cc5200","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","21","#e0dace","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","22","#9a9284","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","23","#6e6759","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","24","#f5f0e5","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","26","#d32f2f","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","27","#ffffff","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","28","#000000","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","29","#999999","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","32","#1f8265","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","33","#165c47","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","34","#114838","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","35","#08241c","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","36","#dedbd2","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","37","#ede8db","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","38","#f4f1ea","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","39","#bddfd4","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/primitives.css","44","#ffc600","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","packages/ui/src/theme/radio-group.css","50","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/radio-group.css","50","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/select.css","42","color-mix(in srgb, var(--hm-sem-palette-black) 12%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/sheet.css","10","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/slider.css","14","color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/sonner.css","13","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/switch.css","33","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/switch.css","33","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/table.css","18","color-mix(in srgb, var(--hm-sem-palette-green-tint) 30%, var(--hm-sem-palette-white))","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/table.css","23","color-mix(in srgb, var(--hm-sem-palette-green-light-2) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/tabs.css","17","color-mix(in srgb, var(--hm-sem-palette-green-tint) 45%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/tabs.css","18","color-mix(in srgb, var(--hm-sem-palette-green-light-2) 35%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/tabs.css","24","color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/tabs.css","47","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/tabs.css","87","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/tabs.css","87","#0000","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/tabs.css","131","color-mix(in srgb, var(--ring) 50%, transparent)","DERIVED","Token 기반 조합 유지 / Accent 45%는 Semantic 승격"
+"after","packages/ui/src/theme/tabs.css","175","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/tabs.css","191","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/tabs.css","197","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/toggle-group.css","20","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/toggle-group.css","42","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/toggle.css","18","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/ui/src/theme/toggle.css","41","transparent","INTENTIONAL","투명면 / ring sentinel / gradient geometry 유지"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","25","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","27","rgba(0, 0, 0, 0.25)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","51","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","57","rgba(0, 0, 0, 0.5)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","64","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","88","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","119","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","121","rgba(0, 0, 0, 0.25)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","146","rgba(255, 255, 255, 0.25)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","147","rgba(255, 255, 255, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","148","rgba(255, 255, 255, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","149","rgba(255, 255, 255, 0.25)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","163","rgba(0, 37, 89, 0.65)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","255","#dce7f6","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","256","rgba(245, 249, 255, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","262","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","267","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","273","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","292","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","332","#dce7f6","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","333","#001a41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","352","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","358","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","413","#0054cc","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","413","rgba(0, 27, 66, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","423","#0044a4","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","424","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","428","rgba(0, 0, 0, 0.25)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","440","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","445","#0054cc","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","475","#dce7f6","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","476","#001a41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","506","#ffffff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","507","#001a41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","524","#ff0000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.css","585","#eceff3","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","34","#012F67","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","34","#001A41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","35","#98A4B2","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","35","#001A41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","35","#001A41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","40","#087577","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","40","#003A3B","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","41","#809FA0","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","41","#004748","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","41","#004748","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","46","#B55400","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","46","#6F3005","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","47","#D3BCA7","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","47","#7B3704","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","47","#6C2D00","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","52","#7056A0","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","52","#492F79","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","53","#C2B8D5","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","53","#3B2368","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","53","#3B2368","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","59","#012F67","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","59","#001A41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","60","#5D7A9D","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","60","#001A41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","60","#001A41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","87","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","300","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterInformationDisplay.tsx","301","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","23","#0D6199","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","24","#203E6F","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","25","#DBB860","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","26","#A862C9","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","27","#499A02","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","28","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","29","#333333","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","30","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","32","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","33","rgba(0, 0, 0, 0.3)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","47","rgba(0, 0, 0, var(--csi-shadow-alpha)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","68","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","69","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","78","rgba(255, 255, 255, 0.5)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","79","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","81","rgba(255, 255, 255, var(--csi-plan-wash, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","81","rgba(255, 255, 255, var(--csi-plan-wash, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","87","#DDDDDD","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","88","#DDDDDD","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","104","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","105","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","110","rgba(255, 255, 255, 0.3)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","110","rgba(255, 255, 255, 0.3)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","121","rgba(0, 0, 0, var(--csi-shadow-alpha)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","124","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","125","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","146","#FFC8C8","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","147","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","148","#910101","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","151","rgba(0, 0, 0, var(--csi-shadow-alpha)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","174","rgba(0, 0, 0, 0.4)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","186","#2E619A","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","186","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","187","#203E6F","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","187","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","188","#DBB860","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","188","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","189","#9729E5","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","189","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","190","#499A02","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","190","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","191","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","191","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","192","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","192","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","193","rgba(0, 0, 0, 0.6)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","205","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","211","rgba(0, 0, 0, 0.25)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","220","#003B7E","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","221","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","229","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","231","#DBB860","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","232","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","240","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","247","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","253","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","260","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","286","#00916C","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","287","rgba(255, 255, 255, 0.8)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","288","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","307","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","314","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","342","rgba(0, 0, 0, var(--csi-tile-shadow-alpha)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","369","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","370","#5A5A5A","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","372","#BFBFBF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","372","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","373","#404040","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","380","#F6F7F7","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","386","#130B00","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","386","#2E2111","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","386","#4E3B26","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","386","#665035","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","386","#785E41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","387","#826747","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","387","#866A4A","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","387","#745C3D","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","387","#4C3D21","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","387","#3C2D1A","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","388","#1C0E0D","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","391","#413622","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","391","#837559","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","391","#D7C5A0","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","391","#F9E6BD","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","391","#F5E2BA","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","391","#EBD9B2","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","392","#DAC9A5","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","392","#C3B293","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","392","#A4957C","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","392","#93856F","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","393","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","396","#6C6C6C","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","396","#777777","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","396","#A7A7A7","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","396","#CDCDCD","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","396","#E8E8E8","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","397","#F9F9F9","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","397","#FEFEFE","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","400","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","461","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","462","#D64000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","472","#D64000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","477","#D64000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","485","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","486","#761D00","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","502","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","503","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","507","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","514","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","530","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","531","rgba(0, 0, 0, 1)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","537","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","538","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","559","rgba(255, 237, 222, 0.40)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","560","rgba(245, 222, 202, 0.36)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","561","rgba(236, 207, 182, 0.32)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","562","rgba(226, 191, 163, 0.28)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","563","rgba(216, 176, 143, 0.24)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","564","rgba(207, 161, 123, 0.20)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","565","rgba(197, 146, 103, 0.16)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","566","rgba(187, 131, 83, 0.12)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","567","rgba(177, 115, 64, 0.08)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","568","rgba(168, 100, 44, 0.04)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","569","rgba(158, 85, 24, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","583","rgba(0, 0, 0, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","583","rgba(0, 0, 0, 0.5)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","597","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","597","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","597","rgba(255, 255, 255, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","598","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","598","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","598","rgba(255, 255, 255, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","620","#6A0800","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","621","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","655","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","681","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","682","rgba(0, 0, 0, 0.3)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","692","#A50D02","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","692","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","692","#EE3A28","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","692","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","692","#A50D02","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","693","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","698","rgba(0, 0, 0, 0.5)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","707","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","740","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","757","#6A0800","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","758","#3F2F1D","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","780","#240301","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","782","#6A0800","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","783","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","791","#000000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","798","rgba(255, 255, 255, 0.5)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","800","rgba(0, 0, 0, 0.8)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","814","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","815","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","830","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","865","rgba(255, 237, 222, 0.40)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","866","rgba(245, 222, 202, 0.36)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","867","rgba(236, 207, 182, 0.32)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","868","rgba(226, 191, 163, 0.28)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","869","rgba(216, 176, 143, 0.24)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","870","rgba(207, 161, 123, 0.20)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","871","rgba(197, 146, 103, 0.16)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","872","rgba(187, 131, 83, 0.12)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","873","rgba(177, 115, 64, 0.08)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","874","rgba(168, 100, 44, 0.04)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","875","rgba(158, 85, 24, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","892","rgba(0, 0, 0, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","892","rgba(0, 0, 0, 0.5)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","905","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","905","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","905","rgba(255, 255, 255, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","906","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","906","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","906","rgba(255, 255, 255, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","922","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","931","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","947","#6A0800","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","948","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","990","#5C6B57","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","997","#EFEFEF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","998","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","999","#222222","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","1000","rgba(255, 255, 255, 0.78)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","1001","#555555","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","1005","rgba(255, 255, 255, 0.88)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","1008","#333333","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","1011","#FFD9A0","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","1012","#8A5A00","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.css","1014","rgba(255, 255, 255, 0.88)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","35","#0D6199","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","39","#203E6F","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","43","#DBB860","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","47","#A862C9","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","51","#499A02","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","55","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","59","#333333","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","119","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","182","#0043B3","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","183","#BF0000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","184","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","185","#FFFFFF","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","457","#000","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","457","White","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","472","rgba(255,255,255,.6)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","482","#D21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","497","#2E619A","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterSpatialInformation.tsx","497","#9729E5","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","49","#d6d6d6","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","71","#f5f9ff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","105","#f5f9ff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","108","#f5f9ff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","126","#002f68","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","126","#001a41","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","145","rgb(255 255 255 / 25%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","146","rgb(255 255 255 / 0%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","164","rgb(255 255 255 / 20%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","165","rgb(255 255 255 / 0%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","177","rgb(0 0 0 / 45%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","182","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","187","#4cc3ff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","211","#f5f9ff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","214","#1464d7","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","214","#072d65","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","215","rgb(0 17 42 / 50%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","216","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","221","rgb(0 0 0 / 55%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","222","#001b42","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","232","rgb(0 0 0 / 20%)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","248","#0054cc","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","248","#001b42","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","268","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","269","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","270","#f5f9ff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","270","#f5f9ff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","270","#dce7f6","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","271","#97b6db","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CenterTitle.css","272","#002555","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","25","#d21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","26","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","27","rgba(0, 0, 0, .25)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","36","#ff7700","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","37","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","49","#d21203","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","50","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","60","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","82","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/CompactFacilityConnection.css","85","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","20","rgba(217, 217, 217, .48)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","21","rgba(64, 5, 0, .14)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","34","rgba(255, 255, 255, .62)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","35","rgba(64, 5, 0, .12)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","42","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","50","#6e6759","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","126","rgba(0, 0, 0, .3)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","126","rgba(0, 0, 0, 0)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","165","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","176","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","264","#6e6759","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","287","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","296","#6e6759","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","316","#6a0800","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","317","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","319","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","342","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","347","#6f797e","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","348","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","349","rgba(0,0,0,.2)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","361","rgba(255,255,255,.5)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","362","rgba(64,5,0,.12)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","379","rgba(64,5,0,.1)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","380","#6e6759","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","387","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.css","390","#6e6759","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","39","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","40","#555555","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","42","#0D6199","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","43","#A77900","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","44","#713699","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","45","#5B8736","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","118","#420E0A","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","124","#6A0800","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","130","#6A0800","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","169","rgb(${Number.parseInt(namePlate.tint.slice(1, 3)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","170","transparent","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","547","#444444","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/FacilityBatch.tsx","547","#777777","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","17","rgba(217, 217, 217, .48)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","18","rgba(64, 5, 0, .14)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","29","rgba(255, 255, 255, .62)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","30","rgba(64, 5, 0, .12)","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","34","#400500","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","40","#6e6759","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","137","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","155","#fff","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","packages/center-graphic/src/components/TunnelFacility.css","212","#6e6759","INTENTIONAL","독립 CENTER 도메인 유지 (UI 계약 대상 아님)"
+"after","src/App.tsx","10","#123328","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"after","src/App.tsx","11","#3E3523","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"after","src/App.tsx","12","#F5F0E5","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"after","src/App.tsx","13","White","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"after","src/App.tsx","13","#FFFFFF","HARDCODE_CANDIDATE","Theme Semantic/palette alias로 이동, shadow/overlay는 token 기반 mix"
+"after","src/center/center-stories.css","4","#6e6759","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/center/center-stories.css","5","#e0dace","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/center/center-stories.css","6","#f5f0e5","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/center/center-stories.css","7","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/center/center-stories.css","10","#6e6759","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/center/center-stories.css","12","#e0dace","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/center/center-stories.css","13","#f4f1ea","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/aspect-ratio.stories.tsx","12","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/aspect-ratio.stories.tsx","12","#205241","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/aspect-ratio.stories.tsx","12","#ffffff","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/aspect-ratio.stories.tsx","19","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/aspect-ratio.stories.tsx","40","#3e3523","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/avatar.stories.tsx","11","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/avatar.stories.tsx","11","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/avatar.stories.tsx","11","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/button.stories.tsx","187","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/button.stories.tsx","187","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/button.stories.tsx","187","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/button.stories.tsx","187","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/card.stories.tsx","59","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/card.stories.tsx","74","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/carousel.stories.tsx","15","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/carousel.stories.tsx","15","#3e3523","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/carousel.stories.tsx","15","#205241","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/carousel.stories.tsx","15","#604f32","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/carousel.stories.tsx","15","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/carousel.stories.tsx","15","#ffffff","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/checkbox.stories.tsx","55","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/story-board.tsx","25","border-black/10","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/switch.stories.tsx","47","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/tabs.stories.tsx","84","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/tabs.stories.tsx","98","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/tabs.stories.tsx","98","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/tabs.stories.tsx","99","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/components/tabs.stories.tsx","99","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/hm-theme.css","6","#205241","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","7","#0a221d","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","8","#3e3523","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","21","#fff","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","21","#31594c","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","22","#80b6a3","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","22","#174b3a","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","24","#bddfd4","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","25","#c6d8d1","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","26","#67d6ac","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","26","#67d6ac22","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","27","#827b70","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","29","#254d40","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","29","#fff","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","30","#ffffff24","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","30","#ffffff09","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","30","#ffffff06","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","31","#c3e6d7","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","33","#d9eac3","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","34","#d5e4dd","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","35","#b6d8c8","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","35","#f7fff9","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","36","#d9eac3","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","38","#a6d0bc80","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","39","#c3e6d799","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","39","#001a1255","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","39","#d8ecda","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","40","#8ab6a7","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","40","#174335","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","41","#c8e4d5","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","42","#74bd98","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","43","#477b5a","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","44","#6b715f","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","47","#d4cfc2","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","47","#6e6759","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","49","#ede9df","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","50","#e7f1ec","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","55","#7b766e","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","58","#d5cfc3","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","59","#1e3b31","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","61","#8b857a","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","64","#eee9e0","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","66","#1a7551","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","67","#d8d2c5","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","67","#faf8f3","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","68","#798f7c","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","71","#dedbd2","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","71","#dedbd2","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","74","#d7d1c5","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/hm-theme.css","74","#7b7468","INTENTIONAL","Demo artwork 고정색 유지, UI 컴포넌트는 패키지 계약 사용"
+"after","src/patterns/dashboard-layout.stories.tsx","80","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/dashboard-layout.stories.tsx","80","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/dashboard-layout.stories.tsx","80","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","83","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","83","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","83","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","93","#fff","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","93","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","317","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","317","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","328","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","328","White","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/gnb.stories.tsx","377","rgb(0 0 0 / 0.1)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","34","#fff","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","34","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","38","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","38","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","38","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","382","border-black/10","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","404","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/patterns/lnb.stories.tsx","406","Black","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","15","#6837a8","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","15","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","16","#c75b00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","16","#ffd36d","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","17","#d41466","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","88","rgba(${Math.round(Number(r)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","88","rgb(${Math.round(Number(r)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","152","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","152","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","153","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","153","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","154","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","154","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","155","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","155","#6837a8","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","156","#6837a8","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","156","#c75b00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","157","#c75b00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","157","#d41466","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","158","#d41466","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","158","#6837a8","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","159","#6837a8","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","159","#6837a8","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","165","rgb(0, 127, 115)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","166","rgb(104, 55, 168)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","167","rgb(0, 127, 115)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","169","#c75b00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","171","#c75b00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","174","#ffffff","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","176","#ffd36d","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","181","#345678","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","184","#345678","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","186","#345678","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","187","#345678","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","191","#345678","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","197","#123456","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","197","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","197","#123456","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","197","#123456","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","210","#345678","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","211","#345678","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","212","#007f73","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","213","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","215","#112233","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/runtime-theme.stories.tsx","217","#112233","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","23","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","116","#221d13","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","117","#a98d53","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","117","#221d13","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","118","#d35a00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","118","#ce5600","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","118","#b44b00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","118","#783402","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","119","#bc4c00","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","119","#5e2902","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","127","#767676","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","128","#5a5a5a","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","145","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","154","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","161","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","252","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","277","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","295","rgb(7 30 24 / 0.18)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","296","rgb(7 30 24 / 0.18)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","326","color-mix(in srgb, var(--hm-color-primary) 85%, var(--hm-black))"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","327","color-mix(in srgb, var(--hm-color-primary) 70%, var(--hm-black))"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","340","color-mix(in srgb, var(--hm-color-action-destructive) 8%, var(--hm-color-surface-default))"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","341","color-mix(in srgb, var(--hm-black) 20%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","342","color-mix(in srgb, var(--hm-black) 30%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","343","color-mix(in srgb, var(--hm-white) 10%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","344","color-mix(in srgb, var(--hm-black) 25%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","388","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","409","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","435","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","468","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","499","color-mix(in srgb, var(--hm-black) 30%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","501","color-mix(in srgb, var(--hm-black) 10%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","524","rgb(0 0 0 / 0.1)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","553","color-mix(in srgb, var(--ring) 50%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","602","color-mix(in srgb, var(--hm-black) 30%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","623","color-mix(in srgb, var(--hm-black) 10%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","627","rgb(0 0 0 / 0.3)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","627","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","627","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","627","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","627","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","627","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","628","color-mix(in srgb, var(--hm-black) 20%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","644","color-mix(in srgb, var(--hm-green-tint) 40%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","645","color-mix(in srgb, var(--hm-green-light-2) 40%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","656","rgb(0 0 0 / 0.45)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","670","color-mix(in srgb, var(--hm-loading-screen-foreground) 60%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","696","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","721","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","760","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","778","#34daaa","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","779","#249473","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","780","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","781","#205241","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","782","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","783","#0a221d","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","784","#071e18","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","785","#897445","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","786","#604f32","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","787","#3e3523","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","788","#352d1d","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","789","#ecd4a2","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","790","#feba88","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","791","#cc5200","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","792","#e0dace","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","793","#9a9284","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","794","#6e6759","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","795","#f5f0e5","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","796","#d32f2f","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","797","#ffffff","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","798","#000000","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","799","#999999","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","800","#1f8265","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","801","#165c47","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","802","#114838","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","803","#08241c","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","804","#dedbd2","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","805","#ede8db","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","806","#f4f1ea","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","807","#bddfd4","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","808","#ffc600","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","865","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","867","rgb(0 0 0 / 0.12)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","869","#2d2d2d","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","876","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","900","color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","910","rgb(0 0 0 / 0.2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","955","color-mix(in srgb, var(--hm-green-tint) 30%, var(--hm-white))"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","960","color-mix(in srgb, var(--hm-green-light-2) 20%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","961","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","962","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","976","color-mix(in srgb, var(--hm-green-tint) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","977","color-mix(in srgb, var(--hm-green-light-2) 35%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","982","color-mix(in srgb, var(--hm-black) 20%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","1019","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","1021","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","1038","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after","src/theme/verification-baseline.json","1040","color-mix(in srgb, var(--accent) 45%, transparent)"",","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","4","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","5","#205241","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","6","#266651","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","7","#249473","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","8","#BDDFD4","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","9","#FFFFFF","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","10","#123328","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","11","#FFC600","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","12","#F5F0E5","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","13","#FFFFFF","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","14","rgba(0, 0, 0, .3)","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","15","rgba(0, 0, 0, .2)","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","16","rgba(0, 0, 0, .3)","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","97","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","103","rgba(0, 0, 0, .10)","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","123","rgba(255,255,255,.4)","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","124","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","124","#000","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","124","#000","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","124","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","141","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","169","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","224","rgba(0, 0, 0, .10)","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","248","#000","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","248","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","262","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","266","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","278","transparent","STORY_ONLY","검증 specimen / Preview 유지"
+"after",".storybook/manager.css","282","rgba(0, 0, 0, .10)","STORY_ONLY","검증 specimen / Preview 유지"
+"after","themes/drafts/preview-warm.json","5","#FFFFFF","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","6","#F5F0E5","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","7","#3E3523","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","8","#3E3523","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","11","#352D1D","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","12","#2F281C","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","13","#3E3523","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","14","#897445","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","15","#604F32","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","16","#897445","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","17","#604F32","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","18","#352D1D","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","19","#221D13","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","20","#352D1D","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","21","#A98D53","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","themes/drafts/preview-warm.json","22","#221D13","VALID","Theme preset / contract 값 또는 내부 derived 정의 유지"
+"after","docs/components/accordion.md","107","rgb(10,34,29)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/accordion.md","107","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/accordion.md","107","rgb(110,103,89)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/alert-dialog.md","27","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/alert-dialog.md","35","bg-black/10","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/alert-dialog.md","104","rgb(118,118,118)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/alert-dialog.md","104","rgb(211,47,47)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/alert.md","88","rgb(211,47,47)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/avatar.md","94","rgb(189,223,212)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/avatar.md","94","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/badge.md","35","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/badge.md","35","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/badge.md","37","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/badge.md","94","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/badge.md","94","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/badge.md","94","rgb(255,255,255)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/breadcrumb.md","100","rgb(110,103,89)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/breadcrumb.md","100","rgb(10,34,29)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/button.md","17","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/button.md","41","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/button.md","43","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/button.md","44","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/button.md","76","#221d13","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/button.md","76","#a98d53","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/button.md","76","#d35a00","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/calendar.md","44","#266651","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/calendar.md","111","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/calendar.md","111","rgb(244,241,234)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","19","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","21","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","21","#ECD4A2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","31","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","32","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","32","#ECD4A2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","56","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","69","#dedbd2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","71","#ecd4a2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","73","#dedbd2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","92","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","103","#3E3523","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","127","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","127","rgb(255,255,255)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","127","rgb(245,240,229)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","127","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","127","rgb(236,212,162)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/card.md","127","rgb(10,34,29)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/checkbox.md","43","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/checkbox.md","100","rgb(154,146,132)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/checkbox.md","100","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/checkbox.md","100","rgb(211,47,47)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/collapsible.md","101","rgb(10,34,29)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/combobox.md","107","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/command.md","104","rgb(189,223,212)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/command.md","104","rgb(110,103,89)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/context-menu.md","34","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/context-menu.md","92","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/context-menu.md","92","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/date-picker.md","100","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/date-picker.md","100","rgb(153,153,153)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","19","rgba(0,0,0,.2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","21","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","21","#9A9284","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","21","#E0DACE","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","23","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","32","bg-black/10","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","38","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","40","rgb(0 0 0 / 0.2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","42","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","89","#dedbd2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","93","#dedbd2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","122","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","122","black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","123","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","146","rgb(255,255,255)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","146","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","146","rgba(0,0,0,.2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","146","rgb(10,34,29)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","146","rgb(110,103,89)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","148","rgb(118,118,118)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","148","rgb(90,90,90)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dialog.md","148","rgb(211,47,47)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/drawer.md","30","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/drawer.md","41","bg-black/10","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/drawer.md","112","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/drawer.md","112","rgb(154,146,132)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dropdown-menu.md","26","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dropdown-menu.md","29","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dropdown-menu.md","107","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dropdown-menu.md","107","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dropdown-menu.md","107","rgb(189,223,212)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/dropdown-menu.md","112","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/field.md","36","#D32F2F","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/field.md","37","#D32F2F","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/hover-card.md","31","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/hover-card.md","101","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/hover-card.md","101","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/input.md","43","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/label.md","17","#6E6759","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/label.md","27","#6E6759","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/label.md","76","#D32F2F","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/label.md","92","rgb(110,103,89)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/menubar.md","29","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/menubar.md","103","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/menubar.md","103","rgb(189,223,212)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/navigation-menu.md","29","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/navigation-menu.md","103","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/pagination.md","30","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/pagination.md","76","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/pagination.md","99","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/pagination.md","99","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/popover.md","30","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/popover.md","97","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/popover.md","97","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/popover.md","102","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/progress.md","93","rgb(224,218,206)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/progress.md","93","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/radio-group.md","85","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/radio-group.md","85","rgb(154,146,132)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/radio-group.md","85","rgb(211,47,47)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/resizable.md","105","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/resizable.md","107","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/scroll-area.md","95","rgb(154,146,132)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/select.md","34","#2d2d2d","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/select.md","78","#2d2d2d","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/select.md","133","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/separator.md","27","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/separator.md","77","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sheet.md","28","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sheet.md","39","bg-black/10","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sheet.md","107","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sheet.md","107","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/skeleton.md","87","rgb(224,218,206)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/slider.md","97","rgb(224,218,206)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/slider.md","97","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sonner.md","36","rgb(0 0 0 / .2)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sonner.md","119","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sonner.md","119","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/sonner.md","119","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/switch.md","37","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/switch.md","84","rgb(154,146,132)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/switch.md","84","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/switch.md","84","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/table.md","56","#EDF4F1","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/table.md","100","rgb(32,82,65)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/table.md","100","rgb(38,102,81)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/table.md","103","rgba(189,223,212,.18)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/table.md","104","#bddfd4","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/table.md","104","rgb(38,102,81)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","22","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","42","rgba(189,223,212,.45)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","42","rgba(38,102,81,.35)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","42","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","42","#266651","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","43","#FFFFFF","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","43","#DEDBD2","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","43","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","44","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","44","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","77","#249473","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","128","rgb(36,148,115)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","129","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tabs.md","145","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/textarea.md","96","#D32F2F","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/textarea.md","120","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/textarea.md","120","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/textarea.md","120","rgb(153,153,153)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/textarea.md","120","rgb(211,47,47)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/textarea.md","121","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/toggle.md","99","rgb(189,223,212)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/toggle.md","99","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/toggle.md","99","rgb(222,219,210)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tooltip.md","27","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tooltip.md","99","rgb(10,34,29)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/components/tooltip.md","99","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/dashboard-layout.md","33","#F5F0E5","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/dashboard-layout.md","33","rgba(7,30,24,.18)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/dashboard-layout.md","82","rgba(7,30,24,.18)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/dashboard-layout.md","83","rgba(7,30,24,.18)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/dashboard-layout.md","117","#F5F0E5","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","75","#1F8265","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","75","#165C47","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","75","#114838","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","75","#08241C","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","77","#BDDFD4","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","79","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","80","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","80","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","80","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","80","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","81","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","82","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","82","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","83","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","85","#BDDFD4","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","100","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","100","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","121","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","121","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","135","#F5F0E5","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","135","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/gnb.md","135","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","143","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","143","#205241","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","143","#266651","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","143","#249473","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","143","#266651","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","143","#266651","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","146","White","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","147","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","148","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","149","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","149","#266651","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","149","#FFC600","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","166","#266651","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","169","Black","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","172","#ffc600","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","187","#F5F0E5","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","187","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/lnb.md","187","rgb(255,198,0)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/loading-screen.md","51","white","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/loading-screen.md","54","#0a3322","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/loading-screen.md","54","#123328","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
+"after","docs/patterns/loading-screen.md","76","rgb(18,51,40)","INTENTIONAL","문서의 규격 / 사용 예제 (실행 CSS 아님)"
\ No newline at end of file
diff --git a/docs/guidelines/runtime-theme-report.md b/docs/guidelines/runtime-theme-report.md
new file mode 100644
index 0000000..f52678a
--- /dev/null
+++ b/docs/guidelines/runtime-theme-report.md
@@ -0,0 +1,193 @@
+# External Runtime Theme 구조 점검·전환 결과
+
+> HISTORICAL_RECORD: 작성·검증 시점(2026-10-06)의 기록이다. 아래 리터럴·실측·당시 예외를 보존한다. 현재 apply/merge/fallback/scope와 Slider Focus는 [Runtime Theme](runtime-theme.md), key/property/type은 [Runtime 계약표](runtime-theme-contract.md), CDN 배포는 [Theme delivery](theme-delivery.md)를 따른다.
+
+2026-10-06 · HM_THEME / Theme infrastructure
+
+## 1. 현재 Theme Architecture
+
+Primitive(`packages/ui/src/theme/primitives.css`) → HM Default preset / Semantic / shadcn adapter(`default.css`) → Component Mapping(`theme/<name>.css`) → CSS selector / Tailwind → UI. `theme.css`가 Default부터 import한다. Tailwind namespace 매핑은 `tailwind.css`, Demo artwork는 `src/hm-theme.css`, Storybook 설정은 `.storybook/preview.tsx`다.
+
+대표 체인을 실제 파일에서 확인했다. 모든 Component Token의 기존 이름을 유지했다.
+
+| Component | 실제 대표 체인 |
+|---|---|
+| Checkbox | green-light-2 → sem-state-active → checkbox-checked-background → checked background |
+| Radio | green-light-2 → sem-state-active → radio-checked-border-color / radio-dot-color |
+| Switch | green-light-2 → sem-state-active → switch-on-background |
+| Slider | green-light-2 → sem-state-active → slider-range-background / thumb-border-color |
+| Progress | green-light-2 → sem-state-active → progress-indicator-background |
+| Calendar | green-light-2 → sem-state-active → calendar-selected-background / range-edge-background |
+| Pagination | green-default → sem-action-primary → pagination-active-background |
+| Badge | green-default → sem-action-primary → badge-default-background |
+| Table | sem-accent → sem-surface-highlight(45%) → table-row-hover/selected-background |
+| Input | sem-stroke-input-focus → input-focus-border-color; sem-action-destructive → input-error-border-color |
+| Select | sem-accent → sem-surface-highlight → select-option-state-background; sem-stroke-input-focus → focus border |
+| Button | sem-action-primary → button-outline-green-ink; primary gradient stops → button-brand-green-background |
+| GNB | primary surface stop group → gnb-background; sem-action-primary → gnb-current-text |
+| LNB | Primary + palette shades → lnb-background; sem-action-primary → lnb-current-text |
+
+## 2. Runtime Theme 기존 방식
+
+기존 `src/theme/preview.ts`는 schemaVersion 1 / 25개 allowlist / 6자리 HEX / radius 2–12px / gradient 전체 세트 검증을 제공했다. 전체 문서를 검증한 뒤 HTMLElement inline 변수에 적용하고 이전 주입 키를 제거했다. **실제 호출처는 없었고 서비스 패키지에서 import할 수 없었다.** 새 엔진 없이 이 방식을 UI 패키지로 이동·보강했다.
+
+## 3. 발견된 문제와 처리
+
+- Active, on Active, Accent, Subtle Surface, Inverse Text 계약 누락 → 공개 계약에 추가.
+- 일부 Button / Input / 패널 / navigation / palette 참조가 공개 Semantic을 우회 → 동일 Default 값을 유지하면서 Semantic/palette로 연결.
+- Button·Select의 직접 HEX와 shadow 고정 RGB → Default preset palette / token 기반 derived mix로 이동.
+- root에서 계산된 Component 별칭을 wrapper가 상속해 Scoped override가 전달되지 않음 → 명시적 `data-hm-theme` scope에서 별칭·Mapping 재계산.
+- cleanup이 host 기존 inline 값과 우선순위를 잃을 수 있음 → 값/priority/기존 scope를 복원.
+- Tailwind upstream root/dark preset과 HM preset 중복 → HM 색상 preset은 Default에 단일 소유, chart/sidebar fallback은 base layer 유지.
+- Accent 45% 반복 → 동일 Soft Highlight 정책 사용처를 내부 Semantic으로 승격.
+
+## 4. 확정 Runtime Theme Contract
+
+전체 표: [runtime-theme-contract.md](runtime-theme-contract.md).
+
+공개 입력 총 **73개**: 기존 25개, 핵심 역할 추가 6개, 선택적 Theme palette 42개. 모두 partial 입력 가능하며 Component Token 수백 개를 요구하지 않는다. CSS property 중복 매핑은 없다. 색은 불투명 6자리 HEX, radius는 기존 2–12px 정수다. Typography/spacing/layout/shadow geometry는 공개하지 않았다.
+
+| Runtime Token | Default | 의미 | 외부 override | 주요 영향 |
+|---|---|---|---|---|
+| color.action.primary | #123328 | Strong/Primary | Yes | Badge, Pagination current, Button outline, navigation ink |
+| color.state.active | #266651 | Checked/Selected/ON | Yes | Checkbox, Radio, Switch, Slider, Progress, Calendar |
+| color.stroke.input.focus | #266651 | 일반 Focus | Yes | Input, Select, Checkbox, Calendar ring 등 |
+| color.accent | #bddfd4 | Highlight 원색 | Yes | Select/Menu/Calendar/Table/Pagination soft state |
+| color.bg.content | #f5f0e5 | 콘텐츠 면 | Yes | Dashboard, Card content, navigation current face |
+| color.bg.surface | #ffffff | 기본 면 | Yes | Input, Select, Card, Floating/Modal |
+| color.bg.subtle | #f4f1ea | 은은한 면 | Yes | Badge secondary, Table footer, Calendar today |
+| color.fg.primary | #0a221d | 주요 텍스트 | Yes | 일반 UI 텍스트 |
+| color.fg.inverse | #ffffff | 반전 텍스트 | Yes | Button, Badge, GNB/LNB, Tooltip |
+| color.stroke.default | #9a9284 | 기본 border | Yes | Checkbox, Radio, Badge outline, Scroll Area |
+| color.action.destructive | #d32f2f | 오류/위험 | Yes | Input error, destructive Badge/Button/Menu |
+
+## 5. Default Theme 구조
+
+Default CSS preset은 최초 렌더의 fallback이다. `defaultRuntimeTheme`는 같은 contract의 기본 Theme Set이다. 이를 주입한 실제 화면과 주입하지 않은 화면의 parity를 검사했다. 외부 JSON 값은 동일 CSS property를 override한다. Primitive 유지, Semantic 유지, Component Mapping 유지. Component는 외부 객체를 읽지 않는다.
+
+Default → External 우선순위는 scope inline CSS로 보장한다. 기존 Component/Pattern import 순서는 유지하며 Filter Bar padding 순서도 바꾸지 않았다.
+
+## 6. Active / Focus 독립성
+
+Verification Theme는 Active `#007f73`, Focus `#c75b00`이다. Checkbox checked와 Calendar selected의 실제 배경은 `rgb(0,127,115)`, 실제 focus-visible shadow는 orange였다. 두 역할을 각각만 변경해 다른 core 역할의 Default 값이 유지되는지 검사했다. Default에서는 두 값 모두 Light 2여도 서로 alias하지 않는다.
+
+## 7. Primary / Active 독립성
+
+Primary `#6837a8`, Active `#007f73`. Badge default / Pagination current / Button outline / GNB·LNB current ink는 Primary, 선택 Control과 Calendar edge는 Active다. Checkbox/Radio unchecked hover border와 Slider halo, Accent foreground는 기존 Primary 정책을 유지하므로 Primary 변경의 실제 영향표에 포함했다.
+
+## 8. Accent 및 영향표
+
+결정: **PROMOTE_TO_SEMANTIC**. `--hm-sem-surface-highlight = color-mix(in srgb, var(--hm-sem-accent) 45%, transparent)`는 내부 derived다. 외부 사용자는 Accent만 지정한다. Highlight 비율은 바꾸지 않았다. Table header와 Tab의 과거 팔레트 장식, Toggle on의 full Accent는 각각 기존 정책을 유지한다.
+
+| Component | Primary | Active | Focus | Accent |
+|---|---|---|---|---|
+| Checkbox | unchecked hover border | checked | ring | — |
+| Radio | unchecked hover border | selected border/dot | ring | — |
+| Switch | — | ON | ring | — |
+| Slider | hover/focus halo(기존) | range/thumb border | Primary halo(기존) | — |
+| Progress | — | fill | — | — |
+| Calendar | highlight text | selected/edge | ring | hover/middle |
+| Pagination | current/highlight text | — | ring | hover |
+| Badge | default | — | — | — |
+| Table | — | — | — | row hover/selected |
+| Input | — | — | border/ring | — |
+| Select | highlight text | — | border/ring | selected/highlight |
+| Button | outline/ghost/link | — | ring | — |
+| GNB | current/open ink | — | mobile ring; desktop inverse outline | mobile highlight |
+| LNB | current/gradient first stop | — | inverse outline(기존) | — |
+
+Accent를 단독 변경해 Primary/Active/Focus/Destructive가 변하지 않음을 검사했다. Global Select Portal의 선택 옵션은 yellow Accent 45%(`color(srgb 1 0.827451 0.427451 / 0.45)`)로 실제 렌더됐다. DatePicker Portal의 selected day도 Global Active를 받았다.
+
+## 9. Hardcode Audit
+
+전체 파일·줄·값·분류·조치는 [CSV](runtime-theme-hardcode-audit.csv)에 있다. 변경 전 UI Theme CSS의 하드코딩 후보 25개 발생 지점을 처리했고 변경 후 Component CSS의 후보는 0이다. 주석은 실행 리터럴에서 제외했다. Primitive, Default preset, 문서 예제, Story, Demo, 독립 CENTER를 구분했다.
+
+| 파일 | 값 | 분류 | 조치 |
+|---|---|---|---|
+| theme/primitives.css | #266651 / #123328 등 | VALID | 기존 Primitive 유지 |
+| theme/button.css | #221d13 / #a98d53 / orange / gray 등 | HARDCODE_CANDIDATE | 공개 Theme palette 기본값으로 이동 |
+| theme/select.css | #2d2d2d | HARDCODE_CANDIDATE | palette-indicator 연결 |
+| theme/dialog.css / sheet.css 등 | rgb(0 0 0 / 0.2) | HARDCODE_CANDIDATE | palette-black 기반 mix, shadow geometry 유지 |
+| theme/dashboard-layout.css | rgb(7 30 24 / 0.18) | HARDCODE_CANDIDATE | palette-green-dark-2 기반 mix |
+| theme/lnb.css | rgb black 20%/30% | HARDCODE_CANDIDATE | palette-black 기반 depth gradient |
+| theme/checkbox.css 등 | #0000 / transparent | INTENTIONAL | ring sentinel / 투명면 유지 |
+| Select/Menu/Table 등 | Accent 45% color-mix | DERIVED | 같은 의미의 내부 surface-highlight로 승격 |
+| components/ui/* overlay | bg-black/10 | INTENTIONAL | upstream class 유지; 실제 색은 overlay.css의 derived Semantic |
+| src/*stories.tsx / .storybook | specimen HEX | STORY_ONLY | 검수 specimen 유지 |
+| src/hm-theme.css | artwork HEX | INTENTIONAL | Demo 고정 artwork 유지 |
+| packages/center-graphic | 그래픽 palette | INTENTIONAL | 독립 CENTER 도메인 유지 |
+
+## 10. Component Mapping 변경
+
+기존 Mapping 이름/size/props를 삭제하거나 rename하지 않았다. Primary/Destructive/Surface/Text/Border 참조를 공개 Semantic으로 연결하고, 별도 브랜드 shade는 선택적 Theme palette로 연결했다. 모든 preset Mapping 선언에 명시적 Theme scope를 추가했다. Accent mix와 shadow chroma를 derived로 정리했다. UI 컴포넌트·Pattern `.tsx`는 수정하지 않았다.
+
+## 11. Storybook Verification Theme
+
+`src/theme/runtime-theme.stories.tsx`의 숨김 verification Story: Comparison, GlobalExternal, Verification, Dashboard. 요청한 15종과 Command를 함께 렌더링한다. Production 기본값에 검증색을 넣지 않았다.
+
+Verification은 브라우저에서 **136개 검사, 63개 렌더된 data-slot 부품**을 확인한다. 1280 / 768 / 390px에서 모두 PASS. Default는 변경 전 토큰 그래프와 색상/geometry parity, full Default preset 주입 parity를 검사한다. 공개 core/palette는 개별 주입, gradient는 complete-group 주입을 검사한다. 포커스 ring은 실제 focus-visible 및 색 공간을 고려해 확인한다. Theme switching 중간 transition 프레임을 제외하기 위해 이 검사 화면만 transition-duration을 0으로 고정한다. Production transition은 유지한다.
+
+추가로 `_local/check-theme-geometry.mjs`는 변경 전 snapshot과 최종 CSS 구문을 비교한다. **50개 파일, 1,633개 geometry 선언 변경 0**. Default/External 비교만으로 검사 로직을 대체하지 않았다.
+
+## 12. Partial Override / Scope
+
+Partial은 미지정 Default 유지. 빈 tokens는 Default. invalid 문서는 이전 override를 원자적으로 해제해 host/Default 복귀. 교체 때 stale key 제거. 기존 host inline 값·priority·scope 복원.
+
+Global A 아래 Scoped B는 독립 HM preset에서 시작한다. B가 지정하지 않은 값은 HM Default이며 A를 상속하는 합성 정책은 아니다. Portal은 DOM inheritance를 따른다. 현재 HM SelectContent/PopoverContent/DatePicker는 container API를 노출하지 않으므로 wrapper Theme만으로 body popup을 scoped하게 만들 수 없다. Global popup 전달은 검증했으며 이 제한을 숨기거나 새 Portal API로 우회하지 않았다.
+
+## 13. 수정 파일
+
+- `packages/ui/package.json`: `./theme` 진입점 추가.
+- `packages/ui/src/theme/{contract,runtime,index}.ts`: 단일 계약, 기존 검증/주입 확장, Default preset.
+- `packages/ui/src/theme/default.css`, `theme.css`, `tailwind.css`: preset/derived/scope/import ownership.
+- `packages/ui/src/theme/*.css`: 기존 50개 Component/Pattern Mapping의 scope / 색상 의존 관계. `overlay.css` 추가.
+- `src/theme/preview.ts`: 기존 이름 호환 어댑터.
+- `src/theme/runtime-theme.stories.tsx`, `verification-baseline.json`: Story 전용 검증.
+- `docs/guidelines/{runtime-theme,runtime-theme-contract,runtime-theme-report}.md`, audit CSV, 테마 토큰 가이드, HM inventory, `CLAUDE.md`: 계약/결과 문서.
+
+변경 전 CSS/Preview는 `_local/theme-before/`에 보존했다. Git 저장소가 없으므로 git diff 대신 snapshot 비교를 사용했다. Dependency 추가 없음.
+
+## 14. API 변화
+
+**Component API 변화 없음.** Theme infrastructure에 필요한 최소 공개 경로 `@hm-design/ui/theme`와 `applyRuntimeTheme`, `resetRuntimeTheme`, `runtimeThemeContract`, `defaultRuntimeTheme`, 타입 2개를 제공한다. 기존 applyPreviewTheme/resetPreviewTheme 이름은 같은 구현의 어댑터다. 네트워크 fetch·캐시·auth·hydration·Publish는 추가하지 않았다.
+
+## 15. 문서
+
+[Runtime 사용·정책](runtime-theme.md), [전체 계약표](runtime-theme-contract.md), [감사 CSV](runtime-theme-hardcode-audit.csv)를 추가하고 기존 테마 가이드/CLAUDE/HM inventory에 구현 상태를 연결했다. Default/External, 계층, partial/invalid, 적용 예제, scope/Portal, 초기 렌더 책임을 실제 API 기준으로 설명했다.
+
+## 16. Build / 통합 검증
+
+- `npm run typecheck`: PASS.
+- `npm run build`: PASS.
+- `npm run build-storybook`: PASS.
+- Storybook browser: 1280/768/390px 각 136 checks PASS.
+- CSS geometry snapshot 비교: PASS (1,633 declarations).
+- 기존 Dashboard: 1280px GNB 70px / LNB 272px / main padding 34px, 390px GNB 56px / LNB display none / main padding 20px. 문서 가로 overflow 없음.
+- LNB Standalone Mobile: 390px 서비스 메뉴 Sheet 열기/닫기, 중첩 메뉴 표시, Sheet width 342px, 문서 가로 overflow 없음.
+- Global Select/DatePicker Portal: 실제 Accent/Active 전달 확인.
+- 기존 CSS 예제 `bg-[var(...)]` warning, Storybook 500kB chunk warning 유지. Sandbox에서 Vite/esbuild EPERM이 발생해 동일 명령을 허용된 정상 실행 권한으로 재실행했다.
+
+## 17. FOLLOW_UP
+
+- 서비스 네트워크 Theme Loader/API/CDN/Publish는 별도 단계다. Bootstrap 전에 동기 Theme 적용은 가능하지만 네트워크 이후 flash의 실제 운영 측정은 미수행.
+- Scoped popup이 필요하면 기존 HM Portal 경계의 API 설계를 별도 판단한다. 이번에 Component API/Portal을 바꾸지 않았다.
+- Slider halo 및 GNB/LNB inverse focus outline을 일반 Focus 정책으로 통합하려면 Default 디자인 변경을 포함해 별도 결정한다.
+- Light/Dark와 Theme selector UI, browser별 렌더 차이, 새 accessibility 대비 승인 절차는 이번 구조 작업 범위 밖이다.
+
+## 검증 화면
+
+Global External에서 실제 Select Portal을 연 화면: [runtime-theme-global-select.jpg](../../_local/runtime-theme-global-select.jpg). Primary/Active/Focus/Accent/Destructive는 각각 다른 값이다.
+
+
+## 작업 시간 (Asia/Seoul)
+
+- Started At: 2026-10-06 14:40:37 KST
+- Completed At: 2026-10-06 15:01:50 KST
+- Actual Duration: 21분 13초
+- Estimated Duration: 최초 45–60분
+- Variance: 예상보다 23분 47초–38분 47초 단축
+
+# 후속: 디자인팀 실시간 Theme 운영 — 2026-10-06
+
+이 문서 앞부분은 이전 Runtime 전환 기록이다. Git baseline `d1015309ab43fba69c8959a3dda660358e0e8fa1` 이후 JSON을 컬러 원본으로 연결하고 독립 Theme artifact/URL Loader/Storybook Preview를 추가한 결과는 [Designer Theme Report](designer-theme-report.md)에 기록했다. 사용 방법은 [디자인팀 Theme 가이드](designer-theme-guide.md), 운영/배포는 [Theme delivery](theme-delivery.md)다. 과거 수치를 새 검증 수치로 대체하지 않았다.
+
diff --git a/docs/guidelines/runtime-theme.md b/docs/guidelines/runtime-theme.md
new file mode 100644
index 0000000..c17aed4
--- /dev/null
+++ b/docs/guidelines/runtime-theme.md
@@ -0,0 +1,117 @@
+# Runtime Theme Contract v1
+
+2026-10-06 · 분류: HM_THEME / Theme infrastructure. Component props, DOM, Radix 상태, Portal, 키보드, ARIA, breakpoint는 변경하지 않았다.
+
+## 현재 파일과 적용 흐름
+
+`themes/default.json` → 생성 `packages/ui/src/theme/primitives.css` / `default.css` HM fallback / Semantic → `<component>.css` Component Mapping → `[data-slot]` CSS → UI. 운영 External JSON은 같은 Contract로 Runtime 적용한다.
+
+`packages/ui/src/theme/contract.ts`는 외부 JSON key, CSS property, 타입과 생성 Default 데이터를 연결하는 공개 계약이다. `runtime.ts`가 검증 후 DOM scope에 inline CSS 변수를 넣는다. 서비스는 `@hm-design/ui/theme`를 사용한다. `src/theme/preview.ts`는 같은 함수의 호환 adapter다. Production URL Loader는 `loader.ts`의 fetch/resolve/load API이며 회사 CDN 주소는 없다. `.storybook/preview.tsx`는 JSON Default + partial을 Global로 적용하고 Designer Playground가 JSON URL/파일 Preview를 제공한다. React Production Provider/Publish API는 없다.
+
+운영/분리 배포: [Theme delivery](theme-delivery.md). 디자인팀 Preview/편집: [사용법](designer-theme-guide.md). 전체 입력/API 계약: [Runtime 계약표](runtime-theme-contract.md).
+
+React 외 실행 형식으로 변환할 때도 이 문서의 Token·CSS Custom Properties·Runtime 적용 계약을 유지한다. Target Runtime, standalone asset, `file://` 검증 및 AI/도구 독립성 기준은 [Runtime Portability Policy](runtime-portability.md)를 따른다.
+
+소비 CSS는 `tailwindcss` → `@hm-design/ui/tailwind.css` → `@hm-design/ui/theme.css` 순서로 앱 entry에서 로드한다. Dashboard 상태 표시가 있으면 그 뒤에 `@hm-design/ui/dashboard-status.css`와 소비 Badge mapping을 연결한다([상태 예제](../patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)). Status CSS는 변수만 정의하며 73개 Runtime Theme 계약에 새 상태 Token을 추가하지 않는다. [Tailwind 검색 범위](runtime-portability.md#21-tailwind-v4-소비자-검색-범위)와 [Noto Sans KR·Asset 경로](runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)는 실행 환경별 소비 가이드를 따른다.
+
+Default는 특별한 컴포넌트 내부 상수가 아니라 이 계약을 만족하는 기본 제공 Theme Set이다. 주입이 없으면 패키지 CSS의 Default preset을 사용한다. `defaultRuntimeTheme`는 동일한 값을 가진 JSON 형태 preset이다. Story의 CSS fallback / Default preset 주입 비교와 계약 값 검사로 두 표현의 일치를 검증한다.
+
+## 공개 경계
+
+- **공개 Runtime 계약**: Semantic 색상 역할, 기존 그라데이션 stop 세트, 선택적 Theme 팔레트, 기존 radius 2개. 모든 Token은 선택적이다.
+- **내부 Derived**: `--hm-sem-surface-highlight`(Accent 45%), gradient 조합, shadow/overlay 조합, shadcn adapter(`--primary`, `--ring` 등). 외부 JSON은 이 변수를 직접 쓰지 않는다.
+- **내부 Component Mapping**: `--hm-checkbox-*`, `--hm-calendar-*`, `--hm-pagination-*` 등. 기존 이름을 유지한다. Runtime JSON으로 받지 않는다.
+- Typography, height, spacing, gradient geometry, shadow geometry, responsive layout은 코드 계약이다. 이번 컬러 구조 변경으로 Runtime 범위를 확대하지 않았다.
+- Typography 현황(2026-10-08): 기존 크기와 ui_viz 승인 변경값을 유지한다. `packages/ui/src/theme/*.css`의 font-size는 px이고 shadcn 유래 Tailwind class(`text-sm` 등)는 rem 기반이라 단위가 혼재한다. 소비자가 Tailwind class나 `className`으로 크기를 덮어쓰면 Theme 값보다 우선할 수 있다. Typography Role(heading/body/label 등)은 아직 공통 Token으로 도입하지 않았고 Runtime JSON 73개 계약에도 포함하지 않는다.
+
+기존 25개 allowlist의 JSON 이름과 validation을 유지하고 Active / on Active / Inverse Text / Subtle Surface / Accent / on Accent를 추가했다. 같은 CSS property로 향하는 중복 공개 key는 없다. Component 수백 개의 Token을 요구하는 대신 Theme 팔레트는 선택적 확장이다. 핵심 역할만 지정해도 사용할 수 있다. 팔레트 이름은 색상 계열을 유지하며, 역할 Token은 각각 독립적으로 override할 수 있다.
+
+전체 입력 목록과 영향은 [Runtime 계약표](runtime-theme-contract.md), 구조와 적용 절차는 이 문서와 [Theme delivery](theme-delivery.md)를 따른다. 과거 감사 CSV·작업 보고서는 테스트 ZIP에 포함하지 않는다. 새 공개 Token 추가는 패키지/계약 변경이다. `schemaVersion: 1` 입력 구조를 유지하며 별도 발행/versioning 시스템은 만들지 않았다.
+
+## 기본 적용
+
+앱 초기 CSS에서 순서를 유지한다.
+
+```css
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+```
+
+Theme 주입을 하지 않으면 HM Default가 자동 적용된다. `tailwind.css`의 HM과 중복되던 upstream root/dark 색상 preset은 제거했고 chart/sidebar fallback만 base layer에 남겼다. `theme.css`는 Default를 먼저 import하고 기존 Component/Pattern import 순서를 유지한다. Filter Bar state padding 순서도 바꾸지 않았다. Runtime inline 값은 이후 기본 CSS import보다 우선한다. `!important`로 별도 override한 소비 CSS는 이 우선순위 계약 밖이다.
+
+## External Theme 적용
+
+```ts
+import { applyRuntimeTheme, resetRuntimeTheme } from "@hm-design/ui/theme"
+
+const accepted = applyRuntimeTheme(document.documentElement, {
+  schemaVersion: 1,
+  tokens: {
+    "color.action.primary": "#6837a8",
+    "color.state.active": "#007f73",
+    "color.stroke.input.focus": "#c75b00",
+    "color.accent": "#ffd36d",
+    "color.action.destructive": "#d41466",
+  },
+})
+// 선택적 교체 및 해제. 실제 Theme 값은 서비스의 검증/승인 과정을 거친다.
+resetRuntimeTheme(document.documentElement)
+```
+
+기존 Preview 함수는 입력이 `unknown`이고 반환은 `boolean`이다. 새 공개 함수도 같은 형태다. 외부 Primary는 Badge default, Pagination current, Button outline, GNB/LNB current ink를 바꾼다. Brand Button/GNB 면은 기존 stop 계약, Solid Button 면은 팔레트 계약을 사용하므로 Primary 한 개로 gradient나 Solid 면을 임의 재설계하지 않는다. 기존 stop 세트 전체를 제공하면 해당 gradient도 바뀐다.
+
+## Partial / Empty / Invalid / Switching
+
+- `{ schemaVersion: 1, tokens: {} }`: 유효한 빈 Theme이며 Default를 사용한다.
+- 부분 Token만 제공: 같은 scope의 미지정 값은 HM Default를 사용한다. Theme A에서 B로 교체할 때 A의 키가 남지 않는다.
+- `null`, 단순 `{}`, 잘못된 schemaVersion, 알 수 없는 key, Component Token key, 잘못된 값: false를 반환하고 이 helper의 이전 override를 해제한다. 정상적인 host에서는 Default로 돌아간다. host가 원래 소유한 inline override는 복원한다.
+- 불투명 6자리 HEX만 허용한다. radius는 2–12px 정수만 허용한다. `var()`, `url()`, CSS 함수, `!important`, 임의 CSS rule은 입력할 수 없다.
+- 기존 3개의 gradient stop 그룹은 각각 전체 또는 미지정만 허용한다. 한 stop만 보내면 문서 전체를 거부한다.
+- 입력 전체를 검증한 뒤 DOM에 쓴다. 하나의 잘못된 값 때문에 CSS가 오염되는 대신 마지막 override를 해제한다. 이 atomic fallback은 기존 정책을 유지했다.
+- cleanup은 helper가 덮기 전 inline 값과 priority 및 `data-hm-theme` 속성을 복원한다. 같은 scope는 한 owner가 적용/해제를 관리한다. 서로 다른 helper 호출자가 같은 scope를 동시에 소유하는 다중 owner 시스템은 제공하지 않는다.
+
+## Global / Scoped Theme
+
+`document.documentElement` 주입은 Global이다. container를 전달하면 helper가 `data-hm-theme="runtime"`을 설정한다. CSS의 `:root, [data-hm-theme]` 규칙이 그 scope에서 Semantic/Derived/Component Mapping을 다시 계산한다. 단순히 후손 변수만 바꾸고 root에서 이미 계산된 Component 값을 상속하는 문제를 피한다.
+
+```ts
+const panel = document.querySelector<HTMLElement>("#service-panel")!
+applyRuntimeTheme(panel, {
+  schemaVersion: 1,
+  tokens: { "color.state.active": "#345678" },
+})
+```
+
+명시적 scope는 **독립 HM preset + 자신의 partial override**다. Global A 아래 Scoped B의 미지정 값은 A가 아니라 HM Default다. 이 정책은 밝은/어두운 모드나 Brand selector를 새로 만들지 않고 서로 독립된 scope를 검증하기 위한 것이다. 소비 CSS만으로 적용하려면 `[data-hm-theme="service-a"] { --hm-sem-state-active: ...; }`를 기본 CSS 뒤에 선언한다. 기존 host inline 값이 있는 경우에는 그 값이 우선한다.
+
+**Portal 경계**: CSS inheritance는 DOM을 따른다. Select, Date Picker, Sheet 등 body Portal은 wrapper scope의 자손이 아니다. Global Theme에서는 그대로 같은 값을 받는다. 현재 HM SelectContent / PopoverContent / DatePicker는 Portal container API를 공개하지 않는다. 따라서 wrapper만으로 popup을 scoped Theme로 바꿀 수 없으며, popup은 Global Theme를 따른다. raw Radix Portal을 직접 조합하는 사용처에서 이미 container를 설정할 수 있다면 해당 Theme scope를 쓰거나 포털 호스트에 같은 계약을 적용한다. 기존 HM popup에 scope 전달을 추가하는 일은 별도 API/구조 작업이다.
+
+## 의미별 독립성 및 기존 표현
+
+- Active: Checkbox checked, Radio selected, Switch on, Slider range/thumb border, Progress fill, Calendar single / range edge, Date Picker의 Calendar selected.
+- Focus: `color.stroke.input.focus` → `--hm-sem-stroke-input-focus` → `--ring`. Checkbox/Calendar/Input/Select 등의 Focus와 Active는 독립적이다. Default에서는 둘 다 Light 2지만 Verification에서는 다른 값이다.
+- Primary: Badge default, Pagination current, Button outline, GNB/LNB current/strong ink. Active와 alias하지 않는다.
+- Accent 45%: Select/Menu Item/Calendar hover·range middle/Pagination hover/Table row hover·selected 등의 Soft Highlight. 내부 `--hm-sem-surface-highlight`를 사용한다. Accent 100% + On Accent: Toggle/Toggle Group의 Persistent Selected Surface, Menubar 상위 Highlighted/Open, Navigation Menu Trigger/Open. Navigation Current는 Primary + contextual surface로 Control Active와 구분한다.
+- On Accent: Primary와 sibling Semantic이다. `color.on.accent`와 CSS-only package fallback은 독립 기본값을 가지며 Primary를 override해도 On Accent는 함께 바뀌지 않는다.
+- Destructive: Input 오류, Badge/Button/Menu 오류 표현. Primary/Active/Focus와 독립적이다.
+- Slider Hover/Drag halo는 Primary 20%, Keyboard Focus halo는 Focus Semantic 20%다. Focus와 Hover/Drag가 겹치면 Focus 색이 우선한다. GNB/LNB는 contextual navigation focus 예외(초록 면의 inverse outline, Current/Open 면의 contextual outline)를 유지한다. 팔레트 기반 Table header/Tab/navigation 장식은 Control Active 의미가 아니다. Data Table Sort Indicator는 별도 Green Light 3 palette 기반이며 [Pattern 문서](../patterns/data-table.md)를 따른다.
+
+## 초기 렌더
+
+Default CSS는 첫 paint 전에 로드한다. Story scope는 `useLayoutEffect`로 적용해 React paint 전에 값을 준비한다. 서비스 Global 적용은 앱 bootstrap에서 React render 전에 호출할 수 있다. 네트워크 Theme를 나중에 받으면 Default → External 변화가 생길 수 있으며 bootstrap/캐시 정책의 책임이다. 네트워크 flash 측정이나 hydration 시스템은 이번에 만들지 않았다.
+
+## 검증 Story
+
+`src/theme/runtime-theme.stories.tsx`는 숨김 `verification` Story다. 기존 컴포넌트 API로 Button/Input/Checkbox/Radio/Switch/Select/Slider/Progress/Calendar/DatePicker/Pagination/Badge/Table과 Command를 렌더링하며 Navigation Preview는 GNB / LNB 중 하나만 선택한다. Dashboard Theme 예제의 콘텐츠에는 외부 GNB/LNB를 넣지 않는다.
+
+- `/iframe.html?id=theme-runtime-contract--comparison&viewMode=story`: HM Default / External 비교.
+- `/iframe.html?id=theme-runtime-contract--global-external&viewMode=story`: Global External 및 실제 Select/DatePicker Portal 검증.
+- `/iframe.html?id=theme-runtime-contract--verification&viewMode=story`: 자동 DOM/계약/독립성/cleanup 검사 결과.
+- `/iframe.html?id=theme-runtime-contract--dashboard&viewMode=story`: 기존 Dashboard composition에 Scoped Theme 적용.
+
+`verification-baseline.json`은 Runtime 전환 전 CSS root 변수 그래프의 **Story 전용 고정 snapshot**이다. Production import가 없다. 새 Default와 같은 컴포넌트를 렌더링해 색상·geometry를 비교한다. 기준값을 새 CSS에서 재생성하지 않는다.
+
+
+자동 play와 같은 검사를 Run verification 버튼으로 다시 실행할 수 있다. Verification 화면의 transition-duration만 0으로 고정해 중간 애니메이션 프레임이 최종값 검사에 섞이지 않도록 했다. Production transition/동작은 바꾸지 않았다.
+
diff --git a/docs/guidelines/shadcn-기반-구현-원칙.md b/docs/guidelines/shadcn-기반-구현-원칙.md
new file mode 100644
index 0000000..86a62aa
--- /dev/null
+++ b/docs/guidelines/shadcn-기반-구현-원칙.md
@@ -0,0 +1,182 @@
+# shadcn 기반 구현 원칙
+
+> 적용 범위: HMDesignSystem의 새로운 Component / Pattern / Story 구현과 기존 테스트 디자인 재현
+>
+> 이 문서는 `docs/guidelines/프로젝트-지침.md`의 컴포넌트 구현 규칙을 보완하는 공통 지침이다. 두 문서가 충돌하면 더 구체적인 컴포넌트 문서(`docs/components/`, `docs/patterns/`)의 사용자 확정 결정과 이 문서의 재사용·구조 원칙을 함께 적용한다.
+
+> **2026-10-07 사용자 확정 — AI 기본 구현 정책의 상세 Source of Truth.** 사용자가 별도로 기존 컴포넌트/디자인 시스템 사용, Theme 적용, Semantic Token 사용, Navigation 정책 준수를 요청하지 않아도 AI는 모든 신규·수정 UI에 자동 적용한다. 기본 전제는 **Existing Component First / Theme Applied By Default / Single Navigation Mode / Minimum Custom**이다. 과거 문서·예제와 충돌하면 이 정책과 [Navigation Single Mode Policy](navigation-single-mode.md)를 우선한다.
+
+## 1. 구현 전 필수 판단
+
+작업을 시작하기 전에 반드시 다음 질문에 답한다.
+
+먼저 변경 범위를 `STORYBOOK_ONLY | PRODUCTION_UI | BOTH` 중 하나로 정하고, 아래 기존 구현과 사용례를 검색한다. 디렉터리 존재 여부와 관련 후보를 확인한 뒤 필요한 파일만 읽는다. CENTER 규격은 CENTER 작업에만 적용하며 일반 UI의 근거로 섞지 않는다.
+
+| 탐색 대상 | 확인 내용 |
+|---|---|
+| `packages/ui` | 공개 exports, `src/components/ui`, `src/patterns`, Theme / Component Mapping |
+| `src/components` | 대표 Component Story, 기존 Variant / Prop, `story-board.tsx` 등 shared helpers |
+| `src/patterns` | Layout / Pattern Story, `dashboard-work-status.ts` 등 공통 상태 mapping |
+| `src/center` | CENTER 관련 Story 및 `center-stories.css`의 Common Card 구현 |
+| 기존 Storybook stories / shared helpers | 유사 대표/PRIMARY Story, composition, 상태·선택·Card mapping과 공통 helper |
+| `docs/components/`, `docs/patterns/` | 후보의 현재 API, 적용 Token, 사용자 확정 결정 |
+
+Storybook은 QA 도구이자 **구현 Reference Catalog**다. Button은 Button 대표 Story, Dashboard는 Dashboard 대표 Story, CENTER 카드는 CENTER Common Card Story부터 확인한다. 현재 Story의 시각 언어를 무시해 새 패턴을 만들지 않는다. `verification` Story는 계약/상태 검증용이며 운영 화면의 기본 Reference가 아니다. 특히 혼합 Navigation의 **VERIFICATION ONLY** Story는 신규 구현 근거로 사용하지 않는다. 일반 업무 화면은 Storybook Story·사이드바에 등록하지 않고 별도 React 화면과 독립 미리보기로 제공한다.
+
+Component와 Theme은 함께 설계한다. Component 탐색과 동시에 기존 Theme / Token을 확인하고, 조합과 Semantic 연결을 포함해 화면을 구현한다. 구현 후 Theme을 별도 후처리로 추가하는 흐름은 사용하지 않는다. Theme 우선순위와 Source 수정 조건은 [테마 토큰 가이드](테마-토큰-가이드.md)의 AI 기본 적용 정책을 따른다.
+
+> 이 화면을 현재 `@hm-design/ui` + shadcn 조합으로 만들 수 있는가?
+
+답이 YES이면 그 구조와 동작을 유지하고 HM 디자인 값만 CSS와 Token으로 적용한다. 기본 방향은 **shadcn을 HM 디자인으로 스타일링**하는 것이며, HM 디자인을 이유로 shadcn을 대체하는 별도 시스템을 만들지 않는다.
+
+## 2. 구현 우선순위
+
+다음 순서를 건너뛰지 않는다.
+
+1. 기존 `@hm-design/ui` Component / Pattern 재사용
+2. 기존 Variant / Prop으로 요구사항 표현
+3. 기존 Composition으로 해결
+4. shadcn 기본 Component / Composition 활용
+5. Radix 등 shadcn이 사용하는 Primitive 활용
+6. 위 방법으로 해결할 수 없을 때만 최소 Custom 구현
+
+기반 기술의 운영 우선순위는 `@hm-design/ui existing → shadcn → Radix Primitive → Composition → CSS / Token Visual → Minimum Custom`이다. 이는 새 기반 기능이 필요한 경우의 선택 기준이며, 이미 있는 HM Variant / Composition을 먼저 확인하는 위 재사용 순서를 건너뛰는 이유가 아니다. 모든 단계에서 Visual은 HM Theme / Token으로 연결하며 직접 primitive 동작을 만드는 것은 마지막 수단이다.
+
+판단 예시는 다음과 같다.
+
+| 필요 | 우선 선택 |
+|---|---|
+| Button | 기존 HM Button |
+| Popup | Popover / Dropdown Menu |
+| Disclosure | Collapsible / Accordion |
+| Mobile navigation | Sheet |
+| 검색 조합 | Input / Select / Command / Combobox |
+| Empty / Result 화면 | 기존 Pattern / Component composition |
+| Search Form | Input + Select + Button |
+| Dashboard Empty | Dashboard Layout + 기존 Empty / Data Table composition |
+| Filter 화면 | Filter Bar |
+| GNB User Menu | Avatar + Dropdown Menu |
+
+## 3. 구조·동작과 시각의 소유권
+
+shadcn 기반으로 구현 가능한 형태라면 shadcn/Radix의 구조, API, 상태 모델, 접근성, keyboard interaction을 최대한 유지한다.
+
+### shadcn/Radix 구조를 유지하는 영역
+
+- DOM / Component 구조
+- Public API
+- controlled / uncontrolled 방식
+- `data-state`
+- ARIA
+- keyboard navigation
+- focus management
+- Portal
+- Dismiss / Escape 동작
+- `asChild`
+- composition 방식
+
+### HM이 소유하고 조정할 수 있는 영역
+
+- CSS와 CSS Custom Properties
+- Component Token과 Semantic Token mapping
+- height, padding, gap
+- border, radius, color, shadow
+- typography
+- responsive layout
+
+즉, **Behavior / Structure는 shadcn/Radix를 유지하고 Visual은 HM Theme로 조정**한다.
+
+시각 차이는 HM CSS / Token으로, spacing·radius·color 차이는 Component Token으로 해결한다. CSS로 해결 가능한 차이를 위해 새 prop이나 별도 Component API를 추가하지 않는다.
+
+## 4. Component와 Pattern
+
+이미 `@hm-design/ui`에 구현된 Component가 있으면 shadcn Component를 다시 복사하거나 비슷한 별도 버전을 만들지 않는다.
+
+Pattern도 새로운 primitive를 만들기 전에 기존 Component composition을 우선한다. 반복 사용성과 고유한 계약이 실제 제품 사용에서 확인될 때만 별도 Pattern으로 승격한다. 시각 결과가 기존 Component 조합으로 표현 가능하다면 Pattern은 조합과 상태 연결만 소유하고 primitive의 동작이나 스타일을 복제하지 않는다.
+
+shadcn/Radix에 이미 존재하는 interaction은 새로 구현하지 않는다. 기존 Component 여러 개로 표현할 수 있는 화면은 composition으로 해결한다.
+
+Status / Badge / Card / Navigation에 공통 mapping이 있으면 함께 재사용한다. 상태 Badge는 기존 Badge → status mapping → 기존 variant → 필요한 최소 확장 순으로 판단한다. Dashboard 상태는 `src/patterns/dashboard-work-status.ts`, CENTER 카드는 `src/center/center-stories.css`를 확인한다. 이 파일들은 현재 Story 범위의 구현이므로 재사용 시 Production export 여부와 파일 책임을 확인하고 Story helper를 Production에 직접 import하지 않는다. 색상 값·Card CSS를 복사하거나 Dashboard 전용 Badge를 중복 생성하지 않는다.
+
+package exports, public props, public types, package entry, Story ID, `meta.title`을 불필요하게 변경하지 않는다. 요구사항상 변경이 필요하면 소비처, 호환성 및 Story 링크 영향을 먼저 확인하고 사유를 기록한다.
+
+## 5. Storybook과 Production 구현 분리
+
+### 5.1 Storybook Reference와 신규 화면 생성의 분리
+
+일반적인 "화면 만들어줘", 대시보드 또는 업무 페이지 제작 요청에서 Storybook은 기존 디자인 시스템을 확인하는 Reference로만 사용한다. 신규 업무 화면을 Story로 등록하거나 Storybook 사이드바에 추가하지 않으며, 기존 대표 Story를 생성 화면으로 교체하지 않는다. 화면 확인을 위해 Storybook 실행을 필수로 요구하지 않고, 별도의 React 화면을 빌드한 뒤 독립적인 미리보기를 제공한다. H-2 또는 유사 자동화가 사용 가능한 경우 `preview.html`·desktop/mobile 이미지 등 독립 미리보기 산출을 지원할 수 있지만, 이는 Storybook Story 등록과 별개의 역할이다. Storybook 전용 helper/CSS는 운영 화면에 사용하지 않는다.
+
+다음처럼 사용자가 Storybook 수정을 명시한 경우에는 예외로 처리한다: 새로운 Component 또는 Pattern 추가/수정, 대표 또는 Verification Story 작성, Storybook Reference 자체 개선. 이 예외에서도 화면 생성 결과와 Storybook Reference 변경을 서로 다른 범위로 기록한다.
+
+Storybook에서 디자인 상태를 비교하기 위한 표현 때문에 Production API를 추가하지 않는다.
+
+`STORYBOOK_ONLY`의 배치·specimen 표현 문제는 Story 범위에서 해결한다. 이를 이유로 Production Component를 불필요하게 수정하지 않는다. 실제 Production 동작 문제가 있으면 필요한 Production 변경과 관련 Story를 함께 다루며 Story CSS override로만 숨기지 않는다.
+
+다음은 Story 전용 표현으로 처리할 수 있다.
+
+- Hover 고정 specimen
+- Selected + Hover 비교
+- Spacing guide
+- Token reference
+
+Story 안의 실제 화면과 상호작용에는 가능한 한 production `@hm-design/ui` Component를 그대로 사용한다. 특정 상태를 보여줄 때도 production Component의 실제 API와 shadcn/Radix 상태 모델을 우선한다. Story 전용 helper나 selector는 검수 표현에만 한정하며 production bundle이나 Public API에 포함하지 않는다.
+
+## 6. Custom 구현 허용 조건
+
+별도 Custom 구현은 다음을 모두 확인한 뒤에만 허용한다.
+
+- 기존 HM Component로 해결할 수 없다.
+- 기존 Component composition으로 해결할 수 없다.
+- 기존 Variant / Prop 확장이 요구사항·API 의미에 부적절하다.
+- shadcn 기본 Component 및 Radix Primitive 조합으로 해결하기 어렵다.
+- CSS / Token 조정만으로 해결할 수 없다.
+- 실제 제품에서 반복적으로 필요한 독립적인 동작 또는 API가 있다.
+
+Custom 구현은 필요한 동작과 API에 한해 최소 범위로 제한한다. 결과 보고와 관련 컴포넌트 또는 패턴 문서에는 다음을 기록한다.
+
+- 왜 shadcn으로 해결할 수 없었는지
+- 왜 기존 HM 조합으로 해결할 수 없었는지
+- 왜 기존 Variant 확장이 부적절하고 Radix 조합도 어려운지
+- 추가한 Custom 범위
+- Public API 영향
+
+## 7. 금지 사항
+
+- 디자인을 맞추기 위해 shadcn을 통째로 다시 작성한다.
+- Radix state logic을 재구현한다.
+- 기존 HM Component와 유사한 Custom Component를 추가한다.
+- Storybook 검증만을 위한 Production prop을 추가한다.
+- CSS로 해결 가능한 차이에 새 API를 추가한다.
+- 이전 ui-viz JSX, DOM, class 또는 상태 로직을 그대로 복사한다.
+- 기존 Component와 Story를 확인하지 않고 Button / Input / Badge / Card / Dialog / Select / Table / Navigation 등을 생성한다.
+- 기존 Badge가 있는데 Dashboard 전용 Badge를 새로 만들거나 기존 Common Card CSS를 복사한다.
+- 기존 Theme Token이 있는데 색상·spacing·값을 하드코딩하거나 같은 Token을 여러 파일에 중복 정의한다.
+- UI 구현 후 Theme을 선택적 후처리로 적용한다.
+- Storybook 표현 문제만을 위해 Production 코드를 바꾸거나 Production 동작 문제를 Story CSS override로 숨긴다.
+- GNB / LNB / Dashboard 혼합은 운영 페이지에 사용하지 않는다. 혼합 Navigation은 현재 단일 모드 정책의 조건을 충족하는 기술 검증 Story에만 둔다.
+
+## 8. 구현·검토 체크리스트
+
+- [ ] 현재 `@hm-design/ui`에 재사용할 Component 또는 Pattern이 있는가?
+- [ ] 기존 Variant / Prop / Composition과 유사 대표 Story, 공통 mapping을 먼저 확인했는가?
+- [ ] shadcn 기본 Component / Composition으로 해결할 수 있는가?
+- [ ] Radix 또는 기존 기반 라이브러리가 동작과 접근성을 이미 제공하는가?
+- [ ] Component composition으로 별도 primitive 없이 표현할 수 있는가?
+- [ ] 남은 차이는 HM CSS / Token만으로 맞출 수 있는가?
+- [ ] Story 전용 요구가 Production API로 유입되지 않았는가?
+- [ ] Custom이 필요하다면 모든 허용 조건과 기록 요건을 충족했는가?
+- [ ] Theme / Semantic 연결, 독립 fallback, 변경 범위와 public API 보호를 지켰는가?
+- [ ] 단일 Navigation Mode와 같은 모드의 반응형 표현을 지켰는가?
+
+## 9. AI 신규 화면 구현 순서
+
+AI 화면 구현의 단일 실행 순서는 저장소 루트의 [AGENTS.md Quick Start](../../AGENTS.md#ai-화면-구현-quick-start)를 따른다. 후보 Component·Pattern의 실제 export, 사용 문서, 대표 Story는 [통합 Reference Index](component-pattern-reference.md)에서 찾는다. 일반 업무 화면은 Storybook에 등록하지 않고 별도 React 화면으로 생성하며, 화면별 빌드·필요한 검증·독립 미리보기를 결과로 제공한다. 상세 재사용·Theme·Navigation 조건은 이 문서와 연결된 Source of Truth를 유지한다.
+
+구현 중에는 다음 단계에 필요한 최소 확인만 하고, 완료 후 diff / 요구사항 / 관련 Story / 필요한 프로젝트 검증을 한 번에 수행한다. 같은 조건으로 성공한 검증을 형식적으로 반복하지 않는다.
+
+## 10. 명시적 예외
+
+사용자가 새로운 Component 실험, Theme 미적용 prototype, 외부 디자인 완전 재현, 기존 디자인 시스템과 독립된 POC를 명시적으로 요청한 경우에만 기본 정책의 예외를 검토한다. 예외의 목적·범위·사유와 Theme 미적용 여부를 기록하고 기존 시스템에 영향을 주지 않는 별도 Story / 실험 범위로 격리한다. Production exports / Theme Source / 공통 mapping을 임의로 변경하지 않는다.
+
+이 예외는 혼합 Navigation 운영을 자동 허용하지 않는다. Navigation 조합을 명시적으로 요청받아도 정책 변경인지 기술 검증인지 구분하며 [Navigation Single Mode Policy](navigation-single-mode.md)의 `verification` 태그와 **VERIFICATION ONLY** 조건을 유지한다.
+
diff --git a/docs/guidelines/theme-delivery.md b/docs/guidelines/theme-delivery.md
new file mode 100644
index 0000000..6578f72
--- /dev/null
+++ b/docs/guidelines/theme-delivery.md
@@ -0,0 +1,107 @@
+# Theme JSON 운영과 독립 배포
+
+## Repository와 배포 단위
+
+하나의 Git Repository에서 소스·Theme·Storybook·문서를 관리한다. UI, CENTER Graphic, Theme JSON은 각각 별도 배포 단위다. 현재 두 패키지는 `private: false`이며 compiled dist(JS·타입·CSS)를 export한다. Library build는 `npm run build:packages`로 구현되어 있다. Registry publish 이력은 테스트 ZIP 검증 범위 밖이며 테스트 ZIP 실행에는 Registry 접근·publish가 필요하지 않다. Theme JSON의 독립 산출 경로는 구현했다. 실제 CDN URL·인프라·인증·CI publish는 미정이다.
+
+운영 배포 경계는 `packages/ui` → UI package, `packages/center-graphic` → Graphic package, `themes/*.json` → Theme CDN이다. **Git push ≠ Theme CDN publish**다. 운영 CI/CD는 JSON 검증·독립 artifact 산출 후 CDN에 배포하는 별도 단계로 구성하며, 현재 저장소에는 실제 CDN publish pipeline이 구현되어 있지 않다.
+
+```text
+HMDesignSystem/
+├─ packages/
+│  ├─ ui/                     # @hm-design/ui: logic, contract, mapping, runtime
+│  └─ center-graphic/         # 독립 Graphic package
+├─ themes/
+│  ├─ default.json            # 71개 public color 값의 공식 Default 원본
+│  ├─ service-example.json    # 5개 역할만 바꾸는 명시적 예제
+│  └─ drafts/                 # 과거 초안; Theme 산출 대상 아님
+├─ scripts/
+│  ├─ theme-templates/        # 컬러 literal 없이 alias/geometry만 소유
+│  ├─ theme-defaults.mjs      # JSON -> package CSS/default 데이터 생성
+│  └─ theme-artifacts.mjs     # JSON validation -> 독립 CDN artifact
+├─ src/theme/                 # Storybook Preview/Editor/verification 소비자
+└─ docs/guidelines/
+```
+
+`themes/default.json`은 기존 v1 `{schemaVersion:1,tokens:{...}}` 계약을 사용한다. Component Token은 없다. 73개 Runtime 입력 중 71개 컬러를 포함한다. 나머지 두 radius와 layout은 패키지 template에서 관리한다. 서비스 Theme는 같은 계약의 부분 컬러 override다.
+
+## 단일 Default 원본과 package fallback
+
+사람이 관리하는 컬러 값은 `themes/*.json`이다. Default JSON과 `scripts/theme-templates`에서 `packages/ui/src/theme/primitives.css`, `default.css`, `default-values.generated.ts`를 생성한다. Template는 기존 alias/geometry 정책을 유지하고 HEX literal을 따로 관리하지 않는다. JSON의 역할값이 팔레트 alias의 값과 같으면 기존 alias를 유지하고, 달라지면 JSON의 역할값을 우선한다.
+
+패키지는 생성된 CSS fallback snapshot을 포함하므로 네트워크 Theme가 없거나 실패해도 기본 화면을 렌더링한다. 이미 배포한 UI package의 fallback은 **그 패키지 버전에서 생성한 HM Default snapshot**이다. 최신 운영 Default JSON을 CDN에서 로드하면 UI 재배포 없이 새 값이 적용된다. 네트워크 장애에서 최신 CDN 값까지 보장하는 시스템은 아니며, 그 경우 패키지 snapshot으로 복원한다.
+
+Theme-only CDN 배포는 `npm run build:themes`만 실행한다. UI 재빌드·version up·registry publish가 필요 없다. 이후 UI 패키지를 새로 유지보수/검증할 때는 `npm run generate:theme-defaults`로 repo의 생성 snapshot을 갱신한다. `typecheck/build/build-storybook`의 pre hook은 JSON/template/생성 snapshot의 불일치를 검사한다. 이 검사는 Theme artifact 산출의 선행 조건이 아니다.
+
+## 개발팀 Runtime 적용
+
+설치/초기 서비스 연결 시 UI Component와 CSS를 가져온다. 실제 `themeUrl`은 서비스 설정에서 결정하며 package 내부에는 회사 CDN 주소가 없다.
+
+```ts
+import "@hm-design/ui/theme.css"
+import {
+  fetchRuntimeTheme, resolveRuntimeTheme, loadRuntimeTheme,
+  applyRuntimeTheme, resetRuntimeTheme,
+} from "@hm-design/ui/theme"
+
+// serviceConfig.themeUrl은 CDN/API 설정값이다.
+const root = document.documentElement
+const success = await loadRuntimeTheme(root, serviceConfig.themeUrl)
+// success=false: 이 root의 override를 해제하고 host/package HM fallback 유지.
+
+// 별도의 Default JSON + 서비스 partial을 사용할 때:
+try {
+  const defaults = await fetchRuntimeTheme(serviceConfig.defaultThemeUrl)
+  const serviceTheme = await fetchRuntimeTheme(serviceConfig.themeUrl)
+  applyRuntimeTheme(root, resolveRuntimeTheme(serviceTheme, defaults))
+} catch {
+  resetRuntimeTheme(root)
+}
+
+// 이미 받은 설정/API/로컬 JSON에도 같은 Apply 계약을 사용한다.
+// Apply에는 unknown 전체 validation이 있다.
+applyRuntimeTheme(root, configurationTheme)
+
+// 설정 URL의 버전/hash가 바뀌거나 운영 refresh 이벤트가 오면 다시 호출한다.
+// 라이브러리/Component 재빌드와 브라우저 reload는 필요 없다.
+await loadRuntimeTheme(root, serviceConfig.updatedThemeUrl)
+```
+
+- `fetchRuntimeTheme(url, RequestInit?)`: HTTP status/JSON/기존 allowlist 검증 후 partial 문서 반환. DOM을 건드리지 않고 실패 시 throw한다. URL/캐시/credentials/signal은 소비 서비스에서 지정한다.
+- `resolveRuntimeTheme(theme, defaults?)`: 패키지 Default + 선택적 supplied Default + partial override를 검증 후 합친다. Component Token을 만들지 않는다. 그룹의 일부 stop만 제공하는 입력은 거부한다.
+- `loadRuntimeTheme(root,url,{request?,defaults?}?)`: fetch/검증/선택적 merge/Apply의 편의 함수. 오류/invalid/HTTP 실패 시 false와 package fallback. 더 늦게 도착한 이전 요청은 새 Theme를 덮거나 reset하지 않는다. 직접 Apply/Reset도 pending load를 무효화한다.
+- `isRuntimeTheme`: DOM 변경 없는 사전 검증. `applyRuntimeTheme`/`resetRuntimeTheme`: 기존 public Apply/Reset 경로와 host inline 값/priority 복원 정책 유지.
+
+앱 시작 전/후 어디서든 호출할 수 있다. CSS는 최초 paint 전에 로드한다. 네트워크 응답 전에는 package fallback, 응답 후에는 External Theme다. 로딩 timeout이 필요하면 서비스에서 `AbortSignal.timeout(...)` 또는 AbortController를 RequestInit에 제공한다. 로더는 polling/push subscription을 자동 시작하지 않는다. 이미 열린 서비스가 최신 JSON을 쓰려면 소비 서비스의 refresh 이벤트/설정 갱신/호출 정책이 필요하다.
+
+## 디자인팀 workflow
+
+1. `themes/service-example.json`을 서비스 파일로 복사하거나 `themes/default.json`의 상위 컬러 역할을 수정한다. 공통 팔레트/gradient보다 Primary/Active/Focus/Accent 같은 역할을 우선 편집한다.
+2. Storybook의 `Theme/Designer Playground/Editor`에서 URL/파일 Import로 JSON을 불러온다. 기본값은 `themes/default.json`을 Runtime merge하여 표시한다. 개발 서버에서는 Default JSON import의 HMR Preview도 가능하다. 다른 서비스 파일을 변경한 뒤 같은 URL을 Load URL로 다시 불러오면 CSS/Component 수정 없이 즉시 반영한다.
+3. 실제 Input/Control/Calendar/Date Picker/메뉴/표/내비게이션과 1280/768/390 레이아웃을 확인한다. Editor의 값 변경도 같은 공식 Contract를 사용한다.
+4. Editor를 이용했다면 Export한 JSON을 해당 `themes/*.json`에 저장해 Git에 포함한다. Editor는 repository 파일을 자동으로 덮어쓰지 않는다.
+5. Git diff/review 후 디자인팀의 승인된 운영 절차로 commit/push한다.
+6. 아래 Theme-only 산출물을 CDN에 배포한다. Git은 이력/검토, CDN은 Runtime delivery를 담당한다. 서비스가 Git 파일을 직접 읽지 않는다.
+
+## Theme-only 배포
+
+```powershell
+npm run build:themes
+# 결과: theme-dist/themes/default.json, service-example.json 및 추가한 top-level JSON
+```
+
+전체 문서 validation을 통과한 뒤에만 산출한다. `themes/drafts`는 제외한다. 삭제된 source의 옛 top-level JSON artifact도 출력 디렉터리에서 제거한다. 산출물은 `theme-dist/themes/`이며 UI/Graphic bundle과 별개다. 이 디렉터리의 파일만 선택한 CDN origin에 업로드하고 서비스 설정의 Theme URL을 갱신한다. CDN infrastructure/publish credentials/자동 pipeline은 구현하지 않았다. CDN은 cross-origin 사용을 위한 CORS 응답과 JSON Content-Type을 설정해야 한다.
+
+## Cache/버전/롤백 권장안
+
+인프라 미정 상태의 **추천안**은 `/themes/service-a/<content-hash>.json` 또는 `/themes/service-a/v12.json`처럼 변경마다 별도 파일을 발행하고 서비스 설정을 새 URL로 바꾸는 방식이다. 이전 파일을 유지하므로 rollback은 이전 URL로 돌린 후 Loader를 다시 호출한다. 버전 파일에는 장기 `Cache-Control: public, max-age=31536000, immutable`을 사용할 수 있다. AWS도 versioned 파일/디렉터리 이름으로 갱신하는 방식을 안내한다. [CloudFront 파일 versioning](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/UpdatingExistingObjects.html), [MDN Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control).
+
+대안은 `/themes/service-a.json?v=<content-hash>`다. CDN cache key가 query를 포함하도록 설정해야 효과가 있다. 안정 URL을 덮어쓰려면 짧은 TTL/`no-cache`와 ETag 재검증 또는 CDN purge 정책을 함께 정한다. 브라우저의 `fetch(...,{cache:"no-store"})`만으로 CDN edge 캐시를 항상 갱신한다고 보장하지 않는다. Preview는 no-store로 요청하지만 Production 캐시 정책은 소비 서비스/CDN 설정의 책임이다. [MDN HTTP caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Caching), [MDN Request.cache](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache).
+
+실제 운영 URL/versioning 방식은 서비스 설정에서 확정한다. 자동 버전 관리/manifest/publish/rollback 서비스는 미구현이다.
+
+## 보안/제한
+
+공개 allowlist의 HEX6/기존 radius 값만 Production Runtime이 허용한다. Theme artifact와 Designer UI는 컬러 전용이며 Component Token/임의 CSS/HTML/JS/URL 값은 거부한다. invalid Import는 마지막 유효 Preview를 유지하고 URL Loader 실패는 package HM Default로 돌아간다. Partial은 교체이며 이전 Theme key가 남지 않는다.
+
+Global root Theme는 body Portal에도 적용된다. wrapper 밖 Portal은 Global을 사용하며 Scoped 전달은 기존 FOLLOW_UP이다. 동일 root는 한 owner가 관리한다. 새 상위 역할/Mapping/behavior가 필요한 변경은 UI package 작업이며 단순 Theme 컬러 변경과 구분한다.
diff --git a/docs/guidelines/개발-적용-가이드.md b/docs/guidelines/개발-적용-가이드.md
new file mode 100644
index 0000000..af18f5a
--- /dev/null
+++ b/docs/guidelines/개발-적용-가이드.md
@@ -0,0 +1,119 @@
+# 개발 적용 가이드 (검토용 개정안)
+
+페이지 구현 전에 [Navigation Single Mode Policy](navigation-single-mode.md)를 적용한다. AI 코드 생성·제안, 신규/기존 화면, 프로토타입, Production 모두 GNB / LNB / DASHBOARD 중 정확히 하나만 선택한다. 모바일도 같은 체계의 Responsive Variant를 사용하며 별도 요청 없이 Navigation 조합을 생성하거나 제안하지 않는다.
+
+> 대상: 디자인팀과 서비스 개발팀. 현재 UI/CENTER compiled dist build/export, JSON Default/서비스 partial, 공개 Runtime 검증·Global/Scoped Apply와 URL Loader, Storybook JSON Preview, Theme-only artifact 산출이 구현되었다. Registry publish 이력은 테스트 ZIP 검증 범위 밖이며 실제 CDN infrastructure/publish pipeline은 다음 단계다. 테스트 ZIP은 로컬 workspace와 포함 dist를 사용하므로 Registry 접근·publish가 필요하지 않다. 아래 장기 운영 예시의 `@company/ui`는 목표명이며 현재 import는 `@hm-design/ui`다. 현재 실제 API/독립 배포 절차는 [Theme delivery](theme-delivery.md), 디자인팀 workflow는 [Theme guide](designer-theme-guide.md)를 따른다.
+
+## 1. 착수 순서
+
+AI 신규·수정 UI 작업은 사용자의 별도 요청 없이 기존 Component / Storybook Reference 우선, Theme / Semantic 기본 적용, 단일 Navigation, 최소 Custom을 적용한다. 변경 범위(`STORYBOOK_ONLY | PRODUCTION_UI | BOTH`)를 정한 뒤 [AI 신규 화면 구현 순서](shadcn-기반-구현-원칙.md#9-ai-신규-화면-구현-순서)를 따른다. Theme 사용과 Theme Source 수정은 [테마 토큰 가이드](테마-토큰-가이드.md)의 별도 조건을 적용한다.
+
+### 1.1 패키지·운영 기반 도입 순서
+
+아래는 서비스 도입 계획이며 이미 구현된 HM Component를 새로 생성하라는 순서가 아니다.
+
+1. 서비스별 사용 현황을 모아 공통화할 컴포넌트 3~5개와 필요한 Semantic Token을 선정한다. 예: Button, Input, Card, Dialog, Select.
+2. `@company/ui`의 공개 API, 기본 Theme CSS, Semantic Token 계약을 버전 관리한다. 이름·타입·기본값·허용 범위를 한곳에서 정의한다.
+3. shadcn 컴포넌트는 Design System 저장소에서만 도입한다. upstream 버전/도입일과 변경 이유를 기록하고 회사 API·토큰·접근성 기준에 맞게 수정한다. 이후 upstream 변경도 diff를 검토해 선택적으로 반영한다.
+4. Storybook이 패키지의 **공개 진입점**을 사용하게 하고 대표 상태 및 Theme Preview를 추가한다.
+5. 한 앱에서 패키지와 기본 CSS를 설치한다. 앱 번들에 import하지 않은 별도 로컬 서버의 Theme JSON을 Loader로 읽어 값만 바꾸고, 앱 재빌드 없이 다음 진입·새로고침에서 반영되는지 확인한다. 운영 단계에서는 이를 API/CDN Publish 경로로 바꾼다.
+
+서비스 앱에서 `shadcn add`로 컴포넌트를 별도 생성하거나 공통 컴포넌트 코드를 복사해 고치지 않는다. 서비스 전용 조합은 공개 컴포넌트를 감싸서 만든다. 공통 API 변경이 필요하면 Design System 변경으로 제안한다.
+
+## 2. 단일 저장소의 파일 책임과 패키지 경계
+
+현재 파일 배치와 목표 배치를 구분한다. **한 Git 저장소**에서 코드, Storybook, Theme 초안을 함께 버전 관리할 수 있으며, 별도 Git 저장소나 monorepo 구성은 필수가 아니다.
+
+| 위치 | 현재/목표 | 책임과 배포 경계 |
+|---|---|---|
+| `packages/ui/src/components/ui/`, `src/hm-theme.css` | 현재 구현 | Production Component와 Demo 스타일 분리. `@hm-design/ui` compiled dist export (JS·타입·CSS) |
+| `.storybook/`, `src/components/*.stories.tsx` | 현재 시제품 → 계속 사용 | 실제 컴포넌트 검수. 패키지 산출물에는 Story를 넣지 않음 |
+| `packages/ui/src/patterns/`, `packages/ui/src/theme.css` | 현재 구현 | 업무/Layout composition과 기본 Theme CSS. Library 산출물은 `npm run build:packages`로 생성 |
+| `packages/center-graphic/` | 현재 구현 | `@hm-design/center-graphic` 독립 package 배포 경계. UI package와 필수 의존 없음 |
+| `packages/ui/src/theme/contract.ts`, `runtime.ts` | 현재 구현 | 공개 73개 입력, 형식/범위 검증, atomic fallback·cleanup, Global/Scoped 적용. `@hm-design/ui/theme` export |
+| `themes/drafts/` | Runtime MVP 제안 | 디자인팀의 Theme 값 초안·검수 이력. Git 커밋만으로 운영 Theme이 바뀌지 않으며 패키지에도 넣지 않음 |
+| `themes/*.json` | 현재 구현 | `themes/default.json`은 공식 Default Color Source of Truth. 검증된 top-level JSON은 Theme CDN 배포 단위이며 Git push와 CDN publish는 별도 단계 |
+| 서비스 앱의 bootstrap | 개발팀 앱 | 패키지 버전 설치, themeId/mode 결정, API/CDN fetch·캐시·실패 처리, 검증된 값 적용 |
+
+패키지 공개 파일은 `package.json`의 export·포함 목록과 빌드 결과로 확인한다. 기본 CSS와 컴포넌트 CSS 규칙은 패키지 버전에 묶인다. 외부 발행 대상은 계약에 등록된 **기존 Semantic Token 값**이며, 변경된 JSON/CSS 초안을 자동으로 운영 앱에 노출하지 않는다. 필요해지면 `packages/ui`와 `apps/storybook`으로 재배치해도 Git 저장소는 하나로 유지한다.
+
+검증 계약은 Storybook·서비스 앱·Theme Publish가 공유해야 한다. 현재 검증·적용 도우미는 `@hm-design/ui/theme`에서 공개한다. 네트워크 URL, tenant 식별, 인증, 갱신 시점은 개발팀이 서비스 앱에서 관리한다.
+
+## 3. Token 연결과 기본값
+
+현재 연결은 Primitive → Semantic → Component Mapping이다. 다음은 실제 HM selector와 Token 이름을 사용하는 예다. 컬러 원본은 `themes/default.json`이며 생성 CSS를 별도 수동 원본으로 관리하지 않는다. 전체 입력은 [Runtime 계약표](runtime-theme-contract.md)를 따른다.
+
+```css
+/* 앱 초기 렌더 전에 로드 */
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+
+/* package의 Input Component Mapping이 Semantic을 소비하는 예 */
+:root, [data-hm-theme] {
+  --hm-input-border-color: var(--hm-sem-stroke-input-default);
+}
+[data-slot="input"] {
+  border-color: var(--hm-input-border-color);
+}
+```
+
+Tailwind `bg-primary`를 사용한다면 package의 `tailwind.css`에서 `--color-primary` → `--primary` → `--hm-sem-action-primary` 연결을 확인한다. 클래스 이름이 같다는 이유만으로 Theme 연동이 성립하지 않는다. 컴포넌트 코드의 임의 hex/px 값, Primitive 직접 참조, 서비스별 `!important` override는 허용하지 않는다. 구조적 고정값은 Runtime 계약 밖의 코드 값으로 별도 관리할 수 있다.
+
+## 4. Theme 문서와 버전 호환성
+
+MVP의 Theme 문서 예시는 다음과 같다. `tokens`는 **선택적 override**이므로 없는 키는 기본 CSS를 사용한다. 현재 Light/Dark 구분이 없어 모드별 구조는 두지 않는다.
+
+```json
+{
+  "schemaVersion": 1,
+  "themeId": "default",
+  "themeVersion": "2026-10-02.1",
+  "tokens": {
+    "color.action.primary": "#7c3aed",
+    "radius.input.default": "6px"
+  }
+}
+```
+
+- `schemaVersion`은 필드 구조와 Token 계약의 호환성을 판단한다. 앱이 지원하지 않는 버전이면 Theme 전체를 적용하지 않는다.
+- `themeVersion`은 Publish할 때마다 새로 발행하는 불변 값이다. `@company/ui` 패키지 버전과 독립적이다.
+- 구버전 앱이 남아 있는 동안에는 해당 앱의 계약에서 지원하지 않는 Token을 운영 Theme에 발행하지 않는다. 계약 확장은 패키지 릴리스와 앱 업데이트가 먼저다.
+
+현재 HM Storybook 시제품은 브랜드 배경과 주요 버튼의 면·테두리 그라데이션을 역할별 stop 색상으로 조합한다. 초안 JSON에는 allowlist에 등록한 stop 색만 6자리 HEX로 적고, 배경·버튼 면·버튼 테두리 각각의 stop 세트는 부분 적용하지 않는다. 각도·stop 위치·그림자는 기본 CSS 규칙으로 유지한다. `radius.input.default`와 `radius.container.default`는 별도 Semantic 역할로 연결하고 2–12px 정수를 공통 Runtime API에서 허용한다. Placeholder는 확인된 `color.fg.placeholder` 기본값을 사용한다. `ui_viz`의 Button D-087 색을 HM Runtime Semantic stop에 연결한 것은 현재 저장소의 **구현된 Runtime 계약**이다. 운영 allowlist로 승격하기 전에 디자인팀이 역할 이름·범위·호환성을 승인해야 한다.
+
+초기 검증 정책은 색상은 승인된 형식(예: 불투명 hex), radius는 허용 범위의 `px` 값으로 제한한다. shadow, font, spacing을 추가할 때에는 **각각 별도 타입·범위·호환성 검사**를 설계한다. 임의 CSS 함수, `url()`, `var()`, `!important`, selector, JavaScript는 Theme 값으로 허용하지 않는다. 접근성 검토는 개별 값의 형식 검사와 별도로 수행한다.
+
+## 5. 앱 Theme Loader의 책임과 실패 처리
+
+1. 앱이 기본 Theme CSS를 먼저 로드한다.
+2. API/CDN에서 활성 버전 포인터와 불변 Theme 문서를 가져온다. timeout과 캐시 정책을 명시한다.
+3. 문서 전체의 스키마 버전, ID, allowlist, 값 타입·범위를 검증한다. **하나라도 실패하면 일부 키만 적용하지 않는다.**
+4. 검증이 끝난 뒤 이전 Runtime override 키를 제거하고 허용된 키만 적용한다. Theme을 교체할 때 남은 오래된 키가 기본값을 가리지 않게 한다.
+5. fetch·검증 실패 시 Runtime override를 제거하고 기본 CSS를 사용한다. 실패 원인과 적용한 버전을 기록한다.
+6. 운영 초기에는 새 페이지 진입·새로고침 때 최신 활성 버전을 읽는다. 열린 화면의 실시간 교체는 별도 요구가 생길 때 도입한다.
+
+현재 적용 함수는 unknown 입력을 자체 검증하며 문서 전체 실패 시 atomic fallback한다. Global은 document root, Scoped는 명시적 wrapper에 적용하고 cleanup으로 host 기존 inline 값/priority를 복원한다. Theme ID 확인·URL/캐시 정책은 서비스 책임이며 공개 URL Loader는 HTTP/JSON/Runtime 계약을 검증한다. 렌더 중 깜빡임이 문제라면 초기 Theme 로딩 순서와 CSS 적용 시점을 앱 bootstrap에서 조정한다. 캐시는 성능용이며 검증과 기본값 fallback을 대체하지 않는다.
+
+**서비스 전역 Theme는 Global Runtime Theme를 권장한다.** `applyRuntimeTheme(document.documentElement, theme)` 또는 `loadRuntimeTheme(document.documentElement, themeUrl)`로 적용하면 body Portal도 같은 Theme를 받는다.
+
+**Scoped wrapper Theme는 wrapper 밖 body Portal에 자동 전달되지 않는다.** SelectContent, PopoverContent(Date Picker·Combobox 포함), DropdownMenuContent/ContextMenuContent 등 내부 body Portal popup은 Global Theme를 따른다. 이 Content wrapper에는 Theme scope를 전달하는 `container` API가 없다. 별도 export된 Radix Portal wrapper의 props를 Content의 container 지원으로 간주하지 않는다. Scoped는 DOM 자손에만 적용되며 세부 apply/merge/fallback/scope 계약은 [Runtime Theme](runtime-theme.md)를 따른다.
+
+## 6. Storybook 작성·검수 기준
+
+- Story import는 `@company/ui`의 공개 진입점과 기본 CSS를 사용한다. 로컬 내부 파일을 직접 가리켜 패키지 배포 결과와 달라지는 구성을 피한다.
+- 컴포넌트별 공개 props, variant/state, 오류·비활성·로딩, 키보드/포커스 동작을 지원 범위에 맞게 기록한다.
+- 현재 Theme verification Story에서 Default/External과 Runtime 계약을 비교한다. Theme selector toolbar는 없다. Preview는 운영 Publish를 수행하지 않고 패키지 Runtime API를 사용한다.
+- 값 검수는 실제 컴포넌트의 기본/hover/focus/disabled/error 상태, 대비·가독성, 잘림·넘침을 포함한다. Theme 변경이 닿는 Story에 집중한다.
+- 검수 기록에는 `@company/ui` 버전, Theme 버전 또는 Draft ID, 결과를 남긴다. Storybook 검수 후 실제 앱에서도 같은 계약이 적용되는지 통합 확인한다.
+
+## 7. 개발 완료 기준
+
+- 단일 저장소에서 만든 `@company/ui`의 공개 컴포넌트·기본 CSS를 서비스 앱이 버전으로 설치하고, Theme 장애에도 기본값으로 동작한다.
+- 별도 제공되는 승인된 Semantic Token 값만 변경해 Button 등 대표 컴포넌트가 앱 재빌드 없이 새 진입·새로고침에서 바뀐다. 패키지 CSS 규칙 변경에는 새 패키지 버전이 필요하다.
+- 패키지 Runtime API는 잘못된 키·값·스키마 버전을 거부한다. 서비스별 themeId 일치 검사는 향후 Loader가 담당한다(현재 API가 ID를 검증한다고 간주하지 않는다).
+- Theme 교체·해제 시 이전 override가 남지 않는다.
+- Storybook Preview와 앱에서 동일한 Theme 문서를 같은 계약으로 검증한다.
+- 컴포넌트 API 변경은 Theme Publish만으로 처리하지 않고 패키지 릴리스와 앱 업데이트로 전달한다.
+
+운영 절차는 [운영/배포 가이드](운영-배포-가이드.md)를 따른다.
diff --git a/docs/guidelines/운영-배포-가이드.md b/docs/guidelines/운영-배포-가이드.md
new file mode 100644
index 0000000..1de5e4b
--- /dev/null
+++ b/docs/guidelines/운영-배포-가이드.md
@@ -0,0 +1,104 @@
+# 운영·배포 가이드 (검토용 개정안)
+
+> 이 문서는 장기 운영 목표도 포함한다. 현재 UI/CENTER compiled dist build/export, JSON Default/partial과 공개 URL Loader/Apply, Designer JSON Preview, `npm run build:themes` 독립 artifact 산출이 구현되어 있다. Registry publish 이력은 테스트 ZIP 검증 범위 밖이며 Theme Admin, 실제 CDN/pipeline은 미구현이다. 테스트 ZIP은 포함 dist와 로컬 workspace를 사용하며 Registry 접근·publish는 필수가 아니다. 아래 `@company/ui`는 목표명이며 현재 패키지는 `@hm-design/ui`다. 이번 단계의 실제 배포/캐시/롤백은 [Theme delivery](theme-delivery.md)를 따른다. MVP 수동 운영과 향후 자동화를 구분한다.
+
+단일 `HMDesignSystem` Git 저장소에서 컴포넌트 소스·기본 CSS, Storybook, Theme 초안을 함께 관리한다. **Git 커밋, 패키지 릴리스, Theme Publish는 서로 다른 단계**다. 소스에 CSS/JSON을 수정하거나 Storybook을 빌드하는 것만으로 사용 중인 앱에 변경이 전달되지 않는다.
+
+| 같은 저장소의 변경 | 실제 배포 산출물 | 앱 반영 |
+|---|---|---|
+| 컴포넌트 구현·selector·기본 CSS·Token 계약 | 새 `@company/ui` 버전 | 개발팀이 의존성 업데이트·통합 검증·앱 배포 |
+| 이미 지원하는 Semantic Token 값 | 검증·승인된 불변 Theme 버전과 API/CDN 활성 포인터 | 연동된 Loader가 다음 진입·새로고침에서 가져와 적용; 앱 재배포 없음 |
+| Storybook Story·내부 문서·Manager 스타일 | 내부 Storybook 빌드 | 검수 환경 갱신; 서비스 앱 반영 경로가 아님 |
+
+패키지와 Theme은 같은 Git 변경 이력을 추적하되 각자 버전·검증·승인·롤백을 기록한다. CI를 도입하면 변경 파일별로 관련 검증을 선택하고, Publish는 별도 승인 단계에서 실행한다. Theme 초안을 저장소에 두더라도 승인되지 않은 값을 운영 URL에 자동 공개하지 않는다.
+
+## 1. 두 배포 경로
+
+### 컴포넌트·계약 변경
+
+```text
+요구사항·영향 분석 → Design System 코드/Story 변경 → 검수·PR
+→ @company/ui 버전 릴리스 → 서비스 앱 의존성 업데이트
+→ 앱 통합 확인 → DEV → STG → PROD
+```
+
+DOM, 공개 props/variant/state, interaction, 접근성, 기본 CSS의 selector·상태·레이아웃 규칙, 새 Semantic Token·스키마는 이 경로를 따른다. shadcn upstream 업데이트도 Design System 저장소에서 검토한 뒤 이 경로로 반영한다. 패키지 버전과 앱별 적용 버전을 기록한다. 서비스는 패키지 새 버전을 자동 수용하지 않고 앱 테스트·배포를 거쳐 사용한다.
+
+### 기존 Theme 값 변경
+
+```text
+Draft 값 수정 → 실제 @company/ui Storybook Preview → 자동 검증
+→ 디자인/운영 승인 → 불변 Theme 버전 생성 → STG 확인
+→ 운영 활성 포인터 전환 → API/CDN 제공 → 앱 새 진입·새로고침 시 로드
+```
+
+이 경로는 **이미 배포된 앱이 지원하는 Semantic Token의 값**에 한정한다. Theme Loader가 API/CDN을 읽도록 연동된 앱에서는 앱/패키지 재배포 없이 다음 진입·새로고침에 반영한다. Theme을 발행하기 위해 Storybook이나 앱을 다시 빌드하지 않는다. Storybook은 Preview 환경이며 Publish 권한과 분리한다.
+
+## 2. Publish 전 검증 게이트
+
+| 게이트 | 확인 사항 | 실패 시 |
+|---|---|---|
+| 계약 검증 | `schemaVersion`, themeId, Token allowlist, 필드/값 타입, 단위·범위 | Publish 중단 |
+| 호환성 | 운영 중인 앱의 `@company/ui`/계약 버전이 모든 발행 키를 지원 | 앱 업데이트 선행 또는 값 범위 축소 |
+| UI Preview | 실제 컴포넌트의 대표 상태와 대비·가독성, 잘림·넘침 | Draft 수정 후 재검수 |
+| 환경 검증 | STG에서 앱이 문서를 받아 적용하고 장애 시 기본값 사용 | PROD 활성화 보류 |
+| 승인·기록 | 변경 요청, 변경 전후 값, 검수 결과, 승인자, 예정 시각·영향 범위 | 기록 완료 전 보류 |
+
+값 검증은 클라이언트와 Publish 서버 양쪽에서 수행한다. 클라이언트 검증은 오래된 앱과 잘못 배포된 문서로부터 UI를 보호하고, 서버 검증은 잘못된 Theme 발행을 막는다. 자동 검증을 통과해도 색 대비나 UI 안전성이 자동으로 보장되는 것은 아니다.
+
+## 3. 버전, 활성화, 캐시
+
+- Theme 문서는 `themeId`와 `themeVersion`으로 식별하는 **불변 산출물**로 저장한다. 발행 후 내용을 덮어쓰지 않는다.
+- 환경별 활성 포인터(예: STG/PROD)가 버전을 가리킨다. Publish와 rollback은 이 포인터 변경으로 수행한다.
+- API/CDN은 활성 포인터와 버전 문서를 제공한다. 버전 URL은 오래 캐시할 수 있고, 활성 포인터는 짧은 TTL 또는 재검증 가능한 ETag 정책을 사용한다. 구체 TTL은 운영 요구와 CDN 특성에 맞춰 확정한다.
+- 앱은 새 페이지 진입·새로고침 시 활성 버전을 확인한다. 포인터 전환과 CDN 전파 사이의 지연을 운영 반영 시간에 포함해 기록한다.
+- `@company/ui` 버전과 Theme 버전은 별개다. Publish 기록에는 검수한 패키지 버전 및 운영 앱의 최소 지원 계약 버전을 함께 남긴다.
+
+## 4. Rollback 절차
+
+1. 장애 범위, 현재 활성 Theme 버전, 직전 정상 버전, 영향 앱을 확인한다.
+2. 직전 정상 버전의 계약 호환성을 확인하고 운영 활성 포인터를 해당 **기존 불변 버전**으로 되돌린다.
+3. API/CDN에서 활성 포인터와 문서가 일치하는지 확인한다. 필요한 경우 포인터 캐시를 갱신하고 전파 시간을 관찰한다.
+4. 새 페이지 진입·새로고침에서 실제 앱의 시각 결과와 적용 버전을 확인한다. fetch/검증 오류에는 기본 Theme fallback이 동작하는지 확인한다.
+5. 사고 기록에 원인, 시작·복구 시각, 영향 범위, 후속 조치를 남긴다. 문제가 있는 버전을 덮어써서 복구하지 않는다.
+
+이미 열려 있는 탭은 초기 운영 정책상 즉시 교체되지 않는다. 즉시 전환이 필요한 서비스가 확인되면 갱신 신호와 탭 동기화를 별도 설계한다. 활성 포인터나 CDN이 일시적으로 실패하면 앱은 검증되지 않은 값을 적용하지 않고 기본 Theme을 유지한다.
+
+## 5. 단계별 운영 도입
+
+| 단계 | 운영 방식 | 필수 증거 |
+|---|---|---|
+| 현재 구현 | compiled dist build/export 패키지·JSON Theme/URL Loader/Apply·Designer Preview·Theme-only artifact. Registry publish 이력은 ZIP 검증 범위 밖; 운영 CDN Publish 미구현 | JSON/Runtime/Default parity/레이아웃 및 URL 실패 fallback 검증 |
+| MVP 서비스 도입 | 구현된 패키지 빌드·로컬 Theme JSON·Storybook Preview를 서비스 앱에 연결하고 수동 검증. Production Publish 없음 | 동일 패키지 컴포넌트의 override/fallback, 새로고침 확인 |
+| 운영 기반 | Registry, 불변 버전, 검증 API, 승인 기록, 환경별 활성 포인터, API/CDN, 롤백 절차 | STG→PROD 발행과 이전 버전 복귀의 실제 앱 검증 |
+| 운영 확장 | Theme Admin, 역할별 권한, 감사 로그, 자동 시각·접근성 검사, 관측 | 승인·배포·복구 이력과 서비스별 적용 버전 추적 |
+
+Admin 없이 시작하더라도 Publish를 단순 파일 덮어쓰기나 디자인 툴 자동 직결로 만들지 않는다. 운영 기반 단계에서는 최소한 검증, 불변 버전, 승인, 활성화, 롤백을 갖춘다.
+
+## 6. 단계별 책임과 산출물
+
+| 단계 | 담당과 산출물 |
+|---|---|
+| Design System 구현 | **디자인팀**이 Token 의도·값, 컴포넌트와 계약 변경, 기본 Theme, Storybook·Preview 검수, `@company/ui` 패키지 버전을 담당 |
+| Theme 운영·발행 | **디자인팀**이 서버 검증, 불변 버전 저장, 승인 기록, 환경별 활성화, API/CDN·롤백을 담당 |
+| 서비스 적용 | **개발팀**이 패키지 업데이트, Theme ID 선택, Loader와 fallback, 앱 통합 검증을 담당 |
+
+디자인팀은 Design System 구현과 Theme 운영을 함께 수행한다. 표는 조직 분리가 아니라 작업 단계를 구분한다. 같은 사람이 여러 단계를 수행할 수 있으며, 단계마다 변경 내용·검수 결과·승인·반영 버전을 남긴다. 운영 시작 전 각 단계의 실제 담당자와 승인자를 정하고, 디자인 승인만으로 운영 활성화가 자동 실행되는지는 디자인팀의 권한 정책에서 결정한다.
+
+## 7. 운영 체크리스트
+
+### 컴포넌트 릴리스
+
+- [ ] 변경이 컴포넌트/API/기본 CSS 규칙/계약 경로인지 분류했다.
+- [ ] 관련 Story와 패키지 공개 API를 갱신하고 접근성·주요 상태를 확인했다.
+- [ ] 패키지 버전을 발행하고 앱별 업데이트·테스트·배포를 기록했다.
+- [ ] 영향 Theme 문서의 스키마/Token 호환성을 확인했다.
+
+### Theme Publish
+
+- [ ] Git의 Theme 초안 변경과 운영 Publish를 구분하고, 기존 Semantic allowlist 값만 발행 대상으로 검증했다.
+- [ ] 실제 컴포넌트 Storybook Preview와 STG 앱에서 검수했다.
+- [ ] 승인자·변경 내용·호환 패키지 버전·이전 활성 버전을 기록했다.
+- [ ] 새 불변 버전을 저장하고 운영 활성 포인터를 전환했다.
+- [ ] API/CDN 응답과 새로고침한 운영 앱의 적용 버전·fallback을 확인했다.
+- [ ] 필요 시 이전 버전으로 되돌릴 수 있는 포인터와 절차를 확인했다.
diff --git a/docs/guidelines/테마-토큰-가이드.md b/docs/guidelines/테마-토큰-가이드.md
new file mode 100644
index 0000000..ba9390a
--- /dev/null
+++ b/docs/guidelines/테마-토큰-가이드.md
@@ -0,0 +1,310 @@
+# Theme & Token Architecture
+
+## AI Theme 기본 적용 정책 (2026-10-07 사용자 확정)
+
+사용자가 별도로 "테마를 적용해줘", "Semantic Token을 사용해줘"라고 요청하지 않아도 모든 AI 신규·수정 UI는 Theme을 기본 적용한다. Theme은 Component 탐색·설계 단계부터 포함되는 구현 조건이다. 전체 구현 순서는 [AI/Component 구현 원칙](shadcn-기반-구현-원칙.md)을 따른다.
+
+- 설계 계층은 **Primitive → Semantic → Component Mapping**을 유지한다.
+- 값 선택 순서는 **Existing Semantic Token → 해당 Existing Component Token → Existing CSS Variable → 필요한 경우 최소 Semantic 확장**이다. 이는 탐색 순서이며 Component Mapping 계층을 제거하거나 다른 Component의 내부 Token을 직접 공유하는 규칙이 아니다.
+- 기존 Token이 있는 색상·spacing·radius·typography·값을 먼저 고정값으로 작성하지 않는다. 같은 Token을 여러 파일에 중복 정의하지 않는다. 정의되지 않은 속성은 기존 shadcn 기본 구현과 구조적 값의 계약을 유지하고 임의 Token을 양산하지 않는다.
+- 특정 Reference 색상을 그대로 재현하라는 요청에도 먼저 의미가 맞는 기존 Theme / Semantic Token에 연결한다. 정확한 값이 기존 Theme과 다르면 Theme 값 변경의 필요성과 영향을 확인한다. 독립 Reference 검증 표현은 Story 범위와 Production Theme 대상 여부를 먼저 확인하고 예외 사유를 기록한다.
+
+```css
+/* 금지: UI에서 Theme 색상을 고정 */
+.status { color: #00C896; }
+/* 기존 의미에 맞는 Token 연결 예: 실제 진행 control 색 역할일 때 */
+.status { color: var(--hm-sem-state-active); }
+```
+
+위 예는 상태 역할이 실제로 일치할 때만 적용한다. Dashboard 업무 Status는 기존 mapping을 먼저 확인하며 모든 업무 상태를 Control Active에 합치지 않는다. 문서의 Token·색상 예시는 현재 코드/계약과 대조하고 존재하지 않는 Token을 실제 값처럼 사용하지 않는다.
+
+### Theme 사용과 Theme Source 수정
+
+| 작업 | 기본 처리 |
+|---|---|
+| 기존 Token / CSS Variable을 UI에서 사용 | 별도 승인 없이 기본 적용 |
+| `themes/default.json`, Primitive / Semantic 값 자체 변경 | 요청 충족에 필요한 명시적 사유와 영향을 확인한 뒤 진행 |
+| 새 Semantic / 공개 Runtime Token 추가 | 기존 계약으로 해결 불가능한 경우 최소 확장; 소비처·fallback·호환성 및 package 변경 범위 확인 |
+
+Theme 적용 요청을 Theme Source 수정 허가로 해석하지 않는다. UI를 연결하기 위해 Default/Primitive 값을 임의 변경하지 않는다. Color Source of Truth는 `themes/*.json`이며 생성된 fallback CSS/데이터를 별도 원본처럼 수동 수정하지 않는다.
+
+### Runtime과 독립 fallback
+
+```text
+themes/*.json
+→ Runtime Theme Loader
+→ CSS Custom Properties
+→ Semantic
+→ Component Mapping
+→ UI
+```
+
+앱 초기 CSS에서 기존 `@hm-design/ui/theme.css` 적용을 확인하고, Theme 주입이 없으면 HM Default를 사용한다. 이미 적용된 Theme 환경과 공개 Runtime API를 재사용하며 별도 Theme 엔진을 만들지 않는다. Global / Scoped / Portal 경계와 partial / invalid / cleanup 계약은 [Runtime Theme](runtime-theme.md)를 따른다.
+
+기존 공개 계약이 지원하는 color-only 변경은 Theme JSON만 별도 배포해 반영할 수 있어야 하며 UI package 재배포를 요구하지 않도록 Component에 값을 고정하지 않는다. 새 Token·CSS 규칙·Runtime 계약 변경은 package 변경이며 Theme JSON만으로 처리할 수 없다. 실제 배포 경로는 [Theme delivery](theme-delivery.md)를 따른다.
+
+Primary와 On Accent는 독립 fallback을 가진 sibling Semantic이다. Primary override가 On Accent를 변경하게 만들거나 둘을 alias하지 않는다. Active / Focus / Destructive 및 Global / Scoped의 기존 독립성도 유지한다. 같은 Default 값이라는 이유로 fallback을 합치거나 새 상호 의존성을 만들지 않는다.
+
+Theme 미적용 prototype / 독립 POC 등의 예외는 사용자의 명시적 요청과 기존 시스템에 영향 없는 별도 범위가 있을 때만 [AI 구현 예외 기준](shadcn-기반-구현-원칙.md#10-명시적-예외)에 따라 적용한다. 이 확정 정책은 아래 과거 예시의 상충 문구보다 우선한다.
+
+## 목적
+
+HMDesignSystem은 shadcn/ui를 기반으로 하며 하나의 HM 기본 테마를 운영한다.
+
+HM Default는 기본 제공 Theme preset이다. 외부 서비스 Theme는 같은 공개 Runtime 계약을 사용해 값만 교체한다. Theme selector UI, Light/Dark 엔진은 만들지 않는다. 실제 계약/API와 scope 정책은 [Runtime Theme](runtime-theme.md)를 따른다.
+
+디자인 변경 시 가능하면 React 컴포넌트 코드를 수정하지 않고 Theme / Token CSS 수정만으로 반영할 수 있는 구조를 유지한다.
+
+---
+
+## 기본 구조
+
+HMDesignSystem의 스타일 값은 기본적으로 다음 구조를 따른다.
+
+```text
+Primitive
+→ Semantic (공통 Theme 역할)
+→ Component Mapping Token
+→ Component
+```
+
+컬러 Token은 Primitive → Semantic → Component Mapping의 3계층으로 구분한다. 공통 Theme에는 typography/radius/geometry도 포함하며, 선택적 공개 palette 사용과 컴포넌트 고유 geometry는 현재 구현 계약을 따른다.
+
+---
+
+## Global Theme Token
+
+여러 컴포넌트에서 공통으로 사용하는 디자인 정책을 관리한다.
+
+주요 관리 대상:
+
+- Color
+- Typography
+- Radius
+- Shadow
+- Control Height
+- 공통 Spacing
+- 공통 상태 표현
+
+현재 HM 공통 Token 예(컬러 원본은 `themes/default.json`, 아래 CSS는 생성 결과의 일부):
+
+```css
+:root, [data-hm-theme] {
+  --hm-sem-action-primary: var(--hm-color-primary);
+  --hm-sem-bg-surface: var(--hm-color-surface-default);
+  --hm-sem-stroke-input-default: var(--hm-color-border-control);
+  --hm-radius-input: var(--hm-radius-control-md);
+}
+```
+
+공통 디자인 정책이 변경되는 경우 Global Theme Token을 수정하여 관련된 여러 컴포넌트에 함께 반영할 수 있어야 한다.
+
+---
+
+## Component Mapping Token
+
+각 컴포넌트는 공통 Theme 역할을 Component Mapping Token을 통해 사용한다.
+
+예:
+
+```css
+--hm-button-radius: var(--hm-radius-button);
+--hm-input-radius: var(--hm-radius-input);
+--hm-select-radius: var(--hm-radius-input);
+
+--hm-input-border-color: var(--hm-sem-stroke-input-default);
+--hm-select-border-color: var(--hm-sem-stroke-input-default);
+--hm-card-border-color: var(--hm-sem-stroke-input-default);
+```
+
+이 구조를 통해 공통 변경과 개별 변경을 모두 지원한다.
+
+예를 들어:
+
+```css
+--hm-radius-input: 6px;
+```
+
+로 변경하면 이를 사용하는 Input, Select 등이 함께 변경된다. Button radius는 별도 Mapping을 따른다.
+
+반대로 특정 컴포넌트만 변경해야 할 경우:
+
+```css
+--hm-input-radius: 8px;
+```
+
+처럼 Component Mapping Token만 변경할 수 있다.
+
+---
+
+## Component 적용 원칙
+
+컴포넌트 내부에는 실제 색상값이나 공통 디자인 값을 가능한 직접 작성하지 않는다.
+
+피해야 하는 예:
+
+```tsx
+className="bg-[#2563eb] border-[#d1d5db] rounded-[8px]"
+```
+
+대신 Theme / Component Mapping Token을 CSS selector에서 사용한다.
+
+예:
+
+```css
+[data-slot="input"] {
+  border-color: var(--hm-input-border-color);
+  border-radius: var(--hm-input-radius);
+}
+```
+
+shadcn의 기존 구조와 CVA variant 구조는 가능한 유지한다.
+
+HMDesignSystem을 위해 shadcn 컴포넌트를 완전히 별도 구조로 재작성하지 않는다.
+
+---
+
+## 공통화 기준
+
+현재 값이 같다는 이유만으로 무조건 하나의 Component Token으로 합치지 않는다.
+
+반대로 모든 값을 컴포넌트별 Token으로 만들지도 않는다.
+
+판단 기준은 다음과 같다.
+
+### Global Theme Token
+
+여러 컴포넌트에서 동일한 디자인 정책으로 함께 변경되어야 하는 값
+
+예:
+
+- 기본 Border Color
+- 기본 Radius
+- Primary Color
+- Control Height
+- 기본 Typography
+
+### Component Mapping Token
+
+특정 컴포넌트에서 향후 독립적으로 변경될 가능성이 있는 값
+
+예:
+
+- Button Primary Background
+- Input Border
+- Dialog Background
+- Checkbox Checked Color
+
+---
+
+## State 관리
+
+실제로 존재하는 상태에 대해서만 Token을 구성한다.
+
+Control Active, Persistent Selected Surface, Navigation Current/Open은 서로 구분한다. Focus는 Active와 sibling Semantic이고 GNB/LNB는 contextual navigation focus 예외를 유지한다. Invalid는 Destructive border, Invalid + Focus는 Destructive border + Focus indication이다. 컴포넌트별 적용 범위는 해당 Component/Pattern 문서와 아래 HM Token 연결 절을 따른다.
+
+예:
+
+- default
+- hover
+- active / pressed
+- focus
+- selected / checked
+- disabled
+- error / invalid
+
+size × variant × state × property 형태로 무조건 세분화하여 Token 수를 늘리지 않는다.
+
+실제 디자인 차이가 있는 경우에만 분리한다.
+
+---
+
+## 단일 Theme 원칙
+
+HM Default preset은 하나이며 Light/Dark preset이나 사용자 Theme selector는 없다. 공개 Runtime API는 동일 계약의 외부 값과 독립 Scoped override를 지원한다. 아래 제한은 전환 UI/제품별 Theme catalog를 새로 설계하지 않는다는 의미이며 구현된 Global/Scoped 적용을 금지하지 않는다.
+
+현재 필요하지 않은 구조:
+
+- ThemeProvider 기반 테마 전환
+- Light / Dark Theme Switching
+- 별도 Multi Theme 전환 UI/catalog
+- 별도 Multi Brand catalog
+- 사용자 Theme Selector
+- Runtime Theme Selector
+
+향후 확장은 가능하게 유지하되, 미래 가능성을 위해 현재 구조를 복잡하게 만들지 않는다.
+
+---
+
+## 작업 원칙
+
+새로운 컴포넌트를 추가할 때 다음 순서로 판단한다.
+
+1. 기존 Global Theme Token으로 표현 가능한지 확인
+2. 공통 디자인 정책이라면 기존 Global Theme Token 재사용
+3. 독립 변경 가능성이 있다면 Component Mapping Token 추가
+4. 컴포넌트에는 실제 디자인 값을 직접 작성하지 않음
+5. Storybook에서도 실제 소비 프로젝트와 동일한 Component API 사용
+
+HMDesignSystem의 핵심 원칙은 다음과 같다.
+
+**공통 디자인 정책은 Theme Token 하나를 수정하여 관련 컴포넌트에 함께 반영할 수 있어야 한다.**
+
+동시에:
+
+**특정 컴포넌트만 변경해야 할 경우 Component Mapping Token을 통해 독립적으로 override할 수 있어야 한다.**
+
+---
+
+## 현재 구현 기준
+
+### Token 이름과 위치
+
+위 예시의 Token 이름은 개념 설명용이다. 외부 ui_viz Reference (ZIP 미포함, 읽기 전용)는 초기 디자인 참고 자료다. 현재 Production 코드와 실제 Storybook을 1차 기준으로 Component/Pattern 문서의 HM 결정과 대조한다. 실제 저장소 기준은 다음과 같다.
+
+| 계층 | 위치 | 이름 |
+|---|---|---|
+| Primitive | `packages/ui/src/theme/primitives.css` | `--hm-<family>-<step>` — ui_viz Primitive 이름 그대로 |
+| 공통 Theme (Global/Semantic) | `packages/ui/src/theme/default.css` | `--hm-color-*`, `--hm-radius-*`, `--hm-control-height-*`, `--hm-font-*`, `--hm-sem-*` |
+| shadcn/Tailwind adapter | `default.css` 하단 | `--primary`, `--border`, `--radius` 등을 HM Token에 연결 |
+| Component Mapping | `packages/ui/src/theme/<component>.css` | `--hm-<component>-<속성>` |
+
+- **Primitive**: ui_viz와 다른 이름을 만들지 않고 변환 대응표도 두지 않는다. ui_viz에 Primitive로 등록되지 않은 값(예: Button 범위 Component 값)은 Primitive로 올리지 않는다.
+- **Component Mapping**: ui_viz에 등록된 Component Token(예: `button.radius`, `button.height.md`)은 그 속성 이름을 그대로 쓴다(`--hm-button-radius`, `--hm-button-height-md`). ui_viz의 CSS 변수는 `--button-radius`처럼 접두어가 없지만, HM은 모든 Token에 `--hm-`을 붙인다. Tailwind v4의 `--color-*`·`--radius-*` 같은 theme namespace와 소비 앱 변수와의 충돌을 피하기 위해서다. ui_viz에 없는 값은 같은 형식으로 정의한다.
+- **파일**: 컴포넌트 전용 Mapping Token과 `[data-slot]` selector 스타일은 `packages/ui/src/theme/<component>.css`에 두고 `packages/ui/src/theme.css`가 import한다. 공통 값은 `default.css`에 둔다. Demo/App 페이지 스타일은 넣지 않는다. 컴포넌트 값은 Tailwind arbitrary value(`bg-[var(...)]`)가 아니라 이 CSS의 selector가 Mapping Token을 참조해 적용한다.
+- Mapping Token의 기본값은 공통 Theme Token을 참조하고(`--hm-button-radius: var(--hm-radius-button)`), 해당 컴포넌트만 따로 바꿀 수 있다.
+- **Focus Color**(`default.css`): `--hm-color-border-focus` → `--hm-sem-stroke-input-focus` → `--ring` 한 줄 체인이 일반 Focus 색(Input·Textarea·Select·Button·Checkbox·Tabs·Slider·Menubar 등)의 공통 소스다. 현재 **시험 적용값**은 Light 2(`--hm-green-light-2`, `#266651`)이며 이전 값은 `--hm-color-primary`(`#123328`)였다. 사용자 최종 확정 전이다. Semantic 값·이름, Runtime 계약과 Theme JSON 구조는 유지한다.
+  - 2026-10-06 Focus 정합: Slider Hover/Drag halo는 기존 Primary 20% / 4·6px를 유지하고, 키보드 Focus halo만 Focus Semantic 20%로 분리한다. Focus + Hover는 4px Focus, Focus + Drag는 6px Focus가 우선하며 Disabled는 후광이 없다. Range·Thumb border는 Active Semantic을 유지한다.
+  - Menubar 상위 Trigger Highlighted/Open 면은 Accent 100%를 유지하고 키보드 Focus에 Navigation Menu와 같은 3px `--ring` 50% 독립 ring을 더한다. Open + Focus는 Accent 면과 Focus ring을 함께 표시한다. Item Highlighted는 Accent 45%, Disabled는 기존 규칙을 유지한다. Navigation Menu는 변경하지 않는다. 일반 Story의 computed style로 검증하고 Designer 전용 button outline을 근거로 사용하지 않는다.
+- **Active State Semantic**(`default.css`, 2026-10-06): `--hm-sem-state-active`(→ `--hm-sem-palette-green-light-2` → `--hm-green-light-2`, `#266651`)와 `--hm-sem-on-state-active`(→ `--hm-color-text-inverse`, 흰색, 대비 약 6.8:1). Checked·Selected control·ON·Active fill을 포괄하며 Navigation/Pagination Current는 포함하지 않는다. Checkbox checked, Radio selected(border·dot), Switch on, Slider range·thumb border, Progress indicator, Calendar single selected·range start/end의 `--hm-<component>-*`가 이를 참조한다. Badge default와 Pagination current는 대상이 아니며 Primary Green(`--hm-sem-action-primary`)을 쓴다. 이 한 줄을 바꾸면 위 컴포넌트가 함께 바뀌고 Focus는 영향을 받지 않는다.
+  - Focus chain(`--hm-color-border-focus`)과 **sibling**이다. 현재 값은 둘 다 Light 2지만 의미가 다르므로 어느 쪽도 다른 쪽을 참조하지 않는다. 같은 색일 때 fill(Active)과 바깥 ring(Focus)의 형태로 구분한다.
+  - Progress는 현재 Active와 색 정책이 같아 같은 Semantic을 쓴다. 의미가 달라지면 별도 Semantic으로 분리한다.
+  - 대상 아님: Toggle / Toggle Group(on = `--accent` 면, 별도 정책), GNB·LNB·Navigation Menu current(기존 Strong Brand 언어), Error/Destructive, Button.
+  - **Persistent Selected Surface**: Toggle / Toggle Group의 Selected 및 Selected + Hover = `--accent` 100% / `--accent-foreground`(Git baseline `d101530` 매핑, 2026-10-06 원복). 아이콘은 전경을 따르고 border는 기존 default 투명 / outline input stroke를 유지한다. Active override에 영향받지 않고 Accent override를 따른다. Focus override는 별도 ring만 바꾼다.
+  - Color 역할 정리: Hover / Soft surface = `--accent` 45% (Select·Command·Combobox·Menu Item highlighted, Calendar hover·range middle, Pagination hover, Table row hover·selected) / Persistent Selected Surface = `--accent` 100%(Toggle·Toggle Group) / Menubar Top Trigger Highlighted·Open 및 Navigation Menu Trigger·Open = `--accent` 100% + On Accent / Active Control fill = `--hm-sem-state-active`(위 적용 대상) / Focus = Focus chain / Strong Brand·Navigation·Badge default·Pagination current = Primary Green(`--hm-sem-action-primary`, `#123328`) / Error = Destructive.
+  - Runtime 공개 계약(`packages/ui/src/theme/contract.ts`)에 Active/on Active를 포함했다. `src/theme/preview.ts`는 패키지 Runtime API의 호환 어댑터다.
+- **Floating Surface Semantic**(`default.css`): `--hm-sem-floating-background|border-width|border-color|radius|shadow`. Dropdown Menu·Context Menu·Popover·Hover Card·Menubar content·Navigation Menu panel의 `--hm-<component>-*`가 이를 참조한다. Toast(Sonner)는 notification surface라 이를 쓰지 않고 `--hm-toast-*`를 따로 둔다(Component Token은 유지하며 컴포넌트별 override 가능). Date Picker·Combobox는 Popover를 조합하므로 별도 mapping이 없다. Tooltip(어두운 면)·Dialog/Alert Dialog/Sheet/Drawer(modal)·Select·Card·Command는 대상이 아니다.
+
+> **[임시 — 정리되면 삭제] 현재 코드와 위 기준의 차이**
+> - Primitive 이름: `--hm-warm-neutral-{light,mid,dark}`는 ui_viz `hm-neutral-warm-*`, `--hm-beige-light`는 `hm-neutral-beige-light`, `--hm-green-tint`(#BDDFD4)는 `hm-fg-on-green-secondary`이다. ui_viz Primitive에 없는 이름: `--hm-neutral-gray-500`(#999999, ui_viz는 `color.placeholder`), `--hm-warm-neutral-pale`(#DEDBD2, ui_viz는 Primitive 없이 `color.stroke.input.default`), `--hm-green-tone-1~4`(Button 범위 gradient 값), `--hm-warm-neutral-secondary`(#EDE8DB), `--hm-warm-neutral-muted`(#F4F1EA, 두 값은 ui_viz 문서에서 찾지 못함). Button 작업으로 ui_viz 이름 그대로 추가한 Primitive: `--hm-brown-light-2/-1`, `--hm-brown-dark-1`, `--hm-orange-light-4`, `--hm-orange-default`.
+> - Button Mapping Token은 ui_viz 이름(`--hm-button-radius`, `--hm-button-height-sm/md/lg`, `--hm-button-brand-{green,brown,orange}-{background,border}`, `--hm-button-solid-*` 등)을 따른다. Gray(`#767676`/`#5A5A5A`), Brown·Orange gradient의 일부 stop은 ui_viz가 Button 범위 Component 값으로 정의한 값이라 초기에는 Primitive 없이 `button.css`에 두었으나 현재는 `default.css`의 공개 Theme palette로 이동했다(아래 Runtime 절).
+> - `--hm-radius-button`과 `--hm-radius-input`(Input의 `--hm-input-radius`, Select의 `--hm-select-radius`가 참조)은 공통 `--hm-radius-control-md`(4px)를 참조하며 컨테이너도 같은 값을 쓴다. `--hm-radius-select`는 Select 작업 후 참조하는 곳이 없다. ui_viz는 `radius.input.default` 4px와 `radius.container.default` 4px를 값이 같아도 alias하지 않는다. ui_viz는 Button radius를 Button 범위 Component 값(`button.radius` 4px)으로 두고 다른 컴포넌트로 확대 해석하지 않는다고 적는다.
+
+### HM 값과 shadcn 기본값
+
+- ui_viz에 `Confirmed` 규격이 있는 속성 → Theme Token 적용
+- 정의가 없거나 `TBD`·`HOLD` 등 미확정인 속성 → 새 Token을 만들지 않고 shadcn 기본 구현 유지
+
+### Light / Dark
+
+현재 HM Theme Token에는 Light/Dark 구분이 없다. 하나의 HM Theme 값만 정의하며, Dark 전용 값이나 Light/Dark 분기를 추가하지 않는다. 실제 디자인 요구로 Light/Dark가 정의되면 그 시점에 Token 구조를 검토한다.
+
+
+## 2026-10-06 Runtime 구조 적용
+
+이 절과 [Runtime Theme](runtime-theme.md)가 위 초기 시제품 상태 설명보다 우선한다. 모든 Component Mapping은 기존 이름을 유지하고 Semantic / 선택적 Theme palette를 소비한다. Button의 이전 로컬 HEX는 Default preset의 공개 팔레트로 옮겼다. 외부 주입은 공개 Semantic/palette만 허용하고 Component별 Token은 입력 계약에 포함하지 않는다. Default 값과 외부 값은 같은 계약을 사용한다. Accent 45%는 내부 surface-highlight Semantic으로 공통화했다. 전체 계약과 Default 값은 [계약표](runtime-theme-contract.md), 실제 적용·제한은 [Runtime Theme](runtime-theme.md)를 참고한다.
+
+# 후속: 디자인팀 컬러 Runtime 편집 — 2026-10-06
+
+현재 Storybook의 `Theme/Designer Playground/Editor`에서 JSON URL/파일을 Preview하고 상위 컬러 17개 역할을 편집·Reset·Export/Import할 수 있다. Component Token은 직접 수정하지 않는다. 운영 컬러 원본은 `themes/default.json`/서비스 JSON이며 package fallback CSS/데이터는 생성한다. Production은 `@hm-design/ui/theme`의 URL Loader/Apply를 사용한다. Theme artifact는 UI package와 별도 배포한다. 상세 절차/제한은 [디자인팀 Theme 가이드](designer-theme-guide.md), [Theme delivery](theme-delivery.md), Runtime 적용·제한은 [Runtime Theme](runtime-theme.md)를 참고한다. 기존 디자인 정책/과거 기록은 유지한다.
+
diff --git a/docs/guidelines/프로젝트-지침.md b/docs/guidelines/프로젝트-지침.md
new file mode 100644
index 0000000..d6f23c6
--- /dev/null
+++ b/docs/guidelines/프로젝트-지침.md
@@ -0,0 +1,318 @@
+# Runtime Theme 기반 Design System 프로젝트 지침 (개정안)
+
+> 상태: 현재 하나의 Git Repository에서 UI/CENTER npm workspaces의 compiled dist build/export, JSON 컬러 원본, Global/Scoped Runtime Apply·URL Loader, 통합 Storybook/Designer JSON Preview, Theme-only artifact를 관리한다. Registry publish 이력은 테스트 ZIP 검증 범위 밖이며 실제 CDN/API/Publish pipeline은 미구현이다. 현재 구현의 운영·배포 절차는 [Theme delivery](theme-delivery.md)를 따른다.
+
+> **2026-10-07 사용자 확정 정책은 개정안 상태와 관계없이 필수 적용한다.** AI의 모든 신규·수정 UI는 사용자의 별도 지시 없이 기존 Component / Storybook Reference를 먼저 확인하고 Theme / Semantic Token과 단일 Navigation Mode를 기본 적용하며 Custom은 최소화한다. 필수 요약은 [AGENTS.md](../../AGENTS.md), 상세 구현 정책은 [shadcn 기반 구현 원칙](shadcn-기반-구현-원칙.md), Theme 정책은 [테마 토큰 가이드](테마-토큰-가이드.md), Navigation 정책은 [Navigation Single Mode Policy](navigation-single-mode.md)가 각각 담당한다.
+
+## 1. 목적과 결정
+
+사내 공통 UI는 shadcn을 **구현 기반이자 upstream 참고원**으로 사용한다. Design System 저장소에서 가져온 코드를 회사 규칙에 맞게 관리하고 `@company/ui`로 배포한다. 서비스는 shadcn 코드를 직접 가져오거나 수정하지 않고 공통 패키지를 사용한다.
+
+컴포넌트의 구조·동작·기본 스타일 규칙은 패키지 버전으로, 운영 중 바꿀 수 있는 디자인 값은 CSS Custom Properties 기반 Runtime Theme으로 관리한다. **소스와 검수 자료는 하나의 Git 저장소에서 관리하되, 배포 산출물은 `@company/ui` 패키지와 Theme 버전으로 나눈다.** Storybook은 같은 저장소의 실제 컴포넌트로 내부 검수, Theme Preview, 문서화를 수행한다. 서비스가 소비하는 배포물은 패키지와 Theme 데이터이며, Storybook 자체가 배포 API는 아니다.
+
+| 변경 경계 | 소유 대상 | 반영 경로 |
+|---|---|---|
+| 컴포넌트 코드/API·기본 CSS 규칙 | DOM, variant, state, interaction, 접근성, 구조적 layout, selector와 기본 스타일 규칙 | Design System 변경 → `@company/ui` 릴리스 → 앱 의존성 업데이트 및 배포 |
+| Runtime Theme 값 | 사전에 허용한 Semantic Token의 값 | Preview → 검증/승인 → 불변 Theme 버전 Publish → API/CDN → 앱 재방문·새로고침 시 적용 |
+| Theme 계약 | Token 이름·타입·의미, 스키마, 허용 범위 | Design System 코드 변경·릴리스, 호환성 확인 후 Theme 발행 |
+
+**이미 지원하는 Semantic Token 값만 변경할 때** Theme Publish 후 앱 재배포 없이 반영할 수 있다. Git에 CSS/JSON을 수정·커밋하는 행위만으로 운영 앱이 자동 갱신되지는 않는다. Theme Loader와 API/CDN 연결, 검증·승인·Publish가 먼저 구축되어야 한다. 새로운 Token, selector, 컴포넌트 API가 필요한 변경은 값 Publish로 처리할 수 없다.
+
+## 2. 아키텍처와 소유권
+
+```text
+shadcn upstream → HM Design System 단일 Git 저장소
+                   ├─ 컴포넌트·기본 CSS ── 패키지 릴리스(@company/ui) ──→ 개발팀 앱 업데이트·배포
+                   ├─ Semantic Theme 초안 ── 검증·승인·Publish ──────→ Theme API/CDN
+                   └─ Storybook ── 실제 컴포넌트·Theme Preview             │
+                                                                           ↓
+                                                            앱 Theme Loader → CSS 변수 적용
+```
+
+- **디자인팀 — Design System**: Token 의미와 값, 컴포넌트 디자인, shadcn 도입·업스트림 변경 검토, 컴포넌트 구현/API와 접근성, Semantic Token 계약, 기본 Theme, `@company/ui` 패키지 릴리스, Storybook 및 Preview 검수를 담당한다.
+- **디자인팀 — Theme 운영**: Theme 값 검증, 불변 버전 저장, 승인·Publish·롤백, API/CDN 제공, 캐시 및 관측을 담당한다. MVP에서는 수동 절차로 시작할 수 있다.
+- **개발팀**: `@company/ui`와 기본 CSS 사용, 서비스 앱의 Theme 식별·로딩·적용·실패 대응, 패키지 업데이트 및 앱 릴리스를 담당한다.
+
+위 항목은 조직 분리가 아니라 작업 단계와 책임의 구분이다. 같은 담당자가 여러 단계를 수행해도 각 산출물과 승인·반영 기록은 남긴다.
+
+## 3. Token 계약
+
+```text
+Primitive (설계·빌드 시 관리) → Semantic (컴포넌트 참조) → Component
+```
+
+컴포넌트는 `blue-600` 같은 Primitive나 `#2563eb`, `8px` 같은 실제 값을 직접 참조하지 않는다. Tailwind를 쓰는 경우에도 `bg-primary`의 `--color-primary` → `--primary` → `--hm-sem-action-primary` adapter 연결을 확인한다. **Runtime override는 공개 allowlist의 Semantic/Theme palette 값만** 허용한다. Primitive, 컴포넌트 전용 내부 변수, 임의 CSS selector/rule/JavaScript는 Publish 대상이 아니다.
+
+현재 allowlist는 `packages/ui/src/theme/contract.ts`의 73개 입력이다(색상 Semantic/Theme palette와 input/container radius). 정확한 이름·타입·기본값·허용 범위는 이 계약과 `runtime-theme-contract.md`를 따른다. Shadow geometry는 현재 공개 입력이 아니다. Typography와 spacing은 실제 사용처와 레이아웃 영향 검토 후 개별 등록한다. 문서에 예시가 있다는 이유로 곧바로 Runtime 허용 Token이 되지 않는다.
+
+기본 Theme은 `@company/ui`가 배포하는 CSS에 포함하고 앱이 초기 렌더 전에 로드한다. Runtime 값이 없거나 가져오기·검증에 실패해도 기본값으로 UI가 렌더링되어야 한다. 현재 Light/Dark 구분은 없으며 단일 HM Theme 값을 기준으로 한다([테마 토큰 가이드](테마-토큰-가이드.md) 참조).
+
+## 4. 변경 분류
+
+| 요청 예 | 처리 | 판단 기준 |
+|---|---|---|
+| 기존 `color.action.primary` 값 변경 | Theme Publish | 계약에 등록된 Semantic Token의 값만 변경 |
+| 기존 공개 radius 값 변경 | Theme Publish(운영 도입 후) | 허용 범위·레이아웃·접근성 검증 통과; shadow geometry는 현재 계약 밖 |
+| 새 색상 Token 이름 또는 의미 추가 | 패키지/계약 릴리스 후 Theme Publish | 구버전 앱의 호환성 확인 필요 |
+| Button DOM, icon slot, variant, loading state 변경 | 패키지 릴리스 + 앱 업데이트 | API·구조·동작 변경 |
+| Dialog 상호작용, 포커스, 접근성 변경 | 패키지 릴리스 + 앱 업데이트 | 실행 코드 변경 |
+| grid/flex 배치, display/position, animation logic 변경 | 패키지 또는 앱 코드 배포 | 디자인 값만으로 안전하게 표현할 수 없음 |
+| 앱 화면의 콘텐츠·업무 로직 변경 | 앱 배포 | Design System 바깥의 책임 |
+
+애매한 요청은 디자인팀과 개발팀이 영향 범위를 먼저 분류한다. Semantic Token이라는 이름만 붙여 레이아웃 구조나 동작을 Runtime으로 우회하지 않는다.
+
+## 5. 단일 Git Repository와 산출물 구조
+
+`HMDesignSystem`을 **하나의 Git 저장소**로 관리한다. 저장소 수와 배포물 수는 다르다. 동일 저장소의 변경이라도 컴포넌트·기본 CSS는 패키지 릴리스, 기존 Semantic Token 값은 Theme Publish, Storybook은 내부 검수용 빌드로 각각 처리한다. 개발팀의 서비스 앱은 이 저장소의 소스 파일을 직접 복사하지 않고 배포된 패키지와 Theme API/CDN을 소비한다.
+
+현재 파일 배치는 다음과 같다. Library dist 산출물과 Runtime URL Loader는 구현되어 있다. Registry publish 이력은 테스트 ZIP 검증 범위 밖이며 운영 CDN/API/Publish pipeline은 별도 도입 대상이다.
+
+```text
+HMDesignSystem/
+├─ packages/ui/src/components/ui/  # Production UI
+├─ packages/ui/src/patterns/       # 업무/Layout composition
+├─ packages/ui/src/theme/          # CSS Mapping, contract.ts, runtime.ts
+├─ packages/center-graphic/src/    # 독립 CENTER 구현
+├─ src/                           # Demo, Component/Pattern/Theme/CENTER Story
+├─ packages/*/dist/               # compiled ESM JS, 타입 선언, CSS
+├─ themes/*.json                  # 공식 Default / 서비스 partial
+├─ themes/drafts/                  # 검토용 Theme 자료
+├─ .storybook/                    # 통합 검수 환경
+├─ docs/                          # Component/Pattern/Theme 문서
+└─ package.json                   # npm workspaces 및 Demo/Storybook build
+```
+
+패키지 산출물에는 공개 컴포넌트·기본 CSS·필요한 계약만 포함하고 Story, Draft Theme, 내부 문서는 제외한다. Theme Publish는 승인된 초안을 검증해 불변 버전으로 저장하고 활성 버전을 API/CDN에서 제공하는 별도 절차다. 패키지 릴리스와 Theme Publish는 같은 저장소의 변경 이력을 참조하지만 버전·승인·롤백을 각각 관리한다. 폴더를 `packages/ui`·`apps/storybook`으로 나눌 필요가 확인되면 **동일 Git 저장소 안에서** 재배치할 수 있다.
+
+### 5.1 패키지 구성과 Storybook 통합 (구현됨 — 2026-10-02 패키지 분리)
+
+**하나의 Git 저장소 + 두 개의 독립 배포 패키지 + 하나의 통합 Storybook**을 기본으로 한다. 2026-10-02에 npm workspaces(`packages/*`)로 분리했다. `packages/ui`(`@hm-design/ui`)에 Button·Input·Select·Card·Dialog와 Theme(`src/theme/*.css`, `theme.css`, `tailwind.css`)이 있고, `packages/center-graphic`(`@hm-design/center-graphic`)은 ui-viz CENTER Web Reference(제목·정보·노선/공간·시설물)를 이식해 구현했다(기준 문서 `docs/center-graphic/README.md`). 둘은 서로 의존하지 않는다. 루트는 Storybook(`.storybook/`, `src/**/*.stories.tsx`; UI는 `Components`, CENTER는 `Center Graphic` 최상위 그룹)과 Demo(`src/App.tsx`, `src/hm-theme.css`), 컴포넌트 문서(`docs/components/`)를 유지하며 Story와 Demo는 `@hm-design/ui`를 workspace 패키지로 import한다. 두 패키지는 `private: false`이며 ESM JS·타입 선언·CSS를 compiled `dist`에서 export한다. `npm run build:packages`가 library 산출물을 생성하며 Registry publish 이력은 테스트 ZIP 검증 범위 밖이다. 소비 앱은 `@import "tailwindcss"; @import "@hm-design/ui/tailwind.css"; @import "@hm-design/ui/theme.css"`를 쓴다. UI dist에는 `fonts/`의 글꼴과 OFL이 포함되며 compiled `theme.css`는 상대 `./fonts/` 경로를 사용한다. Source `packages/ui/src/theme.css`는 `/fonts/NotoSansKR-variable.ttf`를 사용하므로 App/Storybook 개발 서버는 `public/fonts/`를 서빙한다.
+
+아래는 목표 구조다.
+
+| 패키지 | 내용 |
+|---|---|
+| `@hm-design/ui` | shadcn 기반 공통 UI 컴포넌트와 공통 Theme(디자인 Token, CSS Custom Properties, 런타임 Theme 주입) |
+| `@hm-design/center-graphic` | 서비스 공통 그래픽 리소스와 그래픽 컴포넌트(Icon, Illustration, Empty State·Loading·Status Graphic 등) |
+
+```text
+HMDesignSystem/
+├─ packages/
+│  ├─ ui/              components/ styles/ tokens/ theme/
+│  └─ center-graphic/  icons/ illustrations/ graphics/
+├─ storybook/
+└─ package.json        workspace 설정
+```
+
+- 두 패키지는 따로 설치하고 따로 버전을 올릴 수 있어야 한다. 그래픽만 필요한 프로젝트가 UI 패키지 전체를 설치하지 않도록 한다.
+- 의존성 방향: UI → Design Token / Theme, center-graphic → 자체 그래픽 리소스. `center-graphic → ui` 필수 의존은 만들지 않고, 공유가 필요하면 최소 수준의 Token만 공유한다.
+- `tokens` 또는 `theme` 패키지의 별도 분리는 규모가 커지거나 여러 제품이 테마를 독립적으로 공유해야 할 때 검토한다. 그 전에는 두 패키지로 운영한다.
+- Storybook은 하나로 통합해 UI와 Center Graphic을 함께 검수한다. 메뉴 구조는 패키지 폴더 구조와 같을 필요가 없고 검토 편의를 기준으로 한다. 컴포넌트는 §6.3의 규칙대로 대표 Story가 바로 열리는 1뎁스 항목으로 두고, Playground·Compatibility·verification Story는 기본 메뉴에서 숨긴다. Center Graphic도 같은 원칙을 따른다.
+- 다른 문서의 `@company/ui`는 `@hm-design/ui`의 자리표시자로 읽고, 이름 치환은 패키징 작업 때 한꺼번에 한다. Storybook 최상위 그룹은 CENTER 구현 시점에 `Center Graphic`만 추가했고 기존 `Components`는 이름을 바꾸지 않았다(`UI Components`로의 개명은 필요할 때 정한다).
+
+#### CENTER 규격의 적용 범위
+
+`center-graphic`은 독립 배포 패키지의 경계다. ui_viz의 CENTER 도메인 문서가 정의하는 노선, 시설물, 지도 및 관련 시각화 규격은 `center-graphic`의 구현·검증 작업에서 참조할 수 있다. 반대로 `ui`의 Button, Input, Select 같은 일반 UI 컴포넌트는 CENTER 문서를 디자인 근거로 쓰지 않는다. 따라서 CENTER 문서 참조 제한은 저장소 전체의 금지가 아니라 패키지와 작업 도메인에 따른 적용 범위 규칙이다.
+
+- `ui` 작업 → 현재 HM UI 문서·구현·대표 Story를 먼저 참조한다. 외부 ui_viz UI 자료는 제공된 경우에만 참고한다.
+- `center-graphic` 작업 → CENTER 관련 규격을 참조할 수 있다.
+- 두 패키지의 규격을 임의로 섞지 않고, 한쪽의 값을 다른 패키지의 근거로 쓰지 않는다.
+- **CENTER 작업 규칙**: 현재 Source of Truth는 `docs/center-graphic/README.md`, `packages/center-graphic/src/`의 구현·승인 asset과 `src/center/`의 대표 Story다. 외부 ui_viz는 ZIP 미포함 선택적 Reference이며 제공된 경우에만 owner 문서의 명시 상태(`CONFIRMED_CANONICAL`/`CONFIRMED_BY_DESIGN` → `PLATFORM_MAPPING` → `Candidate`/`TBD`/`HOLD`) → 승인 asset → Web Reference 구현 순서로 참고한다. 승인되지 않은 후보 SVG와 미확정값은 구현 근거로 쓰지 않는다. 개별 그래픽 수치는 `docs/center-graphic/`에 기록한다.
+
+## 6. 컴포넌트·Storybook·CSS 작업 규칙
+
+Theme Token의 계층, 매핑 방식, Runtime Theme 적용 방식은 [테마 토큰 가이드](테마-토큰-가이드.md)를 따른다. 이 절에서는 중복해서 정의하지 않는다.
+
+React 외 Runtime으로 구현·변환하는 작업은 [Runtime Portability Policy](runtime-portability.md)의 Target Runtime, 동일 Design/Theme Contract, 상대 asset 경로와 실제 실행 검증 기준을 추가로 따른다. 기존 컴포넌트·Token·Runtime Theme을 복제해 별도 Source of Truth를 만들지 않는다.
+
+Component / Pattern / Story를 구현하거나 기존 테스트 디자인을 재현할 때는 [shadcn 기반 구현 원칙](shadcn-기반-구현-원칙.md)을 먼저 적용한다. 핵심 우선순위는 **기존 `@hm-design/ui` 재사용 → 기존 Variant / Prop → 기존 Composition → shadcn → Radix Primitive → 최소 Custom 구현**이다. Behavior / Structure는 shadcn/Radix를 유지하고 Visual은 구현 시작부터 HM Theme / Token에 연결한다. Custom 구현은 해당 문서의 허용 조건을 모두 충족하고 사유·범위·Public API 영향을 기록한 경우에만 허용한다.
+
+> 패키지 초기화용 base 규칙은 `packages/ui/src/tailwind.css`, Demo 레이아웃 규칙은 `src/hm-theme.css`가 소유한다. Component CSS에는 전역 규칙을 넣지 않는다. 공개 API와 상태·규격은 각 `docs/components/` 문서와 현재 대표 Story를 따른다. Brand label의 Text Border는 두께가 `EXPERIMENTAL`이라 적용하지 않는다.
+
+### 6.1 스타일 값의 출처
+
+1. 현재 HM Component/Pattern 문서와 대표 Story에서 해당 속성의 확정 규격 및 기존 Semantic/Component Token을 확인한다.
+2. 기존 Token으로 연결한다. 외부 ui_viz는 제공된 경우에만 HM 정책과 충돌하지 않는 참고 자료로 사용한다.
+3. HM 지정값이 없으면 shadcn 기본 구현을 유지한다. 미확정 Reference 값을 확정값으로 쓰지 않는다.
+
+HM 지정값이 있는 색상, radius, control height, typography 등은 Theme Token을 사용한다. HM에서 별도 값을 지정하지 않은 hover 동작, focus 구조, 애니메이션, 아이콘 크기, 접근성 속성 등은 shadcn 기본 구현을 유지하며, 임의로 새로 정의하거나 취향에 따라 바꾸지 않는다.
+
+### 6.2 컴포넌트 구현
+
+- 구현 전에 현재 `@hm-design/ui` + shadcn 조합으로 해결 가능한지 확인하고, 가능하면 새 primitive나 유사 Component를 만들지 않는다.
+- shadcn의 기본 컴포넌트 구조를 최대한 유지한다. CVA `variant`/`size`, `data-slot`, `cn(..., className)`, Radix 구조를 특별한 이유 없이 바꾸지 않는다.
+- HM 디자인은 기존 구조 안에서 Token과 스타일 값을 연결해 구현한다. HM 스타일만을 위한 wrapper 컴포넌트를 추가하지 않는다.
+- 기존 export, props 이름, variant 구조 등 공개 API를 불필요하게 바꾸지 않는다. API를 깨는 변경은 별도 합의 후 진행한다.
+- `<Button />`, `<Input />`, `<Select />`처럼 기본 API만 사용해도 HM 기본 디자인이 적용되는 구조를 지향한다. 소비자가 `hm-button`, `hm-input` 같은 HM 전용 class를 붙여야 하는 구조는 만들지 않는다.
+- `className`은 소비 프로젝트의 스타일 확장용 API로 유지한다. 기본 디자인을 주입하는 필수 통로로 쓰지 않는다.
+- shadcn/Radix가 제공하는 controlled/uncontrolled 상태, `data-state`, ARIA, keyboard navigation, focus management, Portal, Dismiss/Escape, `asChild`와 composition 방식을 새 로직으로 대체하지 않는다.
+
+### 6.3 Storybook
+
+- Story는 실제 소비 프로젝트와 같은 Component import와 props API를 사용한다. Story 전용 class, wrapper, CSS로 컴포넌트 외형을 보정하지 않으며, Storybook에서만 정상으로 보이는 구조를 만들지 않는다.
+- hover 고정 specimen, Selected + Hover 비교, spacing guide, Token reference 같은 검수 표현을 위해 Production prop이나 Public API를 추가하지 않는다. 필요한 표현은 Story 범위에만 두고 실제 화면에는 production `@hm-design/ui` Component를 사용한다.
+- Story 배치를 위한 gap, flex, grid 스타일은 사용할 수 있지만 컴포넌트 자체의 외형을 바꿔서는 안 된다.
+- 컴포넌트가 실제 지원하는 default, variant, size, disabled 및 주요 상태를 확인한다. invalid, open 등 해당 컴포넌트에 실제로 있는 상태만 다루고, 없는 상태를 문서화를 위해 만들지 않는다.
+- Storybook은 구현 Reference Catalog이자 컴포넌트 단위의 검수와 사용법 문서화 도구다. 신규 UI 구현 전 유사 대표/PRIMARY Story를 먼저 확인한다. `Demo/App` 화면은 여러 컴포넌트를 조합한 적용 결과 확인용이며, Demo의 페이지·타일 UI를 Story의 기준으로 쓰지 않는다.
+- 컴포넌트 Story는 현재 HM 대표 Story의 공통 구조를 따른다. 컴포넌트 이름의 대표 Story 하나에 종류·크기·상태를 한 화면으로 모으고, 같은 구역을 `verification` 태그 Story(예: Roles, Sizes, Brand States)로도 둔다. `verification` Story는 메뉴와 검색에서 기본으로 숨기고(`.storybook/main.ts`의 `tags`) 직접 URL과 사이드바 태그 필터로 연다. HM 전용 Story(Playground, Compatibility)도 같은 태그로 숨긴다. 기본 사이드바에는 컴포넌트가 하위 메뉴 없는 1뎁스 항목 하나로만 보이고(대표 Story 하나만 노출되면 Storybook이 컴포넌트 항목에 합친다), 클릭하면 한 페이지에서 전체 검수 내용이 열린다. Story 이름과 순서, 행·열 구성은 현재 HM 유사 대표 Story의 공통 구성을 먼저 따른다. 외부 ui_viz Story는 제공된 경우에만 충돌하지 않는 참고로 사용한다.
+- 대표 Story의 Focus 구역은 pseudo-state 복제 대신 `play` 함수로 실제 요소에 focus를 준다(ui_viz도 Focus는 정적 specimen을 만들지 않는다). hover 같은 상태가 ui_viz에 없으면 `.storybook/pseudo-states.ts`를 쓰지 않는다. 구역 배치 helper는 `src/components/story-board.tsx`의 `StateBoard`를 쓴다.
+- hover, pressed 같은 pseudo state는 Storybook이 `:hover`/`:active` 규칙을 `data-sb-hover`/`data-sb-active` 규칙으로 복제해 고정한다(`.storybook/pseudo-states.ts`). 복제만 하고 값을 새로 정의하지 않으므로 실제 디자인을 보정하는 용도로 쓰지 않는다. Story에서는 `data-sb-*` 속성만 붙인다.
+- ui_viz에서 값이 `TBD`인 상태(예: Button Focus)는 별도 specimen을 만들지 않고 키보드로 확인하는 안내만 둔다. ui_viz에 없는 상태(예: Button `aria-invalid`)와 `REFERENCE_ONLY` 항목은 검수 Story에 넣지 않는다. shadcn 호환 API는 `Compatibility` Story로 분리한다.
+
+### 6.4 CSS 범위
+
+- 컴포넌트 스타일(배포 대상)과 Demo/App 전용 스타일을 파일 단위로 분리한다.
+- 배포 대상 CSS에는 소비 프로젝트 전체에 영향을 줄 수 있는 전역 스타일을 가능한 한 넣지 않는다. `html`, `body`, `*`, 일반 태그 selector를 이용한 margin, font-family, reset, scroll behavior 등은 Demo/App 영역에서 관리한다.
+- 컴포넌트 스타일은 해당 컴포넌트 범위(`data-slot` 등) 안에서 동작하게 한다.
+- 컴포넌트 CSS에 container, hero, page grid, 화면 바깥 margin 같은 페이지 레이아웃 스타일을 넣지 않는다. 배치는 소비 프로젝트 또는 Demo/App이 맡는다.
+
+### 6.5 Light / Dark 기준
+
+현재 HM Theme에는 Light/Dark별 디자인 값이 정의되어 있지 않다. HM Token이나 HM 전용 스타일을 추가할 때 새로운 `dark:` 분기나 Dark 전용 Token을 만들지 않는다.
+
+기존 shadcn 코드의 컴포넌트 `dark:` 클래스와 `tailwind.css`의 dark variant는 HM 요구사항이 없는 한 정리 목적으로 제거하지 않는다. 중복 root/dark 색상 preset은 Runtime 정합성 작업에서 이미 제거했으며 HM Dark preset을 새로 추가하지 않는다.
+
+### 6.6 작업 방식
+
+- 요청하지 않은 전체 리팩토링을 하지 않는다. 변경 범위는 요청된 컴포넌트와 직접 필요한 범위로 제한한다.
+- 새 패턴은 전체에 적용하기 전에 기준 컴포넌트에서 먼저 검증하고, 검증된 방식만 다른 컴포넌트로 확장한다.
+- 기존 구조가 정상 동작하면 취향이나 코드 스타일 선호만으로 바꾸지 않는다.
+- 새 abstraction, wrapper, helper, 스타일 구조를 만들기 전에 기존 프로젝트 패턴을 재사용할 수 있는지 먼저 확인한다.
+- Multi Theme, Multi Brand, Dark Mode 등 요구되지 않은 미래 요구사항을 가정해 현재 구조를 과도하게 설계하지 않는다.
+
+### 6.7 ui_viz 규격의 구현 (Button에서 검증된 방식)
+
+- 이 절의 ui_viz 설명은 초기 Button/Input/Select 도입 근거다. 현재 정합성 감사는 Production 코드와 실제 Storybook을 1차 기준으로 문서와 대조한다. ui_viz `Confirmed`와 과거 보고서는 참고 근거이며 이후 HM 결정은 §6.9 및 Component/Pattern 문서를 따른다.
+- 구현 근거는 `Confirmed`뿐이다. `Candidate`, `Temporary`, `TBD`, `HOLD`, `REVIEW VALUE`, `EXPERIMENTAL`, `Known Deviation`은 확정값으로 쓰지 않는다. 컴포넌트마다 `docs/components/<name>.md`의 최신 Decision 절을 먼저 확인하고(Button은 §1.1 D-093), 본문에서 "대체"로 표시된 이전 값과 `governance/current-rules.md` 같은 요약은 근거로 쓰지 않는다. `_local/`, `generated/`, `assets/`(대부분 CENTER)는 규격 근거로 읽지 않는다. `ui` 작업에서는 CENTER 문서의 값을 쓰지 않는다(`center-graphic` 작업의 범위는 §5.1 참고).
+- ui_viz의 Web 구현 요소(`.button-*` 같은 class, DOM 구조, `is-hover` 같은 강제 상태 class, Source Class Mapping)는 복사하지 않는다. 규격의 의미(역할, treatment, 값, 상태)만 가져와 `ui_viz 규격 → shadcn Component API → HMDesignSystem 구현` 순서로 대응시킨다.
+- 이름이 같다는 이유로 대응시키지 않는다. 소비자가 고르는 디자인 축인지, 내부 state인지, Token으로 풀 값인지, selector 수준의 상태인지로 판단한다. 예: ui_viz Button의 `secondary`는 Brown 브랜드 역할이며 shadcn `secondary`와 의미가 다르다. ui_viz가 역할과 treatment 두 축을 두는 컴포넌트는 두 축을 각각 prop으로 나눈다. Button은 `variant`가 역할(`primary`/`secondary`/`modify`/`destructive`/`cancel`), `appearance`가 treatment(`brand`/`solid`/`outline`), `size`가 `sm`/`default`/`lg`(= ui_viz Small/Medium/Large; ui_viz가 `default`를 Medium 별칭으로 정의)이며 기본값 `<Button />`은 primary + brand다. `data-variant`는 역할, `data-appearance`는 treatment이다.
+- ui_viz에 정의된 역할·treatment가 shadcn에 없으면 variant를 추가할 수 있다. 이는 기존 API를 깨는 것이 아니다. 기존 shadcn 이름은 별칭으로 유지한다(Button: `default` = primary, `outline` = primary + outline; ui_viz도 `outline`을 별칭으로 유지한다). ui_viz에 없는 shadcn variant(`ghost`, `link`)와 size(`xs`, `icon*`)는 삭제하지 않고 shadcn 기본 스타일 그대로 둔다. 이 호환 variant에는 `data-appearance`를 붙이지 않아 HM 스타일이 적용되지 않는다.
+- 스타일 적용 구조는 다음과 같다.
+  - **CVA(`ui/<component>.tsx`)**: shadcn의 구조·레이아웃·접근성 class(focus, invalid ring 포함)를 유지한다. HM 규격이 정의한 동작(예: Button의 transition 없음, 눌림 이동 없음, disabled 커서)의 shadcn class는 HM variant에서 빼고 shadcn 호환 variant에만 남긴다. size처럼 호환 variant와 공유하는 축은 CVA 값을 그대로 두고 theme CSS가 HM 요소에만 덮어쓴다.
+  - **`packages/ui/src/theme/<component>.css`**: 해당 컴포넌트의 Mapping Token(`--hm-<component>-*`)과 HM 규격 스타일(색, radius, height, padding, typography, 상태 표면)을 둔다. `[data-slot="<component>"]`와 그 컴포넌트에 실제 있는 `data-variant`/`data-size` 등 data attribute, pseudo state로 선택한다. 모든 컴포넌트가 `data-variant`를 가져야 하는 것은 아니다. Demo/App 페이지 스타일은 넣지 않는다. 이 파일은 `packages/ui/src/theme.css`가 import하고, Demo 스타일은 `src/hm-theme.css`에 둔다.
+  - theme CSS가 `box-shadow`를 선언할 때(bevel, 상태 표면) 끝에 `var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000)`를 포함한다. shadcn의 focus·invalid ring이 `box-shadow`라서, 포함하지 않으면 theme CSS가 ring을 가린다. 이 변수는 `:root` Token이 아니라 요소의 선언에서 직접 참조해야 한다.
+  - 소비자는 `variant`/`size` 같은 API만 고르고 HM 전용 class를 붙이지 않는다. `className`은 확장용이다.
+- ui_viz가 `Confirmed`로 정의한 상태 표현은 그 범위에서 shadcn 기본 시각 스타일을 대체할 수 있다. ui_viz에 정의가 없거나 미확정인 동작과 상태(예: Button의 Focus는 전역 `TBD`, `aria-invalid`는 정의 없음)는 shadcn 기본 구현을 유지하며 HM이 임의로 만들지 않는다.
+- ui_viz가 컴포넌트 안에 Field(Label, Required 별표, Helper/Error 문구)를 포함해도 shadcn 컴포넌트에 wrapper를 추가하지 않는다. Input은 입력 컨트롤만 담당하고 Label·문구는 소비 조합이다. Story와 Demo는 일반 요소에 shadcn Token 유틸(`text-muted-foreground`, `text-destructive`)과 ui_viz 수치(Label 14/20/500, 문구 12/18 또는 Error 11/18, field gap 8)를 맞춰 조합한다. Field/Label 컴포넌트 도입은 별도 결정이다.
+- ui_viz prop 이름이 native HTML 속성과 겹치면(Input `size`) ui_viz 이름을 쓰고 native 속성을 대체한다. 단 native 속성이 CSS 폭과 무관해 쓰임이 없을 때만 그렇게 한다. Input은 `size="small" | "medium" | "large"`이고 생략하면 ui_viz 기본값 Large(42px)다. 기본값은 컴포넌트마다 ui_viz 문서를 따르므로 Button의 `default`(= Medium)와 같다고 가정하지 않는다.
+- 상태는 컴포넌트에 이미 있는 native selector(Input: `:focus-visible`, `[aria-invalid="true"]`, `:disabled`, `[readonly]`)로 적용하고 새 `data-state`를 만들지 않는다. ui_viz가 "shadow·glow 없음"을 Confirmed로 정의한 상태(Input Focus·Error)는 TSX에서 shadcn ring class를 빼고 CSS에서 `box-shadow: none`을 선언한다. ui_viz에 정의가 없어 shadcn ring을 유지하는 Button과 구분한다.
+- ui_viz에서 `Temporary`인 값은 구현하지 않고 shadcn 기본값을 유지한다. 같은 상태에서 Confirmed인 값(Input Disabled 면 White)만 덮어쓴다. 단 Input Disabled opacity `.6`은 ui_viz에서는 `Temporary`이지만, **2026-10-02 사용자 결정**(Select 작업에서 확정된 Disabled 시각 intent와의 정합)으로 Input과 Select에 한해 `0.6`으로 확정되었다. 이전의 "`.6` Temporary → 미적용" 판단은 이 결정으로 superseded 되었다. 전역 Disabled opacity Token으로 승격하지 않으며, Button 등 다른 컴포넌트는 각자의 Confirmed 규격 또는 별도 사용자 결정을 따른다.
+- Radix 기반 컴포넌트(Select)는 Radix가 제공하는 상태 속성(`data-state`, `data-placeholder`, `data-highlighted`, `data-side`)과 `:disabled`로 상태를 적용하고, `data-size` 외에 HM 전용 상태 속성이나 상태 prop을 만들지 않는다. size는 DOM 요소가 있는 Trigger에 두며, ui_viz 값(Select: `medium` | `large`, 기본 `large`)이 shadcn 값(`sm` | `default`)을 대체한다.
+- Overlay(Content)는 Radix positioning을 유지하고 ui_viz가 정한 시각 관계만 prop 기본값과 CSS로 맞춘다(Select: `sideOffset` -1, 폭은 `--radix-select-trigger-width`, 연결된 윤곽). ui_viz 윤곽과 충돌하는 shadcn 장식(ring, 4px 간격 translate)은 제거하고, ui_viz에 값이 없는 그림자는 shadcn 기본(`shadow-md`)을 유지한다.
+- 상태 색이 `Temporary`여도 상태를 어떻게 표현하는지(Select: Selected는 Hover와 같은 배경 면, check icon·border 없음)가 Confirmed이면 표현은 구현하고 색은 shadcn Token(`accent`)을 그대로 쓴다. ui_viz에 없는 shadcn 장식(Select의 check indicator)은 제거한다. ui_viz에 정의가 없는 상태(Select Error)는 shadcn `aria-invalid` 스타일을 유지하고 theme CSS가 그 색을 덮지 않게 한다.
+- ui_viz가 glyph를 Source로 제공하면(Select indicator 18×18) shadcn의 lucide 아이콘을 그 glyph로 바꾸고 색은 Mapping Token으로 둔다. ui_viz가 사용자 결정으로 확정한 값은 그 컴포넌트에 한해 구현한다(Select·Input Disabled opacity .6, 위 항목 참조). 같은 값이 다른 컴포넌트에서 `Temporary`여도 그쪽으로 확대하지 않는다.
+- ui_viz에서 가져온 값에는 출처 주석을 한 줄 남긴다. 문서 경로, 절 또는 Decision, 상태만 적고 원문을 복사하지 않는다.
+
+```css
+/* ui_viz: docs/components/button.md §1.1 D-087 — Confirmed */
+```
+
+### 6.8 컴포넌트 문서 (`docs/components/`)
+
+각 UI 컴포넌트의 현재 최종 규격, API, Token, 상태 및 사용자 결정은 이 저장소의 `docs/components/<component>.md`를 기준으로 한다(현재 Component 문서와 Field 소비 가이드 포함). 이 지침은 프로젝트 공통 원칙만 두고, 컴포넌트별 수치와 API 목록은 누적하지 않는다. §6.7의 Button·Input·Select 예시는 원칙을 설명하기 위한 것이며 값의 기준은 컴포넌트 문서다.
+
+| 문서 | 담는 내용 |
+|---|---|
+| `프로젝트-지침.md` | 프로젝트 공통 원칙, 작업 순서 |
+| `테마-토큰-가이드.md` | Token 구조 공통 원칙(Primitive → Semantic → Component Mapping) |
+| `docs/components/<component>.md` | 컴포넌트 고유 규격, API, 상태, 실제 Token 목록, 사용자 확정 결정, 보류 항목 |
+| 외부 ui_viz Reference (ZIP 미포함) | 제공된 경우에만 참고하는 원본 규격과 근거. 현재 HM 구현·정책을 대체하지 않는다 |
+
+- HM이 따로 확정한 값 때문에 구현이 ui_viz `Temporary`와 달라지면 그 결정을 컴포넌트 문서의 "사용자 확정 결정"에 날짜와 함께 기록한다. 컴포넌트 문서의 사용자 결정은 ui_viz의 Temporary·TBD보다 우선한다.
+- overlay 컴포넌트(Dialog)는 StateBoard를 쓰지 않고 트리거로 실제 Radix를 여는 대표 Story와 `defaultOpen`으로 열린 verification Story를 둔다. Radix의 Portal·focus·ARIA·Escape 동작은 시각 규격을 위해 바꾸지 않는다. `asChild` 래퍼(`DialogClose` 등)가 `data-slot`을 자식 컴포넌트(Button) 위에 덮어쓰면 `[data-slot]` 기반 HM 스타일이 사라지므로, 래퍼는 asChild일 때 `data-slot` prop을 아예 넘기지 않는다(`undefined`로 넘겨도 덮어쓴다).
+- Floating/Overlay 계열(Dropdown Menu, Context Menu, Popover, Tooltip, Hover Card)은 Dialog와 같은 방식으로 다룬다: 트리거로 실제 Radix를 여는 대표 Story + `defaultOpen` verification Story(`Open`), Radix의 Portal·positioning·focus 이동/복귀·Escape·ARIA는 시각 규격을 위해 바꾸지 않고, 상태는 Radix 속성(`data-highlighted`, `data-disabled`, `data-state`)만 쓴다. surface·윤곽·그림자가 같아도 컴포넌트마다 `--hm-<component>-*`를 두고 서로 참조하지 않는다(공통 Semantic 승격은 반복 근거가 확정된 뒤 검토; 후보는 `docs/components/popover.md` §14).
+- Modal/Panel 계열(Sheet, Drawer, Alert Dialog)도 Dialog와 같은 방식으로 다룬다: 대표 Story는 트리거로 실제 Radix(Drawer는 vaul)를 열고 `defaultOpen` verification Story를 둔다. Radix의 Portal·Overlay·focus trap·initial focus·Escape·focus 복귀·ARIA는 바꾸지 않는다. Dialog 수치는 복사하지 않고 `--hm-<component>-*`를 따로 둔다(공통 Semantic 후보: modal surface·border·shadow·radius). Action/Cancel처럼 안에 Button이 들어가는 Radix 부품은 `<Button asChild><Primitive/></Button>`로 합성하고 Primitive에는 `data-slot`을 붙이지 않는다. vaul 같은 래퍼가 Radix 기본 동작을 끄면(Drawer의 `autoFocus` 기본 false) 모달에서는 되살린다. 모달 확인은 좁은 viewport(390px) 한 번을 포함한다. Floating(Dropdown Menu·Popover·Tooltip·Hover Card)과 Modal은 역할이 달라 값을 서로 참조하지 않는다.
+- Navigation 계열은 둘로 나눈다. 페이지 안 primitive(Breadcrumb, Pagination)는 링크를 `a`로 유지하고 router에 의존하지 않으며(`asChild`), 현재 위치는 `aria-current="page"`로 표시한다. anchor에는 native disabled가 없으므로 `aria-disabled="true"`이면 `tabIndex=-1`과 클릭 취소를 컴포넌트가 보장하고, Button의 `buttonVariants`/token을 가져다 쓰지 않는다. Menu Navigation(Navigation Menu, Menubar)은 Radix 구조와 키보드 모델을 유지하고 Dropdown Menu의 token을 참조하지 않는다. 역할은 Dropdown Menu = 명령, Navigation Menu = 목적지 이동(link), Menubar = 메뉴 바다. 모바일 navigation 패턴은 이 컴포넌트들이 아니라 GNB/Layout 단계에서 정한다.
+- Story 파일의 Tailwind 임의값 클래스(`w-[360px]` 등)가 새 파일에서 개발 서버에 생성되지 않는 일이 있었다. Story 배치용 크기·grid는 필요하면 `style`로 지정한다(컴포넌트 외형 보정이 아니라 배치).
+- Data / Feedback 계열(Table, Progress, Skeleton, Avatar, Scroll Area)의 원칙: Table은 정적 표시 primitive로 정렬·필터·선택 state·페이지 로직을 넣지 않고(이후 Data Table Pattern), 좁은 화면은 카드로 바꾸지 않고 container 가로 scroll만 쓴다. Story 안에서 Table을 감싸는 grid item에는 `minWidth: 0`을 준다(Table 최소 폭이 부모를 넓힘). Radix가 소유하는 동작(Progress의 ARIA, Avatar 이미지/fallback, Scroll Area의 scroll)은 바꾸지 않는다. 상태색(success/warning/error)이 확정되기 전에는 상태 variant를 만들지 않는다.
+- theme CSS는 `@layer` 밖이라 Tailwind utility(`className`)보다 항상 우선한다. 소비자가 `className`으로 모양을 정하는 것이 역할인 primitive(Skeleton)는 기본 모양을 `@layer components`에 둔다. 그 외 컴포넌트에서 크기·색을 바꾸려면 prop(`size`) 또는 `--hm-<component>-*` Token을 쓴다.
+- Selection Controls(Slider, Toggle, Toggle Group)의 원칙: Slider는 값 입력, Toggle은 pressed 상태, Toggle Group은 선택 그룹이며 역할 비교는 `docs/components/toggle.md` §14에 둔다. Toggle/Toggle Group은 Button과 모양이 가까워도 Button의 role/appearance 체계와 `--hm-button-*`를 상속하지 않고 독립 Token을 쓴다. `className`으로 크기·radius·레이아웃을 확장하는 것이 자연스러운 컨트롤(Toggle, Toggle Group)은 기본 모양을 `@layer components`에 둔다(Skeleton과 같은 규칙). Radix가 `role="slider"`를 Root가 아닌 Thumb에 두는 것처럼 접근 가능한 이름이 내부 요소에 필요한 경우 컴포넌트가 `aria-label`을 전달한다. Radix가 조건부로만 내는 속성(ToggleGroup의 `data-orientation`)에 기대지 말고 `:not()`으로 선택한다.
+- Search / Date 계열(Calendar, Command, Date Picker, Combobox)의 원칙: Calendar(react-day-picker)와 Command(cmdk)는 기반 라이브러리가 날짜 계산·필터링·키보드·ARIA를 소유하는 primitive이고, 라이브러리 기본 class(`rdp-*`)와 속성(`data-selected`, `data-selected="true"` 등)에 시각만 연결한다. Date Picker는 Popover + Calendar, Combobox는 Popover + Command를 public API로 조합한 Component이며 Popover를 복제하지 않는다. 조합 컴포넌트가 `PopoverContent`에 `data-slot`을 넘기면 Popover의 `data-slot`을 덮어써 Popover 스타일이 사라지므로 넘기지 않는다. Popover의 padding·폭은 Popover 코드를 바꾸지 않고 `style`의 `--hm-popover-padding`/`--hm-popover-width`로 인스턴스마다 덮는다. 새 dependency는 shadcn 구현이 쓰는 최소(`react-day-picker`, `cmdk`)만 `packages/ui`에 추가하고, 날짜 표시는 `Intl.DateTimeFormat`과 native `Date`로 해결한다. field형 trigger는 grid/flex 부모를 넓히지 않도록 `min-width: 0`을 둔다. Select = 짧은 목록(Radix Select), Combobox = 검색 가능한 선택(Popover + Command)으로 구분한다.
+- Layout / Media 계열(Carousel, Aspect Ratio, Resizable)의 원칙: 소비자 레이아웃 확장성이 우선이라 기본 모양은 `@layer components`에 두고 크기·폭·gap·control 위치는 소비자 utility가 이기게 한다. 시각 규격이 없는 Aspect Ratio는 CSS·Token 파일을 만들지 않는다. Carousel(Embla)과 Resizable(react-resizable-panels v4: `Group`/`Panel`/`Separator`, 숫자=픽셀, 단위 없는 문자열="%")은 라이브러리가 interaction을 소유하며 persistence·Dashboard state·autoplay는 넣지 않는다. Embla/패널 Root는 grid·flex 부모의 `min-width:auto`로 페이지를 밀 수 있으므로 Root에 `min-w-0`을 두고, 한 단계 감싼 wrapper에는 소비자가 `min-w-0`을 준다. 컨트롤(Carousel 이전/다음)은 좁은 부모에서 잘리지 않도록 가장자리 안쪽에 둔다. Resizable은 모든 panel에 `minSize`를 준다.
+- Floating surface Semantic 후보(2026-10-02 C묶음 후 비교): Dropdown Menu, Popover, Hover Card, Menubar, Navigation Menu(viewport)는 흰 면(`--hm-sem-bg-surface`), 1px `--hm-warm-neutral-pale`, radius `--hm-radius-container`(4px), 그림자 `0 0 12px rgb(0 0 0 / .2)`이 같다. Date Picker와 Combobox의 popup은 Popover를 그대로 써서 같은 값이다. Command는 면과 radius만 같고 border·그림자가 없다(컨테이너 안에서 쓰는 전제). Tooltip은 어두운 면이라 제외, Dialog/Sheet/Drawer/Alert Dialog는 modal이라 별도(radius 8px 등). 승격 후보 이름은 `--hm-sem-floating-background|border|radius|shadow`이며, 2026-10-03에 `default.css`로 승격했고 5개 컴포넌트 token이 이를 참조한다(Component Token 유지, 화면 변화 없음).
+- ui_viz에 `docs/components/<name>.md`가 없는 컴포넌트(Card)는 해당 역할을 정의한 pattern 문서(Card: `docs/patterns/content-container.md` Type B)를 근거로 삼는다. 문서가 `Confirmed`가 아닌 owner 채택(`SOURCE_ADOPTED`, `LOCAL_EXCEPTION`) 값을 쓰면 컴포넌트 문서에 그 상태를 구분해 적고, 정의되지 않은 요소(Card의 Footer 등)는 shadcn 기본값으로 둔다.
+- 새 컴포넌트를 완료하면 같은 템플릿(상태, 적용 근거, 기본 규격, 상태 규격, API, Token, 유지 항목, 변경 항목, Storybook, 사용자 결정, 미확정, 관련 파일, 검증 상태)으로 문서를 추가한다. 없는 상태나 API는 채우지 않는다.
+- CENTER 문서는 UI 컴포넌트 문서의 근거로 쓰지 않는다.
+
+### 6.9 ui-viz의 위치와 새 컴포넌트 기준 (2026-10-02 결정)
+
+외부 ui_viz Reference (ZIP 미포함)는 구현 방향이 바뀌기 전에 쓰던 테스트/검증 프로젝트이며 HMDesignSystem의 최종 기준 구현체가 아니다. §6.1, §6.7의 "Confirmed만 구현 근거" 방식은 Button·Input·Select·Card·Dialog·Textarea를 만든 방식으로 남기되, 앞으로의 기준은 다음과 같다.
+
+- ui-viz의 값을 그대로 복제하는 것을 목표로 하지 않는다. 기존에 검토·확정된 디자인 의도와 수치는 참고 자료로 쓰고, 현재 HM 방향에 맞는지 확인해 가져온다.
+- HOLD / TBD / Temporary / 미정의 값은 그대로 적용하지 않고 현재 HM Token 체계와 공통 디자인 원칙(기존 Primitive/Semantic, 구조가 가까운 기존 컴포넌트 패턴)으로 새로 정한다. ui-viz에 규격이 없는 컴포넌트(Checkbox, Radio Group, Switch, Badge, Alert, Separator)도 같은 방식으로 정식 컴포넌트로 구현한다.
+- shadcn/Radix의 접근성, 상태 관리, 키보드 동작, API 구조를 우선 유지한다. wrapper는 필요한 경우에 한해 추가한다(예: Tabs의 frame과 이동 버튼).
+- 다른 컴포넌트의 component token을 값이 같다는 이유로 직접 재사용하지 않는다. 컴포넌트마다 `--hm-<component>-*`를 두고 공통 Semantic을 참조한다.
+- 최종 기준은 실제 구현과 `docs/components/<component>.md`다. 문서에는 값마다 ui-viz 상태명을 분류하지 않고 참고 근거, 현재 HM 규격, 구현 방식, 보류 항목만 기록한다. 기존 문서의 Confirmed/Temporary 표기는 당시 이력이다.
+- 개별 수치는 이 지침에 넣지 않는다.
+
+### 6.10 Pattern 계층 (2026-10-03 도입)
+
+- `packages/ui/src/components/ui`는 독립 primitive, `packages/ui/src/patterns`는 여러 primitive를 조합한 반복 업무 UI(Data Table, Filter Bar)다. Pattern 문서는 `docs/patterns/`에 둔다(Story는 `Patterns/Data/<이름>` 또는 `Patterns/Layout/<이름>`).
+- Pattern은 primitive의 시각 스타일을 복제하거나 다시 정의하지 않고 composition과 상태 연결만 맡는다. Pattern 전용 스타일은 toolbar·footer·loading/empty wrapper·레이아웃 정도로 `--hm-<pattern>-*` token에 둔다. primitive(`Table` 등)에는 업무 로직을 넣지 않는다.
+- Pattern은 서로 종속시키지 않고(Filter Bar는 Data Table 없이도 쓴다), 외부 라이브러리 state(TanStack)는 그대로 노출한다. Story는 로컬 sample data로 실제 조합을 검증한다.
+
+### 6.11 Layout 단계의 기준 (2026-10-03 결정)
+
+개별 UI 컴포넌트와 Layout/Pattern(GNB, LNB, Dashboard, Page)의 기준을 구분한다.
+
+```text
+UI primitive / component   → 현재 @hm-design/ui 구현, docs/components, shadcn·Radix 구조. ui-viz는 참고 (§6.9)
+Layout / Pattern           → 현재 HM 대표 Story / Pattern 문서와 단일 Navigation 정책 우선
+                             외부 ui_viz Reference (ZIP 미포함)는 충돌하지 않는 범위의 참고 자료
+                             구현은 현재 HM primitive / pattern으로 재구성
+```
+
+- Layout은 현재 HM 대표 Story와 사용자 확정 Pattern 규격을 먼저 재사용한다. ui-viz의 구조·시각 결과(높이, 배경, 선택·현재 표현, 간격, 영역 비율, 폭, 콘텐츠와의 연결)는 현재 기준 및 단일 Navigation 정책과 충돌하지 않는 범위에서 참고한다. 구형 Navigation 조합이나 색상 하드코딩을 복원하지 않는다.
+- 구현 기술은 현재 HM을 따른다: Radix 접근성·keyboard·focus·Portal, shadcn API, 기존 primitive 조합(Navigation Menu, Dropdown Menu, Sheet, Collapsible 등). ui-viz의 class·DOM·state 코드는 복사하지 않고, ui-viz가 정의하지 않은 반응형은 현재 HM 접근성·사용성을 우선한다.
+- ui-viz 값을 primitive에 반영하지 않는다. Layout 전용 재색칠은 `[data-slot="<pattern>"]` 범위 안에서만 하고, 하위 primitive의 기본 Story는 바뀌지 않아야 한다.
+- Pattern 문서에는 ui-viz 비교표를 두고 차이를 MATCHED / IMPLEMENTATION_CHANGE / INTENTIONAL_CHANGE / MISSING / FOLLOW_UP으로 분류한다. 개별 px 값은 지침이 아니라 Pattern 문서에 둔다.
+
+### 6.12 Navigation Single Mode (2026-10-07 사용자 확정)
+
+**ONE PAGE = ONE NAVIGATION MODE.** GNB ONLY / LNB ONLY / DASHBOARD ONLY 중 정확히 하나를 선택한다. 독립 모드를 결합하는 GNB + LNB, GNB + Dashboard, LNB + Dashboard, 세 가지 중첩은 금지한다. GNB ONLY 내부 Sidebar에서 기존 LNB 메뉴 부품을 재사용하는 것은 독립 LNB Mode 추가가 아니며 허용한다. Sidebar 외곽 배경만 Green Light 2로 적용하고 메뉴 디자인·구조·동작은 유지한다.
+
+- AI 기반 코드 생성·제안, 신규 페이지 구현, 기존 화면 수정, 프로토타입, Storybook, 실제 Production 구현 전체에 동일하게 적용한다. AI는 별도 요청이 없는 한 Navigation 조합을 생성하거나 제안하지 않는다.
+- 모바일에서도 선택한 체계를 유지한다. LNB Desktop(≥1024px) → LNB Mobile Header(≤1023px)는 같은 LNB Mode다.
+- Dashboard 운영 화면은 전용 Header(48px)·업무 상태 필터 + Content로 구성하며 모든 Sidebar 사용을 금지한다. 외부 GNB나 일반 LNB를 추가하지 않는다. Sidebar 없는 최소 폭 960px과 Dashboard 내부 가로 스크롤을 유지한다. 기존 `DashboardSidebar`와 `sidebar` slot 및 1232px 구성은 호환성·검증용이며 신규 운영 Reference가 아니다.
+- Navigation 간 CSS 변수·height/width 계산·breakpoint·spacing 교차 의존성을 만들지 않는다.
+- 대표/PRIMARY Story는 단일 모드의 운영 구성만 사용한다. 기존 혼합 Story와 Dashboard Sidebar 기술 검증은 verification 태그와 **VERIFICATION ONLY — 운영 사용 금지** 표시로 유지할 수 있으며 신규 화면 구현 기준으로 사용하지 않는다. 상세는 [Navigation Single Mode Policy](navigation-single-mode.md)를 따른다.
+
+상세 기준은 [Navigation Single Mode Policy](navigation-single-mode.md)를 따른다. 이전 조합 기준과 검증 이력은 운영·AI 생성의 근거가 아니다.
+
+## 7. Storybook 운영 규칙
+
+- Story는 패키지의 공개 컴포넌트를 import한다. 내부용 복제 컴포넌트나 가짜 Preview UI로 검수를 대체하지 않는다.
+- 각 주요 컴포넌트에 기본/variant/state, disabled·error·loading, 키보드 및 포커스 상태를 해당 컴포넌트의 실제 지원 범위에 맞게 문서화한다.
+- 현재 Default/External/URL Loader 및 계약 검증은 Theme verification Story로 비교한다. `Theme/Designer Playground/Editor`는 JSON URL/파일 Preview와 최소 컬러 편집을 제공한다. Preview는 패키지 Runtime 계약을 사용하며 운영 Publish는 수행하지 않는다.
+- 컴포넌트 PR에서는 관련 Story와 기본 Theme·대표 Runtime Theme을 확인한다. Theme Publish에서는 변경한 Token이 닿는 Story, 대비·가독성, 화면 넘침을 확인한다.
+- Storybook 빌드/배포 버전과 `@company/ui` 버전을 표시해 검수한 결과와 서비스 패키지 버전을 연결한다. Storybook에서 보인다고 해서 앱의 실제 반영을 확인한 것으로 간주하지 않는다.
+
+## 8. 도입 순서와 완료 조건
+
+| 단계 | 구축 범위 | 다음 단계 진입 조건 |
+|---|---|---|
+| 현재 구현 | UI/CENTER compiled dist build/export, Component·Pattern, 공개 Runtime 계약/API·URL Loader, Default/External verification Story, Theme-only artifact. Registry publish 이력은 ZIP 검증 범위 밖; 운영 CDN/Publish pipeline은 미구현 | 코드/문서/실제 Storybook 정합성 검증 |
+| MVP | 단일 저장소에서 `@company/ui` 패키징, 기본 CSS, Semantic 계약, Storybook, 로컬 JSON Preview/Loader | 같은 패키지 컴포넌트에서 값 override와 fallback을 실제로 확인 |
+| 운영 기반 | 불변 Theme Registry, 스키마 검증, 버전·호환성, 승인 Publish, API/CDN, 롤백·로그 | 앱 재배포 없이 Theme 값 반영, 실패 시 기본값, 이전 버전 복귀를 확인 |
+| 운영 확장 | 디자인팀 Admin, 권한·감사, 자동 검수·모니터링 | 운영 절차와 담당자가 정해지고 실제 서비스 적용 기록이 남음 |
+
+### 8.1 초기 도입 순서 (구현 이력)
+
+```text
+Button / Input / Select 완료 + 컴포넌트 문서 정리 (docs/components)
+        ↓
+Card 완료
+        ↓
+Dialog 완료
+        ↓
+패키지 구조 분리 (packages/ui, packages/center-graphic)
+        ↓
+packages/ui 구조에서 나머지 UI 컴포넌트 추가
+```
+
+- **Card와 Dialog 완료를 패키지 분리 작업의 시작 기준점으로 한다.** 그 기준을 충족해 2026-10-02에 분리했다(§5.1).
+- 현재 Storybook은 `Components`, `Patterns`, `Center Graphic`으로 통합 운영한다. `Theme`의 verification Story는 기본 sidebar에서 숨긴다.
+- 패키지 구성은 §5.1을 따른다(하나의 Git 저장소, `@hm-design/ui`와 `@hm-design/center-graphic`, 독립 설치·버전 관리).
+- `center-graphic` 실제 작업을 시작할 때 CENTER 문서와 assets의 읽기 범위·우선순위를 별도로 확정한다. 그 전까지 §5.1의 CENTER 적용 범위를 따른다.
+
+상세 적용 절차는 [개발 적용 가이드](개발-적용-가이드.md), 발행과 복구 절차는 [운영/배포 가이드](운영-배포-가이드.md)를 따른다.
diff --git a/docs/patterns/dashboard-layout.md b/docs/patterns/dashboard-layout.md
new file mode 100644
index 0000000..5055327
--- /dev/null
+++ b/docs/patterns/dashboard-layout.md
@@ -0,0 +1,356 @@
+# Dashboard (Pattern)
+
+> **SINGLE NAVIGATION MODE / 2026-10-08 Sidebar 운영 정책.** DASHBOARD ONLY 운영 화면은 Sidebar를 사용하지 않는다. 전용 Header(48px)·업무 상태 필터와 Content를 사용하며 Header는 GNB가 아니다. 독립 GNB / LNB / Dashboard 모드는 함께 사용하지 않는다. [공통 정책](../guidelines/navigation-single-mode.md)이 이전 조합·Sidebar 허용 기록보다 우선한다.
+
+## 1. 현재 계약
+
+Dashboard 운영 화면은 전용 Header/Menu·업무 상태 필터와 Content로 구성하며 모든 Sidebar 사용을 금지한다. 외부 GNB와 일반 LNB를 결합하지 않는다. 운영 Reference는 Sidebar 없는 대표 `Patterns/Layout/Dashboard → Dashboard` Story다.
+
+| 공개 API | 역할 |
+|---|---|
+| `DashboardLayout` | 바깥 scroll root + 내부 frame. 운영 화면은 `header`, `children`을 사용하고 `sidebar`를 전달하지 않음 |
+| `DashboardHeader` | Dashboard 내부 Header. 기본 높이 48px |
+| `DashboardSidebar` | 기존 호환성·검증 전용 공개 API. 신규 Dashboard 운영 화면 사용 금지. 기존 폭 272px·메뉴 세로 스크롤 기능은 유지 |
+| `DashboardMain` | `<main>`, 콘텐츠 및 세로 스크롤 |
+| `DashboardContent` | 콘텐츠 stack, gap 24px |
+
+`DashboardSidebar` 공개 Export와 선택적 `sidebar` slot은 기존 소비자 호환성·검증을 위해 유지한다. API 존재가 운영 허용을 뜻하지 않으며 신규 운영 화면에는 사용하지 않는다. GNB/LNB나 Sidebar를 전달하던 운영 화면은 적합한 단일 Navigation Mode의 운영 구성으로 마이그레이션한다. slot은 임의 ReactNode를 받으며 런타임 자동 차단은 없다. 운영 사용 금지와 기능 제거는 별도 작업이며, API 제거·런타임 차단은 소비처 영향 조사와 사용자 결정 후 진행한다.
+
+```tsx
+<DashboardLayout
+  header={<DashboardHeader>Dashboard Header / Menu</DashboardHeader>}
+>
+  <DashboardMain>
+    <PageHeader>…</PageHeader>
+    <DashboardContent>…</DashboardContent>
+  </DashboardMain>
+</DashboardLayout>
+```
+
+## 2. 최소 폭·스크롤·스타일
+
+- 운영 최소 폭 = Sidebar 없는 960px(`--hm-dashboard-min-width`).
+- Sidebar 포함 1232px(960 + 기존 Sidebar 폭 272px)은 호환성·검증 구성의 값이며 현재 운영 기준이 아니다. 해당 구현·CSS는 호환성을 위해 유지한다.
+- 최소 폭 이하에서는 바깥 `dashboard-scroll` 안에서 전용 Header/Content 전체를 가로 스크롤한다. 모바일에서도 Sidebar를 추가하지 않는다.
+- Main이 세로 스크롤을 담당하고 바깥 frame 높이는 `--hm-dashboard-height`(기본 `100dvh`)다. `className`, `style`, DOM props는 바깥 root에 전달한다.
+- Root 기본 접근성은 `role="region"`, `aria-label="Dashboard"`, `tabIndex={0}`. `data-navigation-mode="DASHBOARD"`는 해당 체계를 식별한다.
+- Main padding 34px, content gap 24px. Header 콘텐츠 radius 12px와 관련 shadow 유지. 기존 Sidebar 콘텐츠 radius 18px·shadow는 호환성·검증용 구현에만 남는다.
+- Dashboard는 `--hm-dashboard-*`와 공통 Semantic만 사용한다. GNB 높이·join, LNB 폭·gradient, 1024px 모바일 숨김 override에 의존하지 않는다.
+- Filter Bar는 Dashboard 최소 폭 frame 안에서 한 줄과 기존 control 폭을 유지한다. 넓은 개별 콘텐츠는 Main 또는 카드 내부에서 스크롤한다.
+
+## 3. Storybook
+
+대표 `Patterns/Layout/Dashboard → Dashboard`는 Compact Header 48px + 상태 필터 + 콘텐츠다. Compact 상태 바 geometry(높이 40px, 중심 50% + 18px, 28px control, 36px padding, radius 16px 및 오목한 날개), 전체/진행/보류/완료 count 색상은 기존 기준을 유지한다. count 진행 `#00c896` / 보류 `#ff9500`는 2026-10-07 사용자 결정에 따른 Story 전용 값이다.
+
+### Dashboard 업무 상태 공통 계약
+
+업무 상태 계약은 `packages/ui/src/patterns/dashboard-status/contract.ts`가 기준이다. `active | hold | done`은 실제 상태이고, `all | active | hold | done | issue`는 필터 ID다. `issue`는 상태를 대체하지 않는 독립 Boolean flag이며 `hold + issue`처럼 동시에 표현할 수 있다. `done`의 표시명은 `완료`를 유지한다.
+
+계약은 label, tone, 접근성 label, count 계산(`countDashboardFilter`), 필터 매칭(`matchesDashboardFilter`)을 제공한다. React adapter는 기존 `Badge`, `Button`, `FilterBar`, `Progress`를 사용하고, 다른 Runtime은 동일한 `data-status`, `data-issue="true"`, `data-filter`, `aria-pressed` vocabulary를 사용한다. 선택 상태는 `aria-pressed="true"`가 우선하며 hover/focus/disabled는 대상 Runtime의 interaction state로 동일하게 매핑한다. 상태 색상 원본은 `packages/ui/src/patterns/dashboard-status/dashboard-status.css`이며 `@hm-design/ui/dashboard-status.css`로 공개한다. 기존 `src/patterns/dashboard-status-contract.css`는 원본을 import하는 호환 경로로 유지한다. 이 변수는 기존 Story 색상을 보존하는 compatibility mapping이며 HM Theme token은 변경하지 않는다. Static HTML 기준 샘플은 `docs/patterns/dashboard-status-static.html`이다.
+
+패키지 소비자는 앱 CSS entry에서 Theme 다음에 상태 CSS를 명시적으로 로드한다. React API import만으로 CSS가 자동 적용되지는 않는다.
+
+```css
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+@import "@hm-design/ui/dashboard-status.css";
+```
+
+상태 CSS는 변수 정의만 제공한다. 기존 `Badge variant="outline"`에는 화면의 wrapper에서 아래 mapping을 적용한다. 완료의 흰색 ink가 유지되므로 기존 어두운 Badge 배경도 함께 유지한다. `issue` Badge는 실제 상태 Badge와 별도로 렌더링한다.
+
+```css
+.dashboard-status [data-status="active"] { --dashboard-status-color: var(--hm-dashboard-status-active); }
+.dashboard-status [data-status="hold"] { --dashboard-status-color: var(--hm-dashboard-status-hold); }
+.dashboard-status [data-status="done"] { --dashboard-status-color: var(--hm-dashboard-status-done); }
+.dashboard-status [data-status="issue"][data-issue="true"] { --dashboard-status-color: var(--hm-dashboard-status-issue); }
+.dashboard-status [data-slot="badge"][data-status] {
+  --hm-badge-outline-text: var(--dashboard-status-color);
+  --hm-badge-outline-background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
+  --hm-badge-outline-border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
+}
+```
+
+HTML adapter는 같은 상태 변수를 자신의 `color` 등에 연결한다. package dist를 정적 자산으로 배치하면 `theme.css` 다음에 `dashboard-status.css`를 `<link>`로 로드한다. 저장소의 기존 Static HTML 예제는 호환 CSS 경로를 그대로 사용한다. React와 HTML 모두 `done`은 `--hm-dashboard-status-done`을 참조하며, 이 alias는 `:root`와 `[data-hm-theme]`에서 각 scope의 white token으로 재계산한다. active/hold/issue 색상과 Runtime Theme의 73개 계약은 유지한다.
+
+#### React 소비 예제: 데이터 → 상태 변수 → Badge
+
+`active`(진행) → `--hm-dashboard-status-active`, `hold`(보류) → `--hm-dashboard-status-hold`, `done`(완료) → `--hm-dashboard-status-done`이다. 독립 `issue === true`는 `--hm-dashboard-status-issue`로 별도 Badge를 표시한다. `tone`은 의미 분류이며 Badge variant나 CSS를 자동 선택하지 않는다. 위 CSS mapping과 import 순서를 앱 CSS entry에 적용한 다음 아래 공개 API를 사용한다.
+
+```tsx
+import {
+  Badge, dashboardFilterDefinitions, matchesDashboardFilter,
+  type DashboardFilterId, type DashboardStatusRecord,
+} from "@hm-design/ui"
+
+type Work = DashboardStatusRecord & { id: string }
+const works: Work[] = [
+  { id: "T-1", status: "active" },
+  { id: "T-2", status: "hold", issue: true },
+  { id: "T-3", status: "done" },
+]
+
+export function WorkBadges({ filter = "all" }: { filter?: DashboardFilterId }) {
+  const visible = works.filter(work => matchesDashboardFilter(work, filter))
+  return <div className="dashboard-status">
+    {visible.map(work => <div key={work.id}>
+      <Badge variant="outline" data-status={work.status}>
+        {dashboardFilterDefinitions[work.status].label}
+      </Badge>
+      {work.issue === true && <Badge variant="outline" data-status="issue" data-issue="true">
+        {dashboardFilterDefinitions.issue.label}
+      </Badge>}
+    </div>)}
+  </div>
+}
+```
+
+`filter="issue"`에서도 T-2의 상태는 `hold`로 유지되고 보류 Badge와 이슈 Badge가 함께 표시된다. `issue`를 `DashboardStatusId`에 추가하거나 `destructive` 등 다른 Badge variant에 임의로 연결하지 않는다.
+
+Reference: [React 代表 Story](../../src/patterns/dashboard-layout.stories.tsx)の `statusBadge` と [Story CSS](../../src/patterns/dashboard-layout.stories.css)の Badge mapping、[公開状態 CSS 原本](../../packages/ui/src/patterns/dashboard-status/dashboard-status.css)、[Static HTML](dashboard-status-static.html)。上の例はこれらの状態・色 mappingを公開 APIで消費する例であり、Storyモジュールは importしない。コード・Propsはソースと照合済みで、この文書改善作業では例の実行・画面検証はしていない。
+
+Sidebar 검증 Story `WithSidebar`, `SidebarOnly`, `ThirdLevel`, `LongContent`, `Framed`는 기존 기능·상태 데이터를 보존하는 **VERIFICATION ONLY — 운영 사용 금지** 화면이다. `verification` 태그로 기본 Story 메뉴에서 제외하며 이름과 화면에 운영 금지를 표시한다. 신규 운영 화면 Reference로 사용하지 않는다. `Loading`, `Empty`도 verification 전용이며 Sidebar 없는 Compact 구성을 검사한다. 대표 Story ID `patterns-layout-dashboard-layout--all`과 기존 검증 Story ID는 유지한다. 이전 GNB + LNB / GNB Only / LNB Only Story 구성은 §5의 역사 기록이다.
+
+## 4. 단일 모드 통합 검증 (2026-10-07, headless Edge)
+
+> **HISTORICAL RECORD:** 아래 결과는 2026-10-07 당시 코드의 검증 기록이다. Sidebar 포함 1232px 사례는 현재 운영 허용이나 이번 정책 수정의 검증 결과를 뜻하지 않는다. 현재 운영 계약은 §1–3의 Sidebar 없는 960px 구성이다.
+
+- Navigation/Theme Story × viewport 총 48개 케이스 통과. 1280, 1232, 1024, 1023, 960, 959, 390, 320px에서 주요 모드를 확인했다.
+- Dashboard에 외부 GNB/LNB 없음, Compact 960px / Sidebar 포함 1232px 최소 폭과 내부 가로 스크롤 유지, 문서 가로 넘침 0px.
+- LNB 1024/1023 전환, Sheet Escape·포커스 복귀·preventDefault 링크 선택·Desktop/Mobile 선택 상태 공유 확인. Dashboard 그룹 Enter/Space, 현재 링크 및 hover 유지 확인.
+- Theme Preview는 GNB/LNB 중 하나만 렌더링하고 Dashboard Theme 콘텐츠는 외부 Navigation을 제외한다. Runtime Theme 계약 검증 136개 통과, 브라우저 runtime error 0.
+- 타입 검사, UI package build, Storybook static build, Production 앱 build, `git diff --check` 통과. 기존 문서 예시 `bg-[var(...)]` CSS 경고 및 Storybook chunk 크기 경고는 남아 있다.
+
+
+## 5. 이전 구현·검증 이력 (HISTORICAL RECORD)
+
+아래 내용은 정책 전환 이전 기록을 보존한 것이다. **현재 구현·운영·AI 생성의 근거로 사용하지 않는다.** GNB/LNB 혼합, 모바일 체계 전환, 교차 CSS 변수 및 이전 Story 구성은 위 §1–3과 공통 SINGLE NAVIGATION MODE 정책으로 대체되었다. 아래 테스트 수치는 이전 코드의 결과이며 이번 변경의 검증 결과가 아니다.
+
+<details>
+<summary>2026-10-07 단일 모드 전환 이전 기록</summary>
+
+### Dashboard Layout (Pattern)
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6.10, §6.11)를 따른다.
+
+```text
+Layout visual reference: 외부 ui_viz Reference (ZIP 미포함) (dashboard-composition.md §7·§8·§19, Variant A Sidebar / Variant B Top-header)
+Implementation: current @hm-design/ui patterns / primitives
+```
+
+#### 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (2026-10-03) |
+| 기반 | GNB, LNB, Page Header, Card, Badge, Progress, Filter Bar, Data Table 조합 (새 dependency 없음) |
+| 대표 Story | `Patterns/Layout/Dashboard Layout` → `Dashboard Layout` (verification: Third Level, GNB Only, LNB Only, Long Content, Loading, Empty, Framed) |
+| 함께 만든 Pattern | `Page Header` (`page-header.md`) |
+| 보류 | §12 |
+
+#### 2. 목적 / 범위
+
+GNB / LNB / Page Header / Main을 실제 화면으로 조립해 Layout contract를 확정한다. 새 UI를 만들지 않는다. 메뉴·페이지 내용은 소비자가 slot과 children으로 넣고, Dashboard는 메뉴 schema를 모른다. 소유하는 것: 화면 프레임(높이), main 스크롤, 콘텐츠 면(배경·padding·둥근 모서리·그림자), 콘텐츠 세로 리듬(gap).
+
+#### 3. ui-viz visual reference
+
+ui-viz에서 확인한 구조(실제 파일: `compositions/dashboard-variant-specimens.{jsx,css}`, `top-header-specimen.{jsx,css}`, `storybook/{LNB,GNB,Layout}.stories.jsx`, `layout-composition.jsx`, `dashboard-composition.md`):
+
+| 영역 | ui-viz 구조 | 현재 HM 대응 | 이번 구현 |
+|---|---|---|---|
+| 조립 | Variant A(LNB 272 + 콘텐츠), Variant B(GNB 70 + 콘텐츠), Variant C(Compact 48). **GNB+LNB 동시 사용 예 없음** | `DashboardLayout` | slot 방식. 둘 다 / 하나만 |
+| GNB | 70px green, 콘텐츠와 12px 접점 | `GNB` | slot `header` |
+| LNB | 272px green, 콘텐츠와 18px 접점 | `LNB` | slot `sidebar` |
+| Content surface | `#F5F0E5`, padding 34, 접점 쪽 radius(LNB 18 / GNB 12), 그림자 `-8px 0 18px`(LNB) · `0 -8px 18px`(GNB) rgba(7,30,24,.18), 별도 border 없음 | 신규 | `DashboardMain` |
+| 스크롤 | "메뉴/헤더는 고정, 콘텐츠 영역에서만 스크롤"(Confirmed). `overflow-y:auto`, `overscroll-behavior: contain` | 신규 | `DashboardMain`이 스크롤 소유 |
+| Page heading | breadcrumb 12px(정적 `p`, 컴포넌트 아님) → 제목 28 → 설명, space-between·align end·gap 24, **하단 20px** | Breadcrumb + 신규 Pattern | `PageHeader` |
+| 간격 | 외곽 34, 카드 사이 24, 카드 padding 24, 카드 제목→본문 24, 조회→결과 16 | Card, `DashboardContent` | 24 gap 토큰, 나머지는 Card/Filter Bar 값 |
+| 조회 | 결과 카드 안 검색(라벨 좌측, 최대 360) + 표 | Filter Bar + Data Table | Card 안에서 조합 (gap 16) |
+| KPI | Dashboard에 Panel/Card 4종(KPI 전용 아님) | Card + Badge + Progress | Story 조합만 |
+
+#### 4. GNB / LNB 조립 정책
+
+| 구성 | 사용 | 근거 |
+|---|---|---|
+| GNB only (Variant B) | `header` | ui-viz 기준 있음 |
+| LNB only (Variant A) | `sidebar` | 모든 viewport에서 Sidebar 유지. 최소 폭 이하에서는 Dashboard 전체 가로 스크롤 |
+| GNB + LNB | `header` + `sidebar` | ui-viz에 기준 없음. 사용자 요청으로 조립한 INTENTIONAL 구성(대표 Story) |
+
+##### Brand / Profile ownership (2026-10-06, `lnb.md` §3c)
+
+| 구성 | Desktop Brand | Desktop Profile | Mobile Brand | Mobile Profile |
+|---|---|---|---|---|
+| GNB + LNB | GNB(`GNBBrand`) | GNB(`GNBUser`), LNBProfile 없음 | GNB Mobile Header | GNB Sheet의 `GNBUser`, 별도 LNB Profile 없음 |
+| LNB Only | `LNBBrand` | `LNBProfile` | 동일한 `LNBBrand` | 동일한 `LNBProfile` |
+| GNB only | GNB(`GNBBrand`) | GNB(`GNBUser`) | GNB Mobile Header | GNB Profile |
+
+Brand/서비스명과 Profile의 소유권은 소비자가 composition에서 `LNBBrand`와 `LNBProfile`을 넣고 빼서 정한다. LNB Only의 `LNBProfile`은 `DropdownMenuTrigger asChild`로 합성하며 작은 viewport에서도 Sidebar와 함께 유지한다. GNB + LNB에서는 LNBProfile을 렌더링하지 않는다.
+
+GNB+LNB일 때: GNB가 전체 폭 위에 평평하게 놓이고 LNB와 콘텐츠가 그 아래 한 줄. GNB의 12px 접점 띠는 숨기고(`::after`) 콘텐츠는 **왼쪽 모서리만 18px**, 위쪽 오른쪽 모서리는 직각이다. 작은 viewport에서도 이 접점을 유지한다. GNB 자체의 모바일 헤더·Sheet 정책은 그대로 유지한다.
+
+#### 5. 구조 / API
+
+```tsx
+<DashboardLayout header={<GNB>…</GNB>} sidebar={<LNB>…</LNB>}>
+  <DashboardMain>
+    <PageHeader>…</PageHeader>
+    <DashboardContent>…Card, Filter Bar, Data Table…</DashboardContent>
+  </DashboardMain>
+</DashboardLayout>
+```
+
+- `DashboardLayout`: 바깥 `data-slot="dashboard-scroll"`이 가로 스크롤을 맡고, 안쪽 `data-slot="dashboard-layout"`(flex column)이 최소 폭과 `header`/`sidebar` slot을 유지한다. 기존 `className`, `style`, DOM props는 바깥 scroll root에 전달된다. `data-header`/`data-sidebar`는 안쪽 frame에 있다. DOM 순서는 header → (sidebar → main)이다.
+- Scroll root는 기본 `role="region"`, `aria-label="Dashboard"`, `tabIndex={0}`이며 DOM props로 변경할 수 있다. CSS 변수는 root에서 내부 frame으로 상속된다.
+- `DashboardMain`: `<main>`, 콘텐츠 면이자 세로 스크롤 컨테이너. 고유 `id`/`aria-label`이 필요하면 소비자가 준다.
+- `DashboardContent`: 섹션 세로 stack(gap 24). 섹션 스타일은 입히지 않는다.
+- GNB / LNB를 wrapper로 다시 감싸지 않고 그대로 slot에 넣는다.
+
+#### 6. Content Surface (접점 소유권)
+
+GNB / LNB는 콘텐츠 radius를 만들지 않는다. 자기 쪽 "연장 띠"만 둔다(GNB `::after` 12px = `--hm-gnb-join`, LNB `::after` 18px = `--hm-lnb-join`). 콘텐츠 면이 그 위에 positioned로 얹혀 둥근 모서리에서 띠가 보이게 한다(`DashboardMain`이 `position: relative`이고 DOM상 뒤).
+
+| 상태 | radius | shadow |
+|---|---|---|
+| header | `gnb-join gnb-join 0 0` | `0 -8px 18px rgba(7,30,24,.18)` |
+| sidebar (모든 viewport) | `lnb-join 0 0 lnb-join` | `-8px 0 18px rgba(7,30,24,.18)` |
+| header + sidebar (모든 viewport) | sidebar와 같음, GNB 띠 숨김 | 같음 |
+| (둘 다 없음) | 0 | 없음 |
+
+값은 `--hm-gnb-join`, `--hm-lnb-join`을 읽는다(하드코딩 없음). 콘텐츠 면 뒤 색(`--hm-dashboard-background`)은 LNB 끝 색 `--hm-lnb-background-end`.
+
+#### 7. Main Layout
+
+- padding 34px(`--hm-dashboard-padding`, 모든 viewport), 세로 gap 24px(`--hm-dashboard-gap`), 배경 `--hm-sem-bg-content`.
+- `min-width: 0`: Main, `DashboardContent`와 그 직접 자식. 표·Carousel·Combobox가 페이지를 밀지 않는다(검증: 1600px 넓은 내용도 Main `scrollWidth`를 늘리지 않음).
+- 스크롤: 바깥 Dashboard frame 높이는 `--hm-dashboard-height`(기본 `100dvh`)이며 가로 scrollbar도 이 높이에 포함된다. Main이 세로 스크롤, 바깥 frame이 Dashboard 전체 가로 스크롤을 맡는다. Main은 `overflow-x:auto`, `overscroll-behavior-y:contain`으로 가로 제스처가 바깥 frame으로 전달된다. LNB는 메뉴 영역만 자체 세로 스크롤한다.
+- 임베드 시 높이는 `--hm-dashboard-height`로 바꾼다(Story `Framed`).
+
+#### 8. Page Header
+
+별도 Pattern(`page-header.md`)으로 분리했다. 모든 화면이 반복해서 쓰고(Breadcrumb + h1 + actions), 간격(하단 20)이 ui-viz Layout contract라서다. Breadcrumb는 HM Breadcrumb를 그대로 쓰며 Page Header는 간격만 맡는다.
+
+#### 9. Desktop / Mobile
+
+```yaml
+Dashboard Minimum Width Policy: HORIZONTAL_SCROLL
+Content minimum width: 960px
+With Sidebar: 960px + 272px = 1232px
+Below minimum width: KEEP_LAYOUT_AND_SCROLL
+Compact / Sidebar mobile hide: NONE
+```
+
+- 충분한 폭에서는 기존 배치를 사용한다. 작은 viewport에서는 내부 최소 폭을 유지하고 Dashboard 전용 root에서만 가로 스크롤한다. Sidebar slot은 항상 렌더링된다.
+- 960px 근거: KPI 4 × 200px + 간격 3 × 24px + padding 2 × 34px + 세로 scrollbar 여유 20px. Compact 상태 바 실측 약 549px, 브랜드 약 125px, 날개 35px도 이 폭에서 겹치지 않는다.
+- Sidebar 구성은 콘텐츠 최소 폭에 LNB 폭을 더한다. Desktop은 기존 `--hm-lnb-width`를 읽고, ≤1023px에서는 Dashboard 내부에만 `--hm-lnb-width: var(--hm-dashboard-sidebar-width, 272px)`와 LNB `display:flex`를 적용한다. 공통 `lnb.css`의 모바일 숨김은 유지된다.
+- 기본 콘텐츠 최소 폭은 `--hm-dashboard-min-width`로 조정할 수 있다. 기본값 960px은 현재 Desktop 구성 측정 기준이며 별도 콘텐츠를 넣으면 그 구성을 기준으로 조정한다.
+- Compact 메뉴는 숨기거나 wrap하지 않는다. Dashboard 안 Filter Bar도 한 줄과 기존 control 폭을 유지하며 공통 Filter Bar 모바일 정책은 변경하지 않는다. 본문 텍스트는 자연스럽게 줄바꿈한다.
+- GNB의 전역 메뉴·모바일 Sheet와 일반 LNB의 공통 responsive 정책, Theme/Color Token, Story ID/hierarchy는 변경하지 않는다.
+
+#### 10. Accessibility / Keyboard
+
+- landmark: `header`(GNB), `nav[aria-label=주 메뉴]`, `aside`(LNB) 안 `nav[aria-label=업무 메뉴]`, `main`, `nav[aria-label=breadcrumb]`. 화면의 `h1`은 Page Header 제목 하나.
+- Tab 순서(측정): GNB(브랜드, 메뉴 4, 사용자) → LNB(항목, 그룹, 하위) → Breadcrumb → 페이지 액션 → 검색 → 상태 → 초기화 → 표. focus trap은 Sheet/Dialog에서만.
+- skip-to-content 링크는 만들지 않았다(§12). `aside`에는 이름이 없고 안의 `nav`가 이름을 갖는다.
+
+#### 11. 비교 (ui-viz ↔ 현재 HM)
+
+| 항목 | ui-viz | 현재 HM | 분류 |
+|---|---|---|---|
+| GNB 70 / LNB 272 | 같음 | `--hm-gnb-height` / `--hm-lnb-width` | MATCHED |
+| 콘텐츠 면 색·padding 34 | `#F5F0E5`, 34 | 같음 | MATCHED |
+| 접점 radius (LNB 18 / GNB 12), shadow | 같음 | 같음. 소유를 Dashboard로 이동 | MATCHED |
+| 헤더·메뉴 고정, 콘텐츠만 스크롤 | 같음 | `DashboardMain` 스크롤 | MATCHED |
+| 접점 띠가 콘텐츠 뒤에서 이어짐 | 형제 absolute | GNB/LNB `::after` + positioned Main | IMPLEMENTATION_CHANGE |
+| Page heading 간격(하단 20, h 28, gap 24) | 같음 | `PageHeader` | MATCHED |
+| Breadcrumb | 12px 정적 `p`, 컴포넌트 아님 | HM Breadcrumb(14px, 링크) | INTENTIONAL_CHANGE (사용자 지시) |
+| 제목 태그 | `h2` | `h1` | INTENTIONAL_CHANGE (페이지당 h1) |
+| 카드 | Content Card(흰색), padding 24 | HM Card | MATCHED |
+| 조회 + 표 | 결과 카드 안, 검색 → 표 16 | Card 안 Filter Bar + Data Table, gap 16 | MATCHED |
+| 표 density | ui-viz Table | HM Data Table(Table primitive) | MATCHED (primitive 기준) |
+| GNB + LNB 동시 | 없음 | 조립(GNB 평평, LNB 아래) | INTENTIONAL_CHANGE / FOLLOW_UP |
+| 반응형 | ≤1100px/48px OUT_OF_SCOPE | Dashboard 최소 폭 유지 + native 가로 스크롤. GNB 전역 Sheet 정책 유지 | INTENTIONAL_CHANGE |
+| 스크롤바 | 기본 | 기본 | — |
+| ui-viz 화면과 픽셀 비교 | — | 미실시(ui-viz Storybook 미실행) | — |
+
+#### 12. 남은 차이 / 누락
+
+| 항목 | 분류 |
+|---|---|
+| GNB+LNB brand 중복 | 해결 (2026-10-06, §4 Brand ownership: GNB만, LNBBrand 없음) |
+| GNB+LNB 조립 시각 확정(두 gradient 이음새) | FOLLOW_UP — 사용자 결정 필요 |
+| LNB only의 모바일 탐색 | 동일 Sidebar를 가로 스크롤로 탐색 (2026-10-07 최소 폭 정책, §9) |
+| skip-to-content, `main` 이름 | FOLLOW_UP |
+| ui-viz Variant C(Compact 48 + Status Filter Bar) | 대표 Story에 구현됨. 최소 폭 960px으로 유지 |
+| 실기기 touch/trackpad, ui-viz 픽셀 비교 | 미확인 |
+| 문서 스크롤 방식(frame 높이 없이 body 스크롤) 변형 | 필요 시 `--hm-dashboard-height: auto` + GNB `sticky`로 가능하나 검증하지 않음 |
+
+##### 누락 컴포넌트 점검
+
+| 항목 | 필요도 | 이유 | 다음 단계 |
+|---|---|---|---|
+| KPI Card | 권장 | Card+Badge+Progress를 4곳에서 직접 조합. 반복되면 Pattern | 실제 제품 요구 때 |
+| Page-level Empty State | 권장 | 표 Empty만 있고 페이지 전체 빈 상태(첫 사용·권한 없음) 없음 | 요구 확인 후 |
+| Page Loading | 후속 | Skeleton + Data Table `loading` 조합으로 충분(Story `Loading`) | 보류 |
+| Bulk Action Bar | 권장 | 표 선택 후 일괄 작업 영역 없음 | Data Table 확장 때 |
+| Filter Chip / 적용 조건 표시 | 후속 | Filter Bar 문서 §12에 기록됨 | 보류 |
+| Mobile Filter Drawer | 후속 | Dashboard에서는 최소 폭 안에서 기존 Filter Bar를 유지 | 보류 |
+| Notification Center, Global Search Result | 후속 | GNB 문서 | 보류 |
+| Skip link | 권장 | 키보드 사용자: GNB/LNB 건너뛰기 | 접근성 보완 때 |
+
+#### 13. 검증 (2026-10-07, 최소 폭 정책)
+
+현재 검증 결과는 §9의 HORIZONTAL_SCROLL 정책을 따른다. 아래 Desktop 전용 정책 검증은 이전 작업 이력이다.
+
+당시 Storybook 포트 6007, Chromium, 높이 900px에서 실측했다.
+
+| viewport | Compact 내부 폭 | Compact 가로 스크롤 | GNB + LNB 내부 폭 | GNB + LNB 가로 스크롤 | 메뉴·콘텐츠 | 레이아웃 붕괴 |
+|---|---:|---|---:|---|---|---|
+| 1280 | 1265 | 없음 | 1280 | 없음 | 유지 | 없음 |
+| 1024 | 1009 | 없음 | 1232 | 있음 | 유지 | 없음 |
+| 1023 | 1008 | 없음 | 1232 | 있음 | 유지 | 없음 |
+| 768 | 960 | 있음 | 1232 | 있음 | 유지 | 없음 |
+| 390 | 960 | 있음 | 1232 | 있음 | 유지 | 없음 |
+| 320 | 960 | 있음 | 1232 | 있음 | 유지 | 없음 |
+
+- 대표 Compact Story는 바깥 Story 설명 때문에 문서에 세로 scrollbar 15px이 있다. 위 내부 폭은 이를 제외한 가용 폭이며 `100vw`를 사용하지 않는다. 모든 조합에서 문서 가로 넘침은 0px이다.
+- Sidebar 폭 272px, Main padding 34px, Filter Bar 검색 폭 280px·높이 34px이 모든 폭에서 유지된다. KPI 4개는 작은 viewport에서도 한 줄, 각 약 201px이다. Main 자체 가로 넘침은 0px이다.
+- Third Level, GNB Only, LNB Only, Long Content, Loading, Empty, Framed를 1280·320px에서 추가 확인했다. 문서 가로 넘침 0px, 넓은 1600px 내용은 카드 내부에서만 스크롤, Framed 높이는 scrollbar를 포함해 640px으로 유지된다.
+- 320px에서 native 가로 wheel 입력으로 Compact scrollLeft 655px / Sidebar 구성 912px(각 최대값)에 도달하고 0px으로 복귀했다. 문서 scrollLeft는 0px으로 유지된다. 스크롤 root의 ArrowRight 입력도 동작한다.
+- Compact Tab 순서 전체 → 활성 → 대기 → 비활성 → 검색을 확인했다. 비활성 버튼에 focus하면 scrollLeft 435px으로 자동 이동하며 버튼 전체와 focus indicator가 viewport 안에 보인다. 스크롤 JS, touch-action 제한, 입력 이벤트 차단은 추가하지 않았다. 실제 touch·trackpad·Shift+wheel 장치는 별도 실기기 확인이 필요하다.
+- 일반 GNB Story의 모바일 높이 56px·desktop nav 숨김은 유지된다. 공통 GNB/LNB CSS와 JS는 수정하지 않았다.
+- 실제 터치 장치 테스트는 수행하지 않았다.
+- `npm run typecheck`, 최종 UI package build, Storybook static build, `git diff --check` 통과. 기존 문서 예시 `bg-[var(...)]` CSS 경고와 500kB chunk 경고는 유지된다.
+
+
+##### 이전 Desktop 전용 정책 검증 (2026-10-07, Storybook / Chrome)
+
+- Dashboard Story 9개 × 1280·1024·1023·390 = 36개 조합 통과. 대표 Compact 메뉴는 Desktop 표시, Mobile 높이 0. Sidebar는 Desktop 폭 272px, Mobile DOM에서 제거된다.
+- 1280: GNB + LNB Main 폭 1008px. 1024: Main 폭 752px. 1023·390: Main이 각각 1023·390px 전체 폭을 사용하며 빈 sidebar 공간 없음. 모든 조합에서 문서 및 Main 가로 overflow 0.
+- Mobile: Dashboard 로컬 메뉴·Compact 상태 필터가 접근성 tree에 없고 Tab으로 접근되지 않는다. GNB Sheet에는 기존 전역 메뉴만 표시하고 Dashboard 업무 메뉴는 없다.
+- Desktop LNB hover·active 변경·그룹 열림/닫힘 통과. 열린 LNB Profile portal은 1024 → 1023 전환 시 함께 제거되고 1024로 복귀하면 sidebar가 다시 표시된다.
+- 패키지 build·typecheck 통과. Story 수정 후 루트 `tsc -b` 통과. 브라우저 runtime error 없음.
+
+##### 이전 검증 이력
+
+아래 모바일 메뉴 관련 기록은 이전 정책의 이력이다. 현재 정책은 §9이며 모든 viewport에서 Dashboard 메뉴·콘텐츠를 유지하고 최소 폭 이하에서 가로 스크롤한다.
+
+- 1280: 문서 스크롤 없음(`scrollHeight == clientHeight`), Main만 스크롤(scrollTop 400에서 GNB y 0·LNB y 70 유지). h1 1개, landmark 위 목록.
+- 1024 desktop / 1023 mobile 전환, 768, 390: 문서·Main 가로 overflow 0. GNB-only, LNB-only, Long Content(긴 제목 + 1600px 내용) 모두 overflow 0.
+- 390: 모바일 Sheet에 전역/로컬 그룹 표시, current 표시.
+- 2026-10-06 `Third Level`: 1280·1024 GNB 70 + LNB 272(3뎁스 active "전체 업무", 상위 "업무 관리"·"업무 현황" current), 1023·768·390 GNB 56 + 햄버거, LNB `display:none`, Sheet에서 업무 메뉴 → 업무 관리(+12) → 업무 현황(+24) → 3뎁스 링크, active 동일. Sheet에서 다른 3뎁스를 고르면 LNB active도 같이 바뀐다. 5개 폭 모두 문서 가로 overflow 0.
+- 2026-10-06 `LNB Only` 모바일: 1280·1024 GNB 없음 + LNB 272, radius `18 0 0 18`; 1023·768·390 상단 바 56(햄버거 1개, header 1개) + LNB 숨김, radius `12 12 0 0`, 가로 overflow 0. Sheet는 "업무 메뉴" 하나(전역 메뉴 없음), active 동일. `Dashboard Layout`·`Third Level`(GNB + LNB)은 5개 폭 모두 GNB 하나(1023 이하 56 + 햄버거 1개), Sheet 전역 + 업무 메뉴 그대로.
+- 2026-10-06 Brand ownership: `Dashboard Layout`·`Third Level` 1280·1024 brand = GNB 1개(LNBBrand 없음, LNB 메뉴 top 98 = GNB 70 + 28), 1023·390 GNB 모바일 바 1개. `LNB Only` 1280·1024 LNBBrand 1개(상단 바 없음), 1023·390 Local 모바일 바 1개. 서비스명은 모든 폭에서 1개. 수치는 `lnb.md` §8.
+- 기존 Pattern(GNB 70/12px 띠, LNB 272, Data Table, Filter Bar) Story 오류·overflow 없음.
+- `npm run typecheck`, `npm run build` 통과.
+
+#### 14. 관련 파일
+
+```
+packages/ui/src/patterns/dashboard-layout/{dashboard-layout.tsx,index.ts}
+packages/ui/src/patterns/page-header/{page-header.tsx,index.ts}
+packages/ui/src/theme/{dashboard-layout.css,page-header.css}
+src/patterns/dashboard-layout.stories.tsx
+```
+
+
+</details>
diff --git a/docs/patterns/dashboard-status-static.html b/docs/patterns/dashboard-status-static.html
new file mode 100644
index 0000000..cab5578
--- /dev/null
+++ b/docs/patterns/dashboard-status-static.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>HM Dashboard Status Contract - Static HTML</title>
+    <link rel="stylesheet" href="../../packages/ui/dist/theme.css" />
+    <link rel="stylesheet" href="../../src/patterns/dashboard-status-contract.css" />
+    <style>
+      @font-face { font-family: "Noto Sans KR"; src: url("../../public/fonts/NotoSansKR-variable.ttf") format("truetype"); font-weight: 100 900; }
+      :root {
+        --dashboard-work-progress: var(--hm-dashboard-status-active);
+        --dashboard-work-hold: var(--hm-dashboard-status-hold);
+        --dashboard-work-issue: var(--hm-dashboard-status-issue);
+        --dashboard-work-surface: var(--hm-sem-palette-green-dark-2);
+      }
+      body { margin: 0; min-width: 960px; background: var(--hm-sem-bg-content); color: var(--hm-sem-fg-primary); font-family: "Noto Sans KR", sans-serif; }
+      main { max-width: 1120px; margin: 0 auto; padding: 32px; }
+      .panel { padding: 24px; border-radius: var(--hm-radius-container); background: var(--hm-sem-bg-surface); box-shadow: var(--hm-card-shadow); }
+      .toolbar, .filters, .badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+      .toolbar { justify-content: space-between; margin-bottom: 20px; }
+      .filters { padding: 10px; border-radius: var(--hm-radius-container); background: var(--dashboard-work-surface); }
+      button { min-height: 32px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent); border-radius: var(--hm-radius-input); background: color-mix(in srgb, var(--hm-sem-palette-black) 35%, transparent); color: var(--hm-sem-palette-white); font: inherit; cursor: pointer; }
+      button:hover { background: color-mix(in srgb, var(--hm-sem-palette-black) 55%, transparent); }
+      button:focus-visible { outline: var(--hm-dashboard-nav-focus-outline); }
+      button[aria-pressed="true"] { background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent); border-color: var(--hm-sem-palette-green-light-4); }
+      button[data-filter="issue"] { background: color-mix(in srgb, var(--hm-sem-action-destructive) 25%, transparent); }
+      [data-slot="badge"] { background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent); }
+      [data-slot="badge"][data-status] { color: var(--dashboard-status-color); border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent); }
+      [data-status="active"] { --dashboard-status-color: var(--dashboard-work-progress); }
+      [data-status="hold"] { --dashboard-status-color: var(--dashboard-work-hold); }
+      [data-status="done"] { --dashboard-status-color: var(--hm-dashboard-status-done); }
+      [data-status="issue"][data-issue="true"] { --dashboard-status-color: var(--dashboard-work-issue); }
+      .count { margin-left: auto; color: var(--hm-sem-fg-secondary); }
+      .result { margin-top: 16px; }
+      [hidden] { display: none !important; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="panel" aria-labelledby="title">
+        <div class="toolbar">
+          <div><h1 id="title">Dashboard 업무 상태</h1><p id="summary" role="status">전체 업무 0건</p></div>
+          <div class="filters" role="group" aria-label="업무 상태 필터" data-status-filter-group></div>
+        </div>
+        <div class="result" aria-live="polite"><div class="badges" id="results" aria-label="필터 결과"></div><p id="empty" hidden>조건에 맞는 업무가 없습니다.</p></div>
+      </section>
+    </main>
+    <script>
+      const contract = {
+        filters: ["all", "active", "hold", "done", "issue"],
+        labels: { all: "전체", active: "진행", hold: "보류", done: "완료", issue: "이슈" },
+        records: [
+          { name: "대시보드 화면 검토", status: "active" },
+          { name: "업무 자료 정리", status: "hold", issue: true },
+          { name: "현장 점검 보고", status: "done" },
+        ],
+      };
+      const state = { selected: "all" };
+      const matches = (record, filter) => filter === "all" || (filter === "issue" ? record.issue === true : record.status === filter);
+      const count = (filter) => contract.records.filter((record) => matches(record, filter)).length;
+      const group = document.querySelector("[data-status-filter-group]");
+      const results = document.querySelector("#results");
+      const summary = document.querySelector("#summary");
+      const empty = document.querySelector("#empty");
+      function render() {
+        group.replaceChildren(...contract.filters.map((filter) => {
+          const button = document.createElement("button");
+          button.type = "button";
+          button.dataset.filter = filter;
+          button.dataset.status = filter;
+          if (filter === "issue") button.dataset.issue = "true";
+          button.setAttribute("aria-pressed", String(state.selected === filter));
+          button.setAttribute("aria-controls", "results");
+          button.textContent = `${contract.labels[filter]} ${count(filter)}건`;
+          button.addEventListener("click", () => { state.selected = filter; render(); });
+          return button;
+        }));
+        const filtered = contract.records.filter((record) => matches(record, state.selected));
+        results.replaceChildren(...filtered.map((record) => {
+          const item = document.createElement("span");
+          item.dataset.slot = "badge";
+          item.dataset.status = record.status;
+          if (record.issue) item.dataset.issue = "true";
+          item.textContent = `${record.name} · ${contract.labels[record.status]}${record.issue ? " · 이슈" : ""}`;
+          return item;
+        }));
+        summary.textContent = `${contract.labels[state.selected]} 업무 ${filtered.length}건`;
+        empty.hidden = filtered.length !== 0;
+      }
+      render();
+    </script>
+  </body>
+</html>
diff --git a/docs/patterns/data-table.md b/docs/patterns/data-table.md
new file mode 100644
index 0000000..838d4cc
--- /dev/null
+++ b/docs/patterns/data-table.md
@@ -0,0 +1,103 @@
+# Data Table (Pattern)
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7, Pattern 절)를 따른다. 이 문서는 Data Table Pattern 고유의 API·상태·결정만 기록한다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-03 |
+| 기반 | `@tanstack/react-table` 9.2.4 + HM Table primitive |
+| 대표 Story | `Patterns/Data/Data Table` → `Data Table` (`With Filter Bar`는 숨김 verification) |
+| 보류 | §12 |
+
+## 2. 목적 / 사용 범위
+
+업무 목록 화면의 표. 기존 `Table`(presentation primitive)에 정렬·행 선택·페이지·열 표시·로딩/빈 상태·행 액션을 조합한다. `Table`에는 어떤 로직도 넣지 않았다. 서버 데이터 호출·서버 사이드 페이지/정렬·가상 스크롤은 범위 밖이다.
+
+## 3. 구성 요소
+
+`DataTable`, `useDataTable`, `DataTableColumnHeader`, `DataTableViewOptions`, `DataTablePagination`, `dataTableSelectColumn`. (`DataTable`이 `DataTablePagination`을 기본으로 포함한다.)
+
+## 4. 구조
+
+```
+Table primitive  (정적 표시, 변경 없음)
+  ↑ 조합
+DataTable pattern ── useDataTable (TanStack useTable + 기능 등록)
+  ├ DataTableColumnHeader   정렬 버튼
+  ├ dataTableSelectColumn   HM Checkbox 선택 열
+  ├ DataTableViewOptions    HM Dropdown Menu + Button
+  └ DataTablePagination     HM Pagination + Select(페이지 크기) + 선택 수 요약
+```
+
+## 5. Public API
+
+```tsx
+const table = useDataTable({ columns, data, getRowId, initialState })   // TanStack TableOptions에서 features만 뺀 것
+<DataTableViewOptions table={table} labels={{ name: "이름" }} />
+<DataTable table={table} loading emptyMessage="..." pagination pageSizeOptions={[10, 20, 50]} />
+```
+
+- `columns`: `DataTableColumnDef<TData>[]`(TanStack `ColumnDef`, 등록된 기능 포함). 정렬 header는 `({ column }) => <DataTableColumnHeader column={column} title="이름" />`.
+- `DataTable`: `table`, `loading`, `emptyMessage`, `pagination`, `pageSizeOptions`, `className`. 그 외 TanStack 옵션은 `useDataTable`에 그대로 전달한다(복제 prop 없음).
+- `data`와 `columns`는 참조가 안정적이어야 한다(모듈 상수, `useMemo`, state).
+- 타입: `DataTableColumnDef`, `DataTableInstance`, `DataTableOptions`, `DataTableProps`.
+
+## 6. 상태 관리
+
+TanStack Table v9의 state model 그대로. v9는 기능을 명시 등록하는 방식(`tableFeatures`)이라 v8 예제(`useReactTable`, `getCoreRowModel`)와 다르다. 등록한 기능: column filtering, global filtering, row sorting, row selection, row pagination, column visibility와 각 row model(`filteredRowModel`, `sortedRowModel`, `paginatedRowModel`), `includesString`·`equalsString` filter, `alphanumeric`·`basic`·`datetime` sort.
+
+- 상태는 TanStack 내부가 소유한다(필요하면 `useDataTable`에 `state` / `atoms`로 제어). 검색은 `table.setGlobalFilter`, 열 필터는 `table.getColumn(id)?.setFilterValue`, 초기화는 `resetGlobalFilter(true)` / `resetColumnFilters(true)`로 한다. 필터 변경 시 TanStack이 page index를 0으로 되돌린다.
+- error는 Data Table이 소유하지 않는다(소비자가 Alert / Toast로 처리).
+
+조회 버튼을 사용하는 목록은 [FilterBar의 draft / applied 소비 예제](filter-bar.md#61-조회-버튼으로-적용하는-소비-예제)를 따른다. 입력 중에는 draft만 바꾸고 조회 시 table 필터 또는 `useMemo`로 만든 `data`를 갱신한다. 초기화는 입력값과 적용값, 사용 중인 table 필터와 페이지를 소비자가 함께 처리한다. 대표 Data Table Story는 표 기능의 운영 Reference이며, `WithFilterBarStory`(`patterns-data-data-table--with-filter-bar-story`)는 **입력 즉시 적용**을 확인하는 숨김 verification이다. 조회 버튼으로 조건을 확정하는 공개 API나 서버 호출 기능은 제공하지 않는다.
+
+## 7. 조합 컴포넌트
+
+Table, Checkbox(header mixed), Pagination, Select(페이지 크기), Dropdown Menu(열 표시), Button(열 표시 trigger), Skeleton(loading). 행 액션은 소비자가 열 정의에서 Dropdown Menu(또는 Context Menu)로 구성한다. Story는 행 액션 결과를 Sonner `toast`로 보이지만 Pattern은 Sonner에 의존하지 않는다.
+
+## 8. Styling / Token
+
+Header·cell·row·selected 면은 `packages/ui/src/theme/table.css`(`--hm-table-*`)가 소유하고 Pattern은 다시 정의하지 않는다. 컬러 역할(2026-10-06): 선택 행 면 = `--accent` 45%(hover·selected+hover와 같은 Soft Surface, Select Highlight / Selected와 동일한 Accent 45% 정책), 선택 Checkbox = `--hm-sem-state-active`(Light 2). 면은 hover와 같으므로 선택 여부는 Checkbox와 선택 수 요약으로 구분한다. Pattern 전용: `packages/ui/src/theme/data-table.css`의 `--hm-data-table-*`(footer gap·padding, summary 색·크기, 정렬 버튼 간격·아이콘 크기·활성 색, empty padding·색, skeleton 높이). 신규 Primitive·Semantic 없음.
+
+- Loading: header 유지, body는 Skeleton 행(최대 5행), `aria-busy`.
+- Sort Direction Accent: `--hm-data-table-sort-active-color`는 현재 `--hm-sem-palette-green-light-3`(Green Light 3 palette)를 참조한다. 별도 State Semantic으로 승격하지 않았으며 Primary/Active/Accent 역할에 자동 연결되지 않는다. Token 이름의 `active`는 Control Active Semantic 계약을 뜻하지 않는다.
+- Empty: 한 행을 열 수만큼 `colSpan`, 문구는 `emptyMessage`(원본 0건과 필터 결과 0건 동일 UI).
+
+## 9. Storybook
+
+- `Patterns/Data/Data Table` → `Data Table`(대표: 선택·정렬·열 표시·행 액션·페이지 크기·페이지), `With Filter Bar`(숨김 Filter Bar 연동 검증). verification: `WithFilterBar`, `Loading`, `Empty`.
+- 샘플 데이터는 `src/patterns/sample-users.ts`(47행, 네트워크 없음).
+
+## 10. Accessibility
+
+semantic `<table>` 유지. 정렬 열 `<th aria-sort>`(ascending / descending), 정렬 버튼 `aria-label`("이름 정렬, 오름차순"), 버튼이라 Enter / Space 동작. 선택 Checkbox는 `aria-label`("현재 페이지 전체 선택", "행 선택"), header는 `aria-checked="mixed"`. 선택 수 요약은 `role="status"`. Pagination은 기존 `nav` + `aria-current` / `aria-disabled`.
+
+## 11. Responsive
+
+Table primitive의 container가 가로 스크롤한다. Pattern은 `[data-slot="data-table"] { min-width: 0 }`로 grid / flex 부모 안에서 페이지를 밀지 않게 한다. 390px에서 페이지 가로 overflow 없음(표만 520px 안에서 스크롤), footer는 요약 / 페이지 크기 / 페이지 이동이 줄바꿈된다. 카드형 변환은 없다.
+
+## 12. 보류 / 비범위
+
+- column resizing·pinning, grouping, tree, virtualization, infinite scroll, drag reorder, 서버 사이드 페이지/정렬, 편집 가능한 표.
+- 선택 action toolbar(선택 수 요약만 제공), 행 클릭 이동, 다중 정렬 UI.
+- 정렬 header와 열 표시 메뉴의 열 이름: header가 컴포넌트일 수 있어 메뉴 문구는 `labels`로 받는다.
+- 확인하지 못한 것: 스크린 리더 낭독, 키보드 Tab 순서 전체, 페이지 크기 Select 조작, 행 선택 + 페이지 이동 후 선택 유지.
+- `With Filter Bar` verification Story의 DatePicker / Combobox는 `controlled={true}`를 사용한다. 초기화는 부모의 검색·상태·날짜·부서 state와 `table.resetGlobalFilter(true)` / `table.resetColumnFilters(true)`를 함께 비운다. 날짜·부서의 undefined 초기화는 선택값을 비우며, 해당 목적의 `key` remount를 제거했다. 외부 값 변경은 자식 콜백을 호출하지 않으므로 테이블 필터는 소비자가 명시적으로 초기화해야 한다. 팝업 닫기·검색어·달력 월 초기화는 별도 계약이며, 이 Story는 일반 운영 Reference로 승격하지 않는다.
+- **Legacy 호환 범위**: `controlled`를 생략한 DatePicker / Combobox는 기존 `value !== undefined` 판정을 유지한다. 외부 undefined 초기화 시 내부 값이 다시 표시될 수 있으므로, 과거 `key` remount 우회 설명은 이 Legacy 호출에 한정한다. 신규 연동은 명시적 Controlled 모드를 사용한다.
+
+## 13. 관련 파일 / 검증
+
+- 2026-10-08: `With Filter Bar` verification Story 소스를 격리 Headless Edge 환경에서 실행했다. 부서(검색/global filter) + 상태/등록일(column filter)로 1행 조회 후 초기화하면 전체 47개와 기존 표 표시를 복원하고 날짜·부서 Trigger DOM을 유지했다. 영향 범위 타입 검사 통과. 공용 dist / Storybook 빌드 및 전체 시각 회귀는 수행하지 않았다.
+
+```
+packages/ui/src/patterns/data-table/{data-table.tsx,index.ts}
+packages/ui/src/theme/data-table.css
+packages/ui/src/index.ts, theme.css, tailwind.css(@source patterns)
+src/patterns/data-table.stories.tsx, sample-users.ts
+```
+
+- `npm run typecheck`, `npm run build` 통과(2026-10-03).
+- Browser 확인: 정렬 none → asc → desc → none과 `aria-sort`, header mixed / 전체 / 해제와 선택 수 요약·`data-state="selected"`, 페이지 이동, 열 숨김(메뉴 유지), 행 액션이 행 데이터를 받음(toast), Loading(skeleton 30개, `aria-busy`), Empty(`colSpan`), 390px overflow 없음. 연동은 `filter-bar.md` §13.
diff --git a/docs/patterns/filter-bar.md b/docs/patterns/filter-bar.md
new file mode 100644
index 0000000..a3dcec9
--- /dev/null
+++ b/docs/patterns/filter-bar.md
@@ -0,0 +1,149 @@
+# Filter Bar (Pattern)
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7, Pattern 절)를 따른다.
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (현재 HM 규격) |
+| 기준일 | 2026-10-03 |
+| 기반 | HM primitives 조합 (의존성 추가 없음) |
+| 대표 Story | `Patterns/Data/Filter Bar` → `Filter Bar`, 연동 검증은 `Patterns/Data/Data Table` → `With Filter Bar` (숨김 verification) |
+| 보류 | §12 |
+
+## 2. 목적 / 사용 범위
+
+목록·업무 화면의 검색 조건 행. Data Table 없이도 쓸 수 있고, 값은 소비자가 소유한다. ui-viz의 Search Field(선택값 칩 + 후보)는 별개의 복합 컨트롤이라 이 Pattern에 넣지 않았다.
+
+## 3. 구성 요소
+
+`FilterBar`(flex wrap 레이아웃), `FilterBarSearch`(검색 아이콘 + HM Input + 지우기), `FilterBarActions`(행 끝 정렬: 초기화·조회 등). 나머지는 HM Select / Combobox / Date Picker / Button을 children으로 직접 둔다. schema 기반 필터 생성은 없다.
+
+## 4. 구조
+
+```tsx
+<FilterBar>
+  <FilterBarSearch value={q} onValueChange={setQ} placeholder="이름·부서 검색" />
+  <Select>…</Select>  <Combobox … />  <DatePicker … />
+  <FilterBarActions><Button variant="cancel" appearance="outline">초기화</Button></FilterBarActions>
+</FilterBar>
+```
+
+## 5. Public API
+
+- `FilterBar`, `FilterBarActions`: `div` props. wrapper에 role을 두지 않는다.
+- `FilterBarSearch`: `value`, `onValueChange`(필수), `size`(Input size, 기본 `medium`), `placeholder`(기본 "검색"), 나머지 `input` props. `aria-label` 기본값은 placeholder. 값이 있으면 지우기 버튼(`aria-label="검색어 지우기"`).
+- Reset은 소비자가 Button과 callback으로 구성한다(Pattern에 `onReset` prop 없음).
+- Dashboard의 빠른 상태 전환(`all / active / hold / done / issue`)은 `FilterBar`가 소유하지 않는다. `FilterBar`는 검색·Select·Combobox·DatePicker 등의 조회 조건 layout으로 유지하고, 상태 필터는 Dashboard status contract를 소비하는 별도 조합으로 배치한다.
+
+## 6. 상태 관리
+
+Pattern은 상태가 없다. Data Table과 연결할 때는 검색 → `table.setGlobalFilter`, 열 선택 → `column.setFilterValue`로 소비자가 잇는다(`data-table.md` §6).
+
+FilterBar에는 `onSearch / onSubmit / onReset` 공개 API나 조회 시점 강제가 없다. 검색어 지우기도 `onValueChange("")`만 호출한다. 즉시 적용할지 조회 버튼으로 적용할지, 초기화 후 바로 전체 목록을 복원할지는 소비자가 결정한다. [대표 Story](../../src/patterns/filter-bar.stories.tsx)의 조회 버튼에는 실행 callback이 없고 조건 수는 입력값으로 계산한다. [DataTable 연동 verification](../../src/patterns/data-table.stories.tsx)의 `WithFilterBarStory`는 입력 즉시 table 필터를 변경하며 조회 버튼은 없다. 이 둘을 조회 버튼 적용 계약으로 해석하지 않는다.
+
+DatePicker / Combobox는 대표 Story에서 `controlled={true}`로 사용한다. 부모가 각 `value`를 소유하고 초기화 시 `setDate(undefined)` / `setCategory(undefined)`로 비우므로, 선택값 초기화 목적의 `key` remount는 필요 없다. 검색·상태 등 나머지 조회 조건도 부모가 함께 초기화한다. FilterBar 공개 API와 초기화 / 조회 Outline 버튼 세트는 유지한다. 외부 값 초기화는 자식 `onValueChange`를 호출하지 않으며, 팝업 닫기·검색어·달력 월 초기화를 보장하지 않는다.
+
+### 6.1 조회 버튼으로 적용하는 소비 예제
+
+`draft`는 입력·선택 중인 조건, `applied`는 실제 목록에 적용한 조건이다. 아래 예는 조회 클릭에만 `draft`를 복사하고, 초기화 클릭에는 두 상태와 페이지를 함께 초기화해 전체 목록을 즉시 복원한다. Pattern의 강제 동작이 아닌 소비 정책이다. Theme/Tailwind CSS는 [React 연결 순서](../guidelines/runtime-portability.md#2-실제-hm-계약과-파일-경로)에 따라 앱 entry에서 로드한다.
+
+```tsx
+import { useMemo, useState } from "react"
+import {
+  Button, DataTable, FilterBar, FilterBarActions, FilterBarSearch,
+  Select, SelectContent, SelectItem, SelectTrigger, SelectValue, useDataTable,
+  type DataTableColumnDef,
+} from "@hm-design/ui"
+
+type User = { id: string; name: string; status: "active" | "inactive" }
+type Conditions = { query: string; status: string }
+const empty: Conditions = { query: "", status: "all" }
+const rows: User[] = [
+  { id: "U-1", name: "김한맥", status: "active" },
+  { id: "U-2", name: "이한맥", status: "inactive" },
+]
+const columns: DataTableColumnDef<User>[] = [
+  { accessorKey: "name", header: "이름" },
+  { accessorKey: "status", header: "상태", cell: ({ row }) => row.original.status === "active" ? "활성" : "비활성" },
+]
+
+export function QueryList() {
+  const [draft, setDraft] = useState<Conditions>({ ...empty })
+  const [applied, setApplied] = useState<Conditions>({ ...empty })
+  const data = useMemo(() => rows.filter(row =>
+    row.name.toLocaleLowerCase().includes(applied.query.trim().toLocaleLowerCase()) &&
+    (applied.status === "all" || row.status === applied.status)
+  ), [applied])
+  const table = useDataTable({ columns, data, getRowId: row => row.id })
+  const apply = () => { setApplied({ ...draft }); table.setPageIndex(0) }
+  const reset = () => {
+    setDraft({ ...empty })
+    setApplied({ ...empty })
+    table.setPageIndex(0)
+  }
+  return <>
+    <FilterBar>
+      <FilterBarSearch value={draft.query} onValueChange={query => setDraft(s => ({ ...s, query }))} placeholder="이름 검색" />
+      <Select value={draft.status} onValueChange={status => setDraft(s => ({ ...s, status }))}>
+        <SelectTrigger size="medium" aria-label="사용자 상태"><SelectValue /></SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">전체 상태</SelectItem>
+          <SelectItem value="active">활성</SelectItem>
+          <SelectItem value="inactive">비활성</SelectItem>
+        </SelectContent>
+      </Select>
+      <FilterBarActions>
+        <Button type="button" variant="cancel" appearance="outline" size="default" onClick={reset}>초기화</Button>
+        <Button type="button" variant="primary" appearance="outline" size="default" onClick={apply}>조회</Button>
+      </FilterBarActions>
+    </FilterBar>
+    <p role="status">조회 결과 {data.length}건</p>
+    <DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
+  </>
+}
+```
+
+이 예의 사용자 상태는 Dashboard 업무 상태와 다른 도메인이다. `data`/`columns` 참조를 안정적으로 유지하고 적용 조건으로 만든 결과만 DataTable에 전달한다. table 내부 global/column 필터를 사용하는 방식이면 조회 callback에서 해당 필터를 갱신하고 초기화 callback에서 `resetGlobalFilter(true) / resetColumnFilters(true)`도 호출한다. 서버 조회라면 `applied`를 요청 조건으로 사용하고 결과·loading·error는 소비자가 관리한다. 코드·Props는 공개 소스와 대조했으며 이 문서 작업에서 실행 검증은 하지 않았다.
+
+## 7. 조합 컴포넌트
+
+Input, Select, Combobox, Date Picker, Button(그 외 Popover 등 자유). 각 컨트롤의 모양·상태·접근성은 해당 컴포넌트가 소유한다.
+
+## 8. Styling / Token
+
+레이아웃만: `packages/ui/src/theme/filter-bar.css`의 `--hm-filter-bar-*`(gap 8px, control 폭 180px, search 폭 280px, 아이콘 크기·위치·색). 검색 텍스트 시작점은 아이콘 inset 12px + 크기 16px + gap 8px이며, Input의 Focus / Error / Readonly 상태에서도 같은 위치를 유지한다(Input 자체 CSS는 변경하지 않음). 직접 자식인 Select / Combobox / Date Picker trigger와 Input에 컨트롤 폭을 준다. 640px 이하: search는 한 줄 전체, 컨트롤은 한 줄에 2개씩, actions는 한 줄에 우측 정렬. spacing 전역 scale이 없어 값은 Pattern 내부 값이다.
+
+## 9. Storybook
+
+`Patterns/Data/Filter Bar` → `Filter Bar`: 검색, 상태 Select, 분류 Combobox, 날짜 Date Picker, 초기화 / 조회, 적용된 조건 수.
+
+대표 Story의 초기화 / 조회는 목록의 반복 조회·보조 작업 세트다. [Button 사용 위치와 버튼 세트 규칙](../components/button.md#5-사용-위치와-버튼-세트)에 따라 둘 다 `appearance="outline"`, `size="default"`를 사용하고 역할만 `cancel` / `primary`로 구분한다. FilterBar는 Button appearance를 강제하지 않으며 소비자가 같은 세트의 appearance와 size를 맞춘다. 대표 Story의 조회는 실행 callback이 없는 조합 예시이고, 적용된 조건 수는 입력 상태에 즉시 반영된다.
+
+## 10. Accessibility
+
+검색은 `type="search"` + `aria-label`, 아이콘은 `aria-hidden`. 컨트롤마다 `aria-label`을 준다(Story 기준). Reset·Clear는 `button`. wrapper는 시맨틱 변경 없음. 브라우저 기본 검색 지우기 버튼은 숨기고 자체 버튼을 쓴다.
+
+## 11. Responsive
+
+390px: search 전체 폭, 상태 / 분류 한 줄, 날짜 한 줄, actions 우측 정렬. 페이지 가로 overflow 없음. 모바일 Filter Drawer는 만들지 않았다.
+
+## 12. 보류 / 비범위
+
+active filter chip·필터 수 배지 시스템, schema-driven 필터, URL / localStorage 연동, 고급 필터 Popover, 날짜 범위.
+
+**Legacy 호환 범위**: DatePicker / Combobox에서 `controlled`를 생략하면 기존처럼 `value={undefined}`를 Uncontrolled로 취급하므로, 외부 undefined 초기화 시 내부 값이 다시 표시될 수 있다. 기존 `key` remount 우회는 이 Legacy 방식에서 사용할 수 있으나, 대표 Story는 명시적 Controlled 모드로 전환하고 해당 우회를 제거했다. Combobox의 `""`는 유효한 옵션 값이므로 일반적인 선택 없음 계약으로 대체하지 않는다.
+
+## 13. 관련 파일 / 검증
+
+- 2026-10-08: 대표 Story 소스를 격리 Headless Edge 환경에서 실행해 검색·분류·날짜 초기화, 적용 조건 수 0, 두 Trigger DOM 동일성 유지를 확인했다. 선택값 초기화 목적의 remount가 없다. 영향 범위 타입 검사 통과. 공용 dist / Storybook 빌드 및 전체 시각 회귀는 수행하지 않았다.
+
+```
+packages/ui/src/patterns/filter-bar/{filter-bar.tsx,index.ts}
+packages/ui/src/theme/filter-bar.css
+src/patterns/filter-bar.stories.tsx
+```
+
+- `npm run typecheck`, `npm run build` 통과(2026-10-03).
+- Browser 확인(`With Filter Bar`, 47행): 검색 "설계" → 10행, + 상태 "대기" → 2행, + 날짜 10/11 → 1행, 검색 "zzzz" → 빈 결과(문구, `colSpan`), 초기화 → 47행 복원. 390px에서 위 배치, overflow 없음.
diff --git a/docs/patterns/gnb.md b/docs/patterns/gnb.md
new file mode 100644
index 0000000..ef9873b
--- /dev/null
+++ b/docs/patterns/gnb.md
@@ -0,0 +1,283 @@
+# GNB (Pattern)
+
+> **SINGLE NAVIGATION MODE.** 독립 GNB / LNB / Dashboard Mode는 함께 사용하지 않는다. 2026-10-08 확정: GNB ONLY는 기존 LNB 부품을 재사용하는 내부 Sidebar를 포함할 수 있다(§15). [공통 정책](../guidelines/navigation-single-mode.md)이 이전 조합 기록보다 우선한다.
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6.10 Pattern 계층, §6.11 Layout 단계 기준)를 따른다.
+
+```text
+Layout visual reference: 외부 ui_viz Reference (ZIP 미포함) (Patterns/GNB, Variant B Top-header)
+Implementation: current @hm-design/ui primitives / patterns
+```
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (2026-10-03 ui-viz 시각 재정합) |
+| 기반 | HM primitives 조합 (새 dependency 없음) |
+| 대표 Story | `Patterns/Layout/GNB` → `GNB` (verification: Default, Navigation Menu Open, User Menu Open, Long Labels, With Logo, Utilities, Mobile, Mobile Menu Open) |
+| 이력 | 첫 구현은 밝은 surface 64px였다. Layout은 ui-viz 시각 우선이라는 결정(지침 §6.11)으로 green 70px로 재정합했다 |
+| 보류 | §13 |
+
+## 2. 목적 / 사용 범위
+
+서비스 전역 상단 바(브랜드, 주 메뉴, 사용자). 새 Navigation/Menu primitive가 아니라 기존 primitive의 조합이다. 메뉴 데이터는 소비자가 children으로 그린다.
+
+| | 역할 |
+|---|---|
+| GNB | 전역 영역·서비스 이동 |
+| LNB | 현재 영역 내부의 세부 navigation (`lnb.md`) |
+| Dashboard | 별도의 Dashboard Navigation Mode. GNB와 결합하지 않는다 |
+
+ui-viz에서 GNB(Variant B, top-header)와 LNB(Variant A, sidebar)는 서로 대체하는 별개 Layout이다. 독립 Navigation Mode의 혼합은 금지한다. GNB ONLY의 내부 Sidebar에서 LNB 구현 부품을 재사용하는 것은 별도 LNB Mode 추가가 아니다(§15).
+
+## 3. 구성 요소
+
+| export | 역할 |
+|---|---|
+| `GNB` | `<header>` 바. `sticky` prop |
+| `GNBBrand` | 브랜드 링크(`<a>`, `asChild` 가능). 로고(`img`/`svg`, 있을 때만) + `<span>`(`<small>` eyebrow, `<strong>` 이름) |
+| `GNBNav` | 주 메뉴 영역(desktop 전용). 안에 `NavigationMenu viewport={false}` |
+| `GNBUtilities` | 오른쪽 영역 |
+| `GNBUser` | 사용자 trigger(Avatar + 이름/역할, 글자는 mobile에서 숨김). `DropdownMenuTrigger asChild`로 사용 |
+| `GNBMobileMenu` / `GNBMobileLink` / `GNBMobileGroup` | mobile 햄버거 + Sheet + 링크/그룹 |
+
+검색·알림은 컴포넌트가 아니다. ghost Button + Tooltip + Badge + Popover(+Command) 조합을 `GNBUtilities`에 둔다(Story `Utilities`).
+
+## 4. 구조
+
+```tsx
+<GNB sticky>
+  <GNBMobileMenu title="메뉴">…<GNBMobileLink href active>…</GNBMobileLink></GNBMobileMenu>
+  <GNBBrand href="/"><span><small>한맥 업무 시스템</small><strong>프로젝트 대시보드</strong></span></GNBBrand>
+  <GNBNav>
+    <NavigationMenu viewport={false} aria-label="주 메뉴">
+      <NavigationMenuList>
+        <NavigationMenuItem><NavigationMenuLink href active>대시보드</NavigationMenuLink></NavigationMenuItem>
+        <NavigationMenuItem value="projects">
+          <NavigationMenuTrigger aria-current="page">프로젝트</NavigationMenuTrigger>
+          <NavigationMenuContent><ul><li><NavigationMenuLink href>…</NavigationMenuLink></li></ul></NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  </GNBNav>
+  <GNBUtilities>
+    <DropdownMenu><DropdownMenuTrigger asChild><GNBUser name description><Avatar/></GNBUser></DropdownMenuTrigger>…</DropdownMenu>
+  </GNBUtilities>
+</GNB>
+```
+
+`viewport={false}`가 필수다: 2Depth 패널은 각 trigger 아래에서 content-width(`max-content`)로 열리며 짧은 패널도 trigger 폭 이상을 유지한다. trigger 중심에 정렬하고 viewport 가장자리에서는 clamp한다. 긴 라벨은 한 줄을 유지하며 최대 가용 폭을 넘으면 패널 안에서 가로 스크롤한다(공유 viewport는 메뉴 전체 아래에 중앙 정렬된다).
+
+## 5. ui-viz 비교 (2026-10-03, 원본: `dashboard-composition.md` §19, `top-header-specimen.css/jsx`)
+
+> HISTORICAL_RECORD: 아래 표는 2026-10-03 비교 기록이다. 현재 패널 폭·정렬은 §4, Current/Open 우선순위는 §7을 따른다.
+
+| 항목 | ui-viz | 기존 HM(첫 구현) | 최종 HM | 분류 |
+|---|---|---|---|---|
+| 높이 | Header 70 (위 4 + 메뉴 면 66) | 64 | 70 (`--hm-gnb-height`) | MATCHED |
+| 배경 | 세로 4-stop `#1F8265/#165C47/#114838/#08241C` 0/30/65/100%, 높이 82px(70+12), 반복 없음 | 흰 surface | 같은 stop(`--hm-green-tone-1~4`), 82px 단일 gradient | MATCHED |
+| 콘텐츠 접점 | 12px, 콘텐츠 상단 radius 12, 뒤로 gradient 연속 | 없음 | `::after` 12px strip(`--hm-gnb-join`). 콘텐츠가 positioned·뒤에 오고 radius를 가져야 한다 | IMPLEMENTATION_CHANGE |
+| 로고 | 있을 때만, 가로(로고 왼쪽·이름 오른쪽), 없으면 영역·간격 없음 | 이름만 | 같음. eyebrow(11/700, `#BDDFD4`) + 이름(16/700), 1px 글자 테두리 | MATCHED |
+| 메뉴 위치 | grid 좌우 같은 폭 → header 전체 가운데 | brand 옆 왼쪽 | `minmax(0,1fr) auto minmax(0,1fr)` grid, 중앙 오차 0 | MATCHED |
+| 메뉴 항목 | 위 4·높이 66, 최소 112, padding 0 16, radius 4 4 0 0, White 700 16, 아이콘 없음, 글자 테두리 없음 | 34px text button | 같음 (Navigation Menu를 GNB 범위 안에서만 재색칠) | MATCHED |
+| hover | Black 10% + White | `--accent` | Black 10% + White | MATCHED |
+| current / selected shape | Beige(`bg.content`) + `#123328`, 위 radius 4, 아래 좌우 12px 오목 곡선, hover가 덮지 않음 | 연한 초록 면 | 같음 (`data-active`/`aria-current` + `::before/::after` radial) | MATCHED |
+| 열림(open) | White 면 + `#123328`, 곡선 숨김 | `--accent` | 같음 (`data-state=open`). current와 구분 | MATCHED |
+| 2뎁스 패널 | White, 부모 폭, 항목 56/16/16·24·700 가운데, hover·현재 Beige, 하단 radius 8, shadow `0 6px 16px .1` | 320px floating | 같음 | MATCHED |
+| utility | 원형 버튼·avatar 제거(2026-10-01 결정). 이름·역할만 | 검색·알림·Avatar | 기본은 이름·역할만. 검색·알림은 선택 조합(흰 ghost Button) | MATCHED / 선택 조합 |
+| 사용자 영역 | 이름 16/700 + 역할 12 `#BDDFD4`, 오른쪽 끝 (ui-viz는 avatar 없음) | Avatar + 글자 | HM Avatar(default 32px) + 글자 + Dropdown Menu. mobile은 Avatar만 | INTENTIONAL_CHANGE (2026-10-03 사용자 지시로 Avatar 추가) |
+| desktop 구조 | Brand / Menu / Profile | 같음 | 같음 | MATCHED |
+| mobile 구조 | 없음(≤1100px/48px은 OUT_OF_SCOPE) | 햄버거 + Sheet | 유지. breakpoint 1024px | INTENTIONAL_CHANGE (ui-viz에 기준 없음) |
+| 2뎁스 열기 | hover/click/ArrowDown, Escape + focus 복귀 | Radix | Radix Navigation Menu(hover delay, 키보드 model) | IMPLEMENTATION_CHANGE |
+
+## 6. Public API
+
+- `GNB`: `header` props + `sticky`(기본 false). `data-slot="gnb"`, sticky면 `data-sticky`.
+- `GNBUser`: `button` props + `name`(필수), `description`, children = Avatar(default size, 이미지 실패 시 `AvatarFallback`). `aria-label` 기본 `"<name> 사용자 메뉴"`. `data-slot`은 spread 뒤에 둬서 `DropdownMenuTrigger asChild`가 덮지 않는다.
+- `GNBMobileMenu`: 햄버거(`lg:hidden`)와 Sheet. `title`, `side`, `open`/`defaultOpen`/`onOpenChange`. `GNBMobileLink`는 router `preventDefault`가 있어도 닫히도록 context로 직접 닫는다(Radix Close는 prevented click을 건너뛴다).
+
+## 7. Navigation 원칙
+
+- 주 메뉴는 HM Navigation Menu다. `<nav>` landmark는 Navigation Menu가 렌더하므로 `GNBNav`는 role을 만들지 않는다. Menubar는 쓰지 않는다.
+- 현재 위치: Link는 `active`(`data-active` + `aria-current="page"`), 하위가 있는 Trigger는 소비자가 `aria-current="page"`를 준다. 하위 링크의 `active`는 패널 안 Beige.
+- 상태 구분: Hover = Black 10%, Current = Beige + Primary, Open = White + Primary(패널과 이어짐). Current + Hover는 Current, Open + Hover는 Open을 유지하며 Current + Open에서는 Open visual이 우선한다. Focus는 GNB의 contextual navigation outline을 유지한다. Radix의 `data-state`, `data-active`, `aria-current`로 시각만 맞춘다.
+- Navigation Menu primitive는 수정하지 않았다. 모든 재색칠은 `[data-slot="gnb"] …` 안에서만 일어나며 Navigation Menu Story는 변하지 않는다.
+
+## 8. Desktop / Mobile
+
+**AI 구현 필수**: `GNBNav`는 모바일에서 숨겨질 뿐 모바일 메뉴를 자동 생성하지 않는다. 최초 구현부터 Desktop `GNBNav`와 Mobile `GNBMobileMenu`를 함께 넣고 같은 메뉴 데이터·현재 경로를 사용한다. `GNBMobileMenu`가 햄버거와 Sheet를 모두 제공하므로 별도 메뉴 버튼이나 Sheet를 추가하지 않는다. 기본 GNB는 `GNBMobileLink / GNBMobileGroup`을 사용한다. 링크 선택은 router의 `preventDefault()` 여부와 관계없이 Sheet를 닫으며, 닫기 버튼·Escape·focus trap·메뉴 버튼으로의 포커스 복귀는 기존 Sheet/Radix 동작을 유지한다.
+
+Reference는 [대표 Story 소스](../../src/patterns/gnb.stories.tsx)의 `All`(`Patterns/Layout/GNB → GNB`, `patterns-layout-gnb--all`) 안 Overview·Usage · GNB Sidebar를 좁은 폭에서 확인한다. `Mobile / Mobile Menu Open`은 숨김 verification이며 동작 검사에만 사용한다. Sidebar를 포함하면 [§15의 공개 API 소비 예제](#15-gnb-only-sidebar-composition-2026-10-08)를 따른다. LNB 모바일 링크 재사용 시 자동 닫기 Context가 다르므로 controlled Sheet를 route handler에서 닫고 Desktop 복귀 시에도 닫는다. 이는 GNB ONLY 내부 Composition이며 별도 LNB ONLY 모드가 아니다.
+
+- Desktop(1024px 이상): 위 표. 높이 70, 좌우 28, column gap 24.
+- Mobile(1023px 이하): 높이 56, padding 16. 주 메뉴·eyebrow·사용자 글자를 숨기고 햄버거(흰 ghost Button, `aria-label`)를 맨 앞에, 사용자는 같은 Avatar 하나만 보인다(중복 없음). 햄버거 → HM Sheet(left): 제목, 링크(44px), 그룹 제목. Radix가 focus trap·Escape·focus 복귀를 맡는다. breakpoint를 768에서 1024로 올린 이유: 메뉴 4개(항목 최소 112) 가운데 정렬은 그 이하에서 brand/profile이 너무 좁아진다. ui-viz에는 반응형 기준이 없다.
+- 중첩 그룹(2026-10-06): `GNBMobileGroup` 안에 `GNBMobileGroup`을 두면 한 단계 들여쓴다(`--hm-gnb-mobile-nested-indent` 12 = 링크 padding, 위 `--hm-gnb-mobile-nested-gap` 8). GNB 자체의 깊은 메뉴를 Sheet에 같은 트리로 보이기 위한 CSS만 추가했고 API·동작은 그대로다. 접기/펼치기와 상위 그룹 current 표시는 없다(모든 단계가 펼쳐진 목록, 현재 위치는 링크의 `aria-current`). 글자는 GNB Sheet 계약 14/20/500(current 700) 그대로다. LNB 모바일 표현은 LNB 전용 API를 따른다.
+
+## 9. Styling / Token
+
+`packages/ui/src/theme/gnb.css`의 `--hm-gnb-*`.
+
+| Token | 값 |
+|---|---|
+| `--hm-gnb-height` | 70px (mobile 56px). Layout이 top offset으로 읽는다 |
+| `--hm-gnb-join` | 12px. 콘텐츠 접점(바 아래로 gradient가 이어지는 길이) |
+| `--hm-gnb-background` | 세로 4-stop gradient(`--hm-green-tone-1~4`) |
+| `--hm-gnb-padding-x` / `--hm-gnb-column-gap` | 28 / 24 (mobile 16) |
+| `--hm-gnb-z-index` | 40 (sticky일 때만; overlay는 portal z-50) |
+| menu | inset-top 4, join 12, min-width 112, padding-x 16, 16/700 |
+| current / open / panel | Beige(`--hm-sem-bg-content`)+`--hm-sem-action-primary` / White / White, 하단 radius 8, shadow |
+
+새 Primitive/Semantic은 GNB에서 추가하지 않았다. 4-stop은 공개 `--hm-sem-action-surface-stop-*`, 글자 보조색은 `--hm-sem-palette-green-tint`를 참조한다. 하위 패널 radius 8·shadow, 글자 테두리는 ui-viz가 검토값으로 둔 값을 그대로 가져왔다.
+
+## 10. Position / z-index / Layout 연결
+
+- 기본 relative(일반 흐름), `sticky` 옵션, fixed 없음. GNB Mode 페이지가 sticky를 쓸지 결정한다.
+- 접점은 일반/sticky 모두 같은 12px gradient를 콘텐츠의 둥근 윗모서리 바깥에만 mask로 그린다. sticky stacking context에서도 콘텐츠 중앙을 초록색 띠로 덮지 않는다. 높이·gradient·메뉴·프로필·색상은 공통이고 sticky selector는 position/top/z-index만 바꾼다.
+- `Sticky` verification Story와 대표 Story의 Sticky 예시는 같은 스크롤 영역을 사용한다. 테두리와 스크롤바 폭을 제거해 일반 예시와 폭을 맞추며, 휠/터치와 포커스 후 PageDown/End/Home으로 스크롤할 수 있다.
+- z-index: GNB 40 < portal overlay 50. 하위 패널은 GNB 안(z 2~3)에서 열려 콘텐츠 위에 그려진다. 체계는 바꾸지 않았다.
+- GNB Mode 콘텐츠 계약: 바 다음 콘텐츠 면은 `position: relative`, DOM상 뒤, 윗모서리 `border-radius: var(--hm-gnb-join) var(--hm-gnb-join) 0 0`, 시작 y = `var(--hm-gnb-height)`(접점 strip과 겹침, 밀어내지 않음). 높이는 `--hm-gnb-height`로 읽는다.
+
+## 11. Accessibility / 검증
+
+- `<header>` + Navigation Menu `<nav aria-label>`, mobile `<nav aria-label>`, 그룹 `role="group"`. 아이콘 버튼 `aria-label`, Badge `aria-hidden`.
+- Focus: 흰 outline(초록 위), current/open은 초록 outline.
+- 확인(2026-10-03, Storybook): 1280 데스크톱 높이 70, 메뉴 항목 위 4·높이 66·최소 112, 메뉴 중앙 오차 0, current Beige `#F5F0E5`/`#123328`/700, 열림 White 패널·긴 하위 이름 줄바꿈. 1024/1023 전환, 390 햄버거→Sheet 열림, Escape·링크 클릭 모두 닫힘 + 햄버거로 focus 복귀(녹색 재정합 후 재확인), 가로 overflow 없음(1024, 1023, 390, long labels). `npm run typecheck`, `npm run build` 통과. Navigation Menu Story computed style 변화 없음.
+
+## 12. 변경하지 않은 것
+
+Navigation Menu, Dropdown Menu, Sheet, Avatar, Button, Tooltip, Badge, Popover, Command 코드·theme CSS는 수정하지 않았다.
+
+## 13. 남은 차이 / 보류
+
+| 항목 | 분류 |
+|---|---|
+| ui-viz 후보 1뎁스 18/28·폭 160·padding 24 (ui-viz도 FOLLOW_UP) | FOLLOW_UP. 현재 2Depth 패널은 고정 160px이 아니라 §4의 content-width/center/clamp |
+| 하위 패널 radius 8·shadow, 글자 테두리 (ui-viz REVIEW VALUE) | 값 그대로 적용 |
+| 독립 GNB + LNB 또는 GNB + Dashboard | 사용 금지. GNB ONLY 내부 Sidebar 부품 재사용은 §15 범위에서 허용 |
+| sticky일 때 접점 strip 처리, 콘텐츠 radius 소유 | 접점 mask 정합 완료(2026-10-06). 콘텐츠 radius는 소비 Layout 소유 |
+| 긴 메뉴명이 공간을 넘으면 메뉴 영역에서 잘림 | 한계 |
+| 로고 asset 없음(테스트 이미지만), 로고 크기·간격은 ui-viz D-070 미확정 | MISSING |
+| 실기기 터치, 1100~1280 사이 시각 | 미확인 |
+| GNB Sheet 그룹 접기·상위 current 표시 | 미지원. 현재 링크 목록 방식 유지 |
+| Notification Center, 전역 검색 결과, Organization/App Switcher | 후속 |
+
+## 14. 관련 파일
+
+```
+packages/ui/src/patterns/gnb/{gnb.tsx,index.ts}
+packages/ui/src/theme/gnb.css
+src/patterns/gnb.stories.tsx
+```
+
+## 15. GNB ONLY Sidebar Composition (2026-10-08)
+
+대표 `Patterns/Layout/GNB → GNB`의 **Usage · GNB Sidebar**에서 확인한다. 직접 동작 검증은 숨김 `GNB Sidebar` Story(`patterns-layout-gnb--sidebar`)를 사용한다. 기존 `LNB → VERIFICATION ONLY · GNB + LNB`는 운영 기준으로 승격하지 않는다.
+
+구조는 **GNB Header → Sidebar + Main Content**다. Sidebar는 공개 `LNB / LNBNav / LNBGroup / LNBItem`을 그대로 사용한다. 기존 DOM/data-slot을 유지하고 브랜드·사용자 영역은 GNB만 담당한다. `LNBBrand / LNBProfile`은 기본 조합에서 생략한다. 새로운 GNBSidebar 공개 컴포넌트·메뉴 로직은 없다.
+
+공용 `@hm-design/ui/theme.css`의 opt-in HTML attribute 계약:
+
+- 프레임: `data-hm-gnb-layout="sidebar"`. 소비자가 높이를 지정하며 Grid가 GNB의 자연 높이와 남은 본문 높이를 배분한다.
+- 본문: 프레임의 직계 `data-hm-gnb-body`. Desktop은 기존 `--hm-lnb-width` 열 + 가용 콘텐츠 열, Mobile은 콘텐츠 한 열이다.
+- Sidebar: 본문의 직계 `<LNB data-hm-gnb-sidebar>`. 기존 `data-slot="lnb"`는 유지한다. 이 범위의 `--hm-lnb-background`만 `var(--hm-sem-palette-green-light-2)`로 덮어쓴다. 기본 Green Light 2는 `#266651`이며 Runtime Theme override도 그대로 따른다. 측면 접점 배경은 LNB의 기존 `--hm-lnb-background-end`를 유지한다.
+- Main: 본문의 직계 `<main data-hm-gnb-main>`. 공용 CSS가 면·접점·스크롤을 제공하며 콘텐츠 padding은 소비자가 정한다. GNB의 상단 접점과 LNB의 측면 접점은 기존 값을 재사용한다.
+
+메뉴 폭·폰트·높이·padding·gap·아이콘·Depth·Hover·선택·연결선·스크롤은 LNB 그대로다. 반투명 Hover/Open 면의 합성 결과만 배경 변경에 따라 달라질 수 있으며 별도 보정하지 않는다. 그룹은 기존 Collapsible의 `open / onOpenChange`를 사용하고 GNB NavigationMenu 열림과 독립적으로 관리한다. 선택 시 새 자동 펼침을 추가하지 않는다.
+
+Desktop은 ≥1024px, Mobile은 ≤1023px이다. Mobile에서 Sidebar는 기존 LNB CSS로 숨기고 **GNBMobileMenu 하나**에 `LNBMobileGroup / LNBMobileLink` 목록을 넣는다. `LNBMobileHeader`나 `LNBMobileMenu`를 함께 렌더하지 않는다. 모바일 Sheet 기본 면, 44px 링크, 14/20/500(current 700), 중첩 들여쓰기, Escape·포커스 복귀를 유지한다.
+
+`LNBMobileLink`의 자동 닫기 Context는 LNBMobileMenu 전용이다. GNBMobileMenu 안에서 재사용할 때는 아래처럼 Sheet를 controlled로 연결하고 동일 route handler에서 닫는다. router가 `preventDefault()`를 호출해도 닫혀야 한다. Desktop 복귀 시 Sheet 상태를 닫는 처리도 소비자 Composition에 둔다. 모바일 그룹은 기존 펼쳐진 링크 목록이며 데스크톱 Collapsible을 복제하지 않는다.
+
+### 소비자 사용 예제
+
+아래는 실제 공개 API와 공용 Theme만 사용하는 React 예제다. 메뉴 데이터·현재 경로·그룹 상태는 소비자 소유이며 Story 파일을 import할 필요가 없다. 실제 앱에서는 `go`의 상태 갱신을 router 이동과 현재 경로 읽기로 연결한다.
+
+```tsx
+import { useEffect, useState, type MouseEvent, type ReactNode } from "react"
+import {
+  GNB, GNBBrand, GNBNav, GNBUtilities, GNBUser, GNBMobileMenu,
+  LNB, LNBNav, LNBGroup, LNBItem, LNBMobileGroup, LNBMobileLink,
+  NavigationMenu, NavigationMenuList, NavigationMenuItem,
+  NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink,
+  Avatar, AvatarFallback, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
+} from "@hm-design/ui"
+import "@hm-design/ui/theme.css"
+
+type Node = { id: string; label: string; children?: Node[] }
+const tree: Node[] = [
+  { id: "overview", label: "대시보드" },
+  { id: "projects", label: "프로젝트 관리", children: [
+    { id: "projects/design", label: "디자인 관리", children: [
+      { id: "projects/design/tokens", label: "토큰 관리" },
+      { id: "projects/design/components", label: "컴포넌트 관리" },
+    ] },
+    { id: "projects/tasks", label: "업무 목록" },
+  ] },
+]
+
+export function Example() {
+  const [path, setPath] = useState("projects/design/tokens")
+  const [groups, setGroups] = useState<Record<string, boolean>>({ projects: true, "projects/design": true })
+  const [sheetOpen, setSheetOpen] = useState(false)
+  useEffect(() => {
+    const desktop = window.matchMedia("(min-width: 1024px)")
+    const sync = () => { if (desktop.matches) setSheetOpen(false) }
+    desktop.addEventListener("change", sync)
+    return () => desktop.removeEventListener("change", sync)
+  }, [])
+  const onPath = (id: string) => path === id || path.startsWith(`${id}/`)
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setPath(id)
+    setSheetOpen(false)
+  }
+  const desktopMenu = (nodes: Node[]): ReactNode => nodes.map(node => node.children ? (
+    <LNBGroup key={node.id} label={node.label} current={onPath(node.id)}
+      open={groups[node.id] ?? false} onOpenChange={open => setGroups(s => ({ ...s, [node.id]: open }))}>
+      {desktopMenu(node.children)}
+    </LNBGroup>
+  ) : <LNBItem key={node.id} href={`#${node.id}`} active={path === node.id} onClick={go(node.id)}>{node.label}</LNBItem>)
+  const mobileMenu = (nodes: Node[]): ReactNode => nodes.map(node => node.children ? (
+    <LNBMobileGroup key={node.id} label={node.label}>{mobileMenu(node.children)}</LNBMobileGroup>
+  ) : <LNBMobileLink key={node.id} href={`#${node.id}`} active={path === node.id} onClick={go(node.id)}>{node.label}</LNBMobileLink>)
+
+  return <div data-hm-gnb-layout="sidebar" style={{ height: "100dvh" }}>
+    <GNB>
+      <GNBMobileMenu title="메뉴" open={sheetOpen} onOpenChange={setSheetOpen}>
+        <div data-slot="lnb-mobile-nav">{mobileMenu(tree)}</div>
+      </GNBMobileMenu>
+      <GNBBrand href="#overview" onClick={go("overview")}><span><strong>프로젝트 관리</strong></span></GNBBrand>
+      <GNBNav>
+        <NavigationMenu viewport={false} aria-label="주 메뉴">
+          <NavigationMenuList>
+            <NavigationMenuItem><NavigationMenuLink href="#overview" active={path === "overview"} onClick={go("overview")}>대시보드</NavigationMenuLink></NavigationMenuItem>
+            <NavigationMenuItem value="projects">
+              <NavigationMenuTrigger aria-current={onPath("projects") ? "page" : undefined}>프로젝트</NavigationMenuTrigger>
+              <NavigationMenuContent><ul><li>
+                <NavigationMenuLink href="#projects/tasks" active={path === "projects/tasks"} onClick={go("projects/tasks")}>업무 목록</NavigationMenuLink>
+              </li></ul></NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </GNBNav>
+      <GNBUtilities>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <GNBUser name="김한맥" description="프로젝트 관리자"><Avatar><AvatarFallback>김</AvatarFallback></Avatar></GNBUser>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end"><DropdownMenuItem>프로필</DropdownMenuItem></DropdownMenuContent>
+        </DropdownMenu>
+      </GNBUtilities>
+    </GNB>
+    <div data-hm-gnb-body>
+      <LNB data-hm-gnb-sidebar><LNBNav aria-label="서비스 메뉴">{desktopMenu(tree)}</LNBNav></LNB>
+      <main data-hm-gnb-main><h1>프로젝트 업무</h1><p>현재 경로: {path}</p></main>
+    </div>
+  </div>
+}
+```
+
+사용자 메뉴와 콘텐츠 padding은 기존 GNB 사용 예제에 따라 소비자가 추가한다. Theme Source, LNB 원본, Runtime 계약, 공개 API는 변경하지 않는다. 공통 요약은 [AGENTS.md](../../AGENTS.md), 탐색 경로는 [Reference Index](../guidelines/component-pattern-reference.md)를 따른다.
+
+검증(2026-10-08, 기존 Storybook 6024): 1440px Sidebar 272px / Green Light 2, 2·3Depth 선택·그룹 Enter/Space·Hover·선택 경로·메뉴 스크롤 확인. 768px·375px에서 GNB 56px / Sidebar 숨김 / Main 전체 폭 / 흰 Sheet 1개 / 링크 44px·14px / 선택 시 닫기·Escape·포커스 복귀 확인. 열린 Sheet에서 Desktop 복귀 시 닫힘과 선택 경로 보존 확인. 기존 GNB Overview·LNB 대표 메뉴·Dashboard Header computed style 비교 동일, 검사한 화면의 Console error 없음. 앱 TypeScript 검사 통과. 전체 프로젝트 회귀 테스트와 실기기 터치 검증은 수행하지 않았다.
diff --git a/docs/patterns/lnb.md b/docs/patterns/lnb.md
new file mode 100644
index 0000000..f1744e1
--- /dev/null
+++ b/docs/patterns/lnb.md
@@ -0,0 +1,238 @@
+# LNB (Pattern)
+
+> **2026-10-07 확정: SINGLE NAVIGATION MODE.** GNB / LNB / Dashboard는 함께 사용하지 않는다. AI 코드 생성·제안, 신규/기존 페이지, 프로토타입, Storybook, Production 전체에 적용한다. [공통 정책](../guidelines/navigation-single-mode.md)이 이전 조합 기록보다 우선한다.
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6.10, §6.11)를 따른다.
+
+```text
+Layout visual reference: 외부 ui_viz Reference (ZIP 미포함) (Patterns/LNB, Variant A Sidebar)
+Implementation: current @hm-design/ui primitives / patterns (HM Collapsible + plain elements)
+```
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (2026-10-03), 3뎁스 추가 (2026-10-06) |
+| 기반 | HM Collapsible + 일반 요소 (새 dependency 없음) |
+| 대표 Story | `Patterns/Layout/LNB` → `LNB` (verification: Third Level, Third Level Long Labels, Default, Selected, Expanded, Selected Child, Collapsed With Selection, With Logo, Long Labels, Scroll, Third Level Scroll, VERIFICATION ONLY · GNB + LNB, LNB Standalone Desktop, LNB Standalone Mobile, LNB Standalone Mobile Menu Open) |
+| 보류 | §11 |
+
+## 2. 목적 / 역할
+
+LNB Mode 페이지의 독립 Navigation 체계. Desktop 열과 LNB Mobile Header는 같은 메뉴·선택 상태의 Responsive 표현이다. GNB 또는 Dashboard와 조합하지 않는다.
+
+## 3. 구성 요소와 API
+
+| export | 역할 |
+|---|---|
+| `LNB` | `<aside>` 열. 폭 `--hm-lnb-width` |
+| `LNBBrand` | 선택적. LNB Mode의 서비스 브랜드를 담당한다(§3c). 세로형(로고 위·서비스명 아래, 같은 시작선). 로고는 `img`/`svg`가 있을 때만. `<span>`에 `<small>` eyebrow + `<strong>` 이름 |
+| `LNBNav` | 메뉴 영역 `<nav>`(`aria-label` 지정). 길면 이 영역만 스크롤 |
+| `LNBItem` | 링크(`<a>`, `asChild`). `active` → `aria-current="page"`. 앞의 `svg` 자식 = 아이콘(lucide) |
+| `LNBGroup` | 2뎁스 그룹: HM `Collapsible`(`open`/`defaultOpen`/`onOpenChange`), `label`, `current`(하위 현재 → 이름·화살표 노랑). 그룹 안에 `LNBGroup`을 중첩하면 3뎁스(§3a) |
+| `LNBProfile` | 하단 사용자 메뉴 trigger `<button>`: Avatar(children, default size) + 이름·역할 글자. `DropdownMenuTrigger asChild`로 사용 |
+
+```tsx
+<LNB>
+  {/* LNB Mode의 서비스 브랜드 */}
+  <LNBBrand><span><small>한맥 업무 시스템</small><strong>프로젝트 대시보드</strong></span></LNBBrand>
+  <LNBNav aria-label="서비스 메뉴">
+    <LNBItem href="#a" active><LayoutGridIcon />메뉴 1</LNBItem>
+    <LNBGroup label="메뉴 2" current><LNBItem href="#b" active>메뉴 2-1</LNBItem></LNBGroup>
+  </LNBNav>
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <LNBProfile name="김한맥" description="프로젝트 관리자"><Avatar>…</Avatar></LNBProfile>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start" className="min-w-(--radix-dropdown-menu-trigger-width)">
+      <DropdownMenuLabel>김한맥</DropdownMenuLabel>
+      <DropdownMenuItem>프로필 설정</DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem variant="destructive">로그아웃</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</LNB>
+```
+
+Collapsible의 trigger/content는 `asChild`로 자체 `button`/`div`를 써서 Collapsible의 기본 text-trigger 스타일을 쓰지 않는다(Radix `aria-expanded`/`aria-controls`/Enter/Space는 그대로).
+
+## 3a. 3뎁스 (2026-10-06)
+
+현재 interaction은 2Depth에서 들여쓴 링크 면, 3Depth에서 connector 끝부터 시작하는 링크 면에 한정한다. 3Depth connector는 상태와 무관하게 Green Tint 40%이며 장식 행은 pointer interaction을 소유하지 않는다. 아래 비교표는 도입 시점 기록이며 최신 Mapping은 §5를 따른다.
+
+기준: 3Depth 도입 당시의 디자이너 공유 자료(외부 Reference, ZIP 미포함). 현재 구현 기준과 사용법은 이 문서, `packages/ui/src/patterns/lnb/`와 `src/patterns/lnb.stories.tsx`의 대표 Story를 따른다. ui-viz에는 3뎁스가 없다.
+
+사용: 기존 `LNBGroup`을 그룹 안에 중첩한다. 새 컴포넌트·`depth` prop·state 없음. 실제 선택 링크 = `active`, 그 경로의 모든 그룹 = `current`(소비자 경로 상태에서 계산). 닫힌 그룹은 내용을 unmount하므로, 바깥 그룹을 접었다 펼 때 안쪽 그룹 열림을 유지하려면 각 그룹 `open`/`onOpenChange`를 소비 화면이 가진다.
+
+```tsx
+<LNBGroup label="프로젝트 관리" current open={open.projects} onOpenChange={…}>
+  <LNBGroup label="디자인 관리" current open={open.design} onOpenChange={…}>
+    <LNBItem href="#tokens" active>컬러 토큰</LNBItem>
+    <LNBItem href="#components">컴포넌트 스타일</LNBItem>
+  </LNBGroup>
+  <LNBItem href="#tasks">업무 목록</LNBItem>
+</LNBGroup>
+```
+
+| 항목 | 명세 | 구현 | 분류 |
+|---|---|---|---|
+| 글자 | 1·2뎁스 18/28/700, 3뎁스 18/24/500, 선택 700 | 같음 | MATCHED |
+| 3뎁스 행 | 최소 48, 상하 12, 링크 padding-left 88(2뎁스 68 + 20) | 같음 (1·2뎁스 56 유지) | MATCHED |
+| 3뎁스 글자 장식 | 외곽선·그림자 없음 | 같음 | MATCHED |
+| 긴 이름 | 줄바꿈, 행 높이 증가 | 48 / 72 / 96 (1·2·3줄), ellipsis 없음, 가로 overflow 0 | MATCHED |
+| 선택 | Beige + `--hm-sem-action-primary`, 오른쪽 곡선 | 기존 current 규칙 그대로(폭 +1, 위·아래 오목 곡선) | MATCHED |
+| 상위 경로 | 1·2뎁스 노랑, 접혀도 유지 | `current` → `--hm-yellow-accent` | MATCHED |
+| 연결선 | 3뎁스만, 1px, 세로선 x 68, 가로 12, 글자까지 8, 행 세로 중앙, 마지막 행 중앙에서 끝 | 행마다 background 2겹(세로 `1px × 100%`, 마지막 행 `1px × 50%`, 가로 `12 × 1` at `calc(50% - 0.5px)`). DOM·tab stop·aria 없음 | MATCHED / IMPLEMENTATION_CHANGE(명세의 "배경 레이어" 방식) |
+| 연결선 색 | 기본·hover `--hm-green-tint` 40%, 선택 `--hm-green-light-2` 40% | 같음. 선택 색은 선택된 행의 선에만 적용(나머지 행은 기본색) | MATCHED |
+| 접힘 | 하위 메뉴·연결선 함께 숨김 | Radix가 내용을 unmount → 선도 같이 사라짐 | MATCHED |
+| 중첩 그룹 | 배경·테두리·padding 중복, 폭 감소, 오른쪽 틈 금지 | 안쪽 그룹은 면·선·padding-bottom 없음, 폭 100%(바깥 그룹과 같은 252), 선택 항목 오른쪽 273(1px 겹침) | MATCHED |
+| 안쪽 그룹 이름 위치 | 명세 수치 없음, 이미지상 2뎁스 글자와 같은 시작선 | trigger padding-left = 68 − 화살표 18 − gap 12 = 38 → 글자 x 68 | INTENTIONAL_CHANGE(이미지 기준) |
+
+모바일(<1024): LNB ONLY는 Desktop 열을 숨기고 같은 메뉴를 독립 `LNBMobileHeader / LNBMobileMenu`로 표시한다(§3b). GNB ONLY 내부 Sidebar는 [GNB §15](gnb.md#15-gnb-only-sidebar-composition-2026-10-08)의 GNB 단일 Sheet를 사용하며 독립 LNB Mobile Header/Menu를 추가하지 않는다. DASHBOARD ONLY 운영 화면에는 Sidebar가 없다([Dashboard 현재 계약](dashboard-layout.md#1-현재-계약)).
+
+<details>
+<summary>HISTORICAL RECORD — 이전 GNB Sheet 혼합 안내</summary>
+
+아래 안내는 이전 구성의 기록이며 현재 운영·신규 화면 Reference가 아니다.
+
+모바일(<1024): LNB는 그대로 숨긴다(icon-only collapsed 없음, 새 breakpoint 없음). 같은 지역 메뉴 트리를 GNB 모바일 Sheet에 중첩 `GNBMobileGroup`으로 조합한다(`Patterns/Layout/Dashboard Layout` → `Third Level`, `gnb.md` §8). Sheet는 GNB의 시각 언어(14px 링크, Beige current)를 쓰고 LNB의 gradient·곡선·연결선은 가져가지 않는다. 화면에 GNB가 없을 때의 모바일 탐색은 §3b.
+
+</details>
+
+## 3b. LNB Mobile Header (2026-10-07)
+
+| viewport | Desktop LNB | LNB Mobile Header |
+|---|---|---|
+| ≥1024px | VISIBLE | HIDDEN |
+| ≤1023px | HIDDEN | VISIBLE |
+
+모바일 Header와 Sheet는 LNB의 Responsive 표현이며 GNB가 아니다. 기존 GNB 모바일 부품 조합을 LNB 전용 공개 API로 대체했다. HM Sheet가 focus trap, Escape, focus 복귀를 맡고 링크 선택 시 router가 preventDefault를 사용해도 Sheet를 닫는다.
+
+| export | 역할 |
+|---|---|
+| `LNBMobileHeader` | 모바일 전용 Header, 높이 56px / padding 16px. ≥1024px에서 자체 숨김 |
+| `LNBMobileBrand` | 서비스명 및 선택적 로고, 링크 또는 `asChild` |
+| `LNBMobileMenu` | 햄버거 + Sheet. `title`, `side`, `open/defaultOpen/onOpenChange` |
+| `LNBMobileLink` | Sheet 링크, `active`, `asChild`, 선택 시 닫기 |
+| `LNBMobileGroup` | 중첩 지역 메뉴 그룹 |
+
+```tsx
+<div className="grid grid-cols-1 lg:grid-cols-[var(--hm-lnb-width)_minmax(0,1fr)]">
+  <LNB>
+    <LNBBrand>…</LNBBrand>
+    <LNBNav aria-label="서비스 메뉴">{desktopMenu(tree)}</LNBNav>
+    <LNBProfile name={profile.name}>…</LNBProfile>
+  </LNB>
+  <div>
+    <LNBMobileHeader>
+      <LNBMobileMenu title="서비스 메뉴">
+        {mobileMenu(tree)}
+        <LNBProfile name={profile.name}>…</LNBProfile>
+      </LNBMobileMenu>
+      <LNBMobileBrand href="/">서비스명</LNBMobileBrand>
+    </LNBMobileHeader>
+    <main>…</main>
+  </div>
+</div>
+```
+
+Desktop/Mobile은 메뉴 트리, 현재 위치, 그룹 상태, Profile 데이터 원본을 공유한다. 모바일 Sheet 링크는 44px 높이, 14/20/500(current 700)을 유지한다. 중첩 그룹은 12px 들여쓴다. Header/Sheet 스타일은 `--hm-lnb-mobile-*`와 공통 Semantic을 사용하며 GNB/Dashboard 변수에 의존하지 않는다.
+
+## 3c. 브랜드·프로필 소유
+
+LNB Mode가 Desktop Brand/Profile과 Mobile Header/Sheet Profile을 담당한다. 다른 Navigation에 소유권을 넘기지 않는다. `LNBBrand`는 선택적이며 생략하면 빈 자리 없이 메뉴가 올라간다. 공통 LNB 메뉴 스크롤·geometry는 그대로 유지한다.
+
+기존 `WithGNB` Story는 `verification` 태그 및 화면과 이름에 **VERIFICATION ONLY**를 표시한 기술 검증 전용이다. 운영·신규 페이지·AI 생성 예제로 사용하지 않는다.
+
+## 4. ui-viz 비교 (원본: `dashboard-composition.md` §6, `dashboard-variant-specimens.css/jsx`)
+
+| 항목 | ui-viz | 최종 HM | 분류 |
+|---|---|---|---|
+| 폭 | track 272, visual 290(오른쪽 18 bleed) | 열 272(`--hm-lnb-width`), 뒤로 18(`--hm-lnb-join`) 같은 색 연장 | MATCHED (연장은 `::after`) |
+| 배경 | 90° 5-stop `#123328/#205241/#266651/#249473/#266651` 0/30/50/90/100%, 트랙 폭, 트랙 밖 `#266651` | 같음 (`--hm-green-*`) | MATCHED |
+| 상단 | 위 28, 브랜드 padding 0 10 22, 메뉴 위 20 | 위 28, 브랜드 inset 30(=20+10), 아래 22, 메뉴 위 20 | MATCHED |
+| 브랜드 | 로고 조건부, 위 로고·아래 서비스명, eyebrow 11/700, 이름 17 | 같음 | MATCHED |
+| 항목 | 18/28/700, 최소 56, padding 14 12 14 18, White, 아이콘 20 opacity .5, 글자 테두리 1.5px + 그림자 `1px 2px 1px` | 같음 | MATCHED |
+| hover | Black 10%, 콘텐츠 경계까지, 시작 쪽 radius 4 | 같음 | MATCHED |
+| current | Beige + `#123328`, 왼쪽 radius 8, 오른쪽 20+1 연장, 위·아래 18 오목 곡선, 안쪽 깊이 그림자(마지막 25% fade), 글자 효과 없음 | 같음. 깊이는 span 대신 background gradient 3겹으로 근사 | MATCHED / IMPLEMENTATION_CHANGE |
+| nested(2뎁스) | 상위 = disclosure 버튼, 화살표 접힘 → 펼침 90°, 펼친 그룹 Black 20% + 1px `#266651` 선 + 왼쪽 radius 8, 하위 padding-left 68, 하단 8, 하위 선택 시 상위 노랑 `#FFC600` | 같음. HM Collapsible(Radix) 사용 | MATCHED / IMPLEMENTATION_CHANGE |
+| divider | Brand/Profile 구분선 없음, 그룹 구분선은 그룹이 둘 이상일 때만(현재 없음) | 없음 | MATCHED |
+| profile | 이름 16 + 역할 12, avatar 없음, 아래 22 | 위치·글자 같음 + Avatar 32px(gap 12, 세로 중앙) | INTENTIONAL_CHANGE |
+| 외곽 brand 테두리(`.sidebar::after`) | D-093 예시에 없음, FOLLOW_UP | 그리지 않음 | FOLLOW_UP |
+| collapsed(열 자체 접힘) | ui-viz에 없음 | 만들지 않음 (`--hm-lnb-collapsed-width` 없음). ui-viz의 "Collapsed"는 그룹 접힘이다 | — |
+| mobile | ui-viz에 없음 | 열 숨김, `--hm-lnb-width: 0px`. LNB Mobile Header + LNB Sheet로 같은 목적지 표시(§3b) | INTENTIONAL_CHANGE |
+| 스크롤 | ui-viz는 `overflow:hidden`(넘치면 잘림) | 메뉴 영역만 세로 스크롤(brand/profile 고정) | INTENTIONAL_CHANGE |
+| 아이콘 | 4종 자체 SVG | lucide 아이콘을 소비자가 자식으로 둠(새 icon system 없음) | IMPLEMENTATION_CHANGE |
+
+## 5. Token / CSS Variables
+
+`packages/ui/src/theme/lnb.css`의 `--hm-lnb-*`.
+
+| Token | 값 |
+|---|---|
+| `--hm-lnb-width` | 272px (1023px 이하에서 0px) |
+| `--hm-lnb-join` | 18px. 콘텐츠 둥근 모서리·bleed |
+| `--hm-lnb-background` / `-background-end` | 5-stop gradient / `#266651` |
+| item | min-height 56, 18/28/700, gap 12, 아이콘 20, 글자 테두리 1.5px |
+| current | `--hm-sem-bg-content` + `--hm-sem-action-primary`, radius 8 0 0 8 |
+| group | open face Black 20%, 선 1px `--hm-sem-palette-green-light-2`, 하위 padding-start 68, current 글자 `--hm-sem-palette-yellow-accent` |
+| `--hm-lnb-third-*` | min-height 48, padding-block 12, text padding-start 88(메뉴 행 기준), line-height 24, weight 500 / current 700, connector x `= --hm-lnb-subitem-padding-start`(68)·length 12·width 1, 모든 상태에서 `--hm-sem-palette-green-tint` 40%. 실제 link는 connector 끝부터 시작 |
+
+새 Primitive: `--hm-yellow-accent: #ffc600`(`primitives.css`). ui-viz `color.action.accent-on-green`이며 HM 팔레트에 없어 추가했다. 그 외 새 Semantic은 없다.
+
+## 6. LNB Mode 콘텐츠 연결
+
+- 열 옆 콘텐츠 면: `position: relative`, DOM상 뒤, 왼쪽 모서리 `border-radius: var(--hm-lnb-join) 0 0 var(--hm-lnb-join)`, grid 첫 열 = `var(--hm-lnb-width)`. 열의 초록은 콘텐츠 뒤로 `--hm-lnb-join`만큼 이어진다.
+- current 항목은 열 오른쪽 가장자리를 넘어 콘텐츠와 1px 겹쳐 이음새 없이 이어진다(열은 overflow를 자르지 않는다).
+- 높이는 소비자가 정한다(열은 `min-height: 100%`).
+- GNB 또는 Dashboard와 조합하지 않는다. 콘텐츠 계산은 LNB 자체 변수만 사용한다.
+
+## 7. Accessibility / 상호작용
+
+`<aside>` + `<nav aria-label>`, 현재 `aria-current="page"`, 그룹 trigger는 Radix `aria-expanded`/`aria-controls`. `LNBProfile`은 native button + 기본 accessible name `"<name> 사용자 메뉴"`이며 Avatar·이름·역할의 inner content 폭에 interaction을 한정한다(`fit-content` + 안쪽 hit padding). 이 버튼에 pointer cursor와 LNB focus-visible outline을 쓴다. `DropdownMenuTrigger asChild`로 합성하면 Enter/Space 열기, Arrow 이동, Escape 닫기와 trigger focus 복귀는 Radix가 담당한다. 접힌 그룹의 하위는 DOM에서 빠져 focus되지 않는다. 아이콘은 장식(`aria-hidden`, 소비자가 지정).
+
+## 8. 검증 (2026-10-03, Storybook)
+
+> HISTORICAL_RECORD: 아래 날짜별 geometry·상태 측정은 당시 기록이다. 현재 링크 interaction 범위·connector 색은 §3a/§5, Profile interaction은 §7을 따른다.
+
+- 1280: current 항목 x 20→273, 높이 56, 18/28/700, Beige `#F5F0E5`/`#123328`, radius `8 0 0 8`, 그룹·하위 x 20→272. 하위 선택 시 상위 `rgb(255,198,0)`, 접힌 채여도 유지. 긴 이름은 줄바꿈(112px), 스크롤 영역은 메뉴만 스크롤하고 profile은 아래 22px 고정. 그룹 trigger Enter로 펼침.
+- 1000px: 열 `display:none`, 가로 overflow 없음. 390px은 GNB 모바일 메뉴로 대체.
+- `npm run typecheck`, `npm run build` 통과. 기존 primitive Story 변화 없음.
+
+- 3뎁스(2026-10-06, Storybook): 위 §3a 수치를 computed style로 확인(1280 열 272, 3뎁스 x 20 → 272/선택 273, 그룹 2개 모두 x 20·폭 252, 안쪽 그룹 배경 투명·`::before` 없음). 키보드: Enter로 바깥 그룹 접힘(노랑 유지, 3뎁스·선 사라짐), Space로 다시 펼침(안쪽 그룹 열림 유지), Tab → 안쪽 그룹 Enter로 접힘. trigger는 `button` + `aria-expanded`/`aria-controls`, 선택 링크 `aria-current="page"`, focus-visible 흰 outline. 기존 Selected Child 수치 변화 없음(2뎁스 68/56/700, 그룹 하단 8, 선 1px).
+
+- 스크롤 소유(2026-10-06, Storybook): 열 = flex column, brand·profile `flex: none`, `LNBNav`만 `flex: 1 1 auto; min-height: 0; overflow-y: auto`(열 overflow 없음, 높이는 Story shell / Dashboard Layout이 결정). 메뉴 위 20을 nav margin 2 + padding 18에서 nav padding 20(`--hm-lnb-nav-padding-top`)으로 옮겨 스크롤 영역이 brand 바로 아래에서 시작(첫 항목 y 그대로). 측정: Scroll(460) nav 93.7→370 = brand bottom → profile top, client 276 / scroll 830, 최하단 마지막 항목 bottom 351.7(= nav bottom − 18); Third Level Scroll(460) client 276 / scroll 990, 3뎁스 선택 행·곡선·연결선 함께 스크롤; Dashboard Third Level 1280·1024×600 nav 163.7→510, client 346 / scroll 526, 최하단 491.7. 1023px 열 `display:none`, 가로 overflow 없음.
+
+- 왼쪽 scrollbar(2026-10-06, Storybook): 오른쪽 native scrollbar(263→273)가 content box를 10px 줄여 스크롤 시 메뉴 면 262·선택 263·곡선 262로 콘텐츠와 떨어졌다. `LNBNav`에 `direction: rtl`(native scrollbar만 왼쪽), 직계 자식 `direction: ltr` + `margin-left: calc(100% + inset-start − width − 1px)`(= −scrollbar 폭, 없으면 0) + `width: auto`(stretch)로 scrollbar가 왼쪽 inset 20 안(0→10)에 들어가고 행은 x 20→272(선택 273) 유지. 스크롤 없음/있음 모두 메뉴 면 272·선택 273·곡선 272·join 272, 아이콘 38·글자 70·chevron 38·2뎁스 글자 88·3뎁스 글자 108·connector 88. LNB Scroll·Third Level Scroll, Dashboard Third Level 1280·1024×600 같은 값. Tab/Enter/Space, `aria-expanded`, `aria-current`, focus-visible 유지.
+
+- Brand ownership(2026-10-06, Storybook, 높이 700, 1280·1024·1023·390): GNB + LNB(Dashboard `Dashboard Layout`·`Third Level`, LNB `With GNB`) 데스크톱 보이는 brand = `gnb-brand` 1개, LNBBrand 없음, 1023·390 GNB 모바일 바 1개. LNB Only(Dashboard `LNB Only`, `LNB Standalone Desktop`) 데스크톱 `lnb-brand` 1개·상단 바 0, 1023·390 Local 모바일 바 1개(`gnb-brand` 1개). 서비스명 "프로젝트 대시보드"는 모든 경우 화면에 1개, 가로 overflow 0. 메뉴 geometry(GNB + LNB, 1280): Brand 제거 전 nav top 163.7(GNB 70 + 열 padding 28 + Brand 65.7) → 후 98, 첫 항목 118(= 98 + 20), nav bottom = profile top 610(높이 700) 그대로. Dashboard Third Level 1280×600: nav 98→510, client 346 → 412 / scroll 526, 최하단 마지막 항목 492(= nav bottom − 18), profile top 510 고정. 3뎁스 행 48·padding 88·500(current 700, Beige, x 20→273), 상위 그룹 노랑, 행 x 20→272, 곡선 18 — 이전 값과 같음.
+
+## 9. 변경하지 않은 것
+
+2026-10-07 단일 모드 검증: 1280·1232·1024·1023·960·959·390·320px에서 LNB Mode에 GNB/Dashboard가 없고 Desktop 열과 Mobile Header 중 하나만 보임을 확인했다. 390px Sheet Escape·포커스 복귀·preventDefault 링크 닫기, 1024px에서 Sheet 숨김, Desktop/Mobile 선택 상태 공유 통과.
+
+Collapsible, Navigation Menu 등 기존 primitive 코드·theme CSS는 수정하지 않았다. `primitives.css`에 `--hm-yellow-accent` 한 줄만 추가했다.
+
+## 10. 남은 차이
+
+| 항목 | 분류 |
+|---|---|
+| 외곽 brand 테두리, 그룹 구분선(그룹이 둘 이상일 때) | FOLLOW_UP / MISSING (ui-viz도 미확정·현재 사용 안 함) |
+| 로고 asset(테스트 이미지만), 크기·간격 D-070 | MISSING |
+| 선택 시 하위 그룹 자동 펼침 | 서비스별 TBD(ui-viz도 TBD) |
+| 하위 hover/selected 시작 위치 | 현재 2Depth는 들여쓴 링크 면, 3Depth는 connector 끝부터 시작하는 링크 면 사용(§3a) |
+| 실기기, 1024~1280 사이 시각 | 미확인 |
+| 4뎁스 이상 | 명세 없음. 3뎁스 규칙만 정의(더 깊이 중첩하면 3뎁스 모양이 반복된다) |
+| 선택 경로 전체 연결선을 선택색으로 칠할지 | 현재 모든 connector는 Green Tint 40%를 유지한다(§3a/§5). 선택은 Beige 면 + Primary 글자 + 700 weight로 표현하며, 경로 전체 선의 선택색은 별도 결정 전까지 적용하지 않는다 |
+| LNB 모바일 Sheet 그룹 접기·상위 current 표시 | 현재 링크 목록 방식. Desktop 18px / Mobile 14px 유지 |
+| LNB Mobile Header 공개 API | 구현 완료. GNB/Dashboard 의존성 없음 |
+
+## 11. 관련 파일
+
+```
+packages/ui/src/patterns/lnb/{lnb.tsx,lnb-mobile.tsx,index.ts}
+packages/ui/src/theme/lnb.css
+packages/ui/src/theme/primitives.css  (--hm-yellow-accent)
+src/patterns/lnb.stories.tsx
+```
diff --git a/docs/patterns/loading-screen.md b/docs/patterns/loading-screen.md
new file mode 100644
index 0000000..a243722
--- /dev/null
+++ b/docs/patterns/loading-screen.md
@@ -0,0 +1,90 @@
+# Loading Screen (Pattern)
+
+현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6.10, §6.11)를 따른다.
+
+```text
+Layout visual reference: 외부 ui_viz Reference (ZIP 미포함) (dashboard-composition.md §18, platform-mapping/dashboard-loading-web.md)
+Implementation: 의존하는 primitive 없음. 24개 막대 스피너 + 텍스트, CSS animation만 사용
+```
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (2026-10-06) |
+| 대표 Story | `Patterns/Layout/Loading Screen` → `All` (Inline, Custom label, Narrow parent, Fullscreen) |
+| 경위 | 요청은 "Loading Bar"였으나 ui_viz에 Loading Bar는 없었다. 실제 있는 Dashboard LoadingScreen(스피너)을 사용자가 지정해 구현했다 |
+
+## 2. 역할 구분
+
+| 컴포넌트 | 상황 |
+|---|---|
+| Progress | 진행률을 안다 (0~100%) |
+| Skeleton | 콘텐츠 모양을 안다 |
+| Sonner `loading` | 작업 중임을 알리는 toast |
+| **Loading Screen** | 진행률도 모양도 모르는 채 영역/화면 전체가 준비 중 |
+
+Progress는 Indeterminate 표현을 여전히 갖지 않는다(`progress.md` §11 유지). 버튼 안 inline spinner는 만들지 않았다(ui_viz §18.1과 동일).
+
+## 3. 구성 / API
+
+| export | 역할 |
+|---|---|
+| `LoadingScreen` | 초록 면 + 스피너 + 텍스트. 기본 inline, `fullscreen`이면 viewport 전체 |
+
+```tsx
+<LoadingScreen />                          // inline, 부모 폭
+<LoadingScreen>데이터를 불러오는 중</LoadingScreen>   // 라벨 교체("..."는 자동 추가)
+<LoadingScreen fullscreen />               // position: fixed, inset 0
+```
+
+- 추가 prop은 `fullscreen`뿐이다. `speed`, `size` 같은 prop은 만들지 않았다. 값은 `--hm-loading-*` Token으로 바꾼다.
+- 닫기 버튼, 취소, async lifecycle, 표시/숨김 fade(0.3s)는 두지 않았다. 소비자가 로딩 동안 mount하고 끝나면 제거한다.
+- Fullscreen은 Portal을 쓰지 않는다. transform이 있는 조상 안에 두면 `fixed`가 어긋난다.
+
+## 4. 규격 (`packages/ui/src/theme/loading-screen.css`)
+
+| 항목 | ui_viz | HM | 판정 |
+|---|---|---|---|
+| 스피너 | 44×44, 24 bars, 막대 2.5×10, 15° 간격, 첫 막대 12시 | 동일 (실측 44×44, 막대 2.5×10, origin 1.25px 22px) | MATCHED |
+| 모션 | 막대 opacity 1→0.08, 1.2s linear infinite, 지연 i×0.05s, 회전 없음 | 동일 | MATCHED |
+| 텍스트 | 14/500/-0.02em, white 60%, 끝에 정적 "..." | 동일, 폰트는 `--hm-font-family-base` | MATCHED |
+| Inline | padding 36/24, radius 6, inset shadow 24px .45, gap 12, 가운데 정렬 | 동일 (실측 높이 149, ui_viz smoke 148은 폰트 line box 차이) | MATCHED |
+| Fullscreen | fixed inset 0, assembly는 block·gap 0, 스피너는 묶음 leading edge(텍스트가 44px보다 넓으면 두 중심축이 어긋남), z-index 9999 | fixed inset 0, inline과 같은 column·gap 12로 묶음 전체를 viewport 중앙(스피너·텍스트 중심축 일치) | INTENTIONAL_CHANGE (2026-10-06 사용자 지시: 스피너가 왼쪽으로 치우쳐 보임) |
+| 면 색 | `#0a3322` (Dashboard-local) | `--hm-sem-action-primary` (Default `#123328`) | INTENTIONAL_CHANGE (HM Primitive 재사용, 새 색 만들지 않음) |
+| 폰트 | Inter → Noto Sans KR | HM 기본 폰트 | INTENTIONAL_CHANGE |
+| 막대 끝 | radius 1.5 → 렌더에서 pill | `9999px` | MATCHED |
+| 숨김/표시 fade 0.3s | 있음 | 없음 | FOLLOW_UP (소비자 lifecycle) |
+| 닫기 버튼 + ESC | demo 전용(REFERENCE_ONLY) | 없음 (Story에 로컬 닫기 Button만) | OLD_TEST_ONLY |
+| focus trap, background 차단, task lifecycle | TBD | 만들지 않음 | FOLLOW_UP |
+
+## 5. Token
+
+`--hm-loading-screen-{background, foreground, inline-padding-block, inline-padding-inline, inline-radius, inline-shadow, gap, z-index}`, `--hm-loading-spinner-{size, bar-width, bar-height, bar-count, bar-color, bar-min-opacity, duration, stagger}`, `--hm-loading-text-{font-size, font-weight, letter-spacing, color}`. 면/전경은 `--hm-sem-action-primary` / `--hm-sem-on-action-primary`, 그림자는 `--hm-sem-palette-black`을 참조한다. 신규 Primitive 없음.
+
+## 6. Accessibility / Reduced Motion (INTENTIONAL_CHANGE)
+
+ui_viz는 스피너 semantics와 reduced motion을 TBD로 남겼다. HM은 최소한만 정했다.
+
+- 루트 `role="status"`(polite live region)가 텍스트를 알린다. 막대 컨테이너는 `aria-hidden`.
+- `prefers-reduced-motion: reduce`: 애니메이션을 끄고 막대 opacity를 시계 방향으로 줄여 정적 형태로 보여준다.
+- 진행률이 없으므로 `aria-valuenow` 등은 쓰지 않는다. focus 이동, 배경 입력 차단, `aria-busy`는 소비자 책임.
+
+## 7. 검증 (2026-10-06)
+
+- `npm run typecheck`, `npm run build`, `npm run build-storybook` 통과. 새 warning 없음(기존 chunk size 안내는 이전부터).
+- 실측: inline 면 `rgb(18,51,40)`, padding 36/24, radius 6, shadow inset 24px .45, 스피너 44×44, 막대 24개, animation `hm-loading-fade` 1.2s, 지연 0.05s, spinner→text gap 12.
+- Fullscreen(2026-10-06 수정 후): spinner centerX = label centerX = viewport centerX, 묶음 centerY = viewport centerY, gap 12. 1920/768/390 모두 오차 0, 가로 overflow 없음. reduced-motion에서도 위치 동일(animation만 none). inline은 높이 149, gap 12로 변화 없음.
+- 1920 / 768 / 390, 일반 / `prefers-reduced-motion: reduce` 모두 Playwright(headless Chromium)로 실측했다.
+- 기존 Progress / Skeleton / Sonner / Data Table / Dashboard Layout 코드는 수정하지 않았다.
+
+## 8. 관련 파일
+
+```
+packages/ui/src/patterns/loading-screen/{loading-screen.tsx,index.ts}
+packages/ui/src/theme/loading-screen.css
+packages/ui/src/theme.css          (import)
+packages/ui/src/index.ts           (export)
+src/patterns/loading-screen.stories.tsx
+.storybook/preview.tsx             (Patterns/Layout 정렬)
+```
diff --git a/docs/patterns/page-header.md b/docs/patterns/page-header.md
new file mode 100644
index 0000000..df79228
--- /dev/null
+++ b/docs/patterns/page-header.md
@@ -0,0 +1,110 @@
+# Page Header (Pattern)
+
+현재 HM 구현의 기준 문서. 공통 원칙은 [프로젝트 지침](../guidelines/프로젝트-지침.md), [Button 규칙](../components/button.md), [단일 Navigation 정책](../guidelines/navigation-single-mode.md)을 따른다.
+
+```text
+Layout visual reference: 외부 ui_viz Reference (ZIP 미포함) (dashboard-composition.md §8 Page Heading)
+Implementation: HM Breadcrumb / Button / Dropdown Menu composed as children
+```
+
+## 1. 상태
+
+| 항목 | 내용 |
+|---|---|
+| 구현 상태 | 구현 완료 (2026-10-03) |
+| 대표 Story | [Patterns/Layout/Page Header → Page Header](../../src/patterns/page-header.stories.tsx) (`patterns-layout-page-header--all`) |
+| Dashboard 사용 예 | [Patterns/Layout/Dashboard → Dashboard](../../src/patterns/dashboard-layout.stories.tsx). 기존 대표 Story와 Dashboard 내부 조합 유지 |
+| 분리 이유 | 모든 화면이 Breadcrumb + h1 + 액션을 반복하고, 하단 20px이 Layout contract |
+
+## 2. 구성 / API
+
+| export | 역할 |
+|---|---|
+| `PageHeader` | 행(flex, space-between, 하단 정렬, 줄바꿈) |
+| `PageHeaderContent` | 시작 쪽 세로 묶음 |
+| `PageHeaderTitle` | `h1`(화면의 유일한 h1) |
+| `PageHeaderDescription` | 설명/메타 `p` |
+| `PageHeaderActions` | 끝 쪽 액션 행(Button, Dropdown Menu) |
+
+```tsx
+import {
+  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList,
+  BreadcrumbPage, BreadcrumbSeparator, Button,
+  PageHeader, PageHeaderActions, PageHeaderContent,
+  PageHeaderDescription, PageHeaderTitle,
+} from "@hm-design/ui"
+
+<PageHeader>
+  <PageHeaderContent>
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem><BreadcrumbLink href="#home">홈</BreadcrumbLink></BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem><BreadcrumbLink href="#projects">프로젝트</BreadcrumbLink></BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem><BreadcrumbPage>업무 현황</BreadcrumbPage></BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+    <PageHeaderTitle>업무 현황</PageHeaderTitle>
+    <PageHeaderDescription>프로젝트별 업무 진행 상황을 확인하고 조회합니다.</PageHeaderDescription>
+  </PageHeaderContent>
+  <PageHeaderActions>
+    <Button type="button" variant="primary" appearance="brand" size="default">신규 등록</Button>
+  </PageHeaderActions>
+</PageHeader>
+```
+
+Breadcrumb와 액션 API는 정의하지 않는다(composition). 구분선은 없다(ui-viz에 없음).
+
+대표 예제는 지원되는 `primary × brand`, `size="default"`(Medium 34px) Action 1개를 사용한다. 화면당 Brand는 최대 1개이며 `appearance`를 명시한다. 복수 Action의 PageHeader 전용 세트 규칙은 아직 확정하지 않았으므로 기존 Dashboard fixture를 공통 세트 규칙으로 일반화하지 않는다. 보조 Action이 필요하면 [Button의 사용 위치·세트 규칙과 허용 조합](../components/button.md)을 확인하고, 불명확한 조합은 사용자 결정 후 적용한다.
+
+Story의 Breadcrumb hash 링크와 등록 버튼은 조합 예제다. 실제 화면은 해당 Runtime의 라우팅과 등록 처리 callback을 연결한다. React 소비 화면은 entry에서 `@hm-design/ui/theme.css`를 로드한다. Storybook은 기존 전역 Theme 연결을 재사용한다.
+
+## 3. Token (`packages/ui/src/theme/page-header.css`)
+
+| Token | 값 | ui-viz |
+|---|---|---|
+| `--hm-page-header-gap` | 24px | MATCHED (gap 24) |
+| `--hm-page-header-margin-bottom` | 20px | MATCHED (D-043, 첫 카드까지 20) |
+| `--hm-page-header-breadcrumb-gap` | 10px | MATCHED |
+| title | 28/36/700, 아래→설명 8px | MATCHED (`h2` → `h1`은 INTENTIONAL_CHANGE) |
+| description | 14/20, `--hm-sem-fg-secondary` | MATCHED (색은 ui-viz 임시값 대신 Semantic) |
+| actions gap | 8px | 정의 없음(Button 간격) |
+
+Breadcrumb는 HM Breadcrumb 그대로(14px, 링크). ui-viz는 12px 정적 텍스트였다(INTENTIONAL_CHANGE).
+
+## 4. Responsive / Accessibility
+
+`PageHeaderContent`는 `flex: 1 1 320px; min-width: 0`, 액션은 줄바꿈 후 오른쪽 정렬(390px에서 제목 아래 줄). 긴 제목은 `overflow-wrap: anywhere`. 화면당 `h1`은 하나만 둔다. wrapper에 role을 두지 않는다.
+
+PageHeader는 콘텐츠의 제목 영역이며 Navigation Mode를 정의하지 않는다. 독립 대표 Story는 Navigation을 추가하지 않은 조합 예제다. 실제 페이지는 `GNB | LNB | DASHBOARD` 중 하나만 선택하고 반응형에서도 유지한다. Dashboard에서는 Dashboard 내부 Header/Menu/Sidebar와 합성하며 외부 GNB/LNB를 함께 넣지 않는다.
+
+Dashboard Compact 최소 폭 960px(Sidebar 포함 1232px)과 내부 가로 스크롤은 Dashboard Layout 계약이다. PageHeader 단독 사용처에 이 최소 폭을 자동 적용하지 않는다. PageHeader 자체에는 고정 최소 폭이나 별도 breakpoint가 없으며 기존 flex wrapping과 Theme 규격을 유지한다. 외부 콘텐츠 padding은 소비 Layout이 소유한다.
+
+## 5. 검증 / 관련 파일
+
+### 현재 대표 Reference
+
+- [독립 대표 Story 소스](../../src/patterns/page-header.stories.tsx): Breadcrumb + Title + Description + Actions. 운영 조합에 별도 Story CSS나 Dashboard 최소 폭을 추가하지 않는다.
+- Storybook 경로: `Patterns/Layout/Page Header → Page Header`, ID: `patterns-layout-page-header--all`.
+- 기존 Dashboard 대표 Story는 Dashboard 전체 Layout의 Reference로 유지한다. Verification Story는 운영 Reference로 사용하지 않는다.
+
+### 2026-10-08 독립 대표 Story 검증
+
+- 기존 6024 Storybook에서 독립 메뉴와 대표 Story 렌더링 확인. 1440×900 / 390×844에서 네 구성 요소가 표시되고 문서·body의 가로 넘침 없음. 모바일 Action은 아래 줄 오른쪽으로 배치된다.
+- Computed style: Title 28/36/700, Breadcrumb 14/20, Description 14/20와 Secondary 전경, PageHeader gap 24px·하단 margin 20px·Actions gap 8px 유지. 기존 Noto Sans KR와 Theme Semantic 연결 확인.
+- `primary × brand`, `size="default"` 버튼 1개·높이 34px 확인. Breadcrumb 링크 → Action의 Tab 순서와 focus-visible 링 유지. 콘텐츠의 보이는 `h1`은 1개다.
+- 기존 Dashboard 대표 Story 정상 렌더. Header 48px·Variant C Typography·상태 필터 유지, 이슈 5건 조회 및 전체 47건 복원 확인. 390px에서 Dashboard 최소 폭 960px과 내부 가로 스크롤 유지.
+- PageHeader / Dashboard Console 오류·경고 없음. Storybook 관리자에는 기존 `PopoverProvider ariaLabel`의 Storybook 11 예정 변경 경고 1건이 있다.
+- 새 Story만 대상으로 한 최소 TypeScript 검사와 변경 파일 diff check 통과. 앱 범위 검사는 다른 작업의 Controlled Props와 패키지 선언 불일치 오류 6건으로 실패했으며 해당 파일은 수정하지 않았다. 전체 Component 회귀·build는 이번 범위에서 수행하지 않았다.
+
+### 과거 검증 기록 (기존 문서)
+
+당시 Dashboard Layout Story(1280, 390, 긴 제목)에서 page-header 상단이 Main padding 34 아래, 하단 20px 뒤에 첫 콘텐츠인 것을 확인했다. 이는 당시 Dashboard 조합의 검증 기록이며, 현재 Dashboard 최소 폭·내부 가로 스크롤 정책이나 모든 PageHeader 소비 화면의 padding 규격을 대신하지 않는다.
+
+```
+packages/ui/src/patterns/page-header/{page-header.tsx,index.ts}
+packages/ui/src/theme/page-header.css
+src/patterns/page-header.stories.tsx
+src/patterns/dashboard-layout.stories.tsx
+```
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c8996c2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HM Design System · UI Preview</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..c586ec4
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,10475 @@
+{
+  "name": "hm-design-system-poc",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hm-design-system-poc",
+      "version": "0.1.0",
+      "workspaces": [
+        "packages/*"
+      ],
+      "dependencies": {
+        "@hm-design/center-graphic": "*",
+        "@hm-design/ui": "*",
+        "lucide-react": "^1.49.0",
+        "react": "19.3.0",
+        "react-dom": "19.3.0"
+      },
+      "devDependencies": {
+        "@storybook/react-vite": "10.6.1",
+        "@tailwindcss/vite": "4.3.3",
+        "@types/node": "24.7.0",
+        "@types/react": "19.3.0",
+        "@types/react-dom": "19.3.0",
+        "@vitejs/plugin-react": "6.1.1",
+        "storybook": "10.6.1",
+        "tailwindcss": "4.3.3",
+        "typescript": "7.0.2",
+        "vite": "8.3.0"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.5.0.tgz",
+      "integrity": "sha512-6OzddxPio9UiWTCemp4N8cYLV2ZN1ncRnV1cVGtve7dhPOtRkleRyx32GQCYSwDYgaHU3USMm84tNsvKzRCa1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
+      "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz",
+      "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
+      "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz",
+      "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.29.7.tgz",
+      "integrity": "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz",
+      "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.7.tgz",
+      "integrity": "sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/helper-replace-supers": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
+      "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.29.7.tgz",
+      "integrity": "sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz",
+      "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz",
+      "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.29.7.tgz",
+      "integrity": "sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz",
+      "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.29.7.tgz",
+      "integrity": "sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.29.7",
+        "@babel/helper-optimise-call-expression": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.29.7.tgz",
+      "integrity": "sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz",
+      "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz",
+      "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz",
+      "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz",
+      "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.9.tgz",
+      "integrity": "sha512-CjXrNHTnvqBVqHgdBysY3vk2T8tpJHb5/RMeHJBTyVa9xgugCB0CJTx/3oO8RV2QRQP391RWpB7D6hLjm8V9uA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz",
+      "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.29.7.tgz",
+      "integrity": "sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.29.7.tgz",
+      "integrity": "sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.29.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.29.9.tgz",
+      "integrity": "sha512-FFwIwzU+7SCOuxxV4YtJql6T9981ZVTm+FHO5GhVsRqCTdy0WwrEZh3l42ARpXruJUDGOptdduHW6Zr7pNPLNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.29.7",
+        "@babel/helper-create-class-features-plugin": "^7.29.7",
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7",
+        "@babel/plugin-syntax-typescript": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.29.7.tgz",
+      "integrity": "sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "@babel/plugin-syntax-jsx": "^7.29.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.29.7",
+        "@babel/plugin-transform-typescript": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz",
+      "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz",
+      "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz",
+      "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@date-fns/tz": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.5.0.tgz",
+      "integrity": "sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==",
+      "license": "MIT"
+    },
+    "node_modules/@dotenvx/dotenvx": {
+      "version": "1.75.1",
+      "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-1.75.1.tgz",
+      "integrity": "sha512-/BITOC9dmS/edY2zQwZNicQ059O6RKabtQfyEafV0nGtfYRNHYy1DIPiYVcov40+tob9hfmBnbR963dS+EQ1DQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@dotenvx/primitives": "^0.8.0",
+        "commander": "^11.1.0",
+        "conf": "^10.2.0",
+        "dotenv": "^17.2.1",
+        "enquirer": "^2.4.1",
+        "env-paths": "^2.2.1",
+        "execa": "^5.1.1",
+        "fdir": "^6.2.0",
+        "ignore": "^5.3.0",
+        "object-treeify": "1.1.33",
+        "open": "^8.4.2",
+        "picomatch": "^4.0.4",
+        "systeminformation": "^5.22.11",
+        "undici": "^7.11.0",
+        "which": "^4.0.0",
+        "yocto-spinner": "^1.1.0"
+      },
+      "bin": {
+        "dotenvx": "src/cli/dotenvx.js"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/@dotenvx/dotenvx/node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@dotenvx/primitives": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@dotenvx/primitives/-/primitives-0.8.0.tgz",
+      "integrity": "sha512-VYJy0uhFm9zTJ1TxBaW/pA8bjbOM/OttaNMwZ1RHG4JKyRG7DhSdiqD1ipQoAyoD22olUtxbP78W9xY3Wd11bg==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz",
+      "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz",
+      "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.8.0",
+        "@floating-ui/utils": "^0.2.12"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz",
+      "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.8.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
+      "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==",
+      "license": "MIT"
+    },
+    "node_modules/@hm-design/center-graphic": {
+      "resolved": "packages/center-graphic",
+      "link": true
+    },
+    "node_modules/@hm-design/ui": {
+      "resolved": "packages/ui",
+      "link": true
+    },
+    "node_modules/@hono/node-server": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-2.1.3.tgz",
+      "integrity": "sha512-TA//nWMqPhbfdfneACk6t5a9eqbS9lABEPyKn0/xZTah3H3U2XaVg85rJFl0/Fyit0I552YDHgXGVSf3GwqbUw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "hono": "^4"
+      }
+    },
+    "node_modules/@joshwooding/vite-plugin-react-docgen-typescript": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.7.0.tgz",
+      "integrity": "sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "glob": "^13.0.1",
+        "react-docgen-typescript": "^2.2.2"
+      },
+      "peerDependencies": {
+        "typescript": ">= 4.3.x",
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@modelcontextprotocol/sdk": {
+      "version": "1.31.0",
+      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.31.0.tgz",
+      "integrity": "sha512-UvTMgnNlnIBO/22ob2RcVGDlcvOslQs8T59+FTGdA0L27a39fdGF/EDETNtDVK4DZGpwomlsYpRdA8UXcVL/pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@hono/node-server": "^1.19.9 || ^2.0.5",
+        "ajv": "^8.17.1",
+        "ajv-formats": "^3.0.1",
+        "content-type": "^1.0.5",
+        "cors": "^2.8.5",
+        "cross-spawn": "^7.0.5",
+        "eventsource": "^3.0.2",
+        "eventsource-parser": "^3.0.0",
+        "express": "^5.2.1",
+        "express-rate-limit": "^8.2.1",
+        "hono": "^4.11.4",
+        "jose": "^6.1.3",
+        "json-schema-typed": "^8.0.2",
+        "pkce-challenge": "^5.0.0",
+        "raw-body": "^3.0.0",
+        "zod": "^3.25 || ^4.0",
+        "zod-to-json-schema": "^3.25.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "@cfworker/json-schema": "^4.1.1",
+        "zod": "^3.25 || ^4.0"
+      },
+      "peerDependenciesMeta": {
+        "@cfworker/json-schema": {
+          "optional": true
+        },
+        "zod": {
+          "optional": false
+        }
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.2.4.tgz",
+      "integrity": "sha512-AJxoUD2/15ESHbvpcyjU274nsAPLuOtPHCk0vKJM5pj//Fg/B1FXNWjPnXTT9PymCYYiHo4zPj0ZomXBKhoy7g==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.3"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1 || ^2.0.0-alpha.4",
+        "@emnapi/runtime": "^1.7.1 || ^2.0.0-alpha.4"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@oxc-parser/binding-android-arm-eabi": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm-eabi/-/binding-android-arm-eabi-0.127.0.tgz",
+      "integrity": "sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-android-arm64": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-android-arm64/-/binding-android-arm64-0.127.0.tgz",
+      "integrity": "sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-arm64": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-arm64/-/binding-darwin-arm64-0.127.0.tgz",
+      "integrity": "sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-darwin-x64": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-darwin-x64/-/binding-darwin-x64-0.127.0.tgz",
+      "integrity": "sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-freebsd-x64": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-freebsd-x64/-/binding-freebsd-x64-0.127.0.tgz",
+      "integrity": "sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-gnueabihf": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-0.127.0.tgz",
+      "integrity": "sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm-musleabihf": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-0.127.0.tgz",
+      "integrity": "sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-gnu": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-0.127.0.tgz",
+      "integrity": "sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-arm64-musl": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-arm64-musl/-/binding-linux-arm64-musl-0.127.0.tgz",
+      "integrity": "sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-ppc64-gnu": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-0.127.0.tgz",
+      "integrity": "sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-riscv64-gnu": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-0.127.0.tgz",
+      "integrity": "sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-riscv64-musl": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-0.127.0.tgz",
+      "integrity": "sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-s390x-gnu": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-0.127.0.tgz",
+      "integrity": "sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-gnu": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-gnu/-/binding-linux-x64-gnu-0.127.0.tgz",
+      "integrity": "sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-linux-x64-musl": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-linux-x64-musl/-/binding-linux-x64-musl-0.127.0.tgz",
+      "integrity": "sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-openharmony-arm64": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-openharmony-arm64/-/binding-openharmony-arm64-0.127.0.tgz",
+      "integrity": "sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-wasm32-wasi": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-wasm32-wasi/-/binding-wasm32-wasi-0.127.0.tgz",
+      "integrity": "sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.9.2",
+        "@emnapi/runtime": "1.9.2",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-arm64-msvc": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-0.127.0.tgz",
+      "integrity": "sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-ia32-msvc": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-0.127.0.tgz",
+      "integrity": "sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-parser/binding-win32-x64-msvc": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-parser/binding-win32-x64-msvc/-/binding-win32-x64-msvc-0.127.0.tgz",
+      "integrity": "sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.127.0.tgz",
+      "integrity": "sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-android-arm-eabi": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-android-arm-eabi/-/binding-android-arm-eabi-11.21.2.tgz",
+      "integrity": "sha512-xQoCRv+gKax9KTdwdaQNnAFOai8neay7g3jExDIORzhbrejwGSJaZNTdOJHR5ziLg2joMxOCMOFMo4zuxza2uQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-android-arm64": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-android-arm64/-/binding-android-arm64-11.21.2.tgz",
+      "integrity": "sha512-HF5oiE2L05yInPYCFD/4uxSrEZW4SuIfn99Y6L1xnJnzl066JR+MJs2rIdstw8A2MPlAKH+13dpFPNycjqzvGg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-darwin-arm64": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-arm64/-/binding-darwin-arm64-11.21.2.tgz",
+      "integrity": "sha512-UX4u49CVCAD8QZNELaW8eMGgMAGwFWYEPbvNsh+3r/gs4NX3KfpiACMVwRQT0EuH3uat9hM5Zl+Ppm9pJD8tgg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-darwin-x64": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-x64/-/binding-darwin-x64-11.21.2.tgz",
+      "integrity": "sha512-J9xPx7YBkrRmJ+xl561ztnMWEc1aOyjEIxBiGX1dVb3u7bGSnfObfcZk+Pd+uM0HZAPNsQ1xvD8j52A/uOSqNQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-freebsd-x64": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-freebsd-x64/-/binding-freebsd-x64-11.21.2.tgz",
+      "integrity": "sha512-fRlt7OvSaQkWj6+EDTVxawVxOlqJB2QSnBfkeCyK4RTvsGctbw3BiH2Tb7DzMs7bikc4BRBpvWP5zF9K8b54Zg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm-gnueabihf": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-11.21.2.tgz",
+      "integrity": "sha512-gK+vPUcPQITkGwBKpZGrcDHSlU6eDGl7AQacxS2CEKAZIBHWkOVFeJwLZ4tYnA1acJqRM5lt7yYwPCVqGHIJ7A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm-musleabihf": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm-musleabihf/-/binding-linux-arm-musleabihf-11.21.2.tgz",
+      "integrity": "sha512-L/Rgas7SrOKy/z7IH+HxSFRqVO4PuLDKLEGKvnhoCBBq3UJ0YzGBou3qMzaAGgkJwsIvX2pBF+7ojzfUhLiZxQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm64-gnu": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-11.21.2.tgz",
+      "integrity": "sha512-CUEYvlX1Fk7E9kUMzuswru1J9HLxMwnpDeQGjQuI4ZH+iNCoa2X9T+pvyzrbsgl7WnIeTFTlNlHsRfVdf5g9/g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-arm64-musl": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-musl/-/binding-linux-arm64-musl-11.21.2.tgz",
+      "integrity": "sha512-ViN1ZibQyxwC67GpoP33oo+S9UyUnkog13vzQb9+v9bCNvrVzJuk0MRdacjtv/9xfRMVF/eqHFyl8YOeykI10Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-ppc64-gnu": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-11.21.2.tgz",
+      "integrity": "sha512-CU1sCqWnhGqYD5I1HedHk5pujrn7ssDkNB/AEQd/pd3D/EojVSgJUlpbafwIbyhia3PgIfkvdFpRPWSALzVumA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-riscv64-gnu": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-11.21.2.tgz",
+      "integrity": "sha512-jWVyZtIHca4Gb96x7dag+y69vlei7ffjrsveLkmf2ZhqEAz6ZSBnY1GWvgZUaZlwZP62A3xD092BW97Q5VGc+g==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-riscv64-musl": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-riscv64-musl/-/binding-linux-riscv64-musl-11.21.2.tgz",
+      "integrity": "sha512-LF29obFqNgBUgDX7rmUK7M4D0JQG5LxhYzn3xXmECcHU9aQAdWG7NiY052qybtesEdwHQXKNTWYQ7mTsybNvWg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-s390x-gnu": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-11.21.2.tgz",
+      "integrity": "sha512-+NYcm+cCHBbtdQQ3A4phQTSuVRYnNHz7wrl9XRAPEovcdoqi0mb1K5ZOl+jN54ZD+q1zz3V0vltbFJmzecJKmw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-x64-gnu": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-gnu/-/binding-linux-x64-gnu-11.21.2.tgz",
+      "integrity": "sha512-UQqZDdG2r2HhAOsZEgufkIWHPQ886IUyuJQkoZByvzhW8j51R4UNzGBJFkTiTnLhQnggwJRdJgFWK4uY6ZVIMw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-linux-x64-musl": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-musl/-/binding-linux-x64-musl-11.21.2.tgz",
+      "integrity": "sha512-3Q9PMRjalWkT6NZ4jfujuqTCFwoWErg3y3BnOgb544B8IMw4PktiwWOigMfOHNRLMghZeJ7hpfpZf4CP7rV7Og==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-openharmony-arm64": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-openharmony-arm64/-/binding-openharmony-arm64-11.21.2.tgz",
+      "integrity": "sha512-Eljeq3ndtyKhM+Es8LITi4Zl2htzuRZcrPMF3kMCsrILztvU6AjZ3FuEhHHKobPUB9rMpzLpJP5bDqXI7r+iog==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-wasm32-wasi/-/binding-wasm32-wasi-11.21.2.tgz",
+      "integrity": "sha512-HGDbNsIywqc4LxU38+CTJNnB/6BF7rheWOJ259b4eE0aEnelYblC8x+1tEd63bp31fYne63RQz9Jb4yVnC7Yig==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.11.0",
+        "@emnapi/runtime": "1.11.0",
+        "@napi-rs/wasm-runtime": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.0.tgz",
+      "integrity": "sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.0.tgz",
+      "integrity": "sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@oxc-resolver/binding-win32-arm64-msvc": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-11.21.2.tgz",
+      "integrity": "sha512-iWx25CBEgH49iE9q5coEGI/jb1jl5kkCY9z6U5Og67xCkQ/WFMDc2J5U78+AE91SUxM2NqSLhJC8/PLfWnImww==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@oxc-resolver/binding-win32-x64-msvc": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-x64-msvc/-/binding-win32-x64-msvc-11.21.2.tgz",
+      "integrity": "sha512-VPoCAhKvCQTlG7vxqaBXcmuvbh77BfnGXj8g0pbvVXpm1F/R8rDVwqIWcEbMzrI1JvJlm8v7T9uMVQb6UctMRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.3.tgz",
+      "integrity": "sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.7.tgz",
+      "integrity": "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.15.tgz",
+      "integrity": "sha512-WTQwcAvQf5sOcuUyi90lKPbhwcvQ+j55cjrSmeaN+L2vKU3DooOvlKw2MDeiJ5IkV5N905KW0/fGojKOBhD11A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.20",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.20.tgz",
+      "integrity": "sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collapsible": "1.1.20",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.23.tgz",
+      "integrity": "sha512-VAYOiQRqj3GPpYJE0I9J+X8Ip05cyVlNdKOFeiGS2Ou1HHGfpl0BxOyZm6nmVDyU+W+NF3/XLzmjHmVGydhwgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dialog": "1.1.23",
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.15.tgz",
+      "integrity": "sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.15.tgz",
+      "integrity": "sha512-fy+dyVR+90nelK8rqIznFlxzx7uPcGbhxH8Nfr2bHb4UfSe+e3hklOC0luK0hDwVwnRX7xTRySpsrQVeW+/oNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.2.6.tgz",
+      "integrity": "sha512-4ULOTJ/mqy2hT9GlWa/MFHxHSvH3nJzHnZM1waNsc5Bonv7i70aNenghXmD97S6OJ81ekXONGGt4nT1r0PfEdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.11.tgz",
+      "integrity": "sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.20.tgz",
+      "integrity": "sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.15.tgz",
+      "integrity": "sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz",
+      "integrity": "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.2.2.tgz",
+      "integrity": "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.3.7.tgz",
+      "integrity": "sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.23.tgz",
+      "integrity": "sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.4.tgz",
+      "integrity": "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.19.tgz",
+      "integrity": "sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-effect-event": "0.0.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.24.tgz",
+      "integrity": "sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.6.tgz",
+      "integrity": "sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.16.tgz",
+      "integrity": "sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.16.tgz",
+      "integrity": "sha512-Q4TLEn2A7TAypxwmd6R9EwrlXDvkfYSDMrq9/887AXAGh+G1rH+kYJKSTv+Si9Y0JPKTwKYv6PviAJosysNimA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-label": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.23.tgz",
+      "integrity": "sha512-H8qONfZd3ltrU3+jHCIgITbWo6e1iTKvP9DHdrvYbX48ooRM5FjEDTn16AMwdfuOGkWdZEhpl3PLL/Wk/AnHDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.4.tgz",
+      "integrity": "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.15.tgz",
+      "integrity": "sha512-o/rdYEwZTTo5tjknnPeyQFU45kUC4i/XyeDPP+HGyi6XqpOP6Zf5Ya5vh/Yfe9Id5JiuWnnAx2XqIeD3UYZt0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.24.tgz",
+      "integrity": "sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.24",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.24.tgz",
+      "integrity": "sha512-eeVs0vf7cuqXaM0qLQCPcufImiJNVBXdJDLu7ZGYl2732UH23Qat/foNGrr6vYV3/DdTsBqASoggUFgH14OcZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.22",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.22.tgz",
+      "integrity": "sha512-ou7iLEJ+yrhQndkkA4U21XIdS/CS45F4iXIkTZcb6/Ne9EMsOuDudVmCwmDnfFZZ+y1FZqXRNSIgBy+YMvZVZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-previous": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.16.tgz",
+      "integrity": "sha512-Tj9P6ntAJEw52oq/F0AGknXR4XncxEt7XU47O3xJQOiWfLzEy3d9gtgKfvjSzGxzHkfL+VzvxGu2KTFsloJqXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.11.tgz",
+      "integrity": "sha512-4gvFnmDXu3dgj21CqsufzIameRvlRd4SBqaWhcrlrNhRo0Y5i/49AmRJYe1fdAM3G2VNBbmin4b0D6cdQocwgw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-is-hydrated": "0.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.23.tgz",
+      "integrity": "sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.3.7.tgz",
+      "integrity": "sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-rect": "1.1.4",
+        "@radix-ui/react-use-size": "1.1.4",
+        "@radix-ui/rect": "1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.17",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.17.tgz",
+      "integrity": "sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.10.tgz",
+      "integrity": "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.10.tgz",
+      "integrity": "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.16.tgz",
+      "integrity": "sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.4.7.tgz",
+      "integrity": "sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.19.tgz",
+      "integrity": "sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.18",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.18.tgz",
+      "integrity": "sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.3.7.tgz",
+      "integrity": "sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-previous": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.15.tgz",
+      "integrity": "sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.4.7.tgz",
+      "integrity": "sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.3",
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-previous": "1.1.4",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.3.tgz",
+      "integrity": "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.3.7.tgz",
+      "integrity": "sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-size": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.21.tgz",
+      "integrity": "sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.23",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.23.tgz",
+      "integrity": "sha512-ofhyAsYaocRGOs/n0XWdUOSVzEAG6BfrMVM8z0c0kLEWY38w/0WuMFPTJP/HVaZPYkMvHZoKIIhNcjbTCBILPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.18.tgz",
+      "integrity": "sha512-7lonPlKfSacd20GlOBx2ltuVKz9oqWYZz+oMQyOltw6t1y2nyftj2ZmwwUHYn49kqfDWcp8dNZm5NgV+5Z+mug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.19.tgz",
+      "integrity": "sha512-OtnwuSVjd1Ofi+AdnvhsjQdyuhCDwYs1w9RyB5BN/OavXOVQo42SYqQjwUnbPnaiPFBpQ9aX70dWeee+v2oBLA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-toggle": "1.1.18",
+        "@radix-ui/react-use-controllable-state": "1.2.6"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.19.tgz",
+      "integrity": "sha512-Ph0IvtYw4VB12ZnZg+YtrGs8yJQsnizwo/zu0R4Y/nWugtJzA7Pg1eWeuDR9+LSqn+xjamss+UOSOJJJ4gx8jw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-separator": "1.1.15",
+        "@radix-ui/react-toggle-group": "1.1.19"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.16.tgz",
+      "integrity": "sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.4.tgz",
+      "integrity": "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.6.tgz",
+      "integrity": "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz",
+      "integrity": "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.5.tgz",
+      "integrity": "sha512-ge3ipobwSXTj4JyVtswQ7qZj0ZHdtbGuOno/LrgAAeSxtsJ6Vs4Gz5IkPH2bmqpjcLUFoqGhA/mueuIf63UXlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.3.tgz",
+      "integrity": "sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz",
+      "integrity": "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.4.tgz",
+      "integrity": "sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.4.tgz",
+      "integrity": "sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.4.tgz",
+      "integrity": "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.11.tgz",
+      "integrity": "sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.3.tgz",
+      "integrity": "sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==",
+      "license": "MIT"
+    },
+    "node_modules/@rolldown/binding-android-arm-eabi": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.12.tgz",
+      "integrity": "sha512-dB/a1214qKfHMXCpgqR4OZT+jS4kTyEXbQGJPqzobt5EwH5rX080pxE37alt3RzvR1bf1Yz/yGqRfrYAxuPw0A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.12.tgz",
+      "integrity": "sha512-7KHFgQ5VJxIHcLlrwrc3Xbds7oTNQT7Pgi9gQCJKrd2VGab/UksIOYp6VD8MzCstGxOKMgNamPwUCfxPdP1OHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.12.tgz",
+      "integrity": "sha512-3YIhqHD96nA5SaYNRBR16HnGv4oavZvXfD/ayHM+oYZ0WD/8lBAtf6zQua4kEyAvpqrluKXl0lnOBoiNby7x9w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.12.tgz",
+      "integrity": "sha512-UuuJ35MFw4gmFOrE9pEqIV+K3syIKveph+Qc1/ljHZVdoDW4pz/JHR/eMVom+TZGl/5OOvGJOWaOCVt3ZfqhxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.12.tgz",
+      "integrity": "sha512-uMvssit0a4W+/7D8CbHUvG719mH3R2jwXAlh/XcPvuHTE0g++LymF88DCGNX0HM2rBOn0xrzgXktIB6fLSJBTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.12.tgz",
+      "integrity": "sha512-XcFu0R0xWnwzSf4IQgFH1rJIckPN1pLy2R+4r9IDB7Yfu/ys9cVqfa4pBrMHj7a3gl8mIR4nRNPg0e5IvEVs6g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.12.tgz",
+      "integrity": "sha512-260UrKgn8tz39ak+SMDOirKzr7V04M9dWPw5llW00SwBivCZoWcRBKV1d8cXnRkUmSZA3BdiUmBHWk7734Ulpw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.12.tgz",
+      "integrity": "sha512-5YK1I9SqDkbPgc1IA8BgDl34suqUS2q0KWnBrirm0E51YjOs6eo6dV6jbQfNE/argHRSvd0QUGgtpIoYx+WWpw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.12.tgz",
+      "integrity": "sha512-Rkcrmp7eFRg74yL5fXEU91JEWbdEPLevWwGtXpmhbjlD1StScbWTmO94Bhly+Mo+ketKYkdmM1vNUKeWSlx8cQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.12.tgz",
+      "integrity": "sha512-qvK4DuAsQc2BSjlx+Xr+IzOIvvxbGZqxFwdWfG6F518Erj0GGISyQbJ6pIappnOxlNPzNHvo/L0BwB30GZ+zVw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.12.tgz",
+      "integrity": "sha512-Q9uLBO53Xd4QIq1WOycVQyPP1O4HhraEV2qqb3uTrnVw6QZih9duY4vNXOivL1xoUS1/z+W8eF4NMfl2a8Sdjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.12.tgz",
+      "integrity": "sha512-3IBxWFMjbOZskDPKv8Lf9BCnahlKuHthWkYnyIxOH/QcJrFcS4EmcenthApkwr/5+nEqZlLzeYbxeMaX7A5u4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.12.tgz",
+      "integrity": "sha512-xtX61xg4LKPkPWilZU1ynKClz5Gj4bf74LML4r3eVLWumKnGjoEr1OSHQhMdbBDoYTi+yjrujvpZe2pUnqCrrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.12.tgz",
+      "integrity": "sha512-At7fPB6PCaIjzgIhEZFxuT+BBFqiQibJDT4d3PhiR3f4E7bbMZF4aKblbFfEM3sETRDd1YiQx/+U/g/B/ou5Ew==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.12.tgz",
+      "integrity": "sha512-WIw2haVKwjuYdXkHaoC0mF8Le71TuCBxjrdKqLbJGctbBABj+ClfmNvtbOnzpq3RokNo5+V1qhtSzJyXorsklQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
+      "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.4.0.tgz",
+      "integrity": "sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@sec-ant/readable-stream": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@sec-ant/readable-stream/-/readable-stream-0.4.1.tgz",
+      "integrity": "sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@shadcn/registry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@shadcn/registry/-/registry-0.1.0.tgz",
+      "integrity": "sha512-eMF6tPNi9SWZgPvqBvPQFhJN7gV9PcjRdF3kPiiWo5yZJocWqVgxFuspCHrOij3bIJ797NIGZ+j/v7AiXfA6qg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/parser": "^7.28.0",
+        "@babel/plugin-transform-typescript": "^7.28.0",
+        "@babel/preset-typescript": "^7.27.1",
+        "@dotenvx/dotenvx": "^1.48.4",
+        "cn": "^0.2.4",
+        "cosmiconfig": "^9.0.0",
+        "deepmerge": "^4.3.1",
+        "execa": "^9.6.0",
+        "fast-glob": "^3.3.3",
+        "fs-extra": "^11.3.1",
+        "fuzzysort": "^3.1.0",
+        "kleur": "^4.1.5",
+        "ora": "^8.2.0",
+        "postcss": "^8.5.23",
+        "prompts": "^2.4.2",
+        "recast": "^0.23.11",
+        "socks": "^2.8.8",
+        "stringify-object": "^5.0.0",
+        "ts-morph": "^26.0.0",
+        "tsconfig-paths": "^4.2.0",
+        "type-fest": "^4.41.0",
+        "undici": "^7.29.0",
+        "zod": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/@shadcn/registry/node_modules/cn": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.2.6.tgz",
+      "integrity": "sha512-+i4L0zUGgRcEnhsxueVrP7iBGxBx5iD0WOTYg1MwFEu2ZyCmH5Ov2V1cul2Ht5UchRQQgftCf4be/RxspuW6QQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cn": "bin/cn.mjs"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/@sindresorhus/merge-streams": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
+      "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/builder-vite": {
+      "version": "10.6.1",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-10.6.1.tgz",
+      "integrity": "sha512-kUMRRRS4MpJdxOLhrlQX3cpMYi2vVB3tIIRXyqWmAjVM6xT7OZ1SCQEMFPP+S3ToRqaYWZQb8aBqrJucbbYufA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^10.6.1",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@storybook/global": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@storybook/icons": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-2.1.0.tgz",
+      "integrity": "sha512-Fxh9vYpX9bQqFeHRiY8h2ApeRGDzRSMLwJwNZ/AIRqnyOKHxRKL+yFe+ctEkVJmuptRE9u1Hrn8ZZNHyfDKKNg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@storybook/react": {
+      "version": "10.6.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-10.6.1.tgz",
+      "integrity": "sha512-t0QIzO0MVcpD52UEMZKSv35nO/+8vUnLGoFC1E3BIVjHEIdr6IFFM7ty2E7FWsaZGsah3XrFINKT3dPd2Atz+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "@storybook/react-dom-shim": "10.6.1",
+        "react-docgen": "^8.0.2",
+        "react-docgen-typescript": "^2.2.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "storybook": "^10.6.1",
+        "typescript": ">= 4.9.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/react-dom-shim": {
+      "version": "10.6.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-10.6.1.tgz",
+      "integrity": "sha512-OkPFycR6kVE+9ZsgQWRqnUfZm/sLY6dxsNAn3lsvV7DSAQWH9QnHLkqP9E/N/Hg6cKPDtGzDZ8vPNDz2FuaDuQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "storybook": "^10.6.1"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/react-vite": {
+      "version": "10.6.1",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-10.6.1.tgz",
+      "integrity": "sha512-oyUZxuW2lIJN8BRbYyMyZbfjeYqtF6HwmNfqa1SAF525zRnMewYp66wm/5d8FAgwqejOf6N2+wR3hX866lSwMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@joshwooding/vite-plugin-react-docgen-typescript": "^0.7.0",
+        "@rollup/pluginutils": "^5.0.2",
+        "@storybook/builder-vite": "10.6.1",
+        "@storybook/react": "10.6.1",
+        "empathic": "^2.0.0",
+        "magic-string": "^1.1.0",
+        "react-docgen": "^8.0.2",
+        "resolve": "^1.22.8",
+        "tsconfig-paths": "^4.2.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "storybook": "^10.6.1",
+        "typescript": ">= 4.9.x",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.3.tgz",
+      "integrity": "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.24.1",
+        "jiti": "^2.7.0",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.3.tgz",
+      "integrity": "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-arm64": "4.3.3",
+        "@tailwindcss/oxide-darwin-x64": "4.3.3",
+        "@tailwindcss/oxide-freebsd-x64": "4.3.3",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.3.3",
+        "@tailwindcss/oxide-linux-x64-musl": "4.3.3",
+        "@tailwindcss/oxide-wasm32-wasi": "4.3.3",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.3.3"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.3.tgz",
+      "integrity": "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.3.tgz",
+      "integrity": "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.3.tgz",
+      "integrity": "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.3.tgz",
+      "integrity": "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.3.tgz",
+      "integrity": "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.3.tgz",
+      "integrity": "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.3.tgz",
+      "integrity": "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.3.tgz",
+      "integrity": "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.3.tgz",
+      "integrity": "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.3.tgz",
+      "integrity": "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.11.1",
+        "@emnapi/runtime": "^1.11.1",
+        "@emnapi/wasi-threads": "^1.2.2",
+        "@napi-rs/wasm-runtime": "^1.1.4",
+        "@tybys/wasm-util": "^0.10.2",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "1.11.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.11.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "dev": true,
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
+      "version": "2.8.1",
+      "dev": true,
+      "inBundle": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.3.tgz",
+      "integrity": "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.3.tgz",
+      "integrity": "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@tanstack/react-store": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.11.2.tgz",
+      "integrity": "sha512-oj5O5DmiMWE+ih+SioX2ayC1kbK7d3fpLx0B75fPJr9nY3zU+hoW010yr64qXsY/9fyiLVE2bn5mGNV3owm8RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.11.2",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-table": {
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-9.2.4.tgz",
+      "integrity": "sha512-Rzp1Q4e0/nIgEjmISYR5HeEgLTNtrG+C7NFZf/AbCxPO5hg+zC3yNGwcoECigUk8SFzzvhXbd2rFdtP2ZiGrfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/react-store": "^0.11.1",
+        "@tanstack/table-core": "9.2.4"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=18"
+      }
+    },
+    "node_modules/@tanstack/store": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.11.2.tgz",
+      "integrity": "sha512-sJ4mjol8uQsHV0gOJzzjwXfh2Fwm+Sz0+8deqiTm4jGbMdjzNSW+xZCFm0kUa870uhd8yi+DpKnZb5Kc4apa0Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "9.2.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-9.2.4.tgz",
+      "integrity": "sha512-GwdDyGGr6UXAtubF14yAwcXvdaogqfsQgIk89Suebjxob/Rjq2xvfmXsjDF1rQmKmhHsJm9TOY7myxv3i6geJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "^0.11.1"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.2.tgz",
+      "integrity": "sha512-yzr2S9HyAIdhz2/6qHgbs665Q7PKVcDF05vsOlHPxG1mo36gKVesdYVeDLnXgfjJ03CrKRk08knc6+E/9m8v2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.6.7",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.7.tgz",
+      "integrity": "sha512-MPCpX8bxe8zS+JmmTwLp8jd0dy1rAm60Te/SL8JrQM3qvQJcBOs1d7IefJMyZzqM3EWBrDn/LWDt1BCGu4ASfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
+      }
+    },
+    "node_modules/@ts-morph/common": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.27.0.tgz",
+      "integrity": "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.3.3",
+        "minimatch": "^10.0.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.4.tgz",
+      "integrity": "sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/doctrine": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.9.tgz",
+      "integrity": "sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.7.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.7.0.tgz",
+      "integrity": "sha512-IbKooQVqUBrlzWTi79E8Fw78l8k1RNtlDDNWsFZs7XonuQSJ8oNYfEeclhprUldXISRMLzBpILuKgPlIxm+/Yw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.14.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.3.0"
+      }
+    },
+    "node_modules/@types/resolve": {
+      "version": "1.20.6",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",
+      "integrity": "sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/validate-npm-package-name": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz",
+      "integrity": "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@typescript/typescript-aix-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-aix-ppc64/-/typescript-aix-ppc64-7.0.2.tgz",
+      "integrity": "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-arm64/-/typescript-darwin-arm64-7.0.2.tgz",
+      "integrity": "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-darwin-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-x64/-/typescript-darwin-x64-7.0.2.tgz",
+      "integrity": "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-arm64/-/typescript-freebsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-freebsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-x64/-/typescript-freebsd-x64-7.0.2.tgz",
+      "integrity": "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm/-/typescript-linux-arm-7.0.2.tgz",
+      "integrity": "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm64/-/typescript-linux-arm64-7.0.2.tgz",
+      "integrity": "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-loong64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-loong64/-/typescript-linux-loong64-7.0.2.tgz",
+      "integrity": "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-mips64el": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-mips64el/-/typescript-linux-mips64el-7.0.2.tgz",
+      "integrity": "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-ppc64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-ppc64/-/typescript-linux-ppc64-7.0.2.tgz",
+      "integrity": "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-riscv64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-riscv64/-/typescript-linux-riscv64-7.0.2.tgz",
+      "integrity": "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-s390x": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-s390x/-/typescript-linux-s390x-7.0.2.tgz",
+      "integrity": "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-linux-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-linux-x64/-/typescript-linux-x64-7.0.2.tgz",
+      "integrity": "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-arm64/-/typescript-netbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-netbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-x64/-/typescript-netbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-arm64/-/typescript-openbsd-arm64-7.0.2.tgz",
+      "integrity": "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-openbsd-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-x64/-/typescript-openbsd-x64-7.0.2.tgz",
+      "integrity": "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-sunos-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-sunos-x64/-/typescript-sunos-x64-7.0.2.tgz",
+      "integrity": "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-arm64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-arm64/-/typescript-win32-arm64-7.0.2.tgz",
+      "integrity": "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@typescript/typescript-win32-x64": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/@typescript/typescript-win32-x64/-/typescript-win32-x64-7.0.2.tgz",
+      "integrity": "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.1.tgz",
+      "integrity": "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+        "babel-plugin-react-compiler": "^1.0.0",
+        "oxc-transform-react": "^0.145.0",
+        "vite": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rolldown/plugin-babel": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "oxc-transform-react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.4.tgz",
+      "integrity": "sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "3.2.4",
+        "@vitest/utils": "3.2.4",
+        "chai": "^5.2.0",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.4.tgz",
+      "integrity": "sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.4.tgz",
+      "integrity": "sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyspy": "^4.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.4.tgz",
+      "integrity": "sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "3.2.4",
+        "loupe": "^3.1.4",
+        "tinyrainbow": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@webcontainer/env": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@webcontainer/env/-/env-1.1.1.tgz",
+      "integrity": "sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+      "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-3.0.1.tgz",
+      "integrity": "sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ansi-colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ast-types": {
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.3.tgz",
+      "integrity": "sha512-FvWoWYfSCM6kRxCSH+MGLHIKKGRL6A6AW7Zek2O32REPQRdg131428uRTKMBYAeRd3XXAaHDS60Wpri7CdKDrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/atomically": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/atomically/-/atomically-1.7.0.tgz",
+      "integrity": "sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.12.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
+      "integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.27",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.27.tgz",
+      "integrity": "sha512-ElY12DaROGuan+lMmZ8Cvo/ZUbXPe7Enc/9VU/b1T3Kp4dwytRcNdR8DoSJN5SNJT/CuvcCA0DHDVmMOCePdRQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
+      "integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^2.0.0",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.1",
+        "iconv-lite": "^0.7.2",
+        "on-finished": "^2.4.1",
+        "qs": "^6.15.2",
+        "raw-body": "^3.0.2",
+        "type-is": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
+      "integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.29.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.29.3.tgz",
+      "integrity": "sha512-1R4kiYKXGViqEN0CnoDrXc1StD9niAwu+j2dukWzrD4bJgsD4lDmEp0CRbc6E/vYJIfTHwPmwyaKtVSudICdPA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.26",
+        "caniuse-lite": "^1.0.30001813",
+        "electron-to-chromium": "^1.5.439",
+        "node-releases": "^2.0.57",
+        "update-browserslist-db": "^1.3.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/bundle-name": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.1.tgz",
+      "integrity": "sha512-DdH81/zPLVS11EUgWq3tEu/xn+EzljlMYooDNdzWEnFha3R3NBMpMV1UqYIpjYHV/SgpFKMIX1Oh7o06SjM/oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001814",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001814.tgz",
+      "integrity": "sha512-/Uaf1lAzr59XcMpW0o96WoEfr+VXK2OX4U9AgFoiSHsVJ4HppnIFUjtYzsyDH2+tgANaQb2/oxYGwCPapN1FpA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chai": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.3.3.tgz",
+      "integrity": "sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/check-error": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.3.tgz",
+      "integrity": "sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/cn": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.4.0.tgz",
+      "integrity": "sha512-qOAeUhPwPzBxx6jaeQdo646XIKliKHc2j1ZF7Ngb1o0pJZKH5gq8FkA0aVdUdPFUDXNXyUCXpCtoJISo6dhizg==",
+      "license": "MIT",
+      "bin": {
+        "cn": "bin/cn.mjs"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/code-block-writer": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
+      "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/conf": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/conf/-/conf-10.2.0.tgz",
+      "integrity": "sha512-8fLl9F04EJqjSqH+QjITQfJF8BrOVaYr1jewVgSRAEWePfxT0sku4w2hrGQ60BC/TNLGQ2pgxNlTbWQmMPFvXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.6.3",
+        "ajv-formats": "^2.1.1",
+        "atomically": "^1.7.0",
+        "debounce-fn": "^4.0.0",
+        "dot-prop": "^6.0.1",
+        "env-paths": "^2.2.1",
+        "json-schema-typed": "^7.0.3",
+        "onetime": "^5.1.2",
+        "pkg-up": "^3.1.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/conf/node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/conf/node_modules/json-schema-typed": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-7.0.3.tgz",
+      "integrity": "sha512-7DE8mpG+/fVw+dTpjbxnx47TaMnDfOI1jwft9g1VybltZCduyRQPJPvc+zzKY9WPHxhPWczyFuYa6I8Mw4iU5A==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/conf/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
+      "integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cross-spawn/node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/cross-spawn/node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/date-fns": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.4.0.tgz",
+      "integrity": "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/debounce-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/debounce-fn/-/debounce-fn-4.0.0.tgz",
+      "integrity": "sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dedent": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.2.tgz",
+      "integrity": "sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "babel-plugin-macros": "^3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-browser": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.1.tgz",
+      "integrity": "sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
+    "node_modules/diff": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.4.tgz",
+      "integrity": "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dot-prop": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-6.0.1.tgz",
+      "integrity": "sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.443",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.443.tgz",
+      "integrity": "sha512-TDJG36L9A3CWWwZ97HKaE+Iz1sW80pNp6sAU0owzCIV3Zc9eVyRqZK8Vz6NKuMIU8WjP0pIkoqCa0VRf/yFD0Q==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/empathic": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/empathic/-/empathic-2.1.0.tgz",
+      "integrity": "sha512-AnfC1ATldl49/cvZdLPDjBfrRNwbDO05aibiOtzQu3qtlbJtomNLhF30HEtn/7iBz50dlMECqATo3fG0LrdEgw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.26.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.26.0.tgz",
+      "integrity": "sha512-9vhedylFonb2YGogzUKX6+Ja72gOJbN1QHAqdrvqLwhdl/QWbKopzoUC9EbQNVsAns/bx/4uyqalrQAoy1IByw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/enquirer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.4.1.tgz",
+      "integrity": "sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-colors": "^4.1.1",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eventsource": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
+      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eventsource-parser": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/eventsource-parser": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.1.1.tgz",
+      "integrity": "sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/execa": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-9.6.1.tgz",
+      "integrity": "sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/merge-streams": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "figures": "^6.1.0",
+        "get-stream": "^9.0.0",
+        "human-signals": "^8.0.1",
+        "is-plain-obj": "^4.1.0",
+        "is-stream": "^4.0.1",
+        "npm-run-path": "^6.0.0",
+        "pretty-ms": "^9.2.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^4.0.0",
+        "yoctocolors": "^2.1.1"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-rate-limit": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-8.7.0.tgz",
+      "integrity": "sha512-hOwV7WOxXfjRpAM1DSJWZDXx3GhplwD8IfwuwvogD8i1Qnkgosw/H45s4ZnFAUHDAhPjlY9hLBvJhKmGMyY26g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "ip-address": "^10.2.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/express-rate-limit"
+      },
+      "peerDependencies": {
+        "express": ">= 4.11"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.8.tgz",
+      "integrity": "sha512-GZMtZUTNRpOVIECoXwLNZS5xUGE+mVNbTB8h/7Rwh2TFWcBQiPzTgyZi05BF9UMZKkLJv8XBRJTlU7zg8+ZfMg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fastq": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz",
+      "integrity": "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/figures": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/figures/-/figures-6.1.0.tgz",
+      "integrity": "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-unicode-supported": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.1.tgz",
+      "integrity": "sha512-KYAb4c9BJQI6QqGKthV68OHe0badztdXJWKo0WtBA9IuCFPTKvE5ZdUBglP833aMjhaSPNO4A5j/EkzZtGlKjA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/fuzzysort": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fuzzysort/-/fuzzysort-3.1.0.tgz",
+      "integrity": "sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.7.0.tgz",
+      "integrity": "sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-own-enumerable-keys": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-keys/-/get-own-enumerable-keys-1.0.0.tgz",
+      "integrity": "sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-stream": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-9.0.1.tgz",
+      "integrity": "sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sec-ant/readable-stream": "^0.4.1",
+        "is-stream": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob": {
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hono": {
+      "version": "4.13.12",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.13.12.tgz",
+      "integrity": "sha512-6E2QDAc9Ick9Sq77ZrGS/dk2WUYni91aufTw6LJKpV7w8kW5/GxVUc650FOADOmlwg3K+f7Pun6XlV+pYmW6gw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-8.0.1.tgz",
+      "integrity": "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",
+      "integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/ip-address": {
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.7.3.tgz",
+      "integrity": "sha512-A1kdq/tSb5QjvKvAMgIoEvDBIgL7qaqVP/jkvSwYYRZ9iEzvPpopxp2wQfu3SuZRHtpHNxMn8Fs0bS+gf5Xmwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-core-module": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.17.0.tgz",
+      "integrity": "sha512-J/vG0zBCbIKOQFfufSwyXdMrsohyJIUNkrnmo6WZGzoM7tr/lsbfW5b2BvisL6zsyMzK9UxV9L6c7AoFbyXHOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-in-ssh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-in-ssh/-/is-in-ssh-1.0.0.tgz",
+      "integrity": "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-interactive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-interactive/-/is-interactive-2.0.0.tgz",
+      "integrity": "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-regexp": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-3.1.0.tgz",
+      "integrity": "sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-4.0.1.tgz",
+      "integrity": "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-unicode-supported": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-2.1.0.tgz",
+      "integrity": "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
+      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
+      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/jose": {
+      "version": "6.2.12",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.2.12.tgz",
+      "integrity": "sha512-9NiFmJEex0sy2Dk58j2UGBSHgUs2ypF9eZSu4L6vjOX3Dp96Sw1F3uL+H+D1sx02jZZdzUT0HgvCy59CuvXcWw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.2.tgz",
+      "integrity": "sha512-SFNOvSJ+Dgf/9An904Yx+CgSlIPCkIpao4qo51lpee25TIRejdH3rhR4EZMGoNx3/TP3O+wzWuiTFl4sqbltzA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-typed": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/json-schema-typed/-/json-schema-typed-8.0.2.tgz",
+      "integrity": "sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonc-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+      "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/jsonfile": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/log-symbols": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-6.0.0.tgz",
+      "integrity": "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.3.0",
+        "is-unicode-supported": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-symbols/node_modules/is-unicode-supported": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
+      "integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/loupe": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.2.1.tgz",
+      "integrity": "sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lru-cache": {
+      "version": "11.5.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.5.3.tgz",
+      "integrity": "sha512-U4N8FgzmWxc8k1VH8Kr6lQg18U7Fjvby6wXHVRX/ZZ7IwWbRMgrRbP0Wrb5q5NVinryp4SQampHKdvtecItxUg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.49.0.tgz",
+      "integrity": "sha512-ApfaNM4/7jBrVopqLJ84Jz8TMQ1Q1JeZ1PmKh25aeS3E1FTVcMkSh1bEQB7dfzdIrwXRP8p3z4AJjTIHHb5IIA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-1.4.2.tgz",
+      "integrity": "sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.6.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.1.tgz",
+      "integrity": "sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
+      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.2.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.6.tgz",
+      "integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.19",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.19.tgz",
+      "integrity": "sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.1.0.tgz",
+      "integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/negotiator/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.57",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.57.tgz",
+      "integrity": "sha512-kQK9LGGFiHtrWiNhZtA7Qbw17AQz+dmsEKODRIVTXA9+e5MS/2gZEBhYJt13GrAz5/IOZKddH/0Z3TP/Zgo+yw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-6.0.0.tgz",
+      "integrity": "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^4.0.0",
+        "unicorn-magic": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-treeify": {
+      "version": "1.1.33",
+      "resolved": "https://registry.npmjs.org/object-treeify/-/object-treeify-1.1.33.tgz",
+      "integrity": "sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/onetime/node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/open": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-8.2.0.tgz",
+      "integrity": "sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^5.3.0",
+        "cli-cursor": "^5.0.0",
+        "cli-spinners": "^2.9.2",
+        "is-interactive": "^2.0.0",
+        "is-unicode-supported": "^2.0.0",
+        "log-symbols": "^6.0.0",
+        "stdin-discarder": "^0.2.2",
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/ansi-regex": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.4.0.tgz",
+      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ora/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/oxc-parser": {
+      "version": "0.127.0",
+      "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.127.0.tgz",
+      "integrity": "sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "^0.127.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-parser/binding-android-arm-eabi": "0.127.0",
+        "@oxc-parser/binding-android-arm64": "0.127.0",
+        "@oxc-parser/binding-darwin-arm64": "0.127.0",
+        "@oxc-parser/binding-darwin-x64": "0.127.0",
+        "@oxc-parser/binding-freebsd-x64": "0.127.0",
+        "@oxc-parser/binding-linux-arm-gnueabihf": "0.127.0",
+        "@oxc-parser/binding-linux-arm-musleabihf": "0.127.0",
+        "@oxc-parser/binding-linux-arm64-gnu": "0.127.0",
+        "@oxc-parser/binding-linux-arm64-musl": "0.127.0",
+        "@oxc-parser/binding-linux-ppc64-gnu": "0.127.0",
+        "@oxc-parser/binding-linux-riscv64-gnu": "0.127.0",
+        "@oxc-parser/binding-linux-riscv64-musl": "0.127.0",
+        "@oxc-parser/binding-linux-s390x-gnu": "0.127.0",
+        "@oxc-parser/binding-linux-x64-gnu": "0.127.0",
+        "@oxc-parser/binding-linux-x64-musl": "0.127.0",
+        "@oxc-parser/binding-openharmony-arm64": "0.127.0",
+        "@oxc-parser/binding-wasm32-wasi": "0.127.0",
+        "@oxc-parser/binding-win32-arm64-msvc": "0.127.0",
+        "@oxc-parser/binding-win32-ia32-msvc": "0.127.0",
+        "@oxc-parser/binding-win32-x64-msvc": "0.127.0"
+      }
+    },
+    "node_modules/oxc-resolver": {
+      "version": "11.21.2",
+      "resolved": "https://registry.npmjs.org/oxc-resolver/-/oxc-resolver-11.21.2.tgz",
+      "integrity": "sha512-w5tLwYN3Zo24w5EeWJjJWZOwhYqTtC8PS2B1tIt7BZUuqTIcU07sQValbDw+rq7+AuAGzOHklgK+ifsy4lpXfw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      },
+      "optionalDependencies": {
+        "@oxc-resolver/binding-android-arm-eabi": "11.21.2",
+        "@oxc-resolver/binding-android-arm64": "11.21.2",
+        "@oxc-resolver/binding-darwin-arm64": "11.21.2",
+        "@oxc-resolver/binding-darwin-x64": "11.21.2",
+        "@oxc-resolver/binding-freebsd-x64": "11.21.2",
+        "@oxc-resolver/binding-linux-arm-gnueabihf": "11.21.2",
+        "@oxc-resolver/binding-linux-arm-musleabihf": "11.21.2",
+        "@oxc-resolver/binding-linux-arm64-gnu": "11.21.2",
+        "@oxc-resolver/binding-linux-arm64-musl": "11.21.2",
+        "@oxc-resolver/binding-linux-ppc64-gnu": "11.21.2",
+        "@oxc-resolver/binding-linux-riscv64-gnu": "11.21.2",
+        "@oxc-resolver/binding-linux-riscv64-musl": "11.21.2",
+        "@oxc-resolver/binding-linux-s390x-gnu": "11.21.2",
+        "@oxc-resolver/binding-linux-x64-gnu": "11.21.2",
+        "@oxc-resolver/binding-linux-x64-musl": "11.21.2",
+        "@oxc-resolver/binding-openharmony-arm64": "11.21.2",
+        "@oxc-resolver/binding-wasm32-wasi": "11.21.2",
+        "@oxc-resolver/binding-win32-arm64-msvc": "11.21.2",
+        "@oxc-resolver/binding-win32-x64-msvc": "11.21.2"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-ms": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
+      "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/pathval": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.1.tgz",
+      "integrity": "sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
+      "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pkce-challenge": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.1.tgz",
+      "integrity": "sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.20.0"
+      }
+    },
+    "node_modules/pkg-up": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.28",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.28.tgz",
+      "integrity": "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.18",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.6.tgz",
+      "integrity": "sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/powershell-utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.2.1.tgz",
+      "integrity": "sha512-C+y9x90UElAddDZmV4qOx9W53B61PO7cIqWz2dQsWlwswuq4mr8NEwytdGKboYbQlGZ3awrkTeNvcZiZNHnQ8A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-ms": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.3.1.tgz",
+      "integrity": "sha512-HzMy3Geq23nVALD/M2LliU+F+M+gVNsvkQWWqeBZ8HDiCgzo6YPJ/Omrmtq24EFrIsk0a3EkQGEd7bDOo+IhGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parse-ms": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prompts/node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.8.tgz",
+      "integrity": "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz",
+      "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/radix-ui": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.6.7.tgz",
+      "integrity": "sha512-QBdhh1arIEUvPC0dQ5+nwWAxt7+N+oP/9jPwjJkGFoSk/sqxg32gJtSXGtFh8frAIcS6oC9cx2Q+7KYCQLOAeA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.7",
+        "@radix-ui/react-accessible-icon": "1.1.15",
+        "@radix-ui/react-accordion": "1.2.20",
+        "@radix-ui/react-alert-dialog": "1.1.23",
+        "@radix-ui/react-arrow": "1.1.15",
+        "@radix-ui/react-aspect-ratio": "1.1.15",
+        "@radix-ui/react-avatar": "1.2.6",
+        "@radix-ui/react-checkbox": "1.3.11",
+        "@radix-ui/react-collapsible": "1.1.20",
+        "@radix-ui/react-collection": "1.1.15",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.2.2",
+        "@radix-ui/react-context-menu": "2.3.7",
+        "@radix-ui/react-dialog": "1.1.23",
+        "@radix-ui/react-direction": "1.1.4",
+        "@radix-ui/react-dismissable-layer": "1.1.19",
+        "@radix-ui/react-dropdown-menu": "2.1.24",
+        "@radix-ui/react-focus-guards": "1.1.6",
+        "@radix-ui/react-focus-scope": "1.1.16",
+        "@radix-ui/react-form": "0.1.16",
+        "@radix-ui/react-hover-card": "1.1.23",
+        "@radix-ui/react-label": "2.1.15",
+        "@radix-ui/react-menu": "2.1.24",
+        "@radix-ui/react-menubar": "1.1.24",
+        "@radix-ui/react-navigation-menu": "1.2.22",
+        "@radix-ui/react-one-time-password-field": "0.1.16",
+        "@radix-ui/react-password-toggle-field": "0.1.11",
+        "@radix-ui/react-popover": "1.1.23",
+        "@radix-ui/react-popper": "1.3.7",
+        "@radix-ui/react-portal": "1.1.17",
+        "@radix-ui/react-presence": "1.1.10",
+        "@radix-ui/react-primitive": "2.1.10",
+        "@radix-ui/react-progress": "1.1.16",
+        "@radix-ui/react-radio-group": "1.4.7",
+        "@radix-ui/react-roving-focus": "1.1.19",
+        "@radix-ui/react-scroll-area": "1.2.18",
+        "@radix-ui/react-select": "2.3.7",
+        "@radix-ui/react-separator": "1.1.15",
+        "@radix-ui/react-slider": "1.4.7",
+        "@radix-ui/react-slot": "1.3.3",
+        "@radix-ui/react-switch": "1.3.7",
+        "@radix-ui/react-tabs": "1.1.21",
+        "@radix-ui/react-toast": "1.2.23",
+        "@radix-ui/react-toggle": "1.1.18",
+        "@radix-ui/react-toggle-group": "1.1.19",
+        "@radix-ui/react-toolbar": "1.1.19",
+        "@radix-ui/react-tooltip": "1.2.16",
+        "@radix-ui/react-use-callback-ref": "1.1.4",
+        "@radix-ui/react-use-controllable-state": "1.2.6",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-escape-keydown": "1.1.5",
+        "@radix-ui/react-use-is-hydrated": "0.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "@radix-ui/react-use-size": "1.1.4",
+        "@radix-ui/react-visually-hidden": "1.2.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz",
+      "integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-day-picker": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-10.0.2.tgz",
+      "integrity": "sha512-QetiKtZWE9Uaw/pM/SYNv6WPYOTRnSJ2puL0GgwkmUFMIwiY0dtjH1W4B7DOVXVNQM0ZOClGpH/heOfBSzWeiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-fns/tz": "^1.4.1",
+        "date-fns": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-docgen": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-8.0.4.tgz",
+      "integrity": "sha512-gIYjtVTU4NCWZnb/LXVSWfClZXnjzX3+xxi69Tkfu4YsmYuqiOk8giLkKt/WwxWqh+U66CTh8Kqbha1uPv8/qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/traverse": "^7.28.0",
+        "@babel/types": "^7.28.2",
+        "@types/babel__core": "^7.20.5",
+        "@types/babel__traverse": "^7.20.7",
+        "@types/doctrine": "^0.0.9",
+        "@types/resolve": "^1.20.2",
+        "doctrine": "^3.0.0",
+        "resolve": "^1.22.1",
+        "strip-indent": "^4.0.0"
+      },
+      "engines": {
+        "node": "^20.9.0 || >=22"
+      }
+    },
+    "node_modules/react-docgen-typescript": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.4.0.tgz",
+      "integrity": "sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": ">= 4.3.x"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": "^19.3.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-resizable-panels": {
+      "version": "4.14.2",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.14.2.tgz",
+      "integrity": "sha512-s35mfXhwpPEPnB+BKPCZJ9VZU0CHb1I9trm9tijEGBNv1Srl0HzIweENeXnsQvd0Xm9BeOBkEzDGVJOZM2mkEQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/recast": {
+      "version": "0.23.21",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.21.tgz",
+      "integrity": "sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/redent/node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/restore-cursor/node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.12.tgz",
+      "integrity": "sha512-8wafseiaG80xmXSfqidUNqZcylTlhmPZZt+za2m+js2sFZ8dTNlhIOV2WcbIPx2hgwPBJpEUGFAMZ9bgBBLTSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.152.0",
+        "@rolldown/pluginutils": "^1.0.0"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm-eabi": "1.2.12",
+        "@rolldown/binding-android-arm64": "1.2.12",
+        "@rolldown/binding-darwin-arm64": "1.2.12",
+        "@rolldown/binding-darwin-x64": "1.2.12",
+        "@rolldown/binding-freebsd-x64": "1.2.12",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.12",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.12",
+        "@rolldown/binding-linux-arm64-musl": "1.2.12",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.12",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.12",
+        "@rolldown/binding-linux-x64-gnu": "1.2.12",
+        "@rolldown/binding-linux-x64-musl": "1.2.12",
+        "@rolldown/binding-openharmony-arm64": "1.2.12",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.12",
+        "@rolldown/binding-win32-x64-msvc": "1.2.12"
+      }
+    },
+    "node_modules/rolldown/node_modules/@oxc-project/types": {
+      "version": "0.152.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.152.0.tgz",
+      "integrity": "sha512-oM/5rLBm2tPkg0iBgkH/FOeR3PCDpY19GTgAZjMFM8h9WI9VW7cLgzp6nwtarYKmovavIQZ+Fe/RKX/8C8O/Rw==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/oxc-project"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz",
+      "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/shadcn": {
+      "version": "4.21.1",
+      "resolved": "https://registry.npmjs.org/shadcn/-/shadcn-4.21.1.tgz",
+      "integrity": "sha512-keQmMdKI1eLKTtYpwFwrFfFegsskOpUgt1l3aF359pbCFt0taq0TMuZ75yK+q/StcV2YvjmBMenrs0diWoezXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/parser": "^7.28.0",
+        "@babel/plugin-transform-typescript": "^7.28.0",
+        "@babel/preset-typescript": "^7.27.1",
+        "@dotenvx/dotenvx": "^1.48.4",
+        "@modelcontextprotocol/sdk": "^1.26.0",
+        "@shadcn/registry": "0.1.0",
+        "@types/validate-npm-package-name": "^4.0.2",
+        "browserslist": "^4.26.2",
+        "cn": "^0.2.4",
+        "commander": "^14.0.0",
+        "cosmiconfig": "^9.0.0",
+        "dedent": "^1.6.0",
+        "deepmerge": "^4.3.1",
+        "diff": "^8.0.2",
+        "execa": "^9.6.0",
+        "fast-glob": "^3.3.3",
+        "fs-extra": "^11.3.1",
+        "fuzzysort": "^3.1.0",
+        "kleur": "^4.1.5",
+        "open": "^11.0.0",
+        "ora": "^8.2.0",
+        "postcss": "^8.5.23",
+        "postcss-selector-parser": "^7.1.3",
+        "prompts": "^2.4.2",
+        "recast": "^0.23.11",
+        "socks": "^2.8.8",
+        "stringify-object": "^5.0.0",
+        "ts-morph": "^26.0.0",
+        "tsconfig-paths": "^4.2.0",
+        "undici": "^7.29.0",
+        "validate-npm-package-name": "^7.0.1",
+        "zod": "^3.24.1",
+        "zod-to-json-schema": "^3.24.6"
+      },
+      "bin": {
+        "shadcn": "dist/index.js"
+      },
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/shadcn/node_modules/cn": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.2.6.tgz",
+      "integrity": "sha512-+i4L0zUGgRcEnhsxueVrP7iBGxBx5iD0WOTYg1MwFEu2ZyCmH5Ov2V1cul2Ht5UchRQQgftCf4be/RxspuW6QQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cn": "bin/cn.mjs"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/shadcn/node_modules/open": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/open/-/open-11.0.4.tgz",
+      "integrity": "sha512-++Zlftm0kVLPmzC06t6epuWmcRMDbI4z5P3NNX979WA/k23+NtSOynEGzsVfZwguKw2mi5umVgnBlJQMwRz4Pg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.5.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-in-ssh": "^1.0.0",
+        "is-inside-container": "^1.0.0",
+        "powershell-utils": "^0.2.1",
+        "wsl-utils": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/shadcn/node_modules/wsl-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-1.0.1.tgz",
+      "integrity": "sha512-c16PKLIRxBYpR3jSWsdS7SFp0COm5SOQdiFjY818dYFHJbMGuLBszpF07LBWmOS1uzrHa9VGdynsEgoeKy0oOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0",
+        "powershell-utils": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.10",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.10.tgz",
+      "integrity": "sha512-e0VyvkVTwVYViNovRkZ9aodhxVlyoMn7eJhVUPxZ+eK9P/7CBkxvvsBOHqFPEH416726W8tLXXXjKwqgTErrCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.1.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/sonner": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.8.tgz",
+      "integrity": "sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
+      "integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/stdin-discarder": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.2.2.tgz",
+      "integrity": "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/storybook": {
+      "version": "10.6.1",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-10.6.1.tgz",
+      "integrity": "sha512-NeEmukMWPA5OqHizUkQtxCIhGt7MUZLPY4FFgpC0LNiipjrac/oKpH0TxI+9Zc+vI5+IoN+NiskOmBP7gtYfmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "@storybook/icons": "^2.0.2",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "6.9.1",
+        "@testing-library/user-event": "^14.6.3",
+        "@vitest/expect": "3.2.4",
+        "@vitest/spy": "3.2.4",
+        "@webcontainer/env": "^1.1.1",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0 || ^0.26.0 || ^0.27.0 || ^0.28.0",
+        "jsonc-parser": "^3.3.1",
+        "open": "^10.2.0",
+        "oxc-parser": "^0.127.0",
+        "oxc-resolver": "11.21.2",
+        "recast": "^0.23.5",
+        "semver": "^7.7.3",
+        "use-sync-external-store": "^1.5.0",
+        "ws": "^8.21.1"
+      },
+      "bin": {
+        "storybook": "dist/bin/dispatcher.js"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "prettier": "^2 || ^3",
+        "vite-plus": "^0.1.15 || ^0.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "prettier": {
+          "optional": true
+        },
+        "vite-plus": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/storybook/node_modules/semver": {
+      "version": "7.8.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.5.tgz",
+      "integrity": "sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.4.0.tgz",
+      "integrity": "sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/stringify-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-5.0.0.tgz",
+      "integrity": "sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "get-own-enumerable-keys": "^1.0.0",
+        "is-obj": "^3.0.0",
+        "is-regexp": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/stringify-object?sponsor=1"
+      }
+    },
+    "node_modules/stringify-object/node_modules/is-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-3.0.0.tgz",
+      "integrity": "sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-4.0.0.tgz",
+      "integrity": "sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.1.1.tgz",
+      "integrity": "sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/systeminformation": {
+      "version": "5.33.15",
+      "resolved": "https://registry.npmjs.org/systeminformation/-/systeminformation-5.33.15.tgz",
+      "integrity": "sha512-s5RloL0F7xhN0ZjfHtLGnbf7EW74EI0N8NFL+1xR7Oxz9QA33obNZsl7lyfnJOhN04E/kGFPoJPlvY7TZ5fzmw==",
+      "dev": true,
+      "license": "MIT",
+      "os": [
+        "darwin",
+        "linux",
+        "win32",
+        "freebsd",
+        "openbsd",
+        "netbsd",
+        "sunos",
+        "android"
+      ],
+      "bin": {
+        "systeminformation": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "funding": {
+        "type": "Buy me a coffee",
+        "url": "https://www.buymeacoffee.com/systeminfo"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz",
+      "integrity": "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
+      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-2.0.0.tgz",
+      "integrity": "sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.6.tgz",
+      "integrity": "sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/ts-dedent": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.3.0.tgz",
+      "integrity": "sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
+    "node_modules/ts-morph": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-26.0.0.tgz",
+      "integrity": "sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ts-morph/common": "~0.27.0",
+        "code-block-writer": "^13.0.3"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/tw-animate-css": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+      "integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
+    "node_modules/type-fest": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+      "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+      "dev": true,
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.0.0",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-7.0.2.tgz",
+      "integrity": "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc"
+      },
+      "engines": {
+        "node": ">=16.20.0"
+      },
+      "optionalDependencies": {
+        "@typescript/typescript-aix-ppc64": "7.0.2",
+        "@typescript/typescript-darwin-arm64": "7.0.2",
+        "@typescript/typescript-darwin-x64": "7.0.2",
+        "@typescript/typescript-freebsd-arm64": "7.0.2",
+        "@typescript/typescript-freebsd-x64": "7.0.2",
+        "@typescript/typescript-linux-arm": "7.0.2",
+        "@typescript/typescript-linux-arm64": "7.0.2",
+        "@typescript/typescript-linux-loong64": "7.0.2",
+        "@typescript/typescript-linux-mips64el": "7.0.2",
+        "@typescript/typescript-linux-ppc64": "7.0.2",
+        "@typescript/typescript-linux-riscv64": "7.0.2",
+        "@typescript/typescript-linux-s390x": "7.0.2",
+        "@typescript/typescript-linux-x64": "7.0.2",
+        "@typescript/typescript-netbsd-arm64": "7.0.2",
+        "@typescript/typescript-netbsd-x64": "7.0.2",
+        "@typescript/typescript-openbsd-arm64": "7.0.2",
+        "@typescript/typescript-openbsd-x64": "7.0.2",
+        "@typescript/typescript-sunos-x64": "7.0.2",
+        "@typescript/typescript-win32-arm64": "7.0.2",
+        "@typescript/typescript-win32-x64": "7.0.2"
+      }
+    },
+    "node_modules/undici": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.30.0.tgz",
+      "integrity": "sha512-dkrQXeHSaoamnItlYbmzG0wFYrM0ZwDxCIg0A7aKjTyyhh9svRzCNFEzV+Vm05/yehjCzjDZ31KXfGEjYSztDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.18.1"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.14.0.tgz",
+      "integrity": "sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unicorn-magic": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
+      "integrity": "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.3.3.tgz",
+      "integrity": "sha512-pJ2sYawQS0R/WI928Gj5GlPhTGzbMelq0+4INtSYNDV9ErKJcX6xjGWkoG/VnB3dpUm00zALaqkrUD77pO5TDQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.7.0.tgz",
+      "integrity": "sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/validate-npm-package-name": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-7.0.2.tgz",
+      "integrity": "sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.17.0 || >=22.9.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/vite": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.3.0.tgz",
+      "integrity": "sha512-lhZBVvEHefgE+HQZC9O7EBJgCU/nVzFNl7vkS4RE0APtWLP02/8QVIkQtzBxPquh7lq5/78NHipTj7ODQ6XuyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.33.0",
+        "picomatch": "^4.0.7",
+        "postcss": "^8.5.28",
+        "rolldown": "~1.2.6",
+        "tinyglobby": "^0.2.17"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.7.1",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
+      "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.33.0",
+        "lightningcss-darwin-arm64": "1.33.0",
+        "lightningcss-darwin-x64": "1.33.0",
+        "lightningcss-freebsd-x64": "1.33.0",
+        "lightningcss-linux-arm-gnueabihf": "1.33.0",
+        "lightningcss-linux-arm64-gnu": "1.33.0",
+        "lightningcss-linux-arm64-musl": "1.33.0",
+        "lightningcss-linux-x64-gnu": "1.33.0",
+        "lightningcss-linux-x64-musl": "1.33.0",
+        "lightningcss-win32-arm64-msvc": "1.33.0",
+        "lightningcss-win32-x64-msvc": "1.33.0"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-android-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
+      "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-darwin-arm64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
+      "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-darwin-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
+      "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-freebsd-x64": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
+      "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
+      "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
+      "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
+      "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
+      "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
+      "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
+      "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/vite/node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
+      "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/which": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^3.1.1"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/ws": {
+      "version": "8.22.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.22.0.tgz",
+      "integrity": "sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-spinner": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/yocto-spinner/-/yocto-spinner-1.2.2.tgz",
+      "integrity": "sha512-DODGl1wJjA/s5pnJFKau9lIYHT81lnhob1i3e1TjxZRxEhWRKl74nTbWE6H5KlkViQQTo/Z29YFdxzTZAMY3ng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yoctocolors": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=18.19"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/yoctocolors": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.2.0.tgz",
+      "integrity": "sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.25.2",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.25.2.tgz",
+      "integrity": "sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.25.28 || ^4"
+      }
+    },
+    "packages/center-graphic": {
+      "name": "@hm-design/center-graphic",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
+    },
+    "packages/ui": {
+      "name": "@hm-design/ui",
+      "version": "0.1.0",
+      "dependencies": {
+        "@tanstack/react-table": "^9.2.4",
+        "class-variance-authority": "^0.7.1",
+        "cmdk": "^1.1.1",
+        "cn": "^0.4.0",
+        "embla-carousel-react": "^8.6.0",
+        "lucide-react": "^1.49.0",
+        "radix-ui": "^1.6.7",
+        "react-day-picker": "^10.0.2",
+        "react-resizable-panels": "^4.14.2",
+        "sonner": "^2.0.8",
+        "tw-animate-css": "^1.4.0",
+        "vaul": "^1.1.2"
+      },
+      "devDependencies": {
+        "shadcn": "^4.21.1"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "tailwindcss": "^4.0.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ce161b9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "hm-design-system-poc",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "generate:theme-defaults": "node scripts/theme-defaults.mjs",
+    "build:themes": "node scripts/theme-artifacts.mjs",
+    "check:theme-defaults": "node scripts/theme-defaults.mjs --check",
+    "pretypecheck": "npm run check:theme-defaults && npm run build:packages",
+    "prebuild": "npm run check:theme-defaults && npm run build:packages",
+    "prebuild-storybook": "npm run check:theme-defaults && npm run build:packages",
+    "dev": "vite --host 127.0.0.1",
+    "build": "tsc -b && vite build",
+    "build:dashboard-export": "npm run check:theme-defaults && npm run build:packages && vite build --config vite.dashboard-export.config.ts && node scripts/finalize-dashboard-export.mjs",
+    "h2:preview": "node scripts/h2-preview.mjs",
+    "preview": "vite preview --host 127.0.0.1",
+    "storybook": "storybook dev -p 6024 --host 0.0.0.0 --no-open --disable-telemetry",
+    "build-storybook": "storybook build -o storybook-static --disable-telemetry",
+    "typecheck": "tsc -b && npm run typecheck --workspaces --if-present",
+    "build:ui": "npm run build -w @hm-design/ui",
+    "build:center-graphic": "npm run build -w @hm-design/center-graphic",
+    "build:packages": "npm run build --workspaces --if-present"
+  },
+  "dependencies": {
+    "@hm-design/center-graphic": "*",
+    "@hm-design/ui": "*",
+    "lucide-react": "^1.49.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "10.6.1",
+    "@tailwindcss/vite": "4.3.3",
+    "@types/node": "24.7.0",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
+    "storybook": "10.6.1",
+    "tailwindcss": "4.3.3",
+    "typescript": "7.0.2",
+    "vite": "8.3.0"
+  },
+  "workspaces": [
+    "packages/*"
+  ]
+}
diff --git a/packages/center-graphic/README.md b/packages/center-graphic/README.md
new file mode 100644
index 0000000..f02a648
--- /dev/null
+++ b/packages/center-graphic/README.md
@@ -0,0 +1,14 @@
+# @hm-design/center-graphic
+
+React 19 CENTER graphics. Published entrypoints contain ESM JavaScript, TypeScript declarations, component CSS and embedded SVG assets.
+
+```tsx
+import { CenterTitle, TunnelFacility } from "@hm-design/center-graphic"
+import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"
+```
+
+Both JavaScript entrypoints automatically import the component stylesheet. Use a bundler that handles CSS imports. The stylesheet is also available explicitly as `@hm-design/center-graphic/style.css`.
+
+Vite processes SVG imports and `import.meta.glob` during the repository build. Published JavaScript and declarations do not require Vite or `vite/client`. React and React DOM are peers and are not bundled. This package does not depend on `@hm-design/ui`.
+
+From the HMDesignSystem repository, run `npm run build -w @hm-design/center-graphic`. `npm pack` runs this build automatically. Only `dist/`, this README and the package manifest are packed; raw source assets and Storybook files are excluded.
diff --git a/packages/center-graphic/package.json b/packages/center-graphic/package.json
new file mode 100644
index 0000000..0159a24
--- /dev/null
+++ b/packages/center-graphic/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@hm-design/center-graphic",
+  "version": "0.1.0",
+  "private": false,
+  "description": "HM Design System center graphics (title, information, route / spatial, facility). Independent of @hm-design/ui.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./reference": {
+      "types": "./dist/reference.d.ts",
+      "import": "./dist/reference.js",
+      "default": "./dist/reference.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "build": "node ../../scripts/build-package.mjs center-graphic",
+    "prepack": "npm run build"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "./dist/index.js",
+    "./dist/reference.js"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/오른쪽.svg
new file mode 100644
index 0000000..f98fca2
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/오른쪽.svg
@@ -0,0 +1,197 @@
+<svg width="50" height="95" viewBox="0 0 50 95" fill="none" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_11759)">
+<g clip-path="url(#clip1_450_11759)">
+<g filter="url(#filter0_i_450_11759)">
+<path d="M-132.027 29.9823C-132.027 22.9122 -126.296 17.1808 -119.226 17.1808H4.74567C11.8157 17.1808 17.5471 22.9122 17.5471 29.9823V65.6915H-132.027V29.9823Z" fill="url(#paint0_linear_450_11759)"/>
+<path d="M-132.027 29.9823C-132.027 22.9122 -126.296 17.1808 -119.226 17.1808H4.74567C11.8157 17.1808 17.5471 22.9122 17.5471 29.9823V65.6915H-132.027V29.9823Z" fill="url(#paint1_linear_450_11759)"/>
+</g>
+<path d="M-119.226 17.7141H4.74609C11.5214 17.7143 17.0137 23.2073 17.0137 29.9826V65.1584H-131.494V29.9826C-131.494 23.2072 -126.001 17.7141 -119.226 17.7141Z" stroke="black" stroke-width="1.06678"/>
+<path d="M36.6543 66.2539C42.546 66.2539 47.3222 71.0302 47.3223 76.9219V93.9707H-161.892V76.9219C-161.892 71.0303 -157.115 66.254 -151.224 66.2539H36.6543Z" fill="url(#paint2_linear_450_11759)" stroke="#400500" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_11759)">
+<path d="M-159.758 76.922C-159.758 72.2086 -155.937 68.3877 -151.224 68.3877H36.6544C41.3677 68.3877 45.1887 72.2086 45.1887 76.922V90.7699C45.1887 91.359 44.711 91.8366 44.1219 91.8366H-158.691C-159.28 91.8366 -159.758 91.359 -159.758 90.7699V76.922Z" fill="url(#paint3_linear_450_11759)"/>
+</g>
+<path d="M36.6543 67.8545C41.6622 67.8545 45.7216 71.914 45.7217 76.9219V90.7695C45.7217 91.6532 45.0057 92.37 44.1221 92.3701H-158.691C-159.575 92.3699 -160.291 91.6532 -160.291 90.7695V76.9219C-160.291 71.914 -156.231 67.8545 -151.224 67.8545H36.6543Z" stroke="black" stroke-opacity="0.76" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_11759)" style="mix-blend-mode:plus-lighter">
+<path d="M37.3662 69.8745C41.1957 69.8745 44.2996 72.9787 44.2998 76.8081V92.2769H-158.389V76.8081C-158.388 72.9788 -155.284 69.8747 -151.455 69.8745H37.3662Z" stroke="url(#paint4_linear_450_11759)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_11759" maskUnits="userSpaceOnUse" x="-167.123" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-167.123" y="-0.639648" width="219" height="69"/>
+<path d="M47.5605 12.9385C37.7631 12.9385 29.8205 20.8804 29.8203 30.6777V63.4736H21.3857V30.6777C21.3856 20.8804 13.4429 12.9385 3.64551 12.9385V12.9336H-118.183V12.9385C-127.98 12.9387 -135.922 20.8805 -135.922 30.6777V63.4736H-144.356V30.6777C-144.357 20.8804 -152.299 12.9386 -162.097 12.9385V6.79492H47.5605V12.9385ZM47.5625 5.86328H-162.123V4.36035H47.5625V5.86328Z"/>
+</mask>
+<path d="M47.5605 12.9385C37.7631 12.9385 29.8205 20.8804 29.8203 30.6777V63.4736H21.3857V30.6777C21.3856 20.8804 13.4429 12.9385 3.64551 12.9385V12.9336H-118.183V12.9385C-127.98 12.9387 -135.922 20.8805 -135.922 30.6777V63.4736H-144.356V30.6777C-144.357 20.8804 -152.299 12.9386 -162.097 12.9385V6.79492H47.5605V12.9385ZM47.5625 5.86328H-162.123V4.36035H47.5625V5.86328Z" fill="#FF7700"/>
+<path d="M47.5605 12.9385V17.2056C49.9172 17.2056 51.8277 15.2952 51.8277 12.9385H47.5605ZM29.8203 30.6777L25.5532 30.6776V30.6777H29.8203ZM29.8203 63.4736V67.7408C32.177 67.7408 34.0874 65.8303 34.0874 63.4736H29.8203ZM21.3857 63.4736H17.1186C17.1186 65.8303 19.0291 67.7408 21.3857 67.7408V63.4736ZM21.3857 30.6777H25.6529V30.6777L21.3857 30.6777ZM3.64551 12.9385H-0.621628C-0.621628 15.2952 1.28883 17.2056 3.64551 17.2056V12.9385ZM3.64551 12.9336H7.91264C7.91264 10.5769 6.00218 8.66645 3.64551 8.66645V12.9336ZM-118.183 12.9336V8.66645C-120.539 8.66645 -122.45 10.5769 -122.45 12.9336H-118.183ZM-118.183 12.9385L-118.183 17.2056C-115.826 17.2056 -113.915 15.2951 -113.915 12.9385H-118.183ZM-135.922 30.6777L-140.189 30.6776V30.6777H-135.922ZM-135.922 63.4736V67.7408C-133.565 67.7408 -131.655 65.8303 -131.655 63.4736H-135.922ZM-144.356 63.4736H-148.624C-148.624 65.8303 -146.713 67.7408 -144.356 67.7408V63.4736ZM-144.356 30.6777H-140.089V30.6777L-144.356 30.6777ZM-162.097 12.9385H-166.364C-166.364 15.2951 -164.453 17.2056 -162.097 17.2056L-162.097 12.9385ZM-162.097 6.79492V2.52778C-164.453 2.52778 -166.364 4.43825 -166.364 6.79492H-162.097ZM47.5605 6.79492H51.8277C51.8277 4.43825 49.9172 2.52778 47.5605 2.52778V6.79492ZM47.5625 5.86328V10.1304C49.9192 10.1304 51.8296 8.21996 51.8296 5.86328H47.5625ZM-162.123 5.86328H-166.39C-166.39 8.21996 -164.48 10.1304 -162.123 10.1304V5.86328ZM-162.123 4.36035V0.0932121C-164.48 0.0932121 -166.39 2.00368 -166.39 4.36035L-162.123 4.36035ZM47.5625 4.36035H51.8296C51.8296 2.00368 49.9192 0.0932121 47.5625 0.0932121V4.36035ZM47.5605 12.9385V8.67134C35.4067 8.67134 25.5534 18.5235 25.5532 30.6776L29.8203 30.6777L34.0874 30.6778C34.0876 23.2373 40.1196 17.2056 47.5605 17.2056V12.9385ZM29.8203 30.6777H25.5532V63.4736H29.8203H34.0874V30.6777H29.8203ZM29.8203 63.4736V59.2065H21.3857V63.4736V67.7408H29.8203V63.4736ZM21.3857 63.4736H25.6529V30.6777H21.3857H17.1186V63.4736H21.3857ZM21.3857 30.6777L25.6529 30.6777C25.6526 18.5234 15.7994 8.67134 3.64551 8.67134V12.9385V17.2056C11.0865 17.2056 17.1185 23.2373 17.1186 30.6778L21.3857 30.6777ZM3.64551 12.9385H7.91264V12.9336H3.64551H-0.621628V12.9385H3.64551ZM3.64551 12.9336V8.66645H-118.183V12.9336V17.2007H3.64551V12.9336ZM-118.183 12.9336H-122.45V12.9385H-118.183H-113.915V12.9336H-118.183ZM-118.183 12.9385L-118.183 8.67134C-130.337 8.67158 -140.189 18.5238 -140.189 30.6776L-135.922 30.6777L-131.655 30.6778C-131.655 23.2372 -125.623 17.2058 -118.183 17.2056L-118.183 12.9385ZM-135.922 30.6777H-140.189V63.4736H-135.922H-131.655V30.6777H-135.922ZM-135.922 63.4736V59.2065H-144.356V63.4736V67.7408H-135.922V63.4736ZM-144.356 63.4736H-140.089V30.6777H-144.356H-148.624V63.4736H-144.356ZM-144.356 30.6777L-140.089 30.6777C-140.09 18.5235 -149.943 8.67149 -162.097 8.67134L-162.097 12.9385L-162.097 17.2056C-154.656 17.2057 -148.624 23.2374 -148.624 30.6778L-144.356 30.6777ZM-162.097 12.9385H-157.83V6.79492H-162.097H-166.364V12.9385H-162.097ZM-162.097 6.79492V11.0621H47.5605V6.79492V2.52778H-162.097V6.79492ZM47.5605 6.79492H43.2934V12.9385H47.5605H51.8277V6.79492H47.5605ZM47.5625 5.86328V1.59614H-162.123V5.86328V10.1304H47.5625V5.86328ZM-162.123 5.86328H-157.856V4.36035H-162.123H-166.39V5.86328H-162.123ZM-162.123 4.36035V8.62749H47.5625V4.36035V0.0932121H-162.123V4.36035ZM47.5625 4.36035H43.2954V5.86328H47.5625H51.8296V4.36035H47.5625Z" fill="#400500" mask="url(#path-7-outside-1_450_11759)"/>
+<mask id="path-9-outside-2_450_11759" maskUnits="userSpaceOnUse" x="-167.123" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-167.123" y="-0.639648" width="219" height="69"/>
+<path d="M47.5605 11.8717C47.5605 12.4609 47.0818 12.9351 46.4936 12.97C37.1929 13.5217 29.8205 21.2386 29.8203 30.6777V62.4068C29.8203 62.996 29.3427 63.4736 28.7535 63.4736H22.4525C21.8634 63.4736 21.3857 62.996 21.3857 62.4068V30.6777C21.3856 20.8812 13.4442 12.9398 3.64796 12.9385C3.64662 12.9385 3.64551 12.9374 3.64551 12.936C3.64551 12.9347 3.64441 12.9336 3.64307 12.9336H-118.18C-118.182 12.9336 -118.183 12.9347 -118.183 12.936C-118.183 12.9374 -118.184 12.9385 -118.185 12.9385C-127.981 12.94 -135.922 20.8813 -135.922 30.6777V62.4068C-135.922 62.996 -136.399 63.4736 -136.989 63.4736H-143.29C-143.879 63.4736 -144.356 62.996 -144.356 62.4068V30.6777C-144.357 21.2387 -151.729 13.5218 -161.03 12.97C-161.618 12.9352 -162.097 12.4609 -162.097 11.8717V7.86171C-162.097 7.27254 -161.619 6.79492 -161.03 6.79492H46.4938C47.0829 6.79492 47.5605 7.27254 47.5605 7.86171V11.8717ZM47.5625 5.11182C47.5625 5.52684 47.2261 5.86328 46.811 5.86328H-161.372C-161.787 5.86328 -162.123 5.52684 -162.123 5.11182C-162.123 4.69679 -161.787 4.36035 -161.372 4.36035H46.811C47.2261 4.36035 47.5625 4.69679 47.5625 5.11182Z"/>
+</mask>
+<path d="M47.5605 11.8717C47.5605 12.4609 47.0818 12.9351 46.4936 12.97C37.1929 13.5217 29.8205 21.2386 29.8203 30.6777V62.4068C29.8203 62.996 29.3427 63.4736 28.7535 63.4736H22.4525C21.8634 63.4736 21.3857 62.996 21.3857 62.4068V30.6777C21.3856 20.8812 13.4442 12.9398 3.64796 12.9385C3.64662 12.9385 3.64551 12.9374 3.64551 12.936C3.64551 12.9347 3.64441 12.9336 3.64307 12.9336H-118.18C-118.182 12.9336 -118.183 12.9347 -118.183 12.936C-118.183 12.9374 -118.184 12.9385 -118.185 12.9385C-127.981 12.94 -135.922 20.8813 -135.922 30.6777V62.4068C-135.922 62.996 -136.399 63.4736 -136.989 63.4736H-143.29C-143.879 63.4736 -144.356 62.996 -144.356 62.4068V30.6777C-144.357 21.2387 -151.729 13.5218 -161.03 12.97C-161.618 12.9352 -162.097 12.4609 -162.097 11.8717V7.86171C-162.097 7.27254 -161.619 6.79492 -161.03 6.79492H46.4938C47.0829 6.79492 47.5605 7.27254 47.5605 7.86171V11.8717ZM47.5625 5.11182C47.5625 5.52684 47.2261 5.86328 46.811 5.86328H-161.372C-161.787 5.86328 -162.123 5.52684 -162.123 5.11182C-162.123 4.69679 -161.787 4.36035 -161.372 4.36035H46.811C47.2261 4.36035 47.5625 4.69679 47.5625 5.11182Z" fill="url(#paint5_linear_450_11759)"/>
+<path d="M29.8203 30.6777L25.5532 30.6776V30.6777H29.8203ZM21.3857 30.6777H25.6529V30.6777L21.3857 30.6777ZM-135.922 30.6777L-140.189 30.6776V30.6777H-135.922ZM-144.356 30.6777H-140.089V30.6777L-144.356 30.6777ZM-118.185 12.9385L-118.184 17.2056L-118.185 12.9385ZM-161.03 12.97L-160.777 8.71039L-161.03 12.97ZM3.64796 12.9385L3.64738 17.2056L3.64796 12.9385ZM46.4936 12.97L46.241 8.71038L46.4936 12.97ZM46.4936 12.97L46.241 8.71038C34.6994 9.39498 25.5534 18.9663 25.5532 30.6776L29.8203 30.6777L34.0874 30.6778C34.0876 23.5108 39.6865 17.6484 46.7463 17.2297L46.4936 12.97ZM29.8203 30.6777H25.5532V62.4068H29.8203H34.0874V30.6777H29.8203ZM28.7535 63.4736V59.2065H22.4525V63.4736V67.7408H28.7535V63.4736ZM21.3857 62.4068H25.6529V30.6777H21.3857H17.1186V62.4068H21.3857ZM21.3857 30.6777L25.6529 30.6777C25.6526 18.5245 15.801 8.67298 3.64854 8.67134L3.64796 12.9385L3.64738 17.2056C11.0875 17.2066 17.1185 23.2379 17.1186 30.6778L21.3857 30.6777ZM3.64307 12.9336V8.66645H-118.18V12.9336V17.2007H3.64307V12.9336ZM-118.185 12.9385L-118.186 8.67134C-130.338 8.67322 -140.189 18.5248 -140.189 30.6776L-135.922 30.6777L-131.655 30.6778C-131.655 23.2378 -125.624 17.2068 -118.184 17.2056L-118.185 12.9385ZM-135.922 30.6777H-140.189V62.4068H-135.922H-131.655V30.6777H-135.922ZM-136.989 63.4736V59.2065H-143.29V63.4736V67.7408H-136.989V63.4736ZM-144.356 62.4068H-140.089V30.6777H-144.356H-148.624V62.4068H-144.356ZM-144.356 30.6777L-140.089 30.6777C-140.09 18.9663 -149.236 9.39512 -160.777 8.71039L-161.03 12.97L-161.282 17.2297C-154.223 17.6485 -148.624 23.511 -148.624 30.6778L-144.356 30.6777ZM-162.097 11.8717H-157.83V7.86171H-162.097H-166.364V11.8717H-162.097ZM-161.03 6.79492V11.0621H46.4938V6.79492V2.52778H-161.03V6.79492ZM47.5605 7.86171H43.2934V11.8717H47.5605H51.8277V7.86171H47.5605ZM46.811 5.86328V1.59614H-161.372V5.86328V10.1304H46.811V5.86328ZM-161.372 4.36035V8.62749H46.811V4.36035V0.0932121H-161.372V4.36035ZM46.811 4.36035V8.62749C44.8694 8.62749 43.2954 7.0535 43.2954 5.11182H47.5625H51.8296C51.8296 2.34009 49.5827 0.0932121 46.811 0.0932121V4.36035ZM-162.123 5.11182H-157.856C-157.856 7.05347 -159.43 8.62749 -161.372 8.62749V4.36035V0.0932121C-164.143 0.0932121 -166.39 2.34012 -166.39 5.11182H-162.123ZM-161.372 5.86328V1.59614C-159.43 1.59614 -157.856 3.17013 -157.856 5.11182H-162.123H-166.39C-166.39 7.88354 -164.143 10.1304 -161.372 10.1304V5.86328ZM46.811 5.86328V10.1304C49.5827 10.1304 51.8296 7.88351 51.8296 5.11182H47.5625H43.2954C43.2954 3.17016 44.8694 1.59614 46.811 1.59614V5.86328ZM46.4938 6.79492V11.0621C44.7263 11.0621 43.2934 9.62925 43.2934 7.86171H47.5605H51.8277C51.8277 4.91582 49.4396 2.52778 46.4938 2.52778V6.79492ZM-135.922 62.4068H-140.189C-140.189 60.6393 -138.756 59.2065 -136.989 59.2065V63.4736V67.7408C-134.043 67.7408 -131.655 65.3527 -131.655 62.4068H-135.922ZM-118.183 12.936H-122.45C-122.45 10.5484 -120.508 8.6717 -118.186 8.67134L-118.185 12.9385L-118.184 17.2056C-115.859 17.2053 -113.915 15.3263 -113.915 12.936H-118.183ZM-118.18 12.9336V8.66645C-120.542 8.66645 -122.45 10.5816 -122.45 12.936H-118.183H-113.915C-113.915 15.2878 -115.821 17.2007 -118.18 17.2007V12.9336ZM3.64551 12.936H7.91264C7.91264 10.578 6.00108 8.66645 3.64307 8.66645V12.9336V17.2007C1.28773 17.2007 -0.621628 15.2914 -0.621628 12.936H3.64551ZM-162.097 7.86171H-157.83C-157.83 9.62921 -159.262 11.0621 -161.03 11.0621V6.79492V2.52778C-163.976 2.52778 -166.364 4.91586 -166.364 7.86171H-162.097ZM22.4525 63.4736V59.2065C24.22 59.2065 25.6529 60.6393 25.6529 62.4068H21.3857H17.1186C17.1186 65.3527 19.5067 67.7408 22.4525 67.7408V63.4736ZM-161.03 12.97L-160.777 8.71039C-159.276 8.79943 -157.83 10.0401 -157.83 11.8717H-162.097H-166.364C-166.364 14.8817 -163.96 17.0709 -161.282 17.2297L-161.03 12.97ZM29.8203 62.4068H25.5532C25.5532 60.6393 26.986 59.2065 28.7535 59.2065V63.4736V67.7408C31.6994 67.7408 34.0874 65.3527 34.0874 62.4068H29.8203ZM3.64796 12.9385L3.64854 8.67134C5.96979 8.67165 7.91264 10.5472 7.91264 12.936H3.64551H-0.621628C-0.621628 15.3275 1.32344 17.2053 3.64738 17.2056L3.64796 12.9385ZM-143.29 63.4736V59.2065C-141.522 59.2065 -140.089 60.6393 -140.089 62.4068H-144.356H-148.624C-148.624 65.3527 -146.236 67.7408 -143.29 67.7408V63.4736ZM46.4936 12.97L46.7463 17.2297C49.4233 17.0709 51.8277 14.8817 51.8277 11.8717H47.5605H43.2934C43.2934 10.04 44.7402 8.7994 46.241 8.71038L46.4936 12.97Z" fill="#400500" mask="url(#path-9-outside-2_450_11759)"/>
+<mask id="path-11-outside-3_450_11759" maskUnits="userSpaceOnUse" x="-164.123" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="-164.123" y="2.36035" width="213" height="63"/>
+<path d="M47.5605 12.9385C37.7631 12.9385 29.8205 20.8804 29.8203 30.6777V63.4736H21.3857V30.6777C21.3856 20.8804 13.4429 12.9385 3.64551 12.9385V12.9336H-118.183V12.9385C-127.98 12.9387 -135.922 20.8805 -135.922 30.6777V63.4736H-144.356V30.6777C-144.357 20.8804 -152.299 12.9386 -162.097 12.9385V6.79492H47.5605V12.9385ZM47.5625 5.86328H-162.123V4.36035H47.5625V5.86328Z"/>
+</mask>
+<path d="M47.5605 12.9385V14.0053C48.1497 14.0053 48.6273 13.5276 48.6273 12.9385H47.5605ZM29.8203 30.6777L28.7535 30.6777V30.6777H29.8203ZM29.8203 63.4736V64.5404C30.4095 64.5404 30.8871 64.0628 30.8871 63.4736H29.8203ZM21.3857 63.4736H20.319C20.319 64.0628 20.7966 64.5404 21.3857 64.5404V63.4736ZM21.3857 30.6777H22.4525V30.6777L21.3857 30.6777ZM3.64551 12.9385H2.57872C2.57872 13.5276 3.05634 14.0053 3.64551 14.0053V12.9385ZM3.64551 12.9336H4.7123C4.7123 12.3444 4.23468 11.8668 3.64551 11.8668V12.9336ZM-118.183 12.9336V11.8668C-118.772 11.8668 -119.249 12.3444 -119.249 12.9336H-118.183ZM-118.183 12.9385L-118.183 14.0053C-117.593 14.0052 -117.116 13.5276 -117.116 12.9385H-118.183ZM-135.922 30.6777L-136.989 30.6777V30.6777H-135.922ZM-135.922 63.4736V64.5404C-135.333 64.5404 -134.855 64.0628 -134.855 63.4736H-135.922ZM-144.356 63.4736H-145.423C-145.423 64.0628 -144.946 64.5404 -144.356 64.5404V63.4736ZM-144.356 30.6777H-143.29L-143.29 30.6777L-144.356 30.6777ZM-162.097 12.9385H-163.163C-163.163 13.5276 -162.686 14.0053 -162.097 14.0053L-162.097 12.9385ZM-162.097 6.79492V5.72814C-162.686 5.72814 -163.163 6.20575 -163.163 6.79492H-162.097ZM47.5605 6.79492H48.6273C48.6273 6.20575 48.1497 5.72814 47.5605 5.72814V6.79492ZM47.5625 5.86328V6.93007C48.1517 6.93007 48.6293 6.45245 48.6293 5.86328H47.5625ZM-162.123 5.86328H-163.19C-163.19 6.45245 -162.712 6.93007 -162.123 6.93007V5.86328ZM-162.123 4.36035V3.29357C-162.712 3.29357 -163.19 3.77118 -163.19 4.36035H-162.123ZM47.5625 4.36035H48.6293C48.6293 3.77118 48.1517 3.29357 47.5625 3.29357V4.36035ZM47.5605 12.9385V11.8717C37.174 11.8717 28.7537 20.2911 28.7535 30.6777L29.8203 30.6777L30.8871 30.6778C30.8873 21.4696 38.3522 14.0053 47.5605 14.0053V12.9385ZM29.8203 30.6777H28.7535V63.4736H29.8203H30.8871V30.6777H29.8203ZM29.8203 63.4736V62.4068H21.3857V63.4736V64.5404H29.8203V63.4736ZM21.3857 63.4736H22.4525V30.6777H21.3857H20.319V63.4736H21.3857ZM21.3857 30.6777L22.4525 30.6777C22.4523 20.2911 14.032 11.8717 3.64551 11.8717V12.9385V14.0053C12.8538 14.0053 20.3188 21.4696 20.319 30.6778L21.3857 30.6777ZM3.64551 12.9385H4.7123V12.9336H3.64551H2.57872V12.9385H3.64551ZM3.64551 12.9336V11.8668H-118.183V12.9336V14.0004H3.64551V12.9336ZM-118.183 12.9336H-119.249V12.9385H-118.183H-117.116V12.9336H-118.183ZM-118.183 12.9385L-118.183 11.8717C-128.569 11.8719 -136.988 20.2913 -136.989 30.6777L-135.922 30.6777L-134.855 30.6778C-134.855 21.4697 -127.391 14.0054 -118.183 14.0053L-118.183 12.9385ZM-135.922 30.6777H-136.989V63.4736H-135.922H-134.855V30.6777H-135.922ZM-135.922 63.4736V62.4068H-144.356V63.4736V64.5404H-135.922V63.4736ZM-144.356 63.4736H-143.29V30.6777H-144.356H-145.423V63.4736H-144.356ZM-144.356 30.6777L-143.29 30.6777C-143.29 20.2912 -151.71 11.8718 -162.097 11.8717L-162.097 12.9385L-162.097 14.0053C-152.888 14.0054 -145.423 21.4697 -145.423 30.6778L-144.356 30.6777ZM-162.097 12.9385H-161.03V6.79492H-162.097H-163.163V12.9385H-162.097ZM-162.097 6.79492V7.86171H47.5605V6.79492V5.72814H-162.097V6.79492ZM47.5605 6.79492H46.4938V12.9385H47.5605H48.6273V6.79492H47.5605ZM47.5625 5.86328V4.7965H-162.123V5.86328V6.93007H47.5625V5.86328ZM-162.123 5.86328H-161.056V4.36035H-162.123H-163.19V5.86328H-162.123ZM-162.123 4.36035V5.42714H47.5625V4.36035V3.29357H-162.123V4.36035ZM47.5625 4.36035H46.4957V5.86328H47.5625H48.6293V4.36035H47.5625Z" fill="#040404" fill-opacity="0.5" mask="url(#path-11-outside-3_450_11759)"/>
+<g filter="url(#filter3_f_450_11759)" style="mix-blend-mode:color-dodge">
+<path d="M36.3008 65.6075C42.4871 65.6075 47.502 70.6224 47.502 76.8087V94.4102H-162.654V76.8087C-162.654 70.6224 -157.639 65.6075 -151.453 65.6075H36.3008Z" stroke="url(#paint6_linear_450_11759)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_11759)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_11759" maskUnits="userSpaceOnUse" x="-164.123" y="3.33496" width="212" height="61" fill="black">
+<rect fill="white" x="-164.123" y="3.33496" width="212" height="61"/>
+<path d="M45.9014 5.33496V11.4834C36.1803 11.4836 28.2998 19.3649 28.2998 29.0859V62.9404H19.9307V29.0859C19.9307 19.7628 12.6825 12.1337 3.51367 11.5244H-119.734C-128.903 12.1336 -136.152 19.7628 -136.152 29.0859V62.9404H-144.521V29.0859C-144.521 19.3647 -152.402 11.4834 -162.123 11.4834V5.33496H45.9014Z"/>
+</mask>
+<path d="M45.9014 5.33496H46.9682V4.26818H45.9014V5.33496ZM45.9014 11.4834L45.9014 12.5502L46.9682 12.5502V11.4834H45.9014ZM28.2998 62.9404V64.0072H29.3666V62.9404H28.2998ZM19.9307 62.9404H18.8639V64.0072H19.9307V62.9404ZM3.51367 11.5244L3.5844 10.46L3.54907 10.4576H3.51367V11.5244ZM-119.734 11.5244V10.4576H-119.77L-119.805 10.46L-119.734 11.5244ZM-136.152 62.9404V64.0072H-135.086V62.9404H-136.152ZM-144.521 62.9404H-145.587V64.0072H-144.521V62.9404ZM-162.123 11.4834H-163.19V12.5502H-162.123V11.4834ZM-162.123 5.33496V4.26818H-163.19V5.33496H-162.123ZM45.9014 5.33496H44.8346V11.4834H45.9014H46.9682V5.33496H45.9014ZM45.9014 11.4834L45.9014 10.4166C35.5911 10.4168 27.233 18.7757 27.233 29.0859H28.2998H29.3666C29.3666 19.954 36.7695 12.5504 45.9014 12.5502L45.9014 11.4834ZM28.2998 29.0859H27.233V62.9404H28.2998H29.3666V29.0859H28.2998ZM28.2998 62.9404V61.8736H19.9307V62.9404V64.0072H28.2998V62.9404ZM19.9307 62.9404H20.9975V29.0859H19.9307H18.8639V62.9404H19.9307ZM19.9307 29.0859H20.9975C20.9975 19.1973 13.3099 11.1062 3.5844 10.46L3.51367 11.5244L3.44295 12.5889C12.0551 13.1611 18.8639 20.3284 18.8639 29.0859H19.9307ZM3.51367 11.5244V10.4576H-119.734V11.5244V12.5912H3.51367V11.5244ZM-119.734 11.5244L-119.805 10.46C-129.531 11.1061 -137.219 19.1972 -137.219 29.0859H-136.152H-135.086C-135.086 20.3284 -128.276 13.1611 -119.664 12.5889L-119.734 11.5244ZM-136.152 29.0859H-137.219V62.9404H-136.152H-135.086V29.0859H-136.152ZM-136.152 62.9404V61.8736H-144.521V62.9404V64.0072H-136.152V62.9404ZM-144.521 62.9404H-143.454V29.0859H-144.521H-145.587V62.9404H-144.521ZM-144.521 29.0859H-143.454C-143.454 18.7756 -151.813 10.4166 -162.123 10.4166V11.4834V12.5502C-152.991 12.5502 -145.587 19.9539 -145.587 29.0859H-144.521ZM-162.123 11.4834H-161.056V5.33496H-162.123H-163.19V11.4834H-162.123ZM-162.123 5.33496V6.40175H45.9014V5.33496V4.26818H-162.123V5.33496Z" fill="url(#paint7_linear_450_11759)" mask="url(#path-14-outside-4_450_11759)"/>
+</g>
+<g filter="url(#filter5_f_450_11759)" style="mix-blend-mode:plus-lighter">
+<mask id="path-16-outside-5_450_11759" maskUnits="userSpaceOnUse" x="-163.055" y="3.33496" width="211" height="61" fill="black">
+<rect fill="white" x="-163.055" y="3.33496" width="211" height="61"/>
+<path d="M44.8385 5.33496C45.4277 5.33496 45.9053 5.81258 45.9053 6.40175V10.4166C45.9053 11.0058 45.4264 11.48 44.8383 11.5154C35.6638 12.0668 28.3936 19.6821 28.3936 28.9951V61.8736C28.3936 62.4628 27.9159 62.9404 27.3268 62.9404H21.1342C20.545 62.9404 20.0674 62.4628 20.0674 61.8736V28.9951C20.0673 19.7198 12.8562 12.1305 3.73438 11.5244H-118.884C-128.006 12.1304 -135.217 19.7198 -135.217 28.9951V61.8736C-135.217 62.4628 -135.694 62.9404 -136.284 62.9404H-142.476C-143.065 62.9404 -143.543 62.4628 -143.543 61.8736V28.9951C-143.543 19.6821 -150.813 12.0668 -159.988 11.5154C-160.576 11.48 -161.055 11.0058 -161.055 10.4166V6.40175C-161.055 5.81258 -160.577 5.33496 -159.988 5.33496H44.8385Z"/>
+</mask>
+<path d="M28.3936 28.9951L27.3268 28.9951V28.9951H28.3936ZM20.0674 28.9951H21.1342V28.9951L20.0674 28.9951ZM3.73438 11.5244L3.8051 10.46L3.76978 10.4576H3.73438V11.5244ZM-118.884 11.5244V10.4576H-118.919L-118.955 10.46L-118.884 11.5244ZM-135.217 28.9951L-136.284 28.9951V28.9951H-135.217ZM-143.543 28.9951H-142.476L-142.476 28.9951L-143.543 28.9951ZM45.9053 6.40175H44.8385V10.4166H45.9053H46.9721V6.40175H45.9053ZM44.8383 11.5154L44.7743 10.4505C35.04 11.0356 27.3268 19.1144 27.3268 28.9951L28.3936 28.9951L29.4603 28.9951C29.4604 20.2498 36.2878 13.098 44.9023 12.5802L44.8383 11.5154ZM28.3936 28.9951H27.3268V61.8736H28.3936H29.4603V28.9951H28.3936ZM27.3268 62.9404V61.8736H21.1342V62.9404V64.0072H27.3268V62.9404ZM20.0674 61.8736H21.1342V28.9951H20.0674H19.0006V61.8736H20.0674ZM20.0674 28.9951L21.1342 28.9951C21.1341 19.1542 13.4836 11.103 3.8051 10.46L3.73438 11.5244L3.66365 12.5889C12.2289 13.1579 19.0005 20.2854 19.0006 28.9951L20.0674 28.9951ZM3.73438 11.5244V10.4576H-118.884V11.5244V12.5912H3.73438V11.5244ZM-118.884 11.5244L-118.955 10.46C-128.633 11.103 -136.284 19.1542 -136.284 28.9951L-135.217 28.9951L-134.15 28.9951C-134.15 20.2854 -127.378 13.1579 -118.813 12.5889L-118.884 11.5244ZM-135.217 28.9951H-136.284V61.8736H-135.217H-134.15V28.9951H-135.217ZM-136.284 62.9404V61.8736H-142.476V62.9404V64.0072H-136.284V62.9404ZM-143.543 61.8736H-142.476V28.9951H-143.543H-144.61V61.8736H-143.543ZM-143.543 28.9951L-142.476 28.9951C-142.476 19.1144 -150.189 11.0356 -159.924 10.4505L-159.988 11.5154L-160.052 12.5802C-151.437 13.098 -144.61 20.2498 -144.61 28.9951L-143.543 28.9951ZM-161.055 10.4166H-159.988V6.40175H-161.055H-162.121V10.4166H-161.055ZM-159.988 5.33496V6.40175H44.8385V5.33496V4.26818H-159.988V5.33496ZM-161.055 6.40175H-159.988V6.40175V5.33496V4.26818C-161.166 4.26818 -162.121 5.22341 -162.121 6.40175H-161.055ZM-142.476 62.9404V61.8736H-142.476H-143.543H-144.61C-144.61 63.052 -143.655 64.0072 -142.476 64.0072V62.9404ZM-135.217 61.8736H-136.284H-136.284V62.9404V64.0072C-135.105 64.0072 -134.15 63.052 -134.15 61.8736H-135.217ZM21.1342 62.9404V61.8736V61.8736H20.0674H19.0006C19.0006 63.052 19.9558 64.0072 21.1342 64.0072V62.9404ZM28.3936 61.8736H27.3268V61.8736V62.9404V64.0072C28.5051 64.0072 29.4603 63.052 29.4603 61.8736H28.3936ZM-159.988 11.5154L-159.924 10.4505C-159.949 10.449 -159.969 10.4383 -159.981 10.426C-159.986 10.4204 -159.988 10.4166 -159.988 10.4163C-159.988 10.4162 -159.988 10.4165 -159.988 10.4171C-159.988 10.4178 -159.988 10.4178 -159.988 10.4166H-161.055H-162.121C-162.121 11.6112 -161.161 12.5136 -160.052 12.5802L-159.988 11.5154ZM45.9053 10.4166H44.8385C44.8385 10.4178 44.8384 10.4178 44.8385 10.4171C44.8387 10.4165 44.8388 10.4162 44.8387 10.4163C44.8386 10.4166 44.837 10.4204 44.8315 10.426C44.8193 10.4383 44.7993 10.449 44.7743 10.4505L44.8383 11.5154L44.9023 12.5802C46.0117 12.5136 46.9721 11.6112 46.9721 10.4166H45.9053ZM45.9053 6.40175H46.9721C46.9721 5.22341 46.0168 4.26818 44.8385 4.26818V5.33496V6.40175V6.40175H45.9053Z" fill="url(#paint8_linear_450_11759)" mask="url(#path-16-outside-5_450_11759)"/>
+</g>
+<g filter="url(#filter6_f_450_11759)">
+<path d="M-164.256 13.8682V4.26712C-164.256 3.08878 -163.301 2.13354 -162.122 2.13354H48.0343C49.2127 2.13354 50.1679 3.08878 50.1679 4.26711V13.8682" stroke="url(#paint9_linear_450_11759)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_11759)">
+<path d="M21.8999 63.4737V29.3366C21.8999 22.9359 16.0325 12.268 2.69773 12.268C-8.82355 12.268 -31.795 12.268 -42.6406 12.268" stroke="url(#paint10_linear_450_11759)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter8_f_450_11759)">
+<path d="M-133.318 62.9403V26.9541C-132.963 22.5922 -129.585 15.4684 -119.45 13.8682H1.62993C11.231 14.4016 18.1651 18.2302 18.1651 31.3161V62.9403" stroke="url(#paint11_linear_450_11759)" stroke-width="1.06678"/>
+</g>
+<line x1="-148.197" y1="64.1475" x2="33.7176" y2="64.1475" stroke="#400500" stroke-width="1.06678"/>
+<g filter="url(#filter9_f_450_11759)">
+<path d="M22.4316 45.8718V62.4069H29.3657V45.8718" stroke="url(#paint12_linear_450_11759)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_11759" x="-132.027" y="17.1808" width="150.641" height="49.5774" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11759"/>
+</filter>
+<filter id="filter1_ii_450_11759" x="-160.824" y="66.2541" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0.556863 0 0 0 0 0.266667 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11759"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.322115 0 0 0 0 0.142276 0 0 0 0 0.0263267 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_11759" result="effect2_innerShadow_450_11759"/>
+</filter>
+<filter id="filter2_f_450_11759" x="-159.989" y="68.2742" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<filter id="filter3_f_450_11759" x="-164.254" y="64.0071" width="213.356" height="32.0035" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<filter id="filter4_f_450_11759" x="-164.256" y="3.2014" width="212.292" height="61.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<filter id="filter5_f_450_11759" x="-163.188" y="3.2014" width="211.227" height="61.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<filter id="filter6_f_450_11759" x="-165.856" y="0.533374" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<filter id="filter7_f_450_11759" x="-43.7074" y="10.6678" width="67.2078" height="53.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<filter id="filter8_f_450_11759" x="-134.918" y="12.2681" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<filter id="filter9_f_450_11759" x="20.8317" y="44.805" width="10.1336" height="19.2021" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11759"/>
+</filter>
+<linearGradient id="paint0_linear_450_11759" x1="-57.2401" y1="17.1808" x2="-57.2401" y2="65.6915" gradientUnits="userSpaceOnUse">
+<stop stop-color="#442111"/>
+<stop offset="0.05" stop-color="#522510"/>
+<stop offset="1" stop-color="#090504"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_11759" x1="-134.698" y1="34.5814" x2="17.5471" y2="34.5814" gradientUnits="userSpaceOnUse">
+<stop stop-color="#803414"/>
+<stop offset="0.077962" stop-color="#803414" stop-opacity="0.25"/>
+<stop offset="0.939742" stop-color="#803414" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#803414"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_11759" x1="-57.2846" y1="68.3877" x2="-57.2846" y2="91.8366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AD571E"/>
+<stop offset="1" stop-color="#88441A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_11759" x1="-57.2846" y1="68.3877" x2="-57.2846" y2="91.8366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AD571E"/>
+<stop offset="1" stop-color="#88441A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_11759" x1="-57.0443" y1="70.4077" x2="-57.0443" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC893"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_11759" x1="-162.123" y1="33.9171" x2="47.5627" y2="33.9171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAC63"/>
+<stop offset="0.144231" stop-color="#FF7E0D"/>
+<stop offset="0.889423" stop-color="#FF7E0D"/>
+<stop offset="0.961538" stop-color="#EB5200"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_11759" x1="-57.5762" y1="66.1407" x2="-57.5762" y2="93.8771" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDF7CC"/>
+<stop offset="1" stop-color="#FDF7CC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_11759" x1="-58.1108" y1="5.33496" x2="-58.1108" y2="14.4016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5A76C"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_11759" x1="-147.788" y1="12.268" x2="-91.993" y2="33.9432" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5A76C"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_11759" x1="-57.044" y1="2.13354" x2="-57.044" y2="13.8682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C17300"/>
+<stop offset="1" stop-color="#C17300" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_11759" x1="14.9658" y1="16.0018" x2="2.51952" y2="22.2738" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC034"/>
+<stop offset="1" stop-color="#FFC034" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_11759" x1="-57.5766" y1="13.8682" x2="-57.5766" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D59628"/>
+<stop offset="1" stop-color="#AD6E00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_450_11759" x1="24.5652" y1="61.8735" x2="24.0318" y2="36.2707" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC034"/>
+<stop offset="1" stop-color="#FFC034" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_11759">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_11759">
+<rect width="216.389" height="95" fill="white" transform="translate(-166.389)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/왼쪽.svg
new file mode 100644
index 0000000..b5e1a1b
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/왼쪽.svg
@@ -0,0 +1,185 @@
+<svg width="50" height="95" viewBox="0 0 50 95" fill="none" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_11683)">
+<g clip-path="url(#clip1_450_11683)">
+<g filter="url(#filter0_i_450_11683)">
+<path d="M34.3613 29.9823C34.3613 22.9122 40.0927 17.1808 47.1627 17.1808H171.134C178.204 17.1808 183.936 22.9122 183.936 29.9823V65.6915H34.3613V29.9823Z" fill="url(#paint0_linear_450_11683)"/>
+<path d="M34.3613 29.9823C34.3613 22.9122 40.0927 17.1808 47.1627 17.1808H171.134C178.204 17.1808 183.936 22.9122 183.936 29.9823V65.6915H34.3613V29.9823Z" fill="url(#paint1_linear_450_11683)"/>
+</g>
+<path d="M47.1631 17.7141H171.135C177.91 17.7143 183.402 23.2073 183.402 29.9826V65.1584H34.8945V29.9826C34.8945 23.2072 40.3876 17.7141 47.1631 17.7141Z" stroke="black" stroke-width="1.06678"/>
+<path d="M203.043 66.2539C208.935 66.2539 213.711 71.0302 213.711 76.9219V93.9707H4.49707V76.9219C4.49712 71.0303 9.27343 66.254 15.165 66.2539H203.043Z" fill="url(#paint2_linear_450_11683)" stroke="#400500" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_11683)">
+<path d="M6.63086 76.922C6.63086 72.2086 10.4518 68.3877 15.1651 68.3877H203.043C207.756 68.3877 211.577 72.2086 211.577 76.922V90.7699C211.577 91.359 211.1 91.8366 210.511 91.8366H7.69765C7.10848 91.8366 6.63086 91.359 6.63086 90.7699V76.922Z" fill="url(#paint3_linear_450_11683)"/>
+</g>
+<path d="M203.043 67.8545C208.051 67.8545 212.11 71.914 212.11 76.9219V90.7695C212.11 91.6532 211.394 92.37 210.511 92.3701H7.69727C6.81369 92.3699 6.09766 91.6532 6.09766 90.7695V76.9219C6.09771 71.914 10.1572 67.8545 15.165 67.8545H203.043Z" stroke="black" stroke-opacity="0.76" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_11683)" style="mix-blend-mode:plus-lighter">
+<path d="M203.755 69.8745C207.584 69.8745 210.688 72.9787 210.688 76.8081V92.2769H8V76.8081C8.00017 72.9788 11.1042 69.8747 14.9336 69.8745H203.755Z" stroke="url(#paint4_linear_450_11683)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_11683" maskUnits="userSpaceOnUse" x="-0.734375" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-0.734375" y="-0.639648" width="219" height="69"/>
+<path d="M213.949 12.9385C204.152 12.9385 196.209 20.8804 196.209 30.6777V63.4736H187.774V30.6777C187.774 20.8804 179.832 12.9385 170.034 12.9385V12.9336H48.2061V12.9385C38.4088 12.9387 30.467 20.8805 30.4668 30.6777V63.4736H22.0322V30.6777C22.032 20.8804 14.0893 12.9386 4.29199 12.9385V6.79492H213.949V12.9385ZM213.951 5.86328H4.26562V4.36035H213.951V5.86328Z"/>
+</mask>
+<path d="M213.949 12.9385C204.152 12.9385 196.209 20.8804 196.209 30.6777V63.4736H187.774V30.6777C187.774 20.8804 179.832 12.9385 170.034 12.9385V12.9336H48.2061V12.9385C38.4088 12.9387 30.467 20.8805 30.4668 30.6777V63.4736H22.0322V30.6777C22.032 20.8804 14.0893 12.9386 4.29199 12.9385V6.79492H213.949V12.9385ZM213.951 5.86328H4.26562V4.36035H213.951V5.86328Z" fill="#FF7700"/>
+<path d="M213.949 12.9385V17.2056C216.306 17.2056 218.216 15.2952 218.216 12.9385H213.949ZM196.209 30.6777L191.942 30.6776V30.6777H196.209ZM196.209 63.4736V67.7408C198.566 67.7408 200.476 65.8303 200.476 63.4736H196.209ZM187.774 63.4736H183.507C183.507 65.8303 185.418 67.7408 187.774 67.7408V63.4736ZM187.774 30.6777H192.042V30.6777L187.774 30.6777ZM170.034 12.9385H165.767C165.767 15.2952 167.678 17.2056 170.034 17.2056V12.9385ZM170.034 12.9336H174.301C174.301 10.5769 172.391 8.66645 170.034 8.66645V12.9336ZM48.2061 12.9336V8.66645C45.8494 8.66645 43.9389 10.5769 43.9389 12.9336H48.2061ZM48.2061 12.9385L48.2061 17.2056C50.5628 17.2056 52.4732 15.2951 52.4732 12.9385H48.2061ZM30.4668 30.6777L26.1997 30.6776V30.6777H30.4668ZM30.4668 63.4736V67.7408C32.8235 67.7408 34.7339 65.8303 34.7339 63.4736H30.4668ZM22.0322 63.4736H17.7651C17.7651 65.8303 19.6756 67.7408 22.0322 67.7408V63.4736ZM22.0322 30.6777H26.2994V30.6777L22.0322 30.6777ZM4.29199 12.9385H0.0248528C0.0248528 15.2951 1.93528 17.2056 4.29194 17.2056L4.29199 12.9385ZM4.29199 6.79492V2.52778C1.93532 2.52778 0.0248528 4.43825 0.0248528 6.79492H4.29199ZM213.949 6.79492H218.216C218.216 4.43825 216.306 2.52778 213.949 2.52778V6.79492ZM213.951 5.86328V10.1304C216.308 10.1304 218.218 8.21996 218.218 5.86328H213.951ZM4.26562 5.86328H-0.00151443C-0.00151443 8.21996 1.90895 10.1304 4.26563 10.1304L4.26562 5.86328ZM4.26562 4.36035V0.0932121C1.90895 0.0932121 -0.00151443 2.00368 -0.00151443 4.36035L4.26562 4.36035ZM213.951 4.36035H218.218C218.218 2.00368 216.308 0.0932121 213.951 0.0932121V4.36035ZM213.949 12.9385V8.67134C201.795 8.67134 191.942 18.5235 191.942 30.6776L196.209 30.6777L200.476 30.6778C200.476 23.2373 206.508 17.2056 213.949 17.2056V12.9385ZM196.209 30.6777H191.942V63.4736H196.209H200.476V30.6777H196.209ZM196.209 63.4736V59.2065H187.774V63.4736V67.7408H196.209V63.4736ZM187.774 63.4736H192.042V30.6777H187.774H183.507V63.4736H187.774ZM187.774 30.6777L192.042 30.6777C192.041 18.5234 182.188 8.67134 170.034 8.67134V12.9385V17.2056C177.475 17.2056 183.507 23.2373 183.507 30.6778L187.774 30.6777ZM170.034 12.9385H174.301V12.9336H170.034H165.767V12.9385H170.034ZM170.034 12.9336V8.66645H48.2061V12.9336V17.2007H170.034V12.9336ZM48.2061 12.9336H43.9389V12.9385H48.2061H52.4732V12.9336H48.2061ZM48.2061 12.9385L48.206 8.67134C36.0521 8.67158 26.1999 18.5238 26.1997 30.6776L30.4668 30.6777L34.7339 30.6778C34.7341 23.2372 40.7655 17.2058 48.2061 17.2056L48.2061 12.9385ZM30.4668 30.6777H26.1997V63.4736H30.4668H34.7339V30.6777H30.4668ZM30.4668 63.4736V59.2065H22.0322V63.4736V67.7408H30.4668V63.4736ZM22.0322 63.4736H26.2994V30.6777H22.0322H17.7651V63.4736H22.0322ZM22.0322 30.6777L26.2994 30.6777C26.2991 18.5235 16.4457 8.67149 4.29205 8.67134L4.29199 12.9385L4.29194 17.2056C11.7329 17.2057 17.7649 23.2374 17.7651 30.6778L22.0322 30.6777ZM4.29199 12.9385H8.55913V6.79492H4.29199H0.0248528V12.9385H4.29199ZM4.29199 6.79492V11.0621H213.949V6.79492V2.52778H4.29199V6.79492ZM213.949 6.79492H209.682V12.9385H213.949H218.216V6.79492H213.949ZM213.951 5.86328V1.59614H4.26562V5.86328V10.1304H213.951V5.86328ZM4.26562 5.86328H8.53276V4.36035H4.26562H-0.00151443V5.86328H4.26562ZM4.26562 4.36035V8.62749H213.951V4.36035V0.0932121H4.26562V4.36035ZM213.951 4.36035H209.684V5.86328H213.951H218.218V4.36035H213.951Z" fill="#400500" mask="url(#path-7-outside-1_450_11683)"/>
+<mask id="path-9-outside-2_450_11683" maskUnits="userSpaceOnUse" x="-0.734375" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-0.734375" y="-0.639648" width="219" height="69"/>
+<path d="M213.949 11.8717C213.949 12.4609 213.47 12.9351 212.882 12.97C203.582 13.5217 196.209 21.2386 196.209 30.6777V62.4068C196.209 62.996 195.731 63.4736 195.142 63.4736H188.841C188.252 63.4736 187.774 62.996 187.774 62.4068V30.6777C187.774 20.8812 179.833 12.9398 170.037 12.9385C170.035 12.9385 170.034 12.9374 170.034 12.936C170.034 12.9347 170.033 12.9336 170.032 12.9336H48.2085C48.2071 12.9336 48.2061 12.9347 48.2061 12.936C48.2061 12.9374 48.2049 12.9385 48.2036 12.9385C38.4075 12.94 30.467 20.8813 30.4668 30.6777V62.4068C30.4668 62.996 29.9892 63.4736 29.4 63.4736H23.099C22.5098 63.4736 22.0322 62.996 22.0322 62.4068V30.6777C22.032 21.2387 14.6595 13.5218 5.3589 12.97C4.77077 12.9352 4.29199 12.4609 4.29199 11.8717V7.86171C4.29199 7.27254 4.76961 6.79492 5.35878 6.79492H212.882C213.472 6.79492 213.949 7.27254 213.949 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z"/>
+</mask>
+<path d="M213.949 11.8717C213.949 12.4609 213.47 12.9351 212.882 12.97C203.582 13.5217 196.209 21.2386 196.209 30.6777V62.4068C196.209 62.996 195.731 63.4736 195.142 63.4736H188.841C188.252 63.4736 187.774 62.996 187.774 62.4068V30.6777C187.774 20.8812 179.833 12.9398 170.037 12.9385C170.035 12.9385 170.034 12.9374 170.034 12.936C170.034 12.9347 170.033 12.9336 170.032 12.9336H48.2085C48.2071 12.9336 48.2061 12.9347 48.2061 12.936C48.2061 12.9374 48.2049 12.9385 48.2036 12.9385C38.4075 12.94 30.467 20.8813 30.4668 30.6777V62.4068C30.4668 62.996 29.9892 63.4736 29.4 63.4736H23.099C22.5098 63.4736 22.0322 62.996 22.0322 62.4068V30.6777C22.032 21.2387 14.6595 13.5218 5.3589 12.97C4.77077 12.9352 4.29199 12.4609 4.29199 11.8717V7.86171C4.29199 7.27254 4.76961 6.79492 5.35878 6.79492H212.882C213.472 6.79492 213.949 7.27254 213.949 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z" fill="url(#paint5_linear_450_11683)"/>
+<path d="M196.209 30.6777L191.942 30.6776V30.6777H196.209ZM187.774 30.6777H192.042V30.6777L187.774 30.6777ZM30.4668 30.6777L26.1997 30.6776V30.6777H30.4668ZM22.0322 30.6777H26.2994V30.6777L22.0322 30.6777ZM48.2036 12.9385L48.2043 17.2056L48.2036 12.9385ZM5.3589 12.97L5.61162 8.71039L5.3589 12.97ZM170.037 12.9385L170.036 17.2056L170.037 12.9385ZM212.882 12.97L212.63 8.71038L212.882 12.97ZM212.882 12.97L212.63 8.71038C201.088 9.39498 191.942 18.9663 191.942 30.6776L196.209 30.6777L200.476 30.6778C200.476 23.5108 206.075 17.6484 213.135 17.2297L212.882 12.97ZM196.209 30.6777H191.942V62.4068H196.209H200.476V30.6777H196.209ZM195.142 63.4736V59.2065H188.841V63.4736V67.7408H195.142V63.4736ZM187.774 62.4068H192.042V30.6777H187.774H183.507V62.4068H187.774ZM187.774 30.6777L192.042 30.6777C192.041 18.5245 182.19 8.67298 170.037 8.67134L170.037 12.9385L170.036 17.2056C177.476 17.2066 183.507 23.2379 183.507 30.6778L187.774 30.6777ZM170.032 12.9336V8.66645H48.2085V12.9336V17.2007H170.032V12.9336ZM48.2036 12.9385L48.2029 8.67134C36.0505 8.67322 26.1999 18.5248 26.1997 30.6776L30.4668 30.6777L34.7339 30.6778C34.7341 23.2378 40.7645 17.2068 48.2043 17.2056L48.2036 12.9385ZM30.4668 30.6777H26.1997V62.4068H30.4668H34.7339V30.6777H30.4668ZM29.4 63.4736V59.2065H23.099V63.4736V67.7408H29.4V63.4736ZM22.0322 62.4068H26.2994V30.6777H22.0322H17.7651V62.4068H22.0322ZM22.0322 30.6777L26.2994 30.6777C26.2991 18.9663 17.153 9.39512 5.61162 8.71039L5.3589 12.97L5.10619 17.2297C12.166 17.6485 17.765 23.511 17.7651 30.6778L22.0322 30.6777ZM4.29199 11.8717H8.55913V7.86171H4.29199H0.0248528V11.8717H4.29199ZM5.35878 6.79492V11.0621H212.882V6.79492V2.52778H5.35878V6.79492ZM213.949 7.86171H209.682V11.8717H213.949H218.216V7.86171H213.949ZM213.2 5.86328V1.59614H5.01709V5.86328V10.1304H213.2V5.86328ZM5.01709 4.36035V8.62749H213.2V4.36035V0.0932121H5.01709V4.36035ZM213.2 4.36035V8.62749C211.258 8.62749 209.684 7.0535 209.684 5.11182H213.951H218.218C218.218 2.34009 215.971 0.0932121 213.2 0.0932121V4.36035ZM4.26562 5.11182H8.53276C8.53276 7.05347 6.95874 8.62749 5.01709 8.62749V4.36035V0.0932121C2.24539 0.0932121 -0.00151443 2.34012 -0.00151443 5.11182H4.26562ZM5.01709 5.86328V1.59614C6.95872 1.59614 8.53276 3.17013 8.53276 5.11182H4.26562H-0.00151443C-0.00151443 7.88354 2.24542 10.1304 5.01709 10.1304V5.86328ZM213.2 5.86328V10.1304C215.971 10.1304 218.218 7.88351 218.218 5.11182H213.951H209.684C209.684 3.17016 211.258 1.59614 213.2 1.59614V5.86328ZM212.882 6.79492V11.0621C211.115 11.0621 209.682 9.62925 209.682 7.86171H213.949H218.216C218.216 4.91582 215.828 2.52778 212.882 2.52778V6.79492ZM30.4668 62.4068H26.1997C26.1997 60.6393 27.6325 59.2065 29.4 59.2065V63.4736V67.7408C32.3459 67.7408 34.7339 65.3527 34.7339 62.4068H30.4668ZM48.2061 12.936H43.9389C43.9389 10.5484 45.8805 8.6717 48.2029 8.67134L48.2036 12.9385L48.2043 17.2056C50.5294 17.2053 52.4732 15.3263 52.4732 12.936H48.2061ZM48.2085 12.9336V8.66645C45.8469 8.66645 43.9389 10.5816 43.9389 12.936H48.2061H52.4732C52.4732 15.2878 50.5674 17.2007 48.2085 17.2007V12.9336ZM170.034 12.936H174.301C174.301 10.578 172.39 8.66645 170.032 8.66645V12.9336V17.2007C167.676 17.2007 165.767 15.2914 165.767 12.936H170.034ZM4.29199 7.86171H8.55913C8.55913 9.62921 7.12628 11.0621 5.35878 11.0621V6.79492V2.52778C2.41293 2.52778 0.0248528 4.91586 0.0248528 7.86171H4.29199ZM188.841 63.4736V59.2065C190.609 59.2065 192.042 60.6393 192.042 62.4068H187.774H183.507C183.507 65.3527 185.895 67.7408 188.841 67.7408V63.4736ZM5.3589 12.97L5.61162 8.71039C7.11239 8.79943 8.55913 10.0401 8.55913 11.8717H4.29199H0.0248528C0.0248528 14.8817 2.42916 17.0709 5.10619 17.2297L5.3589 12.97ZM196.209 62.4068H191.942C191.942 60.6393 193.375 59.2065 195.142 59.2065V63.4736V67.7408C198.088 67.7408 200.476 65.3527 200.476 62.4068H196.209ZM170.037 12.9385L170.037 8.67134C172.358 8.67165 174.301 10.5472 174.301 12.936H170.034H165.767C165.767 15.3275 167.712 17.2053 170.036 17.2056L170.037 12.9385ZM23.099 63.4736V59.2065C24.8665 59.2065 26.2994 60.6393 26.2994 62.4068H22.0322H17.7651C17.7651 65.3527 20.1532 67.7408 23.099 67.7408V63.4736ZM212.882 12.97L213.135 17.2297C215.812 17.0709 218.216 14.8817 218.216 11.8717H213.949H209.682C209.682 10.04 211.129 8.7994 212.63 8.71038L212.882 12.97Z" fill="#400500" mask="url(#path-9-outside-2_450_11683)"/>
+<mask id="path-11-outside-3_450_11683" maskUnits="userSpaceOnUse" x="2.26562" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="2.26562" y="2.36035" width="213" height="63"/>
+<path d="M213.949 12.9385C204.152 12.9385 196.209 20.8804 196.209 30.6777V63.4736H187.774V30.6777C187.774 20.8804 179.832 12.9385 170.034 12.9385V12.9336H48.2061V12.9385C38.4088 12.9387 30.467 20.8805 30.4668 30.6777V63.4736H22.0322V30.6777C22.032 20.8804 14.0893 12.9386 4.29199 12.9385V6.79492H213.949V12.9385ZM213.951 5.86328H4.26562V4.36035H213.951V5.86328Z"/>
+</mask>
+<path d="M213.949 12.9385V14.0053C214.538 14.0053 215.016 13.5276 215.016 12.9385H213.949ZM196.209 30.6777L195.142 30.6777V30.6777H196.209ZM196.209 63.4736V64.5404C196.798 64.5404 197.276 64.0628 197.276 63.4736H196.209ZM187.774 63.4736H186.708C186.708 64.0628 187.185 64.5404 187.774 64.5404V63.4736ZM187.774 30.6777H188.841V30.6777L187.774 30.6777ZM170.034 12.9385H168.967C168.967 13.5276 169.445 14.0053 170.034 14.0053V12.9385ZM170.034 12.9336H171.101C171.101 12.3444 170.623 11.8668 170.034 11.8668V12.9336ZM48.2061 12.9336V11.8668C47.6169 11.8668 47.1393 12.3444 47.1393 12.9336H48.2061ZM48.2061 12.9385L48.2061 14.0053C48.7952 14.0052 49.2728 13.5276 49.2728 12.9385H48.2061ZM30.4668 30.6777L29.4 30.6777V30.6777H30.4668ZM30.4668 63.4736V64.5404C31.056 64.5404 31.5336 64.0628 31.5336 63.4736H30.4668ZM22.0322 63.4736H20.9654C20.9654 64.0628 21.4431 64.5404 22.0322 64.5404V63.4736ZM22.0322 30.6777H23.099L23.099 30.6777L22.0322 30.6777ZM4.29199 12.9385H3.22521C3.22521 13.5276 3.70281 14.0053 4.29198 14.0053L4.29199 12.9385ZM4.29199 6.79492V5.72814C3.70282 5.72814 3.22521 6.20575 3.22521 6.79492H4.29199ZM213.949 6.79492H215.016C215.016 6.20575 214.538 5.72814 213.949 5.72814V6.79492ZM213.951 5.86328V6.93007C214.54 6.93007 215.018 6.45245 215.018 5.86328H213.951ZM4.26562 5.86328H3.19884C3.19884 6.45245 3.67646 6.93007 4.26562 6.93007V5.86328ZM4.26562 4.36035V3.29357C3.67646 3.29357 3.19884 3.77118 3.19884 4.36035H4.26562ZM213.951 4.36035H215.018C215.018 3.77118 214.54 3.29357 213.951 3.29357V4.36035ZM213.949 12.9385V11.8717C203.563 11.8717 195.142 20.2911 195.142 30.6777L196.209 30.6777L197.276 30.6778C197.276 21.4696 204.741 14.0053 213.949 14.0053V12.9385ZM196.209 30.6777H195.142V63.4736H196.209H197.276V30.6777H196.209ZM196.209 63.4736V62.4068H187.774V63.4736V64.5404H196.209V63.4736ZM187.774 63.4736H188.841V30.6777H187.774H186.708V63.4736H187.774ZM187.774 30.6777L188.841 30.6777C188.841 20.2911 180.421 11.8717 170.034 11.8717V12.9385V14.0053C179.242 14.0053 186.707 21.4696 186.708 30.6778L187.774 30.6777ZM170.034 12.9385H171.101V12.9336H170.034H168.967V12.9385H170.034ZM170.034 12.9336V11.8668H48.2061V12.9336V14.0004H170.034V12.9336ZM48.2061 12.9336H47.1393V12.9385H48.2061H49.2728V12.9336H48.2061ZM48.2061 12.9385L48.206 11.8717C37.8196 11.8719 29.4002 20.2913 29.4 30.6777L30.4668 30.6777L31.5336 30.6778C31.5338 21.4697 38.998 14.0054 48.2061 14.0053L48.2061 12.9385ZM30.4668 30.6777H29.4V63.4736H30.4668H31.5336V30.6777H30.4668ZM30.4668 63.4736V62.4068H22.0322V63.4736V64.5404H30.4668V63.4736ZM22.0322 63.4736H23.099V30.6777H22.0322H20.9654V63.4736H22.0322ZM22.0322 30.6777L23.099 30.6777C23.0988 20.2912 14.6784 11.8718 4.29201 11.8717L4.29199 12.9385L4.29198 14.0053C13.5002 14.0054 20.9653 21.4697 20.9654 30.6778L22.0322 30.6777ZM4.29199 12.9385H5.35878V6.79492H4.29199H3.22521V12.9385H4.29199ZM4.29199 6.79492V7.86171H213.949V6.79492V5.72814H4.29199V6.79492ZM213.949 6.79492H212.882V12.9385H213.949H215.016V6.79492H213.949ZM213.951 5.86328V4.7965H4.26562V5.86328V6.93007H213.951V5.86328ZM4.26562 5.86328H5.33241V4.36035H4.26562H3.19884V5.86328H4.26562ZM4.26562 4.36035V5.42714H213.951V4.36035V3.29357H4.26562V4.36035ZM213.951 4.36035H212.884V5.86328H213.951H215.018V4.36035H213.951Z" fill="#040404" fill-opacity="0.5" mask="url(#path-11-outside-3_450_11683)"/>
+<g filter="url(#filter3_f_450_11683)" style="mix-blend-mode:color-dodge">
+<path d="M202.689 65.6075C208.876 65.6075 213.891 70.6224 213.891 76.8087V94.4102H3.73438V76.8087C3.73438 70.6224 8.74927 65.6075 14.9355 65.6075H202.689Z" stroke="url(#paint6_linear_450_11683)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_11683)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_11683" maskUnits="userSpaceOnUse" x="2.26562" y="3.33496" width="212" height="61" fill="black">
+<rect fill="white" x="2.26562" y="3.33496" width="212" height="61"/>
+<path d="M212.29 5.33496V11.4834C202.569 11.4836 194.688 19.3649 194.688 29.0859V62.9404H186.319V29.0859C186.319 19.7628 179.071 12.1337 169.902 11.5244H46.6543C37.4854 12.1336 30.2363 19.7628 30.2363 29.0859V62.9404H21.8682V29.0859C21.8682 19.3647 13.9868 11.4834 4.26562 11.4834V5.33496H212.29Z"/>
+</mask>
+<path d="M212.29 5.33496H213.357V4.26818H212.29V5.33496ZM212.29 11.4834L212.29 12.5502L213.357 12.5502V11.4834H212.29ZM194.688 62.9404V64.0072H195.755V62.9404H194.688ZM186.319 62.9404H185.253V64.0072H186.319V62.9404ZM169.902 11.5244L169.973 10.46L169.938 10.4576H169.902V11.5244ZM46.6543 11.5244V10.4576H46.6189L46.5836 10.46L46.6543 11.5244ZM30.2363 62.9404V64.0072H31.3031V62.9404H30.2363ZM21.8682 62.9404H20.8014V64.0072H21.8682V62.9404ZM4.26562 11.4834H3.19884V12.5502H4.26562V11.4834ZM4.26562 5.33496V4.26818H3.19884V5.33496H4.26562ZM212.29 5.33496H211.223V11.4834H212.29H213.357V5.33496H212.29ZM212.29 11.4834L212.29 10.4166C201.98 10.4168 193.622 18.7757 193.622 29.0859H194.688H195.755C195.755 19.954 203.158 12.5504 212.29 12.5502L212.29 11.4834ZM194.688 29.0859H193.622V62.9404H194.688H195.755V29.0859H194.688ZM194.688 62.9404V61.8736H186.319V62.9404V64.0072H194.688V62.9404ZM186.319 62.9404H187.386V29.0859H186.319H185.253V62.9404H186.319ZM186.319 29.0859H187.386C187.386 19.1973 179.699 11.1062 169.973 10.46L169.902 11.5244L169.832 12.5889C178.444 13.1611 185.253 20.3284 185.253 29.0859H186.319ZM169.902 11.5244V10.4576H46.6543V11.5244V12.5912H169.902V11.5244ZM46.6543 11.5244L46.5836 10.46C36.8581 11.1061 29.1695 19.1972 29.1695 29.0859H30.2363H31.3031C31.3031 20.3284 38.1127 13.1611 46.725 12.5889L46.6543 11.5244ZM30.2363 29.0859H29.1695V62.9404H30.2363H31.3031V29.0859H30.2363ZM30.2363 62.9404V61.8736H21.8682V62.9404V64.0072H30.2363V62.9404ZM21.8682 62.9404H22.9349V29.0859H21.8682H20.8014V62.9404H21.8682ZM21.8682 29.0859H22.9349C22.9349 18.7756 14.576 10.4166 4.26562 10.4166V11.4834V12.5502C13.3977 12.5502 20.8014 19.9539 20.8014 29.0859H21.8682ZM4.26562 11.4834H5.33241V5.33496H4.26562H3.19884V11.4834H4.26562ZM4.26562 5.33496V6.40175H212.29V5.33496V4.26818H4.26562V5.33496Z" fill="url(#paint7_linear_450_11683)" mask="url(#path-14-outside-4_450_11683)"/>
+</g>
+<g filter="url(#filter5_f_450_11683)" style="mix-blend-mode:plus-lighter">
+<mask id="path-16-outside-5_450_11683" maskUnits="userSpaceOnUse" x="3.33398" y="3.33496" width="211" height="61" fill="black">
+<rect fill="white" x="3.33398" y="3.33496" width="211" height="61"/>
+<path d="M211.227 5.33496C211.816 5.33496 212.294 5.81258 212.294 6.40175V10.4166C212.294 11.0058 211.815 11.48 211.227 11.5154C202.053 12.0668 194.782 19.6821 194.782 28.9951V61.8736C194.782 62.4628 194.305 62.9404 193.715 62.9404H187.523C186.934 62.9404 186.456 62.4628 186.456 61.8736V28.9951C186.456 19.7198 179.245 12.1305 170.123 11.5244H47.5049C38.383 12.1304 31.1719 19.7198 31.1719 28.9951V61.8736C31.1719 62.4628 30.6943 62.9404 30.1051 62.9404H23.9125C23.3233 62.9404 22.8457 62.4628 22.8457 61.8736V28.9951C22.8456 19.6821 15.5754 12.0668 6.40093 11.5154C5.81282 11.48 5.33398 11.0058 5.33398 10.4166V6.40175C5.33398 5.81258 5.8116 5.33496 6.40077 5.33496H211.227Z"/>
+</mask>
+<path d="M194.782 28.9951L193.715 28.9951V28.9951H194.782ZM186.456 28.9951H187.523V28.9951L186.456 28.9951ZM170.123 11.5244L170.194 10.46L170.158 10.4576H170.123V11.5244ZM47.5049 11.5244V10.4576H47.4695L47.4342 10.46L47.5049 11.5244ZM31.1719 28.9951L30.1051 28.9951V28.9951H31.1719ZM22.8457 28.9951H23.9125L23.9125 28.9951L22.8457 28.9951ZM212.294 6.40175H211.227V10.4166H212.294H213.361V6.40175H212.294ZM211.227 11.5154L211.163 10.4505C201.429 11.0356 193.716 19.1144 193.715 28.9951L194.782 28.9951L195.849 28.9951C195.849 20.2498 202.676 13.098 211.291 12.5802L211.227 11.5154ZM194.782 28.9951H193.715V61.8736H194.782H195.849V28.9951H194.782ZM193.715 62.9404V61.8736H187.523V62.9404V64.0072H193.715V62.9404ZM186.456 61.8736H187.523V28.9951H186.456H185.389V61.8736H186.456ZM186.456 28.9951L187.523 28.9951C187.523 19.1542 179.872 11.103 170.194 10.46L170.123 11.5244L170.052 12.5889C178.618 13.1579 185.389 20.2854 185.389 28.9951L186.456 28.9951ZM170.123 11.5244V10.4576H47.5049V11.5244V12.5912H170.123V11.5244ZM47.5049 11.5244L47.4342 10.46C37.7557 11.103 30.1052 19.1542 30.1051 28.9951L31.1719 28.9951L32.2387 28.9951C32.2387 20.2854 39.0103 13.1579 47.5756 12.5889L47.5049 11.5244ZM31.1719 28.9951H30.1051V61.8736H31.1719H32.2387V28.9951H31.1719ZM30.1051 62.9404V61.8736H23.9125V62.9404V64.0072H30.1051V62.9404ZM22.8457 61.8736H23.9125V28.9951H22.8457H21.7789V61.8736H22.8457ZM22.8457 28.9951L23.9125 28.9951C23.9124 19.1144 16.1993 11.0356 6.46493 10.4505L6.40093 11.5154L6.33693 12.5802C14.9515 13.098 21.7789 20.2498 21.7789 28.9951L22.8457 28.9951ZM5.33398 10.4166H6.40077V6.40175H5.33398H4.2672V10.4166H5.33398ZM6.40077 5.33496V6.40175H211.227V5.33496V4.26818H6.40077V5.33496ZM5.33398 6.40175H6.40077V6.40175V5.33496V4.26818C5.22243 4.26818 4.2672 5.22341 4.2672 6.40175H5.33398ZM23.9125 62.9404V61.8736H23.9125H22.8457H21.7789C21.7789 63.052 22.7341 64.0072 23.9125 64.0072V62.9404ZM31.1719 61.8736H30.1051H30.1051V62.9404V64.0072C31.2834 64.0072 32.2387 63.052 32.2387 61.8736H31.1719ZM187.523 62.9404V61.8736V61.8736H186.456H185.389C185.389 63.052 186.344 64.0072 187.523 64.0072V62.9404ZM194.782 61.8736H193.715V61.8736V62.9404V64.0072C194.894 64.0072 195.849 63.052 195.849 61.8736H194.782ZM6.40093 11.5154L6.46493 10.4505C6.44001 10.449 6.41994 10.4383 6.4078 10.426C6.40231 10.4204 6.40063 10.4166 6.40051 10.4163C6.40046 10.4162 6.40061 10.4165 6.40073 10.4171C6.40087 10.4178 6.40077 10.4178 6.40077 10.4166H5.33398H4.2672C4.2672 11.6112 5.22751 12.5136 6.33693 12.5802L6.40093 11.5154ZM212.294 10.4166H211.227C211.227 10.4178 211.227 10.4178 211.227 10.4171C211.227 10.4165 211.227 10.4162 211.227 10.4163C211.227 10.4166 211.226 10.4204 211.22 10.426C211.208 10.4383 211.188 10.449 211.163 10.4505L211.227 11.5154L211.291 12.5802C212.4 12.5136 213.361 11.6112 213.361 10.4166H212.294ZM212.294 6.40175H213.361C213.361 5.22341 212.406 4.26818 211.227 4.26818V5.33496V6.40175V6.40175H212.294Z" fill="url(#paint8_linear_450_11683)" mask="url(#path-16-outside-5_450_11683)"/>
+</g>
+<g filter="url(#filter6_f_450_11683)">
+<path d="M2.13281 13.8682V4.26712C2.13281 3.08878 3.08804 2.13354 4.26638 2.13354H214.423C215.601 2.13354 216.557 3.08878 216.557 4.26711V13.8682" stroke="url(#paint9_linear_450_11683)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_11683)">
+<path d="M33.0703 62.9403V26.9541C33.4259 22.5922 36.8041 15.4684 46.9385 13.8682H168.019C177.62 14.4016 184.554 18.2302 184.554 31.3161V62.9403" stroke="url(#paint10_linear_450_11683)" stroke-width="1.06678"/>
+</g>
+<line x1="18.1914" y1="64.1475" x2="200.106" y2="64.1475" stroke="#400500" stroke-width="1.06678"/>
+<g filter="url(#filter8_f_450_11683)">
+<path d="M22.9355 45.8718V62.4069H29.8696V45.8718" stroke="url(#paint11_linear_450_11683)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_11683" x="34.3613" y="17.1808" width="150.641" height="49.5774" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11683"/>
+</filter>
+<filter id="filter1_ii_450_11683" x="5.56445" y="66.2541" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0.556863 0 0 0 0 0.266667 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11683"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.322115 0 0 0 0 0.142276 0 0 0 0 0.0263267 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_11683" result="effect2_innerShadow_450_11683"/>
+</filter>
+<filter id="filter2_f_450_11683" x="6.40001" y="68.2742" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11683"/>
+</filter>
+<filter id="filter3_f_450_11683" x="2.13439" y="64.0071" width="213.356" height="32.0035" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11683"/>
+</filter>
+<filter id="filter4_f_450_11683" x="2.13243" y="3.2014" width="212.292" height="61.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11683"/>
+</filter>
+<filter id="filter5_f_450_11683" x="3.20079" y="3.2014" width="211.227" height="61.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11683"/>
+</filter>
+<filter id="filter6_f_450_11683" x="0.532825" y="0.533374" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11683"/>
+</filter>
+<filter id="filter7_f_450_11683" x="31.4703" y="12.2681" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11683"/>
+</filter>
+<filter id="filter8_f_450_11683" x="21.3356" y="44.805" width="10.1336" height="19.2021" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11683"/>
+</filter>
+<linearGradient id="paint0_linear_450_11683" x1="109.149" y1="17.1808" x2="109.149" y2="65.6915" gradientUnits="userSpaceOnUse">
+<stop stop-color="#442111"/>
+<stop offset="0.05" stop-color="#522510"/>
+<stop offset="1" stop-color="#090504"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_11683" x1="31.6904" y1="34.5814" x2="183.936" y2="34.5814" gradientUnits="userSpaceOnUse">
+<stop stop-color="#803414"/>
+<stop offset="0.077962" stop-color="#803414" stop-opacity="0.25"/>
+<stop offset="0.939742" stop-color="#803414" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#803414"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_11683" x1="109.104" y1="68.3877" x2="109.104" y2="91.8366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AD571E"/>
+<stop offset="1" stop-color="#88441A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_11683" x1="109.104" y1="68.3877" x2="109.104" y2="91.8366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AD571E"/>
+<stop offset="1" stop-color="#88441A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_11683" x1="109.344" y1="70.4077" x2="109.344" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC893"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_11683" x1="4.26562" y1="33.9171" x2="213.951" y2="33.9171" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAC63"/>
+<stop offset="0.144231" stop-color="#FF7E0D"/>
+<stop offset="0.889423" stop-color="#FF7E0D"/>
+<stop offset="0.961538" stop-color="#EB5200"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_11683" x1="108.812" y1="66.1407" x2="108.812" y2="93.8771" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDF7CC"/>
+<stop offset="1" stop-color="#FDF7CC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_11683" x1="108.278" y1="5.33496" x2="108.278" y2="14.4016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5A76C"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_11683" x1="18.6006" y1="12.268" x2="45.5373" y2="15.065" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5A76C"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_11683" x1="109.345" y1="2.13354" x2="109.345" y2="13.8682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C17300"/>
+<stop offset="1" stop-color="#C17300" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_11683" x1="108.812" y1="13.8682" x2="108.812" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D59628"/>
+<stop offset="1" stop-color="#AD6E00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_11683" x1="25.0691" y1="61.8735" x2="24.5357" y2="36.2707" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC034"/>
+<stop offset="1" stop-color="#FFC034" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_11683">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_11683">
+<rect width="216.389" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/중앙.svg
new file mode 100644
index 0000000..2615019
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교량/실사화/중앙.svg
@@ -0,0 +1,173 @@
+<svg width="84" height="95" viewBox="0 0 84 95" fill="none" shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_11720)">
+<g clip-path="url(#clip1_450_11720)">
+<g filter="url(#filter0_i_450_11720)">
+<path d="M-449.396 29.9823C-449.396 22.9122 -443.665 17.1808 -436.595 17.1808H517.713C524.783 17.1808 530.514 22.9122 530.514 29.9823V65.6915H-449.396V29.9823Z" fill="url(#paint0_linear_450_11720)"/>
+<path d="M-449.396 29.9823C-449.396 22.9122 -443.665 17.1808 -436.595 17.1808H517.713C524.783 17.1808 530.514 22.9122 530.514 29.9823V65.6915H-449.396V29.9823Z" fill="url(#paint1_linear_450_11720)"/>
+</g>
+<path d="M-436.595 17.7141H517.713C524.488 17.7141 529.981 23.2072 529.981 29.9826V65.1584H-448.863V29.9826C-448.863 23.2072 -443.37 17.7141 -436.595 17.7141Z" stroke="black" stroke-width="1.06678"/>
+<path d="M703.07 66.2539C708.962 66.2539 713.738 71.0302 713.738 76.9219V93.9707H-633.2V76.9219C-633.2 71.0303 -628.424 66.254 -622.532 66.2539H703.07Z" fill="url(#paint2_linear_450_11720)" stroke="#400500" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_11720)">
+<path d="M-631.066 76.922C-631.066 72.2086 -627.245 68.3877 -622.532 68.3877H703.07C707.784 68.3877 711.605 72.2086 711.605 76.922V90.7699C711.605 91.359 711.127 91.8366 710.538 91.8366H-630C-630.589 91.8366 -631.066 91.359 -631.066 90.7699V76.922Z" fill="url(#paint3_linear_450_11720)"/>
+</g>
+<path d="M703.07 67.8545C708.078 67.8545 712.138 71.914 712.138 76.9219V90.7695C712.138 91.6532 711.422 92.37 710.538 92.3701H-630C-630.884 92.3699 -631.6 91.6532 -631.6 90.7695V76.9219C-631.6 71.914 -627.54 67.8545 -622.532 67.8545H703.07Z" stroke="black" stroke-opacity="0.76" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_11720)" style="mix-blend-mode:plus-lighter">
+<path d="M695.89 69.8745C699.719 69.8747 702.823 72.9788 702.823 76.8081V92.2769H-619.137V76.8081C-619.137 72.9788 -616.032 69.8747 -612.203 69.8745H695.89Z" stroke="url(#paint4_linear_450_11720)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_11720" maskUnits="userSpaceOnUse" x="-651.562" y="-0.639648" width="1383" height="69" fill="black">
+<rect fill="white" x="-651.562" y="-0.639648" width="1383" height="69"/>
+<path d="M727.146 12.9385H661.462C633.552 12.9385 610.926 35.5636 610.926 63.4736H555.668C555.668 35.5637 533.043 12.9386 505.133 12.9385H439.447V12.9336H-358.697V12.9385H-424.382C-452.292 12.9385 -474.918 35.5636 -474.918 63.4736H-530.176C-530.176 35.5637 -552.801 12.9386 -580.711 12.9385H-646.396V6.79492H727.146V12.9385ZM727.153 5.86328H-646.562V4.36035H727.153V5.86328Z"/>
+</mask>
+<path d="M727.146 12.9385H661.462C633.552 12.9385 610.926 35.5636 610.926 63.4736H555.668C555.668 35.5637 533.043 12.9386 505.133 12.9385H439.447V12.9336H-358.697V12.9385H-424.382C-452.292 12.9385 -474.918 35.5636 -474.918 63.4736H-530.176C-530.176 35.5637 -552.801 12.9386 -580.711 12.9385H-646.396V6.79492H727.146V12.9385ZM727.153 5.86328H-646.562V4.36035H727.153V5.86328Z" fill="#FF7700"/>
+<path d="M727.146 12.9385V17.2056C729.503 17.2056 731.414 15.2952 731.414 12.9385H727.146ZM610.926 63.4736V67.7408C613.282 67.7408 615.193 65.8303 615.193 63.4736L610.926 63.4736ZM555.668 63.4736L551.401 63.4736C551.401 65.8303 553.311 67.7408 555.668 67.7408V63.4736ZM505.133 12.9385V8.67134V8.67134V12.9385ZM439.447 12.9385H435.18C435.18 15.2952 437.091 17.2056 439.447 17.2056V12.9385ZM439.447 12.9336H443.714C443.714 10.5769 441.804 8.66645 439.447 8.66645V12.9336ZM-358.697 12.9336V8.66645C-361.054 8.66645 -362.964 10.5769 -362.964 12.9336H-358.697ZM-358.697 12.9385V17.2056C-356.341 17.2056 -354.43 15.2952 -354.43 12.9385H-358.697ZM-474.918 63.4736V67.7408C-472.561 67.7408 -470.651 65.8303 -470.651 63.4736L-474.918 63.4736ZM-530.176 63.4736L-534.443 63.4736C-534.443 65.8303 -532.532 67.7408 -530.176 67.7408V63.4736ZM-580.711 12.9385L-580.711 8.67134H-580.711V12.9385ZM-646.396 12.9385H-650.664C-650.664 15.2952 -648.753 17.2056 -646.396 17.2056V12.9385ZM-646.396 6.79492V2.52778C-648.753 2.52778 -650.664 4.43825 -650.664 6.79492H-646.396ZM727.146 6.79492H731.414C731.414 4.43825 729.503 2.52778 727.146 2.52778V6.79492ZM727.153 5.86328V10.1304C729.51 10.1304 731.42 8.21996 731.42 5.86328H727.153ZM-646.562 5.86328H-650.83C-650.83 8.21996 -648.919 10.1304 -646.562 10.1304V5.86328ZM-646.562 4.36035V0.0932121C-648.919 0.0932121 -650.83 2.00368 -650.83 4.36035L-646.562 4.36035ZM727.153 4.36035H731.42C731.42 2.00368 729.51 0.0932121 727.153 0.0932121V4.36035ZM727.146 12.9385V8.67134H661.462V12.9385V17.2056H727.146V12.9385ZM661.462 12.9385V8.67134C631.195 8.67134 606.659 33.2068 606.659 63.4736L610.926 63.4736L615.193 63.4736C615.193 37.9204 635.908 17.2056 661.462 17.2056V12.9385ZM610.926 63.4736V59.2065H555.668V63.4736V67.7408H610.926V63.4736ZM555.668 63.4736L559.935 63.4736C559.935 33.207 535.399 8.67147 505.133 8.67134V12.9385V17.2056C530.686 17.2057 551.401 37.9204 551.401 63.4736L555.668 63.4736ZM505.133 12.9385V8.67134H439.447V12.9385V17.2056H505.133V12.9385ZM439.447 12.9385H443.714V12.9336H439.447H435.18V12.9385H439.447ZM439.447 12.9336V8.66645H-358.697V12.9336V17.2007H439.447V12.9336ZM-358.697 12.9336H-362.964V12.9385H-358.697H-354.43V12.9336H-358.697ZM-358.697 12.9385V8.67134H-424.382V12.9385V17.2056H-358.697V12.9385ZM-424.382 12.9385V8.67134C-454.648 8.67134 -479.185 33.2068 -479.185 63.4736L-474.918 63.4736L-470.651 63.4736C-470.651 37.9204 -449.935 17.2056 -424.382 17.2056V12.9385ZM-474.918 63.4736V59.2065H-530.176V63.4736V67.7408H-474.918V63.4736ZM-530.176 63.4736L-525.909 63.4736C-525.909 33.207 -550.444 8.67148 -580.711 8.67134L-580.711 12.9385L-580.711 17.2056C-555.158 17.2057 -534.443 37.9204 -534.443 63.4736L-530.176 63.4736ZM-580.711 12.9385V8.67134H-646.396V12.9385V17.2056H-580.711V12.9385ZM-646.396 12.9385H-642.129V6.79492H-646.396H-650.664V12.9385H-646.396ZM-646.396 6.79492V11.0621H727.146V6.79492V2.52778H-646.396V6.79492ZM727.146 6.79492H722.879V12.9385H727.146H731.414V6.79492H727.146ZM727.153 5.86328V1.59614H-646.562V5.86328V10.1304H727.153V5.86328ZM-646.562 5.86328H-642.295V4.36035H-646.562H-650.83V5.86328H-646.562ZM-646.562 4.36035V8.62749H727.153V4.36035V0.0932121H-646.562V4.36035ZM727.153 4.36035H722.886V5.86328H727.153H731.42V4.36035H727.153Z" fill="#400500" mask="url(#path-7-outside-1_450_11720)"/>
+<mask id="path-9-outside-2_450_11720" maskUnits="userSpaceOnUse" x="-651.562" y="-0.639648" width="1383" height="69" fill="black">
+<rect fill="white" x="-651.562" y="-0.639648" width="1383" height="69"/>
+<path d="M727.146 11.8717C727.146 12.4609 726.669 12.9385 726.08 12.9385H661.462C633.91 12.9385 611.507 34.9874 610.937 62.4033C610.925 62.9923 610.448 63.4736 609.859 63.4736H556.735C556.146 63.4736 555.669 62.9923 555.657 62.4033C555.087 34.9875 532.685 12.9386 505.133 12.9385H439.45C439.448 12.9385 439.447 12.9374 439.447 12.936C439.447 12.9347 439.446 12.9336 439.445 12.9336H-358.695C-358.696 12.9336 -358.697 12.9347 -358.697 12.936C-358.697 12.9374 -358.698 12.9385 -358.7 12.9385H-424.382C-451.934 12.9385 -474.337 34.9874 -474.907 62.4033C-474.919 62.9923 -475.396 63.4736 -475.985 63.4736H-529.109C-529.698 63.4736 -530.175 62.9923 -530.187 62.4033C-530.757 34.9875 -553.159 12.9386 -580.711 12.9385H-645.33C-645.919 12.9385 -646.396 12.4609 -646.396 11.8717V7.86171C-646.396 7.27254 -645.919 6.79492 -645.33 6.79492H726.08C726.669 6.79492 727.146 7.27254 727.146 7.86171V11.8717ZM727.153 5.11182C727.153 5.52684 726.817 5.86328 726.402 5.86328H-645.811C-646.226 5.86328 -646.562 5.52684 -646.562 5.11182C-646.562 4.69679 -646.226 4.36035 -645.811 4.36035H726.402C726.817 4.36035 727.153 4.69679 727.153 5.11182Z"/>
+</mask>
+<path d="M727.146 11.8717C727.146 12.4609 726.669 12.9385 726.08 12.9385H661.462C633.91 12.9385 611.507 34.9874 610.937 62.4033C610.925 62.9923 610.448 63.4736 609.859 63.4736H556.735C556.146 63.4736 555.669 62.9923 555.657 62.4033C555.087 34.9875 532.685 12.9386 505.133 12.9385H439.45C439.448 12.9385 439.447 12.9374 439.447 12.936C439.447 12.9347 439.446 12.9336 439.445 12.9336H-358.695C-358.696 12.9336 -358.697 12.9347 -358.697 12.936C-358.697 12.9374 -358.698 12.9385 -358.7 12.9385H-424.382C-451.934 12.9385 -474.337 34.9874 -474.907 62.4033C-474.919 62.9923 -475.396 63.4736 -475.985 63.4736H-529.109C-529.698 63.4736 -530.175 62.9923 -530.187 62.4033C-530.757 34.9875 -553.159 12.9386 -580.711 12.9385H-645.33C-645.919 12.9385 -646.396 12.4609 -646.396 11.8717V7.86171C-646.396 7.27254 -645.919 6.79492 -645.33 6.79492H726.08C726.669 6.79492 727.146 7.27254 727.146 7.86171V11.8717ZM727.153 5.11182C727.153 5.52684 726.817 5.86328 726.402 5.86328H-645.811C-646.226 5.86328 -646.562 5.52684 -646.562 5.11182C-646.562 4.69679 -646.226 4.36035 -645.811 4.36035H726.402C726.817 4.36035 727.153 4.69679 727.153 5.11182Z" fill="url(#paint5_linear_450_11720)"/>
+<path d="M505.133 12.9385V8.67134V8.67134V12.9385ZM-580.711 12.9385L-580.711 8.67134H-580.711V12.9385ZM-474.907 62.4033L-479.173 62.3146L-474.907 62.4033ZM555.657 62.4033L551.391 62.4919L555.657 62.4033ZM610.937 62.4033L606.671 62.3146L610.937 62.4033ZM-530.187 62.4033L-534.453 62.4919L-530.187 62.4033ZM726.08 12.9385V8.67134H661.462V12.9385V17.2056H726.08V12.9385ZM661.462 12.9385V8.67134C631.583 8.67134 607.289 32.5819 606.671 62.3146L610.937 62.4033L615.203 62.4919C615.725 37.393 636.236 17.2056 661.462 17.2056V12.9385ZM609.859 63.4736V59.2065H556.735V63.4736V67.7408H609.859V63.4736ZM555.657 62.4033L559.923 62.3146C559.305 32.5821 535.012 8.67147 505.133 8.67134V12.9385V17.2056C530.358 17.2057 550.869 37.3929 551.391 62.4919L555.657 62.4033ZM505.133 12.9385V8.67134H439.45V12.9385V17.2056H505.133V12.9385ZM439.445 12.9336V8.66645H-358.695V12.9336V17.2007H439.445V12.9336ZM-358.7 12.9385V8.67134H-424.382V12.9385V17.2056H-358.7V12.9385ZM-424.382 12.9385V8.67134C-454.261 8.67134 -478.555 32.5819 -479.173 62.3146L-474.907 62.4033L-470.641 62.4919C-470.119 37.393 -449.607 17.2056 -424.382 17.2056V12.9385ZM-475.985 63.4736V59.2065H-529.109V63.4736V67.7408H-475.985V63.4736ZM-530.187 62.4033L-525.921 62.3146C-526.538 32.5821 -550.832 8.67148 -580.711 8.67134L-580.711 12.9385L-580.711 17.2056C-555.486 17.2057 -534.975 37.393 -534.453 62.4919L-530.187 62.4033ZM-580.711 12.9385V8.67134H-645.33V12.9385V17.2056H-580.711V12.9385ZM-646.396 11.8717H-642.129V7.86171H-646.396H-650.664V11.8717H-646.396ZM-645.33 6.79492V11.0621H726.08V6.79492V2.52778H-645.33V6.79492ZM727.146 7.86171H722.879V11.8717H727.146H731.414V7.86171H727.146ZM726.402 5.86328V1.59614H-645.811V5.86328V10.1304H726.402V5.86328ZM-645.811 4.36035V8.62749H726.402V4.36035V0.0932121H-645.811V4.36035ZM726.402 4.36035V8.62749C724.46 8.62749 722.886 7.05368 722.886 5.11182H727.153H731.42C731.42 2.33991 729.173 0.0932121 726.402 0.0932121V4.36035ZM-646.562 5.11182H-642.295C-642.295 7.05347 -643.869 8.62749 -645.811 8.62749V4.36035V0.0932121C-648.583 0.0932121 -650.83 2.34012 -650.83 5.11182H-646.562ZM-645.811 5.86328V1.59614C-643.87 1.59614 -642.295 3.16995 -642.295 5.11182H-646.562H-650.83C-650.83 7.88372 -648.582 10.1304 -645.811 10.1304V5.86328ZM726.402 5.86328V10.1304C729.174 10.1304 731.42 7.88351 731.42 5.11182H727.153H722.886C722.886 3.17016 724.46 1.59614 726.402 1.59614V5.86328ZM726.08 6.79492V11.0621C724.312 11.0621 722.879 9.62909 722.879 7.86171H727.146H731.414C731.414 4.91599 729.026 2.52778 726.08 2.52778V6.79492ZM-474.907 62.4033L-479.173 62.3146C-479.139 60.6582 -477.793 59.2065 -475.985 59.2065V63.4736V67.7408C-472.998 67.7408 -470.7 65.3264 -470.641 62.4919L-474.907 62.4033ZM-358.697 12.936H-362.964C-362.964 10.5807 -361.055 8.67134 -358.7 8.67134V12.9385V17.2056C-356.342 17.2056 -354.43 15.2941 -354.43 12.936H-358.697ZM-358.695 12.9336V8.66645C-361.087 8.66645 -362.964 10.6128 -362.964 12.936H-358.697H-354.43C-354.43 15.2566 -356.305 17.2007 -358.695 17.2007V12.9336ZM439.447 12.936H443.714C443.714 10.578 441.803 8.66645 439.445 8.66645V12.9336V17.2007C437.089 17.2007 435.18 15.2914 435.18 12.936H439.447ZM-646.396 7.86171H-642.129C-642.129 9.62921 -643.562 11.0621 -645.33 11.0621V6.79492V2.52778C-648.276 2.52778 -650.664 4.91586 -650.664 7.86171H-646.396ZM556.735 63.4736V59.2065C558.543 59.2065 559.889 60.6582 559.923 62.3146L555.657 62.4033L551.391 62.4919C551.45 65.3264 553.748 67.7408 556.735 67.7408V63.4736ZM-645.33 12.9385V8.67134C-643.562 8.67134 -642.129 10.1042 -642.129 11.8717H-646.396H-650.664C-650.664 14.8176 -648.276 17.2056 -645.33 17.2056V12.9385ZM610.937 62.4033L606.671 62.3146C606.705 60.6582 608.051 59.2065 609.859 59.2065V63.4736V67.7408C612.846 67.7408 615.144 65.3264 615.203 62.4919L610.937 62.4033ZM439.45 12.9385V8.67134C441.801 8.67134 443.714 10.5769 443.714 12.936H439.447H435.18C435.18 15.2978 437.095 17.2056 439.45 17.2056V12.9385ZM-529.109 63.4736V59.2065C-527.301 59.2065 -525.955 60.6582 -525.921 62.3146L-530.187 62.4033L-534.453 62.4919C-534.394 65.3264 -532.096 67.7408 -529.109 67.7408V63.4736ZM726.08 12.9385V17.2056C729.026 17.2056 731.414 14.8175 731.414 11.8717H727.146H722.879C722.879 10.1042 724.312 8.67134 726.08 8.67134V12.9385Z" fill="#400500" mask="url(#path-9-outside-2_450_11720)"/>
+<mask id="path-11-outside-3_450_11720" maskUnits="userSpaceOnUse" x="-648.562" y="2.36035" width="1377" height="63" fill="black">
+<rect fill="white" x="-648.562" y="2.36035" width="1377" height="63"/>
+<path d="M727.146 12.9385H661.462C633.552 12.9385 610.926 35.5636 610.926 63.4736H555.668C555.668 35.5637 533.043 12.9386 505.133 12.9385H439.447V12.9336H-358.697V12.9385H-424.382C-452.292 12.9385 -474.918 35.5636 -474.918 63.4736H-530.176C-530.176 35.5637 -552.801 12.9386 -580.711 12.9385H-646.396V6.79492H727.146V12.9385ZM727.153 5.86328H-646.562V4.36035H727.153V5.86328Z"/>
+</mask>
+<path d="M727.146 12.9385V14.0053C727.736 14.0053 728.213 13.5276 728.213 12.9385H727.146ZM610.926 63.4736V64.5404C611.515 64.5404 611.993 64.0628 611.993 63.4736H610.926ZM555.668 63.4736H554.601C554.601 64.0628 555.079 64.5404 555.668 64.5404V63.4736ZM505.133 12.9385V11.8717V11.8717V12.9385ZM439.447 12.9385H438.38C438.38 13.5276 438.858 14.0053 439.447 14.0053V12.9385ZM439.447 12.9336H440.514C440.514 12.3444 440.036 11.8668 439.447 11.8668V12.9336ZM-358.697 12.9336V11.8668C-359.286 11.8668 -359.764 12.3444 -359.764 12.9336H-358.697ZM-358.697 12.9385V14.0053C-358.108 14.0053 -357.63 13.5276 -357.63 12.9385H-358.697ZM-474.918 63.4736V64.5404C-474.329 64.5404 -473.851 64.0628 -473.851 63.4736H-474.918ZM-530.176 63.4736H-531.243C-531.243 64.0628 -530.765 64.5404 -530.176 64.5404V63.4736ZM-580.711 12.9385L-580.711 11.8717H-580.711V12.9385ZM-646.396 12.9385H-647.463C-647.463 13.5276 -646.986 14.0053 -646.396 14.0053V12.9385ZM-646.396 6.79492V5.72814C-646.986 5.72814 -647.463 6.20575 -647.463 6.79492H-646.396ZM727.146 6.79492H728.213C728.213 6.20575 727.736 5.72814 727.146 5.72814V6.79492ZM727.153 5.86328V6.93007C727.742 6.93007 728.22 6.45245 728.22 5.86328H727.153ZM-646.562 5.86328H-647.629C-647.629 6.45245 -647.152 6.93007 -646.562 6.93007V5.86328ZM-646.562 4.36035V3.29357C-647.152 3.29357 -647.629 3.77118 -647.629 4.36035H-646.562ZM727.153 4.36035H728.22C728.22 3.77118 727.742 3.29357 727.153 3.29357V4.36035ZM727.146 12.9385V11.8717H661.462V12.9385V14.0053H727.146V12.9385ZM661.462 12.9385V11.8717C632.963 11.8717 609.859 34.9744 609.859 63.4736H610.926H611.993C611.993 36.1528 634.141 14.0053 661.462 14.0053V12.9385ZM610.926 63.4736V62.4068H555.668V63.4736V64.5404H610.926V63.4736ZM555.668 63.4736H556.735C556.735 34.9745 533.632 11.8718 505.133 11.8717V12.9385V14.0053C532.454 14.0054 554.601 36.1529 554.601 63.4736H555.668ZM505.133 12.9385V11.8717H439.447V12.9385V14.0053H505.133V12.9385ZM439.447 12.9385H440.514V12.9336H439.447H438.38V12.9385H439.447ZM439.447 12.9336V11.8668H-358.697V12.9336V14.0004H439.447V12.9336ZM-358.697 12.9336H-359.764V12.9385H-358.697H-357.63V12.9336H-358.697ZM-358.697 12.9385V11.8717H-424.382V12.9385V14.0053H-358.697V12.9385ZM-424.382 12.9385V11.8717C-452.881 11.8717 -475.985 34.9744 -475.985 63.4736H-474.918H-473.851C-473.851 36.1528 -451.703 14.0053 -424.382 14.0053V12.9385ZM-474.918 63.4736V62.4068H-530.176V63.4736V64.5404H-474.918V63.4736ZM-530.176 63.4736H-529.109C-529.109 34.9745 -552.212 11.8718 -580.711 11.8717L-580.711 12.9385L-580.711 14.0053C-553.39 14.0054 -531.243 36.1529 -531.243 63.4736H-530.176ZM-580.711 12.9385V11.8717H-646.396V12.9385V14.0053H-580.711V12.9385ZM-646.396 12.9385H-645.33V6.79492H-646.396H-647.463V12.9385H-646.396ZM-646.396 6.79492V7.86171H727.146V6.79492V5.72814H-646.396V6.79492ZM727.146 6.79492H726.08V12.9385H727.146H728.213V6.79492H727.146ZM727.153 5.86328V4.7965H-646.562V5.86328V6.93007H727.153V5.86328ZM-646.562 5.86328H-645.496V4.36035H-646.562H-647.629V5.86328H-646.562ZM-646.562 4.36035V5.42714H727.153V4.36035V3.29357H-646.562V4.36035ZM727.153 4.36035H726.087V5.86328H727.153H728.22V4.36035H727.153Z" fill="#040404" fill-opacity="0.5" mask="url(#path-11-outside-3_450_11720)"/>
+<g filter="url(#filter3_f_450_11720)" style="mix-blend-mode:color-dodge">
+<path d="M712.599 65.6074C718.785 65.6074 723.8 70.6223 723.8 76.8086V94.4102H-647.082V76.8086C-647.082 70.6223 -642.067 65.6074 -635.881 65.6074H712.599Z" stroke="url(#paint6_linear_450_11720)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_11720)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_11720" maskUnits="userSpaceOnUse" x="-648.562" y="3.33496" width="1366" height="61" fill="black">
+<rect fill="white" x="-648.562" y="3.33496" width="1366" height="61"/>
+<path d="M716.281 5.33496V11.4834H652.423C624.004 11.4834 600.966 34.5219 600.966 62.9404H546.139C546.139 34.5219 523.1 11.4834 494.682 11.4834H469.869V11.5244H-427.018C-454.484 12.6027 -476.42 35.2098 -476.42 62.9404H-531.247C-531.247 34.5219 -554.286 11.4834 -582.704 11.4834H-646.562V5.33496H716.281Z"/>
+</mask>
+<path d="M716.281 5.33496H717.348V4.26818H716.281V5.33496ZM716.281 11.4834V12.5502H717.348V11.4834H716.281ZM600.966 62.9404V64.0072H602.033V62.9404H600.966ZM546.139 62.9404H545.072V64.0072H546.139V62.9404ZM469.869 11.4834V10.4166H468.802V11.4834H469.869ZM469.869 11.5244V12.5912H470.936V11.5244H469.869ZM-427.018 11.5244V10.4576H-427.039L-427.059 10.4585L-427.018 11.5244ZM-476.42 62.9404V64.0072H-475.353V62.9404H-476.42ZM-531.247 62.9404H-532.314V64.0072H-531.247V62.9404ZM-646.562 11.4834H-647.629V12.5502H-646.562V11.4834ZM-646.562 5.33496V4.26818H-647.629V5.33496H-646.562ZM716.281 5.33496H715.214V11.4834H716.281H717.348V5.33496H716.281ZM716.281 11.4834V10.4166H652.423V11.4834V12.5502H716.281V11.4834ZM652.423 11.4834V10.4166C623.415 10.4166 599.899 33.9327 599.899 62.9404H600.966H602.033C602.033 35.111 624.593 12.5502 652.423 12.5502V11.4834ZM600.966 62.9404V61.8736H546.139V62.9404V64.0072H600.966V62.9404ZM546.139 62.9404H547.205C547.205 33.9327 523.689 10.4166 494.682 10.4166V11.4834V12.5502C522.511 12.5502 545.072 35.111 545.072 62.9404H546.139ZM494.682 11.4834V10.4166H469.869V11.4834V12.5502H494.682V11.4834ZM469.869 11.4834H468.802V11.5244H469.869H470.936V11.4834H469.869ZM469.869 11.5244V10.4576H-427.018V11.5244V12.5912H469.869V11.5244ZM-427.018 11.5244L-427.059 10.4585C-455.096 11.5591 -477.487 34.6346 -477.487 62.9404H-476.42H-475.353C-475.353 35.7849 -453.872 13.6462 -426.976 12.5904L-427.018 11.5244ZM-476.42 62.9404V61.8736H-531.247V62.9404V64.0072H-476.42V62.9404ZM-531.247 62.9404H-530.18C-530.18 33.9327 -553.696 10.4166 -582.704 10.4166V11.4834V12.5502C-554.875 12.5502 -532.314 35.111 -532.314 62.9404H-531.247ZM-582.704 11.4834V10.4166H-646.562V11.4834V12.5502H-582.704V11.4834ZM-646.562 11.4834H-645.496V5.33496H-646.562H-647.629V11.4834H-646.562ZM-646.562 5.33496V6.40175H716.281V5.33496V4.26818H-646.562V5.33496Z" fill="url(#paint7_linear_450_11720)" mask="url(#path-14-outside-4_450_11720)"/>
+</g>
+<g filter="url(#filter5_f_450_11720)" style="mix-blend-mode:plus-lighter">
+<mask id="path-16-outside-5_450_11720" maskUnits="userSpaceOnUse" x="-641.564" y="3.33496" width="1359" height="61" fill="black">
+<rect fill="white" x="-641.564" y="3.33496" width="1359" height="61"/>
+<path d="M715.234 5.33496C715.823 5.33496 716.301 5.81258 716.301 6.40175V10.4166C716.301 11.0058 715.823 11.4834 715.234 11.4834H653.033C624.972 11.4834 602.158 33.9456 601.588 61.87C601.576 62.4591 601.099 62.9404 600.51 62.9404H548.097C547.508 62.9404 547.031 62.4591 547.019 61.87C546.45 33.9457 523.635 11.4835 495.574 11.4834H471.174C471.162 11.4834 471.153 11.4926 471.153 11.5039C471.153 11.5152 471.144 11.5244 471.133 11.5244H-420.893C-448.004 12.5891 -469.727 34.6305 -470.283 61.8702C-470.295 62.4592 -470.772 62.9404 -471.361 62.9404H-523.774C-524.363 62.9404 -524.84 62.4591 -524.852 61.87C-525.422 33.9456 -548.236 11.4835 -576.297 11.4834H-638.498C-639.087 11.4834 -639.564 11.0058 -639.564 10.4166V6.40175C-639.564 5.81258 -639.087 5.33496 -638.498 5.33496H715.234Z"/>
+</mask>
+<path d="M495.574 11.4834V10.4166V10.4166V11.4834ZM-420.893 11.5244V10.4576H-420.914L-420.934 10.4585L-420.893 11.5244ZM-576.297 11.4834L-576.297 10.4166H-576.297V11.4834ZM-524.852 61.87L-525.918 61.8918V61.8918L-524.852 61.87ZM-470.283 61.8702L-471.35 61.8484L-470.283 61.8702ZM547.019 61.87L545.953 61.8918L547.019 61.87ZM601.588 61.87L600.521 61.8482L601.588 61.87ZM716.301 6.40175H715.234V10.4166H716.301H717.368V6.40175H716.301ZM715.234 11.4834V10.4166H653.033V11.4834V12.5502H715.234V11.4834ZM653.033 11.4834V10.4166C624.39 10.4166 601.103 33.3445 600.521 61.8482L601.588 61.87L602.655 61.8918C603.213 34.5467 625.554 12.5502 653.033 12.5502V11.4834ZM600.51 62.9404V61.8736H548.097V62.9404V64.0072H600.51V62.9404ZM547.019 61.87L548.086 61.8482C547.504 33.3445 524.217 10.4167 495.574 10.4166V11.4834V12.5502C523.053 12.5503 545.395 34.5468 545.953 61.8918L547.019 61.87ZM495.574 11.4834V10.4166H471.174V11.4834V12.5502H495.574V11.4834ZM471.133 11.5244V10.4576H-420.893V11.5244V12.5912H471.133V11.5244ZM-420.893 11.5244L-420.934 10.4585C-448.609 11.5452 -470.782 34.0433 -471.35 61.8484L-470.283 61.8702L-469.216 61.8919C-468.672 35.2177 -447.4 13.6329 -420.851 12.5904L-420.893 11.5244ZM-471.361 62.9404V61.8736H-523.774V62.9404V64.0072H-471.361V62.9404ZM-524.852 61.87L-523.785 61.8482C-524.367 33.3445 -547.654 10.4167 -576.297 10.4166L-576.297 11.4834L-576.297 12.5502C-548.818 12.5503 -526.476 34.5467 -525.918 61.8918L-524.852 61.87ZM-576.297 11.4834V10.4166H-638.498V11.4834V12.5502H-576.297V11.4834ZM-639.564 10.4166H-638.498V6.40175H-639.564H-640.631V10.4166H-639.564ZM-638.498 5.33496V6.40175H715.234V5.33496V4.26818H-638.498V5.33496ZM-639.564 6.40175H-638.498V6.40175V5.33496V4.26818C-639.676 4.26818 -640.631 5.22341 -640.631 6.40175H-639.564ZM-523.774 62.9404V61.8736C-523.775 61.8736 -523.775 61.8736 -523.774 61.8738C-523.773 61.874 -523.772 61.8742 -523.772 61.8744C-523.771 61.8746 -523.773 61.874 -523.776 61.8712C-523.778 61.8683 -523.781 61.8646 -523.783 61.8608C-523.784 61.8576 -523.785 61.8539 -523.785 61.8482L-524.852 61.87L-525.918 61.8918C-525.895 63.0425 -524.963 64.0072 -523.774 64.0072V62.9404ZM-470.283 61.8702L-471.35 61.8484C-471.35 61.854 -471.351 61.8578 -471.352 61.8609C-471.354 61.8647 -471.356 61.8683 -471.359 61.8712C-471.362 61.874 -471.364 61.8746 -471.363 61.8744C-471.363 61.8742 -471.362 61.8739 -471.361 61.8738C-471.36 61.8736 -471.36 61.8736 -471.361 61.8736V62.9404V64.0072C-470.172 64.0072 -469.24 63.0429 -469.216 61.8919L-470.283 61.8702ZM471.153 11.5039H470.087C470.087 10.9261 470.555 10.4576 471.133 10.4576V11.5244V12.5912C471.733 12.5912 472.22 12.1044 472.22 11.5039H471.153ZM548.097 62.9404V61.8736C548.096 61.8736 548.097 61.8736 548.097 61.8738C548.098 61.874 548.099 61.8742 548.099 61.8744C548.1 61.8746 548.098 61.874 548.096 61.8712C548.093 61.8683 548.09 61.8646 548.089 61.8608C548.087 61.8576 548.086 61.8539 548.086 61.8482L547.019 61.87L545.953 61.8918C545.976 63.0425 546.909 64.0072 548.097 64.0072V62.9404ZM601.588 61.87L600.521 61.8482C600.521 61.8539 600.52 61.8576 600.519 61.8608C600.517 61.8646 600.515 61.8683 600.512 61.8712C600.509 61.874 600.507 61.8746 600.508 61.8744C600.508 61.8742 600.509 61.874 600.51 61.8738C600.511 61.8736 600.511 61.8736 600.51 61.8736V62.9404V64.0072C601.699 64.0072 602.631 63.0425 602.655 61.8918L601.588 61.87ZM471.174 11.4834V10.4166C470.573 10.4166 470.087 10.9034 470.087 11.5039H471.153H472.22C472.22 12.0818 471.752 12.5502 471.174 12.5502V11.4834ZM-638.498 11.4834V10.4166H-638.498H-639.564H-640.631C-640.631 11.5949 -639.676 12.5502 -638.498 12.5502V11.4834ZM716.301 10.4166H715.234V10.4166V11.4834V12.5502C716.412 12.5502 717.368 11.595 717.368 10.4166H716.301ZM716.301 6.40175H717.368C717.368 5.22343 716.412 4.26818 715.234 4.26818V5.33496V6.40175V6.40175H716.301Z" fill="url(#paint8_linear_450_11720)" mask="url(#path-16-outside-5_450_11720)"/>
+</g>
+<g filter="url(#filter6_f_450_11720)">
+<path d="M-660.535 13.8682V4.26712C-660.535 3.08878 -659.58 2.13354 -658.402 2.13354H742.091C743.269 2.13354 744.225 3.08878 744.225 4.26711V13.8682" stroke="url(#paint9_linear_450_11720)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_11720)">
+<path d="M-457.854 62.9403V26.9541C-455.524 22.5921 -433.393 15.4683 -366.998 13.8682H426.237C489.136 14.4016 534.564 18.2301 534.564 31.316V62.9403" stroke="url(#paint10_linear_450_11720)" stroke-width="1.06678"/>
+</g>
+<line x1="-555.33" y1="64.1475" x2="636.453" y2="64.1475" stroke="#400500" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_11720" x="-449.396" y="17.1808" width="980.977" height="49.5774" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11720"/>
+</filter>
+<filter id="filter1_ii_450_11720" x="-632.133" y="66.2541" width="1345.87" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.929412 0 0 0 0 0.556863 0 0 0 0 0.266667 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11720"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.322115 0 0 0 0 0.142276 0 0 0 0 0.0263267 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_11720" result="effect2_innerShadow_450_11720"/>
+</filter>
+<filter id="filter2_f_450_11720" x="-620.737" y="68.2742" width="1325.16" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11720"/>
+</filter>
+<filter id="filter3_f_450_11720" x="-648.682" y="64.0071" width="1374.08" height="32.0036" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11720"/>
+</filter>
+<filter id="filter4_f_450_11720" x="-648.696" y="3.2014" width="1367.11" height="61.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11720"/>
+</filter>
+<filter id="filter5_f_450_11720" x="-641.698" y="3.2014" width="1360.13" height="61.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11720"/>
+</filter>
+<filter id="filter6_f_450_11720" x="-662.135" y="0.533374" width="1407.96" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11720"/>
+</filter>
+<filter id="filter7_f_450_11720" x="-459.454" y="12.2678" width="995.618" height="51.7392" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_11720"/>
+</filter>
+<linearGradient id="paint0_linear_450_11720" x1="40.559" y1="17.1808" x2="40.559" y2="65.6915" gradientUnits="userSpaceOnUse">
+<stop stop-color="#442111"/>
+<stop offset="0.05" stop-color="#522510"/>
+<stop offset="1" stop-color="#090504"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_11720" x1="-466.895" y1="34.5814" x2="530.514" y2="34.5816" gradientUnits="userSpaceOnUse">
+<stop stop-color="#803414"/>
+<stop offset="0.077962" stop-color="#803414" stop-opacity="0.25"/>
+<stop offset="0.939742" stop-color="#803414" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#803414"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_11720" x1="40.2691" y1="68.3877" x2="40.2691" y2="91.8366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AD571E"/>
+<stop offset="1" stop-color="#88441A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_11720" x1="40.2691" y1="68.3877" x2="40.2691" y2="91.8366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AD571E"/>
+<stop offset="1" stop-color="#88441A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_11720" x1="41.8433" y1="70.4077" x2="41.8433" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC893"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_11720" x1="-646.562" y1="33.917" x2="727.153" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAC63"/>
+<stop offset="0.144231" stop-color="#FF7E0D"/>
+<stop offset="0.889423" stop-color="#FF7E0D"/>
+<stop offset="0.961538" stop-color="#EB5200"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_11720" x1="38.3589" y1="66.1406" x2="38.3589" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FDF7CC"/>
+<stop offset="1" stop-color="#FDF7CC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_11720" x1="34.8594" y1="5.33496" x2="34.8594" y2="14.4016" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5A76C"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_11720" x1="-552.65" y1="12.268" x2="-496.387" y2="155.461" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5A76C"/>
+<stop offset="1" stop-color="#FFC893" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_11720" x1="41.8447" y1="2.13354" x2="41.8447" y2="13.8682" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C17300"/>
+<stop offset="1" stop-color="#C17300" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_11720" x1="38.3552" y1="13.8682" x2="38.3552" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D59628"/>
+<stop offset="1" stop-color="#AD6E00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_11720">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_11720">
+<rect width="688" height="95" fill="white" transform="translate(-302.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/오른쪽.svg
new file mode 100644
index 0000000..6a87df7
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/오른쪽.svg
@@ -0,0 +1,29 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_3720)">
+<g filter="url(#filter0_i_450_3720)">
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#400500"/>
+</g>
+<mask id="path-2-outside-1_450_3720" maskUnits="userSpaceOnUse" x="-155.559" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="-155.559" y="1.0874" width="205" height="80"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z"/>
+</mask>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#FF7700"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#400500" mask="url(#path-2-outside-1_450_3720)"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#6B2A00" stroke="#400500" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_3720" x="-124.781" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_3720"/>
+</filter>
+<clipPath id="clip0_450_3720">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/왼쪽.svg
new file mode 100644
index 0000000..84d8107
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/왼쪽.svg
@@ -0,0 +1,29 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_3704)">
+<g filter="url(#filter0_i_450_3704)">
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#400500"/>
+</g>
+<mask id="path-2-outside-1_450_3704" maskUnits="userSpaceOnUse" x="1" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="1" y="1.0874" width="205" height="80"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z"/>
+</mask>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#FF7700"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#400500" mask="url(#path-2-outside-1_450_3704)"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#6B2A00" stroke="#400500" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_3704" x="31.7773" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_3704"/>
+</filter>
+<clipPath id="clip0_450_3704">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/중앙.svg
new file mode 100644
index 0000000..53010f3
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교량/위치도/중앙.svg
@@ -0,0 +1,29 @@
+<svg width="82" height="93" viewBox="0 0 82 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_3713)">
+<g filter="url(#filter0_i_450_3713)">
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#400500"/>
+</g>
+<mask id="path-2-outside-1_450_3713" maskUnits="userSpaceOnUse" x="-122.176" y="1" width="343" height="17" fill="black">
+<rect fill="white" x="-122.176" y="1" width="343" height="17"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z"/>
+</mask>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#FF7700"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#400500" mask="url(#path-2-outside-1_450_3713)"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#6B2A00" stroke="#400500" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_3713" x="-72.6289" y="13" width="243.246" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_3713"/>
+</filter>
+<clipPath id="clip0_450_3713">
+<rect width="82" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/오른쪽.svg
new file mode 100644
index 0000000..99b66c4
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/오른쪽.svg
@@ -0,0 +1,101 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5232)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_450_5232)"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="black" fill-opacity="0.5"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" stroke="url(#paint1_linear_450_5232)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5232)">
+<path d="M-44.9453 7.6649C-44.9453 3.94691 -41.9313 0.932892 -38.2133 0.932892H25.0126C28.7306 0.932892 31.7446 3.94691 31.7446 7.66489V32.0671C31.7446 50.2925 16.97 65.0671 -1.25538 65.0671H-38.2133C-41.9313 65.0671 -44.9453 62.0531 -44.9453 58.3351V7.6649Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-38.2129 1.13113H25.0127C28.6213 1.13118 31.5469 4.05671 31.5469 7.66531V32.0667C31.5469 50.1827 16.8602 64.8694 -1.25586 64.8694H-38.2129C-41.8215 64.8694 -44.747 61.9438 -44.7471 58.3352V7.66531C-44.7471 4.05669 -41.8215 1.13113 -38.2129 1.13113Z" stroke="url(#paint2_linear_450_5232)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5232)">
+<path d="M-41.9766 7.392C-41.9766 5.64236 -40.5582 4.224 -38.8086 4.224H25.6074C27.3571 4.224 28.7754 5.64236 28.7754 7.392V33C28.7754 48.8925 15.892 61.776 -0.000556946 61.776H-38.8086C-40.5582 61.776 -41.9766 60.3576 -41.9766 58.608V7.392Z" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48767H25.6074C27.2112 4.48767 28.5117 5.78815 28.5117 7.39197V33.0004C28.5115 48.7469 15.7456 61.5121 -0.000976562 61.5121H-38.8086C-40.4124 61.5121 -41.7129 60.2116 -41.7129 58.6078V7.39197C-41.7129 5.78816 -40.4124 4.48769 -38.8086 4.48767Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_450_5232)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_450_5232)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_450_5232)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_450_5232)">
+<path d="M26.4234 9.36464C26.6384 9.40549 26.9411 6.58312 25.3409 6.60028C23.7406 6.61744 25.4296 7.21273 25.9076 7.98957C26.3855 8.7664 26.2084 9.32379 26.4234 9.36464Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5232" x="-45.6053" y="-0.123108" width="78.0095" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5232"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5232" result="effect2_innerShadow_450_5232"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5232"/>
+</filter>
+<filter id="filter1_ddi_450_5232" x="-43.0326" y="2.904" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5232"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5232" result="effect2_dropShadow_450_5232"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5232" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5232"/>
+</filter>
+<filter id="filter2_f_450_5232" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5232"/>
+</filter>
+<filter id="filter3_f_450_5232" x="24.402" y="6.33622" width="2.45964" height="3.29286" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_450_5232"/>
+</filter>
+<linearGradient id="paint0_linear_450_5232" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5232" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5232" x1="-6.60035" y1="0.932892" x2="-6.60035" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5232" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5232" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5232">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/왼쪽.svg
new file mode 100644
index 0000000..33a53fd
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/왼쪽.svg
@@ -0,0 +1,236 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5205)">
+<mask id="mask0_450_5205" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M48.2277 0H79.5496V66H0.349609L0.349642 46.5884L48.2277 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_5205)">
+<rect x="-66.5833" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5205)"/>
+<rect x="-66.5833" y="2.112" width="171.793" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-66.5833" y="2.112" width="171.793" height="61.776" rx="5.808" stroke="url(#paint1_linear_450_5205)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5205)">
+<rect x="-65.9062" y="0.932892" width="170.438" height="64.1342" rx="6.732" fill="#C70000" fill-opacity="0.01"/>
+<rect x="-65.7083" y="1.13089" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_5205)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5205)">
+<rect x="-59.3066" y="4.224" width="157.242" height="57.552" rx="3.168" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.0426" y="4.488" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_450_5205)">
+<path d="M-54.5303 5.86963H93.1572C94.0318 5.86987 94.7412 6.57894 94.7412 7.45361V58.5464C94.7412 59.4211 94.0318 60.1301 93.1572 60.1304H-54.5303C-55.4051 60.1304 -56.1143 59.4212 -56.1143 58.5464V7.45361C-56.1143 6.57879 -55.4051 5.86963 -54.5303 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-54.5303 5.60498H93.1572C94.1776 5.60522 95.0049 6.43314 95.0049 7.45361V58.5464C95.0049 59.5669 94.1776 60.3948 93.1572 60.395H-54.5303C-55.5509 60.395 -56.3789 59.567 -56.3789 58.5464V7.45361C-56.3789 6.43299 -55.5509 5.60498 -54.5303 5.60498Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-54.5303 5.60498H93.1572C94.1776 5.60522 95.0049 6.43314 95.0049 7.45361V58.5464C95.0049 59.5669 94.1776 60.3948 93.1572 60.395H-54.5303C-55.5509 60.395 -56.3789 59.567 -56.3789 58.5464V7.45361C-56.3789 6.43299 -55.5509 5.60498 -54.5303 5.60498Z" fill="url(#paint3_linear_450_5205)"/>
+<path d="M-54.5303 5.60498H93.1572C94.1776 5.60522 95.0049 6.43314 95.0049 7.45361V58.5464C95.0049 59.5669 94.1776 60.3948 93.1572 60.395H-54.5303C-55.5509 60.395 -56.3789 59.567 -56.3789 58.5464V7.45361C-56.3789 6.43299 -55.5509 5.60498 -54.5303 5.60498Z" stroke="url(#paint4_linear_450_5205)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_450_5205)">
+<path d="M2.98828 32.736C2.98828 14.5106 17.7629 -0.264008 35.9883 -0.264008H66.8763C68.0427 -0.264008 68.9883 0.681567 68.9883 1.84799V32.736C68.9883 50.9614 54.2137 65.736 35.9883 65.736H5.10028C3.93386 65.736 2.98828 64.7904 2.98828 63.624V32.736Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_450_5205" fill="white">
+<path d="M0.349609 33C0.349609 14.7746 15.1242 0 33.3496 0H64.2376C65.404 0 66.3496 0.945575 66.3496 2.112V33C66.3496 51.2254 51.575 66 33.3496 66H2.46161C1.29518 66 0.349609 65.0544 0.349609 63.888V33Z"/>
+</mask>
+<path d="M0.349609 33C0.349609 14.7746 15.1242 0 33.3496 0H64.2376C65.404 0 66.3496 0.945575 66.3496 2.112V33C66.3496 51.2254 51.575 66 33.3496 66H2.46161C1.29518 66 0.349609 65.0544 0.349609 63.888V33Z" fill="url(#paint5_linear_450_5205)"/>
+<path d="M0.349609 33C0.349609 14.7746 15.1242 0 33.3496 0H64.2376C65.404 0 66.3496 0.945575 66.3496 2.112V33C66.3496 51.2254 51.575 66 33.3496 66H2.46161C1.29518 66 0.349609 65.0544 0.349609 63.888V33Z" stroke="url(#paint6_linear_450_5205)" stroke-width="8.448" mask="url(#path-10-inside-1_450_5205)"/>
+<path d="M0.349609 33C0.349609 14.7746 15.1242 0 33.3496 0H64.2376C65.404 0 66.3496 0.945575 66.3496 2.112V33C66.3496 51.2254 51.575 66 33.3496 66H2.46161C1.29518 66 0.349609 65.0544 0.349609 63.888V33Z" stroke="url(#paint7_linear_450_5205)" stroke-width="8.448" mask="url(#path-10-inside-1_450_5205)"/>
+<g filter="url(#filter4_iif_450_5205)">
+<path d="M1.27962 33.8744C1.31288 15.649 16.1144 0.901412 34.3398 0.934671L64.4186 0.98956C65.0018 0.990625 65.4737 1.46427 65.4727 2.04749L65.4178 32.1256C65.3845 50.351 50.583 65.0986 32.3576 65.0653L2.27881 65.0105C1.69559 65.0094 1.22367 64.5357 1.22474 63.9525L1.27962 33.8744Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M34.3394 1.13291L64.4185 1.1878C64.8921 1.18881 65.275 1.57317 65.2743 2.04679L65.2194 32.1249C65.1864 50.2409 50.4739 64.9007 32.3579 64.8677L2.27883 64.8128C1.80513 64.8117 1.42211 64.4266 1.42298 63.9528L1.47787 33.8748C1.51093 15.7588 16.2234 1.09986 34.3394 1.13291Z" stroke="url(#paint8_linear_450_5205)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_450_5205)">
+<mask id="path-13-inside-2_450_5205" fill="white">
+<path d="M4.57422 33C4.57422 17.1075 17.4577 4.224 33.3502 4.224H62.1262V33C62.1262 48.8925 49.2428 61.776 33.3502 61.776H4.83822C4.69242 61.776 4.57422 61.6578 4.57422 61.512V33Z"/>
+</mask>
+<path d="M4.57422 33C4.57422 17.1075 17.4577 4.224 33.3502 4.224H62.1262V33C62.1262 48.8925 49.2428 61.776 33.3502 61.776H4.83822C4.69242 61.776 4.57422 61.6578 4.57422 61.512V33Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_450_5205)"/>
+</g>
+<g filter="url(#filter6_f_450_5205)">
+<mask id="path-14-inside-3_450_5205" fill="white">
+<path d="M5.69141 33.0613C5.69141 17.752 18.1021 5.34131 33.4114 5.34131H60.7446C60.8904 5.34131 61.0086 5.45951 61.0086 5.60531V32.9387C61.0086 48.248 48.598 60.6587 33.2887 60.6587H5.95541C5.8096 60.6587 5.69141 60.5405 5.69141 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.69141 33.0613C5.69141 17.752 18.1021 5.34131 33.4114 5.34131H60.7446C60.8904 5.34131 61.0086 5.45951 61.0086 5.60531V32.9387C61.0086 48.248 48.598 60.6587 33.2887 60.6587H5.95541C5.8096 60.6587 5.69141 60.5405 5.69141 60.3947V33.0613Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_450_5205)"/>
+</g>
+<mask id="path-15-inside-4_450_5205" fill="white">
+<path d="M6.08398 33.4542C6.08398 18.1449 18.4947 5.73419 33.804 5.73419H60.3515C60.4973 5.73419 60.6155 5.85239 60.6155 5.99819V32.5458C60.6155 47.8552 48.2048 60.2658 32.8955 60.2658H6.34798C6.20218 60.2658 6.08398 60.1476 6.08398 60.0018V33.4542Z"/>
+</mask>
+<g filter="url(#filter7_i_450_5205)">
+<path d="M6.08398 33.4542C6.08398 18.1449 18.4947 5.73419 33.804 5.73419H60.3515C60.4973 5.73419 60.6155 5.85239 60.6155 5.99819V32.5458C60.6155 47.8552 48.2048 60.2658 32.8955 60.2658H6.34798C6.20218 60.2658 6.08398 60.1476 6.08398 60.0018V33.4542Z" fill="#C70000" fill-opacity="0.01"/>
+</g>
+<path d="M6.08398 33.4542C6.08398 18.1449 18.4947 5.73419 33.804 5.73419H60.3515C60.4973 5.73419 60.6155 5.85239 60.6155 5.99819V32.5458C60.6155 47.8552 48.2048 60.2658 32.8955 60.2658H6.34798C6.20218 60.2658 6.08398 60.1476 6.08398 60.0018V33.4542Z" stroke="url(#paint9_linear_450_5205)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_450_5205)"/>
+<g filter="url(#filter8_dii_450_5205)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.3633 13.368C35.744 13.3681 36.8633 14.4874 36.8633 15.868V21.0048L46.4487 30.5902H52.4198C53.8004 30.5902 54.9198 31.7095 54.9198 33.0902C54.9198 34.4709 53.8004 35.5902 52.4198 35.5902H45.7299L36.8633 44.4567V49.8681C36.8633 51.2488 35.744 52.368 34.3633 52.368C32.9827 52.368 31.8634 51.2488 31.8633 49.8681V44.7303L22.7232 35.5902H16.3086C14.9279 35.5902 13.8086 34.4709 13.8086 33.0902C13.8086 31.7095 14.9279 30.5902 16.3086 30.5902H22.0045L31.8633 20.7313V15.868C31.8633 14.4873 32.9826 13.368 34.3633 13.368ZM31.8633 41.9017V35.5902H25.5518L31.8633 41.9017ZM36.8633 41.6282L42.9013 35.5902H36.8633V41.6282ZM24.8328 30.5902H31.8633V23.5596L24.8328 30.5902ZM36.8633 30.5902H43.6204L36.8633 23.8332V30.5902Z" fill="url(#paint10_linear_450_5205)"/>
+<path d="M25.458 35.6835L31.9951 42.2206V35.4579H25.2334L25.458 35.6835ZM36.7314 41.9471L42.9951 35.6835L43.2197 35.4579H36.7314V41.9471ZM24.5137 30.7225H31.9951V23.2411L24.5137 30.7225ZM36.7314 30.7225H43.9395L36.7314 23.5145V30.7225ZM31.9951 44.6757L31.957 44.6366L22.8164 35.4969L22.7783 35.4579H16.3086C15.0008 35.4579 13.9404 34.3975 13.9404 33.0897C13.9407 31.7821 15.0009 30.7225 16.3086 30.7225H22.0596L22.0977 30.6835L31.957 20.8251L31.9951 20.786V15.868C31.9951 14.5603 33.0555 13.4999 34.3633 13.4999C35.6711 13.4999 36.7314 14.5603 36.7314 15.868V21.0594L36.7695 21.0985L46.3555 30.6835L46.3936 30.7225H52.4199C53.7275 30.7226 54.7878 31.7822 54.7881 33.0897C54.7881 34.3974 53.7276 35.4578 52.4199 35.4579H45.6748L45.6367 35.4969L36.7695 44.3632L36.7314 44.4022V49.868C36.7314 51.1758 35.671 52.2362 34.3633 52.2362C33.0555 52.2362 31.9952 51.1758 31.9951 49.868V44.6757Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5205" x="-66.5662" y="-0.123108" width="171.757" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5205"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5205" result="effect2_innerShadow_450_5205"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5205"/>
+</filter>
+<filter id="filter1_ddi_450_5205" x="-60.3626" y="2.904" width="159.354" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5205"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5205" result="effect2_dropShadow_450_5205"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5205" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5205"/>
+</filter>
+<filter id="filter2_f_450_5205" x="-57.9626" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5205"/>
+</filter>
+<filter id="filter3_f_450_5205" x="-2.29172" y="-5.54401" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_450_5205"/>
+</filter>
+<filter id="filter4_iif_450_5205" x="0.564609" y="-0.121399" width="65.568" height="65.8468" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5205"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5205" result="effect2_innerShadow_450_5205"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5205"/>
+</filter>
+<filter id="filter5_dd_450_5205" x="3.51822" y="2.904" width="59.6647" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5205"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5205" result="effect2_dropShadow_450_5205"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5205" result="shape"/>
+</filter>
+<filter id="filter6_f_450_5205" x="4.37141" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5205"/>
+</filter>
+<filter id="filter7_i_450_5205" x="5.55598" y="5.73419" width="55.0592" height="55.5876" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5205"/>
+</filter>
+<filter id="filter8_dii_450_5205" x="11.9606" y="12.312" width="45.3353" height="43.2239" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5205"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_450_5205" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_450_5205"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_450_5205" result="effect3_innerShadow_450_5205"/>
+</filter>
+<linearGradient id="paint0_linear_450_5205" x1="19.3131" y1="0" x2="19.3131" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5205" x1="19.3131" y1="0" x2="19.3131" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5205" x1="19.313" y1="0.932892" x2="19.313" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5205" x1="19.3131" y1="5.34131" x2="19.3131" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5205" x1="-36.3209" y1="5.34131" x2="-36.3209" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_5205" x1="33.3496" y1="0" x2="33.3496" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF9087"/>
+<stop offset="0.458959" stop-color="#EB1100"/>
+<stop offset="1" stop-color="#600700"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_5205" x1="33.3496" y1="0" x2="33.3496" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_5205" x1="33.3496" y1="0" x2="33.3496" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_5205" x1="33.4072" y1="0.932969" x2="33.2902" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_5205" x1="7.15819" y1="6.65249" x2="19.0065" y2="57.5888" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_5205" x1="23.4831" y1="19.119" x2="49.4594" y2="45.0952" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_450_5205">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/중앙.svg
new file mode 100644
index 0000000..1e0ea2a
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교차로/실사화/중앙.svg
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="58" height="66" viewBox="0 0 58 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5224)">
+<g clip-path="url(#clip1_450_5224)">
+<rect width="456.588" height="66" transform="translate(-199.215)" fill="white"/>
+<rect x="-273.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5224)"/>
+<rect x="-273.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-273.495" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint1_linear_450_5224)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5224)">
+<rect x="-265.951" y="0.932892" width="590.064" height="64.1342" rx="6.732" fill="#C70000" fill-opacity="0.01"/>
+<rect x="-265.753" y="1.13089" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_5224)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5224)">
+<rect x="-243.107" y="4.224" width="544.377" height="57.552" rx="3.168" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-242.843" y="4.488" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_450_5224)">
+<path d="M-231.769 5.86963H289.93C290.805 5.86963 291.514 6.57879 291.514 7.45361V58.5464C291.514 59.4212 290.805 60.1304 289.93 60.1304H-231.769C-232.643 60.1304 -233.353 59.4212 -233.353 58.5464V7.45361C-233.353 6.57879 -232.643 5.86963 -231.769 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-231.769 5.60498H289.93C290.95 5.60498 291.778 6.43299 291.778 7.45361V58.5464C291.778 59.567 290.95 60.395 289.93 60.395H-231.769C-232.789 60.395 -233.617 59.567 -233.617 58.5464V7.45361C-233.617 6.43299 -232.789 5.60498 -231.769 5.60498Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-231.769 5.60498H289.93C290.95 5.60498 291.778 6.43299 291.778 7.45361V58.5464C291.778 59.567 290.95 60.395 289.93 60.395H-231.769C-232.789 60.395 -233.617 59.567 -233.617 58.5464V7.45361C-233.617 6.43299 -232.789 5.60498 -231.769 5.60498Z" fill="url(#paint3_linear_450_5224)"/>
+<path d="M-231.769 5.60498H289.93C290.95 5.60498 291.778 6.43299 291.778 7.45361V58.5464C291.778 59.567 290.95 60.395 289.93 60.395H-231.769C-232.789 60.395 -233.617 59.567 -233.617 58.5464V7.45361C-233.617 6.43299 -232.789 5.60498 -231.769 5.60498Z" stroke="url(#paint4_linear_450_5224)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5224" x="-266.611" y="-0.123108" width="591.384" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5224"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5224" result="effect2_innerShadow_450_5224"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5224"/>
+</filter>
+<filter id="filter1_ddi_450_5224" x="-244.163" y="2.904" width="546.489" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5224"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5224" result="effect2_dropShadow_450_5224"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5224" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5224"/>
+</filter>
+<filter id="filter2_f_450_5224" x="-235.201" y="4.02131" width="528.564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5224"/>
+</filter>
+<linearGradient id="paint0_linear_450_5224" x1="29.0811" y1="0" x2="29.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5224" x1="29.0811" y1="0" x2="29.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5224" x1="29.0809" y1="0.932892" x2="29.0809" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5224" x1="29.0806" y1="5.34131" x2="29.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5224" x1="-163.526" y1="5.34131" x2="-163.526" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5224">
+<rect width="58" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_5224">
+<rect width="456.588" height="66" fill="white" transform="translate(-199.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교차로/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교차로/위치도/오른쪽.svg
new file mode 100644
index 0000000..af1385b
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교차로/위치도/오른쪽.svg
@@ -0,0 +1,14 @@
+<svg width="179" height="66" viewBox="0 0 179 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1828" fill="white">
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z"/>
+</mask>
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z" fill="#420E0A"/>
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z" fill="url(#paint0_linear_468_1828)" fill-opacity="0.3"/>
+<path d="M0 -4H183L175 4H0V-4ZM183 36C183 54.7777 167.778 70 149 70H0V62H149C163.359 62 175 50.3594 175 36H183ZM175 36M0 66V0V66M183 -4V36C183 54.7777 167.778 70 149 70V62C163.359 62 175 50.3594 175 36V4L183 -4Z" fill="#400500" mask="url(#path-1-inside-1_468_1828)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1828" x1="0" y1="33" x2="179" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/교차로/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/교차로/위치도/왼쪽.svg
new file mode 100644
index 0000000..77da2d3
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/교차로/위치도/왼쪽.svg
@@ -0,0 +1,10 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1825" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#420E0A"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#400500" mask="url(#path-1-inside-1_468_1825)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#D21203" stroke="#400500" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.998 13.5C34.3788 13.5 35.498 14.6193 35.498 16V21.1367L45.084 30.7227H51.0547C52.4353 30.7228 53.5547 31.842 53.5547 33.2227C53.5545 34.6031 52.4352 35.7225 51.0547 35.7227H44.3633L35.498 44.5879V50C35.498 51.3807 34.3788 52.5 32.998 52.5C31.6173 52.5 30.498 51.3807 30.498 50V44.8613L21.3594 35.7227H14.9434C13.5628 35.7227 12.4436 34.6032 12.4434 33.2227C12.4434 31.8419 13.5626 30.7227 14.9434 30.7227H20.6387L30.498 20.8633V16C30.498 14.6193 31.6173 13.5 32.998 13.5ZM30.498 42.0332V35.7227H24.1875L30.498 42.0332ZM35.498 35.7227V41.7598L41.5352 35.7227H35.498ZM35.498 30.7227H42.2559L35.498 23.9648V30.7227ZM23.4668 30.7227H30.498V23.6914L23.4668 30.7227Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/오른쪽.svg
new file mode 100644
index 0000000..70b3c9b
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/오른쪽.svg	
@@ -0,0 +1,104 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="13" height="66" viewBox="0 0 13 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5399)">
+<rect x="-64.0872" y="2.112" width="74.976" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5399)"/>
+<rect x="-64.0872" y="2.112" width="74.976" height="61.776" rx="5.808" stroke="url(#paint1_linear_450_5399)" stroke-width="4.224"/>
+<rect x="-64.0872" y="2.112" width="74.976" height="61.776" rx="5.808" stroke="url(#paint2_linear_450_5399)" stroke-opacity="0.5" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5399)">
+<rect x="-64.9434" y="0.932861" width="76.6899" height="64.1342" rx="6.732" fill="white" fill-opacity="0.01"/>
+<rect x="-64.7454" y="1.13086" width="76.2939" height="63.7382" rx="6.534" stroke="url(#paint3_linear_450_5399)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5399)">
+<rect x="-61.9746" y="4.22388" width="70.752" height="57.552" rx="3.168" fill="white" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-61.7106" y="4.48788" width="70.224" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5399)">
+<path d="M-58.6631 5.86963H5.46582C6.34063 5.86963 7.0498 6.57879 7.0498 7.45361V58.5464C7.0498 59.4212 6.34064 60.1304 5.46582 60.1304H-58.6631C-59.5379 60.1304 -60.2471 59.4212 -60.2471 58.5464V7.45361C-60.2471 6.57879 -59.5379 5.86963 -58.6631 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<path d="M-58.6631 5.60498H5.46582C6.48644 5.60498 7.31445 6.43299 7.31445 7.45361V58.5464C7.31445 59.567 6.48644 60.395 5.46582 60.395H-58.6631C-59.6837 60.395 -60.5117 59.567 -60.5117 58.5464V7.45361C-60.5117 6.43299 -59.6837 5.60498 -58.6631 5.60498Z" fill="#D01E1E" fill-opacity="0.01"/>
+<path d="M-58.6631 5.60498H5.46582C6.48644 5.60498 7.31445 6.43299 7.31445 7.45361V58.5464C7.31445 59.567 6.48644 60.395 5.46582 60.395H-58.6631C-59.6837 60.395 -60.5117 59.567 -60.5117 58.5464V7.45361C-60.5117 6.43299 -59.6837 5.60498 -58.6631 5.60498Z" fill="url(#paint4_linear_450_5399)"/>
+<path d="M-58.6631 5.60498H5.46582C6.48644 5.60498 7.31445 6.43299 7.31445 7.45361V58.5464C7.31445 59.567 6.48644 60.395 5.46582 60.395H-58.6631C-59.6837 60.395 -60.5117 59.567 -60.5117 58.5464V7.45361C-60.5117 6.43299 -59.6837 5.60498 -58.6631 5.60498Z" stroke="url(#paint5_linear_450_5399)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+<g filter="url(#filter3_f_450_5399)">
+<path d="M6.42533 9.36467C6.64035 9.40552 6.94307 6.58316 5.34283 6.60031C3.74259 6.61747 5.43157 7.21277 5.90952 7.9896C6.38747 8.76643 6.21031 9.32382 6.42533 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5399" x="-65.6034" y="-0.123139" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5399"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5399" result="effect2_innerShadow_450_5399"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5399"/>
+</filter>
+<filter id="filter1_ddi_450_5399" x="-63.0306" y="2.90388" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5399"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5399" result="effect2_dropShadow_450_5399"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5399" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5399"/>
+</filter>
+<filter id="filter2_f_450_5399" x="-62.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5399"/>
+</filter>
+<filter id="filter3_f_450_5399" x="4.40397" y="6.33634" width="2.45964" height="3.29265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_450_5399"/>
+</filter>
+<linearGradient id="paint0_linear_450_5399" x1="-26.5992" y1="0" x2="-26.5992" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.458959" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5399" x1="-26.5992" y1="0" x2="-26.5992" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#770900"/>
+<stop offset="0.620192" stop-color="#400500"/>
+<stop offset="1" stop-color="#460500"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5399" x1="-26.5992" y1="0" x2="-26.5992" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.182692" stop-color="#FF4E4E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5399" x1="-26.5984" y1="0.932861" x2="-26.5984" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5399" x1="-26.5986" y1="5.34131" x2="-26.5986" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_5399" x1="-51.6315" y1="5.34131" x2="-51.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5399">
+<rect width="13" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/왼쪽.svg
new file mode 100644
index 0000000..8e17b2a
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/왼쪽.svg	
@@ -0,0 +1,104 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="13" height="66" viewBox="0 0 13 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5382)">
+<rect x="2.10809" y="2.112" width="74.976" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5382)"/>
+<rect x="2.10809" y="2.112" width="74.976" height="61.776" rx="5.808" stroke="url(#paint1_linear_450_5382)" stroke-width="4.224"/>
+<rect x="2.10809" y="2.112" width="74.976" height="61.776" rx="5.808" stroke="url(#paint2_linear_450_5382)" stroke-opacity="0.5" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5382)">
+<rect x="1.25195" y="0.932861" width="76.6899" height="64.1342" rx="6.732" fill="white" fill-opacity="0.01"/>
+<rect x="1.44995" y="1.13086" width="76.2939" height="63.7382" rx="6.534" stroke="url(#paint3_linear_450_5382)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5382)">
+<rect x="4.2207" y="4.22388" width="70.752" height="57.552" rx="3.168" fill="white" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="4.4847" y="4.48788" width="70.224" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5382)">
+<path d="M7.53223 5.86963H71.6611C72.5359 5.86963 73.2451 6.57879 73.2451 7.45361V58.5464C73.2451 59.4212 72.536 60.1304 71.6611 60.1304H7.53223C6.65741 60.1304 5.94824 59.4212 5.94824 58.5464V7.45361C5.94824 6.57879 6.65741 5.86963 7.53223 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<rect x="5.68392" y="5.60531" width="67.8256" height="54.7894" rx="1.848" fill="#D01E1E" fill-opacity="0.01"/>
+<rect x="5.68392" y="5.60531" width="67.8256" height="54.7894" rx="1.848" fill="url(#paint4_linear_450_5382)"/>
+<rect x="5.68392" y="5.60531" width="67.8256" height="54.7894" rx="1.848" stroke="url(#paint5_linear_450_5382)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+<g filter="url(#filter3_f_450_5382)">
+<path d="M5.64939 9.66828C5.38839 9.67672 5.49789 6.47158 7.38711 6.76758C9.27634 7.06359 7.18075 7.43638 6.48699 8.22147C5.79322 9.00656 5.91039 9.65985 5.64939 9.66828Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5382" x="0.591953" y="-0.123139" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5382"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5382" result="effect2_innerShadow_450_5382"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5382"/>
+</filter>
+<filter id="filter1_ddi_450_5382" x="3.1647" y="2.90388" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5382"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5382" result="effect2_dropShadow_450_5382"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5382" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5382"/>
+</filter>
+<filter id="filter2_f_450_5382" x="4.09992" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5382"/>
+</filter>
+<filter id="filter3_f_450_5382" x="5.14892" y="6.35229" width="3.40333" height="3.71192" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.198" result="effect1_foregroundBlur_450_5382"/>
+</filter>
+<linearGradient id="paint0_linear_450_5382" x1="39.5961" y1="0" x2="39.5961" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.458959" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5382" x1="39.5961" y1="0" x2="39.5961" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#770900"/>
+<stop offset="0.620192" stop-color="#400500"/>
+<stop offset="1" stop-color="#460500"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5382" x1="39.5961" y1="0" x2="39.5961" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.182692" stop-color="#FF4E4E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5382" x1="39.5969" y1="0.932861" x2="39.5969" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5382" x1="39.5967" y1="5.34131" x2="39.5967" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_5382" x1="14.5638" y1="5.34131" x2="14.5638" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5382">
+<rect width="13" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/중앙.svg
new file mode 100644
index 0000000..0b6e975
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/실사화/중앙.svg	
@@ -0,0 +1,102 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5391)">
+<g clip-path="url(#clip1_450_5391)">
+<rect width="456.588" height="66" transform="translate(-183.336)" fill="white"/>
+<rect x="-257.62" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5391)"/>
+<rect x="-257.62" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint1_linear_450_5391)" stroke-width="4.224"/>
+<rect x="-257.62" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint2_linear_450_5391)" stroke-opacity="0.5" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5391)">
+<rect x="-250.076" y="0.932861" width="590.064" height="64.1342" rx="6.732" fill="white" fill-opacity="0.01"/>
+<rect x="-249.878" y="1.13086" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint3_linear_450_5391)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5391)">
+<rect x="-227.23" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="white" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.966" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5391)">
+<path d="M-215.892 5.86963H305.807C306.681 5.86963 307.391 6.57879 307.391 7.45361V58.5464C307.391 59.4212 306.681 60.1304 305.807 60.1304H-215.892C-216.766 60.1304 -217.476 59.4212 -217.476 58.5464V7.45361C-217.476 6.57879 -216.766 5.86963 -215.892 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<path d="M-215.892 5.60498H305.807C306.827 5.60498 307.655 6.43299 307.655 7.45361V58.5464C307.655 59.567 306.827 60.395 305.807 60.395H-215.892C-216.912 60.395 -217.74 59.567 -217.74 58.5464V7.45361C-217.74 6.43299 -216.912 5.60498 -215.892 5.60498Z" fill="#D01E1E" fill-opacity="0.01"/>
+<path d="M-215.892 5.60498H305.807C306.827 5.60498 307.655 6.43299 307.655 7.45361V58.5464C307.655 59.567 306.827 60.395 305.807 60.395H-215.892C-216.912 60.395 -217.74 59.567 -217.74 58.5464V7.45361C-217.74 6.43299 -216.912 5.60498 -215.892 5.60498Z" fill="url(#paint4_linear_450_5391)"/>
+<path d="M-215.892 5.60498H305.807C306.827 5.60498 307.655 6.43299 307.655 7.45361V58.5464C307.655 59.567 306.827 60.395 305.807 60.395H-215.892C-216.912 60.395 -217.74 59.567 -217.74 58.5464V7.45361C-217.74 6.43299 -216.912 5.60498 -215.892 5.60498Z" stroke="url(#paint5_linear_450_5391)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5391" x="-250.736" y="-0.123139" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5391"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5391" result="effect2_innerShadow_450_5391"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5391"/>
+</filter>
+<filter id="filter1_ddi_450_5391" x="-228.286" y="2.90412" width="546.489" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5391"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5391" result="effect2_dropShadow_450_5391"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5391" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5391"/>
+</filter>
+<filter id="filter2_f_450_5391" x="-219.324" y="4.02131" width="528.562" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5391"/>
+</filter>
+<linearGradient id="paint0_linear_450_5391" x1="44.9561" y1="0" x2="44.9561" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.458959" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5391" x1="44.9561" y1="0" x2="44.9561" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#770900"/>
+<stop offset="0.620192" stop-color="#400500"/>
+<stop offset="1" stop-color="#460500"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5391" x1="44.9561" y1="0" x2="44.9561" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.182692" stop-color="#FF4E4E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5391" x1="44.9559" y1="0.932861" x2="44.9559" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5391" x1="44.9575" y1="5.34131" x2="44.9575" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_5391" x1="-147.649" y1="5.34131" x2="-147.649" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5391">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_5391">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.336)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/위치도/위치도.svg b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/위치도/위치도.svg
new file mode 100644
index 0000000..3e46261
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/기타 시설물/위치도/위치도.svg	
@@ -0,0 +1,4 @@
+<svg width="110" height="66" viewBox="0 0 110 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="106" height="62" rx="6" fill="#6A0800"/>
+<rect x="2" y="2" width="106" height="62" rx="6" stroke="#400500" stroke-width="4"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/오른쪽.svg
new file mode 100644
index 0000000..a389ffc
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/오른쪽.svg	
@@ -0,0 +1,97 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5315)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_450_5315)" stroke="url(#paint1_linear_450_5315)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5315)">
+<path d="M-44.9453 7.66487C-44.9453 3.94688 -41.9313 0.932861 -38.2133 0.932861H25.0126C28.7306 0.932861 31.7446 3.94688 31.7446 7.66486V32.067C31.7446 50.2924 16.97 65.067 -1.25538 65.067H-38.2133C-41.9313 65.067 -44.9453 62.053 -44.9453 58.335V7.66487Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-38.2129 1.1311H25.0127C28.6213 1.13114 31.5469 4.05668 31.5469 7.66528V32.0667C31.5469 50.1827 16.8602 64.8694 -1.25586 64.8694H-38.2129C-41.8215 64.8694 -44.747 61.9438 -44.7471 58.3352V7.66528C-44.7471 4.05665 -41.8215 1.1311 -38.2129 1.1311Z" stroke="url(#paint2_linear_450_5315)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5315)">
+<path d="M-41.9766 7.392C-41.9766 5.64236 -40.5582 4.224 -38.8086 4.224H25.6074C27.3571 4.224 28.7754 5.64236 28.7754 7.392V33C28.7754 48.8925 15.892 61.776 -0.000556946 61.776H-38.8086C-40.5582 61.776 -41.9766 60.3576 -41.9766 58.608V7.392Z" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48767H25.6074C27.2112 4.48767 28.5117 5.78815 28.5117 7.39197V33.0004C28.5115 48.7469 15.7456 61.5121 -0.000976562 61.5121H-38.8086C-40.4124 61.5121 -41.7129 60.2116 -41.7129 58.6078V7.39197C-41.7129 5.78816 -40.4124 4.48769 -38.8086 4.48767Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5315)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V33.3892C27.3142 48.3038 15.2232 60.3948 0.308594 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V33.3892C27.3142 48.3038 15.2232 60.3948 0.308594 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_450_5315)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V33.3892C27.3142 48.3038 15.2232 60.3948 0.308594 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_450_5315)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+<g filter="url(#filter3_f_450_5315)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5315" x="-45.6053" y="-0.123139" width="78.0095" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5315"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5315" result="effect2_innerShadow_450_5315"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5315"/>
+</filter>
+<filter id="filter1_ddi_450_5315" x="-43.0326" y="2.904" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5315"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5315" result="effect2_dropShadow_450_5315"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5315" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5315"/>
+</filter>
+<filter id="filter2_f_450_5315" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5315"/>
+</filter>
+<filter id="filter3_f_450_5315" x="24.402" y="6.33622" width="2.45964" height="3.29289" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_450_5315"/>
+</filter>
+<linearGradient id="paint0_linear_450_5315" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5315" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5315" x1="-6.60035" y1="0.932861" x2="-6.60035" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5315" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5315" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5315">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/왼쪽.svg
new file mode 100644
index 0000000..9b7cba7
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/왼쪽.svg	
@@ -0,0 +1,239 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5285)">
+<mask id="mask0_450_5285" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-1" width="80" height="67">
+<path d="M47.882 -0.150879H79.2039V65.8491H0.00390625L0.00393937 46.4375L47.882 -0.150879Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_5285)">
+<rect x="-66.929" y="1.96112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5285)" stroke="url(#paint1_linear_450_5285)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5285)">
+<rect x="-66.252" y="0.781982" width="170.438" height="64.1342" rx="6.732" fill="#C70000" fill-opacity="0.01"/>
+<rect x="-66.054" y="0.979982" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_5285)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5285)">
+<rect x="-59.6523" y="4.07312" width="157.242" height="57.552" rx="3.168" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.33712" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5285)">
+<path d="M-54.876 5.71875H92.8115C93.6861 5.71899 94.3955 6.42806 94.3955 7.30273V58.3955C94.3955 59.2702 93.6861 59.9793 92.8115 59.9795H-54.876C-55.7508 59.9795 -56.46 59.2703 -56.46 58.3955V7.30273C-56.46 6.42792 -55.7508 5.71875 -54.876 5.71875Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<path d="M-54.876 5.4541H92.8115C93.8319 5.45434 94.6592 6.28226 94.6592 7.30273V58.3955C94.6592 59.416 93.8319 60.2439 92.8115 60.2441H-54.876C-55.8966 60.2441 -56.7246 59.4161 -56.7246 58.3955V7.30273C-56.7246 6.28211 -55.8966 5.4541 -54.876 5.4541Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-54.876 5.4541H92.8115C93.8319 5.45434 94.6592 6.28226 94.6592 7.30273V58.3955C94.6592 59.416 93.8319 60.2439 92.8115 60.2441H-54.876C-55.8966 60.2441 -56.7246 59.4161 -56.7246 58.3955V7.30273C-56.7246 6.28211 -55.8966 5.4541 -54.876 5.4541Z" fill="url(#paint3_linear_450_5285)"/>
+<path d="M-54.876 5.4541H92.8115C93.8319 5.45434 94.6592 6.28226 94.6592 7.30273V58.3955C94.6592 59.416 93.8319 60.2439 92.8115 60.2441H-54.876C-55.8966 60.2441 -56.7246 59.4161 -56.7246 58.3955V7.30273C-56.7246 6.28211 -55.8966 5.4541 -54.876 5.4541Z" stroke="url(#paint4_linear_450_5285)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+<g filter="url(#filter3_f_450_5285)">
+<path d="M2.64258 32.5851C2.64258 14.3597 17.4172 -0.414917 35.6426 -0.414917H66.5306C67.697 -0.414917 68.6426 0.530658 68.6426 1.69708V32.5851C68.6426 50.8105 53.868 65.5851 35.6426 65.5851H4.75458C3.58815 65.5851 2.64258 64.6395 2.64258 63.4731V32.5851Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_450_5285" fill="white">
+<path d="M0.00390625 32.8491C0.00390625 14.6237 14.7785 -0.150879 33.0039 -0.150879H63.8919C65.0583 -0.150879 66.0039 0.794696 66.0039 1.96112V32.8491C66.0039 51.0745 51.2293 65.8491 33.0039 65.8491H2.11591C0.949481 65.8491 0.00390625 64.9035 0.00390625 63.7371V32.8491Z"/>
+</mask>
+<path d="M0.00390625 32.8491C0.00390625 14.6237 14.7785 -0.150879 33.0039 -0.150879H63.8919C65.0583 -0.150879 66.0039 0.794696 66.0039 1.96112V32.8491C66.0039 51.0745 51.2293 65.8491 33.0039 65.8491H2.11591C0.949481 65.8491 0.00390625 64.9035 0.00390625 63.7371V32.8491Z" fill="url(#paint5_linear_450_5285)"/>
+<path d="M0.00390625 32.8491C0.00390625 14.6237 14.7785 -0.150879 33.0039 -0.150879H63.8919C65.0583 -0.150879 66.0039 0.794696 66.0039 1.96112V32.8491C66.0039 51.0745 51.2293 65.8491 33.0039 65.8491H2.11591C0.949481 65.8491 0.00390625 64.9035 0.00390625 63.7371V32.8491Z" stroke="url(#paint6_linear_450_5285)" stroke-width="8.448" mask="url(#path-10-inside-1_450_5285)"/>
+<path d="M0.00390625 32.8491C0.00390625 14.6237 14.7785 -0.150879 33.0039 -0.150879H63.8919C65.0583 -0.150879 66.0039 0.794696 66.0039 1.96112V32.8491C66.0039 51.0745 51.2293 65.8491 33.0039 65.8491H2.11591C0.949481 65.8491 0.00390625 64.9035 0.00390625 63.7371V32.8491Z" stroke="url(#paint7_linear_450_5285)" stroke-width="8.448" mask="url(#path-10-inside-1_450_5285)"/>
+<g filter="url(#filter4_iif_450_5285)">
+<path d="M0.93392 33.7235C0.967179 15.4981 15.7687 0.750472 33.9941 0.783731L64.0729 0.83862C64.6561 0.839685 65.128 1.31333 65.1269 1.89655L65.0721 31.9747C65.0388 50.2 50.2373 64.9477 32.0119 64.9144L1.9331 64.8595C1.34989 64.8585 0.877968 64.3848 0.879032 63.8016L0.93392 33.7235Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M33.9937 0.981973L64.0728 1.03686C64.5464 1.03787 64.9293 1.42223 64.9286 1.89585L64.8737 31.9739C64.8407 50.0899 50.1282 64.7498 32.0122 64.7167L1.93313 64.6619C1.45942 64.6608 1.07641 64.2756 1.07727 63.8019L1.13216 33.7238C1.16523 15.6078 15.8777 0.948916 33.9937 0.981973Z" stroke="url(#paint8_linear_450_5285)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_450_5285)">
+<mask id="path-13-inside-2_450_5285" fill="white">
+<path d="M4.22852 32.8491C4.22852 16.9566 17.112 4.07312 33.0045 4.07312H61.7805V32.8491C61.7805 48.7417 48.8971 61.6251 33.0045 61.6251H4.49252C4.34671 61.6251 4.22852 61.5069 4.22852 61.3611V32.8491Z"/>
+</mask>
+<path d="M4.22852 32.8491C4.22852 16.9566 17.112 4.07312 33.0045 4.07312H61.7805V32.8491C61.7805 48.7417 48.8971 61.6251 33.0045 61.6251H4.49252C4.34671 61.6251 4.22852 61.5069 4.22852 61.3611V32.8491Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_450_5285)"/>
+</g>
+<g filter="url(#filter6_f_450_5285)">
+<mask id="path-14-inside-3_450_5285" fill="white">
+<path d="M5.3457 32.9104C5.3457 17.6011 17.7564 5.19043 33.0657 5.19043H60.3989C60.5447 5.19043 60.6629 5.30863 60.6629 5.45443V32.7878C60.6629 48.0971 48.2523 60.5078 32.9429 60.5078H5.6097C5.4639 60.5078 5.3457 60.3896 5.3457 60.2438V32.9104Z"/>
+</mask>
+<path d="M5.3457 32.9104C5.3457 17.6011 17.7564 5.19043 33.0657 5.19043H60.3989C60.5447 5.19043 60.6629 5.30863 60.6629 5.45443V32.7878C60.6629 48.0971 48.2523 60.5078 32.9429 60.5078H5.6097C5.4639 60.5078 5.3457 60.3896 5.3457 60.2438V32.9104Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_450_5285)"/>
+</g>
+<mask id="path-15-inside-4_450_5285" fill="white">
+<path d="M5.73828 33.3033C5.73828 17.9939 18.149 5.58325 33.4583 5.58325H60.0058C60.1516 5.58325 60.2698 5.70145 60.2698 5.84725V32.3949C60.2698 47.7042 47.8591 60.1149 32.5498 60.1149H6.00228C5.85648 60.1149 5.73828 59.9967 5.73828 59.8509V33.3033Z"/>
+</mask>
+<g filter="url(#filter7_i_450_5285)">
+<path d="M5.73828 33.3033C5.73828 17.9939 18.149 5.58325 33.4583 5.58325H60.0058C60.1516 5.58325 60.2698 5.70145 60.2698 5.84725V32.3949C60.2698 47.7042 47.8591 60.1149 32.5498 60.1149H6.00228C5.85648 60.1149 5.73828 59.9967 5.73828 59.8509V33.3033Z" fill="#C70000" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.3033C5.73828 17.9939 18.149 5.58325 33.4583 5.58325H60.0058C60.1516 5.58325 60.2698 5.70145 60.2698 5.84725V32.3949C60.2698 47.7042 47.8591 60.1149 32.5498 60.1149H6.00228C5.85648 60.1149 5.73828 59.9967 5.73828 59.8509V33.3033Z" stroke="url(#paint9_linear_450_5285)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_450_5285)"/>
+<g filter="url(#filter8_dii_450_5285)">
+<path d="M40.3316 45.137C38.8383 45.137 37.441 44.881 36.1396 44.369C34.8383 43.8357 33.6863 43.0464 32.6836 42.001C31.7023 40.9557 30.9236 39.6757 30.3476 38.161C29.793 36.6464 29.5156 34.9077 29.5156 32.945C29.5156 30.9824 29.8036 29.2437 30.3796 27.729C30.9556 26.193 31.745 24.8917 32.7476 23.825C33.7716 22.7584 34.945 21.9477 36.2676 21.393C37.6116 20.8384 39.0303 20.561 40.5236 20.561C42.0383 20.561 43.3823 20.8704 44.5556 21.489C45.7503 22.0864 46.721 22.7904 47.4676 23.601L45.0036 26.609C44.4063 26.0117 43.745 25.5317 43.0196 25.169C42.3156 24.8064 41.5156 24.625 40.6196 24.625C39.425 24.625 38.3476 24.9557 37.3876 25.617C36.449 26.257 35.713 27.185 35.1796 28.401C34.6463 29.617 34.3796 31.0784 34.3796 32.785C34.3796 34.513 34.625 35.9957 35.1156 37.233C35.6276 38.449 36.3423 39.3877 37.2596 40.049C38.1983 40.7104 39.2863 41.041 40.5236 41.041C41.5476 41.041 42.4543 40.8277 43.2436 40.401C44.0543 39.953 44.769 39.3877 45.3876 38.705L47.9156 41.649C46.9343 42.801 45.8143 43.6757 44.5556 44.273C43.297 44.849 41.889 45.137 40.3316 45.137Z" fill="url(#paint10_linear_450_5285)"/>
+<path d="M40.5234 20.6929C42.0197 20.6929 43.3423 20.9986 44.4941 21.606L44.4971 21.6069C45.6383 22.1776 46.567 22.8464 47.29 23.6079L44.9912 26.4146C44.4119 25.855 43.7754 25.3995 43.0791 25.0513H43.0801C42.3551 24.6778 41.5333 24.4927 40.6191 24.4927C39.3986 24.4928 38.295 24.8315 37.3125 25.5083C36.3505 26.1644 35.6 27.1136 35.0586 28.3481C34.5162 29.5848 34.2481 31.065 34.248 32.7847C34.248 34.5246 34.4948 36.0251 34.9932 37.2817L34.9941 37.2847C35.5139 38.519 36.2427 39.4781 37.1826 40.1558L37.1836 40.1567C38.1462 40.8349 39.2612 41.1733 40.5234 41.1733C41.5662 41.1733 42.4955 40.9556 43.3066 40.5171L43.3076 40.5161C44.0868 40.0855 44.7771 39.5462 45.3818 38.9019L47.7393 41.647C46.7873 42.7432 45.7094 43.579 44.501 44.1528C43.2617 44.72 41.8726 45.0053 40.332 45.0054C38.8543 45.0054 37.4732 44.752 36.1885 44.2466H36.1895C35.0662 43.7862 34.0557 43.1325 33.1572 42.2847L32.7793 41.9097C31.8116 40.8786 31.0412 39.614 30.4707 38.1138C29.9228 36.6169 29.6475 34.8944 29.6475 32.9448C29.6475 30.995 29.9337 29.2727 30.5029 27.7759V27.7749C31.0733 26.2539 31.854 24.9687 32.8428 23.9165C33.7282 22.9942 34.7258 22.2663 35.8359 21.7319L36.3184 21.5151C37.6458 20.9673 39.0471 20.6929 40.5234 20.6929Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+<path d="M21.418 44.6891V20.9771H26.154V44.6891H21.418Z" fill="url(#paint11_linear_450_5285)"/>
+<path d="M26.0215 21.1089V44.5571H21.5498V21.1089H26.0215Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5285" x="-66.912" y="-0.274018" width="171.757" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5285"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5285" result="effect2_innerShadow_450_5285"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5285"/>
+</filter>
+<filter id="filter1_ddi_450_5285" x="-60.7083" y="2.75312" width="159.354" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5285"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5285" result="effect2_dropShadow_450_5285"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5285" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5285"/>
+</filter>
+<filter id="filter2_f_450_5285" x="-58.3083" y="3.87043" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5285"/>
+</filter>
+<filter id="filter3_f_450_5285" x="-2.63742" y="-5.69492" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_450_5285"/>
+</filter>
+<filter id="filter4_iif_450_5285" x="0.218906" y="-0.272309" width="65.568" height="65.8467" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5285"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5285" result="effect2_innerShadow_450_5285"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5285"/>
+</filter>
+<filter id="filter5_dd_450_5285" x="3.17252" y="2.75312" width="59.6647" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5285"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5285" result="effect2_dropShadow_450_5285"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5285" result="shape"/>
+</filter>
+<filter id="filter6_f_450_5285" x="4.0257" y="3.87043" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5285"/>
+</filter>
+<filter id="filter7_i_450_5285" x="5.21028" y="5.58325" width="55.0592" height="55.5876" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5285"/>
+</filter>
+<filter id="filter8_dii_450_5285" x="19.57" y="19.505" width="30.722" height="28.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5285"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_450_5285" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_450_5285"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_450_5285" result="effect3_innerShadow_450_5285"/>
+</filter>
+<linearGradient id="paint0_linear_450_5285" x1="18.9674" y1="-0.150879" x2="18.9674" y2="65.8491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5285" x1="18.9674" y1="-0.150879" x2="18.9674" y2="65.8491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5285" x1="18.9672" y1="0.781982" x2="18.9672" y2="64.9162" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5285" x1="18.9674" y1="5.19043" x2="18.9674" y2="60.5078" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5285" x1="-36.6666" y1="5.19043" x2="-36.6666" y2="59.1201" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_5285" x1="33.0039" y1="-0.150879" x2="33.0039" y2="65.8491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF9087"/>
+<stop offset="0.458959" stop-color="#EB1100"/>
+<stop offset="1" stop-color="#600700"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_5285" x1="33.0039" y1="-0.150879" x2="33.0039" y2="65.8491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_5285" x1="33.0039" y1="-0.150879" x2="33.0039" y2="65.8491" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_5285" x1="33.0615" y1="0.782029" x2="32.9445" y2="64.9161" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_5285" x1="6.81248" y1="6.50155" x2="18.6608" y2="57.4379" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_5285" x1="33.8456" y1="24.185" x2="49.3012" y2="35.1623" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_5285" x1="22.5325" y1="24.4736" x2="28.31" y2="25.5683" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_450_5285">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/중앙.svg
new file mode 100644
index 0000000..33199ba
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/실사화/중앙.svg	
@@ -0,0 +1,95 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5307)">
+<g clip-path="url(#clip1_450_5307)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5307)" stroke="url(#paint1_linear_450_5307)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5307)">
+<rect x="-249.951" y="0.932861" width="590.064" height="64.1342" rx="6.732" fill="#C70000" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13086" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_5307)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5307)">
+<rect x="-227.107" y="4.224" width="544.377" height="57.552" rx="3.168" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.488" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5307)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<path d="M-215.769 5.60498H305.93C306.95 5.60498 307.778 6.43299 307.778 7.45361V58.5464C307.778 59.567 306.95 60.395 305.93 60.395H-215.769C-216.789 60.395 -217.617 59.567 -217.617 58.5464V7.45361C-217.617 6.43299 -216.789 5.60498 -215.769 5.60498Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-215.769 5.60498H305.93C306.95 5.60498 307.778 6.43299 307.778 7.45361V58.5464C307.778 59.567 306.95 60.395 305.93 60.395H-215.769C-216.789 60.395 -217.617 59.567 -217.617 58.5464V7.45361C-217.617 6.43299 -216.789 5.60498 -215.769 5.60498Z" fill="url(#paint3_linear_450_5307)"/>
+<path d="M-215.769 5.60498H305.93C306.95 5.60498 307.778 6.43299 307.778 7.45361V58.5464C307.778 59.567 306.95 60.395 305.93 60.395H-215.769C-216.789 60.395 -217.617 59.567 -217.617 58.5464V7.45361C-217.617 6.43299 -216.789 5.60498 -215.769 5.60498Z" stroke="url(#paint4_linear_450_5307)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5307" x="-250.611" y="-0.123139" width="591.384" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5307"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5307" result="effect2_innerShadow_450_5307"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5307"/>
+</filter>
+<filter id="filter1_ddi_450_5307" x="-228.163" y="2.904" width="546.489" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5307"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5307" result="effect2_dropShadow_450_5307"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5307" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5307"/>
+</filter>
+<filter id="filter2_f_450_5307" x="-219.201" y="4.02131" width="528.564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5307"/>
+</filter>
+<linearGradient id="paint0_linear_450_5307" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5307" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5307" x1="45.0809" y1="0.932861" x2="45.0809" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5307" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5307" x1="-147.526" y1="5.34131" x2="-147.526" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5307">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_5307">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/위치도/오른쪽.svg
new file mode 100644
index 0000000..167d07c
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/위치도/오른쪽.svg	
@@ -0,0 +1,14 @@
+<svg width="179" height="66" viewBox="0 0 179 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_450_3434" fill="white">
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z"/>
+</mask>
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z" fill="#6A0800"/>
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z" fill="url(#paint0_linear_450_3434)" fill-opacity="0.3"/>
+<path d="M0 -4H183L175 4H0V-4ZM183 36C183 54.7777 167.778 70 149 70H0V62H149C163.359 62 175 50.3594 175 36H183ZM175 36M0 66V0V66M183 -4V36C183 54.7777 167.778 70 149 70V62C163.359 62 175 50.3594 175 36V4L183 -4Z" fill="#400500" mask="url(#path-1-inside-1_450_3434)"/>
+<defs>
+<linearGradient id="paint0_linear_450_3434" x1="0" y1="33" x2="179" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/위치도/왼쪽.svg
new file mode 100644
index 0000000..55cb0cf
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/나들목/위치도/왼쪽.svg	
@@ -0,0 +1,11 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1773" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#6A0800"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#400500" mask="url(#path-1-inside-1_468_1773)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#D21203" stroke="#400500" stroke-width="4"/>
+<path d="M40.6665 45.2879C39.1731 45.2879 37.7758 45.0319 36.4745 44.5199C35.1731 43.9866 34.0211 43.1972 33.0185 42.1519C32.0371 41.1066 31.2585 39.8266 30.6825 38.3119C30.1278 36.7972 29.8505 35.0586 29.8505 33.0959C29.8505 31.1332 30.1385 29.3946 30.7145 27.8799C31.2905 26.3439 32.0798 25.0426 33.0825 23.9759C34.1065 22.9092 35.2798 22.0986 36.6025 21.5439C37.9465 20.9892 39.3651 20.7119 40.8585 20.7119C42.3731 20.7119 43.7171 21.0212 44.8905 21.6399C46.0851 22.2372 47.0558 22.9412 47.8025 23.7519L45.3385 26.7599C44.7411 26.1626 44.0798 25.6826 43.3545 25.3199C42.6505 24.9572 41.8505 24.7759 40.9545 24.7759C39.7598 24.7759 38.6825 25.1066 37.7225 25.7679C36.7838 26.4079 36.0478 27.3359 35.5145 28.5519C34.9811 29.7679 34.7145 31.2292 34.7145 32.9359C34.7145 34.6639 34.9598 36.1466 35.4505 37.3839C35.9625 38.5999 36.6771 39.5386 37.5945 40.1999C38.5331 40.8612 39.6211 41.1919 40.8585 41.1919C41.8825 41.1919 42.7891 40.9786 43.5785 40.5519C44.3891 40.1039 45.1038 39.5386 45.7225 38.8559L48.2505 41.7999C47.2691 42.9519 46.1491 43.8266 44.8905 44.4239C43.6318 44.9999 42.2238 45.2879 40.6665 45.2879Z" fill="white"/>
+<path d="M21.752 44.8399V21.1279H26.488V44.8399H21.752Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/오른쪽.svg
new file mode 100644
index 0000000..5b3baa5
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/오른쪽.svg	
@@ -0,0 +1,97 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5275)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_450_5275)" stroke="url(#paint1_linear_450_5275)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5275)">
+<path d="M-44.9453 7.66487C-44.9453 3.94688 -41.9313 0.932861 -38.2133 0.932861H25.0126C28.7306 0.932861 31.7446 3.94688 31.7446 7.66486V32.067C31.7446 50.2924 16.97 65.067 -1.25538 65.067H-38.2133C-41.9313 65.067 -44.9453 62.053 -44.9453 58.335V7.66487Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-38.2129 1.1311H25.0127C28.6213 1.13114 31.5469 4.05668 31.5469 7.66528V32.0667C31.5469 50.1827 16.8602 64.8694 -1.25586 64.8694H-38.2129C-41.8215 64.8694 -44.747 61.9438 -44.7471 58.3352V7.66528C-44.7471 4.05665 -41.8215 1.1311 -38.2129 1.1311Z" stroke="url(#paint2_linear_450_5275)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5275)">
+<path d="M-41.9766 7.392C-41.9766 5.64236 -40.5582 4.224 -38.8086 4.224H25.6074C27.3571 4.224 28.7754 5.64236 28.7754 7.392V33C28.7754 48.8925 15.892 61.776 -0.000556946 61.776H-38.8086C-40.5582 61.776 -41.9766 60.3576 -41.9766 58.608V7.392Z" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48767H25.6074C27.2112 4.48767 28.5117 5.78815 28.5117 7.39197V33.0004C28.5115 48.7469 15.7456 61.5121 -0.000976562 61.5121H-38.8086C-40.4124 61.5121 -41.7129 60.2116 -41.7129 58.6078V7.39197C-41.7129 5.78816 -40.4124 4.48769 -38.8086 4.48767Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5275)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_450_5275)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_450_5275)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+<g filter="url(#filter3_f_450_5275)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5275" x="-45.6053" y="-0.123139" width="78.0095" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5275"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5275" result="effect2_innerShadow_450_5275"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5275"/>
+</filter>
+<filter id="filter1_ddi_450_5275" x="-43.0326" y="2.904" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5275"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5275" result="effect2_dropShadow_450_5275"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5275" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5275"/>
+</filter>
+<filter id="filter2_f_450_5275" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5275"/>
+</filter>
+<filter id="filter3_f_450_5275" x="24.402" y="6.33622" width="2.45964" height="3.29289" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_450_5275"/>
+</filter>
+<linearGradient id="paint0_linear_450_5275" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5275" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5275" x1="-6.60035" y1="0.932861" x2="-6.60035" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5275" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5275" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5275">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/왼쪽.svg
new file mode 100644
index 0000000..6617053
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/왼쪽.svg	
@@ -0,0 +1,239 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5245)">
+<mask id="mask0_450_5245" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_5245)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5245)" stroke="url(#paint1_linear_450_5245)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5245)">
+<rect x="-66.252" y="0.932861" width="170.438" height="64.1342" rx="6.732" fill="#C70000" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13086" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_5245)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5245)">
+<rect x="-59.6523" y="4.224" width="157.242" height="57.552" rx="3.168" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.488" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5245)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<path d="M-54.876 5.60498H92.8115C93.8319 5.60522 94.6592 6.43314 94.6592 7.45361V58.5464C94.6592 59.5669 93.8319 60.3948 92.8115 60.395H-54.876C-55.8966 60.395 -56.7246 59.567 -56.7246 58.5464V7.45361C-56.7246 6.43299 -55.8966 5.60498 -54.876 5.60498Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M-54.876 5.60498H92.8115C93.8319 5.60522 94.6592 6.43314 94.6592 7.45361V58.5464C94.6592 59.5669 93.8319 60.3948 92.8115 60.395H-54.876C-55.8966 60.395 -56.7246 59.567 -56.7246 58.5464V7.45361C-56.7246 6.43299 -55.8966 5.60498 -54.876 5.60498Z" fill="url(#paint3_linear_450_5245)"/>
+<path d="M-54.876 5.60498H92.8115C93.8319 5.60522 94.6592 6.43314 94.6592 7.45361V58.5464C94.6592 59.5669 93.8319 60.3948 92.8115 60.395H-54.876C-55.8966 60.395 -56.7246 59.567 -56.7246 58.5464V7.45361C-56.7246 6.43299 -55.8966 5.60498 -54.876 5.60498Z" stroke="url(#paint4_linear_450_5245)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+<g filter="url(#filter3_f_450_5245)">
+<path d="M2.64258 32.736C2.64258 14.5106 17.4172 -0.264038 35.6426 -0.264038H66.5306C67.697 -0.264038 68.6426 0.681537 68.6426 1.84796V32.736C68.6426 50.9614 53.868 65.736 35.6426 65.736H4.75458C3.58815 65.736 2.64258 64.7904 2.64258 63.624V32.736Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_450_5245" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_450_5245)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_450_5245)" stroke-width="8.448" mask="url(#path-10-inside-1_450_5245)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_450_5245)" stroke-width="8.448" mask="url(#path-10-inside-1_450_5245)"/>
+<g filter="url(#filter4_iif_450_5245)">
+<path d="M0.93392 33.8743C0.967179 15.649 15.7687 0.901351 33.9941 0.93461L64.0729 0.989499C64.6561 0.990564 65.128 1.46421 65.1269 2.04742L65.0721 32.1255C65.0388 50.3509 50.2373 65.0985 32.0119 65.0653L1.9331 65.0104C1.34989 65.0093 0.877968 64.5357 0.879032 63.9525L0.93392 33.8743Z" fill="#C70000" fill-opacity="0.01"/>
+<path d="M33.9937 1.13285L64.0728 1.18774C64.5464 1.18875 64.9293 1.57311 64.9286 2.04673L64.8737 32.1248C64.8407 50.2408 50.1282 64.9007 32.0122 64.8676L1.93313 64.8127C1.45942 64.8117 1.07641 64.4265 1.07727 63.9528L1.13216 33.8747C1.16523 15.7587 15.8777 1.09979 33.9937 1.13285Z" stroke="url(#paint8_linear_450_5245)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_450_5245)">
+<mask id="path-13-inside-2_450_5245" fill="white">
+<path d="M4.22852 33C4.22852 17.1075 17.112 4.224 33.0045 4.224H61.7805V33C61.7805 48.8925 48.8971 61.776 33.0045 61.776H4.49252C4.34671 61.776 4.22852 61.6578 4.22852 61.512V33Z"/>
+</mask>
+<path d="M4.22852 33C4.22852 17.1075 17.112 4.224 33.0045 4.224H61.7805V33C61.7805 48.8925 48.8971 61.776 33.0045 61.776H4.49252C4.34671 61.776 4.22852 61.6578 4.22852 61.512V33Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_450_5245)"/>
+</g>
+<g filter="url(#filter6_f_450_5245)">
+<mask id="path-14-inside-3_450_5245" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_450_5245)"/>
+</g>
+<mask id="path-15-inside-4_450_5245" fill="white">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z"/>
+</mask>
+<g filter="url(#filter7_i_450_5245)">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" fill="#C70000" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" stroke="url(#paint9_linear_450_5245)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_450_5245)"/>
+<g filter="url(#filter8_dii_450_5245)">
+<path d="M43.568 45.288C42.0746 45.288 40.6773 45.032 39.376 44.52C38.0746 43.9867 36.9226 43.1974 35.92 42.152C34.9386 41.1067 34.16 39.8267 33.584 38.312C33.0293 36.7974 32.752 35.0587 32.752 33.096C32.752 31.1334 33.04 29.3947 33.616 27.88C34.192 26.344 34.9813 25.0427 35.984 23.976C37.008 22.9094 38.1813 22.0987 39.504 21.544C40.848 20.9894 42.2666 20.712 43.76 20.712C45.2746 20.712 46.6186 21.0214 47.792 21.64C48.9866 22.2374 49.9573 22.9414 50.704 23.752L48.24 26.76C47.6426 26.1627 46.9813 25.6827 46.256 25.32C45.552 24.9574 44.752 24.776 43.856 24.776C42.6613 24.776 41.584 25.1067 40.624 25.768C39.6853 26.408 38.9493 27.336 38.416 28.552C37.8826 29.768 37.616 31.2294 37.616 32.936C37.616 34.664 37.8613 36.1467 38.352 37.384C38.864 38.6 39.5786 39.5387 40.496 40.2C41.4346 40.8614 42.5226 41.192 43.76 41.192C44.784 41.192 45.6906 40.9787 46.48 40.552C47.2906 40.104 48.0053 39.5387 48.624 38.856L51.152 41.8C50.1706 42.952 49.0506 43.8267 47.792 44.424C46.5333 45 45.1253 45.288 43.568 45.288Z" fill="url(#paint10_linear_450_5245)"/>
+<path d="M43.7598 20.8439C45.256 20.8439 46.5787 21.1496 47.7305 21.757L47.7334 21.7579C48.8747 22.3286 49.8034 22.9974 50.5264 23.7589L48.2275 26.5656C47.6482 26.006 47.0117 25.5505 46.3154 25.2023H46.3164C45.5914 24.8288 44.7696 24.6437 43.8555 24.6437C42.635 24.6438 41.5313 24.9825 40.5488 25.6593C39.5868 26.3154 38.8364 27.2646 38.2949 28.4991C37.7526 29.7358 37.4844 31.216 37.4844 32.9357C37.4844 34.6756 37.7312 36.1761 38.2295 37.4327L38.2305 37.4357C38.7503 38.67 39.479 39.6291 40.4189 40.3068L40.4199 40.3077C41.3825 40.986 42.4975 41.3243 43.7598 41.3243C44.8026 41.3243 45.7318 41.1066 46.543 40.6681L46.5439 40.6671C47.3232 40.2365 48.0135 39.6972 48.6182 39.0529L50.9756 41.798C50.0236 42.8942 48.9457 43.73 47.7373 44.3038C46.498 44.871 45.109 45.1563 43.5684 45.1564C42.0907 45.1564 40.7096 44.903 39.4248 44.3976H39.4258C38.3026 43.9372 37.292 43.2835 36.3936 42.4357L36.0156 42.0607C35.0479 41.0296 34.2775 39.765 33.707 38.2648C33.1592 36.7679 32.8838 35.0454 32.8838 33.0958C32.8838 31.146 33.17 29.4237 33.7393 27.9269V27.9259C34.3097 26.405 35.0903 25.1197 36.0791 24.0675C36.9645 23.1452 37.9621 22.4173 39.0723 21.8829L39.5547 21.6661C40.8821 21.1183 42.2834 20.8439 43.7598 20.8439Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+<path d="M22.1796 45.2881C20.4729 45.2881 19.0222 44.9467 17.8276 44.2641C16.6329 43.5601 15.6409 42.5147 14.8516 41.1281L18.0836 38.7281C18.5529 39.5814 19.0862 40.2107 19.6836 40.6161C20.2809 41.0001 20.9209 41.1921 21.6036 41.1921C22.6489 41.1921 23.4382 40.8721 23.9716 40.2321C24.5049 39.5921 24.7716 38.4507 24.7716 36.8081V21.1281H29.5076V37.1921C29.5076 38.6854 29.2516 40.0507 28.7396 41.2881C28.2276 42.5041 27.4276 43.4747 26.3396 44.2001C25.2729 44.9254 23.8862 45.2881 22.1796 45.2881Z" fill="url(#paint11_linear_450_5245)"/>
+<path d="M29.376 21.2599V37.1925C29.3759 38.6703 29.1218 40.018 28.6172 41.2374C28.1152 42.4293 27.3325 43.3793 26.2666 44.09L26.2656 44.0909C25.2269 44.7973 23.8682 45.1564 22.1797 45.1564C20.5959 45.1564 19.2427 44.859 18.1152 44.2706L17.8926 44.1495C16.7504 43.476 15.7949 42.4818 15.0254 41.1632L18.043 38.922C18.5014 39.7221 19.0215 40.3268 19.6094 40.7257L19.6123 40.7267C20.23 41.1238 20.8945 41.3243 21.6035 41.3243C22.6772 41.3243 23.5086 40.9941 24.0732 40.3165C24.638 39.6386 24.9033 38.4556 24.9033 36.8077V21.2599H29.376Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5245" x="-66.912" y="-0.123139" width="171.757" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5245"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5245" result="effect2_innerShadow_450_5245"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5245"/>
+</filter>
+<filter id="filter1_ddi_450_5245" x="-60.7083" y="2.904" width="159.354" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5245"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5245" result="effect2_dropShadow_450_5245"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5245" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5245"/>
+</filter>
+<filter id="filter2_f_450_5245" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5245"/>
+</filter>
+<filter id="filter3_f_450_5245" x="-2.63742" y="-5.54404" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_450_5245"/>
+</filter>
+<filter id="filter4_iif_450_5245" x="0.218906" y="-0.12143" width="65.568" height="65.8467" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5245"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5245" result="effect2_innerShadow_450_5245"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5245"/>
+</filter>
+<filter id="filter5_dd_450_5245" x="3.17252" y="2.904" width="59.6647" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5245"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5245" result="effect2_dropShadow_450_5245"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5245" result="shape"/>
+</filter>
+<filter id="filter6_f_450_5245" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5245"/>
+</filter>
+<filter id="filter7_i_450_5245" x="5.21028" y="5.73413" width="55.0592" height="55.5876" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5245"/>
+</filter>
+<filter id="filter8_dii_450_5245" x="13.0036" y="19.656" width="40.5248" height="28.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5245"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_450_5245" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_450_5245"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_450_5245" result="effect3_innerShadow_450_5245"/>
+</filter>
+<linearGradient id="paint0_linear_450_5245" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5245" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5245" x1="18.9672" y1="0.932861" x2="18.9672" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5245" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5245" x1="-36.6666" y1="5.34131" x2="-36.6666" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_5245" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF9087"/>
+<stop offset="0.458959" stop-color="#EB1100"/>
+<stop offset="1" stop-color="#600700"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_5245" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_5245" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_5245" x1="33.0615" y1="0.932908" x2="32.9445" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_5245" x1="6.81248" y1="6.65243" x2="18.6608" y2="57.5888" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_5245" x1="37.0819" y1="24.336" x2="52.5376" y2="35.3133" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_5245" x1="18.3005" y1="24.6907" x2="32.2138" y2="32.6974" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_450_5245">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/중앙.svg
new file mode 100644
index 0000000..37f98bd
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/실사화/중앙.svg	
@@ -0,0 +1,95 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5267)">
+<g clip-path="url(#clip1_450_5267)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_450_5267)" stroke="url(#paint1_linear_450_5267)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_5267)">
+<rect x="-249.951" y="0.932861" width="590.064" height="64.1342" rx="6.732" fill="#C70000" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13086" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_5267)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_5267)">
+<rect x="-227.107" y="4.224" width="544.377" height="57.552" rx="3.168" fill="#C70000" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.488" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter2_f_450_5267)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#C70000" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#C70000" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_450_5267)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_450_5267)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_5267" x="-250.611" y="-0.123139" width="591.384" height="65.8502" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5267"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_5267" result="effect2_innerShadow_450_5267"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_5267"/>
+</filter>
+<filter id="filter1_ddi_450_5267" x="-228.163" y="2.904" width="546.489" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_5267"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_5267" result="effect2_dropShadow_450_5267"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_5267" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_5267"/>
+</filter>
+<filter id="filter2_f_450_5267" x="-219.201" y="4.02131" width="528.564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_5267"/>
+</filter>
+<linearGradient id="paint0_linear_450_5267" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D1C1C"/>
+<stop offset="0.5" stop-color="#5C0700"/>
+<stop offset="1" stop-color="#380400"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_5267" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF6060"/>
+<stop offset="0.2" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_5267" x1="45.0809" y1="0.932861" x2="45.0809" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#FF4A4A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_5267" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF5B5B"/>
+<stop offset="0.201923" stop-color="#B42020" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_5267" x1="-147.526" y1="5.34131" x2="-147.526" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8C0B00" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_5267">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_5267">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/위치도/오른쪽.svg
new file mode 100644
index 0000000..4f28ac0
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/위치도/오른쪽.svg	
@@ -0,0 +1,14 @@
+<svg width="179" height="66" viewBox="0 0 179 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_450_3446" fill="white">
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z"/>
+</mask>
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z" fill="#6A0800"/>
+<path d="M0 0H179V36C179 52.5685 165.569 66 149 66H0V0Z" fill="url(#paint0_linear_450_3446)" fill-opacity="0.3"/>
+<path d="M0 -4H183L175 4H0V-4ZM183 36C183 54.7777 167.778 70 149 70H0V62H149C163.359 62 175 50.3594 175 36H183ZM175 36M0 66V0V66M183 -4V36C183 54.7777 167.778 70 149 70V62C163.359 62 175 50.3594 175 36V4L183 -4Z" fill="#400500" mask="url(#path-1-inside-1_450_3446)"/>
+<defs>
+<linearGradient id="paint0_linear_450_3446" x1="0" y1="33" x2="179" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/위치도/왼쪽.svg
new file mode 100644
index 0000000..00669b6
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/분기점, 나들목/분기점/위치도/왼쪽.svg	
@@ -0,0 +1,11 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1770" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#6A0800"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#400500" mask="url(#path-1-inside-1_468_1770)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#D21203" stroke="#400500" stroke-width="4"/>
+<path d="M43.5651 45.2879C42.0718 45.2879 40.6744 45.0319 39.3731 44.5199C38.0718 43.9866 36.9198 43.1972 35.9171 42.1519C34.9358 41.1066 34.1571 39.8266 33.5811 38.3119C33.0264 36.7972 32.7491 35.0586 32.7491 33.0959C32.7491 31.1332 33.0371 29.3946 33.6131 27.8799C34.1891 26.3439 34.9784 25.0426 35.9811 23.9759C37.0051 22.9092 38.1784 22.0986 39.5011 21.5439C40.8451 20.9892 42.2638 20.7119 43.7571 20.7119C45.2718 20.7119 46.6158 21.0212 47.7891 21.6399C48.9838 22.2372 49.9544 22.9412 50.7011 23.7519L48.2371 26.7599C47.6398 26.1626 46.9784 25.6826 46.2531 25.3199C45.5491 24.9572 44.7491 24.7759 43.8531 24.7759C42.6584 24.7759 41.5811 25.1066 40.6211 25.7679C39.6824 26.4079 38.9464 27.3359 38.4131 28.5519C37.8798 29.7679 37.6131 31.2292 37.6131 32.9359C37.6131 34.6639 37.8584 36.1466 38.3491 37.3839C38.8611 38.5999 39.5758 39.5386 40.4931 40.1999C41.4318 40.8612 42.5198 41.1919 43.7571 41.1919C44.7811 41.1919 45.6878 40.9786 46.4771 40.5519C47.2878 40.1039 48.0024 39.5386 48.6211 38.8559L51.1491 41.7999C50.1678 42.9519 49.0478 43.8266 47.7891 44.4239C46.5304 44.9999 45.1224 45.2879 43.5651 45.2879Z" fill="white"/>
+<path d="M22.1776 45.2879C20.4709 45.2879 19.0203 44.9466 17.8256 44.2639C16.6309 43.5599 15.6389 42.5146 14.8496 41.1279L18.0816 38.7279C18.5509 39.5812 19.0843 40.2106 19.6816 40.6159C20.2789 40.9999 20.9189 41.1919 21.6016 41.1919C22.6469 41.1919 23.4363 40.8719 23.9696 40.2319C24.5029 39.5919 24.7696 38.4506 24.7696 36.8079V21.1279H29.5056V37.1919C29.5056 38.6852 29.2496 40.0506 28.7376 41.2879C28.2256 42.5039 27.4256 43.4746 26.3376 44.1999C25.2709 44.9252 23.8843 45.2879 22.1776 45.2879Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/오른쪽.svg
new file mode 100644
index 0000000..515ae35
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/오른쪽.svg	
@@ -0,0 +1,185 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_13454)">
+<g filter="url(#filter0_i_450_13454)">
+<path d="M-134.098 29.8405C-134.098 22.7704 -128.366 17.0391 -121.296 17.0391H2.45082C9.52084 17.0391 15.2522 22.7705 15.2522 29.8405V66.1112H-134.098V29.8405Z" fill="url(#paint0_linear_450_13454)"/>
+<path d="M-134.098 29.8405C-134.098 22.7704 -128.366 17.0391 -121.296 17.0391H2.45082C9.52084 17.0391 15.2522 22.7705 15.2522 29.8405V66.1112H-134.098V29.8405Z" fill="url(#paint1_linear_450_13454)"/>
+</g>
+<path d="M-121.296 17.5723H2.45117C9.22645 17.5725 14.7188 23.0655 14.7188 29.8408V65.5781H-133.564V29.8408C-133.564 23.0654 -128.071 17.5723 -121.296 17.5723Z" stroke="black" stroke-width="1.06678"/>
+<path d="M34.8145 66.2249C40.7061 66.2249 45.4824 71.0012 45.4824 76.8928V93.9417H-163.731V76.8928C-163.731 71.0012 -158.955 66.2249 -153.063 66.2249H34.8145Z" fill="#5D666B" stroke="#4E575C" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_13454)">
+<path d="M-161.598 76.8929C-161.598 72.1796 -157.777 68.3586 -153.063 68.3586H34.8145C39.5279 68.3586 43.3488 72.1796 43.3488 76.8929V90.7408C43.3488 91.33 42.8712 91.8076 42.282 91.8076H-160.531C-161.12 91.8076 -161.598 91.33 -161.598 90.7408V76.8929Z" fill="#5D666B"/>
+</g>
+<path d="M34.8145 67.8254C39.8224 67.8254 43.8818 71.8849 43.8818 76.8928V90.7405C43.8818 91.6242 43.1659 92.341 42.2822 92.3411H-160.531C-161.415 92.3409 -162.131 91.6241 -162.131 90.7405V76.8928C-162.131 71.885 -158.071 67.8255 -153.063 67.8254H34.8145Z" stroke="#373D40" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_13454)" style="mix-blend-mode:plus-lighter">
+<path d="M35.5225 69.8455C39.3519 69.8455 42.4559 72.9496 42.4561 76.7791V92.2478H-160.232V76.7791C-160.232 72.9497 -157.128 69.8456 -153.299 69.8455H35.5225Z" stroke="url(#paint2_linear_450_13454)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_13454" maskUnits="userSpaceOnUse" x="-168.965" y="-0.668945" width="219" height="69" fill="black">
+<rect fill="white" x="-168.965" y="-0.668945" width="219" height="69"/>
+<path d="M45.7178 12.9092C35.9202 12.9092 27.9775 20.8519 27.9775 30.6494V63.4443H19.543V30.6494C19.543 20.8519 11.6003 12.9092 1.80273 12.9092V12.9053H-120.027V12.9092C-129.825 12.9094 -137.767 20.852 -137.767 30.6494V63.4443H-146.201V30.6494C-146.201 20.8519 -154.144 12.9093 -163.941 12.9092V6.76562H45.7178V12.9092ZM45.7207 5.83398H-163.965V4.33105H45.7207V5.83398Z"/>
+</mask>
+<path d="M45.7178 12.9092C35.9202 12.9092 27.9775 20.8519 27.9775 30.6494V63.4443H19.543V30.6494C19.543 20.8519 11.6003 12.9092 1.80273 12.9092V12.9053H-120.027V12.9092C-129.825 12.9094 -137.767 20.852 -137.767 30.6494V63.4443H-146.201V30.6494C-146.201 20.8519 -154.144 12.9093 -163.941 12.9092V6.76562H45.7178V12.9092ZM45.7207 5.83398H-163.965V4.33105H45.7207V5.83398Z" fill="#8E989E"/>
+<path d="M45.7178 12.9092V17.1763C48.0744 17.1763 49.9849 15.2659 49.9849 12.9092H45.7178ZM27.9775 63.4443V67.7115C30.3342 67.7115 32.2447 65.801 32.2447 63.4443H27.9775ZM19.543 63.4443H15.2758C15.2758 65.801 17.1863 67.7115 19.543 67.7115V63.4443ZM1.80273 12.9092H-2.4644C-2.4644 15.2659 -0.55394 17.1763 1.80273 17.1763V12.9092ZM1.80273 12.9053H6.06987C6.06987 10.5486 4.15941 8.63813 1.80273 8.63813V12.9053ZM-120.027 12.9053V8.63813C-122.384 8.63813 -124.294 10.5486 -124.294 12.9053H-120.027ZM-120.027 12.9092L-120.027 17.1763C-117.671 17.1763 -115.76 15.2658 -115.76 12.9092H-120.027ZM-137.767 63.4443V67.7115C-135.41 67.7115 -133.499 65.801 -133.499 63.4443H-137.767ZM-146.201 63.4443H-150.468C-150.468 65.801 -148.558 67.7115 -146.201 67.7115V63.4443ZM-163.941 12.9092H-168.209C-168.209 15.2658 -166.298 17.1763 -163.941 17.1763L-163.941 12.9092ZM-163.941 6.76562V2.49849C-166.298 2.49849 -168.209 4.40895 -168.209 6.76562H-163.941ZM45.7178 6.76562H49.9849C49.9849 4.40895 48.0744 2.49849 45.7178 2.49849V6.76562ZM45.7207 5.83398V10.1011C48.0774 10.1011 49.9878 8.19066 49.9878 5.83398H45.7207ZM-163.965 5.83398H-168.232C-168.232 8.19066 -166.322 10.1011 -163.965 10.1011V5.83398ZM-163.965 4.33105V0.0639153C-166.322 0.0639153 -168.232 1.97438 -168.232 4.33105L-163.965 4.33105ZM45.7207 4.33105H49.9878C49.9878 1.97438 48.0774 0.0639153 45.7207 0.0639153V4.33105ZM45.7178 12.9092V8.64204C33.5636 8.64204 23.7104 18.4952 23.7104 30.6494H27.9775H32.2447C32.2447 23.2086 38.2769 17.1763 45.7178 17.1763V12.9092ZM27.9775 30.6494H23.7104V63.4443H27.9775H32.2447V30.6494H27.9775ZM27.9775 63.4443V59.1772H19.543V63.4443V67.7115H27.9775V63.4443ZM19.543 63.4443H23.8101V30.6494H19.543H15.2758V63.4443H19.543ZM19.543 30.6494H23.8101C23.8101 18.4952 13.9569 8.64204 1.80273 8.64204V12.9092V17.1763C9.24359 17.1763 15.2758 23.2086 15.2758 30.6494H19.543ZM1.80273 12.9092H6.06987V12.9053H1.80273H-2.4644V12.9092H1.80273ZM1.80273 12.9053V8.63813H-120.027V12.9053V17.1724H1.80273V12.9053ZM-120.027 12.9053H-124.294V12.9092H-120.027H-115.76V12.9053H-120.027ZM-120.027 12.9092L-120.027 8.64204C-132.182 8.64231 -142.034 18.4955 -142.034 30.6494H-137.767H-133.499C-133.499 23.2085 -127.468 17.1765 -120.027 17.1763L-120.027 12.9092ZM-137.767 30.6494H-142.034V63.4443H-137.767H-133.499V30.6494H-137.767ZM-137.767 63.4443V59.1772H-146.201V63.4443V67.7115H-137.767V63.4443ZM-146.201 63.4443H-141.934V30.6494H-146.201H-150.468V63.4443H-146.201ZM-146.201 30.6494H-141.934C-141.934 18.4952 -151.787 8.64217 -163.941 8.64204L-163.941 12.9092L-163.941 17.1763C-156.501 17.1764 -150.468 23.2087 -150.468 30.6494H-146.201ZM-163.941 12.9092H-159.674V6.76562H-163.941H-168.209V12.9092H-163.941ZM-163.941 6.76562V11.0328H45.7178V6.76562V2.49849H-163.941V6.76562ZM45.7178 6.76562H41.4506V12.9092H45.7178H49.9849V6.76562H45.7178ZM45.7207 5.83398V1.56684H-163.965V5.83398V10.1011H45.7207V5.83398ZM-163.965 5.83398H-159.698V4.33105H-163.965H-168.232V5.83398H-163.965ZM-163.965 4.33105V8.59819H45.7207V4.33105V0.0639153H-163.965V4.33105ZM45.7207 4.33105H41.4536V5.83398H45.7207H49.9878V4.33105H45.7207Z" fill="#4E575C" mask="url(#path-7-outside-1_450_13454)"/>
+<path d="M45.7178 11.8424C45.7178 12.4316 45.239 12.9058 44.6508 12.9407C35.3501 13.4925 27.9775 21.2101 27.9775 30.6494V62.3776C27.9775 62.9667 27.4999 63.4443 26.9108 63.4443H20.6098C20.0206 63.4443 19.543 62.9667 19.543 62.3776V30.6494C19.543 20.8525 11.6013 12.9102 1.8047 12.9092C1.80362 12.9092 1.80273 12.9083 1.80273 12.9072C1.80273 12.9061 1.80186 12.9053 1.80078 12.9053H-120.025C-120.026 12.9053 -120.027 12.9061 -120.027 12.9072C-120.027 12.9083 -120.028 12.9092 -120.029 12.9092C-129.826 12.9105 -137.767 20.8527 -137.767 30.6494V62.3776C-137.767 62.9667 -138.244 63.4443 -138.833 63.4443H-145.134C-145.724 63.4443 -146.201 62.9667 -146.201 62.3776V30.6494C-146.201 21.2102 -153.574 13.4926 -162.874 12.9407C-163.463 12.9059 -163.941 12.4316 -163.941 11.8424V7.83241C-163.941 7.24324 -163.464 6.76562 -162.875 6.76562H44.651C45.2402 6.76562 45.7178 7.24324 45.7178 7.83241V11.8424ZM45.7207 5.08252C45.7207 5.49754 45.3843 5.83398 44.9692 5.83398H-163.213C-163.628 5.83398 -163.965 5.49754 -163.965 5.08252C-163.965 4.6675 -163.628 4.33105 -163.213 4.33105H44.9692C45.3843 4.33105 45.7207 4.6675 45.7207 5.08252Z" fill="url(#paint3_linear_450_13454)"/>
+<mask id="path-10-outside-2_450_13454" maskUnits="userSpaceOnUse" x="-165.965" y="2.33105" width="213" height="63" fill="black">
+<rect fill="white" x="-165.965" y="2.33105" width="213" height="63"/>
+<path d="M45.7178 12.9092C35.9202 12.9092 27.9775 20.8519 27.9775 30.6494V63.4443H19.543V30.6494C19.543 20.8519 11.6003 12.9092 1.80273 12.9092V12.9053H-120.027V12.9092C-129.825 12.9094 -137.767 20.852 -137.767 30.6494V63.4443H-146.201V30.6494C-146.201 20.8519 -154.144 12.9093 -163.941 12.9092V6.76562H45.7178V12.9092ZM45.7207 5.83398H-163.965V4.33105H45.7207V5.83398Z"/>
+</mask>
+<path d="M45.7178 12.9092V13.976C46.3069 13.976 46.7846 13.4983 46.7846 12.9092H45.7178ZM27.9775 63.4443V64.5111C28.5667 64.5111 29.0443 64.0335 29.0443 63.4443H27.9775ZM19.543 63.4443H18.4762C18.4762 64.0335 18.9538 64.5111 19.543 64.5111V63.4443ZM1.80273 12.9092H0.735947C0.735947 13.4983 1.21356 13.976 1.80273 13.976V12.9092ZM1.80273 12.9053H2.86952C2.86952 12.3161 2.39191 11.8385 1.80273 11.8385V12.9053ZM-120.027 12.9053V11.8385C-120.617 11.8385 -121.094 12.3161 -121.094 12.9053H-120.027ZM-120.027 12.9092L-120.027 13.976C-119.438 13.976 -118.961 13.4983 -118.961 12.9092H-120.027ZM-137.767 63.4443V64.5111C-137.177 64.5111 -136.7 64.0335 -136.7 63.4443H-137.767ZM-146.201 63.4443H-147.268C-147.268 64.0335 -146.79 64.5111 -146.201 64.5111V63.4443ZM-163.941 12.9092H-165.008C-165.008 13.4983 -164.531 13.976 -163.941 13.976L-163.941 12.9092ZM-163.941 6.76562V5.69884C-164.531 5.69884 -165.008 6.17646 -165.008 6.76562H-163.941ZM45.7178 6.76562H46.7846C46.7846 6.17646 46.3069 5.69884 45.7178 5.69884V6.76562ZM45.7207 5.83398V6.90077C46.3099 6.90077 46.7875 6.42315 46.7875 5.83398H45.7207ZM-163.965 5.83398H-165.032C-165.032 6.42315 -164.554 6.90077 -163.965 6.90077V5.83398ZM-163.965 4.33105V3.26427C-164.554 3.26427 -165.032 3.74189 -165.032 4.33105H-163.965ZM45.7207 4.33105H46.7875C46.7875 3.74189 46.3099 3.26427 45.7207 3.26427V4.33105ZM45.7178 12.9092V11.8424C35.3311 11.8424 26.9108 20.2627 26.9108 30.6494H27.9775H29.0443C29.0443 21.441 36.5094 13.976 45.7178 13.976V12.9092ZM27.9775 30.6494H26.9108V63.4443H27.9775H29.0443V30.6494H27.9775ZM27.9775 63.4443V62.3776H19.543V63.4443V64.5111H27.9775V63.4443ZM19.543 63.4443H20.6098V30.6494H19.543H18.4762V63.4443H19.543ZM19.543 30.6494H20.6098C20.6098 20.2627 12.1894 11.8424 1.80273 11.8424V12.9092V13.976C11.0111 13.976 18.4762 21.4411 18.4762 30.6494H19.543ZM1.80273 12.9092H2.86952V12.9053H1.80273H0.735947V12.9092H1.80273ZM1.80273 12.9053V11.8385H-120.027V12.9053V13.9721H1.80273V12.9053ZM-120.027 12.9053H-121.094V12.9092H-120.027H-118.961V12.9053H-120.027ZM-120.027 12.9092L-120.027 11.8424C-130.414 11.8426 -138.833 20.2629 -138.833 30.6494H-137.767H-136.7C-136.7 21.4411 -129.235 13.9762 -120.027 13.976L-120.027 12.9092ZM-137.767 30.6494H-138.833V63.4443H-137.767H-136.7V30.6494H-137.767ZM-137.767 63.4443V62.3776H-146.201V63.4443V64.5111H-137.767V63.4443ZM-146.201 63.4443H-145.134V30.6494H-146.201H-147.268V63.4443H-146.201ZM-146.201 30.6494H-145.134C-145.134 20.2628 -153.555 11.8425 -163.941 11.8424L-163.941 12.9092L-163.941 13.976C-154.733 13.9761 -147.268 21.4411 -147.268 30.6494H-146.201ZM-163.941 12.9092H-162.875V6.76562H-163.941H-165.008V12.9092H-163.941ZM-163.941 6.76562V7.83241H45.7178V6.76562V5.69884H-163.941V6.76562ZM45.7178 6.76562H44.651V12.9092H45.7178H46.7846V6.76562H45.7178ZM45.7207 5.83398V4.7672H-163.965V5.83398V6.90077H45.7207V5.83398ZM-163.965 5.83398H-162.898V4.33105H-163.965H-165.032V5.83398H-163.965ZM-163.965 4.33105V5.39784H45.7207V4.33105V3.26427H-163.965V4.33105ZM45.7207 4.33105H44.6539V5.83398H45.7207H46.7875V4.33105H45.7207Z" fill="#040404" fill-opacity="0.5" mask="url(#path-10-outside-2_450_13454)"/>
+<g filter="url(#filter3_f_450_13454)" style="mix-blend-mode:plus-lighter">
+<path d="M34.4551 65.5781C40.6414 65.5781 45.6562 70.593 45.6562 76.7793V94.3809H-164.5V76.7793C-164.5 70.593 -159.485 65.5781 -153.299 65.5781H34.4551Z" stroke="url(#paint4_linear_450_13454)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_13454)" style="mix-blend-mode:plus-lighter">
+<mask id="path-13-outside-3_450_13454" maskUnits="userSpaceOnUse" x="-165.965" y="3.30469" width="212" height="61" fill="black">
+<rect fill="white" x="-165.965" y="3.30469" width="212" height="61"/>
+<path d="M44.0605 5.30469V11.4541C34.3396 11.4542 26.4592 19.3347 26.459 29.0557V62.9102H18.0898V29.0557C18.0897 19.7274 10.8333 12.0958 1.65723 11.4941H-121.562C-130.737 12.0959 -137.994 19.7275 -137.994 29.0557V62.9102H-146.363V29.0557C-146.363 19.3346 -154.244 11.4541 -163.965 11.4541V5.30469H44.0605Z"/>
+</mask>
+<path d="M44.0605 5.30469H45.1273V4.2379H44.0605V5.30469ZM44.0605 11.4541L44.0606 12.5209L45.1273 12.5209V11.4541H44.0605ZM26.459 29.0557L25.3922 29.0556V29.0557H26.459ZM26.459 62.9102V63.9769H27.5258V62.9102H26.459ZM18.0898 62.9102H17.0231V63.9769H18.0898V62.9102ZM18.0898 29.0557H19.1566V29.0556L18.0898 29.0557ZM1.65723 11.4941L1.72702 10.4296L1.69217 10.4274H1.65723V11.4941ZM-121.562 11.4941V10.4274H-121.596L-121.631 10.4296L-121.562 11.4941ZM-137.994 29.0557L-139.061 29.0556V29.0557H-137.994ZM-137.994 62.9102V63.9769H-136.927V62.9102H-137.994ZM-146.363 62.9102H-147.43V63.9769H-146.363V62.9102ZM-146.363 29.0557H-145.296L-145.296 29.0556L-146.363 29.0557ZM-163.965 11.4541H-165.032V12.5209H-163.965L-163.965 11.4541ZM-163.965 5.30469V4.2379H-165.032V5.30469H-163.965ZM44.0605 5.30469H42.9938V11.4541H44.0605H45.1273V5.30469H44.0605ZM44.0605 11.4541L44.0605 10.3873C33.7504 10.3874 25.3924 18.7455 25.3922 29.0556L26.459 29.0557L27.5258 29.0557C27.5259 19.9239 34.9287 12.521 44.0606 12.5209L44.0605 11.4541ZM26.459 29.0557H25.3922V62.9102H26.459H27.5258V29.0557H26.459ZM26.459 62.9102V61.8434H18.0898V62.9102V63.9769H26.459V62.9102ZM18.0898 62.9102H19.1566V29.0557H18.0898H17.0231V62.9102H18.0898ZM18.0898 29.0557L19.1566 29.0556C19.1565 19.1615 11.4601 11.0679 1.72702 10.4296L1.65723 11.4941L1.58743 12.5586C10.2065 13.1238 17.0229 20.2933 17.0231 29.0557L18.0898 29.0557ZM1.65723 11.4941V10.4274H-121.562V11.4941V12.5609H1.65723V11.4941ZM-121.562 11.4941L-121.631 10.4296C-131.364 11.068 -139.061 19.1616 -139.061 29.0556L-137.994 29.0557L-136.927 29.0557C-136.927 20.2934 -130.111 13.1239 -121.492 12.5586L-121.562 11.4941ZM-137.994 29.0557H-139.061V62.9102H-137.994H-136.927V29.0557H-137.994ZM-137.994 62.9102V61.8434H-146.363V62.9102V63.9769H-137.994V62.9102ZM-146.363 62.9102H-145.296V29.0557H-146.363H-147.43V62.9102H-146.363ZM-146.363 29.0557L-145.296 29.0556C-145.297 18.7455 -153.655 10.3873 -163.965 10.3873L-163.965 11.4541L-163.965 12.5209C-154.833 12.5209 -147.43 19.9238 -147.43 29.0557L-146.363 29.0557ZM-163.965 11.4541H-162.898V5.30469H-163.965H-165.032V11.4541H-163.965ZM-163.965 5.30469V6.37147H44.0605V5.30469V4.2379H-163.965V5.30469Z" fill="url(#paint5_linear_450_13454)" mask="url(#path-13-outside-3_450_13454)"/>
+</g>
+<g filter="url(#filter5_f_450_13454)" style="mix-blend-mode:plus-lighter">
+<mask id="path-15-outside-4_450_13454" maskUnits="userSpaceOnUse" x="-164.896" y="3.30469" width="211" height="61" fill="black">
+<rect fill="white" x="-164.896" y="3.30469" width="211" height="61"/>
+<path d="M42.9947 5.30469C43.5839 5.30469 44.0615 5.7823 44.0615 6.37147V10.3873C44.0615 10.9765 43.5827 11.4507 42.9946 11.4861C33.8203 12.0377 26.5508 19.6529 26.5508 28.9658V61.8434C26.5508 62.4325 26.0732 62.9102 25.484 62.9102H19.2914C18.7022 62.9102 18.2246 62.4325 18.2246 61.8434V28.9658C18.2246 19.6906 11.0133 12.1004 1.8916 11.4941H-120.726C-129.848 12.1002 -137.059 19.6904 -137.059 28.9658V61.8434C-137.059 62.4325 -137.536 62.9102 -138.125 62.9102H-144.318C-144.907 62.9102 -145.385 62.4325 -145.385 61.8434V28.9658C-145.385 19.6527 -152.655 12.0375 -161.83 11.4861C-162.418 11.4507 -162.896 10.9765 -162.896 10.3873V6.37147C-162.896 5.7823 -162.419 5.30469 -161.83 5.30469H42.9947Z"/>
+</mask>
+<path d="M1.8916 11.4941L1.96236 10.4297L1.92702 10.4274H1.8916V11.4941ZM-120.726 11.4941V10.4274H-120.761L-120.796 10.4297L-120.726 11.4941ZM-161.83 11.4861L-161.766 10.4212L-161.83 11.4861ZM44.0615 6.37147H42.9947V10.3873H44.0615H45.1283V6.37147H44.0615ZM42.9946 11.4861L42.9306 10.4212C33.1964 11.0065 25.484 19.0852 25.484 28.9658H26.5508H27.6176C27.6176 20.2205 34.4442 13.0689 43.0586 12.551L42.9946 11.4861ZM26.5508 28.9658H25.484V61.8434H26.5508H27.6176V28.9658H26.5508ZM25.484 62.9102V61.8434H19.2914V62.9102V63.9769H25.484V62.9102ZM18.2246 61.8434H19.2914V28.9658H18.2246H17.1578V61.8434H18.2246ZM18.2246 28.9658H19.2914C19.2914 19.1251 11.6407 11.073 1.96236 10.4297L1.8916 11.4941L1.82085 12.5586C10.3859 13.1279 17.1578 20.2562 17.1578 28.9658H18.2246ZM1.8916 11.4941V10.4274H-120.726V11.4941V12.5609H1.8916V11.4941ZM-120.726 11.4941L-120.796 10.4297C-130.475 11.0727 -138.125 19.1249 -138.125 28.9658H-137.059H-135.992C-135.992 20.2559 -129.22 13.1276 -120.655 12.5586L-120.726 11.4941ZM-137.059 28.9658H-138.125V61.8434H-137.059H-135.992V28.9658H-137.059ZM-138.125 62.9102V61.8434H-144.318V62.9102V63.9769H-138.125V62.9102ZM-145.385 61.8434H-144.318V28.9658H-145.385H-146.452V61.8434H-145.385ZM-145.385 28.9658H-144.318C-144.318 19.085 -152.031 11.0063 -161.766 10.4212L-161.83 11.4861L-161.894 12.5509C-153.279 13.0687 -146.452 20.2205 -146.452 28.9658H-145.385ZM-162.896 10.3873H-161.83V6.37147H-162.896H-163.963V10.3873H-162.896ZM-161.83 5.30469V6.37147H42.9947V5.30469V4.2379H-161.83V5.30469ZM-162.896 6.37147H-161.83V6.37147V5.30469V4.2379C-163.008 4.2379 -163.963 5.19313 -163.963 6.37147H-162.896ZM-144.318 62.9102V61.8434H-144.318H-145.385H-146.452C-146.452 63.0217 -145.496 63.9769 -144.318 63.9769V62.9102ZM-137.059 61.8434H-138.125H-138.125V62.9102V63.9769C-136.947 63.9769 -135.992 63.0217 -135.992 61.8434H-137.059ZM19.2914 62.9102V61.8434V61.8434H18.2246H17.1578C17.1578 63.0217 18.1131 63.9769 19.2914 63.9769V62.9102ZM26.5508 61.8434H25.484V61.8434V62.9102V63.9769C26.6623 63.9769 27.6176 63.0217 27.6176 61.8434H26.5508ZM-161.83 11.4861L-161.766 10.4212C-161.79 10.4197 -161.811 10.409 -161.823 10.3967C-161.828 10.3911 -161.83 10.3873 -161.83 10.387C-161.83 10.3869 -161.83 10.3872 -161.83 10.3878C-161.83 10.3885 -161.83 10.3885 -161.83 10.3873H-162.896H-163.963C-163.963 11.5819 -163.003 12.4843 -161.894 12.5509L-161.83 11.4861ZM44.0615 10.3873H42.9947C42.9947 10.3885 42.9946 10.3885 42.9948 10.3879C42.9949 10.3873 42.995 10.3869 42.995 10.387C42.9949 10.3873 42.9932 10.3911 42.9877 10.3967C42.9756 10.409 42.9555 10.4197 42.9306 10.4212L42.9946 11.4861L43.0586 12.551C44.168 12.4843 45.1283 11.5819 45.1283 10.3873H44.0615ZM44.0615 6.37147H45.1283C45.1283 5.19313 44.1731 4.2379 42.9947 4.2379V5.30469V6.37147V6.37147H44.0615Z" fill="url(#paint6_linear_450_13454)" mask="url(#path-15-outside-4_450_13454)"/>
+</g>
+<g filter="url(#filter6_f_450_13454)">
+<path d="M-166.098 13.8391V4.23806C-166.098 3.05973 -165.142 2.10449 -163.964 2.10449H46.1925C47.3709 2.10449 48.3261 3.05972 48.3261 4.23806V13.8391" stroke="url(#paint7_linear_450_13454)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_13454)">
+<path d="M20.0537 63.4442V29.3071C20.0537 22.9064 14.1864 12.2385 0.851562 12.2385" stroke="url(#paint8_linear_450_13454)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter8_f_450_13454)">
+<path d="M-135.162 62.911V26.9248C-134.807 22.5628 -131.428 15.439 -121.294 13.8389H-0.213825C9.38724 14.3723 16.3213 18.2008 16.3213 31.2867V62.911" stroke="url(#paint9_linear_450_13454)" stroke-width="1.06678"/>
+</g>
+<path d="M-150.098 63.4446L31.8725 63.4446" stroke="url(#paint10_linear_450_13454)" stroke-width="1.06678"/>
+<g filter="url(#filter9_f_450_13454)">
+<path d="M20.5898 45.8423V62.3775H27.5239V45.8423" stroke="url(#paint11_linear_450_13454)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_13454" x="-134.098" y="17.0391" width="150.416" height="50.1388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_13454"/>
+</filter>
+<filter id="filter1_ii_450_13454" x="-162.664" y="66.225" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.65098 0 0 0 0 0.701961 0 0 0 0 0.733333 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_13454"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.144809 0 0 0 0 0.156539 0 0 0 0 0.168269 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_13454" result="effect2_innerShadow_450_13454"/>
+</filter>
+<filter id="filter2_f_450_13454" x="-161.832" y="68.245" width="205.889" height="25.6031" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<filter id="filter3_f_450_13454" x="-166.1" y="63.9776" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<filter id="filter4_f_450_13454" x="-166.098" y="3.17101" width="212.292" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<filter id="filter5_f_450_13454" x="-165.03" y="3.17101" width="211.225" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<filter id="filter6_f_450_13454" x="-167.698" y="0.50426" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<filter id="filter7_f_450_13454" x="-0.215222" y="10.6383" width="21.8699" height="53.8726" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<filter id="filter8_f_450_13454" x="-136.762" y="12.2386" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<filter id="filter9_f_450_13454" x="18.9899" y="44.7755" width="10.1336" height="19.2022" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13454"/>
+</filter>
+<linearGradient id="paint0_linear_450_13454" x1="-59.4227" y1="17.0391" x2="-59.4227" y2="66.1112" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F696E"/>
+<stop offset="0.05" stop-color="#4E575C"/>
+<stop offset="1" stop-color="#3E494E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_13454" x1="-136.765" y1="34.641" x2="15.2522" y2="34.641" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5D666B"/>
+<stop offset="0.077962" stop-color="#4E575C" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#4E575C" stop-opacity="0.305882"/>
+<stop offset="1" stop-color="#5D666B"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_13454" x1="-58.888" y1="70.3787" x2="-58.888" y2="91.7144" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6B3BB"/>
+<stop offset="1" stop-color="#A6B3BB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_13454" x1="-163.965" y1="33.8877" x2="45.7207" y2="33.8877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A7AEB1"/>
+<stop offset="0.144231" stop-color="#9AA3A8"/>
+<stop offset="0.889423" stop-color="#9AA3A8"/>
+<stop offset="0.961538" stop-color="#7B888F"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_13454" x1="-59.4219" y1="66.1113" x2="-59.4219" y2="93.8477" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6B3BB"/>
+<stop offset="1" stop-color="#A6B3BB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_13454" x1="-59.9521" y1="5.30469" x2="-59.9521" y2="14.3713" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC7E0"/>
+<stop offset="1" stop-color="#AFC7E0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_13454" x1="-149.63" y1="12.2378" x2="-93.8353" y2="33.9126" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_13454" x1="-58.8858" y1="2.10449" x2="-58.8858" y2="13.8391" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADBED0"/>
+<stop offset="1" stop-color="#ADBED0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_13454" x1="13.12" y1="15.9723" x2="6.17058" y2="19.5245" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADBED0"/>
+<stop offset="1" stop-color="#ADBED0" stop-opacity="0.929412"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_13454" x1="-59.4204" y1="13.8389" x2="-59.4204" y2="62.911" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_13454" x1="31.8725" y1="63.4446" x2="-150.098" y2="63.4446" gradientUnits="userSpaceOnUse">
+<stop stop-color="#232521" stop-opacity="0"/>
+<stop offset="0.100962" stop-color="#232521"/>
+<stop offset="0.9375" stop-color="#232521"/>
+<stop offset="1" stop-color="#232521" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_13454" x1="22.7234" y1="61.8441" x2="22.19" y2="36.2412" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_13454">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/왼쪽.svg
new file mode 100644
index 0000000..d631d86
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/왼쪽.svg	
@@ -0,0 +1,169 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_13383)">
+<g filter="url(#filter0_i_450_13383)">
+<path d="M34.1367 29.8405C34.1367 22.7704 39.8681 17.0391 46.9381 17.0391H170.685C177.755 17.0391 183.487 22.7705 183.487 29.8405V66.1112H34.1367V29.8405Z" fill="url(#paint0_linear_450_13383)"/>
+<path d="M34.1367 29.8405C34.1367 22.7704 39.8681 17.0391 46.9381 17.0391H170.685C177.755 17.0391 183.487 22.7705 183.487 29.8405V66.1112H34.1367V29.8405Z" fill="url(#paint1_linear_450_13383)"/>
+</g>
+<path d="M46.9385 17.5723H170.686C177.461 17.5725 182.953 23.0655 182.953 29.8408V65.5781H34.6699V29.8408C34.6699 23.0654 40.163 17.5723 46.9385 17.5723Z" stroke="black" stroke-width="1.06678"/>
+<path d="M203.049 66.2249C208.94 66.2249 213.717 71.0012 213.717 76.8928V93.9417H4.50293V76.8928C4.50298 71.0012 9.27929 66.2249 15.1709 66.2249H203.049Z" fill="#5D666B" stroke="#4E575C" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_13383)">
+<path d="M6.63672 76.8929C6.63672 72.1796 10.4576 68.3586 15.171 68.3586H203.049C207.762 68.3586 211.583 72.1796 211.583 76.8929V90.7408C211.583 91.33 211.106 91.8076 210.516 91.8076H7.70351C7.11434 91.8076 6.63672 91.33 6.63672 90.7408V76.8929Z" fill="#5D666B"/>
+</g>
+<path d="M203.049 67.8254C208.057 67.8254 212.116 71.8849 212.116 76.8928V90.7405C212.116 91.6242 211.4 92.341 210.517 92.3411H7.70312C6.81955 92.3409 6.10352 91.6241 6.10352 90.7405V76.8928C6.10357 71.885 10.163 67.8255 15.1709 67.8254H203.049Z" stroke="#373D40" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_13383)" style="mix-blend-mode:plus-lighter">
+<path d="M203.757 69.8455C207.586 69.8455 210.69 72.9496 210.69 76.7791V92.2478H8.00195V76.7791C8.00213 72.9497 11.1062 69.8456 14.9355 69.8455H203.757Z" stroke="url(#paint2_linear_450_13383)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_13383" maskUnits="userSpaceOnUse" x="-0.732422" y="-0.668945" width="219" height="69" fill="black">
+<rect fill="white" x="-0.732422" y="-0.668945" width="219" height="69"/>
+<path d="M213.952 12.9092C204.155 12.9092 196.212 20.8519 196.212 30.6494V63.4443H187.777V30.6494C187.777 20.8519 179.835 12.9092 170.037 12.9092V12.9053H48.2061V12.9092C38.4085 12.9092 30.4658 20.8519 30.4658 30.6494V63.4443H22.0312V30.6494C22.0312 20.8519 14.0885 12.9092 4.29102 12.9092V6.76562H213.952V12.9092ZM213.953 5.83398H4.26758V4.33105H213.953V5.83398Z"/>
+</mask>
+<path d="M213.952 12.9092C204.155 12.9092 196.212 20.8519 196.212 30.6494V63.4443H187.777V30.6494C187.777 20.8519 179.835 12.9092 170.037 12.9092V12.9053H48.2061V12.9092C38.4085 12.9092 30.4658 20.8519 30.4658 30.6494V63.4443H22.0312V30.6494C22.0312 20.8519 14.0885 12.9092 4.29102 12.9092V6.76562H213.952V12.9092ZM213.953 5.83398H4.26758V4.33105H213.953V5.83398Z" fill="#8E989E"/>
+<path d="M213.952 12.9092V17.1763C216.309 17.1763 218.219 15.2659 218.219 12.9092H213.952ZM196.212 63.4443V67.7115C198.569 67.7115 200.479 65.801 200.479 63.4443H196.212ZM187.777 63.4443H183.51C183.51 65.801 185.421 67.7115 187.777 67.7115V63.4443ZM170.037 12.9092H165.77C165.77 15.2659 167.68 17.1763 170.037 17.1763V12.9092ZM170.037 12.9053H174.304C174.304 10.5486 172.394 8.63813 170.037 8.63813V12.9053ZM48.2061 12.9053V8.63813C45.8494 8.63813 43.9389 10.5486 43.9389 12.9053H48.2061ZM48.2061 12.9092V17.1763C50.5627 17.1763 52.4732 15.2659 52.4732 12.9092H48.2061ZM30.4658 63.4443V67.7115C32.8225 67.7115 34.733 65.801 34.733 63.4443H30.4658ZM22.0312 63.4443H17.7641C17.7641 65.801 19.6746 67.7115 22.0312 67.7115V63.4443ZM4.29102 12.9092H0.0238762C0.0238762 15.2659 1.93434 17.1763 4.29102 17.1763V12.9092ZM4.29102 6.76562V2.49849C1.93434 2.49849 0.0238762 4.40895 0.0238762 6.76562H4.29102ZM213.952 6.76562H218.219C218.219 4.40895 216.309 2.49849 213.952 2.49849V6.76562ZM213.953 5.83398V10.1011C216.31 10.1011 218.22 8.19066 218.22 5.83398H213.953ZM4.26758 5.83398H0.00043869C0.00043869 8.19066 1.9109 10.1011 4.26758 10.1011L4.26758 5.83398ZM4.26758 4.33105V0.0639153C1.9109 0.0639153 0.00043869 1.97438 0.00043869 4.33105L4.26758 4.33105ZM213.953 4.33105H218.22C218.22 1.97438 216.31 0.0639153 213.953 0.0639153V4.33105ZM213.952 12.9092V8.64204C201.798 8.64204 191.945 18.4952 191.945 30.6494H196.212H200.479C200.479 23.2086 206.511 17.1763 213.952 17.1763V12.9092ZM196.212 30.6494H191.945V63.4443H196.212H200.479V30.6494H196.212ZM196.212 63.4443V59.1772H187.777V63.4443V67.7115H196.212V63.4443ZM187.777 63.4443H192.044V30.6494H187.777H183.51V63.4443H187.777ZM187.777 30.6494H192.044C192.044 18.4952 182.191 8.64204 170.037 8.64204V12.9092V17.1763C177.478 17.1763 183.51 23.2086 183.51 30.6494H187.777ZM170.037 12.9092H174.304V12.9053H170.037H165.77V12.9092H170.037ZM170.037 12.9053V8.63813H48.2061V12.9053V17.1724H170.037V12.9053ZM48.2061 12.9053H43.9389V12.9092H48.2061H52.4732V12.9053H48.2061ZM48.2061 12.9092V8.64204C36.0518 8.64204 26.1987 18.4952 26.1987 30.6494H30.4658H34.733C34.733 23.2086 40.7652 17.1763 48.2061 17.1763V12.9092ZM30.4658 30.6494H26.1987V63.4443H30.4658H34.733V30.6494H30.4658ZM30.4658 63.4443V59.1772H22.0312V63.4443V67.7115H30.4658V63.4443ZM22.0312 63.4443H26.2984V30.6494H22.0312H17.7641V63.4443H22.0312ZM22.0312 30.6494H26.2984C26.2984 18.4952 16.4452 8.64204 4.29102 8.64204V12.9092V17.1763C11.7319 17.1763 17.7641 23.2086 17.7641 30.6494H22.0312ZM4.29102 12.9092H8.55816V6.76562H4.29102H0.0238762V12.9092H4.29102ZM4.29102 6.76562V11.0328H213.952V6.76562V2.49849H4.29102V6.76562ZM213.952 6.76562H209.685V12.9092H213.952H218.219V6.76562H213.952ZM213.953 5.83398V1.56684H4.26758V5.83398V10.1011H213.953V5.83398ZM4.26758 5.83398H8.53472V4.33105H4.26758H0.00043869V5.83398H4.26758ZM4.26758 4.33105V8.59819H213.953V4.33105V0.0639153H4.26758V4.33105ZM213.953 4.33105H209.686V5.83398H213.953H218.22V4.33105H213.953Z" fill="#4E575C" mask="url(#path-7-outside-1_450_13383)"/>
+<path d="M213.952 11.8424C213.952 12.4316 213.473 12.9058 212.885 12.9407C203.584 13.4925 196.212 21.2101 196.212 30.6494V62.3776C196.212 62.9667 195.734 63.4443 195.145 63.4443H188.844C188.255 63.4443 187.777 62.9667 187.777 62.3776V30.6494C187.777 20.8525 179.836 12.9102 170.039 12.9092C170.038 12.9092 170.037 12.9083 170.037 12.9072C170.037 12.9061 170.036 12.9053 170.035 12.9053H48.208C48.2069 12.9053 48.2061 12.9061 48.2061 12.9072C48.2061 12.9083 48.2052 12.9092 48.2041 12.9092C38.4075 12.9102 30.4658 20.8525 30.4658 30.6494V62.3776C30.4658 62.9667 29.9882 63.4443 29.399 63.4443H23.098C22.5089 63.4443 22.0312 62.9667 22.0312 62.3776V30.6494C22.0312 21.2101 14.6587 13.4925 5.35794 12.9407C4.76981 12.9058 4.29102 12.4316 4.29102 11.8424V7.83241C4.29102 7.24324 4.76863 6.76562 5.3578 6.76562H212.885C213.475 6.76562 213.952 7.24324 213.952 7.83241V11.8424ZM213.953 5.08252C213.953 5.49754 213.617 5.83398 213.202 5.83398H5.01905C4.60402 5.83398 4.26758 5.49754 4.26758 5.08252C4.26758 4.6675 4.60402 4.33105 5.01904 4.33105H213.202C213.617 4.33105 213.953 4.6675 213.953 5.08252Z" fill="url(#paint3_linear_450_13383)"/>
+<mask id="path-10-outside-2_450_13383" maskUnits="userSpaceOnUse" x="2.26758" y="2.33105" width="213" height="63" fill="black">
+<rect fill="white" x="2.26758" y="2.33105" width="213" height="63"/>
+<path d="M213.952 12.9092C204.155 12.9092 196.212 20.8519 196.212 30.6494V63.4443H187.777V30.6494C187.777 20.8519 179.835 12.9092 170.037 12.9092V12.9053H48.2061V12.9092C38.4085 12.9092 30.4658 20.8519 30.4658 30.6494V63.4443H22.0312V30.6494C22.0312 20.8519 14.0885 12.9092 4.29102 12.9092V6.76562H213.952V12.9092ZM213.953 5.83398H4.26758V4.33105H213.953V5.83398Z"/>
+</mask>
+<path d="M213.952 12.9092V13.976C214.541 13.976 215.019 13.4983 215.019 12.9092H213.952ZM196.212 63.4443V64.5111C196.801 64.5111 197.279 64.0335 197.279 63.4443H196.212ZM187.777 63.4443H186.711C186.711 64.0335 187.188 64.5111 187.777 64.5111V63.4443ZM170.037 12.9092H168.97C168.97 13.4983 169.448 13.976 170.037 13.976V12.9092ZM170.037 12.9053H171.104C171.104 12.3161 170.626 11.8385 170.037 11.8385V12.9053ZM48.2061 12.9053V11.8385C47.6169 11.8385 47.1393 12.3161 47.1393 12.9053H48.2061ZM48.2061 12.9092V13.976C48.7952 13.976 49.2728 13.4983 49.2728 12.9092H48.2061ZM30.4658 63.4443V64.5111C31.055 64.5111 31.5326 64.0335 31.5326 63.4443H30.4658ZM22.0312 63.4443H20.9645C20.9645 64.0335 21.4421 64.5111 22.0312 64.5111V63.4443ZM4.29102 12.9092H3.22423C3.22423 13.4983 3.70185 13.976 4.29102 13.976V12.9092ZM4.29102 6.76562V5.69884C3.70185 5.69884 3.22423 6.17646 3.22423 6.76562H4.29102ZM213.952 6.76562H215.019C215.019 6.17646 214.541 5.69884 213.952 5.69884V6.76562ZM213.953 5.83398V6.90077C214.542 6.90077 215.02 6.42315 215.02 5.83398H213.953ZM4.26758 5.83398H3.20079C3.20079 6.42315 3.67841 6.90077 4.26758 6.90077V5.83398ZM4.26758 4.33105V3.26427C3.67841 3.26427 3.20079 3.74189 3.20079 4.33105H4.26758ZM213.953 4.33105H215.02C215.02 3.74189 214.542 3.26427 213.953 3.26427V4.33105ZM213.952 12.9092V11.8424C203.565 11.8424 195.145 20.2627 195.145 30.6494H196.212H197.279C197.279 21.441 204.744 13.976 213.952 13.976V12.9092ZM196.212 30.6494H195.145V63.4443H196.212H197.279V30.6494H196.212ZM196.212 63.4443V62.3776H187.777V63.4443V64.5111H196.212V63.4443ZM187.777 63.4443H188.844V30.6494H187.777H186.711V63.4443H187.777ZM187.777 30.6494H188.844C188.844 20.2627 180.424 11.8424 170.037 11.8424V12.9092V13.976C179.245 13.976 186.711 21.4411 186.711 30.6494H187.777ZM170.037 12.9092H171.104V12.9053H170.037H168.97V12.9092H170.037ZM170.037 12.9053V11.8385H48.2061V12.9053V13.9721H170.037V12.9053ZM48.2061 12.9053H47.1393V12.9092H48.2061H49.2728V12.9053H48.2061ZM48.2061 12.9092V11.8424C37.8194 11.8424 29.399 20.2627 29.399 30.6494H30.4658H31.5326C31.5326 21.441 38.9977 13.976 48.2061 13.976V12.9092ZM30.4658 30.6494H29.399V63.4443H30.4658H31.5326V30.6494H30.4658ZM30.4658 63.4443V62.3776H22.0312V63.4443V64.5111H30.4658V63.4443ZM22.0312 63.4443H23.098V30.6494H22.0312H20.9645V63.4443H22.0312ZM22.0312 30.6494H23.098C23.098 20.2627 14.6777 11.8424 4.29102 11.8424V12.9092V13.976C13.4994 13.976 20.9645 21.4411 20.9645 30.6494H22.0312ZM4.29102 12.9092H5.3578V6.76562H4.29102H3.22423V12.9092H4.29102ZM4.29102 6.76562V7.83241H213.952V6.76562V5.69884H4.29102V6.76562ZM213.952 6.76562H212.885V12.9092H213.952H215.019V6.76562H213.952ZM213.953 5.83398V4.7672H4.26758V5.83398V6.90077H213.953V5.83398ZM4.26758 5.83398H5.33436V4.33105H4.26758H3.20079V5.83398H4.26758ZM4.26758 4.33105V5.39784H213.953V4.33105V3.26427H4.26758V4.33105ZM213.953 4.33105H212.886V5.83398H213.953H215.02V4.33105H213.953Z" fill="#040404" fill-opacity="0.5" mask="url(#path-10-outside-2_450_13383)"/>
+<g filter="url(#filter3_f_450_13383)" style="mix-blend-mode:plus-lighter">
+<path d="M202.689 65.5781C208.876 65.5781 213.891 70.593 213.891 76.7793V94.3809H3.73438V76.7793C3.73438 70.593 8.74927 65.5781 14.9355 65.5781H202.689Z" stroke="url(#paint4_linear_450_13383)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_13383)" style="mix-blend-mode:plus-lighter">
+<mask id="path-13-outside-3_450_13383" maskUnits="userSpaceOnUse" x="2.26758" y="3.30469" width="212" height="61" fill="black">
+<rect fill="white" x="2.26758" y="3.30469" width="212" height="61"/>
+<path d="M212.295 5.30469V11.4541C202.574 11.4542 194.694 19.3347 194.693 29.0557V62.9102H186.324V29.0557C186.324 19.7274 179.068 12.0958 169.892 11.4941H46.6709C37.4949 12.0959 30.2385 19.7275 30.2383 29.0557V62.9102H21.8691V29.0557C21.869 19.3346 13.9887 11.4541 4.26758 11.4541V5.30469H212.295Z"/>
+</mask>
+<path d="M212.295 5.30469H213.362V4.2379H212.295V5.30469ZM212.295 11.4541L212.295 12.5209L213.362 12.5209V11.4541H212.295ZM194.693 29.0557L193.627 29.0556V29.0557H194.693ZM194.693 62.9102V63.9769H195.76V62.9102H194.693ZM186.324 62.9102H185.257V63.9769H186.324V62.9102ZM186.324 29.0557H187.391V29.0556L186.324 29.0557ZM169.892 11.4941L169.961 10.4296L169.927 10.4274H169.892V11.4941ZM46.6709 11.4941V10.4274H46.636L46.6011 10.4296L46.6709 11.4941ZM30.2383 29.0557L29.1715 29.0556V29.0557H30.2383ZM30.2383 62.9102V63.9769H31.3051V62.9102H30.2383ZM21.8691 62.9102H20.8024V63.9769H21.8691V62.9102ZM21.8691 29.0557H22.9359L22.9359 29.0556L21.8691 29.0557ZM4.26758 11.4541H3.20079V12.5209H4.26758L4.26758 11.4541ZM4.26758 5.30469V4.2379H3.20079V5.30469H4.26758ZM212.295 5.30469H211.228V11.4541H212.295H213.362V5.30469H212.295ZM212.295 11.4541L212.295 10.3873C201.985 10.3874 193.627 18.7455 193.627 29.0556L194.693 29.0557L195.76 29.0557C195.76 19.9239 203.163 12.521 212.295 12.5209L212.295 11.4541ZM194.693 29.0557H193.627V62.9102H194.693H195.76V29.0557H194.693ZM194.693 62.9102V61.8434H186.324V62.9102V63.9769H194.693V62.9102ZM186.324 62.9102H187.391V29.0557H186.324H185.257V62.9102H186.324ZM186.324 29.0557L187.391 29.0556C187.391 19.1615 179.694 11.0679 169.961 10.4296L169.892 11.4941L169.822 12.5586C178.441 13.1238 185.257 20.2933 185.257 29.0557L186.324 29.0557ZM169.892 11.4941V10.4274H46.6709V11.4941V12.5609H169.892V11.4941ZM46.6709 11.4941L46.6011 10.4296C36.8681 11.068 29.1717 19.1616 29.1715 29.0556L30.2383 29.0557L31.3051 29.0557C31.3052 20.2934 38.1218 13.1239 46.7407 12.5586L46.6709 11.4941ZM30.2383 29.0557H29.1715V62.9102H30.2383H31.3051V29.0557H30.2383ZM30.2383 62.9102V61.8434H21.8691V62.9102V63.9769H30.2383V62.9102ZM21.8691 62.9102H22.9359V29.0557H21.8691H20.8024V62.9102H21.8691ZM21.8691 29.0557L22.9359 29.0556C22.9358 18.7455 14.5779 10.3873 4.26758 10.3873L4.26758 11.4541L4.26758 12.5209C13.3995 12.5209 20.8022 19.9238 20.8024 29.0557L21.8691 29.0557ZM4.26758 11.4541H5.33436V5.30469H4.26758H3.20079V11.4541H4.26758ZM4.26758 5.30469V6.37147H212.295V5.30469V4.2379H4.26758V5.30469Z" fill="url(#paint5_linear_450_13383)" mask="url(#path-13-outside-3_450_13383)"/>
+</g>
+<g filter="url(#filter5_f_450_13383)" style="mix-blend-mode:plus-lighter">
+<path d="M211.229 4.77148C212.113 4.77169 212.829 5.48764 212.829 6.37109V10.3877C212.829 11.2794 212.109 11.9675 211.261 12.0186C202.366 12.5533 195.317 19.9367 195.317 28.9658V61.8438C195.317 62.7272 194.601 63.4432 193.718 63.4434H187.524C186.641 63.4432 185.925 62.7272 185.925 61.8438V28.9658C185.925 19.9776 178.94 12.6212 170.103 12.0273H47.5312C38.6937 12.6212 31.709 19.9775 31.709 28.9658V61.8438C31.7088 62.7272 30.9928 63.4432 30.1094 63.4434H23.916C23.0326 63.4432 22.3166 62.7272 22.3164 61.8438V28.9658C22.3164 19.9367 15.2675 12.5533 6.37305 12.0186C5.52441 11.9675 4.80489 11.2794 4.80469 10.3877V6.37109C4.80489 5.48764 5.52084 4.77169 6.4043 4.77148H211.229Z" stroke="url(#paint6_linear_450_13383)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter6_f_450_13383)">
+<path d="M2.13672 13.8391V4.23806C2.13672 3.05973 3.09195 2.10449 4.27029 2.10449H214.427C215.605 2.10449 216.56 3.05972 216.56 4.23806V13.8391" stroke="url(#paint7_linear_450_13383)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_13383)">
+<path d="M33.0703 62.911V26.9248C33.4259 22.5628 36.8041 15.439 46.9385 13.8389H168.019C177.62 14.3723 184.554 18.2008 184.554 31.2867V62.911" stroke="url(#paint8_linear_450_13383)" stroke-width="1.06678"/>
+</g>
+<path d="M18.1367 63.4444L200.107 63.4443" stroke="url(#paint9_linear_450_13383)" stroke-width="1.06678"/>
+<g filter="url(#filter8_f_450_13383)">
+<path d="M22.9375 45.8425V62.3777H29.8716V45.8425" stroke="url(#paint10_linear_450_13383)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_13383" x="34.1367" y="17.0391" width="150.416" height="50.1388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_13383"/>
+</filter>
+<filter id="filter1_ii_450_13383" x="5.57031" y="66.225" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.65098 0 0 0 0 0.701961 0 0 0 0 0.733333 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_13383"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.144809 0 0 0 0 0.156539 0 0 0 0 0.168269 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_13383" result="effect2_innerShadow_450_13383"/>
+</filter>
+<filter id="filter2_f_450_13383" x="6.40197" y="68.245" width="205.889" height="25.6031" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13383"/>
+</filter>
+<filter id="filter3_f_450_13383" x="2.13439" y="63.9776" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13383"/>
+</filter>
+<filter id="filter4_f_450_13383" x="2.13439" y="3.17101" width="212.294" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13383"/>
+</filter>
+<filter id="filter5_f_450_13383" x="3.2047" y="3.17101" width="211.225" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13383"/>
+</filter>
+<filter id="filter6_f_450_13383" x="0.536731" y="0.50426" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13383"/>
+</filter>
+<filter id="filter7_f_450_13383" x="31.4703" y="12.2386" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13383"/>
+</filter>
+<filter id="filter8_f_450_13383" x="21.3375" y="44.7757" width="10.1336" height="19.2022" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13383"/>
+</filter>
+<linearGradient id="paint0_linear_450_13383" x1="108.812" y1="17.0391" x2="108.812" y2="66.1112" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F696E"/>
+<stop offset="0.05" stop-color="#4E575C"/>
+<stop offset="1" stop-color="#3E494E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_13383" x1="31.4698" y1="34.641" x2="183.487" y2="34.641" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5D666B"/>
+<stop offset="0.077962" stop-color="#4E575C" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#4E575C" stop-opacity="0.305882"/>
+<stop offset="1" stop-color="#5D666B"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_13383" x1="109.346" y1="70.3787" x2="109.346" y2="91.7144" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6B3BB"/>
+<stop offset="1" stop-color="#A6B3BB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_13383" x1="4.26758" y1="33.8877" x2="213.953" y2="33.8877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A7AEB1"/>
+<stop offset="0.144231" stop-color="#9AA3A8"/>
+<stop offset="0.889423" stop-color="#9AA3A8"/>
+<stop offset="0.961538" stop-color="#7B888F"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_13383" x1="108.812" y1="66.1113" x2="108.812" y2="93.8477" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6B3BB"/>
+<stop offset="1" stop-color="#A6B3BB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_13383" x1="108.281" y1="5.30469" x2="108.281" y2="14.3713" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC7E0"/>
+<stop offset="1" stop-color="#AFC7E0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_13383" x1="18.6044" y1="12.2378" x2="47.2314" y2="16.8978" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_13383" x1="109.349" y1="2.10449" x2="109.349" y2="13.8391" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADBED0"/>
+<stop offset="1" stop-color="#ADBED0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_13383" x1="108.812" y1="13.8389" x2="108.812" y2="62.911" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_13383" x1="200.107" y1="63.4444" x2="18.1367" y2="63.4444" gradientUnits="userSpaceOnUse">
+<stop stop-color="#232521" stop-opacity="0"/>
+<stop offset="0.100962" stop-color="#232521"/>
+<stop offset="0.9375" stop-color="#232521"/>
+<stop offset="1" stop-color="#232521" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_13383" x1="25.0711" y1="61.8443" x2="24.5377" y2="36.2415" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_13383">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/중앙.svg
new file mode 100644
index 0000000..e3b152a
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/실사화/중앙.svg	
@@ -0,0 +1,162 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_13417)">
+<g clip-path="url(#clip1_450_13417)">
+<g filter="url(#filter0_i_450_13417)">
+<path d="M-256.824 29.8698C-256.824 22.7997 -251.093 17.0684 -244.023 17.0684H322.758C329.828 17.0684 335.56 22.7997 335.56 29.8698V66.1405H-256.824V29.8698Z" fill="url(#paint0_linear_450_13417)"/>
+<path d="M-256.824 29.8698C-256.824 22.7997 -251.093 17.0684 -244.023 17.0684H322.758C329.828 17.0684 335.56 22.7997 335.56 29.8698V66.1405H-256.824V29.8698Z" fill="url(#paint1_linear_450_13417)"/>
+</g>
+<path d="M-244.022 17.6016H322.759C329.534 17.6018 335.026 23.0948 335.026 29.8701V65.6074H-256.291V29.8701C-256.291 23.0947 -250.798 17.6016 -244.022 17.6016Z" stroke="black" stroke-width="1.06678"/>
+<path d="M438.471 66.2542C444.362 66.2543 449.139 71.0305 449.139 76.9221V93.9709H-368.032V76.9221C-368.032 71.0305 -363.256 66.2542 -357.364 66.2542H438.471Z" fill="#5D666B" stroke="#4E575C" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_13417)">
+<path d="M-365.898 76.9222C-365.898 72.2089 -362.078 68.3879 -357.364 68.3879H438.47C443.184 68.3879 447.005 72.2089 447.005 76.9222V90.7701C447.005 91.3593 446.527 91.8369 445.938 91.8369H-364.832C-365.421 91.8369 -365.898 91.3593 -365.898 90.7701V76.9222Z" fill="#5D666B"/>
+</g>
+<path d="M438.471 67.8547C443.479 67.8549 447.538 71.9143 447.538 76.9221V90.7698C447.538 91.6534 446.822 92.3701 445.938 92.3704H-364.832C-365.716 92.3702 -366.432 91.6534 -366.432 90.7698V76.9221C-366.432 71.9143 -362.372 67.8548 -357.364 67.8547H438.471Z" stroke="#373D40" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_13417)" style="mix-blend-mode:plus-lighter">
+<path d="M434.946 69.8748C438.776 69.8748 441.881 72.9789 441.881 76.8083V92.2771H-358.904V76.8083C-358.904 72.979 -355.8 69.8749 -351.971 69.8748H434.946Z" stroke="url(#paint2_linear_450_13417)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_13417" maskUnits="userSpaceOnUse" x="-380.291" y="-0.639648" width="841" height="69" fill="black">
+<rect fill="white" x="-380.291" y="-0.639648" width="841" height="69"/>
+<path d="M456.407 12.9385H436.579C408.669 12.9385 386.043 35.5637 386.043 63.4736H352.588C352.588 35.5638 329.963 12.9386 302.053 12.9385H282.224V12.9346H-201.014V12.9385H-220.843C-248.753 12.9386 -271.378 35.5638 -271.378 63.4736H-304.833C-304.833 35.5637 -327.459 12.9385 -355.369 12.9385H-375.197V6.79492H456.407V12.9385ZM456.407 5.86328H-375.291V4.36035H456.407V5.86328Z"/>
+</mask>
+<path d="M456.407 12.9385H436.579C408.669 12.9385 386.043 35.5637 386.043 63.4736H352.588C352.588 35.5638 329.963 12.9386 302.053 12.9385H282.224V12.9346H-201.014V12.9385H-220.843C-248.753 12.9386 -271.378 35.5638 -271.378 63.4736H-304.833C-304.833 35.5637 -327.459 12.9385 -355.369 12.9385H-375.197V6.79492H456.407V12.9385ZM456.407 5.86328H-375.291V4.36035H456.407V5.86328Z" fill="#8E989E"/>
+<path d="M456.407 12.9385V17.2056C458.764 17.2056 460.674 15.2952 460.674 12.9385H456.407ZM386.043 63.4736V67.7408C388.4 67.7408 390.31 65.8303 390.31 63.4737L386.043 63.4736ZM352.588 63.4736L348.321 63.4737C348.321 65.8303 350.231 67.7408 352.588 67.7408V63.4736ZM302.053 12.9385V8.67134V8.67134V12.9385ZM282.224 12.9385H277.956C277.956 15.2952 279.867 17.2056 282.224 17.2056V12.9385ZM282.224 12.9346H286.491C286.491 10.5779 284.58 8.66743 282.224 8.66743V12.9346ZM-201.014 12.9346V8.66743C-203.37 8.66743 -205.281 10.5779 -205.281 12.9346H-201.014ZM-201.014 12.9385V17.2056C-198.657 17.2056 -196.747 15.2952 -196.747 12.9385H-201.014ZM-220.843 12.9385V8.67134H-220.843L-220.843 12.9385ZM-271.378 63.4736V67.7408C-269.021 67.7408 -267.111 65.8303 -267.111 63.4737L-271.378 63.4736ZM-304.833 63.4736L-309.1 63.4737C-309.1 65.8303 -307.19 67.7408 -304.833 67.7408V63.4736ZM-375.197 12.9385H-379.464C-379.464 15.2952 -377.554 17.2056 -375.197 17.2056V12.9385ZM-375.197 6.79492V2.52778C-377.554 2.52778 -379.464 4.43825 -379.464 6.79492H-375.197ZM456.407 6.79492H460.674C460.674 4.43825 458.764 2.52778 456.407 2.52778V6.79492ZM456.407 5.86328V10.1304C458.764 10.1304 460.674 8.21996 460.674 5.86328H456.407ZM-375.291 5.86328H-379.558C-379.558 8.21996 -377.648 10.1304 -375.291 10.1304V5.86328ZM-375.291 4.36035V0.0932121C-377.648 0.0932121 -379.558 2.00368 -379.558 4.36035L-375.291 4.36035ZM456.407 4.36035H460.674C460.674 2.00368 458.764 0.0932121 456.407 0.0932121V4.36035ZM456.407 12.9385V8.67134H436.579V12.9385V17.2056H456.407V12.9385ZM436.579 12.9385V8.67134C406.313 8.67134 381.776 33.2069 381.776 63.4736L386.043 63.4736L390.31 63.4737C390.31 37.9205 411.026 17.2056 436.579 17.2056V12.9385ZM386.043 63.4736V59.2065H352.588V63.4736V67.7408H386.043V63.4736ZM352.588 63.4736L356.855 63.4736C356.855 33.2071 332.319 8.6715 302.053 8.67134V12.9385V17.2056C327.606 17.2057 348.321 37.9205 348.321 63.4737L352.588 63.4736ZM302.053 12.9385V8.67134H282.224V12.9385V17.2056H302.053V12.9385ZM282.224 12.9385H286.491V12.9346H282.224H277.956V12.9385H282.224ZM282.224 12.9346V8.66743H-201.014V12.9346V17.2017H282.224V12.9346ZM-201.014 12.9346H-205.281V12.9385H-201.014H-196.747V12.9346H-201.014ZM-201.014 12.9385V8.67134H-220.843V12.9385V17.2056H-201.014V12.9385ZM-220.843 12.9385L-220.843 8.67134C-251.109 8.67151 -275.645 33.2071 -275.645 63.4736L-271.378 63.4736L-267.111 63.4737C-267.111 37.9205 -246.396 17.2058 -220.843 17.2056L-220.843 12.9385ZM-271.378 63.4736V59.2065H-304.833V63.4736V67.7408H-271.378V63.4736ZM-304.833 63.4736L-300.566 63.4736C-300.566 33.2069 -325.103 8.67134 -355.369 8.67134V12.9385V17.2056C-329.816 17.2056 -309.1 37.9205 -309.1 63.4737L-304.833 63.4736ZM-355.369 12.9385V8.67134H-375.197V12.9385V17.2056H-355.369V12.9385ZM-375.197 12.9385H-370.93V6.79492H-375.197H-379.464V12.9385H-375.197ZM-375.197 6.79492V11.0621H456.407V6.79492V2.52778H-375.197V6.79492ZM456.407 6.79492H452.14V12.9385H456.407H460.674V6.79492H456.407ZM456.407 5.86328V1.59614H-375.291V5.86328V10.1304H456.407V5.86328ZM-375.291 5.86328H-371.024V4.36035H-375.291H-379.558V5.86328H-375.291ZM-375.291 4.36035V8.62749H456.407V4.36035V0.0932121H-375.291V4.36035ZM456.407 4.36035H452.14V5.86328H456.407H460.674V4.36035H456.407Z" fill="#4E575C" mask="url(#path-7-outside-1_450_13417)"/>
+<path d="M456.407 11.8717C456.407 12.4609 455.93 12.9385 455.34 12.9385H436.579C409.027 12.9385 386.624 34.9875 386.054 62.4033C386.042 62.9923 385.565 63.4736 384.976 63.4736H353.655C353.065 63.4736 352.589 62.9923 352.577 62.4033C352.007 34.9876 329.605 12.9386 302.053 12.9385H282.226C282.224 12.9385 282.224 12.9376 282.224 12.9365C282.224 12.9354 282.223 12.9346 282.222 12.9346H-201.012C-201.013 12.9346 -201.014 12.9354 -201.014 12.9365C-201.014 12.9376 -201.015 12.9385 -201.016 12.9385H-220.843C-248.395 12.9386 -270.797 34.9876 -271.367 62.4033C-271.379 62.9923 -271.856 63.4736 -272.445 63.4736H-303.766C-304.355 63.4736 -304.832 62.9923 -304.844 62.4033C-305.414 34.9875 -327.817 12.9385 -355.369 12.9385H-374.13C-374.72 12.9385 -375.197 12.4609 -375.197 11.8717V7.86171C-375.197 7.27254 -374.72 6.79492 -374.13 6.79492H455.34C455.93 6.79492 456.407 7.27254 456.407 7.86171V11.8717ZM456.407 5.11182C456.407 5.52684 456.071 5.86328 455.656 5.86328H-374.54C-374.955 5.86328 -375.291 5.52684 -375.291 5.11182C-375.291 4.69679 -374.955 4.36035 -374.54 4.36035H455.656C456.071 4.36035 456.407 4.69679 456.407 5.11182Z" fill="url(#paint3_linear_450_13417)"/>
+<mask id="path-10-outside-2_450_13417" maskUnits="userSpaceOnUse" x="-377.291" y="2.36035" width="835" height="63" fill="black">
+<rect fill="white" x="-377.291" y="2.36035" width="835" height="63"/>
+<path d="M456.407 12.9385H436.579C408.669 12.9385 386.043 35.5637 386.043 63.4736H352.588C352.588 35.5638 329.963 12.9386 302.053 12.9385H282.224V12.9346H-201.014V12.9385H-220.843C-248.753 12.9386 -271.378 35.5638 -271.378 63.4736H-304.833C-304.833 35.5637 -327.459 12.9385 -355.369 12.9385H-375.197V6.79492H456.407V12.9385ZM456.407 5.86328H-375.291V4.36035H456.407V5.86328Z"/>
+</mask>
+<path d="M456.407 12.9385V14.0053C456.996 14.0053 457.474 13.5276 457.474 12.9385H456.407ZM386.043 63.4736V64.5404C386.632 64.5404 387.11 64.0628 387.11 63.4736L386.043 63.4736ZM352.588 63.4736L351.521 63.4736C351.521 64.0628 351.999 64.5404 352.588 64.5404V63.4736ZM302.053 12.9385V11.8717V11.8717V12.9385ZM282.224 12.9385H281.157C281.157 13.5276 281.634 14.0053 282.224 14.0053V12.9385ZM282.224 12.9346H283.29C283.29 12.3454 282.813 11.8678 282.224 11.8678V12.9346ZM-201.014 12.9346V11.8678C-201.603 11.8678 -202.08 12.3454 -202.08 12.9346H-201.014ZM-201.014 12.9385V14.0053C-200.424 14.0053 -199.947 13.5276 -199.947 12.9385H-201.014ZM-220.843 12.9385V11.8717V11.8717V12.9385ZM-271.378 63.4736V64.5404C-270.789 64.5404 -270.311 64.0628 -270.311 63.4736L-271.378 63.4736ZM-304.833 63.4736L-305.9 63.4736C-305.9 64.0628 -305.422 64.5404 -304.833 64.5404V63.4736ZM-375.197 12.9385H-376.264C-376.264 13.5276 -375.786 14.0053 -375.197 14.0053V12.9385ZM-375.197 6.79492V5.72814C-375.786 5.72814 -376.264 6.20575 -376.264 6.79492H-375.197ZM456.407 6.79492H457.474C457.474 6.20575 456.996 5.72814 456.407 5.72814V6.79492ZM456.407 5.86328V6.93007C456.996 6.93007 457.474 6.45245 457.474 5.86328H456.407ZM-375.291 5.86328H-376.358C-376.358 6.45245 -375.88 6.93007 -375.291 6.93007V5.86328ZM-375.291 4.36035V3.29357C-375.88 3.29357 -376.358 3.77118 -376.358 4.36035H-375.291ZM456.407 4.36035H457.474C457.474 3.77118 456.996 3.29357 456.407 3.29357V4.36035ZM456.407 12.9385V11.8717H436.579V12.9385V14.0053H456.407V12.9385ZM436.579 12.9385V11.8717C408.08 11.8717 384.976 34.9745 384.976 63.4736L386.043 63.4736L387.11 63.4736C387.11 36.1529 409.258 14.0053 436.579 14.0053V12.9385ZM386.043 63.4736V62.4068H352.588V63.4736V64.5404H386.043V63.4736ZM352.588 63.4736L353.655 63.4736C353.655 34.9746 330.552 11.8718 302.053 11.8717V12.9385V14.0053C329.373 14.0054 351.521 36.153 351.521 63.4736L352.588 63.4736ZM302.053 12.9385V11.8717H282.224V12.9385V14.0053H302.053V12.9385ZM282.224 12.9385H283.29V12.9346H282.224H281.157V12.9385H282.224ZM282.224 12.9346V11.8678H-201.014V12.9346V14.0014H282.224V12.9346ZM-201.014 12.9346H-202.08V12.9385H-201.014H-199.947V12.9346H-201.014ZM-201.014 12.9385V11.8717H-220.843V12.9385V14.0053H-201.014V12.9385ZM-220.843 12.9385V11.8717C-249.342 11.8719 -272.445 34.9746 -272.445 63.4736L-271.378 63.4736L-270.311 63.4736C-270.311 36.153 -248.163 14.0054 -220.843 14.0053V12.9385ZM-271.378 63.4736V62.4068H-304.833V63.4736V64.5404H-271.378V63.4736ZM-304.833 63.4736L-303.766 63.4736C-303.766 34.9745 -326.87 11.8717 -355.369 11.8717V12.9385V14.0053C-328.048 14.0053 -305.9 36.1529 -305.9 63.4736L-304.833 63.4736ZM-355.369 12.9385V11.8717H-375.197V12.9385V14.0053H-355.369V12.9385ZM-375.197 12.9385H-374.13V6.79492H-375.197H-376.264V12.9385H-375.197ZM-375.197 6.79492V7.86171H456.407V6.79492V5.72814H-375.197V6.79492ZM456.407 6.79492H455.34V12.9385H456.407H457.474V6.79492H456.407ZM456.407 5.86328V4.7965H-375.291V5.86328V6.93007H456.407V5.86328ZM-375.291 5.86328H-374.224V4.36035H-375.291H-376.358V5.86328H-375.291ZM-375.291 4.36035V5.42714H456.407V4.36035V3.29357H-375.291V4.36035ZM456.407 4.36035H455.34V5.86328H456.407H457.474V4.36035H456.407Z" fill="#040404" fill-opacity="0.5" mask="url(#path-10-outside-2_450_13417)"/>
+<g filter="url(#filter3_f_450_13417)" style="mix-blend-mode:plus-lighter">
+<path d="M443.373 65.6074C449.559 65.6076 454.574 70.6224 454.574 76.8086V94.4102H-375.83V76.8086C-375.83 70.6223 -370.815 65.6074 -364.629 65.6074H443.373Z" stroke="url(#paint4_linear_450_13417)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_13417)" style="mix-blend-mode:plus-lighter">
+<mask id="path-13-outside-3_450_13417" maskUnits="userSpaceOnUse" x="-377.297" y="3.33398" width="829" height="61" fill="black">
+<rect fill="white" x="-377.297" y="3.33398" width="829" height="61"/>
+<path d="M449.827 5.33398V11.4834H431.468C403.049 11.4834 380.011 34.5211 380.011 62.9395H346.816C346.816 35.2018 324.869 12.5907 297.393 11.5234H-222.863C-250.339 12.5909 -272.287 35.2019 -272.287 62.9395H-305.481C-305.482 34.5211 -328.519 11.4835 -356.938 11.4834H-375.297V5.33398H449.827Z"/>
+</mask>
+<path d="M449.827 5.33398H450.894V4.2672H449.827V5.33398ZM449.827 11.4834V12.5502H450.894V11.4834H449.827ZM380.011 62.9395V64.0062H381.078V62.9395L380.011 62.9395ZM346.816 62.9395L345.75 62.9395V64.0062H346.816V62.9395ZM297.393 11.5234L297.434 10.4575L297.413 10.4567H297.393V11.5234ZM-222.863 11.5234V10.4567H-222.884L-222.905 10.4575L-222.863 11.5234ZM-272.287 62.9395V64.0062H-271.22L-271.22 62.9395L-272.287 62.9395ZM-305.481 62.9395L-306.548 62.9395L-306.548 64.0062H-305.481V62.9395ZM-356.938 11.4834L-356.937 10.4166H-356.938V11.4834ZM-375.297 11.4834H-376.364V12.5502H-375.297V11.4834ZM-375.297 5.33398V4.2672H-376.364V5.33398H-375.297ZM449.827 5.33398H448.76V11.4834H449.827H450.894V5.33398H449.827ZM449.827 11.4834V10.4166H431.468V11.4834V12.5502H449.827V11.4834ZM431.468 11.4834V10.4166C402.46 10.4166 378.944 33.9319 378.944 62.9394L380.011 62.9395L381.078 62.9395C381.078 35.1103 403.638 12.5502 431.468 12.5502V11.4834ZM380.011 62.9395V61.8727H346.816V62.9395V64.0062H380.011V62.9395ZM346.816 62.9395L347.883 62.9394C347.883 34.6264 325.481 11.5469 297.434 10.4575L297.393 11.5234L297.351 12.5894C324.257 13.6346 345.749 35.7771 345.75 62.9395L346.816 62.9395ZM297.393 11.5234V10.4567H-222.863V11.5234V12.5902H297.393V11.5234ZM-222.863 11.5234L-222.905 10.4575C-250.951 11.5471 -273.354 34.6266 -273.354 62.9394L-272.287 62.9395L-271.22 62.9395C-271.22 35.7772 -249.728 13.6348 -222.822 12.5894L-222.863 11.5234ZM-272.287 62.9395V61.8727H-305.481V62.9395V64.0062H-272.287V62.9395ZM-305.481 62.9395L-304.415 62.9394C-304.415 33.932 -327.93 10.4167 -356.937 10.4166L-356.938 11.4834L-356.938 12.5502C-329.108 12.5503 -306.548 35.1103 -306.548 62.9395L-305.481 62.9395ZM-356.938 11.4834V10.4166H-375.297V11.4834V12.5502H-356.938V11.4834ZM-375.297 11.4834H-374.23V5.33398H-375.297H-376.364V11.4834H-375.297ZM-375.297 5.33398V6.40077H449.827V5.33398V4.2672H-375.297V5.33398Z" fill="url(#paint5_linear_450_13417)" mask="url(#path-13-outside-3_450_13417)"/>
+</g>
+<g filter="url(#filter5_f_450_13417)" style="mix-blend-mode:plus-lighter">
+<path d="M445.598 4.80078C446.797 4.80078 447.9 4.92236 448.72 5.12891C449.125 5.23117 449.492 5.36188 449.77 5.52734C450.013 5.67226 450.362 5.95052 450.362 6.40039V10.417C450.362 10.8676 450.011 11.1456 449.769 11.29C449.491 11.4553 449.126 11.5865 448.721 11.6904C447.902 11.9004 446.8 12.0307 445.605 12.0488C427.44 12.3241 411.178 14.3629 399.475 17.4854C393.619 19.0476 388.934 20.8727 385.726 22.8652C382.488 24.8759 380.903 26.9597 380.903 28.9951V61.873C380.903 62.3229 380.554 62.6012 380.311 62.7461C380.033 62.9115 379.667 63.0423 379.262 63.1445C378.442 63.3511 377.338 63.4727 376.139 63.4727H351.576C350.377 63.4726 349.274 63.3511 348.454 63.1445C348.048 63.0423 347.682 62.9116 347.404 62.7461C347.161 62.6011 346.812 62.3228 346.812 61.873V28.9951C346.812 26.9681 345.24 24.8931 342.028 22.8896C338.845 20.9041 334.196 19.0836 328.383 17.5234C317.127 14.5027 301.619 12.4878 284.24 12.0898L282.553 12.0566H-203.776L-205.464 12.0898C-222.843 12.4878 -238.351 14.5028 -249.606 17.5234C-255.42 19.0836 -260.069 20.9041 -263.252 22.8896C-266.464 24.8931 -268.035 26.968 -268.035 28.9951V61.873C-268.035 62.3228 -268.385 62.6011 -268.628 62.7461C-268.906 62.9116 -269.272 63.0423 -269.678 63.1445C-270.497 63.3511 -271.601 63.4726 -272.8 63.4727H-297.362C-298.561 63.4727 -299.666 63.3511 -300.485 63.1445C-300.891 63.0423 -301.257 62.9115 -301.534 62.7461C-301.777 62.6012 -302.127 62.3229 -302.127 61.873V28.9951C-302.127 26.9597 -303.713 24.876 -306.95 22.8652C-310.158 20.8728 -314.843 19.0475 -320.698 17.4854C-332.402 14.3629 -348.663 12.3241 -366.829 12.0488C-368.024 12.0307 -369.126 11.9004 -369.944 11.6904C-370.349 11.5865 -370.715 11.4553 -370.992 11.29C-371.235 11.1456 -371.586 10.8676 -371.586 10.417V6.40039C-371.586 5.95052 -371.236 5.67225 -370.993 5.52734C-370.716 5.36189 -370.349 5.23117 -369.943 5.12891C-369.124 4.92237 -368.02 4.80078 -366.821 4.80078H445.598Z" stroke="url(#paint6_linear_450_13417)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter6_f_450_13417)">
+<path d="M-383.748 13.8684V4.26736C-383.748 3.08902 -382.793 2.13379 -381.614 2.13379H464.613C465.791 2.13379 466.746 3.08902 466.746 4.26736V13.8684" stroke="url(#paint7_linear_450_13417)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_13417)">
+<path d="M-261.055 62.9403V26.9541C-259.644 22.5921 -246.245 15.4683 -206.048 13.8682H274.206C312.288 14.4016 339.792 18.2301 339.792 31.316V62.9403" stroke="url(#paint8_linear_450_13417)" stroke-width="1.06678"/>
+</g>
+<path d="M-320.283 63.4737L401.486 63.4736" stroke="url(#paint9_linear_450_13417)" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_13417" x="-256.824" y="17.0684" width="593.452" height="50.1388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_13417"/>
+</filter>
+<filter id="filter1_ii_450_13417" x="-366.965" y="66.2543" width="816.104" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.65098 0 0 0 0 0.701961 0 0 0 0 0.733333 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_13417"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.144809 0 0 0 0 0.156539 0 0 0 0 0.168269 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_13417" result="effect2_innerShadow_450_13417"/>
+</filter>
+<filter id="filter2_f_450_13417" x="-360.504" y="68.2743" width="803.985" height="25.6031" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13417"/>
+</filter>
+<filter id="filter3_f_450_13417" x="-377.43" y="64.0069" width="833.604" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13417"/>
+</filter>
+<filter id="filter4_f_450_13417" x="-377.43" y="3.2003" width="829.391" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13417"/>
+</filter>
+<filter id="filter5_f_450_13417" x="-373.186" y="3.2003" width="825.149" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13417"/>
+</filter>
+<filter id="filter6_f_450_13417" x="-385.348" y="0.533557" width="853.694" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13417"/>
+</filter>
+<filter id="filter7_f_450_13417" x="-262.655" y="12.2679" width="604.048" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_13417"/>
+</filter>
+<linearGradient id="paint0_linear_450_13417" x1="39.3678" y1="17.0684" x2="39.3678" y2="66.1405" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5F696E"/>
+<stop offset="0.05" stop-color="#4E575C"/>
+<stop offset="1" stop-color="#3E494E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_13417" x1="-267.403" y1="34.6703" x2="335.56" y2="34.6704" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5D666B"/>
+<stop offset="0.077962" stop-color="#4E575C" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#4E575C" stop-opacity="0.305882"/>
+<stop offset="1" stop-color="#5D666B"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_13417" x1="41.4881" y1="70.408" x2="41.4881" y2="91.7437" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6B3BB"/>
+<stop offset="1" stop-color="#A6B3BB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_13417" x1="-375.291" y1="33.917" x2="456.407" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A7AEB1"/>
+<stop offset="0.144231" stop-color="#9AA3A8"/>
+<stop offset="0.889423" stop-color="#9AA3A8"/>
+<stop offset="0.961538" stop-color="#7B888F"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_13417" x1="39.3719" y1="66.1406" x2="39.3719" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A6B3BB"/>
+<stop offset="1" stop-color="#A6B3BB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_13417" x1="37.2651" y1="5.33398" x2="37.2651" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFC7E0"/>
+<stop offset="1" stop-color="#AFC7E0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_13417" x1="-318.432" y1="12.2671" x2="-236.171" y2="65.3811" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_13417" x1="41.499" y1="2.13379" x2="41.499" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADBED0"/>
+<stop offset="1" stop-color="#ADBED0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_13417" x1="39.3686" y1="13.8682" x2="39.3686" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C8CED2"/>
+<stop offset="1" stop-color="#C8CED2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_13417" x1="401.486" y1="63.4737" x2="-320.283" y2="63.4734" gradientUnits="userSpaceOnUse">
+<stop stop-color="#232521" stop-opacity="0"/>
+<stop offset="0.100962" stop-color="#232521"/>
+<stop offset="0.9375" stop-color="#232521"/>
+<stop offset="1" stop-color="#232521" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_13417">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_13417">
+<rect width="476" height="95" fill="white" transform="translate(-196.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/오른쪽.svg
new file mode 100644
index 0000000..37d36ec
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/오른쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5783)">
+<g filter="url(#filter0_i_450_5783)">
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#555555"/>
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#0D6199" fill-opacity="0.1"/>
+</g>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#555555"/>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#0D6199" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_5783" maskUnits="userSpaceOnUse" x="-155.559" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="-155.559" y="1.0874" width="205" height="80"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z"/>
+</mask>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#AAAAAA"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#555555" mask="url(#path-3-outside-1_450_5783)"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-3-outside-1_450_5783)"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#777777"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#555555" stroke-width="4"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_5783" x="-124.781" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5783"/>
+</filter>
+<clipPath id="clip0_450_5783">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/왼쪽.svg
new file mode 100644
index 0000000..6e21c55
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/왼쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5765)">
+<g filter="url(#filter0_i_450_5765)">
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#555555"/>
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#0D6199" fill-opacity="0.1"/>
+</g>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#555555"/>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#0D6199" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_5765" maskUnits="userSpaceOnUse" x="1" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="1" y="1.0874" width="205" height="80"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z"/>
+</mask>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#AAAAAA"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#555555" mask="url(#path-3-outside-1_450_5765)"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-3-outside-1_450_5765)"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#777777"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#555555" stroke-width="4"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_5765" x="31.7773" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5765"/>
+</filter>
+<clipPath id="clip0_450_5765">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/중앙.svg
new file mode 100644
index 0000000..43fc03c
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교량/위치도/중앙.svg	
@@ -0,0 +1,37 @@
+<svg width="97" height="93" viewBox="0 0 97 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5774)">
+<g filter="url(#filter0_i_450_5774)">
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#555555"/>
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#0D6199" fill-opacity="0.1"/>
+</g>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#555555"/>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#0D6199" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_5774" maskUnits="userSpaceOnUse" x="-122.176" y="1" width="343" height="17" fill="black">
+<rect fill="white" x="-122.176" y="1" width="343" height="17"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z"/>
+</mask>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#AAAAAA"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#555555" mask="url(#path-3-outside-1_450_5774)"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-3-outside-1_450_5774)"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#777777"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#0D6199" fill-opacity="0.1"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#555555" stroke-width="4"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_5774" x="-72.6289" y="13" width="243.246" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_5774"/>
+</filter>
+<clipPath id="clip0_450_5774">
+<rect width="97" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/오른쪽.svg
new file mode 100644
index 0000000..2bb4767
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/오른쪽.svg	
@@ -0,0 +1,101 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1391)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_467_1391)"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="black" fill-opacity="0.5"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" stroke="url(#paint1_linear_467_1391)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1391)">
+<path d="M-44.9453 7.66487C-44.9453 3.94688 -41.9313 0.932861 -38.2133 0.932861H25.0126C28.7306 0.932861 31.7446 3.94688 31.7446 7.66486V32.067C31.7446 50.2924 16.97 65.067 -1.25538 65.067H-38.2133C-41.9313 65.067 -44.9453 62.053 -44.9453 58.335V7.66487Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M-38.2129 1.1311H25.0127C28.6213 1.13114 31.5469 4.05668 31.5469 7.66528V32.0667C31.5469 50.1827 16.8602 64.8694 -1.25586 64.8694H-38.2129C-41.8215 64.8694 -44.747 61.9438 -44.7471 58.3352V7.66528C-44.7471 4.05665 -41.8215 1.1311 -38.2129 1.1311Z" stroke="url(#paint2_linear_467_1391)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1391)">
+<path d="M-41.9766 7.39212C-41.9766 5.64248 -40.5582 4.22412 -38.8086 4.22412H25.6074C27.3571 4.22412 28.7754 5.64248 28.7754 7.39212V33.0001C28.7754 48.8927 15.892 61.7761 -0.000556946 61.7761H-38.8086C-40.5582 61.7761 -41.9766 60.3578 -41.9766 58.6081V7.39212Z" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48779H25.6074C27.2112 4.48779 28.5117 5.78827 28.5117 7.39209V33.0005C28.5115 48.7471 15.7456 61.5122 -0.000976562 61.5122H-38.8086C-40.4124 61.5122 -41.7129 60.2117 -41.7129 58.6079V7.39209C-41.7129 5.78828 -40.4124 4.48781 -38.8086 4.48779Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1391)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_467_1391)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_467_1391)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1391)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1391" x="-45.6053" y="-0.123139" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1391"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1391" result="effect2_innerShadow_467_1391"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1391"/>
+</filter>
+<filter id="filter1_ddi_467_1391" x="-43.0326" y="2.90412" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1391"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1391" result="effect2_dropShadow_467_1391"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1391" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1391"/>
+</filter>
+<filter id="filter2_f_467_1391" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1391"/>
+</filter>
+<filter id="filter3_f_467_1391" x="24.402" y="6.33634" width="2.45964" height="3.29265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_467_1391"/>
+</filter>
+<linearGradient id="paint0_linear_467_1391" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1391" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1391" x1="-6.60035" y1="0.932861" x2="-6.60035" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1391" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1391" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1391">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/왼쪽.svg
new file mode 100644
index 0000000..e7b51b7
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/왼쪽.svg	
@@ -0,0 +1,236 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1364)">
+<mask id="mask0_467_1364" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_467_1364)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1364)"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1364)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1364)">
+<rect x="-66.252" y="0.932861" width="170.438" height="64.1342" rx="6.732" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13086" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1364)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1364)">
+<rect x="-59.6523" y="4.22412" width="157.242" height="57.552" rx="3.168" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.48812" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1364)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-54.876 5.60498H92.8115C93.8319 5.60522 94.6592 6.43314 94.6592 7.45361V58.5464C94.6592 59.5669 93.8319 60.3948 92.8115 60.395H-54.876C-55.8966 60.395 -56.7246 59.567 -56.7246 58.5464V7.45361C-56.7246 6.43299 -55.8966 5.60498 -54.876 5.60498Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M-54.876 5.60498H92.8115C93.8319 5.60522 94.6592 6.43314 94.6592 7.45361V58.5464C94.6592 59.5669 93.8319 60.3948 92.8115 60.395H-54.876C-55.8966 60.395 -56.7246 59.567 -56.7246 58.5464V7.45361C-56.7246 6.43299 -55.8966 5.60498 -54.876 5.60498Z" fill="url(#paint3_linear_467_1364)"/>
+<path d="M-54.876 5.60498H92.8115C93.8319 5.60522 94.6592 6.43314 94.6592 7.45361V58.5464C94.6592 59.5669 93.8319 60.3948 92.8115 60.395H-54.876C-55.8966 60.395 -56.7246 59.567 -56.7246 58.5464V7.45361C-56.7246 6.43299 -55.8966 5.60498 -54.876 5.60498Z" stroke="url(#paint4_linear_467_1364)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1364)">
+<path d="M2.64258 32.7361C2.64258 14.5107 17.4172 -0.263916 35.6426 -0.263916H66.5306C67.697 -0.263916 68.6426 0.681659 68.6426 1.84808V32.7361C68.6426 50.9615 53.868 65.7361 35.6426 65.7361H4.75458C3.58815 65.7361 2.64258 64.7905 2.64258 63.6241V32.7361Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_467_1364" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_467_1364)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_467_1364)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1364)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_467_1364)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1364)"/>
+<g filter="url(#filter4_iif_467_1364)">
+<path d="M0.93392 33.8745C0.967179 15.6491 15.7687 0.901473 33.9941 0.934732L64.0729 0.989621C64.6561 0.990686 65.128 1.46433 65.1269 2.04755L65.0721 32.1257C65.0388 50.351 50.2373 65.0987 32.0119 65.0654L1.9331 65.0105C1.34989 65.0095 0.877968 64.5358 0.879032 63.9526L0.93392 33.8745Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M33.9937 1.13297L64.0728 1.18786C64.5464 1.18887 64.9293 1.57323 64.9286 2.04685L64.8737 32.1249C64.8407 50.2409 50.1282 64.9008 32.0122 64.8677L1.93313 64.8129C1.45942 64.8118 1.07641 64.4266 1.07727 63.9529L1.13216 33.8748C1.16523 15.7588 15.8777 1.09992 33.9937 1.13297Z" stroke="url(#paint8_linear_467_1364)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_467_1364)">
+<mask id="path-13-inside-2_467_1364" fill="white">
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z"/>
+</mask>
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_467_1364)"/>
+</g>
+<g filter="url(#filter6_f_467_1364)">
+<mask id="path-14-inside-3_467_1364" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_467_1364)"/>
+</g>
+<mask id="path-15-inside-4_467_1364" fill="white">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z"/>
+</mask>
+<g filter="url(#filter7_i_467_1364)">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" fill="#7C92AA" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" stroke="url(#paint9_linear_467_1364)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_467_1364)"/>
+<g filter="url(#filter8_dii_467_1364)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0176 13.3679C35.3983 13.368 36.5176 14.4872 36.5176 15.8679V21.0047L46.103 30.5901H52.0741C53.4547 30.5901 54.5741 31.7094 54.5741 33.0901C54.5741 34.4707 53.4547 35.59 52.0741 35.5901H45.3842L36.5176 44.4566V49.868C36.5176 51.2486 35.3983 52.3678 34.0176 52.3679C32.637 52.3679 31.5177 51.2486 31.5176 49.868V44.7302L22.3775 35.5901H15.9629C14.5822 35.5901 13.4629 34.4708 13.4629 33.0901C13.4629 31.7094 14.5822 30.5901 15.9629 30.5901H21.6587L31.5176 20.7312V15.8679C31.5176 14.4872 32.6369 13.3679 34.0176 13.3679ZM31.5176 41.9016V35.5901H25.2061L31.5176 41.9016ZM36.5176 41.628L42.5556 35.5901H36.5176V41.628ZM24.4871 30.5901H31.5176V23.5595L24.4871 30.5901ZM36.5176 30.5901H43.2747L36.5176 23.833V30.5901Z" fill="url(#paint10_linear_467_1364)"/>
+<path d="M25.1123 35.6833L31.6494 42.2205V35.4578H24.8877L25.1123 35.6833ZM36.3857 41.947L42.6494 35.6833L42.874 35.4578H36.3857V41.947ZM24.168 30.7224H31.6494V23.241L24.168 30.7224ZM36.3857 30.7224H43.5938L36.3857 23.5144V30.7224ZM31.6494 44.6755L31.6113 44.6365L22.4707 35.4968L22.4326 35.4578H15.9629C14.6551 35.4578 13.5947 34.3974 13.5947 33.0896C13.595 31.782 14.6552 30.7224 15.9629 30.7224H21.7139L21.752 30.6833L31.6113 20.825L31.6494 20.7859V15.8679C31.6494 14.5601 32.7098 13.4998 34.0176 13.4998C35.3254 13.4998 36.3857 14.5601 36.3857 15.8679V21.0593L36.4238 21.0984L46.0098 30.6833L46.0479 30.7224H52.0742C53.3818 30.7225 54.4421 31.7821 54.4424 33.0896C54.4424 34.3973 53.3819 35.4576 52.0742 35.4578H45.3291L45.291 35.4968L36.4238 44.363L36.3857 44.4021V49.8679C36.3857 51.1757 35.3253 52.2361 34.0176 52.2361C32.7098 52.2361 31.6495 51.1757 31.6494 49.8679V44.6755Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1364" x="-66.912" y="-0.123139" width="171.757" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1364"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1364" result="effect2_innerShadow_467_1364"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1364"/>
+</filter>
+<filter id="filter1_ddi_467_1364" x="-60.7083" y="2.90412" width="159.354" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1364"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1364" result="effect2_dropShadow_467_1364"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1364" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1364"/>
+</filter>
+<filter id="filter2_f_467_1364" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1364"/>
+</filter>
+<filter id="filter3_f_467_1364" x="-2.63742" y="-5.54392" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_467_1364"/>
+</filter>
+<filter id="filter4_iif_467_1364" x="0.218906" y="-0.12143" width="65.568" height="65.8469" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1364"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1364" result="effect2_innerShadow_467_1364"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1364"/>
+</filter>
+<filter id="filter5_dd_467_1364" x="3.17252" y="2.90412" width="59.6647" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1364"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1364" result="effect2_dropShadow_467_1364"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1364" result="shape"/>
+</filter>
+<filter id="filter6_f_467_1364" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1364"/>
+</filter>
+<filter id="filter7_i_467_1364" x="5.21028" y="5.73413" width="55.0592" height="55.5877" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1364"/>
+</filter>
+<filter id="filter8_dii_467_1364" x="11.6149" y="12.3119" width="45.3353" height="43.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1364"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_467_1364" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_467_1364"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_467_1364" result="effect3_innerShadow_467_1364"/>
+</filter>
+<linearGradient id="paint0_linear_467_1364" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1364" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1364" x1="18.9672" y1="0.932861" x2="18.9672" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1364" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1364" x1="-36.6666" y1="5.34131" x2="-36.6666" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_467_1364" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEEAF2"/>
+<stop offset="0.458959" stop-color="#9AA3A8"/>
+<stop offset="1" stop-color="#5E6366"/>
+</linearGradient>
+<linearGradient id="paint6_linear_467_1364" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint7_linear_467_1364" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_467_1364" x1="33.0615" y1="0.93303" x2="32.9445" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint9_linear_467_1364" x1="6.81248" y1="6.65243" x2="18.6608" y2="57.5888" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_467_1364" x1="23.1374" y1="19.1188" x2="49.1137" y2="45.0951" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_467_1364">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/중앙.svg
new file mode 100644
index 0000000..6cc74d2
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/실사화/중앙.svg	
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1383)">
+<g clip-path="url(#clip1_467_1383)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1383)"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1383)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1383)">
+<rect x="-249.951" y="0.932861" width="590.064" height="64.1342" rx="6.732" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13086" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1383)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1383)">
+<rect x="-227.107" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1383)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1383)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1383)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1383" x="-250.611" y="-0.123139" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1383"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1383" result="effect2_innerShadow_467_1383"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1383"/>
+</filter>
+<filter id="filter1_ddi_467_1383" x="-228.163" y="2.90412" width="546.489" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1383"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1383" result="effect2_dropShadow_467_1383"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1383" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1383"/>
+</filter>
+<filter id="filter2_f_467_1383" x="-219.201" y="4.02131" width="528.564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1383"/>
+</filter>
+<linearGradient id="paint0_linear_467_1383" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1383" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1383" x1="45.0809" y1="0.932861" x2="45.0809" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1383" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1383" x1="-147.526" y1="5.34131" x2="-147.526" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1383">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_467_1383">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/위치도/오른쪽.svg
new file mode 100644
index 0000000..aab3ab5
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1905" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#444444"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1905)" fill-opacity="0.3"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1905)"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1905)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1905" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/위치도/왼쪽.svg
new file mode 100644
index 0000000..1abe8c9
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/교차로/위치도/왼쪽.svg	
@@ -0,0 +1,15 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1902" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#444444"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1902)"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1902)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#555555" stroke-width="4"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 13.5C34.3807 13.5 35.5 14.6193 35.5 16V21.1367L45.0859 30.7227H51.0566C52.4373 30.7228 53.5566 31.842 53.5566 33.2227C53.5564 34.6031 52.4371 35.7225 51.0566 35.7227H44.3652L35.5 44.5879V50C35.5 51.3807 34.3807 52.5 33 52.5C31.6193 52.5 30.5 51.3807 30.5 50V44.8613L21.3613 35.7227H14.9453C13.5647 35.7227 12.4455 34.6032 12.4453 33.2227C12.4453 31.8419 13.5646 30.7227 14.9453 30.7227H20.6406L30.5 20.8633V16C30.5 14.6193 31.6193 13.5 33 13.5ZM30.5 42.0332V35.7227H24.1895L30.5 42.0332ZM35.5 35.7227V41.7598L41.5371 35.7227H35.5ZM35.5 30.7227H42.2578L35.5 23.9648V30.7227ZM23.4688 30.7227H30.5V23.6914L23.4688 30.7227Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/오른쪽.svg
new file mode 100644
index 0000000..bfee57e
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/오른쪽.svg	
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1471)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_467_1471)" stroke="url(#paint1_linear_467_1471)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1471)">
+<path d="M-44.9453 7.66487C-44.9453 3.94688 -41.9313 0.932861 -38.2133 0.932861H25.0126C28.7306 0.932861 31.7446 3.94688 31.7446 7.66486V32.067C31.7446 50.2924 16.97 65.067 -1.25538 65.067H-38.2133C-41.9313 65.067 -44.9453 62.053 -44.9453 58.335V7.66487Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M-38.2129 1.1311H25.0127C28.6213 1.13114 31.5469 4.05668 31.5469 7.66528V32.0667C31.5469 50.1827 16.8602 64.8694 -1.25586 64.8694H-38.2129C-41.8215 64.8694 -44.747 61.9438 -44.7471 58.3352V7.66528C-44.7471 4.05665 -41.8215 1.1311 -38.2129 1.1311Z" stroke="url(#paint2_linear_467_1471)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1471)">
+<path d="M-41.9766 7.39212C-41.9766 5.64248 -40.5582 4.22412 -38.8086 4.22412H25.6074C27.3571 4.22412 28.7754 5.64248 28.7754 7.39212V33.0001C28.7754 48.8927 15.892 61.7761 -0.000556946 61.7761H-38.8086C-40.5582 61.7761 -41.9766 60.3578 -41.9766 58.6081V7.39212Z" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48779H25.6074C27.2112 4.48779 28.5117 5.78827 28.5117 7.39209V33.0005C28.5115 48.7471 15.7456 61.5122 -0.000976562 61.5122H-38.8086C-40.4124 61.5122 -41.7129 60.2117 -41.7129 58.6079V7.39209C-41.7129 5.78828 -40.4124 4.48781 -38.8086 4.48779Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1471)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_467_1471)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_467_1471)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1471)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1471" x="-45.6053" y="-0.123139" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1471"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1471" result="effect2_innerShadow_467_1471"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1471"/>
+</filter>
+<filter id="filter1_ddi_467_1471" x="-43.0326" y="2.90412" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1471"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1471" result="effect2_dropShadow_467_1471"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1471" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1471"/>
+</filter>
+<filter id="filter2_f_467_1471" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1471"/>
+</filter>
+<filter id="filter3_f_467_1471" x="24.402" y="6.33634" width="2.45964" height="3.29265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_467_1471"/>
+</filter>
+<linearGradient id="paint0_linear_467_1471" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1471" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1471" x1="-6.60035" y1="0.932861" x2="-6.60035" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1471" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1471" x1="-39.4289" y1="6.27284" x2="-29.5268" y2="58.8748" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1471">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/왼쪽.svg
new file mode 100644
index 0000000..fa4f4b5
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/왼쪽.svg	
@@ -0,0 +1,241 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1441)">
+<mask id="mask0_467_1441" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_467_1441)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1441)" stroke="url(#paint1_linear_467_1441)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1441)">
+<rect x="-66.252" y="0.932861" width="170.438" height="64.1342" rx="6.732" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13086" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1441)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1441)">
+<rect x="-59.6523" y="4.22412" width="157.242" height="57.552" rx="3.168" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.48812" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1441)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1441)"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1441)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1441)">
+<path d="M2.64258 32.7361C2.64258 14.5107 17.4172 -0.263916 35.6426 -0.263916H66.5306C67.697 -0.263916 68.6426 0.681659 68.6426 1.84808V32.7361C68.6426 50.9615 53.868 65.7361 35.6426 65.7361H4.75458C3.58815 65.7361 2.64258 64.7905 2.64258 63.6241V32.7361Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_467_1441" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_467_1441)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_467_1441)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1441)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_467_1441)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1441)"/>
+<g filter="url(#filter4_iif_467_1441)">
+<path d="M0.93392 33.8745C0.967179 15.6491 15.7687 0.901473 33.9941 0.934732L64.0729 0.989621C64.6561 0.990686 65.128 1.46433 65.1269 2.04755L65.0721 32.1257C65.0388 50.351 50.2373 65.0987 32.0119 65.0654L1.9331 65.0105C1.34989 65.0095 0.877968 64.5358 0.879032 63.9526L0.93392 33.8745Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M33.9937 1.13297L64.0728 1.18786C64.5464 1.18887 64.9293 1.57323 64.9286 2.04685L64.8737 32.1249C64.8407 50.2409 50.1282 64.9008 32.0122 64.8677L1.93313 64.8129C1.45942 64.8118 1.07641 64.4266 1.07727 63.9529L1.13216 33.8748C1.16523 15.7588 15.8777 1.09992 33.9937 1.13297Z" stroke="url(#paint8_linear_467_1441)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_467_1441)">
+<mask id="path-13-inside-2_467_1441" fill="white">
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z"/>
+</mask>
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_467_1441)"/>
+</g>
+<g filter="url(#filter6_f_467_1441)">
+<mask id="path-14-inside-3_467_1441" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_467_1441)"/>
+</g>
+<mask id="path-15-inside-4_467_1441" fill="white">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z"/>
+</mask>
+<g filter="url(#filter7_i_467_1441)">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" fill="#7C92AA" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" stroke="url(#paint9_linear_467_1441)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_467_1441)"/>
+<g filter="url(#filter8_dii_467_1441)">
+<path d="M40.568 44.8573C39.0746 44.8573 37.6773 44.6012 36.376 44.0892C35.0746 43.5559 33.9226 42.7666 32.92 41.7212C31.9386 40.6759 31.16 39.3959 30.584 37.8813C30.0293 36.3666 29.752 34.6279 29.752 32.6652C29.752 30.7026 30.04 28.9639 30.616 27.4493C31.192 25.9132 31.9813 24.6119 32.984 23.5452C34.008 22.4786 35.1813 21.6679 36.504 21.1132C37.848 20.5586 39.2666 20.2812 40.76 20.2812C42.2746 20.2812 43.6186 20.5906 44.792 21.2092C45.9866 21.8066 46.9573 22.5106 47.704 23.3212L45.24 26.3293C44.6426 25.7319 43.9813 25.2519 43.256 24.8893C42.552 24.5266 41.752 24.3453 40.856 24.3453C39.6613 24.3453 38.584 24.6759 37.624 25.3373C36.6853 25.9772 35.9493 26.9052 35.416 28.1213C34.8826 29.3372 34.616 30.7986 34.616 32.5052C34.616 34.2332 34.8613 35.7159 35.352 36.9533C35.864 38.1693 36.5786 39.1079 37.496 39.7692C38.4346 40.4306 39.5226 40.7613 40.76 40.7613C41.784 40.7613 42.6906 40.5479 43.48 40.1213C44.2906 39.6733 45.0053 39.1079 45.624 38.4253L48.152 41.3692C47.1706 42.5212 46.0506 43.3959 44.792 43.9932C43.5333 44.5692 42.1253 44.8573 40.568 44.8573Z" fill="url(#paint10_linear_467_1441)"/>
+<path d="M40.7598 20.4131C42.256 20.4131 43.5787 20.7189 44.7305 21.3262L44.7334 21.3271C45.8747 21.8978 46.8034 22.5666 47.5264 23.3281L45.2275 26.1348C44.6482 25.5753 44.0117 25.1197 43.3154 24.7715H43.3164C42.5914 24.398 41.7696 24.2129 40.8555 24.2129C39.635 24.213 38.5313 24.5517 37.5488 25.2285C36.5868 25.8847 35.8364 26.8339 35.2949 28.0684C34.7526 29.305 34.4844 30.7852 34.4844 32.5049C34.4844 34.2448 34.7312 35.7453 35.2295 37.002L35.2305 37.0049C35.7503 38.2392 36.479 39.1983 37.4189 39.876L37.4199 39.877C38.3825 40.5552 39.4975 40.8935 40.7598 40.8936C41.8026 40.8936 42.7318 40.6758 43.543 40.2373L43.5439 40.2363C44.3232 39.8057 45.0135 39.2664 45.6182 38.6221L47.9756 41.3672C47.0236 42.4634 45.9457 43.2992 44.7373 43.873C43.498 44.4402 42.109 44.7255 40.5684 44.7256C39.0907 44.7256 37.7096 44.4722 36.4248 43.9668H36.4258C35.3026 43.5064 34.292 42.8527 33.3936 42.0049L33.0156 41.6299C32.0479 40.5988 31.2775 39.3342 30.707 37.834C30.1592 36.3371 29.8838 34.6146 29.8838 32.665C29.8838 30.7152 30.17 28.9929 30.7393 27.4961V27.4951C31.3097 25.9742 32.0903 24.6889 33.0791 23.6367C33.9645 22.7144 34.9621 21.9865 36.0723 21.4521L36.5547 21.2354C37.8821 20.6876 39.2834 20.4131 40.7598 20.4131Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+<path d="M21.6543 44.4093V20.6973H26.3903V44.4093H21.6543Z" fill="url(#paint11_linear_467_1441)"/>
+<path d="M26.2578 20.8291V44.2773H21.7861V20.8291H26.2578Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1441" x="-66.912" y="-0.123139" width="171.757" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1441"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1441" result="effect2_innerShadow_467_1441"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1441"/>
+</filter>
+<filter id="filter1_ddi_467_1441" x="-60.7083" y="2.90412" width="159.354" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1441"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1441" result="effect2_dropShadow_467_1441"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1441" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1441"/>
+</filter>
+<filter id="filter2_f_467_1441" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1441"/>
+</filter>
+<filter id="filter3_f_467_1441" x="-2.63742" y="-5.54392" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_467_1441"/>
+</filter>
+<filter id="filter4_iif_467_1441" x="0.218906" y="-0.12143" width="65.568" height="65.8469" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1441"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1441" result="effect2_innerShadow_467_1441"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1441"/>
+</filter>
+<filter id="filter5_dd_467_1441" x="3.17252" y="2.90412" width="59.6647" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1441"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1441" result="effect2_dropShadow_467_1441"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1441" result="shape"/>
+</filter>
+<filter id="filter6_f_467_1441" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1441"/>
+</filter>
+<filter id="filter7_i_467_1441" x="5.21028" y="5.73413" width="55.0592" height="55.5877" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1441"/>
+</filter>
+<filter id="filter8_dii_467_1441" x="19.8063" y="19.2253" width="30.722" height="28.7999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1441"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_467_1441" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_467_1441"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_467_1441" result="effect3_innerShadow_467_1441"/>
+</filter>
+<linearGradient id="paint0_linear_467_1441" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1441" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1441" x1="18.9672" y1="0.932861" x2="18.9672" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1441" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1441" x1="-53.9958" y1="6.27284" x2="-49.4152" y2="60.3509" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_467_1441" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEEAF2"/>
+<stop offset="0.458959" stop-color="#9AA3A8"/>
+<stop offset="1" stop-color="#5E6366"/>
+</linearGradient>
+<linearGradient id="paint6_linear_467_1441" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint7_linear_467_1441" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_467_1441" x1="33.0615" y1="0.93303" x2="32.9445" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint9_linear_467_1441" x1="6.81248" y1="6.65243" x2="18.6608" y2="57.5888" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_467_1441" x1="34.0819" y1="23.9052" x2="49.5376" y2="34.8826" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<linearGradient id="paint11_linear_467_1441" x1="22.7688" y1="24.1938" x2="28.5463" y2="25.2885" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_467_1441">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/중앙.svg
new file mode 100644
index 0000000..fb512b7
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/실사화/중앙.svg	
@@ -0,0 +1,97 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1463)">
+<g clip-path="url(#clip1_467_1463)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1463)" stroke="url(#paint1_linear_467_1463)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1463)">
+<rect x="-249.951" y="0.932861" width="590.064" height="64.1342" rx="6.732" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13086" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1463)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1463)">
+<rect x="-227.107" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1463)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1463)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1463)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1463" x="-250.611" y="-0.123139" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1463"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1463" result="effect2_innerShadow_467_1463"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1463"/>
+</filter>
+<filter id="filter1_ddi_467_1463" x="-228.163" y="2.90412" width="546.489" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1463"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1463" result="effect2_dropShadow_467_1463"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1463" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1463"/>
+</filter>
+<filter id="filter2_f_467_1463" x="-219.201" y="4.02131" width="528.564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1463"/>
+</filter>
+<linearGradient id="paint0_linear_467_1463" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1463" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1463" x1="45.0809" y1="0.932861" x2="45.0809" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1463" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1463" x1="-207.521" y1="6.27284" x2="-206.189" y2="60.7063" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1463">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_467_1463">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/위치도/오른쪽.svg
new file mode 100644
index 0000000..1b05d0e
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1911" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#777777"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1911)" fill-opacity="0.3"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1911)"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1911)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1911" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/위치도/왼쪽.svg
new file mode 100644
index 0000000..80d91a9
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/시설물/위치도/왼쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1908" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#777777"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1908)"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1908)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#555555" stroke-width="4"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M40.6665 45.2879C39.1731 45.2879 37.7758 45.0319 36.4745 44.5199C35.1731 43.9866 34.0211 43.1972 33.0185 42.1519C32.0371 41.1066 31.2585 39.8266 30.6825 38.3119C30.1278 36.7972 29.8505 35.0586 29.8505 33.0959C29.8505 31.1332 30.1385 29.3946 30.7145 27.8799C31.2905 26.3439 32.0798 25.0426 33.0825 23.9759C34.1065 22.9092 35.2798 22.0986 36.6025 21.5439C37.9465 20.9892 39.3651 20.7119 40.8585 20.7119C42.3731 20.7119 43.7171 21.0212 44.8905 21.6399C46.0851 22.2372 47.0558 22.9412 47.8025 23.7519L45.3385 26.7599C44.7411 26.1626 44.0798 25.6826 43.3545 25.3199C42.6505 24.9572 41.8505 24.7759 40.9545 24.7759C39.7598 24.7759 38.6825 25.1066 37.7225 25.7679C36.7838 26.4079 36.0478 27.3359 35.5145 28.5519C34.9811 29.7679 34.7145 31.2292 34.7145 32.9359C34.7145 34.6639 34.9598 36.1466 35.4505 37.3839C35.9625 38.5999 36.6771 39.5386 37.5945 40.1999C38.5331 40.8612 39.6211 41.1919 40.8585 41.1919C41.8825 41.1919 42.7891 40.9786 43.5785 40.5519C44.3891 40.1039 45.1038 39.5386 45.7225 38.8559L48.2505 41.7999C47.2691 42.9519 46.1491 43.8266 44.8905 44.4239C43.6318 44.9999 42.2238 45.2879 40.6665 45.2879Z" fill="white"/>
+<path d="M21.752 44.8399V21.1279H26.488V44.8399H21.752Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/위치도/오른쪽.svg
new file mode 100644
index 0000000..1b05d0e
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1911" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#777777"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1911)" fill-opacity="0.3"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1911)"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1911)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1911" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/위치도/왼쪽.svg
new file mode 100644
index 0000000..80d91a9
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/나들목/위치도/왼쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1908" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#777777"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1908)"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1908)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#555555" stroke-width="4"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M40.6665 45.2879C39.1731 45.2879 37.7758 45.0319 36.4745 44.5199C35.1731 43.9866 34.0211 43.1972 33.0185 42.1519C32.0371 41.1066 31.2585 39.8266 30.6825 38.3119C30.1278 36.7972 29.8505 35.0586 29.8505 33.0959C29.8505 31.1332 30.1385 29.3946 30.7145 27.8799C31.2905 26.3439 32.0798 25.0426 33.0825 23.9759C34.1065 22.9092 35.2798 22.0986 36.6025 21.5439C37.9465 20.9892 39.3651 20.7119 40.8585 20.7119C42.3731 20.7119 43.7171 21.0212 44.8905 21.6399C46.0851 22.2372 47.0558 22.9412 47.8025 23.7519L45.3385 26.7599C44.7411 26.1626 44.0798 25.6826 43.3545 25.3199C42.6505 24.9572 41.8505 24.7759 40.9545 24.7759C39.7598 24.7759 38.6825 25.1066 37.7225 25.7679C36.7838 26.4079 36.0478 27.3359 35.5145 28.5519C34.9811 29.7679 34.7145 31.2292 34.7145 32.9359C34.7145 34.6639 34.9598 36.1466 35.4505 37.3839C35.9625 38.5999 36.6771 39.5386 37.5945 40.1999C38.5331 40.8612 39.6211 41.1919 40.8585 41.1919C41.8825 41.1919 42.7891 40.9786 43.5785 40.5519C44.3891 40.1039 45.1038 39.5386 45.7225 38.8559L48.2505 41.7999C47.2691 42.9519 46.1491 43.8266 44.8905 44.4239C43.6318 44.9999 42.2238 45.2879 40.6665 45.2879Z" fill="white"/>
+<path d="M21.752 44.8399V21.1279H26.488V44.8399H21.752Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/오른쪽.svg
new file mode 100644
index 0000000..2ea445e
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/오른쪽.svg	
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1431)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_467_1431)" stroke="url(#paint1_linear_467_1431)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1431)">
+<path d="M-44.9453 7.66487C-44.9453 3.94688 -41.9313 0.932861 -38.2133 0.932861H25.0126C28.7306 0.932861 31.7446 3.94688 31.7446 7.66486V32.067C31.7446 50.2924 16.97 65.067 -1.25538 65.067H-38.2133C-41.9313 65.067 -44.9453 62.053 -44.9453 58.335V7.66487Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M-38.2129 1.1311H25.0127C28.6213 1.13114 31.5469 4.05668 31.5469 7.66528V32.0667C31.5469 50.1827 16.8602 64.8694 -1.25586 64.8694H-38.2129C-41.8215 64.8694 -44.747 61.9438 -44.7471 58.3352V7.66528C-44.7471 4.05665 -41.8215 1.1311 -38.2129 1.1311Z" stroke="url(#paint2_linear_467_1431)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1431)">
+<path d="M-41.9766 7.39212C-41.9766 5.64248 -40.5582 4.22412 -38.8086 4.22412H25.6074C27.3571 4.22412 28.7754 5.64248 28.7754 7.39212V33.0001C28.7754 48.8927 15.892 61.7761 -0.000556946 61.7761H-38.8086C-40.5582 61.7761 -41.9766 60.3578 -41.9766 58.6081V7.39212Z" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48779H25.6074C27.2112 4.48779 28.5117 5.78827 28.5117 7.39209V33.0005C28.5115 48.7471 15.7456 61.5122 -0.000976562 61.5122H-38.8086C-40.4124 61.5122 -41.7129 60.2117 -41.7129 58.6079V7.39209C-41.7129 5.78828 -40.4124 4.48781 -38.8086 4.48779Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1431)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_467_1431)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_467_1431)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1431)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1431" x="-45.6053" y="-0.123139" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1431"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1431" result="effect2_innerShadow_467_1431"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1431"/>
+</filter>
+<filter id="filter1_ddi_467_1431" x="-43.0326" y="2.90412" width="72.864" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1431"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1431" result="effect2_dropShadow_467_1431"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1431" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1431"/>
+</filter>
+<filter id="filter2_f_467_1431" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1431"/>
+</filter>
+<filter id="filter3_f_467_1431" x="24.402" y="6.33634" width="2.45964" height="3.29265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_467_1431"/>
+</filter>
+<linearGradient id="paint0_linear_467_1431" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1431" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1431" x1="-6.60035" y1="0.932861" x2="-6.60035" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1431" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1431" x1="-39.4289" y1="6.27284" x2="-29.5268" y2="58.8748" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1431">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/왼쪽.svg
new file mode 100644
index 0000000..a3d457c
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/왼쪽.svg	
@@ -0,0 +1,241 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1401)">
+<mask id="mask0_467_1401" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_467_1401)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1401)" stroke="url(#paint1_linear_467_1401)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1401)">
+<rect x="-66.252" y="0.932861" width="170.438" height="64.1342" rx="6.732" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13086" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1401)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1401)">
+<rect x="-59.6523" y="4.22412" width="157.242" height="57.552" rx="3.168" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.48812" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1401)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1401)"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1401)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1401)">
+<path d="M2.64258 32.7361C2.64258 14.5107 17.4172 -0.263916 35.6426 -0.263916H66.5306C67.697 -0.263916 68.6426 0.681659 68.6426 1.84808V32.7361C68.6426 50.9615 53.868 65.7361 35.6426 65.7361H4.75458C3.58815 65.7361 2.64258 64.7905 2.64258 63.6241V32.7361Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_467_1401" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_467_1401)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_467_1401)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1401)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_467_1401)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1401)"/>
+<g filter="url(#filter4_iif_467_1401)">
+<path d="M0.93392 33.8745C0.967179 15.6491 15.7687 0.901473 33.9941 0.934732L64.0729 0.989621C64.6561 0.990686 65.128 1.46433 65.1269 2.04755L65.0721 32.1257C65.0388 50.351 50.2373 65.0987 32.0119 65.0654L1.9331 65.0105C1.34989 65.0095 0.877968 64.5358 0.879032 63.9526L0.93392 33.8745Z" fill="#7C92AA" fill-opacity="0.01"/>
+<path d="M33.9937 1.13297L64.0728 1.18786C64.5464 1.18887 64.9293 1.57323 64.9286 2.04685L64.8737 32.1249C64.8407 50.2409 50.1282 64.9008 32.0122 64.8677L1.93313 64.8129C1.45942 64.8118 1.07641 64.4266 1.07727 63.9529L1.13216 33.8748C1.16523 15.7588 15.8777 1.09992 33.9937 1.13297Z" stroke="url(#paint8_linear_467_1401)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_467_1401)">
+<mask id="path-13-inside-2_467_1401" fill="white">
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z"/>
+</mask>
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_467_1401)"/>
+</g>
+<g filter="url(#filter6_f_467_1401)">
+<mask id="path-14-inside-3_467_1401" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_467_1401)"/>
+</g>
+<mask id="path-15-inside-4_467_1401" fill="white">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z"/>
+</mask>
+<g filter="url(#filter7_i_467_1401)">
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" fill="#7C92AA" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4541C5.73828 18.1448 18.149 5.73413 33.4583 5.73413H60.0058C60.1516 5.73413 60.2698 5.85233 60.2698 5.99813V32.5458C60.2698 47.8551 47.8591 60.2658 32.5498 60.2658H6.00228C5.85648 60.2658 5.73828 60.1476 5.73828 60.0018V33.4541Z" stroke="url(#paint9_linear_467_1401)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_467_1401)"/>
+<g filter="url(#filter8_dii_467_1401)">
+<path d="M43.8043 45.6434C42.3109 45.6434 40.9136 45.3874 39.6123 44.8754C38.3109 44.342 37.1589 43.5527 36.1563 42.5074C35.1749 41.462 34.3963 40.1821 33.8203 38.6674C33.2656 37.1527 32.9883 35.4141 32.9883 33.4514C32.9883 31.4887 33.2763 29.75 33.8523 28.2354C34.4283 26.6994 35.2176 25.398 36.2203 24.3314C37.2443 23.2647 38.4176 22.454 39.7403 21.8994C41.0843 21.3447 42.5029 21.0674 43.9963 21.0674C45.5109 21.0674 46.8549 21.3767 48.0283 21.9954C49.2229 22.5927 50.1936 23.2967 50.9403 24.1074L48.4763 27.1154C47.8789 26.518 47.2176 26.038 46.4923 25.6754C45.7883 25.3127 44.9883 25.1314 44.0923 25.1314C42.8976 25.1314 41.8203 25.462 40.8603 26.1234C39.9216 26.7634 39.1856 27.6914 38.6523 28.9074C38.1189 30.1234 37.8523 31.5847 37.8523 33.2914C37.8523 35.0194 38.0976 36.502 38.5883 37.7394C39.1003 38.9554 39.8149 39.894 40.7323 40.5554C41.6709 41.2167 42.7589 41.5474 43.9963 41.5474C45.0203 41.5474 45.9269 41.3341 46.7163 40.9074C47.5269 40.4594 48.2416 39.8941 48.8603 39.2114L51.3883 42.1554C50.4069 43.3074 49.2869 44.182 48.0283 44.7794C46.7696 45.3554 45.3616 45.6434 43.8043 45.6434Z" fill="url(#paint10_linear_467_1401)"/>
+<path d="M43.9961 21.1992C45.4924 21.1992 46.815 21.505 47.9668 22.1123L47.9697 22.1133C49.111 22.684 50.0397 23.3528 50.7627 24.1143L48.4639 26.9209C47.8846 26.3614 47.248 25.9058 46.5518 25.5576H46.5527C45.8277 25.1842 45.006 24.999 44.0918 24.999C42.8713 24.9991 41.7676 25.3378 40.7852 26.0146C39.8231 26.6708 39.0727 27.62 38.5312 28.8545C37.9889 30.0911 37.7207 31.5713 37.7207 33.291C37.7207 35.0309 37.9675 36.5314 38.4658 37.7881L38.4668 37.791C38.9866 39.0254 39.7153 39.9845 40.6553 40.6621L40.6562 40.6631C41.6189 41.3413 42.7338 41.6797 43.9961 41.6797C45.0389 41.6797 45.9681 41.4619 46.7793 41.0234L46.7803 41.0225C47.5595 40.5918 48.2498 40.0525 48.8545 39.4082L51.2119 42.1533C50.2599 43.2495 49.182 44.0854 47.9736 44.6592C46.7344 45.2263 45.3453 45.5117 43.8047 45.5117C42.327 45.5117 40.9459 45.2583 39.6611 44.7529H39.6621C38.5389 44.2926 37.5284 43.6389 36.6299 42.791L36.252 42.416C35.2842 41.3849 34.5139 40.1204 33.9434 38.6201C33.3955 37.1232 33.1201 35.4008 33.1201 33.4512C33.1201 31.5013 33.4064 29.7791 33.9756 28.2822V28.2812C34.546 26.7603 35.3266 25.4751 36.3154 24.4229C37.2008 23.5006 38.1985 22.7726 39.3086 22.2383L39.791 22.0215C41.1185 21.4737 42.5197 21.1992 43.9961 21.1992Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+<path d="M22.4159 45.6434C20.7092 45.6434 19.2586 45.3021 18.0639 44.6194C16.8692 43.9154 15.8772 42.8701 15.0879 41.4834L18.3199 39.0834C18.7892 39.9367 19.3226 40.5661 19.9199 40.9714C20.5172 41.3554 21.1572 41.5474 21.8399 41.5474C22.8852 41.5474 23.6746 41.2274 24.2079 40.5874C24.7412 39.9474 25.0079 38.8061 25.0079 37.1634V21.4834H29.7439V37.5474C29.7439 39.0407 29.4879 40.4061 28.9759 41.6434C28.4639 42.8594 27.6639 43.8301 26.5759 44.5554C25.5092 45.2807 24.1226 45.6434 22.4159 45.6434Z" fill="url(#paint11_linear_467_1401)"/>
+<path d="M29.6123 21.6152V37.5479C29.6123 39.0257 29.3581 40.3733 28.8535 41.5928C28.3515 42.7847 27.5688 43.7347 26.5029 44.4453L26.502 44.4463C25.4633 45.1526 24.1046 45.5117 22.416 45.5117C20.8323 45.5117 19.479 45.2143 18.3516 44.626L18.1289 44.5049C16.9867 43.8313 16.0312 42.8372 15.2617 41.5186L18.2793 39.2773C18.7378 40.0774 19.2579 40.6822 19.8457 41.0811L19.8486 41.082C20.4663 41.4791 21.1308 41.6797 21.8398 41.6797C22.9135 41.6797 23.745 41.3494 24.3096 40.6719C24.8744 39.994 25.1396 38.8109 25.1396 37.1631V21.6152H29.6123Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1401" x="-66.912" y="-0.123139" width="171.757" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1401"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1401" result="effect2_innerShadow_467_1401"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1401"/>
+</filter>
+<filter id="filter1_ddi_467_1401" x="-60.7083" y="2.90412" width="159.354" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1401"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1401" result="effect2_dropShadow_467_1401"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1401" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1401"/>
+</filter>
+<filter id="filter2_f_467_1401" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1401"/>
+</filter>
+<filter id="filter3_f_467_1401" x="-2.63742" y="-5.54392" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_467_1401"/>
+</filter>
+<filter id="filter4_iif_467_1401" x="0.218906" y="-0.12143" width="65.568" height="65.8469" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1401"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1401" result="effect2_innerShadow_467_1401"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1401"/>
+</filter>
+<filter id="filter5_dd_467_1401" x="3.17252" y="2.90412" width="59.6647" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1401"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1401" result="effect2_dropShadow_467_1401"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1401" result="shape"/>
+</filter>
+<filter id="filter6_f_467_1401" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1401"/>
+</filter>
+<filter id="filter7_i_467_1401" x="5.21028" y="5.73413" width="55.0592" height="55.5877" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1401"/>
+</filter>
+<filter id="filter8_dii_467_1401" x="13.2399" y="20.0114" width="40.5248" height="28.7999" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1401"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_467_1401" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_467_1401"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_467_1401" result="effect3_innerShadow_467_1401"/>
+</filter>
+<linearGradient id="paint0_linear_467_1401" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1401" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1401" x1="18.9672" y1="0.932861" x2="18.9672" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1401" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1401" x1="-53.9958" y1="6.27284" x2="-49.4152" y2="60.3509" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_467_1401" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEEAF2"/>
+<stop offset="0.458959" stop-color="#9AA3A8"/>
+<stop offset="1" stop-color="#5E6366"/>
+</linearGradient>
+<linearGradient id="paint6_linear_467_1401" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint7_linear_467_1401" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_467_1401" x1="33.0615" y1="0.93303" x2="32.9445" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint9_linear_467_1401" x1="6.81248" y1="6.65243" x2="18.6608" y2="57.5888" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_467_1401" x1="37.3183" y1="24.6914" x2="52.7739" y2="35.6687" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<linearGradient id="paint11_linear_467_1401" x1="18.5368" y1="25.046" x2="32.4501" y2="33.0527" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_467_1401">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/중앙.svg
new file mode 100644
index 0000000..1c537c8
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/실사화/중앙.svg	
@@ -0,0 +1,97 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1423)">
+<g clip-path="url(#clip1_467_1423)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1423)" stroke="url(#paint1_linear_467_1423)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1423)">
+<rect x="-249.951" y="0.932861" width="590.064" height="64.1342" rx="6.732" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13086" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1423)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1423)">
+<rect x="-227.107" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="#7C92AA" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1423)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#8795A4" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#7C92AA" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1423)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1423)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1423" x="-250.611" y="-0.123139" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1423"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1423" result="effect2_innerShadow_467_1423"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1423"/>
+</filter>
+<filter id="filter1_ddi_467_1423" x="-228.163" y="2.90412" width="546.489" height="60.456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1423"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1423" result="effect2_dropShadow_467_1423"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1423" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1423"/>
+</filter>
+<filter id="filter2_f_467_1423" x="-219.201" y="4.02131" width="528.564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1423"/>
+</filter>
+<linearGradient id="paint0_linear_467_1423" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#94A1A8"/>
+<stop offset="0.5" stop-color="#6C757A"/>
+<stop offset="1" stop-color="#32373A"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1423" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E727D"/>
+<stop offset="0.2" stop-color="#B7C5D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1423" x1="45.0809" y1="0.932861" x2="45.0809" y2="65.067" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#94A1A8"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1423" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AFB9C4"/>
+<stop offset="0.201923" stop-color="#8C9AA9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1423" x1="-207.521" y1="6.27284" x2="-206.189" y2="60.7063" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#8795A4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1423">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_467_1423">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/위치도/오른쪽.svg
new file mode 100644
index 0000000..c2be4d5
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1899" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#777777"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1899)" fill-opacity="0.3"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1899)"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1899)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1899" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/위치도/왼쪽.svg
new file mode 100644
index 0000000..06a4db4
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/분기점/위치도/왼쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1896" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#777777"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1896)"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#0D6199" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1896)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#555555" stroke-width="4"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M43.5651 45.2879C42.0718 45.2879 40.6744 45.0319 39.3731 44.5199C38.0718 43.9866 36.9198 43.1972 35.9171 42.1519C34.9358 41.1066 34.1571 39.8266 33.5811 38.3119C33.0264 36.7972 32.7491 35.0586 32.7491 33.0959C32.7491 31.1332 33.0371 29.3946 33.6131 27.8799C34.1891 26.3439 34.9784 25.0426 35.9811 23.9759C37.0051 22.9092 38.1784 22.0986 39.5011 21.5439C40.8451 20.9892 42.2638 20.7119 43.7571 20.7119C45.2718 20.7119 46.6158 21.0212 47.7891 21.6399C48.9838 22.2372 49.9544 22.9412 50.7011 23.7519L48.2371 26.7599C47.6398 26.1626 46.9784 25.6826 46.2531 25.3199C45.5491 24.9572 44.7491 24.7759 43.8531 24.7759C42.6584 24.7759 41.5811 25.1066 40.6211 25.7679C39.6824 26.4079 38.9464 27.3359 38.4131 28.5519C37.8798 29.7679 37.6131 31.2292 37.6131 32.9359C37.6131 34.6639 37.8584 36.1466 38.3491 37.3839C38.8611 38.5999 39.5758 39.5386 40.4931 40.1999C41.4318 40.8612 42.5198 41.1919 43.7571 41.1919C44.7811 41.1919 45.6878 40.9786 46.4771 40.5519C47.2878 40.1039 48.0024 39.5386 48.6211 38.8559L51.1491 41.7999C50.1678 42.9519 49.0478 43.8266 47.7891 44.4239C46.5304 44.9999 45.1224 45.2879 43.5651 45.2879Z" fill="white"/>
+<path d="M22.1776 45.2879C20.4709 45.2879 19.0203 44.9466 17.8256 44.2639C16.6309 43.5599 15.6389 42.5146 14.8496 41.1279L18.0816 38.7279C18.5509 39.5812 19.0843 40.2106 19.6816 40.6159C20.2789 40.9999 20.9189 41.1919 21.6016 41.1919C22.6469 41.1919 23.4363 40.8719 23.9696 40.2319C24.5029 39.5919 24.7696 38.4506 24.7696 36.8079V21.1279H29.5056V37.1919C29.5056 38.6852 29.2496 40.0506 28.7376 41.2879C28.2256 42.5039 27.4256 43.4746 26.3376 44.1999C25.2709 44.9252 23.8843 45.2879 22.1776 45.2879Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/오른쪽.svg
new file mode 100644
index 0000000..a2fed5e
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/오른쪽.svg	
@@ -0,0 +1,144 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_12068)">
+<g filter="url(#filter0_i_450_12068)">
+<path d="M-188 40C-188 17.9086 -170.091 0 -148 0H8C30.0914 0 48 17.9086 48 40V86C48 90.9706 43.9706 95 39 95H-178C-183.523 95 -188 90.5229 -188 85V40Z" fill="#6C757A"/>
+</g>
+<path d="M-148 1.5H8C29.263 1.5 46.5 18.737 46.5 40V86C46.5 90.1421 43.1421 93.5 39 93.5H-178C-182.694 93.5 -186.5 89.6944 -186.5 85V40C-186.5 18.737 -169.263 1.5 -148 1.5Z" stroke="#4E575C" stroke-width="3"/>
+<g filter="url(#filter1_i_450_12068)">
+<path d="M-183 42C-183 21.5655 -166.435 5 -146 5H6C26.4345 5 43 21.5655 43 42V90C43 92.2091 41.2091 94 39 94H-179C-181.209 94 -183 92.2091 -183 90V42Z" fill="#6C757A"/>
+</g>
+<path d="M6 4.5C26.7107 4.5 43.5 21.2893 43.5 42V90C43.5 92.4853 41.4853 94.5 39 94.5H-179C-181.485 94.5 -183.5 92.4853 -183.5 90V42C-183.5 21.2893 -166.711 4.5 -146 4.5H6Z" stroke="#4E575C" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_12068)" style="mix-blend-mode:plus-lighter">
+<path d="M43.375 87C43.3733 87.0986 43.3335 87.1931 43.2634 87.2628C43.1932 87.3325 43.0986 87.3717 43 87.3717C42.9014 87.3717 42.8068 87.3325 42.7366 87.2628C42.6665 87.1931 42.6267 87.0986 42.625 87C42.5833 84.637 42.5437 82.2739 42.5062 79.9109C42.3228 68.348 42.1891 56.7851 42.1054 45.2222L42.1088 45.2995C41.2471 35.8075 38.4883 26.1616 31.9222 19.2957C26.3411 13.3418 18.5522 9.86908 10.5659 7.89575L10.7826 7.9216C-2.11522 7.84105 -15.013 7.69843 -27.9109 7.49375C-30.2739 7.45625 -32.637 7.41667 -35 7.375C-35.0986 7.37325 -35.1931 7.33355 -35.2628 7.26338C-35.3326 7.19322 -35.3717 7.09857 -35.3717 7C-35.3717 6.90143 -35.3326 6.80678 -35.2628 6.73662C-35.1931 6.66645 -35.0986 6.62675 -35 6.625C-32.637 6.58333 -30.2739 6.54375 -27.9109 6.50625C-15.013 6.30157 -2.11522 6.15895 10.7826 6.0784L10.9993 6.10425C19.2089 8.02431 27.4266 11.5808 33.3771 17.9233C40.3805 25.2535 43.1549 35.4506 43.8912 45.1449L43.8946 45.2222C43.8109 56.7851 43.6772 68.348 43.4938 79.9109C43.4563 82.2739 43.4167 84.637 43.375 87Z" fill="url(#paint0_linear_450_12068)"/>
+</g>
+<mask id="path-6-inside-1_450_12068" fill="white">
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z"/>
+</mask>
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z" fill="#434A4D"/>
+<path d="M-173 39C-173 25.1929 -161.807 14 -148 14H9C22.8071 14 34 25.1929 34 39H30C30 27.402 20.598 18 9 18H-148C-159.598 18 -169 27.402 -169 39H-173ZM-169 39M32 72H-171H32M-167 72C-170.314 72 -173 69.3137 -173 66V39C-173 25.1929 -161.807 14 -148 14V18C-159.598 18 -169 27.402 -169 39V68C-169 70.2091 -168.105 72 -167 72ZM9 14C22.8071 14 34 25.1929 34 39V66C34 69.3137 31.3137 72 28 72C29.1046 72 30 70.2091 30 68V39C30 27.402 20.598 18 9 18V14Z" fill="#2C3032" mask="url(#path-6-inside-1_450_12068)"/>
+<mask id="path-8-inside-2_450_12068" fill="white">
+<path d="M-173 38C-173 24.7452 -162.255 14 -149 14H10C23.2548 14 34 24.7452 34 38V68C34 70.2091 32.2091 72 30 72H-169C-171.209 72 -173 70.2091 -173 68V38Z"/>
+</mask>
+<path d="M-174 38C-174 24.1929 -162.807 13 -149 13H10C23.8071 13 35 24.1929 35 38H33C33 25.2975 22.7025 15 10 15H-149C-161.703 15 -172 25.2975 -172 38H-174ZM-172 38M34 72H-173H34M-169 72C-171.761 72 -174 69.7614 -174 67V38C-174 24.1929 -162.807 13 -149 13V15C-161.703 15 -172 25.2975 -172 38V68C-172 70.2091 -170.657 72 -169 72ZM10 13C23.8071 13 35 24.1929 35 38V67C35 69.7614 32.7614 72 30 72C31.6569 72 33 70.2091 33 68V38C33 25.2975 22.7025 15 10 15V13Z" fill="url(#paint1_linear_450_12068)" mask="url(#path-8-inside-2_450_12068)"/>
+<g filter="url(#filter3_f_450_12068)" style="mix-blend-mode:color-dodge">
+<path d="M41.875 84C41.8728 84.0984 41.8331 84.1927 41.7629 84.2622C41.6928 84.3318 41.5983 84.3709 41.5 84.3709C41.4017 84.3709 41.3072 84.3318 41.2371 84.2622C41.1669 84.1927 41.1272 84.0984 41.125 84C41.125 84 41.125 84 41.125 84C41.0833 82.119 41.0437 80.2381 41.0062 78.3571C40.7547 65.7381 40.5969 53.1191 40.5328 40.5C40.5141 36.3142 39.6745 32.1433 38.0904 28.272C33.312 16.4179 21.7498 8.07363 9.15732 5.6879L9.28261 5.69922C5.40269 5.63959 1.52277 5.5711 -2.35715 5.49375C-4.2381 5.45625 -6.11905 5.41667 -8 5.375C-8.09836 5.37281 -8.19269 5.33305 -8.26224 5.26293C-8.33179 5.19281 -8.37086 5.09834 -8.37086 5C-8.37086 4.90166 -8.33179 4.80719 -8.26224 4.73707C-8.19269 4.66695 -8.09836 4.62719 -8 4.625C-6.11905 4.58333 -4.2381 4.54375 -2.35715 4.50625C1.52277 4.4289 5.40269 4.36041 9.28261 4.30078L9.40789 4.3121C22.4545 6.35251 34.872 14.9223 39.9419 27.5158C41.6225 31.6213 42.493 36.064 42.4672 40.5C42.4031 53.1191 42.2453 65.7381 41.9938 78.3571C41.9563 80.2381 41.9167 82.119 41.875 84Z" fill="url(#paint2_linear_450_12068)"/>
+</g>
+<g filter="url(#filter4_f_450_12068)">
+<path d="M-145 5.5H5C25.7107 5.5 42.5 22.2893 42.5 43V85.7949L31.5645 68.6934C32.7322 67.8814 33.5 66.5322 33.5 65V39C33.5 25.469 22.531 14.5 9 14.5H-149C-162.531 14.5 -173.5 25.469 -173.5 39V65C-173.5 67.0752 -172.095 68.8207 -170.185 69.3408L-182.5 87.835V43C-182.5 22.2893 -165.711 5.5 -145 5.5Z" stroke="url(#paint3_linear_450_12068)"/>
+</g>
+<g opacity="0.3" filter="url(#filter5_f_450_12068)">
+<path d="M29.8113 70.8396H10L13.1698 66.6721H29.0189V33.9283C29.0189 27.2605 22 23 17.5 18C24 22 30.3396 29.1656 31 33.9283V69.8084C30.7822 70.565 30.4874 70.762 29.8113 70.8396Z" fill="url(#paint4_linear_450_12068)"/>
+</g>
+<path d="M-182.28 92.7413C-183.047 92.7413 -183.529 91.9133 -183.149 91.2466L-169.537 67.3301H30.5369L44.1493 91.2466C44.5287 91.9133 44.0473 92.7413 43.2802 92.7413H-182.28Z" fill="url(#paint5_linear_450_12068)" stroke="#4E575C" stroke-width="1.2"/>
+<path d="M43.5 90.2433L-179.887 90L-183.5 93C-182.5 94 -181 95 -179 95H40C42.1116 94.5403 42.5 94.5 44 93.5C44.3071 91.8749 44.1389 91.1965 43.5 90.2433Z" fill="#4E575C"/>
+<g opacity="0.5" filter="url(#filter6_f_450_12068)" style="mix-blend-mode:plus-lighter">
+<path d="M-168 67.9077H29L40.5 89.8538H-179.5L-168 67.9077Z" stroke="url(#paint6_linear_450_12068)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter7_f_450_12068)">
+<path d="M2 20.5L5.56994 20.5001C18.0295 20.5001 27.0004 27.9322 27.0004 40.1421V63.5001" stroke="url(#paint7_linear_450_12068)" stroke-width="2"/>
+</g>
+<line opacity="0.5" x1="-169.5" y1="66.5" x2="30.5" y2="66.5" stroke="url(#paint8_linear_450_12068)" stroke-linecap="round"/>
+<line x1="-180" y1="92.5" x2="41" y2="92.5" stroke="url(#paint9_linear_450_12068)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_12068" x="-188" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_12068"/>
+</filter>
+<filter id="filter1_i_450_12068" x="-184" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.705882 0 0 0 0 0.72549 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_12068"/>
+</filter>
+<filter id="filter2_f_450_12068" x="-37.3711" y="4.07837" width="83.2656" height="85.2932" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_12068"/>
+</filter>
+<filter id="filter3_f_450_12068" x="-10.3711" y="2.30078" width="54.8379" height="84.0701" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_12068"/>
+</filter>
+<filter id="filter4_f_450_12068" x="-184" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_12068"/>
+</filter>
+<filter id="filter5_f_450_12068" x="8" y="16" width="25" height="56.8396" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_12068"/>
+</filter>
+<filter id="filter6_f_450_12068" x="-182.152" y="65.9077" width="225.305" height="25.946" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_12068"/>
+</filter>
+<filter id="filter7_f_450_12068" x="-1.7" y="15.8" width="33.4" height="51.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_450_12068"/>
+</filter>
+<linearGradient id="paint0_linear_450_12068" x1="4" y1="6.11111" x2="47.5893" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_12068" x1="-69.5" y1="14" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_12068" x1="2.49999" y1="4.12222" x2="45.5449" y2="47.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_12068" x1="-162" y1="6.97622" x2="42.5351" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop offset="0.523036" stop-color="#CACDD0"/>
+<stop offset="1" stop-color="#7B848A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_12068" x1="31" y1="43.1561" x2="27.0377" y2="43.1561" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_12068" x1="-184" y1="80.0357" x2="-146.5" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7E868B"/>
+<stop offset="1" stop-color="#6C757A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_12068" x1="-69.5" y1="67.9077" x2="-69.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_12068" x1="12" y1="34.5" x2="25.4349" y2="27.7192" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9" stop-opacity="0"/>
+<stop offset="1" stop-color="#ADB4B9"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_12068" x1="-170" y1="67.5" x2="31" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_12068" x1="-180.5" y1="93.5" x2="41.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4E575C" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#4E575C"/>
+<stop offset="0.9" stop-color="#4E575C"/>
+<stop offset="1" stop-color="#4E575C" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_12068">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/왼쪽.svg
new file mode 100644
index 0000000..8100161
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/왼쪽.svg	
@@ -0,0 +1,134 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_12015)">
+<g filter="url(#filter0_i_450_12015)">
+<path d="M0 40C0 17.9086 17.9086 0 40 0H196C218.091 0 236 17.9086 236 40V86C236 90.9706 231.971 95 227 95H10C4.47715 95 0 90.5229 0 85V40Z" fill="#6C757A"/>
+</g>
+<path d="M40 1.5H196C217.263 1.5 234.5 18.737 234.5 40V86C234.5 90.1421 231.142 93.5 227 93.5H10C5.30558 93.5 1.5 89.6944 1.5 85V40C1.5 18.737 18.737 1.5 40 1.5Z" stroke="#4E575C" stroke-width="3"/>
+<g filter="url(#filter1_i_450_12015)">
+<path d="M5 42C5 21.5655 21.5655 5 42 5H194C214.435 5 231 21.5655 231 42V90C231 92.2091 229.209 94 227 94H9C6.79086 94 5 92.2091 5 90V42Z" fill="#6C757A"/>
+</g>
+<path d="M194 4.5C214.711 4.5 231.5 21.2893 231.5 42V90C231.5 92.4853 229.485 94.5 227 94.5H9C6.51472 94.5 4.5 92.4853 4.5 90V42C4.5 21.2893 21.2893 4.5 42 4.5H194Z" stroke="#4E575C" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_12015)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 87C6.62675 87.0986 6.66645 87.1931 6.73662 87.2628C6.80678 87.3325 6.90143 87.3717 7 87.3717C7.09857 87.3717 7.19322 87.3325 7.26338 87.2628C7.33355 87.1931 7.37325 87.0986 7.375 87C7.41667 84.637 7.45625 82.2739 7.49375 79.9109C7.67725 68.348 7.81086 56.7851 7.89459 45.2222L7.89125 45.2995C8.7529 35.8075 11.5117 26.1616 18.0778 19.2957C23.6589 13.3418 31.4478 9.86908 39.4341 7.89575L39.2174 7.9216C52.1152 7.84105 65.013 7.69843 77.9109 7.49375C80.2739 7.45625 82.637 7.41667 85 7.375C85.0986 7.37325 85.1931 7.33355 85.2628 7.26338C85.3326 7.19322 85.3717 7.09857 85.3717 7C85.3717 6.90143 85.3326 6.80678 85.2628 6.73662C85.1931 6.66645 85.0986 6.62675 85 6.625C82.637 6.58333 80.2739 6.54375 77.9109 6.50625C65.013 6.30157 52.1152 6.15895 39.2174 6.0784L39.0007 6.10425C30.7911 8.02431 22.5734 11.5808 16.6229 17.9233C9.61946 25.2535 6.84506 35.4506 6.10875 45.1449L6.10541 45.2222C6.18914 56.7851 6.32275 68.348 6.50625 79.9109C6.54375 82.2739 6.58333 84.637 6.625 87Z" fill="url(#paint0_linear_450_12015)"/>
+</g>
+<mask id="path-6-inside-1_450_12015" fill="white">
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z"/>
+</mask>
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z" fill="#434A4D"/>
+<path d="M15 39C15 25.1929 26.1929 14 40 14H197C210.807 14 222 25.1929 222 39H218C218 27.402 208.598 18 197 18H40C28.402 18 19 27.402 19 39H15ZM19 39M220 72H17H220M21 72C17.6863 72 15 69.3137 15 66V39C15 25.1929 26.1929 14 40 14V18C28.402 18 19 27.402 19 39V68C19 70.2091 19.8954 72 21 72ZM197 14C210.807 14 222 25.1929 222 39V66C222 69.3137 219.314 72 216 72C217.105 72 218 70.2091 218 68V39C218 27.402 208.598 18 197 18V14Z" fill="#2C3032" mask="url(#path-6-inside-1_450_12015)"/>
+<mask id="path-8-inside-2_450_12015" fill="white">
+<path d="M15 38C15 24.7452 25.7452 14 39 14H198C211.255 14 222 24.7452 222 38V68C222 70.2091 220.209 72 218 72H19C16.7909 72 15 70.2091 15 68V38Z"/>
+</mask>
+<path d="M14 38C14 24.1929 25.1929 13 39 13H198C211.807 13 223 24.1929 223 38H221C221 25.2975 210.703 15 198 15H39C26.2975 15 16 25.2975 16 38H14ZM16 38M222 72H15H222M19 72C16.2386 72 14 69.7614 14 67V38C14 24.1929 25.1929 13 39 13V15C26.2975 15 16 25.2975 16 38V68C16 70.2091 17.3431 72 19 72ZM198 13C211.807 13 223 24.1929 223 38V67C223 69.7614 220.761 72 218 72C219.657 72 221 70.2091 221 68V38C221 25.2975 210.703 15 198 15V13Z" fill="url(#paint1_linear_450_12015)" mask="url(#path-8-inside-2_450_12015)"/>
+<g filter="url(#filter3_f_450_12015)">
+<path d="M21.9375 65.5C21.9473 65.6443 22.0078 65.7826 22.1123 65.8846C22.2168 65.9866 22.3558 66.0439 22.5 66.0439C22.6442 66.0439 22.7832 65.9866 22.8877 65.8846C22.9922 65.7826 23.0527 65.6443 23.0625 65.5C23.0625 65.5 23.0625 65.5 23.0625 65.5C23.125 64.5706 23.1844 63.6412 23.2406 62.7118C23.6585 55.8079 23.9039 48.9039 23.9768 42L23.9708 42.1337C24.1156 40.7127 24.2988 39.3046 24.5499 37.9233C25.5527 29.813 31.3226 23.5852 39.4095 21.4043C39.6541 21.3263 39.9028 21.2496 40.1556 21.1744L40 21.1922C40.6667 21.1506 41.3333 21.1073 42 21.0625C42.1443 21.0527 42.2826 20.9922 42.3846 20.8877C42.4866 20.7832 42.5439 20.6442 42.5439 20.5C42.5439 20.3558 42.4866 20.2168 42.3846 20.1123C42.2826 20.0078 42.1443 19.9473 42 19.9375C41.3333 19.8927 40.6667 19.8494 40 19.8078L39.8444 19.8256C39.5753 19.8708 39.3097 19.9183 39.0475 19.9679C30.5538 20.9146 22.4625 28.5392 21.5983 37.3865C21.3268 38.8804 21.1494 40.3766 21.0292 41.8663L21.0232 42C21.0961 48.9039 21.3415 55.8079 21.7594 62.7118C21.8156 63.6412 21.875 64.5706 21.9375 65.5Z" fill="url(#paint2_linear_450_12015)"/>
+</g>
+<g filter="url(#filter4_f_450_12015)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 86C6.62719 86.0984 6.66695 86.1927 6.73707 86.2622C6.80719 86.3318 6.90166 86.3709 7 86.3709C7.09834 86.3709 7.19281 86.3318 7.26293 86.2622C7.33305 86.1927 7.37281 86.0984 7.375 86C7.375 86 7.375 86 7.375 86C7.41667 84.119 7.45625 82.2381 7.49375 80.3571C7.74533 67.7381 7.90315 55.1191 7.96719 42.5C7.98589 38.3142 8.8255 34.1433 10.4096 30.272C15.188 18.4179 26.7502 10.0736 39.3427 7.6879L39.2174 7.69922C43.0973 7.63959 46.9772 7.5711 50.8571 7.49375C52.7381 7.45625 54.619 7.41667 56.5 7.375C56.5984 7.37281 56.6927 7.33305 56.7622 7.26293C56.8318 7.19281 56.8709 7.09834 56.8709 7C56.8709 6.90166 56.8318 6.80719 56.7622 6.73707C56.6927 6.66695 56.5984 6.62719 56.5 6.625C54.619 6.58333 52.7381 6.54375 50.8571 6.50625C46.9772 6.4289 43.0973 6.36041 39.2174 6.30078L39.0921 6.3121C26.0455 8.35251 13.628 16.9223 8.55807 29.5158C6.87747 33.6213 6.00697 38.064 6.03281 42.5C6.09685 55.1191 6.25467 67.7381 6.50625 80.3571C6.54375 82.2381 6.58333 84.119 6.625 86Z" fill="url(#paint3_linear_450_12015)"/>
+</g>
+<g filter="url(#filter5_f_450_12015)">
+<path d="M43 5.5H193C213.711 5.5 230.5 22.2893 230.5 43V85.7949L219.564 68.6934C220.732 67.8814 221.5 66.5322 221.5 65V39C221.5 25.469 210.531 14.5 197 14.5H39C25.469 14.5 14.5 25.469 14.5 39V65C14.5 67.0752 15.9051 68.8207 17.8154 69.3408L5.5 87.835V43C5.5 22.2893 22.2893 5.5 43 5.5Z" stroke="url(#paint4_linear_450_12015)"/>
+</g>
+<path d="M5.71979 92.7413C4.95273 92.7413 4.47127 91.9133 4.8507 91.2466L18.4632 67.3301H218.537L232.149 91.2466C232.529 91.9133 232.047 92.7413 231.28 92.7413H5.71979Z" fill="url(#paint5_linear_450_12015)" stroke="#4E575C" stroke-width="1.2"/>
+<path d="M7.22949 92.3821L5.24609 91.7209L14.833 75.5227L7.22949 92.3821Z" fill="#4E575C" stroke="#4E575C"/>
+<path d="M230.998 90.2433L8.11303 90L4.5 93C5.5 94 7 95 9 95H228C230.112 94.5403 230.5 94.5 232 93.5L230.998 90.2433Z" fill="#4E575C"/>
+<g opacity="0.5" filter="url(#filter6_f_450_12015)" style="mix-blend-mode:plus-lighter">
+<path d="M20 67.9077H217L228.5 89.8538H8.5L20 67.9077Z" stroke="url(#paint6_linear_450_12015)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line opacity="0.5" x1="18.5" y1="66.5" x2="218.5" y2="66.5" stroke="url(#paint7_linear_450_12015)" stroke-linecap="round"/>
+<line x1="8" y1="92.5" x2="229" y2="92.5" stroke="url(#paint8_linear_450_12015)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_12015" x="0" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_12015"/>
+</filter>
+<filter id="filter1_i_450_12015" x="4" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.705882 0 0 0 0 0.72549 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_12015"/>
+</filter>
+<filter id="filter2_f_450_12015" x="4.10547" y="4.07837" width="83.2656" height="85.2932" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_12015"/>
+</filter>
+<filter id="filter3_f_450_12015" x="19.0234" y="17.8079" width="25.5195" height="50.2361" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_12015"/>
+</filter>
+<filter id="filter4_f_450_12015" x="4.0332" y="4.30078" width="54.8379" height="84.0701" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_12015"/>
+</filter>
+<filter id="filter5_f_450_12015" x="4" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_12015"/>
+</filter>
+<filter id="filter6_f_450_12015" x="5.84766" y="65.9077" width="225.305" height="25.946" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_12015"/>
+</filter>
+<linearGradient id="paint0_linear_450_12015" x1="46" y1="6.11111" x2="2.41074" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A3C1D3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#A3C1D3"/>
+<stop offset="1" stop-color="#A3C1D3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_12015" x1="118.5" y1="14" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_12015" x1="45.5" y1="20" x2="21" y2="45.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_12015" x1="46" y1="6.12222" x2="2.95507" y2="49.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B2D0E3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B2D0E3"/>
+<stop offset="1" stop-color="#B2D0E3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_12015" x1="26" y1="6.97622" x2="76.5631" y2="28.6593" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CACDD0"/>
+<stop offset="1" stop-color="#7B848A"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_12015" x1="4" y1="80.0357" x2="41.5" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7E868B"/>
+<stop offset="1" stop-color="#6C757A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_12015" x1="118.5" y1="67.9077" x2="118.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_12015" x1="18" y1="67.5" x2="219" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_12015" x1="7.5" y1="93.5" x2="229.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4E575C" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#4E575C"/>
+<stop offset="0.9" stop-color="#4E575C"/>
+<stop offset="1" stop-color="#4E575C" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_12015">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/중앙.svg
new file mode 100644
index 0000000..08ccabf
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/실사화/중앙.svg	
@@ -0,0 +1,102 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_12039)">
+<g clip-path="url(#clip1_450_12039)">
+<g filter="url(#filter0_i_450_12039)">
+<path d="M-748.92 40C-748.92 17.9086 -731.011 0 -708.92 0H798.92C821.011 0 838.92 17.9086 838.92 40V86C838.92 90.9706 834.891 95 829.92 95H-738.92C-744.443 95 -748.92 90.5229 -748.92 85V40Z" fill="#6C757A"/>
+</g>
+<path d="M-708.92 1.5H798.92C820.183 1.5 837.42 18.737 837.42 40V86C837.42 90.1421 834.062 93.5 829.92 93.5H-738.92C-743.614 93.5 -747.42 89.6944 -747.42 85V40C-747.42 18.737 -730.183 1.5 -708.92 1.5Z" stroke="#4E575C" stroke-width="3"/>
+<g filter="url(#filter1_i_450_12039)">
+<path d="M-715.279 42C-715.279 21.5655 -698.714 5 -678.279 5H768.279C788.714 5 805.279 21.5655 805.279 42V90C805.279 92.2091 803.488 94 801.279 94H-711.279C-713.488 94 -715.279 92.2091 -715.279 90V42Z" fill="#6C757A"/>
+</g>
+<path d="M768.279 4.5L769.247 4.5127C789.51 5.02608 805.779 21.6129 805.779 42V90C805.779 92.4852 803.764 94.4999 801.279 94.5H-711.279C-713.765 94.5 -715.779 92.4853 -715.779 90V42C-715.779 21.2893 -698.99 4.5 -678.279 4.5H768.279Z" stroke="#4E575C" style="mix-blend-mode:multiply"/>
+<mask id="path-5-inside-1_450_12039" fill="white">
+<path d="M-634.541 39C-634.541 26.2975 -624.244 16 -611.541 16H708.27C720.973 16 731.27 26.2975 731.27 39V68C731.27 70.2091 729.479 72 727.27 72H-630.541C-632.75 72 -634.541 70.2091 -634.541 68V39Z"/>
+</mask>
+<path d="M-634.541 39C-634.541 26.2975 -624.244 16 -611.541 16H708.27C720.973 16 731.27 26.2975 731.27 39V68C731.27 70.2091 729.479 72 727.27 72H-630.541C-632.75 72 -634.541 70.2091 -634.541 68V39Z" fill="#434A4D"/>
+<path d="M-636.541 39C-636.541 25.1929 -625.348 14 -611.541 14H708.27C722.078 14 733.27 25.1929 733.27 39H729.27C729.27 27.402 719.868 18 708.27 18H-611.541C-623.139 18 -632.541 27.402 -632.541 39H-636.541ZM-632.541 39M731.27 72H-634.541H731.27M-630.541 72C-633.855 72 -636.541 69.3137 -636.541 66V39C-636.541 25.1929 -625.348 14 -611.541 14V18C-623.139 18 -632.541 27.402 -632.541 39V68C-632.541 70.2091 -631.646 72 -630.541 72ZM708.27 14C722.078 14 733.27 25.1929 733.27 39V66C733.27 69.3137 730.584 72 727.27 72C728.375 72 729.27 70.2091 729.27 68V39C729.27 27.402 719.868 18 708.27 18V14Z" fill="#2C3032" mask="url(#path-5-inside-1_450_12039)"/>
+<mask id="path-7-inside-2_450_12039" fill="white">
+<path d="M-647.998 38C-647.998 24.7452 -637.253 14 -623.998 14H720.726C733.981 14 744.726 24.7452 744.726 38V68C744.726 70.2091 742.935 72 740.726 72H-643.998C-646.207 72 -647.998 70.2091 -647.998 68V38Z"/>
+</mask>
+<path d="M-648.998 38C-648.998 24.1929 -637.805 13 -623.998 13H720.726C734.533 13 745.726 24.1929 745.726 38H743.726C743.726 25.2975 733.428 15 720.726 15H-623.998C-636.701 15 -646.998 25.2975 -646.998 38H-648.998ZM-646.998 38M744.726 72H-647.998H744.726M-643.998 72C-646.759 72 -648.998 69.7614 -648.998 67V38C-648.998 24.1929 -637.805 13 -623.998 13V15C-636.701 15 -646.998 25.2975 -646.998 38V68C-646.998 70.2091 -645.655 72 -643.998 72ZM720.726 13C734.533 13 745.726 24.1929 745.726 38V67C745.726 69.7614 743.487 72 740.726 72C742.383 72 743.726 70.2091 743.726 68V38C743.726 25.2975 733.428 15 720.726 15V13Z" fill="url(#paint0_linear_450_12039)" mask="url(#path-7-inside-2_450_12039)"/>
+<g filter="url(#filter2_f_450_12039)">
+<mask id="path-9-inside-3_450_12039" fill="white">
+<path d="M767.279 5C788.266 5.00002 805.279 22.0132 805.279 43V87.9209L723.879 69H733.998C736.207 69 737.998 67.2091 737.998 65V39C737.998 25.7452 727.253 15 713.998 15H-623.998C-637.253 15.0001 -647.998 25.7452 -647.998 39V65C-647.998 67.2091 -646.207 68.9999 -643.998 69H-492.091L-622.026 69.0791H-622.082L-622.136 69.0908L-714.844 89.7822C-715.122 89.2374 -715.279 88.6204 -715.279 87.9668V43C-715.279 22.0132 -698.266 5.00003 -677.279 5H767.279Z"/>
+</mask>
+<path d="M767.279 5V4V4V5ZM805.279 87.9209L805.053 88.8949L806.279 89.18V87.9209H805.279ZM723.879 69V68L723.652 69.974L723.879 69ZM733.998 69V70V70V69ZM737.998 65H738.998V65H737.998ZM737.998 39H738.998H737.998ZM713.998 15V14V14V15ZM-623.998 15V14H-623.998L-623.998 15ZM-647.998 65H-648.998H-647.998ZM-643.998 69L-643.998 70H-643.998V69ZM-492.091 69L-492.09 70L-492.091 68V69ZM-622.026 69.0791V70.0791H-622.026L-622.026 69.0791ZM-622.082 69.0791V68.0791H-622.19L-622.295 68.1021L-622.082 69.0791ZM-622.136 69.0908L-622.349 68.1138L-622.354 68.1148L-622.136 69.0908ZM-714.844 89.7822L-715.735 90.2367L-715.382 90.927L-714.626 90.7582L-714.844 89.7822ZM-677.279 5V4V4V5ZM767.279 5V6C787.714 6.00002 804.279 22.5655 804.279 43H805.279H806.279C806.279 21.4609 788.818 4.00002 767.279 4V5ZM805.279 43H804.279V87.9209H805.279H806.279V43H805.279ZM805.279 87.9209L805.506 86.9469L724.105 68.026L723.879 69L723.652 69.974L805.053 88.8949L805.279 87.9209ZM723.879 69V70H733.998V69V68H723.879V69ZM733.998 69V70C736.759 69.9999 738.998 67.7614 738.998 65H737.998H736.998C736.998 66.6568 735.655 68 733.998 68V69ZM737.998 65H738.998V39H737.998H736.998V65H737.998ZM737.998 39H738.998C738.998 25.1929 727.805 14 713.998 14V15V16C726.701 16 736.998 26.2975 736.998 39H737.998ZM713.998 15V14H-623.998V15V16H713.998V15ZM-623.998 15L-623.998 14C-637.805 14.0001 -648.998 25.1929 -648.998 39H-647.998H-646.998C-646.998 26.2975 -636.701 16.0001 -623.998 16L-623.998 15ZM-647.998 39H-648.998V65H-647.998H-646.998V39H-647.998ZM-647.998 65H-648.998C-648.998 67.7614 -646.759 69.9999 -643.998 70L-643.998 69L-643.998 68C-645.655 67.9999 -646.998 66.6568 -646.998 65H-647.998ZM-643.998 69V70H-492.091V69V68H-643.998V69ZM-492.091 69L-492.091 68L-622.027 68.0791L-622.026 69.0791L-622.026 70.0791L-492.09 70L-492.091 69ZM-622.026 69.0791V68.0791H-622.082V69.0791V70.0791H-622.026V69.0791ZM-622.082 69.0791L-622.295 68.1021L-622.349 68.1138L-622.136 69.0908L-621.923 70.0678L-621.869 70.0561L-622.082 69.0791ZM-622.136 69.0908L-622.354 68.1148L-715.062 88.8062L-714.844 89.7822L-714.626 90.7582L-621.918 70.0668L-622.136 69.0908ZM-714.844 89.7822L-713.953 89.3278C-714.161 88.9196 -714.279 88.4579 -714.279 87.9668H-715.279H-716.279C-716.279 88.7828 -716.082 89.5552 -715.735 90.2367L-714.844 89.7822ZM-715.279 87.9668H-714.279V43H-715.279H-716.279V87.9668H-715.279ZM-715.279 43H-714.279C-714.279 22.5655 -697.714 6.00003 -677.279 6V5V4C-698.818 4.00003 -716.279 21.4609 -716.279 43H-715.279ZM-677.279 5V6H767.279V5V4H-677.279V5Z" fill="url(#paint1_linear_450_12039)" mask="url(#path-9-inside-3_450_12039)"/>
+</g>
+<path d="M-714.221 92.7413C-715.394 92.7413 -715.608 91.0701 -714.473 90.7737L-624.698 67.3301H721.425L811.201 90.7737C812.336 91.0701 812.121 92.7413 810.948 92.7413H-714.221Z" fill="url(#paint2_linear_450_12039)" stroke="#4E575C" stroke-width="1.2"/>
+<path d="M805.268 90.2433L-694.334 90L-718.643 93C-711.914 94 -701.822 95 -688.366 95H785.096L787.562 94.9205C799.648 94.5319 802.529 94.4392 812.008 93.5L805.268 90.2433Z" fill="#4E575C"/>
+<g opacity="0.5" filter="url(#filter3_f_450_12039)" style="mix-blend-mode:plus-lighter">
+<path d="M-614.357 67.9077H711.086L788.459 89.8538H-691.73L-614.357 67.9077Z" stroke="url(#paint3_linear_450_12039)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line opacity="0.5" x1="-627.312" y1="66.5" x2="724.043" y2="66.5" stroke="url(#paint4_linear_450_12039)" stroke-linecap="round"/>
+<line x1="-697.959" y1="92.5" x2="794.687" y2="92.5" stroke="url(#paint5_linear_450_12039)" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_12039" x="-748.92" y="0" width="1589.84" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_12039"/>
+</filter>
+<filter id="filter1_i_450_12039" x="-716.279" y="4" width="1524.56" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.678431 0 0 0 0 0.705882 0 0 0 0 0.72549 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_12039"/>
+</filter>
+<filter id="filter2_f_450_12039" x="-716.279" y="4" width="1522.56" height="86.7822" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_12039"/>
+</filter>
+<filter id="filter3_f_450_12039" x="-693.004" y="65.9077" width="1482.74" height="25.946" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_12039"/>
+</filter>
+<linearGradient id="paint0_linear_450_12039" x1="48.3639" y1="14" x2="48.3639" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_12039" x1="-573.988" y1="6.98992" x2="-308.777" y2="584.377" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CACDD0"/>
+<stop offset="1" stop-color="#7B848A"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_12039" x1="-722.008" y1="80.0357" x2="-469.703" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7E868B"/>
+<stop offset="1" stop-color="#6C757A"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_12039" x1="48.3644" y1="67.9077" x2="48.3644" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ADB4B9"/>
+<stop offset="1" stop-color="#ADB4B9"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_12039" x1="-627.813" y1="67.5" x2="724.543" y2="67.5008" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_12039" x1="-698.459" y1="93.5" x2="795.187" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4E575C" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#4E575C"/>
+<stop offset="0.9" stop-color="#4E575C"/>
+<stop offset="1" stop-color="#4E575C" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_12039">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_12039">
+<rect width="816" height="95" fill="white" transform="translate(-366)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/오른쪽.svg
new file mode 100644
index 0000000..88b813b
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/오른쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5757)">
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#555555"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#555555" stroke-width="11"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#AAAAAA"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#555555" stroke-width="4"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#777777"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_5757" fill="white">
+<path d="M-152.746 45.5801C-152.746 23.4887 -134.837 5.58008 -112.746 5.58008H-1.74609C19.793 5.58008 37.2539 23.041 37.2539 44.5801V88H-152.746V45.5801Z"/>
+</mask>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_5757)"/>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-4-inside-1_450_5757)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_5757">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/왼쪽.svg
new file mode 100644
index 0000000..22b39ab
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/왼쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5740)">
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#555555"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#555555" stroke-width="11"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#AAAAAA"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#555555" stroke-width="4"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#777777"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_5740" fill="white">
+<path d="M5.25391 45.5801C5.25391 23.4887 23.1625 5.58008 45.2539 5.58008H156.254C177.793 5.58008 195.254 23.041 195.254 44.5801V88H5.25391V45.5801Z"/>
+</mask>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_5740)"/>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-4-inside-1_450_5740)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_5740">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/중앙.svg
new file mode 100644
index 0000000..1b7cfc6
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/고속도로, 국도/터널/위치도/중앙.svg	
@@ -0,0 +1,31 @@
+<svg width="124" height="93" viewBox="0 0 124 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_5746)">
+<mask id="mask0_450_5746" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="329" height="93">
+<rect width="329" height="93" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_5746)">
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#555555"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#555555" stroke-width="11"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#AAAAAA"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#555555" stroke-width="4"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#777777"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#0D6199" fill-opacity="0.1"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#555555" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#0D6199" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-5-inside-1_450_5746" fill="white">
+<path d="M-2336.8 45.5801C-2336.8 23.4887 -2318.89 5.58008 -2296.8 5.58008H1301.26C1322.8 5.58008 1340.26 23.041 1340.26 44.5801V88H-2336.8V45.5801Z"/>
+</mask>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#555555" mask="url(#path-5-inside-1_450_5746)"/>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#0D6199" fill-opacity="0.1" mask="url(#path-5-inside-1_450_5746)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_450_5746">
+<rect width="124" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/오른쪽.svg
new file mode 100644
index 0000000..ea61f20
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/오른쪽.svg	
@@ -0,0 +1,184 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_10150)">
+<g filter="url(#filter0_i_450_10150)">
+<path d="M-134.404 30.1618C-134.404 23.0917 -128.673 17.3604 -121.603 17.3604H2.36871C9.43875 17.3604 15.1702 23.0917 15.1702 30.1618V65.871H-134.404V30.1618Z" fill="url(#paint0_linear_450_10150)"/>
+<path d="M-134.404 30.1618C-134.404 23.0917 -128.673 17.3604 -121.603 17.3604H2.36871C9.43875 17.3604 15.1702 23.0917 15.1702 30.1618V65.871H-134.404V30.1618Z" fill="url(#paint1_linear_450_10150)"/>
+</g>
+<path d="M-121.603 17.8936H2.36914C9.1444 17.8938 14.6367 23.3868 14.6367 30.1621V65.3379H-133.871V30.1621C-133.871 23.3867 -128.378 17.8936 -121.603 17.8936Z" stroke="#1B1B1B" stroke-width="1.06678"/>
+<path d="M34.2832 66.4336C40.1749 66.4336 44.9511 71.2099 44.9512 77.1016V94.1504H-164.263V77.1016C-164.263 71.2099 -159.486 66.4336 -153.595 66.4336H34.2832Z" fill="#5C5C5C" stroke="#555555" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_10150)">
+<path d="M-162.129 77.1017C-162.129 72.3883 -158.308 68.5674 -153.595 68.5674H34.2833C38.9966 68.5674 42.8176 72.3883 42.8176 77.1017V90.9496C42.8176 91.5387 42.34 92.0163 41.7508 92.0163H-161.062C-161.651 92.0163 -162.129 91.5387 -162.129 90.9496V77.1017Z" fill="#777777"/>
+</g>
+<path d="M34.2832 68.0342C39.2911 68.0342 43.3505 72.0937 43.3506 77.1016V90.9492C43.3506 91.8329 42.6346 92.5497 41.751 92.5498H-161.062C-161.946 92.5496 -162.662 91.8328 -162.662 90.9492V77.1016C-162.662 72.0937 -158.603 68.0342 -153.595 68.0342H34.2832Z" stroke="#3A3A3A" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_10150)" style="mix-blend-mode:plus-lighter">
+<path d="M34.9912 70.0542C38.8207 70.0542 41.9246 73.1584 41.9248 76.9878V92.4565H-160.764V76.9878C-160.763 73.1584 -157.659 70.0544 -153.83 70.0542H34.9912Z" stroke="url(#paint2_linear_450_10150)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_10150" maskUnits="userSpaceOnUse" x="-169.498" y="-0.459961" width="219" height="69" fill="black">
+<rect fill="white" x="-169.498" y="-0.459961" width="219" height="69"/>
+<path d="M45.1846 12.0514C45.1846 12.6405 44.7058 13.1148 44.1176 13.1497C34.8169 13.7014 27.4445 21.4182 27.4443 30.8574V62.5865C27.4443 63.1757 26.9667 63.6533 26.3775 63.6533H20.0766C19.4874 63.6533 19.0098 63.1757 19.0098 62.5865V30.8574C19.0096 21.0608 11.0683 13.1195 1.27199 13.1182C1.27065 13.1182 1.26953 13.1171 1.26953 13.1157C1.26953 13.1144 1.26843 13.1133 1.26709 13.1133H-120.557C-120.558 13.1133 -120.56 13.1144 -120.56 13.1157C-120.56 13.1171 -120.561 13.1182 -120.562 13.1182C-130.358 13.1195 -138.3 21.0608 -138.3 30.8574V62.5865C-138.3 63.1757 -138.777 63.6533 -139.367 63.6533H-145.668C-146.257 63.6533 -146.734 63.1757 -146.734 62.5865V30.8574C-146.735 21.4182 -154.107 13.7014 -163.408 13.1497C-163.996 13.1148 -164.475 12.6405 -164.475 12.0514V8.04139C-164.475 7.45223 -163.997 6.97461 -163.408 6.97461H44.1178C44.707 6.97461 45.1846 7.45223 45.1846 8.04139V12.0514ZM45.1875 5.2915C45.1875 5.70653 44.8511 6.04297 44.436 6.04297H-163.747C-164.162 6.04297 -164.498 5.70653 -164.498 5.2915C-164.498 4.87648 -164.162 4.54004 -163.747 4.54004H44.436C44.8511 4.54004 45.1875 4.87648 45.1875 5.2915Z"/>
+</mask>
+<path d="M45.1846 12.0514C45.1846 12.6405 44.7058 13.1148 44.1176 13.1497C34.8169 13.7014 27.4445 21.4182 27.4443 30.8574V62.5865C27.4443 63.1757 26.9667 63.6533 26.3775 63.6533H20.0766C19.4874 63.6533 19.0098 63.1757 19.0098 62.5865V30.8574C19.0096 21.0608 11.0683 13.1195 1.27199 13.1182C1.27065 13.1182 1.26953 13.1171 1.26953 13.1157C1.26953 13.1144 1.26843 13.1133 1.26709 13.1133H-120.557C-120.558 13.1133 -120.56 13.1144 -120.56 13.1157C-120.56 13.1171 -120.561 13.1182 -120.562 13.1182C-130.358 13.1195 -138.3 21.0608 -138.3 30.8574V62.5865C-138.3 63.1757 -138.777 63.6533 -139.367 63.6533H-145.668C-146.257 63.6533 -146.734 63.1757 -146.734 62.5865V30.8574C-146.735 21.4182 -154.107 13.7014 -163.408 13.1497C-163.996 13.1148 -164.475 12.6405 -164.475 12.0514V8.04139C-164.475 7.45223 -163.997 6.97461 -163.408 6.97461H44.1178C44.707 6.97461 45.1846 7.45223 45.1846 8.04139V12.0514ZM45.1875 5.2915C45.1875 5.70653 44.8511 6.04297 44.436 6.04297H-163.747C-164.162 6.04297 -164.498 5.70653 -164.498 5.2915C-164.498 4.87648 -164.162 4.54004 -163.747 4.54004H44.436C44.8511 4.54004 45.1875 4.87648 45.1875 5.2915Z" fill="url(#paint3_linear_450_10150)"/>
+<path d="M27.4443 30.8574L23.1772 30.8574V30.8574H27.4443ZM19.0098 30.8574H23.2769V30.8574L19.0098 30.8574ZM-138.3 30.8574L-142.567 30.8574V30.8574H-138.3ZM-146.734 30.8574H-142.467V30.8574L-146.734 30.8574ZM-120.562 13.1182L-120.561 17.3853L-120.562 13.1182ZM-163.408 13.1497L-163.155 8.89007L-163.408 13.1497ZM1.27199 13.1182L1.27257 8.85102L1.27199 13.1182ZM44.1176 13.1497L43.865 8.89006C32.3234 9.57466 23.1774 19.146 23.1772 30.8574L27.4443 30.8574L31.7115 30.8575C31.7116 23.6905 37.3105 17.8281 44.3703 17.4094L44.1176 13.1497ZM27.4443 30.8574H23.1772V62.5865H27.4443H31.7115V30.8574H27.4443ZM26.3775 63.6533V59.3862H20.0766V63.6533V67.9205H26.3775V63.6533ZM19.0098 62.5865H23.2769V30.8574H19.0098H14.7426V62.5865H19.0098ZM19.0098 30.8574L23.2769 30.8574C23.2767 18.7041 13.425 8.85267 1.27257 8.85102L1.27199 13.1182L1.27141 17.3853C8.71155 17.3863 14.7425 23.4176 14.7426 30.8575L19.0098 30.8574ZM1.26709 13.1133V8.84614H-120.557V13.1133V17.3804H1.26709V13.1133ZM-120.562 13.1182L-120.563 8.85102C-132.715 8.85267 -142.567 18.7041 -142.567 30.8574L-138.3 30.8574L-134.033 30.8575C-134.033 23.4176 -128.002 17.3863 -120.561 17.3853L-120.562 13.1182ZM-138.3 30.8574H-142.567V62.5865H-138.3H-134.033V30.8574H-138.3ZM-139.367 63.6533V59.3862H-145.668V63.6533V67.9205H-139.367V63.6533ZM-146.734 62.5865H-142.467V30.8574H-146.734H-151.002V62.5865H-146.734ZM-146.734 30.8574L-142.467 30.8574C-142.467 19.146 -151.613 9.57466 -163.155 8.89007L-163.408 13.1497L-163.66 17.4094C-156.601 17.8281 -151.002 23.6905 -151.002 30.8575L-146.734 30.8574ZM-164.475 12.0514H-160.207V8.04139H-164.475H-168.742V12.0514H-164.475ZM-163.408 6.97461V11.2417H44.1178V6.97461V2.70747H-163.408V6.97461ZM45.1846 8.04139H40.9174V12.0514H45.1846H49.4517V8.04139H45.1846ZM44.436 6.04297V1.77583H-163.747V6.04297V10.3101H44.436V6.04297ZM-163.747 4.54004V8.80718H44.436V4.54004V0.2729H-163.747V4.54004ZM44.436 4.54004V8.80718C42.4944 8.80718 40.9204 7.23319 40.9204 5.2915H45.1875H49.4546C49.4546 2.51978 47.2077 0.2729 44.436 0.2729V4.54004ZM-164.498 5.2915H-160.231C-160.231 7.23316 -161.805 8.80718 -163.747 8.80718V4.54004V0.2729C-166.518 0.2729 -168.765 2.51981 -168.765 5.2915H-164.498ZM-163.747 6.04297V1.77583C-161.805 1.77583 -160.231 3.34982 -160.231 5.2915H-164.498H-168.765C-168.765 8.06323 -166.518 10.3101 -163.747 10.3101V6.04297ZM44.436 6.04297V10.3101C47.2077 10.3101 49.4546 8.0632 49.4546 5.2915H45.1875H40.9204C40.9204 3.34985 42.4944 1.77583 44.436 1.77583V6.04297ZM44.1178 6.97461V11.2417C42.3503 11.2417 40.9174 9.80893 40.9174 8.04139H45.1846H49.4517C49.4517 5.09552 47.0636 2.70747 44.1178 2.70747V6.97461ZM-138.3 62.5865H-142.567C-142.567 60.819 -141.134 59.3862 -139.367 59.3862V63.6533V67.9205C-136.421 67.9205 -134.033 65.5324 -134.033 62.5865H-138.3ZM-120.56 13.1157H-124.827C-124.827 10.7281 -122.885 8.85134 -120.563 8.85102L-120.562 13.1182L-120.561 17.3853C-118.236 17.385 -116.292 15.506 -116.292 13.1157H-120.56ZM-120.557 13.1133V8.84614C-122.919 8.84614 -124.827 10.7611 -124.827 13.1157H-120.56H-116.292C-116.292 15.4676 -118.198 17.3804 -120.557 17.3804V13.1133ZM1.26953 13.1157H5.53667C5.53667 10.7577 3.62511 8.84614 1.26709 8.84614V13.1133V17.3804C-1.08824 17.3804 -2.9976 15.4711 -2.9976 13.1157H1.26953ZM-164.475 8.04139H-160.207C-160.207 9.8089 -161.64 11.2417 -163.408 11.2417V6.97461V2.70747C-166.354 2.70747 -168.742 5.09555 -168.742 8.04139H-164.475ZM20.0766 63.6533V59.3862C21.8441 59.3862 23.2769 60.819 23.2769 62.5865H19.0098H14.7426C14.7426 65.5324 17.1307 67.9205 20.0766 67.9205V63.6533ZM-163.408 13.1497L-163.155 8.89007C-161.654 8.97908 -160.207 10.2197 -160.207 12.0514H-164.475H-168.742C-168.742 15.0614 -166.337 17.2506 -163.66 17.4094L-163.408 13.1497ZM27.4443 62.5865H23.1772C23.1772 60.819 24.61 59.3862 26.3775 59.3862V63.6533V67.9205C29.3234 67.9205 31.7115 65.5324 31.7115 62.5865H27.4443ZM1.27199 13.1182L1.27257 8.85102C3.5938 8.85134 5.53667 10.7269 5.53667 13.1157H1.26953H-2.9976C-2.9976 15.5072 -1.05252 17.385 1.27141 17.3853L1.27199 13.1182ZM-145.668 63.6533V59.3862C-143.9 59.3862 -142.467 60.819 -142.467 62.5865H-146.734H-151.002C-151.002 65.5324 -148.613 67.9205 -145.668 67.9205V63.6533ZM44.1176 13.1497L44.3703 17.4094C47.0473 17.2506 49.4517 15.0614 49.4517 12.0514H45.1846H40.9174C40.9174 10.2197 42.3642 8.97908 43.865 8.89006L44.1176 13.1497Z" fill="#555555" mask="url(#path-7-outside-1_450_10150)"/>
+<mask id="path-9-outside-2_450_10150" maskUnits="userSpaceOnUse" x="-166.498" y="2.54004" width="213" height="63" fill="black">
+<rect fill="white" x="-166.498" y="2.54004" width="213" height="63"/>
+<path d="M45.1846 13.1182C35.3871 13.1182 27.4445 21.06 27.4443 30.8574V63.6533H19.0098V30.8574C19.0096 21.06 11.067 13.1182 1.26953 13.1182V13.1133H-120.56V13.1182C-130.357 13.1182 -138.3 21.06 -138.3 30.8574V63.6533H-146.734V30.8574C-146.735 21.06 -154.677 13.1182 -164.475 13.1182V6.97461H45.1846V13.1182ZM45.1875 6.04297H-164.498V4.54004H45.1875V6.04297Z"/>
+</mask>
+<path d="M45.1846 13.1182V14.1849C45.7737 14.1849 46.2514 13.7073 46.2514 13.1182H45.1846ZM27.4443 30.8574L26.3775 30.8574V30.8574H27.4443ZM27.4443 63.6533V64.7201C28.0335 64.7201 28.5111 64.2425 28.5111 63.6533H27.4443ZM19.0098 63.6533H17.943C17.943 64.2425 18.4206 64.7201 19.0098 64.7201V63.6533ZM19.0098 30.8574H20.0766V30.8574L19.0098 30.8574ZM1.26953 13.1182H0.202744C0.202744 13.7073 0.680359 14.1849 1.26953 14.1849V13.1182ZM1.26953 13.1133H2.33632C2.33632 12.5241 1.8587 12.0465 1.26953 12.0465V13.1133ZM-120.56 13.1133V12.0465C-121.149 12.0465 -121.626 12.5241 -121.626 13.1133H-120.56ZM-120.56 13.1182V14.1849C-119.97 14.1849 -119.493 13.7073 -119.493 13.1182H-120.56ZM-138.3 30.8574L-139.367 30.8574V30.8574H-138.3ZM-138.3 63.6533V64.7201C-137.711 64.7201 -137.233 64.2425 -137.233 63.6533H-138.3ZM-146.734 63.6533H-147.801C-147.801 64.2425 -147.324 64.7201 -146.734 64.7201V63.6533ZM-146.734 30.8574H-145.668L-145.668 30.8574L-146.734 30.8574ZM-164.475 13.1182H-165.541C-165.541 13.7073 -165.064 14.1849 -164.475 14.1849V13.1182ZM-164.475 6.97461V5.90782C-165.064 5.90782 -165.541 6.38544 -165.541 6.97461H-164.475ZM45.1846 6.97461H46.2514C46.2514 6.38544 45.7737 5.90782 45.1846 5.90782V6.97461ZM45.1875 6.04297V7.10975C45.7767 7.10975 46.2543 6.63214 46.2543 6.04297H45.1875ZM-164.498 6.04297H-165.565C-165.565 6.63214 -165.087 7.10975 -164.498 7.10975V6.04297ZM-164.498 4.54004V3.47325C-165.087 3.47325 -165.565 3.95087 -165.565 4.54004H-164.498ZM45.1875 4.54004H46.2543C46.2543 3.95087 45.7767 3.47325 45.1875 3.47325V4.54004ZM45.1846 13.1182V12.0514C34.798 12.0514 26.3777 20.4708 26.3775 30.8574L27.4443 30.8574L28.5111 30.8574C28.5113 21.6493 35.9762 14.1849 45.1846 14.1849V13.1182ZM27.4443 30.8574H26.3775V63.6533H27.4443H28.5111V30.8574H27.4443ZM27.4443 63.6533V62.5865H19.0098V63.6533V64.7201H27.4443V63.6533ZM19.0098 63.6533H20.0766V30.8574H19.0098H17.943V63.6533H19.0098ZM19.0098 30.8574L20.0766 30.8574C20.0764 20.4708 11.6561 12.0514 1.26953 12.0514V13.1182V14.1849C10.4779 14.1849 17.9428 21.6493 17.943 30.8574L19.0098 30.8574ZM1.26953 13.1182H2.33632V13.1133H1.26953H0.202744V13.1182H1.26953ZM1.26953 13.1133V12.0465H-120.56V13.1133V14.1801H1.26953V13.1133ZM-120.56 13.1133H-121.626V13.1182H-120.56H-119.493V13.1133H-120.56ZM-120.56 13.1182V12.0514C-130.946 12.0514 -139.366 20.4708 -139.367 30.8574L-138.3 30.8574L-137.233 30.8574C-137.233 21.6493 -129.768 14.1849 -120.56 14.1849V13.1182ZM-138.3 30.8574H-139.367V63.6533H-138.3H-137.233V30.8574H-138.3ZM-138.3 63.6533V62.5865H-146.734V63.6533V64.7201H-138.3V63.6533ZM-146.734 63.6533H-145.668V30.8574H-146.734H-147.801V63.6533H-146.734ZM-146.734 30.8574L-145.668 30.8574C-145.668 20.4708 -154.088 12.0514 -164.475 12.0514V13.1182V14.1849C-155.266 14.1849 -147.801 21.6493 -147.801 30.8574L-146.734 30.8574ZM-164.475 13.1182H-163.408V6.97461H-164.475H-165.541V13.1182H-164.475ZM-164.475 6.97461V8.04139H45.1846V6.97461V5.90782H-164.475V6.97461ZM45.1846 6.97461H44.1178V13.1182H45.1846H46.2514V6.97461H45.1846ZM45.1875 6.04297V4.97618H-164.498V6.04297V7.10975H45.1875V6.04297ZM-164.498 6.04297H-163.431V4.54004H-164.498H-165.565V6.04297H-164.498ZM-164.498 4.54004V5.60682H45.1875V4.54004V3.47325H-164.498V4.54004ZM45.1875 4.54004H44.1207V6.04297H45.1875H46.2543V4.54004H45.1875Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_10150)"/>
+<g filter="url(#filter3_f_450_10150)" style="mix-blend-mode:plus-lighter">
+<path d="M33.9238 65.7871C40.1101 65.7871 45.125 70.802 45.125 76.9883V94.5898H-165.031V76.9883C-165.031 70.802 -160.016 65.7871 -153.83 65.7871H33.9238Z" stroke="url(#paint4_linear_450_10150)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_10150)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_10150" maskUnits="userSpaceOnUse" x="-166.498" y="3.51367" width="212" height="61" fill="black">
+<rect fill="white" x="-166.498" y="3.51367" width="212" height="61"/>
+<path d="M43.5273 5.51367V11.6631C33.8064 11.6632 25.926 19.5437 25.9258 29.2646V63.1191H17.5566V29.2646C17.5565 19.9364 10.3001 12.3048 1.12402 11.7031H-122.095C-131.271 12.3049 -138.527 19.9365 -138.527 29.2646V63.1191H-146.896V29.2646C-146.897 19.5436 -154.777 11.6631 -164.498 11.6631V5.51367H43.5273Z"/>
+</mask>
+<path d="M43.5273 5.51367H44.5941V4.44689H43.5273V5.51367ZM43.5273 11.6631L43.5274 12.7299L44.5941 12.7299V11.6631H43.5273ZM25.9258 29.2646L24.859 29.2646V29.2646H25.9258ZM25.9258 63.1191V64.1859H26.9926V63.1191H25.9258ZM17.5566 63.1191H16.4899V64.1859H17.5566V63.1191ZM17.5566 29.2646H18.6234V29.2646L17.5566 29.2646ZM1.12402 11.7031L1.19382 10.6386L1.15897 10.6363H1.12402V11.7031ZM-122.095 11.7031V10.6363H-122.13L-122.165 10.6386L-122.095 11.7031ZM-138.527 29.2646L-139.594 29.2646V29.2646H-138.527ZM-138.527 63.1191V64.1859H-137.461V63.1191H-138.527ZM-146.896 63.1191H-147.963V64.1859H-146.896V63.1191ZM-146.896 29.2646H-145.83L-145.83 29.2646L-146.896 29.2646ZM-164.498 11.6631H-165.565V12.7299H-164.498L-164.498 11.6631ZM-164.498 5.51367V4.44689H-165.565V5.51367H-164.498ZM43.5273 5.51367H42.4606V11.6631H43.5273H44.5941V5.51367H43.5273ZM43.5273 11.6631L43.5273 10.5963C33.2172 10.5964 24.8592 18.9545 24.859 29.2646L25.9258 29.2646L26.9926 29.2647C26.9927 20.1328 34.3955 12.73 43.5274 12.7299L43.5273 11.6631ZM25.9258 29.2646H24.859V63.1191H25.9258H26.9926V29.2646H25.9258ZM25.9258 63.1191V62.0524H17.5566V63.1191V64.1859H25.9258V63.1191ZM17.5566 63.1191H18.6234V29.2646H17.5566H16.4899V63.1191H17.5566ZM17.5566 29.2646L18.6234 29.2646C18.6233 19.3705 10.9269 11.2768 1.19382 10.6386L1.12402 11.7031L1.05423 12.7676C9.67326 13.3328 16.4897 20.5023 16.4899 29.2647L17.5566 29.2646ZM1.12402 11.7031V10.6363H-122.095V11.7031V12.7699H1.12402V11.7031ZM-122.095 11.7031L-122.165 10.6386C-131.897 11.277 -139.594 19.3706 -139.594 29.2646L-138.527 29.2646L-137.461 29.2647C-137.46 20.5024 -130.644 13.3329 -122.025 12.7676L-122.095 11.7031ZM-138.527 29.2646H-139.594V63.1191H-138.527H-137.461V29.2646H-138.527ZM-138.527 63.1191V62.0524H-146.896V63.1191V64.1859H-138.527V63.1191ZM-146.896 63.1191H-145.83V29.2646H-146.896H-147.963V63.1191H-146.896ZM-146.896 29.2646L-145.83 29.2646C-145.83 18.9544 -154.188 10.5963 -164.498 10.5963L-164.498 11.6631L-164.498 12.7299C-155.366 12.7299 -147.963 20.1327 -147.963 29.2647L-146.896 29.2646ZM-164.498 11.6631H-163.431V5.51367H-164.498H-165.565V11.6631H-164.498ZM-164.498 5.51367V6.58046H43.5273V5.51367V4.44689H-164.498V5.51367Z" fill="url(#paint5_linear_450_10150)" mask="url(#path-12-outside-3_450_10150)"/>
+</g>
+<g filter="url(#filter5_f_450_10150)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_10150" maskUnits="userSpaceOnUse" x="-165.428" y="3.51367" width="211" height="61" fill="black">
+<rect fill="white" x="-165.428" y="3.51367" width="211" height="61"/>
+<path d="M42.4635 5.51367C43.0527 5.51367 43.5303 5.99129 43.5303 6.58046V10.5963C43.5303 11.1855 43.0515 11.6597 42.4633 11.6951C33.289 12.2467 26.0195 19.8618 26.0195 29.1748V62.0524C26.0195 62.6415 25.5419 63.1191 24.9527 63.1191H18.7601C18.171 63.1191 17.6934 62.6415 17.6934 62.0524V29.1748C17.6934 19.8996 10.482 12.3094 1.36035 11.7031H-121.257C-130.379 12.3091 -137.59 19.8994 -137.59 29.1748V62.0524C-137.59 62.6415 -138.067 63.1191 -138.657 63.1191H-144.849C-145.438 63.1191 -145.916 62.6415 -145.916 62.0524V29.1748C-145.916 19.8617 -153.186 12.2465 -162.361 11.6951C-162.949 11.6597 -163.428 11.1855 -163.428 10.5963V6.58046C-163.428 5.99129 -162.95 5.51367 -162.361 5.51367H42.4635Z"/>
+</mask>
+<path d="M1.36035 11.7031L1.43111 10.6387L1.39577 10.6363H1.36035V11.7031ZM-121.257 11.7031V10.6363H-121.292L-121.328 10.6387L-121.257 11.7031ZM-162.361 11.6951L-162.297 10.6302L-162.361 11.6951ZM43.5303 6.58046H42.4635V10.5963H43.5303H44.5971V6.58046H43.5303ZM42.4633 11.6951L42.3993 10.6302C32.6651 11.2155 24.9527 19.2942 24.9527 29.1748H26.0195H27.0863C27.0863 20.4295 33.913 13.2779 42.5274 12.7599L42.4633 11.6951ZM26.0195 29.1748H24.9527V62.0524H26.0195H27.0863V29.1748H26.0195ZM24.9527 63.1191V62.0524H18.7601V63.1191V64.1859H24.9527V63.1191ZM17.6934 62.0524H18.7601V29.1748H17.6934H16.6266V62.0524H17.6934ZM17.6934 29.1748H18.7601C18.7601 19.3341 11.1094 11.282 1.43111 10.6387L1.36035 11.7031L1.2896 12.7676C9.85464 13.3368 16.6266 20.4651 16.6266 29.1748H17.6934ZM1.36035 11.7031V10.6363H-121.257V11.7031V12.7699H1.36035V11.7031ZM-121.257 11.7031L-121.328 10.6387C-131.006 11.2817 -138.657 19.3339 -138.657 29.1748H-137.59H-136.523C-136.523 20.4649 -129.751 13.3366 -121.186 12.7676L-121.257 11.7031ZM-137.59 29.1748H-138.657V62.0524H-137.59H-136.523V29.1748H-137.59ZM-138.657 63.1191V62.0524H-144.849V63.1191V64.1859H-138.657V63.1191ZM-145.916 62.0524H-144.849V29.1748H-145.916H-146.983V62.0524H-145.916ZM-145.916 29.1748H-144.849C-144.849 19.294 -152.562 11.2153 -162.297 10.6302L-162.361 11.6951L-162.425 12.7599C-153.81 13.2777 -146.983 20.4295 -146.983 29.1748H-145.916ZM-163.428 10.5963H-162.361V6.58046H-163.428H-164.495V10.5963H-163.428ZM-162.361 5.51367V6.58046H42.4635V5.51367V4.44689H-162.361V5.51367ZM-163.428 6.58046H-162.361V6.58046V5.51367V4.44689C-163.539 4.44689 -164.495 5.40212 -164.495 6.58046H-163.428ZM-144.849 63.1191V62.0524H-144.849H-145.916H-146.983C-146.983 63.2307 -146.028 64.1859 -144.849 64.1859V63.1191ZM-137.59 62.0524H-138.657H-138.657V63.1191V64.1859C-137.478 64.1859 -136.523 63.2307 -136.523 62.0524H-137.59ZM18.7601 63.1191V62.0524V62.0524H17.6934H16.6266C16.6266 63.2307 17.5818 64.1859 18.7601 64.1859V63.1191ZM26.0195 62.0524H24.9527V62.0524V63.1191V64.1859C26.1311 64.1859 27.0863 63.2307 27.0863 62.0524H26.0195ZM-162.361 11.6951L-162.297 10.6302C-162.322 10.6287 -162.342 10.618 -162.354 10.6056C-162.359 10.6 -162.361 10.5963 -162.361 10.596C-162.361 10.5959 -162.361 10.5962 -162.361 10.5968C-162.361 10.5975 -162.361 10.5975 -162.361 10.5963H-163.428H-164.495C-164.495 11.7909 -163.534 12.6932 -162.425 12.7599L-162.361 11.6951ZM43.5303 10.5963H42.4635C42.4635 10.5975 42.4634 10.5975 42.4635 10.5969C42.4637 10.5963 42.4638 10.5959 42.4637 10.596C42.4636 10.5963 42.462 10.6001 42.4565 10.6057C42.4443 10.618 42.4243 10.6287 42.3993 10.6302L42.4633 11.6951L42.5274 12.7599C43.6368 12.6932 44.5971 11.7909 44.5971 10.5963H43.5303ZM43.5303 6.58046H44.5971C44.5971 5.40212 43.6418 4.44689 42.4635 4.44689V5.51367V6.58046V6.58046H43.5303Z" fill="url(#paint6_linear_450_10150)" mask="url(#path-14-outside-4_450_10150)"/>
+</g>
+<g filter="url(#filter6_f_450_10150)">
+<path d="M-166.629 14.0481V4.44705C-166.629 3.26871 -165.674 2.31348 -164.495 2.31348H45.6613C46.8396 2.31348 47.7949 3.26871 47.7949 4.44705V14.0481" stroke="url(#paint7_linear_450_10150)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_10150)">
+<path d="M19.5229 63.6529V29.5158C19.5229 23.1151 13.6556 12.4473 0.320778 12.4473C-11.2005 12.4473 -34.1719 12.4473 -45.0176 12.4473" stroke="url(#paint8_linear_450_10150)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter8_f_450_10150)">
+<path d="M-135.695 63.12V27.1337C-135.34 22.7718 -131.962 15.648 -121.827 14.0479H-0.747028C8.85404 14.5812 15.7881 18.4098 15.7881 31.4957V63.12" stroke="url(#paint9_linear_450_10150)" stroke-width="1.06678"/>
+</g>
+<path opacity="0.5" d="M-150.574 63.8501L30.33 63.8501" stroke="url(#paint10_linear_450_10150)" stroke-width="1.06678"/>
+<g filter="url(#filter9_f_450_10150)">
+<path d="M20.0586 46.0513V62.5864H26.9927V46.0513" stroke="url(#paint11_linear_450_10150)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_10150" x="-134.404" y="17.3604" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10150"/>
+</filter>
+<filter id="filter1_ii_450_10150" x="-163.195" y="66.4337" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.605769 0 0 0 0 0.605769 0 0 0 0 0.605769 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10150"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.235577 0 0 0 0 0.235577 0 0 0 0 0.235577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_10150" result="effect2_innerShadow_450_10150"/>
+</filter>
+<filter id="filter2_f_450_10150" x="-162.364" y="68.4537" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<filter id="filter3_f_450_10150" x="-166.631" y="64.1866" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<filter id="filter4_f_450_10150" x="-166.631" y="3.37999" width="212.292" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<filter id="filter5_f_450_10150" x="-165.561" y="3.37999" width="211.225" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<filter id="filter6_f_450_10150" x="-168.229" y="0.713489" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<filter id="filter7_f_450_10150" x="-46.0844" y="10.8473" width="67.2078" height="53.8723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<filter id="filter8_f_450_10150" x="-137.295" y="12.4479" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<filter id="filter9_f_450_10150" x="18.4586" y="44.9845" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10150"/>
+</filter>
+<linearGradient id="paint0_linear_450_10150" x1="-59.6171" y1="17.3604" x2="-59.6171" y2="65.871" gradientUnits="userSpaceOnUse">
+<stop stop-color="#505050"/>
+<stop offset="0.05" stop-color="#696969"/>
+<stop offset="1" stop-color="#1D1D1D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_10150" x1="-137.075" y1="34.7609" x2="15.1702" y2="34.7609" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5C5C5C"/>
+<stop offset="0.077962" stop-color="#3D3D3D" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#3D3D3D" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#5C5C5C"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_10150" x1="-59.4193" y1="70.5874" x2="-59.4193" y2="91.9231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_10150" x1="-164.498" y1="34.0967" x2="45.1875" y2="34.0967" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3B3B3"/>
+<stop offset="0.144231" stop-color="#9B9B9B"/>
+<stop offset="0.889423" stop-color="#9B9B9B"/>
+<stop offset="0.961538" stop-color="#939393"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_10150" x1="-59.9531" y1="66.3203" x2="-59.9531" y2="94.0567" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_10150" x1="-60.4854" y1="5.51367" x2="-60.4854" y2="14.5803" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_10150" x1="-150.161" y1="12.4467" x2="-94.3666" y2="34.1215" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E4" stop-opacity="0.905882"/>
+<stop offset="1" stop-color="#E4E4E4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_10150" x1="-59.417" y1="2.31348" x2="-59.417" y2="14.0481" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5" stop-opacity="0.478431"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_10150" x1="12.5888" y1="16.181" x2="3.58043" y2="17.6159" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_10150" x1="-59.9536" y1="14.0479" x2="-59.9536" y2="63.12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_10150" x1="30.33" y1="63.8501" x2="-150.574" y2="63.8501" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2D2D2D" stop-opacity="0"/>
+<stop offset="0.115385" stop-color="#2D2D2D"/>
+<stop offset="0.860577" stop-color="#2D2D2D"/>
+<stop offset="1" stop-color="#2D2D2D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_10150" x1="22.1922" y1="62.053" x2="21.6588" y2="36.4502" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B4B4B4"/>
+<stop offset="1" stop-color="#B4B4B4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_10150">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/왼쪽.svg
new file mode 100644
index 0000000..bdde052
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/왼쪽.svg	
@@ -0,0 +1,172 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_10080)">
+<g filter="url(#filter0_i_450_10080)">
+<path d="M34.3633 30.1618C34.3633 23.0917 40.0947 17.3604 47.1647 17.3604H171.136C178.206 17.3604 183.938 23.0917 183.938 30.1618V65.871H34.3633V30.1618Z" fill="url(#paint0_linear_450_10080)"/>
+<path d="M34.3633 30.1618C34.3633 23.0917 40.0947 17.3604 47.1647 17.3604H171.136C178.206 17.3604 183.938 23.0917 183.938 30.1618V65.871H34.3633V30.1618Z" fill="url(#paint1_linear_450_10080)"/>
+</g>
+<path d="M47.165 17.8936H171.137C177.912 17.8938 183.404 23.3868 183.404 30.1621V65.3379H34.8965V30.1621C34.8965 23.3867 40.3896 17.8936 47.165 17.8936Z" stroke="#1B1B1B" stroke-width="1.06678"/>
+<path d="M203.049 66.4336C208.94 66.4336 213.717 71.2099 213.717 77.1016V94.1504H4.50293V77.1016C4.50298 71.2099 9.27929 66.4336 15.1709 66.4336H203.049Z" fill="#5C5C5C" stroke="#555555" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_10080)">
+<path d="M6.63672 77.1017C6.63672 72.3883 10.4576 68.5674 15.171 68.5674H203.049C207.762 68.5674 211.583 72.3883 211.583 77.1017V90.9496C211.583 91.5387 211.106 92.0163 210.516 92.0163H7.70351C7.11434 92.0163 6.63672 91.5387 6.63672 90.9496V77.1017Z" fill="#777777"/>
+</g>
+<path d="M203.049 68.0342C208.057 68.0342 212.116 72.0937 212.116 77.1016V90.9492C212.116 91.8329 211.4 92.5497 210.517 92.5498H7.70312C6.81955 92.5496 6.10352 91.8328 6.10352 90.9492V77.1016C6.10357 72.0937 10.163 68.0342 15.1709 68.0342H203.049Z" stroke="#3A3A3A" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_10080)" style="mix-blend-mode:plus-lighter">
+<path d="M203.757 70.0542C207.586 70.0542 210.69 73.1584 210.69 76.9878V92.4565H8.00195V76.9878C8.00213 73.1584 11.1062 70.0544 14.9355 70.0542H203.757Z" stroke="url(#paint2_linear_450_10080)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_10080" maskUnits="userSpaceOnUse" x="-0.730469" y="-0.459961" width="219" height="69" fill="black">
+<rect fill="white" x="-0.730469" y="-0.459961" width="219" height="69"/>
+<path d="M213.952 12.0514C213.952 12.6405 213.473 13.1148 212.885 13.1497C203.585 13.7014 196.212 21.4182 196.212 30.8574V62.5865C196.212 63.1757 195.734 63.6533 195.145 63.6533H188.844C188.255 63.6533 187.777 63.1757 187.777 62.5865V30.8574C187.777 21.0608 179.836 13.1195 170.04 13.1182C170.038 13.1182 170.037 13.1171 170.037 13.1157C170.037 13.1144 170.036 13.1133 170.035 13.1133H48.2104C48.2091 13.1133 48.208 13.1144 48.208 13.1157C48.208 13.1171 48.2069 13.1182 48.2056 13.1182C38.4091 13.1195 30.4678 21.0617 30.4678 30.8584V62.5865C30.4678 63.1757 29.9902 63.6533 29.401 63.6533H23.1C22.5108 63.6533 22.0332 63.1757 22.0332 62.5865V30.8584C22.0332 21.4191 14.6607 13.7015 5.35989 13.1497C4.77176 13.1148 4.29297 12.6405 4.29297 12.0514V8.04139C4.29297 7.45223 4.77058 6.97461 5.35975 6.97461H212.885C213.475 6.97461 213.952 7.45223 213.952 8.04139V12.0514ZM213.955 5.2915C213.955 5.70653 213.619 6.04297 213.204 6.04297H5.021C4.60598 6.04297 4.26953 5.70653 4.26953 5.2915C4.26953 4.87648 4.60597 4.54004 5.021 4.54004H213.204C213.619 4.54004 213.955 4.87648 213.955 5.2915Z"/>
+</mask>
+<path d="M213.952 12.0514C213.952 12.6405 213.473 13.1148 212.885 13.1497C203.585 13.7014 196.212 21.4182 196.212 30.8574V62.5865C196.212 63.1757 195.734 63.6533 195.145 63.6533H188.844C188.255 63.6533 187.777 63.1757 187.777 62.5865V30.8574C187.777 21.0608 179.836 13.1195 170.04 13.1182C170.038 13.1182 170.037 13.1171 170.037 13.1157C170.037 13.1144 170.036 13.1133 170.035 13.1133H48.2104C48.2091 13.1133 48.208 13.1144 48.208 13.1157C48.208 13.1171 48.2069 13.1182 48.2056 13.1182C38.4091 13.1195 30.4678 21.0617 30.4678 30.8584V62.5865C30.4678 63.1757 29.9902 63.6533 29.401 63.6533H23.1C22.5108 63.6533 22.0332 63.1757 22.0332 62.5865V30.8584C22.0332 21.4191 14.6607 13.7015 5.35989 13.1497C4.77176 13.1148 4.29297 12.6405 4.29297 12.0514V8.04139C4.29297 7.45223 4.77058 6.97461 5.35975 6.97461H212.885C213.475 6.97461 213.952 7.45223 213.952 8.04139V12.0514ZM213.955 5.2915C213.955 5.70653 213.619 6.04297 213.204 6.04297H5.021C4.60598 6.04297 4.26953 5.70653 4.26953 5.2915C4.26953 4.87648 4.60597 4.54004 5.021 4.54004H213.204C213.619 4.54004 213.955 4.87648 213.955 5.2915Z" fill="url(#paint3_linear_450_10080)"/>
+<path d="M196.212 30.8574L191.945 30.8574V30.8574H196.212ZM187.777 30.8574H192.044V30.8574L187.777 30.8574ZM48.2056 13.1182L48.205 8.85102V8.85102L48.2056 13.1182ZM5.35989 13.1497L5.10721 17.4094L5.35989 13.1497ZM170.04 13.1182L170.04 8.85102L170.04 13.1182ZM212.885 13.1497L212.633 8.89006C201.091 9.57466 191.945 19.146 191.945 30.8574L196.212 30.8574L200.479 30.8575C200.479 23.6905 206.078 17.8281 213.138 17.4094L212.885 13.1497ZM196.212 30.8574H191.945V62.5865H196.212H200.479V30.8574H196.212ZM195.145 63.6533V59.3862H188.844V63.6533V67.9205H195.145V63.6533ZM187.777 62.5865H192.044V30.8574H187.777H183.51V62.5865H187.777ZM187.777 30.8574L192.044 30.8574C192.044 18.7041 182.193 8.85267 170.04 8.85102L170.04 13.1182L170.039 17.3853C177.479 17.3863 183.51 23.4176 183.51 30.8575L187.777 30.8574ZM170.035 13.1133V8.84614H48.2104V13.1133V17.3804H170.035V13.1133ZM48.2056 13.1182L48.205 8.85102C36.0522 8.85267 26.2006 18.7052 26.2006 30.8584H30.4678H34.7349C34.7349 23.4182 40.7661 17.3863 48.2061 17.3853L48.2056 13.1182ZM30.4678 30.8584H26.2006V62.5865H30.4678H34.7349V30.8584H30.4678ZM29.401 63.6533V59.3862H23.1V63.6533V67.9205H29.401V63.6533ZM22.0332 62.5865H26.3003V30.8584H22.0332H17.7661V62.5865H22.0332ZM22.0332 30.8584H26.3003C26.3003 19.1471 17.1544 9.57474 5.61258 8.89007L5.35989 13.1497L5.10721 17.4094C12.1669 17.8282 17.7661 23.6911 17.7661 30.8584H22.0332ZM4.29297 12.0514H8.56011V8.04139H4.29297H0.0258293V12.0514H4.29297ZM5.35975 6.97461V11.2417H212.885V6.97461V2.70747H5.35975V6.97461ZM213.952 8.04139H209.685V12.0514H213.952H218.219V8.04139H213.952ZM213.204 6.04297V1.77583H5.021V6.04297V10.3101H213.204V6.04297ZM5.021 4.54004V8.80718H213.204V4.54004V0.2729H5.021V4.54004ZM213.204 4.54004V8.80718C211.262 8.80718 209.688 7.23319 209.688 5.2915H213.955H218.222C218.222 2.51978 215.975 0.2729 213.204 0.2729V4.54004ZM4.26953 5.2915H8.53667C8.53667 7.23316 6.96265 8.80718 5.021 8.80718V4.54004V0.2729C2.2493 0.2729 0.00239182 2.51981 0.00239182 5.2915H4.26953ZM5.021 6.04297V1.77583C6.96262 1.77583 8.53667 3.34982 8.53667 5.2915H4.26953H0.00239182C0.00239182 8.06323 2.24933 10.3101 5.021 10.3101V6.04297ZM213.204 6.04297V10.3101C215.975 10.3101 218.222 8.0632 218.222 5.2915H213.955H209.688C209.688 3.34985 211.262 1.77583 213.204 1.77583V6.04297ZM212.885 6.97461V11.2417C211.118 11.2417 209.685 9.80893 209.685 8.04139H213.952H218.219C218.219 5.09552 215.831 2.70747 212.885 2.70747V6.97461ZM30.4678 62.5865H26.2006C26.2006 60.819 27.6335 59.3862 29.401 59.3862V63.6533V67.9205C32.3468 67.9205 34.7349 65.5324 34.7349 62.5865H30.4678ZM48.208 13.1157H43.9409C43.9409 10.7281 45.8825 8.85134 48.205 8.85102L48.2056 13.1182L48.2061 17.3853C50.5313 17.385 52.4751 15.506 52.4751 13.1157H48.208ZM48.2104 13.1133V8.84614C45.849 8.84614 43.9409 10.7611 43.9409 13.1157H48.208H52.4751C52.4751 15.4676 50.5692 17.3804 48.2104 17.3804V13.1133ZM170.037 13.1157H174.304C174.304 10.7577 172.393 8.84614 170.035 8.84614V13.1133V17.3804C167.679 17.3804 165.77 15.4711 165.77 13.1157H170.037ZM4.29297 8.04139H8.56011C8.56011 9.8089 7.12726 11.2417 5.35975 11.2417V6.97461V2.70747C2.41391 2.70747 0.0258293 5.09555 0.0258293 8.04139H4.29297ZM188.844 63.6533V59.3862C190.612 59.3862 192.044 60.819 192.044 62.5865H187.777H183.51C183.51 65.5324 185.898 67.9205 188.844 67.9205V63.6533ZM5.35989 13.1497L5.61258 8.89007C7.11334 8.97909 8.56011 10.2197 8.56011 12.0514H4.29297H0.0258293C0.0258293 15.0614 2.43018 17.2506 5.10721 17.4094L5.35989 13.1497ZM196.212 62.5865H191.945C191.945 60.819 193.378 59.3862 195.145 59.3862V63.6533V67.9205C198.091 67.9205 200.479 65.5324 200.479 62.5865H196.212ZM170.04 13.1182L170.04 8.85102C172.361 8.85134 174.304 10.7269 174.304 13.1157H170.037H165.77C165.77 15.5072 167.715 17.385 170.039 17.3853L170.04 13.1182ZM23.1 63.6533V59.3862C24.8675 59.3862 26.3003 60.819 26.3003 62.5865H22.0332H17.7661C17.7661 65.5324 20.1541 67.9205 23.1 67.9205V63.6533ZM212.885 13.1497L213.138 17.4094C215.815 17.2506 218.219 15.0614 218.219 12.0514H213.952H209.685C209.685 10.2197 211.132 8.97908 212.633 8.89006L212.885 13.1497Z" fill="#555555" mask="url(#path-7-outside-1_450_10080)"/>
+<mask id="path-9-outside-2_450_10080" maskUnits="userSpaceOnUse" x="2.26953" y="2.54004" width="213" height="63" fill="black">
+<rect fill="white" x="2.26953" y="2.54004" width="213" height="63"/>
+<path d="M213.952 13.1182C204.155 13.1182 196.212 21.06 196.212 30.8574V63.6533H187.777V30.8574C187.777 21.06 179.835 13.1182 170.037 13.1182V13.1133H48.208V13.1182C38.4105 13.1182 30.4678 21.0609 30.4678 30.8584V63.6533H22.0332V30.8584C22.0332 21.0609 14.0905 13.1182 4.29297 13.1182V6.97461H213.952V13.1182ZM213.955 6.04297H4.26953V4.54004H213.955V6.04297Z"/>
+</mask>
+<path d="M213.952 13.1182V14.1849C214.541 14.1849 215.019 13.7073 215.019 13.1182H213.952ZM196.212 30.8574L195.145 30.8574V30.8574H196.212ZM196.212 63.6533V64.7201C196.801 64.7201 197.279 64.2425 197.279 63.6533H196.212ZM187.777 63.6533H186.711C186.711 64.2425 187.188 64.7201 187.777 64.7201V63.6533ZM187.777 30.8574H188.844V30.8574L187.777 30.8574ZM170.037 13.1182H168.97C168.97 13.7073 169.448 14.1849 170.037 14.1849V13.1182ZM170.037 13.1133H171.104C171.104 12.5241 170.626 12.0465 170.037 12.0465V13.1133ZM48.208 13.1133V12.0465C47.6188 12.0465 47.1412 12.5241 47.1412 13.1133H48.208ZM48.208 13.1182V14.1849C48.7972 14.1849 49.2748 13.7073 49.2748 13.1182H48.208ZM30.4678 63.6533V64.7201C31.0569 64.7201 31.5346 64.2425 31.5346 63.6533H30.4678ZM22.0332 63.6533H20.9664C20.9664 64.2425 21.444 64.7201 22.0332 64.7201V63.6533ZM4.29297 13.1182H3.22618C3.22618 13.7073 3.7038 14.1849 4.29297 14.1849V13.1182ZM4.29297 6.97461V5.90782C3.7038 5.90782 3.22618 6.38544 3.22618 6.97461H4.29297ZM213.952 6.97461H215.019C215.019 6.38544 214.541 5.90782 213.952 5.90782V6.97461ZM213.955 6.04297V7.10975C214.544 7.10975 215.022 6.63214 215.022 6.04297H213.955ZM4.26953 6.04297H3.20275C3.20275 6.63214 3.68036 7.10975 4.26953 7.10975V6.04297ZM4.26953 4.54004V3.47325C3.68036 3.47325 3.20275 3.95087 3.20275 4.54004H4.26953ZM213.955 4.54004H215.022C215.022 3.95087 214.544 3.47325 213.955 3.47325V4.54004ZM213.952 13.1182V12.0514C203.566 12.0514 195.145 20.4708 195.145 30.8574L196.212 30.8574L197.279 30.8574C197.279 21.6493 204.744 14.1849 213.952 14.1849V13.1182ZM196.212 30.8574H195.145V63.6533H196.212H197.279V30.8574H196.212ZM196.212 63.6533V62.5865H187.777V63.6533V64.7201H196.212V63.6533ZM187.777 63.6533H188.844V30.8574H187.777H186.711V63.6533H187.777ZM187.777 30.8574L188.844 30.8574C188.844 20.4708 180.424 12.0514 170.037 12.0514V13.1182V14.1849C179.245 14.1849 186.71 21.6493 186.711 30.8574L187.777 30.8574ZM170.037 13.1182H171.104V13.1133H170.037H168.97V13.1182H170.037ZM170.037 13.1133V12.0465H48.208V13.1133V14.1801H170.037V13.1133ZM48.208 13.1133H47.1412V13.1182H48.208H49.2748V13.1133H48.208ZM48.208 13.1182V12.0514C37.8213 12.0514 29.401 20.4717 29.401 30.8584H30.4678H31.5346C31.5346 21.65 38.9996 14.1849 48.208 14.1849V13.1182ZM30.4678 30.8584H29.401V63.6533H30.4678H31.5346V30.8584H30.4678ZM30.4678 63.6533V62.5865H22.0332V63.6533V64.7201H30.4678V63.6533ZM22.0332 63.6533H23.1V30.8584H22.0332H20.9664V63.6533H22.0332ZM22.0332 30.8584H23.1C23.1 20.4717 14.6797 12.0514 4.29297 12.0514V13.1182V14.1849C13.5013 14.1849 20.9664 21.65 20.9664 30.8584H22.0332ZM4.29297 13.1182H5.35975V6.97461H4.29297H3.22618V13.1182H4.29297ZM4.29297 6.97461V8.04139H213.952V6.97461V5.90782H4.29297V6.97461ZM213.952 6.97461H212.885V13.1182H213.952H215.019V6.97461H213.952ZM213.955 6.04297V4.97618H4.26953V6.04297V7.10975H213.955V6.04297ZM4.26953 6.04297H5.33632V4.54004H4.26953H3.20275V6.04297H4.26953ZM4.26953 4.54004V5.60682H213.955V4.54004V3.47325H4.26953V4.54004ZM213.955 4.54004H212.888V6.04297H213.955H215.022V4.54004H213.955Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_10080)"/>
+<g filter="url(#filter3_f_450_10080)" style="mix-blend-mode:plus-lighter">
+<path d="M202.689 65.7871C208.876 65.7871 213.891 70.802 213.891 76.9883V94.5898H3.73438V76.9883C3.73438 70.802 8.74927 65.7871 14.9355 65.7871H202.689Z" stroke="url(#paint4_linear_450_10080)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_10080)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_10080" maskUnits="userSpaceOnUse" x="2.26953" y="3.51465" width="212" height="61" fill="black">
+<rect fill="white" x="2.26953" y="3.51465" width="212" height="61"/>
+<path d="M212.295 5.51465V11.6631C202.574 11.6632 194.694 19.5437 194.693 29.2646V63.1191H186.324V29.2646C186.324 19.9364 179.068 12.3048 169.892 11.7031H46.6729C37.4969 12.3049 30.2404 19.9365 30.2402 29.2646V63.1191H21.8711V29.2646C21.8709 19.5436 13.9906 11.6631 4.26953 11.6631V5.51465H212.295Z"/>
+</mask>
+<path d="M212.295 5.51465H213.362V4.44786H212.295V5.51465ZM212.295 11.6631L212.295 12.7299L213.362 12.7299V11.6631H212.295ZM194.693 29.2646L193.627 29.2646V29.2646H194.693ZM194.693 63.1191V64.1859H195.76V63.1191H194.693ZM186.324 63.1191H185.257V64.1859H186.324V63.1191ZM186.324 29.2646H187.391V29.2646L186.324 29.2646ZM169.892 11.7031L169.961 10.6386L169.927 10.6363H169.892V11.7031ZM46.6729 11.7031V10.6363H46.6379L46.603 10.6386L46.6729 11.7031ZM30.2402 29.2646L29.1735 29.2646V29.2646H30.2402ZM30.2402 63.1191V64.1859H31.307V63.1191H30.2402ZM21.8711 63.1191H20.8043V64.1859H21.8711V63.1191ZM21.8711 29.2646H22.9379L22.9379 29.2646L21.8711 29.2646ZM4.26953 11.6631H3.20275V12.7299H4.26953L4.26953 11.6631ZM4.26953 5.51465V4.44786H3.20275V5.51465H4.26953ZM212.295 5.51465H211.228V11.6631H212.295H213.362V5.51465H212.295ZM212.295 11.6631L212.295 10.5963C201.985 10.5964 193.627 18.9545 193.627 29.2646L194.693 29.2646L195.76 29.2647C195.76 20.1328 203.163 12.73 212.295 12.7299L212.295 11.6631ZM194.693 29.2646H193.627V63.1191H194.693H195.76V29.2646H194.693ZM194.693 63.1191V62.0524H186.324V63.1191V64.1859H194.693V63.1191ZM186.324 63.1191H187.391V29.2646H186.324H185.257V63.1191H186.324ZM186.324 29.2646L187.391 29.2646C187.391 19.3705 179.694 11.2768 169.961 10.6386L169.892 11.7031L169.822 12.7676C178.441 13.3328 185.257 20.5023 185.257 29.2647L186.324 29.2646ZM169.892 11.7031V10.6363H46.6729V11.7031V12.7699H169.892V11.7031ZM46.6729 11.7031L46.603 10.6386C36.8701 11.277 29.1736 19.3706 29.1735 29.2646L30.2402 29.2646L31.307 29.2647C31.3072 20.5024 38.1237 13.3329 46.7427 12.7676L46.6729 11.7031ZM30.2402 29.2646H29.1735V63.1191H30.2402H31.307V29.2646H30.2402ZM30.2402 63.1191V62.0524H21.8711V63.1191V64.1859H30.2402V63.1191ZM21.8711 63.1191H22.9379V29.2646H21.8711H20.8043V63.1191H21.8711ZM21.8711 29.2646L22.9379 29.2646C22.9377 18.9544 14.5798 10.5963 4.26953 10.5963L4.26953 11.6631L4.26953 12.7299C13.4014 12.7299 20.8042 20.1327 20.8043 29.2647L21.8711 29.2646ZM4.26953 11.6631H5.33632V5.51465H4.26953H3.20275V11.6631H4.26953ZM4.26953 5.51465V6.58143H212.295V5.51465V4.44786H4.26953V5.51465Z" fill="url(#paint5_linear_450_10080)" mask="url(#path-12-outside-3_450_10080)"/>
+</g>
+<g filter="url(#filter5_f_450_10080)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_10080" maskUnits="userSpaceOnUse" x="3.33984" y="3.51465" width="211" height="61" fill="black">
+<rect fill="white" x="3.33984" y="3.51465" width="211" height="61"/>
+<path d="M211.231 5.51465C211.82 5.51465 212.298 5.99226 212.298 6.58143V10.5963C212.298 11.1855 211.819 11.6597 211.231 11.6951C202.057 12.2467 194.787 19.8618 194.787 29.1748V62.0524C194.787 62.6415 194.309 63.1191 193.72 63.1191H187.528C186.939 63.1191 186.461 62.6415 186.461 62.0524V29.1748C186.461 19.8996 179.25 12.3094 170.128 11.7031H47.5107C38.3888 12.3091 31.1777 19.8994 31.1777 29.1748V62.0524C31.1777 62.6415 30.7001 63.1191 30.1109 63.1191H23.9183C23.3292 63.1191 22.8516 62.6415 22.8516 62.0524V29.1748C22.8516 19.8617 15.5813 12.2465 6.40679 11.6951C5.81868 11.6597 5.33984 11.1855 5.33984 10.5963V6.58143C5.33984 5.99226 5.81746 5.51465 6.40663 5.51465H211.231Z"/>
+</mask>
+<path d="M170.128 11.7031L170.199 10.6387L170.163 10.6363H170.128V11.7031ZM47.5107 11.7031V10.6363H47.4753L47.44 10.6387L47.5107 11.7031ZM6.40679 11.6951L6.47079 10.6302L6.40679 11.6951ZM212.298 6.58143H211.231V10.5963H212.298H213.365V6.58143H212.298ZM211.231 11.6951L211.167 10.6302C201.433 11.2155 193.72 19.2942 193.72 29.1748H194.787H195.854C195.854 20.4295 202.681 13.2779 211.295 12.7599L211.231 11.6951ZM194.787 29.1748H193.72V62.0524H194.787H195.854V29.1748H194.787ZM193.72 63.1191V62.0524H187.528V63.1191V64.1859H193.72V63.1191ZM186.461 62.0524H187.528V29.1748H186.461H185.394V62.0524H186.461ZM186.461 29.1748H187.528C187.528 19.3341 179.877 11.282 170.199 10.6387L170.128 11.7031L170.057 12.7676C178.622 13.3368 185.394 20.4651 185.394 29.1748H186.461ZM170.128 11.7031V10.6363H47.5107V11.7031V12.7699H170.128V11.7031ZM47.5107 11.7031L47.44 10.6387C37.7614 11.2817 30.111 19.3339 30.111 29.1748H31.1777H32.2445C32.2445 20.4649 39.0162 13.3366 47.5815 12.7676L47.5107 11.7031ZM31.1777 29.1748H30.111V62.0524H31.1777H32.2445V29.1748H31.1777ZM30.1109 63.1191V62.0524H23.9183V63.1191V64.1859H30.1109V63.1191ZM22.8516 62.0524H23.9183V29.1748H22.8516H21.7848V62.0524H22.8516ZM22.8516 29.1748H23.9183C23.9183 19.294 16.2052 11.2153 6.47079 10.6302L6.40679 11.6951L6.34279 12.7599C14.9574 13.2777 21.7848 20.4295 21.7848 29.1748H22.8516ZM5.33984 10.5963H6.40663V6.58143H5.33984H4.27306V10.5963H5.33984ZM6.40663 5.51465V6.58143H211.231V5.51465V4.44786H6.40663V5.51465ZM5.33984 6.58143H6.40663V6.58143V5.51465V4.44786C5.22829 4.44786 4.27306 5.40309 4.27306 6.58143H5.33984ZM23.9183 63.1191V62.0524H23.9183H22.8516H21.7848C21.7848 63.2307 22.74 64.1859 23.9183 64.1859V63.1191ZM31.1777 62.0524H30.111H30.1109V63.1191V64.1859C31.2893 64.1859 32.2445 63.2307 32.2445 62.0524H31.1777ZM187.528 63.1191V62.0524V62.0524H186.461H185.394C185.394 63.2307 186.349 64.1859 187.528 64.1859V63.1191ZM194.787 62.0524H193.72V62.0524V63.1191V64.1859C194.899 64.1859 195.854 63.2307 195.854 62.0524H194.787ZM6.40679 11.6951L6.47079 10.6302C6.44587 10.6287 6.4258 10.618 6.41366 10.6056C6.40816 10.6 6.40649 10.5963 6.40637 10.596C6.40632 10.5959 6.40646 10.5962 6.40659 10.5968C6.40673 10.5975 6.40663 10.5975 6.40663 10.5963H5.33984H4.27306C4.27306 11.7909 5.23338 12.6932 6.34279 12.7599L6.40679 11.6951ZM212.298 10.5963H211.231C211.231 10.5975 211.231 10.5975 211.231 10.5969C211.231 10.5963 211.231 10.5959 211.231 10.596C211.231 10.5963 211.23 10.6001 211.224 10.6057C211.212 10.618 211.192 10.6287 211.167 10.6302L211.231 11.6951L211.295 12.7599C212.404 12.6932 213.365 11.7909 213.365 10.5963H212.298ZM212.298 6.58143H213.365C213.365 5.40309 212.409 4.44786 211.231 4.44786V5.51465V6.58143V6.58143H212.298Z" fill="url(#paint6_linear_450_10080)" mask="url(#path-14-outside-4_450_10080)"/>
+</g>
+<g filter="url(#filter6_f_450_10080)">
+<path d="M2.13672 14.0481V4.44705C2.13672 3.26871 3.09195 2.31348 4.27029 2.31348H214.427C215.605 2.31348 216.56 3.26871 216.56 4.44705V14.0481" stroke="url(#paint7_linear_450_10080)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_10080)">
+<path d="M33.0723 63.12V27.1337C33.4279 22.7718 36.806 15.648 46.9405 14.0479H168.021C177.622 14.5812 184.556 18.4098 184.556 31.4957V63.12" stroke="url(#paint8_linear_450_10080)" stroke-width="1.06678"/>
+</g>
+<path opacity="0.5" d="M18.1934 63.8501L199.098 63.8501" stroke="url(#paint9_linear_450_10080)" stroke-width="1.06678"/>
+<g filter="url(#filter8_f_450_10080)">
+<path d="M22.9375 46.0513V62.5864H29.8716V46.0513" stroke="url(#paint10_linear_450_10080)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_10080" x="34.3633" y="17.3604" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10080"/>
+</filter>
+<filter id="filter1_ii_450_10080" x="5.57031" y="66.4337" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.605769 0 0 0 0 0.605769 0 0 0 0 0.605769 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10080"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.235577 0 0 0 0 0.235577 0 0 0 0 0.235577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_10080" result="effect2_innerShadow_450_10080"/>
+</filter>
+<filter id="filter2_f_450_10080" x="6.40197" y="68.4537" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10080"/>
+</filter>
+<filter id="filter3_f_450_10080" x="2.13439" y="64.1866" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10080"/>
+</filter>
+<filter id="filter4_f_450_10080" x="2.13634" y="3.38097" width="212.292" height="61.8719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10080"/>
+</filter>
+<filter id="filter5_f_450_10080" x="3.20665" y="3.38097" width="211.225" height="61.8719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10080"/>
+</filter>
+<filter id="filter6_f_450_10080" x="0.536731" y="0.713489" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10080"/>
+</filter>
+<filter id="filter7_f_450_10080" x="31.4723" y="12.4479" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10080"/>
+</filter>
+<filter id="filter8_f_450_10080" x="21.3375" y="44.9845" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10080"/>
+</filter>
+<linearGradient id="paint0_linear_450_10080" x1="109.151" y1="17.3604" x2="109.151" y2="65.871" gradientUnits="userSpaceOnUse">
+<stop stop-color="#505050"/>
+<stop offset="0.05" stop-color="#696969"/>
+<stop offset="1" stop-color="#1D1D1D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_10080" x1="31.6923" y1="34.7609" x2="183.938" y2="34.7609" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5C5C5C"/>
+<stop offset="0.077962" stop-color="#3D3D3D" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#3D3D3D" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#5C5C5C"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_10080" x1="109.346" y1="70.5874" x2="109.346" y2="91.9231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_10080" x1="4.26953" y1="34.0967" x2="213.955" y2="34.0967" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3B3B3"/>
+<stop offset="0.144231" stop-color="#9B9B9B"/>
+<stop offset="0.889423" stop-color="#9B9B9B"/>
+<stop offset="0.961538" stop-color="#939393"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_10080" x1="108.812" y1="66.3203" x2="108.812" y2="94.0567" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_10080" x1="108.282" y1="5.51465" x2="108.282" y2="14.5811" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_10080" x1="18.6063" y1="12.4476" x2="44.9856" y2="15.2479" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E4" stop-opacity="0.905882"/>
+<stop offset="1" stop-color="#E4E4E4" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_10080" x1="109.349" y1="2.31348" x2="109.349" y2="14.0481" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5" stop-opacity="0.478431"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_10080" x1="108.814" y1="14.0479" x2="108.814" y2="63.12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_10080" x1="199.098" y1="63.8501" x2="18.1934" y2="63.8501" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2D2D2D" stop-opacity="0"/>
+<stop offset="0.115385" stop-color="#2D2D2D"/>
+<stop offset="0.860577" stop-color="#2D2D2D"/>
+<stop offset="1" stop-color="#2D2D2D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_10080" x1="25.0711" y1="62.053" x2="24.5377" y2="36.4502" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B4B4B4"/>
+<stop offset="1" stop-color="#B4B4B4" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_10080">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/중앙.svg
new file mode 100644
index 0000000..f5ea458
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/실사화/중앙.svg	
@@ -0,0 +1,149 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_10116)">
+<g clip-path="url(#clip1_450_10116)">
+<g filter="url(#filter0_i_450_10116)">
+<path d="M-348.002 29.9821C-348.002 22.9121 -342.271 17.1807 -335.201 17.1807H408.54C415.61 17.1807 421.341 22.9121 421.341 29.9821V65.6913H-348.002V29.9821Z" fill="url(#paint0_linear_450_10116)"/>
+<path d="M-348.002 29.9821C-348.002 22.9121 -342.271 17.1807 -335.201 17.1807H408.54C415.61 17.1807 421.341 22.9121 421.341 29.9821V65.6913H-348.002V29.9821Z" fill="url(#paint1_linear_450_10116)"/>
+</g>
+<path d="M-335.2 17.7139H408.54C415.315 17.714 420.808 23.2071 420.808 29.9824V65.1582H-347.469V29.9824C-347.469 23.207 -341.976 17.7139 -335.2 17.7139Z" stroke="#1B1B1B" stroke-width="1.06678"/>
+<path d="M555.002 66.2539C560.894 66.2539 565.67 71.0302 565.67 76.9219V93.9707H-492.749V76.9219C-492.749 71.0303 -487.973 66.254 -482.081 66.2539H555.002Z" fill="#5C5C5C" stroke="#555555" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_10116)">
+<path d="M-490.615 76.922C-490.615 72.2086 -486.794 68.3877 -482.081 68.3877H555.002C559.715 68.3877 563.536 72.2086 563.536 76.922V90.7699C563.536 91.359 563.059 91.8366 562.469 91.8366H-489.548C-490.138 91.8366 -490.615 91.359 -490.615 90.7699V76.922Z" fill="#777777"/>
+</g>
+<path d="M555.002 67.8545C560.01 67.8545 564.069 71.914 564.069 76.9219V90.7695C564.069 91.6532 563.353 92.37 562.47 92.3701H-489.549C-490.432 92.3699 -491.148 91.6532 -491.148 90.7695V76.9219C-491.148 71.914 -487.089 67.8545 -482.081 67.8545H555.002Z" stroke="#3A3A3A" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_10116)" style="mix-blend-mode:plus-lighter">
+<path d="M549.812 69.8745C553.641 69.8747 556.745 72.9788 556.745 76.8081V92.2769H-481.375V76.8081C-481.375 72.9788 -478.271 69.8747 -474.441 69.8745H549.812Z" stroke="url(#paint2_linear_450_10116)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_10116" maskUnits="userSpaceOnUse" x="-507.803" y="-0.639648" width="1088" height="69" fill="black">
+<rect fill="white" x="-507.803" y="-0.639648" width="1088" height="69"/>
+<path d="M575.718 11.8717C575.718 12.4609 575.24 12.9385 574.651 12.9385H535.007C507.454 12.9385 485.051 34.9874 484.482 62.4033C484.47 62.9923 483.993 63.4736 483.404 63.4736H442.154C441.565 63.4736 441.088 62.9923 441.076 62.4033C440.506 34.9875 418.104 12.9386 390.552 12.9385H349.843C349.842 12.9385 349.841 12.9374 349.841 12.936C349.841 12.9347 349.84 12.9336 349.838 12.9336H-276.802C-276.804 12.9336 -276.805 12.9347 -276.805 12.936C-276.805 12.9374 -276.806 12.9385 -276.807 12.9385H-317.516C-345.068 12.9385 -367.471 34.9874 -368.041 62.4033C-368.053 62.9923 -368.529 63.4736 -369.119 63.4736H-410.369C-410.958 63.4736 -411.434 62.9923 -411.447 62.4033C-412.016 34.9875 -434.418 12.9387 -461.971 12.9385H-501.615C-502.204 12.9385 -502.682 12.4609 -502.682 11.8717V7.86171C-502.682 7.27254 -502.204 6.79492 -501.615 6.79492H574.651C575.24 6.79492 575.718 7.27254 575.718 7.86171V11.8717ZM575.723 5.11182C575.723 5.52684 575.386 5.86328 574.971 5.86328H-502.051C-502.466 5.86328 -502.803 5.52684 -502.803 5.11182C-502.803 4.69679 -502.466 4.36035 -502.051 4.36035H574.971C575.386 4.36035 575.723 4.69679 575.723 5.11182Z"/>
+</mask>
+<path d="M575.718 11.8717C575.718 12.4609 575.24 12.9385 574.651 12.9385H535.007C507.454 12.9385 485.051 34.9874 484.482 62.4033C484.47 62.9923 483.993 63.4736 483.404 63.4736H442.154C441.565 63.4736 441.088 62.9923 441.076 62.4033C440.506 34.9875 418.104 12.9386 390.552 12.9385H349.843C349.842 12.9385 349.841 12.9374 349.841 12.936C349.841 12.9347 349.84 12.9336 349.838 12.9336H-276.802C-276.804 12.9336 -276.805 12.9347 -276.805 12.936C-276.805 12.9374 -276.806 12.9385 -276.807 12.9385H-317.516C-345.068 12.9385 -367.471 34.9874 -368.041 62.4033C-368.053 62.9923 -368.529 63.4736 -369.119 63.4736H-410.369C-410.958 63.4736 -411.434 62.9923 -411.447 62.4033C-412.016 34.9875 -434.418 12.9387 -461.971 12.9385H-501.615C-502.204 12.9385 -502.682 12.4609 -502.682 11.8717V7.86171C-502.682 7.27254 -502.204 6.79492 -501.615 6.79492H574.651C575.24 6.79492 575.718 7.27254 575.718 7.86171V11.8717ZM575.723 5.11182C575.723 5.52684 575.386 5.86328 574.971 5.86328H-502.051C-502.466 5.86328 -502.803 5.52684 -502.803 5.11182C-502.803 4.69679 -502.466 4.36035 -502.051 4.36035H574.971C575.386 4.36035 575.723 4.69679 575.723 5.11182Z" fill="url(#paint3_linear_450_10116)"/>
+<path d="M390.552 12.9385V8.67134V8.67134V12.9385ZM-461.971 12.9385L-461.971 8.67134H-461.971V12.9385ZM-368.041 62.4033L-372.307 62.3146V62.3146L-368.041 62.4033ZM441.076 62.4033L445.342 62.3146L441.076 62.4033ZM484.482 62.4033L480.216 62.3146L484.482 62.4033ZM-411.447 62.4033L-415.713 62.4919L-411.447 62.4033ZM574.651 12.9385V8.67134H535.007V12.9385V17.2056H574.651V12.9385ZM535.007 12.9385V8.67134C505.128 8.67134 480.833 32.5819 480.216 62.3146L484.482 62.4033L488.748 62.4919C489.27 37.3929 509.781 17.2056 535.007 17.2056V12.9385ZM483.404 63.4736V59.2065H442.154V63.4736V67.7408H483.404V63.4736ZM441.076 62.4033L445.342 62.3146C444.724 32.582 420.431 8.67145 390.552 8.67134V12.9385V17.2056C415.777 17.2057 436.288 37.3929 436.81 62.4919L441.076 62.4033ZM390.552 12.9385V8.67134H349.843V12.9385V17.2056H390.552V12.9385ZM349.838 12.9336V8.66645H-276.802V12.9336V17.2007H349.838V12.9336ZM-276.807 12.9385V8.67134H-317.516V12.9385V17.2056H-276.807V12.9385ZM-317.516 12.9385V8.67134C-347.395 8.67134 -371.689 32.5819 -372.307 62.3146L-368.041 62.4033L-363.774 62.4919C-363.253 37.3929 -342.741 17.2056 -317.516 17.2056V12.9385ZM-369.119 63.4736V59.2065H-410.369V63.4736V67.7408H-369.119V63.4736ZM-411.447 62.4033L-407.18 62.3146C-407.798 32.5821 -432.092 8.67154 -461.971 8.67134L-461.971 12.9385L-461.971 17.2056C-436.745 17.2058 -416.234 37.393 -415.713 62.4919L-411.447 62.4033ZM-461.971 12.9385V8.67134H-501.615V12.9385V17.2056H-461.971V12.9385ZM-502.682 11.8717H-498.415V7.86171H-502.682H-506.949V11.8717H-502.682ZM-501.615 6.79492V11.0621H574.651V6.79492V2.52778H-501.615V6.79492ZM575.718 7.86171H571.451V11.8717H575.718H579.985V7.86171H575.718ZM574.971 5.86328V1.59614H-502.051V5.86328V10.1304H574.971V5.86328ZM-502.051 4.36035V8.62749H574.971V4.36035V0.0932121H-502.051V4.36035ZM574.971 4.36035V8.62749C573.03 8.62749 571.456 7.05368 571.456 5.11182H575.723H579.99C579.99 2.33991 577.743 0.0932121 574.971 0.0932121V4.36035ZM-502.803 5.11182H-498.536C-498.536 7.05347 -500.11 8.62749 -502.051 8.62749V4.36035V0.0932121C-504.823 0.0932121 -507.07 2.34012 -507.07 5.11182H-502.803ZM-502.051 5.86328V1.59614C-500.11 1.59614 -498.536 3.16995 -498.536 5.11182H-502.803H-507.07C-507.07 7.88372 -504.823 10.1304 -502.051 10.1304V5.86328ZM574.971 5.86328V10.1304C577.743 10.1304 579.99 7.88351 579.99 5.11182H575.723H571.456C571.456 3.17016 573.03 1.59614 574.971 1.59614V5.86328ZM574.651 6.79492V11.0621C572.883 11.0621 571.451 9.62904 571.451 7.86171H575.718H579.985C579.985 4.91604 577.597 2.52778 574.651 2.52778V6.79492ZM-368.041 62.4033L-372.307 62.3146C-372.272 60.6582 -370.927 59.2065 -369.119 59.2065V63.4736V67.7408C-366.132 67.7408 -363.833 65.3264 -363.774 62.4919L-368.041 62.4033ZM-276.805 12.936H-281.072C-281.072 10.5807 -279.162 8.67134 -276.807 8.67134V12.9385V17.2056C-274.449 17.2056 -272.538 15.2941 -272.538 12.936H-276.805ZM-276.802 12.9336V8.66645C-279.191 8.66645 -281.072 10.6091 -281.072 12.936H-276.805H-272.538C-272.538 15.2602 -274.416 17.2007 -276.802 17.2007V12.9336ZM349.841 12.936H354.108C354.108 10.578 352.196 8.66645 349.838 8.66645V12.9336V17.2007C347.483 17.2007 345.574 15.2914 345.574 12.936H349.841ZM-502.682 7.86171H-498.415C-498.415 9.62921 -499.847 11.0621 -501.615 11.0621V6.79492V2.52778C-504.561 2.52778 -506.949 4.91586 -506.949 7.86171H-502.682ZM442.154 63.4736V59.2065C443.962 59.2065 445.308 60.6582 445.342 62.3146L441.076 62.4033L436.81 62.4919C436.868 65.3264 439.167 67.7408 442.154 67.7408V63.4736ZM-501.615 12.9385V8.67134C-499.847 8.67134 -498.415 10.1042 -498.415 11.8717H-502.682H-506.949C-506.949 14.8175 -504.561 17.2056 -501.615 17.2056V12.9385ZM484.482 62.4033L480.216 62.3146C480.25 60.6582 481.595 59.2065 483.404 59.2065V63.4736V67.7408C486.391 67.7408 488.689 65.3264 488.748 62.4919L484.482 62.4033ZM349.843 12.9385V8.67134C352.199 8.67134 354.108 10.5814 354.108 12.936H349.841H345.574C345.574 15.2934 347.485 17.2056 349.843 17.2056V12.9385ZM-410.369 63.4736V59.2065C-408.56 59.2065 -407.215 60.6582 -407.18 62.3146L-411.447 62.4033L-415.713 62.4919C-415.654 65.3264 -413.356 67.7408 -410.369 67.7408V63.4736ZM574.651 12.9385V17.2056C577.597 17.2056 579.985 14.8175 579.985 11.8717H575.718H571.451C571.451 10.1042 572.883 8.67134 574.651 8.67134V12.9385Z" fill="#555555" mask="url(#path-7-outside-1_450_10116)"/>
+<mask id="path-9-outside-2_450_10116" maskUnits="userSpaceOnUse" x="-504.803" y="2.36035" width="1082" height="63" fill="black">
+<rect fill="white" x="-504.803" y="2.36035" width="1082" height="63"/>
+<path d="M575.718 12.9385H535.007C507.097 12.9385 484.471 35.5636 484.471 63.4736H441.087C441.087 35.5637 418.462 12.9386 390.552 12.9385H349.841V12.9336H-276.805V12.9385H-317.516C-345.426 12.9385 -368.052 35.5636 -368.052 63.4736H-411.436C-411.436 35.5637 -434.061 12.9387 -461.971 12.9385H-502.682V6.79492H575.718V12.9385ZM575.723 5.86328H-502.803V4.36035H575.723V5.86328Z"/>
+</mask>
+<path d="M575.718 12.9385V14.0053C576.307 14.0053 576.785 13.5276 576.785 12.9385H575.718ZM484.471 63.4736V64.5404C485.06 64.5404 485.537 64.0628 485.537 63.4736H484.471ZM441.087 63.4736H440.02C440.02 64.0628 440.498 64.5404 441.087 64.5404V63.4736ZM390.552 12.9385V11.8717V11.8717V12.9385ZM349.841 12.9385H348.774C348.774 13.5276 349.252 14.0053 349.841 14.0053V12.9385ZM349.841 12.9336H350.908C350.908 12.3444 350.43 11.8668 349.841 11.8668V12.9336ZM-276.805 12.9336V11.8668C-277.394 11.8668 -277.871 12.3444 -277.871 12.9336H-276.805ZM-276.805 12.9385V14.0053C-276.216 14.0053 -275.738 13.5276 -275.738 12.9385H-276.805ZM-368.052 63.4736V64.5404C-367.463 64.5404 -366.985 64.0628 -366.985 63.4736H-368.052ZM-411.436 63.4736H-412.502C-412.502 64.0628 -412.025 64.5404 -411.436 64.5404V63.4736ZM-461.971 12.9385L-461.971 11.8717H-461.971V12.9385ZM-502.682 12.9385H-503.748C-503.748 13.5276 -503.271 14.0053 -502.682 14.0053V12.9385ZM-502.682 6.79492V5.72814C-503.271 5.72814 -503.748 6.20575 -503.748 6.79492H-502.682ZM575.718 6.79492H576.785C576.785 6.20575 576.307 5.72814 575.718 5.72814V6.79492ZM575.723 5.86328V6.93007C576.312 6.93007 576.789 6.45245 576.789 5.86328H575.723ZM-502.803 5.86328H-503.87C-503.87 6.45245 -503.392 6.93007 -502.803 6.93007V5.86328ZM-502.803 4.36035V3.29357C-503.392 3.29357 -503.87 3.77118 -503.87 4.36035H-502.803ZM575.723 4.36035H576.789C576.789 3.77118 576.312 3.29357 575.723 3.29357V4.36035ZM575.718 12.9385V11.8717H535.007V12.9385V14.0053H575.718V12.9385ZM535.007 12.9385V11.8717C506.508 11.8717 483.404 34.9744 483.404 63.4736H484.471H485.537C485.537 36.1528 507.686 14.0053 535.007 14.0053V12.9385ZM484.471 63.4736V62.4068H441.087V63.4736V64.5404H484.471V63.4736ZM441.087 63.4736H442.154C442.154 34.9745 419.051 11.8718 390.552 11.8717V12.9385V14.0053C417.873 14.0054 440.02 36.1528 440.02 63.4736H441.087ZM390.552 12.9385V11.8717H349.841V12.9385V14.0053H390.552V12.9385ZM349.841 12.9385H350.908V12.9336H349.841H348.774V12.9385H349.841ZM349.841 12.9336V11.8668H-276.805V12.9336V14.0004H349.841V12.9336ZM-276.805 12.9336H-277.871V12.9385H-276.805H-275.738V12.9336H-276.805ZM-276.805 12.9385V11.8717H-317.516V12.9385V14.0053H-276.805V12.9385ZM-317.516 12.9385V11.8717C-346.015 11.8717 -369.119 34.9744 -369.119 63.4736H-368.052H-366.985C-366.985 36.1528 -344.837 14.0053 -317.516 14.0053V12.9385ZM-368.052 63.4736V62.4068H-411.436V63.4736V64.5404H-368.052V63.4736ZM-411.436 63.4736H-410.369C-410.369 34.9745 -433.472 11.8719 -461.971 11.8717L-461.971 12.9385L-461.971 14.0053C-434.65 14.0054 -412.502 36.1529 -412.502 63.4736H-411.436ZM-461.971 12.9385V11.8717H-502.682V12.9385V14.0053H-461.971V12.9385ZM-502.682 12.9385H-501.615V6.79492H-502.682H-503.748V12.9385H-502.682ZM-502.682 6.79492V7.86171H575.718V6.79492V5.72814H-502.682V6.79492ZM575.718 6.79492H574.651V12.9385H575.718H576.785V6.79492H575.718ZM575.723 5.86328V4.7965H-502.803V5.86328V6.93007H575.723V5.86328ZM-502.803 5.86328H-501.736V4.36035H-502.803H-503.87V5.86328H-502.803ZM-502.803 4.36035V5.42714H575.723V4.36035V3.29357H-502.803V4.36035ZM575.723 4.36035H574.656V5.86328H575.723H576.789V4.36035H575.723Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_10116)"/>
+<g filter="url(#filter3_f_450_10116)" style="mix-blend-mode:plus-lighter">
+<path d="M562.004 65.6074C568.19 65.6074 573.205 70.6223 573.205 76.8086V94.4102H-503.324V76.8086C-503.324 70.6223 -498.309 65.6074 -492.123 65.6074H562.004Z" stroke="url(#paint4_linear_450_10116)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_10116)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_10116" maskUnits="userSpaceOnUse" x="-504.803" y="3.33496" width="1074" height="61" fill="black">
+<rect fill="white" x="-504.803" y="3.33496" width="1074" height="61"/>
+<path d="M567.196 5.33496V11.4834H528.117C499.699 11.4836 476.661 34.5212 476.661 62.9395H433.615C433.615 34.5212 410.577 11.4836 382.159 11.4834H373.734V11.5234H-319.798C-347.274 12.5911 -369.22 35.202 -369.221 62.9395H-412.267C-412.267 34.5211 -435.305 11.4834 -463.724 11.4834H-502.803V5.33496H567.196Z"/>
+</mask>
+<path d="M567.196 5.33496H568.263V4.26818H567.196V5.33496ZM567.196 11.4834V12.5502H568.263V11.4834H567.196ZM528.117 11.4834V10.4166V10.4166V11.4834ZM476.661 62.9395V64.0062H477.728V62.9395L476.661 62.9395ZM433.615 62.9395L432.548 62.9395V64.0062H433.615V62.9395ZM382.159 11.4834V10.4166V10.4166V11.4834ZM373.734 11.4834V10.4166H372.668V11.4834H373.734ZM373.734 11.5234V12.5902H374.801V11.5234H373.734ZM-319.798 11.5234V10.4567H-319.819L-319.839 10.4575L-319.798 11.5234ZM-369.221 62.9395V64.0062H-368.154L-368.154 62.9395L-369.221 62.9395ZM-412.267 62.9395L-413.333 62.9395L-413.333 64.0062H-412.267V62.9395ZM-502.803 11.4834H-503.87V12.5502H-502.803V11.4834ZM-502.803 5.33496V4.26818H-503.87V5.33496H-502.803ZM567.196 5.33496H566.13V11.4834H567.196H568.263V5.33496H567.196ZM567.196 11.4834V10.4166H528.117V11.4834V12.5502H567.196V11.4834ZM528.117 11.4834V10.4166C499.11 10.4168 475.595 33.932 475.594 62.9394L476.661 62.9395L477.728 62.9395C477.728 35.1103 500.288 12.5504 528.117 12.5502V11.4834ZM476.661 62.9395V61.8727H433.615V62.9395V64.0062H476.661V62.9395ZM433.615 62.9395L434.682 62.9394C434.682 33.932 411.167 10.4168 382.159 10.4166V11.4834V12.5502C409.988 12.5504 432.548 35.1104 432.548 62.9395L433.615 62.9395ZM382.159 11.4834V10.4166H373.734V11.4834V12.5502H382.159V11.4834ZM373.734 11.4834H372.668V11.5234H373.734H374.801V11.4834H373.734ZM373.734 11.5234V10.4567H-319.798V11.5234V12.5902H373.734V11.5234ZM-319.798 11.5234L-319.839 10.4575C-347.886 11.5472 -370.287 34.6267 -370.287 62.9394L-369.221 62.9395L-368.154 62.9395C-368.154 35.7773 -346.662 13.6349 -319.756 12.5894L-319.798 11.5234ZM-369.221 62.9395V61.8727H-412.267V62.9395V64.0062H-369.221V62.9395ZM-412.267 62.9395L-411.2 62.9394C-411.2 33.9319 -434.716 10.4166 -463.724 10.4166V11.4834V12.5502C-435.894 12.5502 -413.334 35.1103 -413.333 62.9395L-412.267 62.9395ZM-463.724 11.4834V10.4166H-502.803V11.4834V12.5502H-463.724V11.4834ZM-502.803 11.4834H-501.736V5.33496H-502.803H-503.87V11.4834H-502.803ZM-502.803 5.33496V6.40175H567.196V5.33496V4.26818H-502.803V5.33496Z" fill="url(#paint5_linear_450_10116)" mask="url(#path-12-outside-3_450_10116)"/>
+</g>
+<g filter="url(#filter5_f_450_10116)">
+<path d="M-513.762 13.8684V4.26736C-513.762 3.08902 -512.806 2.13379 -511.628 2.13379H587.003C588.182 2.13379 589.137 3.08902 589.137 4.26736V13.8684" stroke="url(#paint6_linear_450_10116)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter6_f_450_10116)">
+<path d="M-354.643 62.9403V26.9541C-352.814 22.5921 -335.438 15.4683 -283.311 13.8682H339.47C388.854 14.4016 424.519 18.2301 424.519 31.316V62.9403" stroke="url(#paint7_linear_450_10116)" stroke-width="1.06678"/>
+</g>
+<path opacity="0.5" d="M-431.174 63.6704L499.315 63.6704" stroke="url(#paint8_linear_450_10116)" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_10116" x="-348.002" y="17.1807" width="770.411" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10116"/>
+</filter>
+<filter id="filter1_ii_450_10116" x="-491.682" y="66.254" width="1057.35" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.605769 0 0 0 0 0.605769 0 0 0 0 0.605769 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10116"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.235577 0 0 0 0 0.235577 0 0 0 0 0.235577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_10116" result="effect2_innerShadow_450_10116"/>
+</filter>
+<filter id="filter2_f_450_10116" x="-482.975" y="68.274" width="1041.32" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10116"/>
+</filter>
+<filter id="filter3_f_450_10116" x="-504.924" y="64.0069" width="1079.73" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10116"/>
+</filter>
+<filter id="filter4_f_450_10116" x="-504.936" y="3.20128" width="1074.27" height="61.8719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10116"/>
+</filter>
+<filter id="filter5_f_450_10116" x="-515.362" y="0.533801" width="1106.1" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10116"/>
+</filter>
+<filter id="filter6_f_450_10116" x="-356.243" y="12.2682" width="782.362" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10116"/>
+</filter>
+<linearGradient id="paint0_linear_450_10116" x1="36.6696" y1="17.1807" x2="36.6696" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#505050"/>
+<stop offset="0.05" stop-color="#696969"/>
+<stop offset="1" stop-color="#1D1D1D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_10116" x1="-361.74" y1="34.5812" x2="421.341" y2="34.5813" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5C5C5C"/>
+<stop offset="0.077962" stop-color="#3D3D3D" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#3D3D3D" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#5C5C5C"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_10116" x1="37.6851" y1="70.4077" x2="37.6851" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_10116" x1="-502.803" y1="33.917" x2="575.723" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3B3B3"/>
+<stop offset="0.144231" stop-color="#9B9B9B"/>
+<stop offset="0.889423" stop-color="#9B9B9B"/>
+<stop offset="0.961538" stop-color="#939393"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_10116" x1="34.9406" y1="66.1406" x2="34.9406" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_10116" x1="32.1968" y1="5.33496" x2="32.1968" y2="14.4015" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_10116" x1="37.6875" y1="2.13379" x2="37.6875" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5" stop-opacity="0.478431"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_10116" x1="34.9385" y1="13.8682" x2="34.9385" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="1" stop-color="#E5E5E5" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_10116" x1="499.315" y1="63.6704" x2="-431.174" y2="63.67" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2D2D2D" stop-opacity="0"/>
+<stop offset="0.115385" stop-color="#2D2D2D"/>
+<stop offset="0.860577" stop-color="#2D2D2D"/>
+<stop offset="1" stop-color="#2D2D2D" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_10116">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_10116">
+<rect width="678" height="95" fill="white" transform="translate(-297.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/오른쪽.svg
new file mode 100644
index 0000000..2bc9087
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/오른쪽.svg	
@@ -0,0 +1,30 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7590)">
+<g filter="url(#filter0_i_450_7590)">
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#555555"/>
+</g>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#555555"/>
+<mask id="path-3-outside-1_450_7590" maskUnits="userSpaceOnUse" x="-155.559" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="-155.559" y="1.0874" width="205" height="80"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z"/>
+</mask>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#AAAAAA"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#555555" mask="url(#path-3-outside-1_450_7590)"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#777777" stroke="#555555" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7590" x="-124.781" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7590"/>
+</filter>
+<clipPath id="clip0_450_7590">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/왼쪽.svg
new file mode 100644
index 0000000..cd84a00
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/왼쪽.svg	
@@ -0,0 +1,30 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7572)">
+<g filter="url(#filter0_i_450_7572)">
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#555555"/>
+</g>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#555555"/>
+<mask id="path-3-outside-1_450_7572" maskUnits="userSpaceOnUse" x="1" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="1" y="1.0874" width="205" height="80"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z"/>
+</mask>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#AAAAAA"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#555555" mask="url(#path-3-outside-1_450_7572)"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#777777" stroke="#555555" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7572" x="31.7773" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7572"/>
+</filter>
+<clipPath id="clip0_450_7572">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/중앙.svg
new file mode 100644
index 0000000..3254a1d
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교량/위치도/중앙.svg	
@@ -0,0 +1,30 @@
+<svg width="97" height="93" viewBox="0 0 97 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7581)">
+<g filter="url(#filter0_i_450_7581)">
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#555555"/>
+</g>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#555555"/>
+<mask id="path-3-outside-1_450_7581" maskUnits="userSpaceOnUse" x="-122.176" y="1" width="343" height="17" fill="black">
+<rect fill="white" x="-122.176" y="1" width="343" height="17"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z"/>
+</mask>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#AAAAAA"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#555555" mask="url(#path-3-outside-1_450_7581)"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#777777" stroke="#555555" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7581" x="-72.6289" y="13" width="243.246" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7581"/>
+</filter>
+<clipPath id="clip0_450_7581">
+<rect width="97" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/오른쪽.svg
new file mode 100644
index 0000000..c0be3dd
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/오른쪽.svg	
@@ -0,0 +1,101 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1582)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_467_1582)"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="black" fill-opacity="0.5"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" stroke="url(#paint1_linear_467_1582)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1582)">
+<path d="M-44.9453 7.66511C-44.9453 3.94713 -41.9313 0.933105 -38.2133 0.933105H25.0126C28.7306 0.933105 31.7446 3.94712 31.7446 7.66511V32.0673C31.7446 50.2927 16.97 65.0673 -1.25538 65.0673H-38.2133C-41.9313 65.0673 -44.9453 62.0533 -44.9453 58.3353V7.66511Z" fill="#888888" fill-opacity="0.01"/>
+<path d="M-38.2129 1.13135H25.0127C28.6213 1.13139 31.5469 4.05692 31.5469 7.66553V32.0669C31.5469 50.1829 16.8602 64.8696 -1.25586 64.8696H-38.2129C-41.8215 64.8696 -44.747 61.944 -44.7471 58.3354V7.66553C-44.7471 4.0569 -41.8215 1.13135 -38.2129 1.13135Z" stroke="url(#paint2_linear_467_1582)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1582)">
+<path d="M-41.9766 7.39212C-41.9766 5.64248 -40.5582 4.22412 -38.8086 4.22412H25.6074C27.3571 4.22412 28.7754 5.64248 28.7754 7.39212V33.0001C28.7754 48.8927 15.892 61.7761 -0.000556946 61.7761H-38.8086C-40.5582 61.7761 -41.9766 60.3578 -41.9766 58.6081V7.39212Z" fill="#888888" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48779H25.6074C27.2112 4.48779 28.5117 5.78827 28.5117 7.39209V33.0005C28.5115 48.7471 15.7456 61.5122 -0.000976562 61.5122H-38.8086C-40.4124 61.5122 -41.7129 60.2117 -41.7129 58.6079V7.39209C-41.7129 5.78828 -40.4124 4.48781 -38.8086 4.48779Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1582)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#888888" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V58.5464C27.3145 59.567 26.4864 60.395 25.4658 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#888888" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V58.5464C27.3145 59.567 26.4864 60.395 25.4658 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_467_1582)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V58.5464C27.3145 59.567 26.4864 60.395 25.4658 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_467_1582)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1582)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1582" x="-45.6053" y="-0.122895" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1582"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1582" result="effect2_innerShadow_467_1582"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1582"/>
+</filter>
+<filter id="filter1_ddi_467_1582" x="-43.0326" y="2.90412" width="72.864" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1582"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1582" result="effect2_dropShadow_467_1582"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1582" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1582"/>
+</filter>
+<filter id="filter2_f_467_1582" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1582"/>
+</filter>
+<filter id="filter3_f_467_1582" x="24.402" y="6.3361" width="2.45964" height="3.29314" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_467_1582"/>
+</filter>
+<linearGradient id="paint0_linear_467_1582" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.5" stop-color="#BBBBBB"/>
+<stop offset="1" stop-color="#444444"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1582" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCCCCC"/>
+<stop offset="0.2" stop-color="#CCCCCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1582" x1="-6.60035" y1="0.933105" x2="-6.60035" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1582" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDED"/>
+<stop offset="0.201923" stop-color="#EAEAEA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1582" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#666666" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1582">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/왼쪽.svg
new file mode 100644
index 0000000..3cb4036
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/왼쪽.svg	
@@ -0,0 +1,236 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1555)">
+<mask id="mask0_467_1555" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_467_1555)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1555)"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1555)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1555)">
+<rect x="-66.252" y="0.933105" width="170.438" height="64.1342" rx="6.732" fill="#888888" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13111" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1555)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1555)">
+<rect x="-59.6523" y="4.22412" width="157.242" height="57.552" rx="3.168" fill="#888888" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.48812" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1555)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#888888" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="#888888" fill-opacity="0.01"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1555)"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1555)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1555)">
+<path d="M2.64258 32.7358C2.64258 14.5104 17.4172 -0.26416 35.6426 -0.26416H66.5306C67.697 -0.26416 68.6426 0.681415 68.6426 1.84784V32.7358C68.6426 50.9612 53.868 65.7358 35.6426 65.7358H4.75458C3.58815 65.7358 2.64258 64.7903 2.64258 63.6238V32.7358Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_467_1555" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_467_1555)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_467_1555)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1555)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_467_1555)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1555)"/>
+<g filter="url(#filter4_iif_467_1555)">
+<path d="M0.93392 33.8745C0.967179 15.6491 15.7687 0.901473 33.9941 0.934732L64.0729 0.989621C64.6561 0.990686 65.128 1.46433 65.1269 2.04755L65.0721 32.1257C65.0388 50.351 50.2373 65.0987 32.0119 65.0654L1.9331 65.0105C1.34989 65.0095 0.877968 64.5358 0.879032 63.9526L0.93392 33.8745Z" fill="#888888" fill-opacity="0.01"/>
+<path d="M33.9937 1.13297L64.0728 1.18786C64.5464 1.18887 64.9293 1.57323 64.9286 2.04685L64.8737 32.1249C64.8407 50.2409 50.1282 64.9008 32.0122 64.8677L1.93313 64.8129C1.45942 64.8118 1.07641 64.4266 1.07727 63.9529L1.13216 33.8748C1.16523 15.7588 15.8777 1.09992 33.9937 1.13297Z" stroke="url(#paint8_linear_467_1555)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_467_1555)">
+<mask id="path-13-inside-2_467_1555" fill="white">
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z"/>
+</mask>
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_467_1555)"/>
+</g>
+<g filter="url(#filter6_f_467_1555)">
+<mask id="path-14-inside-3_467_1555" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#888888" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_467_1555)"/>
+</g>
+<mask id="path-15-inside-4_467_1555" fill="white">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z"/>
+</mask>
+<g filter="url(#filter7_i_467_1555)">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" fill="#888888" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" stroke="url(#paint9_linear_467_1555)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_467_1555)"/>
+<g filter="url(#filter8_dii_467_1555)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0176 13.3682C35.3983 13.3682 36.5176 14.4875 36.5176 15.8682V21.005L46.103 30.5903H52.0741C53.4547 30.5903 54.5741 31.7096 54.5741 33.0903C54.5741 34.471 53.4547 35.5903 52.0741 35.5903H45.3842L36.5176 44.4569V49.8682C36.5176 51.2489 35.3983 52.3681 34.0176 52.3681C32.637 52.3681 31.5177 51.2489 31.5176 49.8682V44.7304L22.3775 35.5903H15.9629C14.5822 35.5903 13.4629 34.471 13.4629 33.0903C13.4629 31.7096 14.5822 30.5903 15.9629 30.5903H21.6587L31.5176 20.7314V15.8682C31.5176 14.4875 32.6369 13.3682 34.0176 13.3682ZM31.5176 41.9018V35.5903H25.2061L31.5176 41.9018ZM36.5176 41.6283L42.5556 35.5903H36.5176V41.6283ZM24.4871 30.5903H31.5176V23.5597L24.4871 30.5903ZM36.5176 30.5903H43.2747L36.5176 23.8333V30.5903Z" fill="url(#paint10_linear_467_1555)"/>
+<path d="M25.1123 35.6836L31.6494 42.2207V35.458H24.8877L25.1123 35.6836ZM36.3857 41.9473L42.6494 35.6836L42.874 35.458H36.3857V41.9473ZM24.168 30.7227H31.6494V23.2412L24.168 30.7227ZM36.3857 30.7227H43.5938L36.3857 23.5146V30.7227ZM31.6494 44.6758L31.6113 44.6367L22.4707 35.4971L22.4326 35.458H15.9629C14.6551 35.458 13.5947 34.3976 13.5947 33.0898C13.595 31.7823 14.6552 30.7227 15.9629 30.7227H21.7139L21.752 30.6836L31.6113 20.8252L31.6494 20.7861V15.8682C31.6494 14.5604 32.7098 13.5 34.0176 13.5C35.3254 13.5 36.3857 14.5604 36.3857 15.8682V21.0596L36.4238 21.0986L46.0098 30.6836L46.0479 30.7227H52.0742C53.3818 30.7228 54.4421 31.7823 54.4424 33.0898C54.4424 34.3976 53.3819 35.4579 52.0742 35.458H45.3291L45.291 35.4971L36.4238 44.3633L36.3857 44.4023V49.8682C36.3857 51.1759 35.3253 52.2363 34.0176 52.2363C32.7098 52.2363 31.6495 51.1759 31.6494 49.8682V44.6758Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1555" x="-66.912" y="-0.122895" width="171.757" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1555"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1555" result="effect2_innerShadow_467_1555"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1555"/>
+</filter>
+<filter id="filter1_ddi_467_1555" x="-60.7083" y="2.90412" width="159.354" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1555"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1555" result="effect2_dropShadow_467_1555"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1555" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1555"/>
+</filter>
+<filter id="filter2_f_467_1555" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1555"/>
+</filter>
+<filter id="filter3_f_467_1555" x="-2.63742" y="-5.54416" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_467_1555"/>
+</filter>
+<filter id="filter4_iif_467_1555" x="0.218906" y="-0.12143" width="65.568" height="65.8469" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1555"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1555" result="effect2_innerShadow_467_1555"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1555"/>
+</filter>
+<filter id="filter5_dd_467_1555" x="3.17252" y="2.90412" width="59.6647" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1555"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1555" result="effect2_dropShadow_467_1555"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1555" result="shape"/>
+</filter>
+<filter id="filter6_f_467_1555" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1555"/>
+</filter>
+<filter id="filter7_i_467_1555" x="5.21028" y="5.73438" width="55.0592" height="55.5877" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1555"/>
+</filter>
+<filter id="filter8_dii_467_1555" x="11.6149" y="12.3122" width="45.3353" height="43.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1555"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_467_1555" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_467_1555"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_467_1555" result="effect3_innerShadow_467_1555"/>
+</filter>
+<linearGradient id="paint0_linear_467_1555" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.5" stop-color="#BBBBBB"/>
+<stop offset="1" stop-color="#444444"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1555" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCCCCC"/>
+<stop offset="0.2" stop-color="#CCCCCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1555" x1="18.9672" y1="0.933105" x2="18.9672" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1555" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDED"/>
+<stop offset="0.201923" stop-color="#EAEAEA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1555" x1="-36.6666" y1="5.34131" x2="-36.6666" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#666666" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_467_1555" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.458959" stop-color="#AAAAAA"/>
+<stop offset="1" stop-color="#444444"/>
+</linearGradient>
+<linearGradient id="paint6_linear_467_1555" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E8E8E8"/>
+<stop offset="0.5" stop-color="#666666"/>
+<stop offset="1" stop-color="#222222"/>
+</linearGradient>
+<linearGradient id="paint7_linear_467_1555" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCCCCC"/>
+<stop offset="0.2" stop-color="#CCCCCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_467_1555" x1="33.0615" y1="0.93303" x2="32.9445" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint9_linear_467_1555" x1="6.81248" y1="6.65267" x2="18.6608" y2="57.589" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#666666" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_467_1555" x1="23.1374" y1="19.1191" x2="49.1137" y2="45.0954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_467_1555">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/중앙.svg
new file mode 100644
index 0000000..305a191
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/실사화/중앙.svg	
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1574)">
+<g clip-path="url(#clip1_467_1574)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1574)"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1574)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1574)">
+<rect x="-249.951" y="0.933105" width="590.064" height="64.1342" rx="6.732" fill="#888888" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13111" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1574)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1574)">
+<rect x="-227.107" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="#888888" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1574)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#888888" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#888888" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1574)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1574)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1574" x="-250.611" y="-0.122895" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1574"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1574" result="effect2_innerShadow_467_1574"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1574"/>
+</filter>
+<filter id="filter1_ddi_467_1574" x="-228.163" y="2.90412" width="546.489" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1574"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1574" result="effect2_dropShadow_467_1574"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1574" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1574"/>
+</filter>
+<filter id="filter2_f_467_1574" x="-219.201" y="4.02131" width="528.564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1574"/>
+</filter>
+<linearGradient id="paint0_linear_467_1574" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.5" stop-color="#BBBBBB"/>
+<stop offset="1" stop-color="#444444"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1574" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCCCCC"/>
+<stop offset="0.2" stop-color="#CCCCCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1574" x1="45.0809" y1="0.933105" x2="45.0809" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#999999"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1574" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EDEDED"/>
+<stop offset="0.201923" stop-color="#EAEAEA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1574" x1="-147.526" y1="5.34131" x2="-147.526" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#666666" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1574">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_467_1574">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/위치도/오른쪽.svg
new file mode 100644
index 0000000..b52dc01
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/위치도/오른쪽.svg	
@@ -0,0 +1,14 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1955" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#444444"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1955)" fill-opacity="0.3"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1955)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1955" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/위치도/왼쪽.svg
new file mode 100644
index 0000000..24a9b75
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/교차로/위치도/왼쪽.svg	
@@ -0,0 +1,10 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1952" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#444444"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1952)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA" stroke="#555555" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 13.5C34.3807 13.5 35.5 14.6193 35.5 16V21.1367L45.0859 30.7227H51.0566C52.4373 30.7228 53.5566 31.842 53.5566 33.2227C53.5564 34.6031 52.4371 35.7225 51.0566 35.7227H44.3652L35.5 44.5879V50C35.5 51.3807 34.3807 52.5 33 52.5C31.6193 52.5 30.5 51.3807 30.5 50V44.8613L21.3613 35.7227H14.9453C13.5647 35.7227 12.4455 34.6032 12.4453 33.2227C12.4453 31.8419 13.5646 30.7227 14.9453 30.7227H20.6406L30.5 20.8633V16C30.5 14.6193 31.6193 13.5 33 13.5ZM30.5 42.0332V35.7227H24.1895L30.5 42.0332ZM35.5 35.7227V41.7598L41.5371 35.7227H35.5ZM35.5 30.7227H42.2578L35.5 23.9648V30.7227ZM23.4688 30.7227H30.5V23.6914L23.4688 30.7227Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/오른쪽.svg
new file mode 100644
index 0000000..06dca15
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/오른쪽.svg	
@@ -0,0 +1,135 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9908)">
+<path d="M-148 1.5H8C29.263 1.5 46.5 18.737 46.5 40V86C46.5 90.1421 43.1421 93.5 39 93.5H-178C-182.694 93.5 -186.5 89.6944 -186.5 85V40C-186.5 18.737 -169.263 1.5 -148 1.5Z" fill="#909090" stroke="#555555" stroke-width="3"/>
+<g filter="url(#filter0_i_450_9908)">
+<path d="M-183 42C-183 21.5655 -166.435 5 -146 5H6C26.4345 5 43 21.5655 43 42V90C43 92.2091 41.2091 94 39 94H-179C-181.209 94 -183 92.2091 -183 90V42Z" fill="#909090"/>
+</g>
+<path d="M6 4.5C26.7107 4.5 43.5 21.2893 43.5 42V90C43.5 92.4853 41.4853 94.5 39 94.5H-179C-181.485 94.5 -183.5 92.4853 -183.5 90V42C-183.5 21.2893 -166.711 4.5 -146 4.5H6Z" stroke="#525252" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter1_f_450_9908)" style="mix-blend-mode:plus-lighter">
+<path d="M43.375 87C43.3724 87.0982 43.3326 87.1923 43.2625 87.2617C43.1925 87.3312 43.0981 87.3701 43 87.3701C42.9019 87.3701 42.8075 87.3312 42.7375 87.2617C42.6674 87.1923 42.6276 87.0982 42.625 87C42.625 87 42.625 87 42.625 87C42.5833 85.4 42.5437 83.8 42.5062 82.2C42.2174 69.8741 42.0521 57.5482 42.0105 45.2222L42.0142 45.3077C41.8299 43.2645 41.5698 41.2344 41.2105 39.2269C39.315 25.0717 29.0806 12.9573 15.2573 8.76932C13.7542 8.24431 12.2489 7.78372 10.6944 7.36448C10.5996 7.3389 10.5175 7.27807 10.4665 7.19362C10.4155 7.10919 10.3998 7.00835 10.4228 6.91296C10.4459 6.81756 10.506 6.73506 10.59 6.68328C10.6739 6.63148 10.7748 6.61493 10.8708 6.63552C12.4616 6.97783 14.0089 7.36768 15.5611 7.82969C29.7857 11.294 41.3207 24.2077 43.1791 38.8744C43.5507 40.95 43.811 43.0407 43.9858 45.1367L43.9895 45.2222C43.9479 57.5482 43.7826 69.8741 43.4938 82.2C43.4563 83.8 43.4167 85.4 43.375 87Z" fill="url(#paint0_linear_450_9908)"/>
+</g>
+<mask id="path-5-inside-1_450_9908" fill="white">
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z"/>
+</mask>
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z" fill="url(#paint1_linear_450_9908)"/>
+<path d="M-173 39C-173 25.1929 -161.807 14 -148 14H9C22.8071 14 34 25.1929 34 39H30C30 27.402 20.598 18 9 18H-148C-159.598 18 -169 27.402 -169 39H-173ZM-169 39M32 72H-171H32M-167 72C-170.314 72 -173 69.3137 -173 66V39C-173 25.1929 -161.807 14 -148 14V18C-159.598 18 -169 27.402 -169 39V68C-169 70.2091 -168.105 72 -167 72ZM9 14C22.8071 14 34 25.1929 34 39V66C34 69.3137 31.3137 72 28 72C29.1046 72 30 70.2091 30 68V39C30 27.402 20.598 18 9 18V14Z" fill="#3A3939" mask="url(#path-5-inside-1_450_9908)"/>
+<mask id="path-7-inside-2_450_9908" fill="white">
+<path d="M-173 38C-173 24.7452 -162.255 14 -149 14H10C23.2548 14 34 24.7452 34 38V68C34 70.2091 32.2091 72 30 72H-169C-171.209 72 -173 70.2091 -173 68V38Z"/>
+</mask>
+<path d="M-174 38C-174 24.1929 -162.807 13 -149 13H10C23.8071 13 35 24.1929 35 38H33C33 25.2975 22.7025 15 10 15H-149C-161.703 15 -172 25.2975 -172 38H-174ZM-172 38M34 72H-173H34M-169 72C-171.761 72 -174 69.7614 -174 67V38C-174 24.1929 -162.807 13 -149 13V15C-161.703 15 -172 25.2975 -172 38V68C-172 70.2091 -170.657 72 -169 72ZM10 13C23.8071 13 35 24.1929 35 38V67C35 69.7614 32.7614 72 30 72C31.6569 72 33 70.2091 33 68V38C33 25.2975 22.7025 15 10 15V13Z" fill="url(#paint2_linear_450_9908)" mask="url(#path-7-inside-2_450_9908)"/>
+<g filter="url(#filter2_f_450_9908)" style="mix-blend-mode:plus-lighter">
+<path d="M45.875 83C45.8728 83.0984 45.8331 83.1927 45.7629 83.2622C45.6928 83.3318 45.5983 83.3709 45.5 83.3709C45.4017 83.3709 45.3072 83.3318 45.2371 83.2622C45.1669 83.1927 45.1272 83.0984 45.125 83C45.125 83 45.125 83 45.125 83C45.0833 81.119 45.0437 79.2381 45.0062 77.3571C44.7547 64.7381 44.5969 52.1191 44.5328 39.5C44.5141 35.3142 43.6745 31.1433 42.0904 27.272C37.312 15.4179 25.7498 7.07363 13.1573 4.6879L13.2826 4.69922C9.40269 4.63959 5.52277 4.5711 1.64285 4.49375C-0.238098 4.45625 -2.11905 4.41667 -4 4.375C-4.09836 4.37281 -4.19269 4.33305 -4.26224 4.26293C-4.33179 4.19281 -4.37086 4.09834 -4.37086 4C-4.37086 3.90166 -4.33179 3.80719 -4.26224 3.73707C-4.19269 3.66695 -4.09836 3.62719 -4 3.625C-2.11905 3.58333 -0.238098 3.54375 1.64285 3.50625C5.52277 3.4289 9.40269 3.36041 13.2826 3.30078L13.4079 3.3121C26.4545 5.35251 38.872 13.9223 43.9419 26.5158C45.6225 30.6213 46.493 35.064 46.4672 39.5C46.4031 52.1191 46.2453 64.7381 45.9938 77.3571C45.9563 79.2381 45.9167 81.119 45.875 83Z" fill="url(#paint3_linear_450_9908)"/>
+</g>
+<g filter="url(#filter3_f_450_9908)">
+<path d="M-145 5.5H5C25.7107 5.5 42.5 22.2893 42.5 43V85.7949L31.5645 68.6934C32.7322 67.8814 33.5 66.5322 33.5 65V39C33.5 25.469 22.531 14.5 9 14.5H-149C-162.531 14.5 -173.5 25.469 -173.5 39V65C-173.5 67.0752 -172.095 68.8207 -170.185 69.3408L-182.5 87.835V43C-182.5 22.2893 -165.711 5.5 -145 5.5Z" stroke="url(#paint4_linear_450_9908)"/>
+</g>
+<g filter="url(#filter4_f_450_9908)">
+<path d="M29.8113 70.8396H10L13.1698 66.6721H29.0189V33.9283C29.0189 27.2605 22 23 17.5 18C24 22 30.3396 29.1656 31 33.9283V69.8084C30.7822 70.565 30.4874 70.762 29.8113 70.8396Z" fill="url(#paint5_linear_450_9908)"/>
+</g>
+<path d="M-182.28 92.7413C-183.047 92.7413 -183.529 91.9133 -183.149 91.2466L-169.537 67.3301H30.5369L44.1493 91.2466C44.5287 91.9133 44.0473 92.7413 43.2802 92.7413H-182.28Z" fill="url(#paint6_linear_450_9908)" stroke="#555555" stroke-width="1.2"/>
+<path d="M42.9991 90.2433L-179.886 90L-183 93.5C-183.082 93.7331 -180.552 95.0689 -179 95H40.0008C42.1124 94.5403 42.5008 94.5 44.0008 93.5V91.8716L42.9991 90.2433Z" fill="#555555"/>
+<g opacity="0.5" filter="url(#filter5_f_450_9908)" style="mix-blend-mode:plus-lighter">
+<path d="M-168 67.9077H29L40.5 89.8538H-179.5L-168 67.9077Z" stroke="url(#paint7_linear_450_9908)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter6_f_450_9908)">
+<path d="M-127 20.5H5.56958C18.0291 20.5 27 27.9321 27 40.142V63.5" stroke="url(#paint8_linear_450_9908)" stroke-width="2"/>
+</g>
+<line opacity="0.4" x1="-169.5" y1="66.5" x2="30.5" y2="66.5" stroke="url(#paint9_linear_450_9908)" stroke-linecap="round"/>
+<line x1="-180" y1="92.5" x2="41" y2="92.5" stroke="url(#paint10_linear_450_9908)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_9908" x="-184" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.875 0 0 0 0 0.875 0 0 0 0 0.875 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9908"/>
+</filter>
+<filter id="filter1_f_450_9908" x="8.41211" y="4.62695" width="37.5781" height="84.7432" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9908"/>
+</filter>
+<filter id="filter2_f_450_9908" x="-6.37109" y="1.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9908"/>
+</filter>
+<filter id="filter3_f_450_9908" x="-184" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9908"/>
+</filter>
+<filter id="filter4_f_450_9908" x="8" y="16" width="25" height="56.8398" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9908"/>
+</filter>
+<filter id="filter5_f_450_9908" x="-182.152" y="65.9077" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9908"/>
+</filter>
+<filter id="filter6_f_450_9908" x="-130.7" y="15.8" width="162.4" height="51.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_450_9908"/>
+</filter>
+<linearGradient id="paint0_linear_450_9908" x1="4" y1="6.11111" x2="47.5893" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0EEEA" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#F0EEEA"/>
+<stop offset="1" stop-color="#F0EEEA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9908" x1="-69.5" y1="16" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#606060"/>
+<stop offset="1" stop-color="#191919"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9908" x1="-69.5" y1="14" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="1" stop-color="#F3F3F3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9908" x1="6.49999" y1="3.12222" x2="49.5449" y2="46.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E7E5E0" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#E7E5E0"/>
+<stop offset="1" stop-color="#E7E5E0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9908" x1="-162" y1="6.97622" x2="42.5351" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop offset="0.495721" stop-color="#E4E4E4"/>
+<stop offset="1" stop-color="#8D8D8D"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9908" x1="31" y1="43.1561" x2="27.0377" y2="43.1561" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A453B"/>
+<stop offset="1" stop-color="#4A453B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9908" x1="-184" y1="80.0357" x2="-146.5" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#848484"/>
+<stop offset="1" stop-color="#777777"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9908" x1="-69.5" y1="67.9077" x2="-69.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F2F2"/>
+<stop offset="1" stop-color="#BCBCBC"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_9908" x1="14" y1="34" x2="25.4114" y2="27.5914" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3B3B3" stop-opacity="0"/>
+<stop offset="1" stop-color="#B3B3B3"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_9908" x1="-170" y1="67.5" x2="31" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1402"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_9908" x1="-180.5" y1="93.5" x2="41.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#555555" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#555555"/>
+<stop offset="0.9" stop-color="#555555"/>
+<stop offset="1" stop-color="#555555" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9908">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/왼쪽.svg
new file mode 100644
index 0000000..8cb7937
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/왼쪽.svg	
@@ -0,0 +1,125 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9858)">
+<path d="M40 1.5H196C217.263 1.5 234.5 18.737 234.5 40V86C234.5 90.1421 231.142 93.5 227 93.5H10C5.30558 93.5 1.5 89.6944 1.5 85V40C1.5 18.737 18.737 1.5 40 1.5Z" fill="#909090" stroke="#555555" stroke-width="3"/>
+<g filter="url(#filter0_i_450_9858)">
+<path d="M5 42C5 21.5655 21.5655 5 42 5H194C214.435 5 231 21.5655 231 42V90C231 92.2091 229.209 94 227 94H9C6.79086 94 5 92.2091 5 90V42Z" fill="#909090"/>
+</g>
+<path d="M194 4.5C214.711 4.5 231.5 21.2893 231.5 42V90C231.5 92.4853 229.485 94.5 227 94.5H9C6.51472 94.5 4.5 92.4853 4.5 90V42C4.5 21.2893 21.2893 4.5 42 4.5H194Z" stroke="#525252" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter1_f_450_9858)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 87C6.62675 87.0986 6.66645 87.1931 6.73662 87.2628C6.80678 87.3325 6.90143 87.3717 7 87.3717C7.09857 87.3717 7.19322 87.3325 7.26338 87.2628C7.33355 87.1931 7.37325 87.0986 7.375 87C7.41667 84.637 7.45625 82.2739 7.49375 79.9109C7.67725 68.348 7.81086 56.7851 7.89459 45.2222L7.89125 45.2995C8.7529 35.8075 11.5117 26.1616 18.0778 19.2957C23.6589 13.3418 31.4478 9.86908 39.4341 7.89575L39.2174 7.9216C52.1152 7.84105 65.013 7.69843 77.9109 7.49375C80.2739 7.45625 82.637 7.41667 85 7.375C85.0986 7.37325 85.1931 7.33355 85.2628 7.26338C85.3326 7.19322 85.3717 7.09857 85.3717 7C85.3717 6.90143 85.3326 6.80678 85.2628 6.73662C85.1931 6.66645 85.0986 6.62675 85 6.625C82.637 6.58333 80.2739 6.54375 77.9109 6.50625C65.013 6.30157 52.1152 6.15895 39.2174 6.0784L39.0007 6.10425C30.7911 8.02431 22.5734 11.5808 16.6229 17.9233C9.61946 25.2535 6.84506 35.4506 6.10875 45.1449L6.10541 45.2222C6.18914 56.7851 6.32275 68.348 6.50625 79.9109C6.54375 82.2739 6.58333 84.637 6.625 87Z" fill="url(#paint0_linear_450_9858)"/>
+</g>
+<mask id="path-5-inside-1_450_9858" fill="white">
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z"/>
+</mask>
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z" fill="url(#paint1_linear_450_9858)"/>
+<path d="M15 39C15 25.1929 26.1929 14 40 14H197C210.807 14 222 25.1929 222 39H218C218 27.402 208.598 18 197 18H40C28.402 18 19 27.402 19 39H15ZM19 39M220 72H17H220M21 72C17.6863 72 15 69.3137 15 66V39C15 25.1929 26.1929 14 40 14V18C28.402 18 19 27.402 19 39V68C19 70.2091 19.8954 72 21 72ZM197 14C210.807 14 222 25.1929 222 39V66C222 69.3137 219.314 72 216 72C217.105 72 218 70.2091 218 68V39C218 27.402 208.598 18 197 18V14Z" fill="#3A3939" mask="url(#path-5-inside-1_450_9858)"/>
+<mask id="path-7-inside-2_450_9858" fill="white">
+<path d="M15 38C15 24.7452 25.7452 14 39 14H198C211.255 14 222 24.7452 222 38V68C222 70.2091 220.209 72 218 72H19C16.7909 72 15 70.2091 15 68V38Z"/>
+</mask>
+<path d="M14 38C14 24.1929 25.1929 13 39 13H198C211.807 13 223 24.1929 223 38H221C221 25.2975 210.703 15 198 15H39C26.2975 15 16 25.2975 16 38H14ZM16 38M222 72H15H222M19 72C16.2386 72 14 69.7614 14 67V38C14 24.1929 25.1929 13 39 13V15C26.2975 15 16 25.2975 16 38V68C16 70.2091 17.3431 72 19 72ZM198 13C211.807 13 223 24.1929 223 38V67C223 69.7614 220.761 72 218 72C219.657 72 221 70.2091 221 68V38C221 25.2975 210.703 15 198 15V13Z" fill="url(#paint2_linear_450_9858)" mask="url(#path-7-inside-2_450_9858)"/>
+<g filter="url(#filter2_f_450_9858)">
+<path d="M21.9375 65.5C21.9473 65.6443 22.0078 65.7826 22.1123 65.8846C22.2168 65.9866 22.3558 66.0439 22.5 66.0439C22.6442 66.0439 22.7832 65.9866 22.8877 65.8846C22.9922 65.7826 23.0527 65.6443 23.0625 65.5C23.0625 65.5 23.0625 65.5 23.0625 65.5C23.125 64.5706 23.1844 63.6412 23.2406 62.7118C23.6585 55.8079 23.9039 48.9039 23.9768 42L23.9708 42.1337C24.1156 40.7127 24.2988 39.3046 24.5499 37.9233C25.5527 29.813 31.3226 23.5852 39.4095 21.4043C39.6541 21.3263 39.9028 21.2496 40.1556 21.1744L40 21.1922C40.6667 21.1506 41.3333 21.1073 42 21.0625C42.1443 21.0527 42.2826 20.9922 42.3846 20.8877C42.4866 20.7832 42.5439 20.6442 42.5439 20.5C42.5439 20.3558 42.4866 20.2168 42.3846 20.1123C42.2826 20.0078 42.1443 19.9473 42 19.9375C41.3333 19.8927 40.6667 19.8494 40 19.8078L39.8444 19.8256C39.5753 19.8708 39.3097 19.9183 39.0475 19.9679C30.5538 20.9146 22.4625 28.5392 21.5983 37.3865C21.3268 38.8804 21.1494 40.3766 21.0292 41.8663L21.0232 42C21.0961 48.9039 21.3415 55.8079 21.7594 62.7118C21.8156 63.6412 21.875 64.5706 21.9375 65.5Z" fill="url(#paint3_linear_450_9858)"/>
+</g>
+<g filter="url(#filter3_f_450_9858)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 86C6.62719 86.0984 6.66695 86.1927 6.73707 86.2622C6.80719 86.3318 6.90166 86.3709 7 86.3709C7.09834 86.3709 7.19281 86.3318 7.26293 86.2622C7.33305 86.1927 7.37281 86.0984 7.375 86C7.375 86 7.375 86 7.375 86C7.41667 84.119 7.45625 82.2381 7.49375 80.3571C7.74533 67.7381 7.90315 55.1191 7.96719 42.5C7.98589 38.3142 8.8255 34.1433 10.4096 30.272C15.188 18.4179 26.7502 10.0736 39.3427 7.6879L39.2174 7.69922C43.0973 7.63959 46.9772 7.5711 50.8571 7.49375C52.7381 7.45625 54.619 7.41667 56.5 7.375C56.5984 7.37281 56.6927 7.33305 56.7622 7.26293C56.8318 7.19281 56.8709 7.09834 56.8709 7C56.8709 6.90166 56.8318 6.80719 56.7622 6.73707C56.6927 6.66695 56.5984 6.62719 56.5 6.625C54.619 6.58333 52.7381 6.54375 50.8571 6.50625C46.9772 6.4289 43.0973 6.36041 39.2174 6.30078L39.0921 6.3121C26.0455 8.35251 13.628 16.9223 8.55807 29.5158C6.87747 33.6213 6.00697 38.064 6.03281 42.5C6.09685 55.1191 6.25467 67.7381 6.50625 80.3571C6.54375 82.2381 6.58333 84.119 6.625 86Z" fill="url(#paint4_linear_450_9858)"/>
+</g>
+<g filter="url(#filter4_f_450_9858)">
+<path d="M43 5.5H193C213.711 5.5 230.5 22.2893 230.5 43V85.7949L219.564 68.6934C220.732 67.8814 221.5 66.5322 221.5 65V39C221.5 25.469 210.531 14.5 197 14.5H39C25.469 14.5 14.5 25.469 14.5 39V65C14.5 67.0752 15.9051 68.8207 17.8154 69.3408L5.5 87.835V43C5.5 22.2893 22.2893 5.5 43 5.5Z" stroke="url(#paint5_linear_450_9858)"/>
+</g>
+<path d="M5.71979 92.7413C4.95273 92.7413 4.47127 91.9133 4.8507 91.2466L18.4632 67.3301H218.537L232.149 91.2466C232.529 91.9133 232.047 92.7413 231.28 92.7413H5.71979Z" fill="url(#paint6_linear_450_9858)" stroke="#555555" stroke-width="1.2"/>
+<path d="M7.22949 92.3823L5.24609 91.7212L14.833 75.5229L7.22949 92.3823Z" fill="#555555" stroke="#555555"/>
+<path d="M230.999 90.2433L8.11389 90L5.00001 93.5C4.91766 93.7331 7.44835 95.0689 9.00001 95H228.001C230.112 94.5403 230.501 94.5 232.001 93.5V91.8716L230.999 90.2433Z" fill="#555555"/>
+<g opacity="0.5" filter="url(#filter5_f_450_9858)" style="mix-blend-mode:plus-lighter">
+<path d="M20 67.9077H217L228.5 89.8538H8.5L20 67.9077Z" stroke="url(#paint7_linear_450_9858)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line opacity="0.4" x1="18.5" y1="66.5" x2="218.5" y2="66.5" stroke="url(#paint8_linear_450_9858)" stroke-linecap="round"/>
+<line x1="8" y1="92.5" x2="229" y2="92.5" stroke="url(#paint9_linear_450_9858)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_9858" x="4" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.875 0 0 0 0 0.875 0 0 0 0 0.875 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9858"/>
+</filter>
+<filter id="filter1_f_450_9858" x="4.10547" y="4.07861" width="83.2656" height="85.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9858"/>
+</filter>
+<filter id="filter2_f_450_9858" x="19.0234" y="17.8076" width="25.5195" height="50.2363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9858"/>
+</filter>
+<filter id="filter3_f_450_9858" x="4.0332" y="4.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9858"/>
+</filter>
+<filter id="filter4_f_450_9858" x="4" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9858"/>
+</filter>
+<filter id="filter5_f_450_9858" x="5.84766" y="65.9077" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9858"/>
+</filter>
+<linearGradient id="paint0_linear_450_9858" x1="46" y1="6.11111" x2="2.41074" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EBE9E2" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#EBE9E2"/>
+<stop offset="1" stop-color="#EBE9E2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9858" x1="118.5" y1="16" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#606060"/>
+<stop offset="1" stop-color="#191919"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9858" x1="118.5" y1="14" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="1" stop-color="#F3F3F3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9858" x1="45.5" y1="20" x2="21" y2="45.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3B3B3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B3B3B3"/>
+<stop offset="1" stop-color="#B3B3B3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9858" x1="46" y1="6.12222" x2="2.95507" y2="49.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3B3B3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B3B3B3"/>
+<stop offset="1" stop-color="#B3B3B3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9858" x1="26" y1="6.97622" x2="230.535" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop offset="0.0283891" stop-color="#E4E4E4"/>
+<stop offset="0.210823" stop-color="#8D8D8D"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9858" x1="4" y1="80.0357" x2="41.5" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#848484"/>
+<stop offset="1" stop-color="#777777"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9858" x1="118.5" y1="67.9077" x2="118.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F2F2"/>
+<stop offset="1" stop-color="#BCBCBC"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_9858" x1="18" y1="67.5" x2="219" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1402"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_9858" x1="7.5" y1="93.5" x2="229.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#555555" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#555555"/>
+<stop offset="0.9" stop-color="#555555"/>
+<stop offset="1" stop-color="#555555" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9858">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/중앙.svg
new file mode 100644
index 0000000..5c4a936
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/실사화/중앙.svg	
@@ -0,0 +1,90 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9882)">
+<g clip-path="url(#clip1_450_9882)">
+<path d="M-2560.11 1.5H2635.95C2657.21 1.50026 2674.45 18.7372 2674.45 40V86C2674.45 90.142 2671.09 93.4997 2666.95 93.5H-2590.11C-2594.8 93.5 -2598.61 89.6944 -2598.61 85V40C-2598.61 18.737 -2581.37 1.5 -2560.11 1.5Z" fill="#909090" stroke="#555555" stroke-width="3"/>
+<g filter="url(#filter0_i_450_9882)">
+<path d="M-2488.33 42C-2488.33 21.5655 -2471.76 5 -2451.33 5H2527.16C2547.6 5 2564.16 21.5655 2564.16 42V90C2564.16 92.2091 2562.37 94 2560.16 94H-2484.33C-2486.54 94 -2488.33 92.2091 -2488.33 90V42Z" fill="#909090"/>
+</g>
+<path d="M2527.16 4.5C2547.87 4.50026 2564.66 21.2895 2564.66 42V90C2564.66 92.4851 2562.65 94.4997 2560.16 94.5H-2484.33C-2486.81 94.5 -2488.83 92.4853 -2488.83 90V42C-2488.83 21.2893 -2472.04 4.5 -2451.33 4.5H2527.16Z" stroke="#525252" style="mix-blend-mode:multiply"/>
+<mask id="path-4-inside-1_450_9882" fill="white">
+<path d="M-2220.05 39C-2220.05 26.2975 -2209.75 16 -2197.05 16H2295.25C2307.95 16 2318.25 26.2975 2318.25 39V68C2318.25 70.2091 2316.46 72 2314.25 72H-2216.05C-2218.26 72 -2220.05 70.2091 -2220.05 68V39Z"/>
+</mask>
+<path d="M-2220.05 39C-2220.05 26.2975 -2209.75 16 -2197.05 16H2295.25C2307.95 16 2318.25 26.2975 2318.25 39V68C2318.25 70.2091 2316.46 72 2314.25 72H-2216.05C-2218.26 72 -2220.05 70.2091 -2220.05 68V39Z" fill="url(#paint0_linear_450_9882)"/>
+<path d="M-2222.05 39C-2222.05 25.1929 -2210.86 14 -2197.05 14H2295.25C2309.05 14 2320.25 25.1929 2320.25 39H2316.25C2316.25 27.402 2306.85 18 2295.25 18H-2197.05C-2208.65 18 -2218.05 27.402 -2218.05 39H-2222.05ZM-2218.05 39M2318.25 72H-2220.05H2318.25M-2216.05 72C-2219.36 72 -2222.05 69.3137 -2222.05 66V39C-2222.05 25.1929 -2210.86 14 -2197.05 14V18C-2208.65 18 -2218.05 27.402 -2218.05 39V68C-2218.05 70.2091 -2217.16 72 -2216.05 72ZM2295.25 14C2309.05 14 2320.25 25.1929 2320.25 39V66C2320.25 69.3137 2317.56 72 2314.25 72C2315.35 72 2316.25 70.2091 2316.25 68V39C2316.25 27.402 2306.85 18 2295.25 18V14Z" fill="#3A3939" mask="url(#path-4-inside-1_450_9882)"/>
+<mask id="path-6-inside-2_450_9882" fill="white">
+<path d="M-2264.76 38C-2264.76 24.7452 -2254.02 14 -2240.76 14H2338.96C2352.21 14 2362.96 24.7452 2362.96 38V68C2362.96 70.2091 2361.17 72 2358.96 72H-2260.76C-2262.97 72 -2264.76 70.2091 -2264.76 68V38Z"/>
+</mask>
+<path d="M-2265.76 38C-2265.76 24.1929 -2254.57 13 -2240.76 13H2338.96C2352.77 13 2363.96 24.1929 2363.96 38H2361.96C2361.96 25.2975 2351.66 15 2338.96 15H-2240.76C-2253.47 15 -2263.76 25.2975 -2263.76 38H-2265.76ZM-2263.76 38M2362.96 72H-2264.76H2362.96M-2260.76 72C-2263.53 72 -2265.76 69.7614 -2265.76 67V38C-2265.76 24.1929 -2254.57 13 -2240.76 13V15C-2253.47 15 -2263.76 25.2975 -2263.76 38V68C-2263.76 70.2091 -2262.42 72 -2260.76 72ZM2338.96 13C2352.77 13 2363.96 24.1929 2363.96 38V67C2363.96 69.7614 2361.72 72 2358.96 72C2360.62 72 2361.96 70.2091 2361.96 68V38C2361.96 25.2975 2351.66 15 2338.96 15V13Z" fill="url(#paint1_linear_450_9882)" mask="url(#path-6-inside-2_450_9882)"/>
+<g filter="url(#filter1_f_450_9882)">
+<path d="M-2450.32 5.5H2526.17C2546.88 5.5001 2563.67 22.2894 2563.67 43V87.9668C2563.67 89.8997 2562.1 91.4667 2560.17 91.4668H483.343L406.391 69.5H2336.6C2339.09 69.5 2341.1 67.4853 2341.1 65V39C2341.1 25.469 2330.13 14.5 2316.6 14.5H-2240.76C-2254.29 14.5 -2265.26 25.469 -2265.26 39V65C-2265.26 67.4853 -2263.25 69.5 -2260.76 69.5H-696.642L-776.782 91.4668H-2484.32C-2486.26 91.4667 -2487.82 89.8997 -2487.82 87.9668V43C-2487.82 22.613 -2471.56 6.02614 -2451.29 5.5127L-2450.32 5.5Z" stroke="url(#paint2_linear_450_9882)"/>
+</g>
+<path d="M-2510.68 92.7413L-2187.34 67.3301H2285.54L2608.88 92.7413H-2510.68Z" fill="url(#paint3_linear_450_9882)" stroke="#555555" stroke-width="1.2"/>
+<path d="M469.075 90.2433L-752.019 90L-769.079 93.5C-769.53 93.7331 -755.666 95.0689 -747.165 95H452.649L454.657 94.9205C464.499 94.5319 466.845 94.4392 474.563 93.5V91.8716L469.075 90.2433Z" fill="#555555"/>
+<g opacity="0.5" filter="url(#filter2_f_450_9882)" style="mix-blend-mode:plus-lighter">
+<path d="M-686.901 67.9077H392.38L455.384 89.8538H-749.904L-686.901 67.9077Z" stroke="url(#paint4_linear_450_9882)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line opacity="0.4" x1="-697.357" y1="66.5" x2="402.838" y2="66.5" stroke="url(#paint5_linear_450_9882)" stroke-linecap="round"/>
+<line x1="-754.883" y1="92.5" x2="460.362" y2="92.5" stroke="url(#paint6_linear_450_9882)" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_9882" x="-2489.33" y="4" width="5056.49" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.875 0 0 0 0 0.875 0 0 0 0 0.875 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9882"/>
+</filter>
+<filter id="filter1_f_450_9882" x="-2489.32" y="4" width="5054.49" height="88.9668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9882"/>
+</filter>
+<filter id="filter2_f_450_9882" x="-751.232" y="65.9077" width="1207.95" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9882"/>
+</filter>
+<linearGradient id="paint0_linear_450_9882" x1="49.0981" y1="16" x2="49.0981" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#606060"/>
+<stop offset="1" stop-color="#191919"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9882" x1="49.0977" y1="14" x2="49.0977" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F3F3F3"/>
+<stop offset="1" stop-color="#F3F3F3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9882" x1="-2018.84" y1="7.0412" x2="-1919.15" y2="710.128" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4E4E4"/>
+<stop offset="1" stop-color="#8D8D8D"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9882" x1="-2510.68" y1="80.0357" x2="-1672.32" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#848484"/>
+<stop offset="1" stop-color="#777777"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9882" x1="-147.26" y1="67.9077" x2="-147.26" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F2F2F2"/>
+<stop offset="1" stop-color="#BCBCBC"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9882" x1="-697.857" y1="67.5" x2="403.338" y2="67.5005" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1402"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9882" x1="-755.383" y1="93.5" x2="460.862" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#555555" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#555555"/>
+<stop offset="0.9" stop-color="#555555"/>
+<stop offset="1" stop-color="#555555" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9882">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_9882">
+<rect width="506" height="95" fill="white" transform="translate(-211)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/오른쪽.svg
new file mode 100644
index 0000000..753120d
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7564)">
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#555555" stroke="#555555" stroke-width="11"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#AAAAAA" stroke="#555555" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#777777" stroke="#555555" stroke-width="4"/>
+<mask id="path-4-inside-1_450_7564" fill="white">
+<path d="M-152.746 45.5801C-152.746 23.4887 -134.837 5.58008 -112.746 5.58008H-1.74609C19.793 5.58008 37.2539 23.041 37.2539 44.5801V88H-152.746V45.5801Z"/>
+</mask>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_7564)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_7564">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/왼쪽.svg
new file mode 100644
index 0000000..5b83847
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/왼쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7547)">
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#555555" stroke="#555555" stroke-width="11"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#AAAAAA" stroke="#555555" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#777777" stroke="#555555" stroke-width="4"/>
+<mask id="path-4-inside-1_450_7547" fill="white">
+<path d="M5.25391 45.5801C5.25391 23.4887 23.1625 5.58008 45.2539 5.58008H156.254C177.793 5.58008 195.254 23.041 195.254 44.5801V88H5.25391V45.5801Z"/>
+</mask>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_7547)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_7547">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/중앙.svg
new file mode 100644
index 0000000..b26efea
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/구도,면도, 이도/터널/위치도/중앙.svg	
@@ -0,0 +1,21 @@
+<svg width="124" height="93" viewBox="0 0 124 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7553)">
+<mask id="mask0_450_7553" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="329" height="93">
+<rect width="329" height="93" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_7553)">
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#555555" stroke="#555555" stroke-width="11"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#AAAAAA" stroke="#555555" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#777777" stroke="#555555" stroke-width="4"/>
+<mask id="path-5-inside-1_450_7553" fill="white">
+<path d="M-2336.8 45.5801C-2336.8 23.4887 -2318.89 5.58008 -2296.8 5.58008H1301.26C1322.8 5.58008 1340.26 23.041 1340.26 44.5801V88H-2336.8V45.5801Z"/>
+</mask>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#555555" mask="url(#path-5-inside-1_450_7553)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_450_7553">
+<rect width="124" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/오른쪽.svg
new file mode 100644
index 0000000..2a7d218
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/오른쪽.svg	
@@ -0,0 +1,184 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_10593)">
+<g filter="url(#filter0_i_450_10593)">
+<path d="M-134.404 29.9821C-134.404 22.9121 -128.673 17.1807 -121.603 17.1807H2.36871C9.43875 17.1807 15.1702 22.9121 15.1702 29.9821V65.6913H-134.404V29.9821Z" fill="url(#paint0_linear_450_10593)"/>
+<path d="M-134.404 29.9821C-134.404 22.9121 -128.673 17.1807 -121.603 17.1807H2.36871C9.43875 17.1807 15.1702 22.9121 15.1702 29.9821V65.6913H-134.404V29.9821Z" fill="url(#paint1_linear_450_10593)"/>
+</g>
+<path d="M-121.603 17.7139H2.36914C9.1444 17.7141 14.6367 23.2071 14.6367 29.9824V65.1582H-133.871V29.9824C-133.871 23.207 -128.378 17.7139 -121.603 17.7139Z" stroke="#0E1E00" stroke-width="1.06678"/>
+<path d="M34.2832 66.2539C40.1749 66.2539 44.9511 71.0302 44.9512 76.9219V93.9707H-164.263V76.9219C-164.263 71.0303 -159.486 66.254 -153.595 66.2539H34.2832Z" fill="#555853" stroke="#565A51" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_10593)">
+<path d="M-162.129 76.922C-162.129 72.2086 -158.308 68.3877 -153.595 68.3877H34.2833C38.9966 68.3877 42.8176 72.2086 42.8176 76.922V90.7699C42.8176 91.359 42.34 91.8366 41.7508 91.8366H-161.062C-161.651 91.8366 -162.129 91.359 -162.129 90.7699V76.922Z" fill="#747870"/>
+</g>
+<path d="M34.2832 67.8545C39.2911 67.8545 43.3505 71.914 43.3506 76.9219V90.7695C43.3506 91.6532 42.6346 92.37 41.751 92.3701H-161.062C-161.946 92.3699 -162.662 91.6532 -162.662 90.7695V76.9219C-162.662 71.914 -158.603 67.8545 -153.595 67.8545H34.2832Z" stroke="#3B3C39" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_10593)" style="mix-blend-mode:plus-lighter">
+<path d="M34.9912 69.8745C38.8207 69.8745 41.9246 72.9787 41.9248 76.8081V92.2769H-160.764V76.8081C-160.763 72.9788 -157.659 69.8747 -153.83 69.8745H34.9912Z" stroke="url(#paint2_linear_450_10593)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_10593" maskUnits="userSpaceOnUse" x="-169.498" y="-0.639648" width="219" height="68" fill="black">
+<rect fill="white" x="-169.498" y="-0.639648" width="219" height="68"/>
+<path d="M45.1846 11.8717C45.1846 12.4609 44.7058 12.9351 44.1176 12.97C34.8169 13.5217 27.4445 21.2386 27.4443 30.6777V61.3961C27.4443 61.9853 26.9667 62.4629 26.3775 62.4629H20.0766C19.4874 62.4629 19.0098 61.9853 19.0098 61.3961V30.6777C19.0096 20.8811 11.0683 12.9398 1.27199 12.9385C1.27065 12.9385 1.26953 12.9374 1.26953 12.936C1.26953 12.9347 1.26843 12.9336 1.26709 12.9336H-120.557C-120.558 12.9336 -120.56 12.9347 -120.56 12.936C-120.56 12.9374 -120.561 12.9385 -120.562 12.9385C-130.358 12.9398 -138.3 20.882 -138.3 30.6787V61.3961C-138.3 61.9853 -138.777 62.4629 -139.367 62.4629H-145.668C-146.257 62.4629 -146.734 61.9853 -146.734 61.3961V30.6787C-146.734 21.2394 -154.107 13.5218 -163.408 12.97C-163.996 12.9351 -164.475 12.4609 -164.475 11.8717V7.86171C-164.475 7.27254 -163.997 6.79492 -163.408 6.79492H44.1178C44.707 6.79492 45.1846 7.27254 45.1846 7.86171V11.8717ZM45.1875 5.11182C45.1875 5.52684 44.8511 5.86328 44.436 5.86328H-163.747C-164.162 5.86328 -164.498 5.52684 -164.498 5.11182C-164.498 4.69679 -164.162 4.36035 -163.747 4.36035H44.436C44.8511 4.36035 45.1875 4.69679 45.1875 5.11182Z"/>
+</mask>
+<path d="M45.1846 11.8717C45.1846 12.4609 44.7058 12.9351 44.1176 12.97C34.8169 13.5217 27.4445 21.2386 27.4443 30.6777V61.3961C27.4443 61.9853 26.9667 62.4629 26.3775 62.4629H20.0766C19.4874 62.4629 19.0098 61.9853 19.0098 61.3961V30.6777C19.0096 20.8811 11.0683 12.9398 1.27199 12.9385C1.27065 12.9385 1.26953 12.9374 1.26953 12.936C1.26953 12.9347 1.26843 12.9336 1.26709 12.9336H-120.557C-120.558 12.9336 -120.56 12.9347 -120.56 12.936C-120.56 12.9374 -120.561 12.9385 -120.562 12.9385C-130.358 12.9398 -138.3 20.882 -138.3 30.6787V61.3961C-138.3 61.9853 -138.777 62.4629 -139.367 62.4629H-145.668C-146.257 62.4629 -146.734 61.9853 -146.734 61.3961V30.6787C-146.734 21.2394 -154.107 13.5218 -163.408 12.97C-163.996 12.9351 -164.475 12.4609 -164.475 11.8717V7.86171C-164.475 7.27254 -163.997 6.79492 -163.408 6.79492H44.1178C44.707 6.79492 45.1846 7.27254 45.1846 7.86171V11.8717ZM45.1875 5.11182C45.1875 5.52684 44.8511 5.86328 44.436 5.86328H-163.747C-164.162 5.86328 -164.498 5.52684 -164.498 5.11182C-164.498 4.69679 -164.162 4.36035 -163.747 4.36035H44.436C44.8511 4.36035 45.1875 4.69679 45.1875 5.11182Z" fill="url(#paint3_linear_450_10593)"/>
+<path d="M27.4443 30.6777L23.1772 30.6777V30.6777H27.4443ZM19.0098 30.6777H23.2769V30.6777L19.0098 30.6777ZM-120.562 12.9385L-120.563 8.67134V8.67134L-120.562 12.9385ZM-163.408 12.97L-163.66 17.2297L-163.408 12.97ZM1.27199 12.9385L1.27141 17.2056L1.27199 12.9385ZM44.1176 12.97L43.865 8.71038L44.1176 12.97ZM44.1176 12.97L43.865 8.71038C32.3234 9.39498 23.1774 18.9663 23.1772 30.6777L27.4443 30.6777L31.7115 30.6778C31.7116 23.5108 37.3105 17.6484 44.3703 17.2297L44.1176 12.97ZM27.4443 30.6777H23.1772V61.3961H27.4443H31.7115V30.6777H27.4443ZM26.3775 62.4629V58.1958H20.0766V62.4629V66.73H26.3775V62.4629ZM19.0098 61.3961H23.2769V30.6777H19.0098H14.7426V61.3961H19.0098ZM19.0098 30.6777L23.2769 30.6777C23.2767 18.5244 13.4251 8.67298 1.27257 8.67134L1.27199 12.9385L1.27141 17.2056C8.71155 17.2066 14.7425 23.2379 14.7426 30.6778L19.0098 30.6777ZM1.26709 12.9336V8.66645H-120.557V12.9336V17.2007H1.26709V12.9336ZM-120.562 12.9385L-120.563 8.67134C-132.715 8.67298 -142.567 18.5255 -142.567 30.6787H-138.3H-134.033C-134.033 23.2385 -128.001 17.2066 -120.561 17.2056L-120.562 12.9385ZM-138.3 30.6787H-142.567V61.3961H-138.3H-134.033V30.6787H-138.3ZM-139.367 62.4629V58.1958H-145.668V62.4629V66.73H-139.367V62.4629ZM-146.734 61.3961H-142.467V30.6787H-146.734H-151.002V61.3961H-146.734ZM-146.734 30.6787H-142.467C-142.467 18.9674 -151.613 9.39505 -163.155 8.71038L-163.408 12.97L-163.66 17.2297C-156.601 17.6485 -151.002 23.5114 -151.002 30.6787H-146.734ZM-164.475 11.8717H-160.207V7.86171H-164.475H-168.742V11.8717H-164.475ZM-163.408 6.79492V11.0621H44.1178V6.79492V2.52778H-163.408V6.79492ZM45.1846 7.86171H40.9174V11.8717H45.1846H49.4517V7.86171H45.1846ZM44.436 5.86328V1.59614H-163.747V5.86328V10.1304H44.436V5.86328ZM-163.747 4.36035V8.62749H44.436V4.36035V0.0932121H-163.747V4.36035ZM44.436 4.36035V8.62749C42.4944 8.62749 40.9204 7.0535 40.9204 5.11182H45.1875H49.4546C49.4546 2.34009 47.2077 0.0932121 44.436 0.0932121V4.36035ZM-164.498 5.11182H-160.231C-160.231 7.05347 -161.805 8.62749 -163.747 8.62749V4.36035V0.0932121C-166.518 0.0932121 -168.765 2.34012 -168.765 5.11182H-164.498ZM-163.747 5.86328V1.59614C-161.805 1.59614 -160.231 3.17013 -160.231 5.11182H-164.498H-168.765C-168.765 7.88354 -166.518 10.1304 -163.747 10.1304V5.86328ZM44.436 5.86328V10.1304C47.2077 10.1304 49.4546 7.88351 49.4546 5.11182H45.1875H40.9204C40.9204 3.17016 42.4944 1.59614 44.436 1.59614V5.86328ZM44.1178 6.79492V11.0621C42.3503 11.0621 40.9174 9.62924 40.9174 7.86171H45.1846H49.4517C49.4517 4.91584 47.0636 2.52778 44.1178 2.52778V6.79492ZM-138.3 61.3961H-142.567C-142.567 59.6286 -141.134 58.1958 -139.367 58.1958V62.4629V66.73C-136.421 66.73 -134.033 64.342 -134.033 61.3961H-138.3ZM-120.56 12.936H-124.827C-124.827 10.5484 -122.885 8.67165 -120.563 8.67134L-120.562 12.9385L-120.561 17.2056C-118.236 17.2053 -116.292 15.3263 -116.292 12.936H-120.56ZM-120.557 12.9336V8.66645C-122.919 8.66645 -124.827 10.5815 -124.827 12.936H-120.56H-116.292C-116.292 15.2879 -118.198 17.2007 -120.557 17.2007V12.9336ZM1.26953 12.936H5.53667C5.53667 10.578 3.62511 8.66645 1.26709 8.66645V12.9336V17.2007C-1.08824 17.2007 -2.9976 15.2914 -2.9976 12.936H1.26953ZM-164.475 7.86171H-160.207C-160.207 9.62921 -161.64 11.0621 -163.408 11.0621V6.79492V2.52778C-166.354 2.52778 -168.742 4.91586 -168.742 7.86171H-164.475ZM20.0766 62.4629V58.1958C21.8441 58.1958 23.2769 59.6286 23.2769 61.3961H19.0098H14.7426C14.7426 64.3419 17.1307 66.73 20.0766 66.73V62.4629ZM-163.408 12.97L-163.155 8.71038C-161.654 8.79941 -160.207 10.04 -160.207 11.8717H-164.475H-168.742C-168.742 14.8817 -166.337 17.0709 -163.66 17.2297L-163.408 12.97ZM27.4443 61.3961H23.1772C23.1772 59.6286 24.61 58.1958 26.3775 58.1958V62.4629V66.73C29.3234 66.73 31.7115 64.342 31.7115 61.3961H27.4443ZM1.27199 12.9385L1.27257 8.67134C3.5938 8.67165 5.53667 10.5472 5.53667 12.936H1.26953H-2.9976C-2.9976 15.3276 -1.05252 17.2053 1.27141 17.2056L1.27199 12.9385ZM-145.668 62.4629V58.1958C-143.9 58.1958 -142.467 59.6286 -142.467 61.3961H-146.734H-151.002C-151.002 64.3419 -148.613 66.73 -145.668 66.73V62.4629ZM44.1176 12.97L44.3703 17.2297C47.0473 17.0709 49.4517 14.8817 49.4517 11.8717H45.1846H40.9174C40.9174 10.04 42.3642 8.7994 43.865 8.71038L44.1176 12.97Z" fill="#565A51" mask="url(#path-7-outside-1_450_10593)"/>
+<mask id="path-9-outside-2_450_10593" maskUnits="userSpaceOnUse" x="-166.498" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="-166.498" y="2.36035" width="213" height="63"/>
+<path d="M45.1846 12.9385C35.3871 12.9385 27.4445 20.8803 27.4443 30.6777V63.4736H19.0098V30.6777C19.0096 20.8803 11.067 12.9385 1.26953 12.9385V12.9336H-120.56V12.9385C-130.357 12.9385 -138.3 20.8812 -138.3 30.6787V63.4736H-146.734V30.6787C-146.734 20.8812 -154.677 12.9385 -164.475 12.9385V6.79492H45.1846V12.9385ZM45.1875 5.86328H-164.498V4.36035H45.1875V5.86328Z"/>
+</mask>
+<path d="M45.1846 12.9385V14.0053C45.7737 14.0053 46.2514 13.5276 46.2514 12.9385H45.1846ZM27.4443 30.6777L26.3775 30.6777V30.6777H27.4443ZM27.4443 63.4736V64.5404C28.0335 64.5404 28.5111 64.0628 28.5111 63.4736H27.4443ZM19.0098 63.4736H17.943C17.943 64.0628 18.4206 64.5404 19.0098 64.5404V63.4736ZM19.0098 30.6777H20.0766V30.6777L19.0098 30.6777ZM1.26953 12.9385H0.202744C0.202744 13.5276 0.680359 14.0053 1.26953 14.0053V12.9385ZM1.26953 12.9336H2.33632C2.33632 12.3444 1.8587 11.8668 1.26953 11.8668V12.9336ZM-120.56 12.9336V11.8668C-121.149 11.8668 -121.626 12.3444 -121.626 12.9336H-120.56ZM-120.56 12.9385V14.0053C-119.97 14.0053 -119.493 13.5276 -119.493 12.9385H-120.56ZM-138.3 63.4736V64.5404C-137.711 64.5404 -137.233 64.0628 -137.233 63.4736H-138.3ZM-146.734 63.4736H-147.801C-147.801 64.0628 -147.324 64.5404 -146.734 64.5404V63.4736ZM-164.475 12.9385H-165.541C-165.541 13.5276 -165.064 14.0053 -164.475 14.0053V12.9385ZM-164.475 6.79492V5.72814C-165.064 5.72814 -165.541 6.20575 -165.541 6.79492H-164.475ZM45.1846 6.79492H46.2514C46.2514 6.20575 45.7737 5.72814 45.1846 5.72814V6.79492ZM45.1875 5.86328V6.93007C45.7767 6.93007 46.2543 6.45245 46.2543 5.86328H45.1875ZM-164.498 5.86328H-165.565C-165.565 6.45245 -165.087 6.93007 -164.498 6.93007V5.86328ZM-164.498 4.36035V3.29357C-165.087 3.29357 -165.565 3.77118 -165.565 4.36035H-164.498ZM45.1875 4.36035H46.2543C46.2543 3.77118 45.7767 3.29357 45.1875 3.29357V4.36035ZM45.1846 12.9385V11.8717C34.798 11.8717 26.3777 20.2911 26.3775 30.6777L27.4443 30.6777L28.5111 30.6778C28.5113 21.4696 35.9762 14.0053 45.1846 14.0053V12.9385ZM27.4443 30.6777H26.3775V63.4736H27.4443H28.5111V30.6777H27.4443ZM27.4443 63.4736V62.4068H19.0098V63.4736V64.5404H27.4443V63.4736ZM19.0098 63.4736H20.0766V30.6777H19.0098H17.943V63.4736H19.0098ZM19.0098 30.6777L20.0766 30.6777C20.0764 20.2911 11.6561 11.8717 1.26953 11.8717V12.9385V14.0053C10.4779 14.0053 17.9428 21.4696 17.943 30.6777L19.0098 30.6777ZM1.26953 12.9385H2.33632V12.9336H1.26953H0.202744V12.9385H1.26953ZM1.26953 12.9336V11.8668H-120.56V12.9336V14.0004H1.26953V12.9336ZM-120.56 12.9336H-121.626V12.9385H-120.56H-119.493V12.9336H-120.56ZM-120.56 12.9385V11.8717C-130.946 11.8717 -139.367 20.292 -139.367 30.6787H-138.3H-137.233C-137.233 21.4703 -129.768 14.0053 -120.56 14.0053V12.9385ZM-138.3 30.6787H-139.367V63.4736H-138.3H-137.233V30.6787H-138.3ZM-138.3 63.4736V62.4068H-146.734V63.4736V64.5404H-138.3V63.4736ZM-146.734 63.4736H-145.668V30.6787H-146.734H-147.801V63.4736H-146.734ZM-146.734 30.6787H-145.668C-145.668 20.292 -154.088 11.8717 -164.475 11.8717V12.9385V14.0053C-155.266 14.0053 -147.801 21.4704 -147.801 30.6787H-146.734ZM-164.475 12.9385H-163.408V6.79492H-164.475H-165.541V12.9385H-164.475ZM-164.475 6.79492V7.86171H45.1846V6.79492V5.72814H-164.475V6.79492ZM45.1846 6.79492H44.1178V12.9385H45.1846H46.2514V6.79492H45.1846ZM45.1875 5.86328V4.7965H-164.498V5.86328V6.93007H45.1875V5.86328ZM-164.498 5.86328H-163.431V4.36035H-164.498H-165.565V5.86328H-164.498ZM-164.498 4.36035V5.42714H45.1875V4.36035V3.29357H-164.498V4.36035ZM45.1875 4.36035H44.1207V5.86328H45.1875H46.2543V4.36035H45.1875Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_10593)"/>
+<g filter="url(#filter3_f_450_10593)" style="mix-blend-mode:plus-lighter">
+<path d="M33.9238 65.6074C40.1101 65.6074 45.125 70.6223 45.125 76.8086V94.4102H-165.031V76.8086C-165.031 70.6223 -160.016 65.6074 -153.83 65.6074H33.9238Z" stroke="url(#paint4_linear_450_10593)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_10593)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_10593" maskUnits="userSpaceOnUse" x="-166.498" y="3.33398" width="212" height="61" fill="black">
+<rect fill="white" x="-166.498" y="3.33398" width="212" height="61"/>
+<path d="M43.5273 5.33398V11.4834C33.8064 11.4835 25.926 19.364 25.9258 29.085V62.9395H17.5566V29.085C17.5565 19.7567 10.3001 12.1251 1.12402 11.5234H-122.095C-131.271 12.1252 -138.527 19.7568 -138.527 29.085V62.9395H-146.896V29.085C-146.897 19.3639 -154.777 11.4834 -164.498 11.4834V5.33398H43.5273Z"/>
+</mask>
+<path d="M43.5273 5.33398H44.5941V4.2672H43.5273V5.33398ZM43.5273 11.4834L43.5274 12.5502L44.5941 12.5502V11.4834H43.5273ZM25.9258 29.085L24.859 29.0849V29.085H25.9258ZM25.9258 62.9395V64.0062H26.9926V62.9395H25.9258ZM17.5566 62.9395H16.4899V64.0062H17.5566V62.9395ZM17.5566 29.085H18.6234V29.0849L17.5566 29.085ZM1.12402 11.5234L1.19382 10.4589L1.15897 10.4567H1.12402V11.5234ZM-122.095 11.5234V10.4567H-122.13L-122.165 10.4589L-122.095 11.5234ZM-138.527 29.085L-139.594 29.0849V29.085H-138.527ZM-138.527 62.9395V64.0062H-137.461V62.9395H-138.527ZM-146.896 62.9395H-147.963V64.0062H-146.896V62.9395ZM-146.896 29.085H-145.83L-145.83 29.0849L-146.896 29.085ZM-164.498 11.4834H-165.565V12.5502H-164.498L-164.498 11.4834ZM-164.498 5.33398V4.2672H-165.565V5.33398H-164.498ZM43.5273 5.33398H42.4606V11.4834H43.5273H44.5941V5.33398H43.5273ZM43.5273 11.4834L43.5273 10.4166C33.2172 10.4167 24.8592 18.7748 24.859 29.0849L25.9258 29.085L26.9926 29.085C26.9927 19.9532 34.3955 12.5503 43.5274 12.5502L43.5273 11.4834ZM25.9258 29.085H24.859V62.9395H25.9258H26.9926V29.085H25.9258ZM25.9258 62.9395V61.8727H17.5566V62.9395V64.0062H25.9258V62.9395ZM17.5566 62.9395H18.6234V29.085H17.5566H16.4899V62.9395H17.5566ZM17.5566 29.085L18.6234 29.0849C18.6233 19.1908 10.9269 11.0971 1.19382 10.4589L1.12402 11.5234L1.05423 12.5879C9.67326 13.1531 16.4897 20.3226 16.4899 29.085L17.5566 29.085ZM1.12402 11.5234V10.4567H-122.095V11.5234V12.5902H1.12402V11.5234ZM-122.095 11.5234L-122.165 10.4589C-131.897 11.0973 -139.594 19.1909 -139.594 29.0849L-138.527 29.085L-137.461 29.085C-137.46 20.3227 -130.644 13.1532 -122.025 12.5879L-122.095 11.5234ZM-138.527 29.085H-139.594V62.9395H-138.527H-137.461V29.085H-138.527ZM-138.527 62.9395V61.8727H-146.896V62.9395V64.0062H-138.527V62.9395ZM-146.896 62.9395H-145.83V29.085H-146.896H-147.963V62.9395H-146.896ZM-146.896 29.085L-145.83 29.0849C-145.83 18.7747 -154.188 10.4166 -164.498 10.4166L-164.498 11.4834L-164.498 12.5502C-155.366 12.5502 -147.963 19.9531 -147.963 29.085L-146.896 29.085ZM-164.498 11.4834H-163.431V5.33398H-164.498H-165.565V11.4834H-164.498ZM-164.498 5.33398V6.40077H43.5273V5.33398V4.2672H-164.498V5.33398Z" fill="url(#paint5_linear_450_10593)" mask="url(#path-12-outside-3_450_10593)"/>
+</g>
+<g filter="url(#filter5_f_450_10593)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_10593" maskUnits="userSpaceOnUse" x="-165.43" y="3.33398" width="211" height="61" fill="black">
+<rect fill="white" x="-165.43" y="3.33398" width="211" height="61"/>
+<path d="M42.4615 5.33398C43.0507 5.33398 43.5283 5.8116 43.5283 6.40077V10.4166C43.5283 11.0058 43.0495 11.48 42.4614 11.5154C33.2871 12.067 26.0176 19.6822 26.0176 28.9951V61.8727C26.0176 62.4618 25.54 62.9395 24.9508 62.9395H18.7582C18.169 62.9395 17.6914 62.4618 17.6914 61.8727V28.9951C17.6914 19.7199 10.4801 12.1297 1.3584 11.5234H-121.259C-130.381 12.1294 -137.592 19.7197 -137.592 28.9951V61.8727C-137.592 62.4618 -138.069 62.9395 -138.659 62.9395H-144.851C-145.44 62.9395 -145.918 62.4618 -145.918 61.8727V28.9951C-145.918 19.682 -153.188 12.0668 -162.363 11.5154C-162.951 11.48 -163.43 11.0058 -163.43 10.4166V6.40077C-163.43 5.8116 -162.952 5.33398 -162.363 5.33398H42.4615Z"/>
+</mask>
+<path d="M1.3584 11.5234L1.42915 10.459L1.39381 10.4567H1.3584V11.5234ZM-121.259 11.5234V10.4567H-121.294L-121.33 10.459L-121.259 11.5234ZM-162.363 11.5154L-162.299 10.4505L-162.363 11.5154ZM43.5283 6.40077H42.4615V10.4166H43.5283H44.5951V6.40077H43.5283ZM42.4614 11.5154L42.3974 10.4505C32.6632 11.0358 24.9508 19.1145 24.9508 28.9951H26.0176H27.0844C27.0844 20.2498 33.911 13.0982 42.5254 12.5803L42.4614 11.5154ZM26.0176 28.9951H24.9508V61.8727H26.0176H27.0844V28.9951H26.0176ZM24.9508 62.9395V61.8727H18.7582V62.9395V64.0062H24.9508V62.9395ZM17.6914 61.8727H18.7582V28.9951H17.6914H16.6246V61.8727H17.6914ZM17.6914 28.9951H18.7582C18.7582 19.1544 11.1075 11.1023 1.42915 10.459L1.3584 11.5234L1.28764 12.5879C9.85269 13.1572 16.6246 20.2855 16.6246 28.9951H17.6914ZM1.3584 11.5234V10.4567H-121.259V11.5234V12.5902H1.3584V11.5234ZM-121.259 11.5234L-121.33 10.459C-131.008 11.102 -138.659 19.1542 -138.659 28.9951H-137.592H-136.525C-136.525 20.2852 -129.753 13.1569 -121.188 12.5879L-121.259 11.5234ZM-137.592 28.9951H-138.659V61.8727H-137.592H-136.525V28.9951H-137.592ZM-138.659 62.9395V61.8727H-144.851V62.9395V64.0062H-138.659V62.9395ZM-145.918 61.8727H-144.851V28.9951H-145.918H-146.985V61.8727H-145.918ZM-145.918 28.9951H-144.851C-144.851 19.1143 -152.564 11.0356 -162.299 10.4505L-162.363 11.5154L-162.427 12.5802C-153.812 13.098 -146.985 20.2498 -146.985 28.9951H-145.918ZM-163.43 10.4166H-162.363V6.40077H-163.43H-164.496V10.4166H-163.43ZM-162.363 5.33398V6.40077H42.4615V5.33398V4.2672H-162.363V5.33398ZM-163.43 6.40077H-162.363V6.40077V5.33398V4.2672C-163.541 4.2672 -164.496 5.22243 -164.496 6.40077H-163.43ZM-144.851 62.9395V61.8727H-144.851H-145.918H-146.985C-146.985 63.051 -146.03 64.0062 -144.851 64.0062V62.9395ZM-137.592 61.8727H-138.659H-138.659V62.9395V64.0062C-137.48 64.0062 -136.525 63.051 -136.525 61.8727H-137.592ZM18.7582 62.9395V61.8727V61.8727H17.6914H16.6246C16.6246 63.051 17.5798 64.0062 18.7582 64.0062V62.9395ZM26.0176 61.8727H24.9508V61.8727V62.9395V64.0062C26.1291 64.0062 27.0844 63.051 27.0844 61.8727H26.0176ZM-162.363 11.5154L-162.299 10.4505C-162.324 10.449 -162.344 10.4383 -162.356 10.426C-162.361 10.4204 -162.363 10.4166 -162.363 10.4163C-162.363 10.4162 -162.363 10.4165 -162.363 10.4171C-162.363 10.4178 -162.363 10.4178 -162.363 10.4166H-163.43H-164.496C-164.496 11.6112 -163.536 12.5136 -162.427 12.5802L-162.363 11.5154ZM43.5283 10.4166H42.4615C42.4615 10.4178 42.4614 10.4178 42.4616 10.4172C42.4617 10.4166 42.4618 10.4162 42.4618 10.4163C42.4617 10.4166 42.46 10.4204 42.4545 10.426C42.4424 10.4383 42.4223 10.449 42.3974 10.4505L42.4614 11.5154L42.5254 12.5803C43.6348 12.5136 44.5951 11.6112 44.5951 10.4166H43.5283ZM43.5283 6.40077H44.5951C44.5951 5.22243 43.6399 4.2672 42.4615 4.2672V5.33398V6.40077V6.40077H43.5283Z" fill="url(#paint6_linear_450_10593)" mask="url(#path-14-outside-4_450_10593)"/>
+</g>
+<g filter="url(#filter6_f_450_10593)">
+<path d="M-166.631 13.8684V4.26736C-166.631 3.08902 -165.676 2.13379 -164.497 2.13379H45.6593C46.8377 2.13379 47.7929 3.08902 47.7929 4.26736V13.8684" stroke="url(#paint7_linear_450_10593)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_10593)">
+<path d="M19.5229 63.4733V29.3361C19.5229 22.9354 13.6556 12.2676 0.320778 12.2676C-11.2005 12.2676 -34.1719 12.2676 -45.0176 12.2676" stroke="url(#paint8_linear_450_10593)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter8_f_450_10593)">
+<path d="M-135.695 62.9403V26.9541C-135.34 22.5921 -131.962 15.4683 -121.827 13.8682H-0.747028C8.85404 14.4016 15.7881 18.2301 15.7881 31.316V62.9403" stroke="url(#paint9_linear_450_10593)" stroke-width="1.06678"/>
+</g>
+<path d="M-150.574 63.6704L30.33 63.6704" stroke="url(#paint10_linear_450_10593)" stroke-width="1.06678"/>
+<g filter="url(#filter9_f_450_10593)">
+<path d="M20.0586 45.8716V62.4067H26.9927V45.8716" stroke="url(#paint11_linear_450_10593)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_10593" x="-134.404" y="17.1807" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10593"/>
+</filter>
+<filter id="filter1_ii_450_10593" x="-163.195" y="66.254" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.520976 0 0 0 0 0.528846 0 0 0 0 0.51232 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10593"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.27635 0 0 0 0 0.293269 0 0 0 0 0.26225 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_10593" result="effect2_innerShadow_450_10593"/>
+</filter>
+<filter id="filter2_f_450_10593" x="-162.364" y="68.274" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<filter id="filter3_f_450_10593" x="-166.631" y="64.0069" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<filter id="filter4_f_450_10593" x="-166.631" y="3.2003" width="212.292" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<filter id="filter5_f_450_10593" x="-165.563" y="3.2003" width="211.225" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<filter id="filter6_f_450_10593" x="-168.231" y="0.533801" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<filter id="filter7_f_450_10593" x="-46.0844" y="10.6676" width="67.2078" height="53.8723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<filter id="filter8_f_450_10593" x="-137.295" y="12.2682" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<filter id="filter9_f_450_10593" x="18.4586" y="44.8048" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10593"/>
+</filter>
+<linearGradient id="paint0_linear_450_10593" x1="-59.6171" y1="17.1807" x2="-59.6171" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A2A2"/>
+<stop offset="0.05" stop-color="#505050"/>
+<stop offset="1" stop-color="#282827"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_10593" x1="-137.075" y1="34.5812" x2="15.1702" y2="34.5812" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5549"/>
+<stop offset="0.077962" stop-color="#484E43" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#484E43" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#4F5549"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_10593" x1="-59.4193" y1="70.4077" x2="-59.4193" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B7C3AD"/>
+<stop offset="1" stop-color="#B7C3AD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_10593" x1="-164.498" y1="33.4116" x2="45.1875" y2="33.4116" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A69E"/>
+<stop offset="0.144231" stop-color="#A2A69E"/>
+<stop offset="0.889423" stop-color="#A2A69E"/>
+<stop offset="0.961538" stop-color="#959990"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_10593" x1="-59.9531" y1="66.1406" x2="-59.9531" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_10593" x1="-60.4854" y1="5.33398" x2="-60.4854" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B7C3AD"/>
+<stop offset="1" stop-color="#B7C3AD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_10593" x1="-150.163" y1="12.2671" x2="-94.3685" y2="33.9419" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CED0CC" stop-opacity="0.905882"/>
+<stop offset="1" stop-color="#CED0CC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_10593" x1="-59.419" y1="2.13379" x2="-59.419" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE" stop-opacity="0.478431"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_10593" x1="12.5888" y1="16.0013" x2="3.79134" y2="16.6731" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CED0CC"/>
+<stop offset="1" stop-color="#CED0CC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_10593" x1="-59.9536" y1="13.8682" x2="-59.9536" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_10593" x1="30.33" y1="63.6704" x2="-150.574" y2="63.6704" gradientUnits="userSpaceOnUse">
+<stop stop-color="#232521" stop-opacity="0"/>
+<stop offset="0.100962" stop-color="#232521"/>
+<stop offset="0.9375" stop-color="#232521"/>
+<stop offset="1" stop-color="#232521" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_10593" x1="22.1922" y1="61.8734" x2="21.6588" y2="36.2705" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CED0CC"/>
+<stop offset="1" stop-color="#CED0CC" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_10593">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/왼쪽.svg
new file mode 100644
index 0000000..73bfe27
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/왼쪽.svg	
@@ -0,0 +1,172 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_10518)">
+<g filter="url(#filter0_i_450_10518)">
+<path d="M34.3613 29.9821C34.3613 22.9121 40.0927 17.1807 47.1627 17.1807H171.134C178.204 17.1807 183.936 22.9121 183.936 29.9821V65.6913H34.3613V29.9821Z" fill="url(#paint0_linear_450_10518)"/>
+<path d="M34.3613 29.9821C34.3613 22.9121 40.0927 17.1807 47.1627 17.1807H171.134C178.204 17.1807 183.936 22.9121 183.936 29.9821V65.6913H34.3613V29.9821Z" fill="url(#paint1_linear_450_10518)"/>
+</g>
+<path d="M47.1631 17.7139H171.135C177.91 17.7141 183.402 23.2071 183.402 29.9824V65.1582H34.8945V29.9824C34.8945 23.207 40.3876 17.7139 47.1631 17.7139Z" stroke="#0E1E00" stroke-width="1.06678"/>
+<path d="M203.047 66.2539C208.939 66.2539 213.715 71.0302 213.715 76.9219V93.9707H4.50098V76.9219C4.50103 71.0303 9.27733 66.254 15.1689 66.2539H203.047Z" fill="#555853" stroke="#565A51" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_10518)">
+<path d="M6.63477 76.922C6.63477 72.2086 10.4557 68.3877 15.169 68.3877H203.047C207.76 68.3877 211.581 72.2086 211.581 76.922V90.7699C211.581 91.359 211.104 91.8366 210.514 91.8366H7.70156C7.11239 91.8366 6.63477 91.359 6.63477 90.7699V76.922Z" fill="#747870"/>
+</g>
+<path d="M203.047 67.8545C208.055 67.8545 212.114 71.914 212.114 76.9219V90.7695C212.114 91.6532 211.398 92.37 210.515 92.3701H7.70117C6.8176 92.3699 6.10156 91.6532 6.10156 90.7695V76.9219C6.10161 71.914 10.1611 67.8545 15.1689 67.8545H203.047Z" stroke="#3B3C39" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_10518)" style="mix-blend-mode:plus-lighter">
+<path d="M203.757 69.8745C207.586 69.8745 210.69 72.9787 210.69 76.8081V92.2769H8.00195V76.8081C8.00213 72.9788 11.1062 69.8747 14.9355 69.8745H203.757Z" stroke="url(#paint2_linear_450_10518)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_10518" maskUnits="userSpaceOnUse" x="-0.734375" y="-0.639648" width="219" height="68" fill="black">
+<rect fill="white" x="-0.734375" y="-0.639648" width="219" height="68"/>
+<path d="M213.948 11.8717C213.948 12.4609 213.469 12.9351 212.881 12.97C203.581 13.5217 196.208 21.2386 196.208 30.6777V61.3961C196.208 61.9853 195.73 62.4629 195.141 62.4629H188.84C188.251 62.4629 187.773 61.9853 187.773 61.3961V30.6777C187.773 20.8811 179.832 12.9398 170.036 12.9385C170.034 12.9385 170.033 12.9374 170.033 12.936C170.033 12.9347 170.032 12.9336 170.031 12.9336H48.2065C48.2052 12.9336 48.2041 12.9347 48.2041 12.936C48.2041 12.9374 48.203 12.9385 48.2016 12.9385C38.4053 12.9398 30.464 20.8812 30.4639 30.6777V61.3961C30.4639 61.9853 29.9863 62.4629 29.3971 62.4629H23.0961C22.5069 62.4629 22.0293 61.9853 22.0293 61.3961V30.6777C22.0292 21.2385 14.6567 13.5217 5.35599 12.97C4.76785 12.9351 4.28906 12.4609 4.28906 11.8717V7.86171C4.28906 7.27254 4.76668 6.79492 5.35585 6.79492H212.881C213.471 6.79492 213.948 7.27254 213.948 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z"/>
+</mask>
+<path d="M213.948 11.8717C213.948 12.4609 213.469 12.9351 212.881 12.97C203.581 13.5217 196.208 21.2386 196.208 30.6777V61.3961C196.208 61.9853 195.73 62.4629 195.141 62.4629H188.84C188.251 62.4629 187.773 61.9853 187.773 61.3961V30.6777C187.773 20.8811 179.832 12.9398 170.036 12.9385C170.034 12.9385 170.033 12.9374 170.033 12.936C170.033 12.9347 170.032 12.9336 170.031 12.9336H48.2065C48.2052 12.9336 48.2041 12.9347 48.2041 12.936C48.2041 12.9374 48.203 12.9385 48.2016 12.9385C38.4053 12.9398 30.464 20.8812 30.4639 30.6777V61.3961C30.4639 61.9853 29.9863 62.4629 29.3971 62.4629H23.0961C22.5069 62.4629 22.0293 61.9853 22.0293 61.3961V30.6777C22.0292 21.2385 14.6567 13.5217 5.35599 12.97C4.76785 12.9351 4.28906 12.4609 4.28906 11.8717V7.86171C4.28906 7.27254 4.76668 6.79492 5.35585 6.79492H212.881C213.471 6.79492 213.948 7.27254 213.948 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z" fill="url(#paint3_linear_450_10518)"/>
+<path d="M196.208 30.6777L191.941 30.6777V30.6777H196.208ZM187.773 30.6777H192.041V30.6777L187.773 30.6777ZM30.4639 30.6777L26.1967 30.6777V30.6777H30.4639ZM22.0293 30.6777H26.2964V30.6777L22.0293 30.6777ZM48.2016 12.9385L48.2022 17.2056L48.2016 12.9385ZM5.35599 12.97L5.10332 17.2297L5.35599 12.97ZM170.036 12.9385L170.035 17.2056L170.036 12.9385ZM212.881 12.97L212.629 8.71038L212.881 12.97ZM212.881 12.97L212.629 8.71038C201.087 9.39498 191.941 18.9663 191.941 30.6777L196.208 30.6777L200.475 30.6778C200.475 23.5108 206.074 17.6484 213.134 17.2297L212.881 12.97ZM196.208 30.6777H191.941V61.3961H196.208H200.475V30.6777H196.208ZM195.141 62.4629V58.1958H188.84V62.4629V66.73H195.141V62.4629ZM187.773 61.3961H192.041V30.6777H187.773H183.506V61.3961H187.773ZM187.773 30.6777L192.041 30.6777C192.04 18.5244 182.189 8.67298 170.036 8.67134L170.036 12.9385L170.035 17.2056C177.475 17.2066 183.506 23.2379 183.506 30.6778L187.773 30.6777ZM170.031 12.9336V8.66645H48.2065V12.9336V17.2007H170.031V12.9336ZM48.2016 12.9385L48.2011 8.67134C36.0486 8.67298 26.1969 18.5244 26.1967 30.6777L30.4639 30.6777L34.731 30.6778C34.7311 23.2379 40.7621 17.2066 48.2022 17.2056L48.2016 12.9385ZM30.4639 30.6777H26.1967V61.3961H30.4639H34.731V30.6777H30.4639ZM29.3971 62.4629V58.1958H23.0961V62.4629V66.73H29.3971V62.4629ZM22.0293 61.3961H26.2964V30.6777H22.0293H17.7622V61.3961H22.0293ZM22.0293 30.6777L26.2964 30.6777C26.2963 18.9663 17.1502 9.39497 5.60865 8.71038L5.35599 12.97L5.10332 17.2297C12.1632 17.6484 17.762 23.5108 17.7622 30.6778L22.0293 30.6777ZM4.28906 11.8717H8.5562V7.86171H4.28906H0.0219231V11.8717H4.28906ZM5.35585 6.79492V11.0621H212.881V6.79492V2.52778H5.35585V6.79492ZM213.948 7.86171H209.681V11.8717H213.948H218.215V7.86171H213.948ZM213.2 5.86328V1.59614H5.01709V5.86328V10.1304H213.2V5.86328ZM5.01709 4.36035V8.62749H213.2V4.36035V0.0932121H5.01709V4.36035ZM213.2 4.36035V8.62749C211.258 8.62749 209.684 7.0535 209.684 5.11182H213.951H218.218C218.218 2.34009 215.971 0.0932121 213.2 0.0932121V4.36035ZM4.26562 5.11182H8.53276C8.53276 7.05347 6.95874 8.62749 5.01709 8.62749V4.36035V0.0932121C2.24539 0.0932121 -0.00151443 2.34012 -0.00151443 5.11182H4.26562ZM5.01709 5.86328V1.59614C6.95872 1.59614 8.53276 3.17013 8.53276 5.11182H4.26562H-0.00151443C-0.00151443 7.88354 2.24542 10.1304 5.01709 10.1304V5.86328ZM213.2 5.86328V10.1304C215.971 10.1304 218.218 7.88351 218.218 5.11182H213.951H209.684C209.684 3.17016 211.258 1.59614 213.2 1.59614V5.86328ZM212.881 6.79492V11.0621C211.114 11.0621 209.681 9.62924 209.681 7.86171H213.948H218.215C218.215 4.91584 215.827 2.52778 212.881 2.52778V6.79492ZM30.4639 61.3961H26.1967C26.1967 59.6286 27.6296 58.1958 29.3971 58.1958V62.4629V66.73C32.3429 66.73 34.731 64.342 34.731 61.3961H30.4639ZM48.2041 12.936H43.937C43.937 10.5484 45.8786 8.67165 48.2011 8.67134L48.2016 12.9385L48.2022 17.2056C50.5274 17.2053 52.4712 15.3263 52.4712 12.936H48.2041ZM48.2065 12.9336V8.66645C45.8451 8.66645 43.937 10.5815 43.937 12.936H48.2041H52.4712C52.4712 15.2879 50.5653 17.2007 48.2065 17.2007V12.9336ZM170.033 12.936H174.3C174.3 10.578 172.389 8.66645 170.031 8.66645V12.9336V17.2007C167.675 17.2007 165.766 15.2914 165.766 12.936H170.033ZM4.28906 7.86171H8.5562C8.5562 9.62921 7.12335 11.0621 5.35585 11.0621V6.79492V2.52778C2.41 2.52778 0.0219231 4.91586 0.0219231 7.86171H4.28906ZM188.84 62.4629V58.1958C190.608 58.1958 192.041 59.6286 192.041 61.3961H187.773H183.506C183.506 64.3419 185.894 66.73 188.84 66.73V62.4629ZM5.35599 12.97L5.60865 8.71038C7.10943 8.7994 8.5562 10.04 8.5562 11.8717H4.28906H0.0219231C0.0219231 14.8817 2.42627 17.0709 5.10332 17.2297L5.35599 12.97ZM196.208 61.3961H191.941C191.941 59.6286 193.374 58.1958 195.141 58.1958V62.4629V66.73C198.087 66.73 200.475 64.342 200.475 61.3961H196.208ZM170.036 12.9385L170.036 8.67134C172.357 8.67165 174.3 10.5472 174.3 12.936H170.033H165.766C165.766 15.3276 167.711 17.2053 170.035 17.2056L170.036 12.9385ZM23.0961 62.4629V58.1958C24.8636 58.1958 26.2964 59.6286 26.2964 61.3961H22.0293H17.7622C17.7622 64.3419 20.1502 66.73 23.0961 66.73V62.4629ZM212.881 12.97L213.134 17.2297C215.811 17.0709 218.215 14.8817 218.215 11.8717H213.948H209.681C209.681 10.04 211.128 8.7994 212.629 8.71038L212.881 12.97Z" fill="#565A51" mask="url(#path-7-outside-1_450_10518)"/>
+<mask id="path-9-outside-2_450_10518" maskUnits="userSpaceOnUse" x="2.26562" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="2.26562" y="2.36035" width="213" height="63"/>
+<path d="M213.948 12.9385C204.151 12.9385 196.208 20.8803 196.208 30.6777V63.4736H187.773V30.6777C187.773 20.8803 179.831 12.9385 170.033 12.9385V12.9336H48.2041V12.9385C38.4067 12.9385 30.464 20.8803 30.4639 30.6777V63.4736H22.0293V30.6777C22.0292 20.8803 14.0865 12.9385 4.28906 12.9385V6.79492H213.948V12.9385ZM213.951 5.86328H4.26562V4.36035H213.951V5.86328Z"/>
+</mask>
+<path d="M213.948 12.9385V14.0053C214.537 14.0053 215.015 13.5276 215.015 12.9385H213.948ZM196.208 30.6777L195.141 30.6777V30.6777H196.208ZM196.208 63.4736V64.5404C196.797 64.5404 197.275 64.0628 197.275 63.4736H196.208ZM187.773 63.4736H186.707C186.707 64.0628 187.184 64.5404 187.773 64.5404V63.4736ZM187.773 30.6777H188.84V30.6777L187.773 30.6777ZM170.033 12.9385H168.966C168.966 13.5276 169.444 14.0053 170.033 14.0053V12.9385ZM170.033 12.9336H171.1C171.1 12.3444 170.622 11.8668 170.033 11.8668V12.9336ZM48.2041 12.9336V11.8668C47.6149 11.8668 47.1373 12.3444 47.1373 12.9336H48.2041ZM48.2041 12.9385V14.0053C48.7933 14.0053 49.2709 13.5276 49.2709 12.9385H48.2041ZM30.4639 30.6777L29.3971 30.6777V30.6777H30.4639ZM30.4639 63.4736V64.5404C31.053 64.5404 31.5307 64.0628 31.5307 63.4736H30.4639ZM22.0293 63.4736H20.9625C20.9625 64.0628 21.4401 64.5404 22.0293 64.5404V63.4736ZM22.0293 30.6777H23.0961L23.0961 30.6777L22.0293 30.6777ZM4.28906 12.9385H3.22228C3.22228 13.5276 3.69989 14.0053 4.28906 14.0053V12.9385ZM4.28906 6.79492V5.72814C3.69989 5.72814 3.22228 6.20575 3.22228 6.79492H4.28906ZM213.948 6.79492H215.015C215.015 6.20575 214.537 5.72814 213.948 5.72814V6.79492ZM213.951 5.86328V6.93007C214.54 6.93007 215.018 6.45245 215.018 5.86328H213.951ZM4.26562 5.86328H3.19884C3.19884 6.45245 3.67646 6.93007 4.26562 6.93007V5.86328ZM4.26562 4.36035V3.29357C3.67646 3.29357 3.19884 3.77118 3.19884 4.36035H4.26562ZM213.951 4.36035H215.018C215.018 3.77118 214.54 3.29357 213.951 3.29357V4.36035ZM213.948 12.9385V11.8717C203.562 11.8717 195.141 20.2911 195.141 30.6777L196.208 30.6777L197.275 30.6778C197.275 21.4696 204.74 14.0053 213.948 14.0053V12.9385ZM196.208 30.6777H195.141V63.4736H196.208H197.275V30.6777H196.208ZM196.208 63.4736V62.4068H187.773V63.4736V64.5404H196.208V63.4736ZM187.773 63.4736H188.84V30.6777H187.773H186.707V63.4736H187.773ZM187.773 30.6777L188.84 30.6777C188.84 20.2911 180.42 11.8717 170.033 11.8717V12.9385V14.0053C179.242 14.0053 186.707 21.4696 186.707 30.6777L187.773 30.6777ZM170.033 12.9385H171.1V12.9336H170.033H168.966V12.9385H170.033ZM170.033 12.9336V11.8668H48.2041V12.9336V14.0004H170.033V12.9336ZM48.2041 12.9336H47.1373V12.9385H48.2041H49.2709V12.9336H48.2041ZM48.2041 12.9385V11.8717C37.8176 11.8717 29.3973 20.2911 29.3971 30.6777L30.4639 30.6777L31.5307 30.6778C31.5308 21.4696 38.9958 14.0053 48.2041 14.0053V12.9385ZM30.4639 30.6777H29.3971V63.4736H30.4639H31.5307V30.6777H30.4639ZM30.4639 63.4736V62.4068H22.0293V63.4736V64.5404H30.4639V63.4736ZM22.0293 63.4736H23.0961V30.6777H22.0293H20.9625V63.4736H22.0293ZM22.0293 30.6777L23.0961 30.6777C23.0959 20.2911 14.6756 11.8717 4.28906 11.8717V12.9385V14.0053C13.4974 14.0053 20.9624 21.4696 20.9625 30.6777L22.0293 30.6777ZM4.28906 12.9385H5.35585V6.79492H4.28906H3.22228V12.9385H4.28906ZM4.28906 6.79492V7.86171H213.948V6.79492V5.72814H4.28906V6.79492ZM213.948 6.79492H212.881V12.9385H213.948H215.015V6.79492H213.948ZM213.951 5.86328V4.7965H4.26562V5.86328V6.93007H213.951V5.86328ZM4.26562 5.86328H5.33241V4.36035H4.26562H3.19884V5.86328H4.26562ZM4.26562 4.36035V5.42714H213.951V4.36035V3.29357H4.26562V4.36035ZM213.951 4.36035H212.884V5.86328H213.951H215.018V4.36035H213.951Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_10518)"/>
+<g filter="url(#filter3_f_450_10518)" style="mix-blend-mode:plus-lighter">
+<path d="M202.689 65.6074C208.876 65.6074 213.891 70.6223 213.891 76.8086V94.4102H3.73438V76.8086C3.73438 70.6223 8.74927 65.6074 14.9355 65.6074H202.689Z" stroke="url(#paint4_linear_450_10518)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_10518)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_10518" maskUnits="userSpaceOnUse" x="2.26562" y="3.33398" width="212" height="61" fill="black">
+<rect fill="white" x="2.26562" y="3.33398" width="212" height="61"/>
+<path d="M212.291 5.33398V11.4834C202.57 11.4835 194.69 19.364 194.689 29.085V62.9395H186.32V29.085C186.32 19.7567 179.064 12.1251 169.888 11.5234H46.6689C37.493 12.1252 30.2365 19.7568 30.2363 29.085V62.9395H21.8672V29.085C21.867 19.3639 13.9867 11.4834 4.26562 11.4834V5.33398H212.291Z"/>
+</mask>
+<path d="M212.291 5.33398H213.358V4.2672H212.291V5.33398ZM212.291 11.4834L212.291 12.5502L213.358 12.5502V11.4834H212.291ZM194.689 29.085L193.623 29.0849V29.085H194.689ZM194.689 62.9395V64.0062H195.756V62.9395H194.689ZM186.32 62.9395H185.254V64.0062H186.32V62.9395ZM186.32 29.085H187.387V29.0849L186.32 29.085ZM169.888 11.5234L169.957 10.4589L169.923 10.4567H169.888V11.5234ZM46.6689 11.5234V10.4567H46.634L46.5991 10.4589L46.6689 11.5234ZM30.2363 29.085L29.1695 29.0849V29.085H30.2363ZM30.2363 62.9395V64.0062H31.3031V62.9395H30.2363ZM21.8672 62.9395H20.8004V64.0062H21.8672V62.9395ZM21.8672 29.085H22.934L22.934 29.0849L21.8672 29.085ZM4.26562 11.4834H3.19884V12.5502H4.26562L4.26562 11.4834ZM4.26562 5.33398V4.2672H3.19884V5.33398H4.26562ZM212.291 5.33398H211.224V11.4834H212.291H213.358V5.33398H212.291ZM212.291 11.4834L212.291 10.4166C201.981 10.4167 193.623 18.7748 193.623 29.0849L194.689 29.085L195.756 29.085C195.756 19.9532 203.159 12.5503 212.291 12.5502L212.291 11.4834ZM194.689 29.085H193.623V62.9395H194.689H195.756V29.085H194.689ZM194.689 62.9395V61.8727H186.32V62.9395V64.0062H194.689V62.9395ZM186.32 62.9395H187.387V29.085H186.32H185.254V62.9395H186.32ZM186.32 29.085L187.387 29.0849C187.387 19.1908 179.691 11.0971 169.957 10.4589L169.888 11.5234L169.818 12.5879C178.437 13.1531 185.253 20.3226 185.254 29.085L186.32 29.085ZM169.888 11.5234V10.4567H46.6689V11.5234V12.5902H169.888V11.5234ZM46.6689 11.5234L46.5991 10.4589C36.8662 11.0973 29.1697 19.1909 29.1695 29.0849L30.2363 29.085L31.3031 29.085C31.3033 20.3227 38.1198 13.1532 46.7388 12.5879L46.6689 11.5234ZM30.2363 29.085H29.1695V62.9395H30.2363H31.3031V29.085H30.2363ZM30.2363 62.9395V61.8727H21.8672V62.9395V64.0062H30.2363V62.9395ZM21.8672 62.9395H22.934V29.085H21.8672H20.8004V62.9395H21.8672ZM21.8672 29.085L22.934 29.0849C22.9338 18.7747 14.5759 10.4166 4.26563 10.4166L4.26562 11.4834L4.26562 12.5502C13.3975 12.5502 20.8002 19.9531 20.8004 29.085L21.8672 29.085ZM4.26562 11.4834H5.33241V5.33398H4.26562H3.19884V11.4834H4.26562ZM4.26562 5.33398V6.40077H212.291V5.33398V4.2672H4.26562V5.33398Z" fill="url(#paint5_linear_450_10518)" mask="url(#path-12-outside-3_450_10518)"/>
+</g>
+<g filter="url(#filter5_f_450_10518)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_10518" maskUnits="userSpaceOnUse" x="3.33789" y="3.33398" width="211" height="61" fill="black">
+<rect fill="white" x="3.33789" y="3.33398" width="211" height="61"/>
+<path d="M211.229 5.33398C211.818 5.33398 212.296 5.8116 212.296 6.40077V10.4166C212.296 11.0058 211.817 11.48 211.229 11.5154C202.055 12.067 194.785 19.6822 194.785 28.9951V61.8727C194.785 62.4618 194.308 62.9395 193.718 62.9395H187.526C186.937 62.9395 186.459 62.4618 186.459 61.8727V28.9951C186.459 19.7199 179.248 12.1297 170.126 11.5234H47.5088C38.3868 12.1294 31.1758 19.7197 31.1758 28.9951V61.8727C31.1758 62.4618 30.6982 62.9395 30.109 62.9395H23.9164C23.3272 62.9395 22.8496 62.4618 22.8496 61.8727V28.9951C22.8496 19.682 15.5793 12.0668 6.40484 11.5154C5.81673 11.48 5.33789 11.0058 5.33789 10.4166V6.40077C5.33789 5.8116 5.81551 5.33398 6.40468 5.33398H211.229Z"/>
+</mask>
+<path d="M170.126 11.5234L170.197 10.459L170.161 10.4567H170.126V11.5234ZM47.5088 11.5234V10.4567H47.4734L47.4381 10.459L47.5088 11.5234ZM6.40484 11.5154L6.46884 10.4505L6.40484 11.5154ZM212.296 6.40077H211.229V10.4166H212.296H213.363V6.40077H212.296ZM211.229 11.5154L211.165 10.4505C201.431 11.0358 193.718 19.1145 193.718 28.9951H194.785H195.852C195.852 20.2498 202.679 13.0982 211.293 12.5803L211.229 11.5154ZM194.785 28.9951H193.718V61.8727H194.785H195.852V28.9951H194.785ZM193.718 62.9395V61.8727H187.526V62.9395V64.0062H193.718V62.9395ZM186.459 61.8727H187.526V28.9951H186.459H185.392V61.8727H186.459ZM186.459 28.9951H187.526C187.526 19.1544 179.875 11.1023 170.197 10.459L170.126 11.5234L170.055 12.5879C178.62 13.1572 185.392 20.2855 185.392 28.9951H186.459ZM170.126 11.5234V10.4567H47.5088V11.5234V12.5902H170.126V11.5234ZM47.5088 11.5234L47.4381 10.459C37.7594 11.102 30.109 19.1542 30.109 28.9951H31.1758H32.2426C32.2426 20.2852 39.0142 13.1569 47.5795 12.5879L47.5088 11.5234ZM31.1758 28.9951H30.109V61.8727H31.1758H32.2426V28.9951H31.1758ZM30.109 62.9395V61.8727H23.9164V62.9395V64.0062H30.109V62.9395ZM22.8496 61.8727H23.9164V28.9951H22.8496H21.7828V61.8727H22.8496ZM22.8496 28.9951H23.9164C23.9164 19.1143 16.2032 11.0356 6.46884 10.4505L6.40484 11.5154L6.34084 12.5802C14.9555 13.098 21.7828 20.2498 21.7828 28.9951H22.8496ZM5.33789 10.4166H6.40468V6.40077H5.33789H4.27111V10.4166H5.33789ZM6.40468 5.33398V6.40077H211.229V5.33398V4.2672H6.40468V5.33398ZM5.33789 6.40077H6.40468V6.40077V5.33398V4.2672C5.22634 4.2672 4.27111 5.22243 4.27111 6.40077H5.33789ZM23.9164 62.9395V61.8727H23.9164H22.8496H21.7828C21.7828 63.051 22.7381 64.0062 23.9164 64.0062V62.9395ZM31.1758 61.8727H30.109H30.109V62.9395V64.0062C31.2873 64.0062 32.2426 63.051 32.2426 61.8727H31.1758ZM187.526 62.9395V61.8727V61.8727H186.459H185.392C185.392 63.051 186.347 64.0062 187.526 64.0062V62.9395ZM194.785 61.8727H193.718V61.8727V62.9395V64.0062C194.897 64.0062 195.852 63.051 195.852 61.8727H194.785ZM6.40484 11.5154L6.46884 10.4505C6.44391 10.449 6.42385 10.4383 6.41171 10.426C6.40621 10.4204 6.40454 10.4166 6.40442 10.4163C6.40437 10.4162 6.40451 10.4165 6.40464 10.4171C6.40477 10.4178 6.40468 10.4178 6.40468 10.4166H5.33789H4.27111C4.27111 11.6112 5.23142 12.5136 6.34084 12.5802L6.40484 11.5154ZM212.296 10.4166H211.229C211.229 10.4178 211.229 10.4178 211.229 10.4172C211.229 10.4166 211.229 10.4162 211.229 10.4163C211.229 10.4166 211.228 10.4204 211.222 10.426C211.21 10.4383 211.19 10.449 211.165 10.4505L211.229 11.5154L211.293 12.5803C212.402 12.5136 213.363 11.6112 213.363 10.4166H212.296ZM212.296 6.40077H213.363C213.363 5.22243 212.407 4.2672 211.229 4.2672V5.33398V6.40077V6.40077H212.296Z" fill="url(#paint6_linear_450_10518)" mask="url(#path-14-outside-4_450_10518)"/>
+</g>
+<g filter="url(#filter6_f_450_10518)">
+<path d="M2.13477 13.8684V4.26736C2.13477 3.08902 3.09 2.13379 4.26834 2.13379H214.425C215.603 2.13379 216.559 3.08902 216.559 4.26736V13.8684" stroke="url(#paint7_linear_450_10518)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_10518)">
+<path d="M33.0703 62.9403V26.9541C33.4259 22.5921 36.8041 15.4683 46.9385 13.8682H168.019C177.62 14.4016 184.554 18.2301 184.554 31.316V62.9403" stroke="url(#paint8_linear_450_10518)" stroke-width="1.06678"/>
+</g>
+<path d="M18.1914 63.6704L199.096 63.6704" stroke="url(#paint9_linear_450_10518)" stroke-width="1.06678"/>
+<g filter="url(#filter8_f_450_10518)">
+<path d="M22.9355 45.8716V62.4067H29.8696V45.8716" stroke="url(#paint10_linear_450_10518)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_10518" x="34.3613" y="17.1807" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10518"/>
+</filter>
+<filter id="filter1_ii_450_10518" x="5.56836" y="66.254" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.520976 0 0 0 0 0.528846 0 0 0 0 0.51232 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10518"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.27635 0 0 0 0 0.293269 0 0 0 0 0.26225 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_10518" result="effect2_innerShadow_450_10518"/>
+</filter>
+<filter id="filter2_f_450_10518" x="6.40197" y="68.274" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10518"/>
+</filter>
+<filter id="filter3_f_450_10518" x="2.13439" y="64.0069" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10518"/>
+</filter>
+<filter id="filter4_f_450_10518" x="2.13243" y="3.2003" width="212.292" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10518"/>
+</filter>
+<filter id="filter5_f_450_10518" x="3.2047" y="3.2003" width="211.225" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10518"/>
+</filter>
+<filter id="filter6_f_450_10518" x="0.534778" y="0.533801" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10518"/>
+</filter>
+<filter id="filter7_f_450_10518" x="31.4703" y="12.2682" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10518"/>
+</filter>
+<filter id="filter8_f_450_10518" x="21.3356" y="44.8048" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10518"/>
+</filter>
+<linearGradient id="paint0_linear_450_10518" x1="109.149" y1="17.1807" x2="109.149" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A2A2"/>
+<stop offset="0.05" stop-color="#505050"/>
+<stop offset="1" stop-color="#282827"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_10518" x1="31.6904" y1="34.5812" x2="183.936" y2="34.5812" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5549"/>
+<stop offset="0.077962" stop-color="#484E43" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#484E43" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#4F5549"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_10518" x1="109.346" y1="70.4077" x2="109.346" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B7C3AD"/>
+<stop offset="1" stop-color="#B7C3AD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_10518" x1="4.26562" y1="33.4116" x2="213.951" y2="33.4116" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A69E"/>
+<stop offset="0.144231" stop-color="#A2A69E"/>
+<stop offset="0.889423" stop-color="#A2A69E"/>
+<stop offset="0.961538" stop-color="#959990"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_10518" x1="108.812" y1="66.1406" x2="108.812" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_10518" x1="108.278" y1="5.33398" x2="108.278" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B7C3AD"/>
+<stop offset="1" stop-color="#B7C3AD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_10518" x1="18.6044" y1="12.2671" x2="43.4818" y2="19.1152" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CED0CC" stop-opacity="0.905882"/>
+<stop offset="1" stop-color="#CED0CC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_10518" x1="109.347" y1="2.13379" x2="109.347" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE" stop-opacity="0.478431"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_10518" x1="108.812" y1="13.8682" x2="108.812" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_10518" x1="199.096" y1="63.6704" x2="18.1914" y2="63.6704" gradientUnits="userSpaceOnUse">
+<stop stop-color="#232521" stop-opacity="0"/>
+<stop offset="0.100962" stop-color="#232521"/>
+<stop offset="0.9375" stop-color="#232521"/>
+<stop offset="1" stop-color="#232521" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_10518" x1="25.0691" y1="61.8734" x2="24.5357" y2="36.2705" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CED0CC"/>
+<stop offset="1" stop-color="#CED0CC" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_10518">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/중앙.svg
new file mode 100644
index 0000000..dd50cc5
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/실사화/중앙.svg	
@@ -0,0 +1,149 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_10554)">
+<g clip-path="url(#clip1_450_10554)">
+<g filter="url(#filter0_i_450_10554)">
+<path d="M-384.246 29.9821C-384.246 22.9121 -378.515 17.1807 -371.445 17.1807H463.692C470.762 17.1807 476.493 22.9121 476.493 29.9821V65.6913H-384.246V29.9821Z" fill="url(#paint0_linear_450_10554)"/>
+<path d="M-384.246 29.9821C-384.246 22.9121 -378.515 17.1807 -371.445 17.1807H463.692C470.762 17.1807 476.493 22.9121 476.493 29.9821V65.6913H-384.246V29.9821Z" fill="url(#paint1_linear_450_10554)"/>
+</g>
+<path d="M-371.444 17.7139H463.691C470.467 17.7139 475.96 23.207 475.96 29.9824V65.1582H-383.713V29.9824C-383.713 23.207 -378.22 17.7139 -371.444 17.7139Z" stroke="#0E1E00" stroke-width="1.06678"/>
+<path d="M627.059 66.2539C632.95 66.2539 637.727 71.0302 637.727 76.9219V93.9707H-545.923V76.9219C-545.923 71.0303 -541.146 66.254 -535.255 66.2539H627.059Z" fill="#555853" stroke="#565A51" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_10554)">
+<path d="M-543.789 76.922C-543.789 72.2086 -539.968 68.3877 -535.255 68.3877H627.059C631.772 68.3877 635.593 72.2086 635.593 76.922V90.7699C635.593 91.359 635.115 91.8366 634.526 91.8366H-542.722C-543.311 91.8366 -543.789 91.359 -543.789 90.7699V76.922Z" fill="#747870"/>
+</g>
+<path d="M627.059 67.8545C632.067 67.8545 636.126 71.914 636.126 76.9219V90.7695C636.126 91.6533 635.41 92.3701 634.526 92.3701H-542.723C-543.606 92.3699 -544.322 91.6531 -544.322 90.7695V76.9219C-544.322 71.914 -540.263 67.8545 -535.255 67.8545H627.059Z" stroke="#3B3C39" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_10554)" style="mix-blend-mode:plus-lighter">
+<path d="M620.987 69.8745C624.817 69.8746 627.921 72.9787 627.921 76.8081V92.2769H-533.398V76.8081C-533.398 72.9788 -530.294 69.8747 -526.465 69.8745H620.987Z" stroke="url(#paint2_linear_450_10554)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_10554" maskUnits="userSpaceOnUse" x="-562.424" y="-0.639648" width="1216" height="68" fill="black">
+<rect fill="white" x="-562.424" y="-0.639648" width="1216" height="68"/>
+<path d="M649.211 11.8717C649.211 12.4609 648.733 12.9385 648.144 12.9385H596.649C569.655 12.9386 547.706 34.535 547.136 61.3926C547.124 61.9816 546.647 62.4629 546.058 62.4629H499.654C499.065 62.4629 498.588 61.9816 498.576 61.3926C498.006 34.5349 476.056 12.9385 449.062 12.9385H396.502C396.501 12.9385 396.5 12.9374 396.5 12.936C396.5 12.9347 396.499 12.9336 396.498 12.9336H-304.576C-304.577 12.9336 -304.578 12.9347 -304.578 12.936C-304.578 12.9374 -304.579 12.9385 -304.581 12.9385H-357.14C-384.134 12.9387 -406.083 34.5351 -406.653 61.3926C-406.665 61.9816 -407.142 62.4629 -407.731 62.4629H-454.135C-454.725 62.4629 -455.201 61.9816 -455.213 61.3926C-455.783 34.5349 -477.733 12.9385 -504.728 12.9385H-556.221C-556.81 12.9385 -557.288 12.4609 -557.288 11.8717V7.86171C-557.288 7.27254 -556.81 6.79492 -556.221 6.79492H648.144C648.733 6.79492 649.211 7.27254 649.211 7.86171V11.8717ZM649.228 5.11182C649.228 5.52684 648.891 5.86328 648.476 5.86328H-556.672C-557.087 5.86328 -557.424 5.52684 -557.424 5.11182C-557.424 4.69679 -557.087 4.36035 -556.672 4.36035H648.476C648.891 4.36035 649.228 4.69679 649.228 5.11182Z"/>
+</mask>
+<path d="M649.211 11.8717C649.211 12.4609 648.733 12.9385 648.144 12.9385H596.649C569.655 12.9386 547.706 34.535 547.136 61.3926C547.124 61.9816 546.647 62.4629 546.058 62.4629H499.654C499.065 62.4629 498.588 61.9816 498.576 61.3926C498.006 34.5349 476.056 12.9385 449.062 12.9385H396.502C396.501 12.9385 396.5 12.9374 396.5 12.936C396.5 12.9347 396.499 12.9336 396.498 12.9336H-304.576C-304.577 12.9336 -304.578 12.9347 -304.578 12.936C-304.578 12.9374 -304.579 12.9385 -304.581 12.9385H-357.14C-384.134 12.9387 -406.083 34.5351 -406.653 61.3926C-406.665 61.9816 -407.142 62.4629 -407.731 62.4629H-454.135C-454.725 62.4629 -455.201 61.9816 -455.213 61.3926C-455.783 34.5349 -477.733 12.9385 -504.728 12.9385H-556.221C-556.81 12.9385 -557.288 12.4609 -557.288 11.8717V7.86171C-557.288 7.27254 -556.81 6.79492 -556.221 6.79492H648.144C648.733 6.79492 649.211 7.27254 649.211 7.86171V11.8717ZM649.228 5.11182C649.228 5.52684 648.891 5.86328 648.476 5.86328H-556.672C-557.087 5.86328 -557.424 5.52684 -557.424 5.11182C-557.424 4.69679 -557.087 4.36035 -556.672 4.36035H648.476C648.891 4.36035 649.228 4.69679 649.228 5.11182Z" fill="url(#paint3_linear_450_10554)"/>
+<path d="M596.649 12.9385V8.67134V8.67134V12.9385ZM-357.14 12.9385V8.67134H-357.14L-357.14 12.9385ZM-406.653 61.3926L-402.387 61.483L-406.653 61.3926ZM498.576 61.3926L494.309 61.483L498.576 61.3926ZM547.136 61.3926L551.402 61.483L547.136 61.3926ZM-455.213 61.3926L-450.947 61.3021L-455.213 61.3926ZM648.144 12.9385V8.67134H596.649V12.9385V17.2056H648.144V12.9385ZM596.649 12.9385V8.67134C567.329 8.67143 543.489 32.1286 542.87 61.3021L547.136 61.3926L551.402 61.483C551.923 36.9414 571.982 17.2057 596.649 17.2056V12.9385ZM546.058 62.4629V58.1958H499.654V62.4629V66.73H546.058V62.4629ZM498.576 61.3926L502.842 61.3021C502.223 32.1284 478.382 8.67134 449.062 8.67134V12.9385V17.2056C473.729 17.2056 493.789 36.9415 494.309 61.483L498.576 61.3926ZM449.062 12.9385V8.67134H396.502V12.9385V17.2056H449.062V12.9385ZM396.498 12.9336V8.66645H-304.576V12.9336V17.2007H396.498V12.9336ZM-304.581 12.9385V8.67134H-357.14V12.9385V17.2056H-304.581V12.9385ZM-357.14 12.9385L-357.14 8.67134C-386.46 8.67153 -410.3 32.1286 -410.919 61.3021L-406.653 61.3926L-402.387 61.483C-401.866 36.9415 -381.807 17.2058 -357.14 17.2056L-357.14 12.9385ZM-407.731 62.4629V58.1958H-454.135V62.4629V66.73H-407.731V62.4629ZM-455.213 61.3926L-450.947 61.3021C-451.566 32.1284 -475.407 8.67134 -504.728 8.67134V12.9385V17.2056C-480.06 17.2056 -460 36.9415 -459.48 61.483L-455.213 61.3926ZM-504.728 12.9385V8.67134H-556.221V12.9385V17.2056H-504.728V12.9385ZM-557.288 11.8717H-553.021V7.86171H-557.288H-561.555V11.8717H-557.288ZM-556.221 6.79492V11.0621H648.144V6.79492V2.52778H-556.221V6.79492ZM649.211 7.86171H644.944V11.8717H649.211H653.478V7.86171H649.211ZM648.476 5.86328V1.59614H-556.672V5.86328V10.1304H648.476V5.86328ZM-556.672 4.36035V8.62749H648.476V4.36035V0.0932121H-556.672V4.36035ZM648.476 4.36035V8.62749C646.534 8.62749 644.96 7.0533 644.96 5.11182H649.228H653.495C653.495 2.34029 651.248 0.0932121 648.476 0.0932121V4.36035ZM-557.424 5.11182H-553.157C-553.157 7.05347 -554.731 8.62749 -556.672 8.62749V4.36035V0.0932121C-559.444 0.0932121 -561.691 2.34012 -561.691 5.11182H-557.424ZM-556.672 5.86328V1.59614C-554.731 1.59614 -553.157 3.17034 -553.157 5.11182H-557.424H-561.691C-561.691 7.88334 -559.444 10.1304 -556.672 10.1304V5.86328ZM648.476 5.86328V10.1304C651.248 10.1304 653.495 7.88351 653.495 5.11182H649.228H644.96C644.96 3.17016 646.534 1.59614 648.476 1.59614V5.86328ZM648.144 6.79492V11.0621C646.377 11.0621 644.944 9.62907 644.944 7.86171H649.211H653.478C653.478 4.91601 651.09 2.52778 648.144 2.52778V6.79492ZM-406.653 61.3926L-410.919 61.3021C-410.884 59.6473 -409.539 58.1958 -407.731 58.1958V62.4629V66.73C-404.744 66.73 -402.447 64.3159 -402.387 61.483L-406.653 61.3926ZM-304.578 12.936H-308.845C-308.845 10.5807 -306.936 8.67134 -304.581 8.67134V12.9385V17.2056C-302.223 17.2056 -300.311 15.2941 -300.311 12.936H-304.578ZM-304.576 12.9336V8.66645C-306.974 8.66645 -308.845 10.6187 -308.845 12.936H-304.578H-300.311C-300.311 15.2507 -302.18 17.2007 -304.576 17.2007V12.9336ZM396.5 12.936H400.767C400.767 10.578 398.856 8.66645 396.498 8.66645V12.9336V17.2007C394.142 17.2007 392.233 15.2914 392.233 12.936H396.5ZM-557.288 7.86171H-553.021C-553.021 9.62921 -554.454 11.0621 -556.221 11.0621V6.79492V2.52778C-559.167 2.52778 -561.555 4.91586 -561.555 7.86171H-557.288ZM499.654 62.4629V58.1958C501.462 58.1958 502.807 59.6473 502.842 61.3021L498.576 61.3926L494.309 61.483C494.37 64.3159 496.667 66.73 499.654 66.73V62.4629ZM-556.221 12.9385V8.67134C-554.454 8.67134 -553.021 10.1042 -553.021 11.8717H-557.288H-561.555C-561.555 14.8175 -559.167 17.2056 -556.221 17.2056V12.9385ZM547.136 61.3926L542.87 61.3021C542.905 59.6473 544.25 58.1958 546.058 58.1958V62.4629V66.73C549.045 66.73 551.342 64.3159 551.402 61.483L547.136 61.3926ZM396.502 12.9385V8.67134C398.86 8.67134 400.767 10.5827 400.767 12.936H396.5H392.233C392.233 15.2921 394.142 17.2056 396.502 17.2056V12.9385ZM-454.135 62.4629V58.1958C-452.327 58.1958 -450.982 59.6473 -450.947 61.3021L-455.213 61.3926L-459.48 61.483C-459.42 64.3159 -457.122 66.73 -454.135 66.73V62.4629ZM648.144 12.9385V17.2056C651.09 17.2056 653.478 14.8175 653.478 11.8717H649.211H644.944C644.944 10.1042 646.377 8.67134 648.144 8.67134V12.9385Z" fill="#565A51" mask="url(#path-7-outside-1_450_10554)"/>
+<mask id="path-9-outside-2_450_10554" maskUnits="userSpaceOnUse" x="-559.424" y="2.36035" width="1210" height="63" fill="black">
+<rect fill="white" x="-559.424" y="2.36035" width="1210" height="63"/>
+<path d="M649.211 12.9385H597.66C569.75 12.9385 547.125 35.5636 547.125 63.4736H498.587C498.587 35.5636 475.961 12.9385 448.051 12.9385H396.5V12.9336H-304.578V12.9385H-356.129C-384.039 12.9386 -406.664 35.5637 -406.664 63.4736H-455.202C-455.202 35.5637 -477.827 12.9387 -505.737 12.9385H-557.288V6.79492H649.211V12.9385ZM649.228 5.86328H-557.424V4.36035H649.228V5.86328Z"/>
+</mask>
+<path d="M649.211 12.9385V14.0053C649.8 14.0053 650.278 13.5276 650.278 12.9385H649.211ZM597.66 12.9385V11.8717V11.8717V12.9385ZM547.125 63.4736V64.5404C547.714 64.5404 548.192 64.0628 548.192 63.4736H547.125ZM498.587 63.4736H497.52C497.52 64.0628 497.998 64.5404 498.587 64.5404V63.4736ZM396.5 12.9385H395.433C395.433 13.5276 395.911 14.0053 396.5 14.0053V12.9385ZM396.5 12.9336H397.567C397.567 12.3444 397.089 11.8668 396.5 11.8668V12.9336ZM-304.578 12.9336V11.8668C-305.167 11.8668 -305.645 12.3444 -305.645 12.9336H-304.578ZM-304.578 12.9385V14.0053C-303.989 14.0053 -303.511 13.5276 -303.511 12.9385H-304.578ZM-356.129 12.9385V11.8717V11.8717V12.9385ZM-406.664 63.4736V64.5404C-406.075 64.5404 -405.597 64.0628 -405.597 63.4736H-406.664ZM-455.202 63.4736H-456.269C-456.269 64.0628 -455.791 64.5404 -455.202 64.5404V63.4736ZM-505.737 12.9385L-505.737 11.8717H-505.737V12.9385ZM-557.288 12.9385H-558.355C-558.355 13.5276 -557.877 14.0053 -557.288 14.0053V12.9385ZM-557.288 6.79492V5.72814C-557.877 5.72814 -558.355 6.20575 -558.355 6.79492H-557.288ZM649.211 6.79492H650.278C650.278 6.20575 649.8 5.72814 649.211 5.72814V6.79492ZM649.228 5.86328V6.93007C649.817 6.93007 650.294 6.45245 650.294 5.86328H649.228ZM-557.424 5.86328H-558.491C-558.491 6.45245 -558.013 6.93007 -557.424 6.93007V5.86328ZM-557.424 4.36035V3.29357C-558.013 3.29357 -558.491 3.77118 -558.491 4.36035H-557.424ZM649.228 4.36035H650.294C650.294 3.77118 649.817 3.29357 649.228 3.29357V4.36035ZM649.211 12.9385V11.8717H597.66V12.9385V14.0053H649.211V12.9385ZM597.66 12.9385V11.8717C569.161 11.8717 546.058 34.9744 546.058 63.4736H547.125H548.192C548.192 36.1528 570.339 14.0053 597.66 14.0053V12.9385ZM547.125 63.4736V62.4068H498.587V63.4736V64.5404H547.125V63.4736ZM498.587 63.4736H499.654C499.654 34.9744 476.55 11.8717 448.051 11.8717V12.9385V14.0053C475.372 14.0053 497.52 36.1528 497.52 63.4736H498.587ZM448.051 12.9385V11.8717H396.5V12.9385V14.0053H448.051V12.9385ZM396.5 12.9385H397.567V12.9336H396.5H395.433V12.9385H396.5ZM396.5 12.9336V11.8668H-304.578V12.9336V14.0004H396.5V12.9336ZM-304.578 12.9336H-305.645V12.9385H-304.578H-303.511V12.9336H-304.578ZM-304.578 12.9385V11.8717H-356.129V12.9385V14.0053H-304.578V12.9385ZM-356.129 12.9385V11.8717C-384.628 11.8718 -407.731 34.9745 -407.731 63.4736H-406.664H-405.597C-405.597 36.1528 -383.45 14.0054 -356.129 14.0053V12.9385ZM-406.664 63.4736V62.4068H-455.202V63.4736V64.5404H-406.664V63.4736ZM-455.202 63.4736H-454.135C-454.135 34.9746 -477.238 11.8719 -505.737 11.8717L-505.737 12.9385L-505.737 14.0053C-478.417 14.0055 -456.269 36.1529 -456.269 63.4736H-455.202ZM-505.737 12.9385V11.8717H-557.288V12.9385V14.0053H-505.737V12.9385ZM-557.288 12.9385H-556.221V6.79492H-557.288H-558.355V12.9385H-557.288ZM-557.288 6.79492V7.86171H649.211V6.79492V5.72814H-557.288V6.79492ZM649.211 6.79492H648.144V12.9385H649.211H650.278V6.79492H649.211ZM649.228 5.86328V4.7965H-557.424V5.86328V6.93007H649.228V5.86328ZM-557.424 5.86328H-556.357V4.36035H-557.424H-558.491V5.86328H-557.424ZM-557.424 4.36035V5.42714H649.228V4.36035V3.29357H-557.424V4.36035ZM649.228 4.36035H648.161V5.86328H649.228H650.294V4.36035H649.228Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_10554)"/>
+<g filter="url(#filter3_f_450_10554)" style="mix-blend-mode:plus-lighter">
+<path d="M635.134 65.6074C641.32 65.6075 646.335 70.6224 646.335 76.8086V94.4102H-557.957V76.8086C-557.957 70.6223 -552.942 65.6074 -546.756 65.6074H635.134Z" stroke="url(#paint4_linear_450_10554)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_10554)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_10554" maskUnits="userSpaceOnUse" x="-559.424" y="3.33398" width="1201" height="61" fill="black">
+<rect fill="white" x="-559.424" y="3.33398" width="1201" height="61"/>
+<path d="M639.678 5.33398V11.4834H589.844C561.425 11.4834 538.387 34.5211 538.387 62.9395H490.228C490.227 34.5211 467.189 11.4834 438.771 11.4834H423.244V11.5234H-358.55C-386.026 12.5912 -407.972 35.2021 -407.973 62.9395H-456.133C-456.133 34.5211 -479.17 11.4834 -507.589 11.4834H-557.424V5.33398H639.678Z"/>
+</mask>
+<path d="M639.678 5.33398H640.745V4.2672H639.678V5.33398ZM639.678 11.4834V12.5502H640.745V11.4834H639.678ZM538.387 62.9395V64.0062H539.453V62.9395L538.387 62.9395ZM490.228 62.9395L489.161 62.9395V64.0062H490.228V62.9395ZM423.244 11.4834V10.4166H422.177V11.4834H423.244ZM423.244 11.5234V12.5902H424.311V11.5234H423.244ZM-358.55 11.5234V10.4567H-358.571L-358.591 10.4575L-358.55 11.5234ZM-407.973 62.9395V64.0062H-406.906L-406.906 62.9395L-407.973 62.9395ZM-456.133 62.9395L-457.2 62.9395L-457.2 64.0062H-456.133V62.9395ZM-557.424 11.4834H-558.491V12.5502H-557.424V11.4834ZM-557.424 5.33398V4.2672H-558.491V5.33398H-557.424ZM639.678 5.33398H638.611V11.4834H639.678H640.745V5.33398H639.678ZM639.678 11.4834V10.4166H589.844V11.4834V12.5502H639.678V11.4834ZM589.844 11.4834V10.4166C560.836 10.4166 537.32 33.9319 537.32 62.9394L538.387 62.9395L539.453 62.9395C539.454 35.1103 562.014 12.5502 589.844 12.5502V11.4834ZM538.387 62.9395V61.8727H490.228V62.9395V64.0062H538.387V62.9395ZM490.228 62.9395L491.294 62.9394C491.294 33.9319 467.778 10.4166 438.771 10.4166V11.4834V12.5502C466.6 12.5502 489.161 35.1103 489.161 62.9395L490.228 62.9395ZM438.771 11.4834V10.4166H423.244V11.4834V12.5502H438.771V11.4834ZM423.244 11.4834H422.177V11.5234H423.244H424.311V11.4834H423.244ZM423.244 11.5234V10.4567H-358.55V11.5234V12.5902H423.244V11.5234ZM-358.55 11.5234L-358.591 10.4575C-386.637 11.5474 -409.039 34.6267 -409.039 62.9394L-407.973 62.9395L-406.906 62.9395C-406.906 35.7774 -385.414 13.635 -358.508 12.5894L-358.55 11.5234ZM-407.973 62.9395V61.8727H-456.133V62.9395V64.0062H-407.973V62.9395ZM-456.133 62.9395L-455.066 62.9394C-455.066 33.9319 -478.581 10.4166 -507.589 10.4166V11.4834V12.5502C-479.76 12.5502 -457.2 35.1102 -457.2 62.9395L-456.133 62.9395ZM-507.589 11.4834V10.4166H-557.424V11.4834V12.5502H-507.589V11.4834ZM-557.424 11.4834H-556.357V5.33398H-557.424H-558.491V11.4834H-557.424ZM-557.424 5.33398V6.40077H639.678V5.33398V4.2672H-557.424V5.33398Z" fill="url(#paint5_linear_450_10554)" mask="url(#path-12-outside-3_450_10554)"/>
+</g>
+<g filter="url(#filter5_f_450_10554)">
+<path d="M-569.686 13.8684V4.26736C-569.686 3.08902 -568.73 2.13379 -567.552 2.13379H662.101C663.279 2.13379 664.234 3.08902 664.234 4.26736V13.8684" stroke="url(#paint6_linear_450_10554)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter6_f_450_10554)">
+<path d="M-391.676 62.9403V26.9541C-389.629 22.5921 -370.19 15.4683 -311.87 13.8682H384.896C440.146 14.4016 480.049 18.2301 480.049 31.316V62.9403" stroke="url(#paint7_linear_450_10554)" stroke-width="1.06678"/>
+</g>
+<path d="M-477.297 63.6704L563.732 63.6704" stroke="url(#paint8_linear_450_10554)" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_10554" x="-384.246" y="17.1807" width="861.805" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10554"/>
+</filter>
+<filter id="filter1_ii_450_10554" x="-544.855" y="66.254" width="1182.58" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.520976 0 0 0 0 0.528846 0 0 0 0 0.51232 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_10554"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.27635 0 0 0 0 0.293269 0 0 0 0 0.26225 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_10554" result="effect2_innerShadow_450_10554"/>
+</filter>
+<filter id="filter2_f_450_10554" x="-534.998" y="68.274" width="1164.52" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10554"/>
+</filter>
+<filter id="filter3_f_450_10554" x="-559.557" y="64.0069" width="1207.49" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10554"/>
+</filter>
+<filter id="filter4_f_450_10554" x="-559.557" y="3.2003" width="1201.37" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10554"/>
+</filter>
+<filter id="filter5_f_450_10554" x="-571.286" y="0.533801" width="1237.12" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10554"/>
+</filter>
+<filter id="filter6_f_450_10554" x="-393.276" y="12.2682" width="874.925" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_10554"/>
+</filter>
+<linearGradient id="paint0_linear_450_10554" x1="46.1235" y1="17.1807" x2="46.1235" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A2A2"/>
+<stop offset="0.05" stop-color="#505050"/>
+<stop offset="1" stop-color="#282827"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_10554" x1="-399.616" y1="34.5812" x2="476.493" y2="34.5814" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F5549"/>
+<stop offset="0.077962" stop-color="#484E43" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#484E43" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#4F5549"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_10554" x1="47.2613" y1="70.4077" x2="47.2613" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B7C3AD"/>
+<stop offset="1" stop-color="#B7C3AD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_10554" x1="-557.424" y1="33.4116" x2="649.228" y2="33.4116" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A69E"/>
+<stop offset="0.144231" stop-color="#A2A69E"/>
+<stop offset="0.889423" stop-color="#A2A69E"/>
+<stop offset="0.961538" stop-color="#959990"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_10554" x1="44.1888" y1="66.1406" x2="44.1888" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_10554" x1="41.127" y1="5.33398" x2="41.127" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B7C3AD"/>
+<stop offset="1" stop-color="#B7C3AD" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_10554" x1="47.2744" y1="2.13379" x2="47.2744" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE" stop-opacity="0.478431"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_10554" x1="44.1865" y1="13.8682" x2="44.1865" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C1C4BE"/>
+<stop offset="1" stop-color="#C1C4BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_10554" x1="563.732" y1="63.6704" x2="-477.297" y2="63.6699" gradientUnits="userSpaceOnUse">
+<stop stop-color="#232521" stop-opacity="0"/>
+<stop offset="0.100962" stop-color="#232521"/>
+<stop offset="0.9375" stop-color="#232521"/>
+<stop offset="1" stop-color="#232521" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_10554">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_10554">
+<rect width="488" height="95" fill="white" transform="translate(-202.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/오른쪽.svg
new file mode 100644
index 0000000..bf9e103
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/오른쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7483)">
+<g filter="url(#filter0_i_450_7483)">
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#555555"/>
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#5B8736" fill-opacity="0.1"/>
+</g>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#555555"/>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#5B8736" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_7483" maskUnits="userSpaceOnUse" x="-155.559" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="-155.559" y="1.0874" width="205" height="80"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z"/>
+</mask>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#AAAAAA"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#555555" mask="url(#path-3-outside-1_450_7483)"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#5B8736" fill-opacity="0.1" mask="url(#path-3-outside-1_450_7483)"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#777777"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#555555" stroke-width="4"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7483" x="-124.781" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7483"/>
+</filter>
+<clipPath id="clip0_450_7483">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/왼쪽.svg
new file mode 100644
index 0000000..024d2c6
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/왼쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7465)">
+<g filter="url(#filter0_i_450_7465)">
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#555555"/>
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#5B8736" fill-opacity="0.1"/>
+</g>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#555555"/>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#5B8736" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_7465" maskUnits="userSpaceOnUse" x="1" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="1" y="1.0874" width="205" height="80"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z"/>
+</mask>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#AAAAAA"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#555555" mask="url(#path-3-outside-1_450_7465)"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#5B8736" fill-opacity="0.1" mask="url(#path-3-outside-1_450_7465)"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#777777"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#555555" stroke-width="4"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7465" x="31.7773" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7465"/>
+</filter>
+<clipPath id="clip0_450_7465">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/중앙.svg
new file mode 100644
index 0000000..3b2139a
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교량/위치도/중앙.svg	
@@ -0,0 +1,37 @@
+<svg width="97" height="93" viewBox="0 0 97 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7474)">
+<g filter="url(#filter0_i_450_7474)">
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#555555"/>
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#5B8736" fill-opacity="0.1"/>
+</g>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#555555"/>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#5B8736" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_7474" maskUnits="userSpaceOnUse" x="-122.176" y="1" width="343" height="17" fill="black">
+<rect fill="white" x="-122.176" y="1" width="343" height="17"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z"/>
+</mask>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#AAAAAA"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#555555" mask="url(#path-3-outside-1_450_7474)"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#5B8736" fill-opacity="0.1" mask="url(#path-3-outside-1_450_7474)"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#777777"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#5B8736" fill-opacity="0.1"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#555555" stroke-width="4"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7474" x="-72.6289" y="13" width="243.246" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7474"/>
+</filter>
+<clipPath id="clip0_450_7474">
+<rect width="97" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/오른쪽.svg
new file mode 100644
index 0000000..3a6db6d
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/오른쪽.svg	
@@ -0,0 +1,101 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1545)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_467_1545)"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="black" fill-opacity="0.5"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" stroke="url(#paint1_linear_467_1545)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1545)">
+<path d="M-44.9453 7.66511C-44.9453 3.94713 -41.9313 0.933105 -38.2133 0.933105H25.0126C28.7306 0.933105 31.7446 3.94712 31.7446 7.66511V32.0673C31.7446 50.2927 16.97 65.0673 -1.25538 65.0673H-38.2133C-41.9313 65.0673 -44.9453 62.0533 -44.9453 58.3353V7.66511Z" fill="#58654D" fill-opacity="0.01"/>
+<path d="M-38.2129 1.13135H25.0127C28.6213 1.13139 31.5469 4.05692 31.5469 7.66553V32.0669C31.5469 50.1829 16.8602 64.8696 -1.25586 64.8696H-38.2129C-41.8215 64.8696 -44.747 61.944 -44.7471 58.3354V7.66553C-44.7471 4.0569 -41.8215 1.13135 -38.2129 1.13135Z" stroke="url(#paint2_linear_467_1545)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1545)">
+<path d="M-41.9766 7.39212C-41.9766 5.64248 -40.5582 4.22412 -38.8086 4.22412H25.6074C27.3571 4.22412 28.7754 5.64248 28.7754 7.39212V33.0001C28.7754 48.8927 15.892 61.7761 -0.000556946 61.7761H-38.8086C-40.5582 61.7761 -41.9766 60.3578 -41.9766 58.6081V7.39212Z" fill="#58654D" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48779H25.6074C27.2112 4.48779 28.5117 5.78827 28.5117 7.39209V33.0005C28.5115 48.7471 15.7456 61.5122 -0.000976562 61.5122H-38.8086C-40.4124 61.5122 -41.7129 60.2117 -41.7129 58.6079V7.39209C-41.7129 5.78828 -40.4124 4.48781 -38.8086 4.48779Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1545)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#58654D" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#58654D" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_467_1545)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_467_1545)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1545)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1545" x="-45.6053" y="-0.122895" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1545"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1545" result="effect2_innerShadow_467_1545"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1545"/>
+</filter>
+<filter id="filter1_ddi_467_1545" x="-43.0326" y="2.90412" width="72.864" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1545"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1545" result="effect2_dropShadow_467_1545"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1545" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1545"/>
+</filter>
+<filter id="filter2_f_467_1545" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1545"/>
+</filter>
+<filter id="filter3_f_467_1545" x="24.402" y="6.3361" width="2.45964" height="3.29314" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_467_1545"/>
+</filter>
+<linearGradient id="paint0_linear_467_1545" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4FFEA"/>
+<stop offset="0.5" stop-color="#9EA698"/>
+<stop offset="1" stop-color="#626262"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1545" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9CA494"/>
+<stop offset="0.2" stop-color="#58654D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1545" x1="-6.60035" y1="0.933105" x2="-6.60035" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#5D6258"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1545" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8FFF2"/>
+<stop offset="0.201923" stop-color="#C7D2BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1545" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1545">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/왼쪽.svg
new file mode 100644
index 0000000..fbbd70b
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/왼쪽.svg	
@@ -0,0 +1,236 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1518)">
+<mask id="mask0_467_1518" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_467_1518)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1518)"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1518)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1518)">
+<rect x="-66.252" y="0.933105" width="170.438" height="64.1342" rx="6.732" fill="#58654D" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13111" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1518)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1518)">
+<rect x="-59.6523" y="4.22412" width="157.242" height="57.552" rx="3.168" fill="#58654D" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.48812" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1518)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#58654D" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="#58654D" fill-opacity="0.01"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1518)"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1518)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1518)">
+<path d="M2.64258 32.7358C2.64258 14.5104 17.4172 -0.26416 35.6426 -0.26416H66.5306C67.697 -0.26416 68.6426 0.681415 68.6426 1.84784V32.7358C68.6426 50.9612 53.868 65.7358 35.6426 65.7358H4.75458C3.58815 65.7358 2.64258 64.7903 2.64258 63.6238V32.7358Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_467_1518" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_467_1518)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_467_1518)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1518)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_467_1518)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1518)"/>
+<g filter="url(#filter4_iif_467_1518)">
+<path d="M0.93392 33.8745C0.967179 15.6491 15.7687 0.901473 33.9941 0.934732L64.0729 0.989621C64.6561 0.990686 65.128 1.46433 65.1269 2.04755L65.0721 32.1257C65.0388 50.351 50.2373 65.0987 32.0119 65.0654L1.9331 65.0105C1.34989 65.0095 0.877968 64.5358 0.879032 63.9526L0.93392 33.8745Z" fill="#58654D" fill-opacity="0.01"/>
+<path d="M33.9937 1.13297L64.0728 1.18786C64.5464 1.18887 64.9293 1.57323 64.9286 2.04685L64.8737 32.1249C64.8407 50.2409 50.1282 64.9008 32.0122 64.8677L1.93313 64.8129C1.45942 64.8118 1.07641 64.4266 1.07727 63.9529L1.13216 33.8748C1.16523 15.7588 15.8777 1.09992 33.9937 1.13297Z" stroke="url(#paint8_linear_467_1518)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_467_1518)">
+<mask id="path-13-inside-2_467_1518" fill="white">
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z"/>
+</mask>
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_467_1518)"/>
+</g>
+<g filter="url(#filter6_f_467_1518)">
+<mask id="path-14-inside-3_467_1518" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#58654D" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_467_1518)"/>
+</g>
+<mask id="path-15-inside-4_467_1518" fill="white">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z"/>
+</mask>
+<g filter="url(#filter7_i_467_1518)">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" fill="#58654D" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" stroke="url(#paint9_linear_467_1518)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_467_1518)"/>
+<g filter="url(#filter8_dii_467_1518)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0176 13.3682C35.3983 13.3682 36.5176 14.4875 36.5176 15.8682V21.005L46.103 30.5903H52.0741C53.4547 30.5903 54.5741 31.7096 54.5741 33.0903C54.5741 34.471 53.4547 35.5903 52.0741 35.5903H45.3842L36.5176 44.4569V49.8682C36.5176 51.2489 35.3983 52.3681 34.0176 52.3681C32.637 52.3681 31.5177 51.2489 31.5176 49.8682V44.7304L22.3775 35.5903H15.9629C14.5822 35.5903 13.4629 34.471 13.4629 33.0903C13.4629 31.7096 14.5822 30.5903 15.9629 30.5903H21.6587L31.5176 20.7314V15.8682C31.5176 14.4875 32.6369 13.3682 34.0176 13.3682ZM31.5176 41.9018V35.5903H25.2061L31.5176 41.9018ZM36.5176 41.6283L42.5556 35.5903H36.5176V41.6283ZM24.4871 30.5903H31.5176V23.5597L24.4871 30.5903ZM36.5176 30.5903H43.2747L36.5176 23.8333V30.5903Z" fill="url(#paint10_linear_467_1518)"/>
+<path d="M25.1123 35.6836L31.6494 42.2207V35.458H24.8877L25.1123 35.6836ZM36.3857 41.9473L42.6494 35.6836L42.874 35.458H36.3857V41.9473ZM24.168 30.7227H31.6494V23.2412L24.168 30.7227ZM36.3857 30.7227H43.5938L36.3857 23.5146V30.7227ZM31.6494 44.6758L31.6113 44.6367L22.4707 35.4971L22.4326 35.458H15.9629C14.6551 35.458 13.5947 34.3976 13.5947 33.0898C13.595 31.7823 14.6552 30.7227 15.9629 30.7227H21.7139L21.752 30.6836L31.6113 20.8252L31.6494 20.7861V15.8682C31.6494 14.5604 32.7098 13.5 34.0176 13.5C35.3254 13.5 36.3857 14.5604 36.3857 15.8682V21.0596L36.4238 21.0986L46.0098 30.6836L46.0479 30.7227H52.0742C53.3818 30.7228 54.4421 31.7823 54.4424 33.0898C54.4424 34.3976 53.3819 35.4579 52.0742 35.458H45.3291L45.291 35.4971L36.4238 44.3633L36.3857 44.4023V49.8682C36.3857 51.1759 35.3253 52.2363 34.0176 52.2363C32.7098 52.2363 31.6495 51.1759 31.6494 49.8682V44.6758Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1518" x="-66.912" y="-0.122895" width="171.757" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1518"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1518" result="effect2_innerShadow_467_1518"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1518"/>
+</filter>
+<filter id="filter1_ddi_467_1518" x="-60.7083" y="2.90412" width="159.354" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1518"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1518" result="effect2_dropShadow_467_1518"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1518" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1518"/>
+</filter>
+<filter id="filter2_f_467_1518" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1518"/>
+</filter>
+<filter id="filter3_f_467_1518" x="-2.63742" y="-5.54416" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_467_1518"/>
+</filter>
+<filter id="filter4_iif_467_1518" x="0.218906" y="-0.12143" width="65.568" height="65.8469" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1518"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1518" result="effect2_innerShadow_467_1518"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1518"/>
+</filter>
+<filter id="filter5_dd_467_1518" x="3.17252" y="2.90412" width="59.6647" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1518"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1518" result="effect2_dropShadow_467_1518"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1518" result="shape"/>
+</filter>
+<filter id="filter6_f_467_1518" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1518"/>
+</filter>
+<filter id="filter7_i_467_1518" x="5.21028" y="5.73438" width="55.0592" height="55.5877" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1518"/>
+</filter>
+<filter id="filter8_dii_467_1518" x="11.6149" y="12.3122" width="45.3353" height="43.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1518"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_467_1518" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_467_1518"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_467_1518" result="effect3_innerShadow_467_1518"/>
+</filter>
+<linearGradient id="paint0_linear_467_1518" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4FFEA"/>
+<stop offset="0.5" stop-color="#9EA698"/>
+<stop offset="1" stop-color="#626262"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1518" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9CA494"/>
+<stop offset="0.2" stop-color="#58654D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1518" x1="18.9672" y1="0.933105" x2="18.9672" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#5D6258"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1518" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8FFF2"/>
+<stop offset="0.201923" stop-color="#C7D2BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1518" x1="-36.6666" y1="5.34131" x2="-36.6666" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_467_1518" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEE5D7"/>
+<stop offset="0.458959" stop-color="#A2A69E"/>
+<stop offset="1" stop-color="#5B5E57"/>
+</linearGradient>
+<linearGradient id="paint6_linear_467_1518" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C3D0B7"/>
+<stop offset="0.5" stop-color="#6B7464"/>
+<stop offset="1" stop-color="#222520"/>
+</linearGradient>
+<linearGradient id="paint7_linear_467_1518" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9CA494"/>
+<stop offset="0.2" stop-color="#58654D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_467_1518" x1="33.0615" y1="0.93303" x2="32.9445" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#5D6258"/>
+</linearGradient>
+<linearGradient id="paint9_linear_467_1518" x1="6.81248" y1="6.65267" x2="18.6608" y2="57.589" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_467_1518" x1="23.1374" y1="19.1191" x2="49.1137" y2="45.0954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_467_1518">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/중앙.svg
new file mode 100644
index 0000000..8717d46
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/실사화/중앙.svg	
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1537)">
+<g clip-path="url(#clip1_467_1537)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1537)"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1537)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1537)">
+<rect x="-249.951" y="0.933105" width="590.064" height="64.1342" rx="6.732" fill="#58654D" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13111" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1537)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1537)">
+<rect x="-227.107" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="#58654D" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1537)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#58654D" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#58654D" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1537)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1537)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1537" x="-250.611" y="-0.122895" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1537"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1537" result="effect2_innerShadow_467_1537"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1537"/>
+</filter>
+<filter id="filter1_ddi_467_1537" x="-228.163" y="2.90412" width="546.489" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1537"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1537" result="effect2_dropShadow_467_1537"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1537" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1537"/>
+</filter>
+<filter id="filter2_f_467_1537" x="-219.201" y="4.02131" width="528.562" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1537"/>
+</filter>
+<linearGradient id="paint0_linear_467_1537" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F4FFEA"/>
+<stop offset="0.5" stop-color="#9EA698"/>
+<stop offset="1" stop-color="#626262"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1537" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9CA494"/>
+<stop offset="0.2" stop-color="#58654D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1537" x1="45.0809" y1="0.933105" x2="45.0809" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#5D6258"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1537" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F8FFF2"/>
+<stop offset="0.201923" stop-color="#C7D2BE" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1537" x1="-147.526" y1="5.34131" x2="-147.526" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1537">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_467_1537">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/위치도/오른쪽.svg
new file mode 100644
index 0000000..d32978d
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1944" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#444444"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1944)" fill-opacity="0.3"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1944)"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#5B8736" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1944)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1944" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/위치도/왼쪽.svg
new file mode 100644
index 0000000..5f48f93
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/교차로/위치도/왼쪽.svg	
@@ -0,0 +1,15 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1941" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#444444"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1941)"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#5B8736" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1941)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#555555" stroke-width="4"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 13.5C34.3807 13.5 35.5 14.6193 35.5 16V21.1367L45.0859 30.7227H51.0566C52.4373 30.7228 53.5566 31.842 53.5566 33.2227C53.5564 34.6031 52.4371 35.7225 51.0566 35.7227H44.3652L35.5 44.5879V50C35.5 51.3807 34.3807 52.5 33 52.5C31.6193 52.5 30.5 51.3807 30.5 50V44.8613L21.3613 35.7227H14.9453C13.5647 35.7227 12.4455 34.6032 12.4453 33.2227C12.4453 31.8419 13.5646 30.7227 14.9453 30.7227H20.6406L30.5 20.8633V16C30.5 14.6193 31.6193 13.5 33 13.5ZM30.5 42.0332V35.7227H24.1895L30.5 42.0332ZM35.5 35.7227V41.7598L41.5371 35.7227H35.5ZM35.5 30.7227H42.2578L35.5 23.9648V30.7227ZM23.4688 30.7227H30.5V23.6914L23.4688 30.7227Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/오른쪽.svg
new file mode 100644
index 0000000..eb67308
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/오른쪽.svg	
@@ -0,0 +1,148 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_452_3452)">
+<g filter="url(#filter0_i_452_3452)">
+<path d="M-188 40C-188 17.9086 -170.091 0 -148 0H8C30.0914 0 48 17.9086 48 40V86C48 90.9706 43.9706 95 39 95H-178C-183.523 95 -188 90.5229 -188 85V40Z" fill="#A2A69E"/>
+</g>
+<path d="M-148 1.5H8C29.263 1.5 46.5 18.737 46.5 40V86C46.5 90.1421 43.1421 93.5 39 93.5H-178C-182.694 93.5 -186.5 89.6944 -186.5 85V40C-186.5 18.737 -169.263 1.5 -148 1.5Z" stroke="#565A52" stroke-width="3"/>
+<g filter="url(#filter1_i_452_3452)">
+<path d="M-183 42C-183 21.5655 -166.435 5 -146 5H6C26.4345 5 43 21.5655 43 42V90C43 92.2091 41.2091 94 39 94H-179C-181.209 94 -183 92.2091 -183 90V42Z" fill="#A2A69E"/>
+</g>
+<path d="M6 4.5C26.7107 4.5 43.5 21.2893 43.5 42V90C43.5 92.4853 41.4853 94.5 39 94.5H-179C-181.485 94.5 -183.5 92.4853 -183.5 90V42C-183.5 21.2893 -166.711 4.5 -146 4.5H6Z" stroke="#565A52" stroke-opacity="0.647059" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_452_3452)" style="mix-blend-mode:plus-lighter">
+<path d="M43.375 87C43.3733 87.0986 43.3335 87.1931 43.2634 87.2628C43.1932 87.3325 43.0986 87.3717 43 87.3717C42.9014 87.3717 42.8068 87.3325 42.7366 87.2628C42.6665 87.1931 42.6267 87.0986 42.625 87C42.5833 84.637 42.5437 82.2739 42.5062 79.9109C42.3228 68.348 42.1891 56.7851 42.1054 45.2222L42.1088 45.2995C41.2471 35.8075 38.4883 26.1616 31.9222 19.2957C26.3411 13.3418 18.5522 9.86908 10.5659 7.89575L10.7826 7.9216C-2.11522 7.84105 -15.013 7.69843 -27.9109 7.49375C-30.2739 7.45625 -32.637 7.41667 -35 7.375C-35.0986 7.37325 -35.1931 7.33355 -35.2628 7.26338C-35.3326 7.19322 -35.3717 7.09857 -35.3717 7C-35.3717 6.90143 -35.3326 6.80678 -35.2628 6.73662C-35.1931 6.66645 -35.0986 6.62675 -35 6.625C-32.637 6.58333 -30.2739 6.54375 -27.9109 6.50625C-15.013 6.30157 -2.11522 6.15895 10.7826 6.0784L10.9993 6.10425C19.2089 8.02431 27.4266 11.5808 33.3771 17.9233C40.3805 25.2535 43.1549 35.4506 43.8912 45.1449L43.8946 45.2222C43.8109 56.7851 43.6772 68.348 43.4938 79.9109C43.4563 82.2739 43.4167 84.637 43.375 87Z" fill="url(#paint0_linear_452_3452)"/>
+</g>
+<mask id="path-6-inside-1_452_3452" fill="white">
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z"/>
+</mask>
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z" fill="url(#paint1_linear_452_3452)"/>
+<path d="M-173 39C-173 25.1929 -161.807 14 -148 14H9C22.8071 14 34 25.1929 34 39H30C30 27.402 20.598 18 9 18H-148C-159.598 18 -169 27.402 -169 39H-173ZM-169 39M32 72H-171H32M-167 72C-170.314 72 -173 69.3137 -173 66V39C-173 25.1929 -161.807 14 -148 14V18C-159.598 18 -169 27.402 -169 39V68C-169 70.2091 -168.105 72 -167 72ZM9 14C22.8071 14 34 25.1929 34 39V66C34 69.3137 31.3137 72 28 72C29.1046 72 30 70.2091 30 68V39C30 27.402 20.598 18 9 18V14Z" fill="#3F433C" mask="url(#path-6-inside-1_452_3452)"/>
+<mask id="path-8-inside-2_452_3452" fill="white">
+<path d="M-173 38C-173 24.7452 -162.255 14 -149 14H10C23.2548 14 34 24.7452 34 38V68C34 70.2091 32.2091 72 30 72H-169C-171.209 72 -173 70.2091 -173 68V38Z"/>
+</mask>
+<path d="M-174 38C-174 24.1929 -162.807 13 -149 13H10C23.8071 13 35 24.1929 35 38H33C33 25.2975 22.7025 15 10 15H-149C-161.703 15 -172 25.2975 -172 38H-174ZM-172 38M34 72H-173H34M-169 72C-171.761 72 -174 69.7614 -174 67V38C-174 24.1929 -162.807 13 -149 13V15C-161.703 15 -172 25.2975 -172 38V68C-172 70.2091 -170.657 72 -169 72ZM10 13C23.8071 13 35 24.1929 35 38V67C35 69.7614 32.7614 72 30 72C31.6569 72 33 70.2091 33 68V38C33 25.2975 22.7025 15 10 15V13Z" fill="url(#paint2_linear_452_3452)" mask="url(#path-8-inside-2_452_3452)"/>
+<g filter="url(#filter3_f_452_3452)" style="mix-blend-mode:color-dodge">
+<path d="M43.875 84C43.8728 84.0984 43.8331 84.1927 43.7629 84.2622C43.6928 84.3318 43.5983 84.3709 43.5 84.3709C43.4017 84.3709 43.3072 84.3318 43.2371 84.2622C43.1669 84.1927 43.1272 84.0984 43.125 84C43.125 84 43.125 84 43.125 84C43.0833 82.119 43.0437 80.2381 43.0062 78.3571C42.7547 65.7381 42.5969 53.1191 42.5328 40.5C42.5141 36.3142 41.6745 32.1433 40.0904 28.272C35.312 16.4179 23.7498 8.07363 11.1573 5.6879L11.2826 5.69922C7.40269 5.63959 3.52277 5.5711 -0.357147 5.49375C-2.2381 5.45625 -4.11905 5.41667 -6 5.375C-6.09836 5.37281 -6.19269 5.33305 -6.26224 5.26293C-6.33179 5.19281 -6.37086 5.09834 -6.37086 5C-6.37086 4.90166 -6.33179 4.80719 -6.26224 4.73707C-6.19269 4.66695 -6.09836 4.62719 -6 4.625C-4.11905 4.58333 -2.2381 4.54375 -0.357147 4.50625C3.52277 4.4289 7.40269 4.36041 11.2826 4.30078L11.4079 4.3121C24.4545 6.35251 36.872 14.9223 41.9419 27.5158C43.6225 31.6213 44.493 36.064 44.4672 40.5C44.4031 53.1191 44.2453 65.7381 43.9938 78.3571C43.9563 80.2381 43.9167 82.119 43.875 84Z" fill="url(#paint3_linear_452_3452)"/>
+</g>
+<g filter="url(#filter4_f_452_3452)">
+<path d="M-145 5.5H5C25.7107 5.5 42.5 22.2893 42.5 43V85.7949L31.5645 68.6934C32.7322 67.8814 33.5 66.5322 33.5 65V39C33.5 25.469 22.531 14.5 9 14.5H-149C-162.531 14.5 -173.5 25.469 -173.5 39V65C-173.5 67.0752 -172.095 68.8207 -170.185 69.3408L-182.5 87.835V43C-182.5 22.2893 -165.711 5.5 -145 5.5Z" stroke="url(#paint4_linear_452_3452)"/>
+</g>
+<g opacity="0.4" filter="url(#filter5_f_452_3452)">
+<path d="M29.8113 70.8396H10L13.1698 66.6721H29.0189V33.9283C29.0189 27.2605 22 23 17.5 18C24 22 30.3396 29.1656 31 33.9283V69.8084C30.7822 70.565 30.4874 70.762 29.8113 70.8396Z" fill="url(#paint5_linear_452_3452)"/>
+</g>
+<path d="M-182.28 92.7413C-183.047 92.7413 -183.529 91.9133 -183.149 91.2466L-169.537 67.3301H30.5369L44.1493 91.2466C44.5287 91.9133 44.0473 92.7413 43.2802 92.7413H-182.28Z" fill="url(#paint6_linear_452_3452)" stroke="#565A52" stroke-width="1.2"/>
+<path d="M-179.887 90L-181.5 94.2753L40 95C42.1116 94.5403 42.5 94.5 44 93.5C44.4948 91.6462 44.3287 90.9728 42.9983 90.2433L-179.887 90Z" fill="#565A52"/>
+<g opacity="0.5" filter="url(#filter6_f_452_3452)" style="mix-blend-mode:plus-lighter">
+<path d="M-168 67.9077H29L40.5 89.8538H-179.5L-168 67.9077Z" stroke="url(#paint7_linear_452_3452)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter7_f_452_3452)">
+<path d="M9.0957 19.8955C21.2124 21.962 26.9999 27.9322 26.9999 40.1421V63.5001" stroke="url(#paint8_linear_452_3452)" stroke-width="2"/>
+</g>
+<line x1="-169.5" y1="66.5" x2="30.5" y2="66.5" stroke="url(#paint9_linear_452_3452)" stroke-linecap="round"/>
+<line x1="-180" y1="92.5" x2="41" y2="92.5" stroke="url(#paint10_linear_452_3452)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_452_3452" x="-188" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.721569 0 0 0 0 0.741176 0 0 0 0 0.701961 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_452_3452"/>
+</filter>
+<filter id="filter1_i_452_3452" x="-184" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.721569 0 0 0 0 0.741176 0 0 0 0 0.701961 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_452_3452"/>
+</filter>
+<filter id="filter2_f_452_3452" x="-37.3711" y="4.07861" width="83.2656" height="85.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_452_3452"/>
+</filter>
+<filter id="filter3_f_452_3452" x="-8.37109" y="2.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_452_3452"/>
+</filter>
+<filter id="filter4_f_452_3452" x="-184" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_452_3452"/>
+</filter>
+<filter id="filter5_f_452_3452" x="8" y="16" width="25" height="56.8398" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_452_3452"/>
+</filter>
+<filter id="filter6_f_452_3452" x="-182.152" y="65.9077" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_452_3452"/>
+</filter>
+<filter id="filter7_f_452_3452" x="5.22773" y="15.2097" width="26.4723" height="51.9903" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_452_3452"/>
+</filter>
+<linearGradient id="paint0_linear_452_3452" x1="4" y1="6.11111" x2="47.5893" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_452_3452" x1="-69.5" y1="16" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B7066"/>
+<stop offset="1" stop-color="#252723"/>
+</linearGradient>
+<linearGradient id="paint2_linear_452_3452" x1="-69.5" y1="14" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_452_3452" x1="4.49999" y1="4.12222" x2="47.5449" y2="47.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_452_3452" x1="-162" y1="6.97622" x2="42.5351" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5DCCF"/>
+<stop offset="1" stop-color="#ABB5A3"/>
+</linearGradient>
+<linearGradient id="paint5_linear_452_3452" x1="31" y1="43.1561" x2="27.0377" y2="43.1561" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A69E"/>
+<stop offset="1" stop-color="#A2A69E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_452_3452" x1="-184" y1="80.0357" x2="-146.5" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A69E"/>
+<stop offset="1" stop-color="#747870"/>
+</linearGradient>
+<linearGradient id="paint7_linear_452_3452" x1="-69.5" y1="67.9077" x2="-69.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3"/>
+</linearGradient>
+<linearGradient id="paint8_linear_452_3452" x1="14" y1="37.5" x2="25.6316" y2="27.6053" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A69E" stop-opacity="0"/>
+<stop offset="1" stop-color="#A2A69E"/>
+</linearGradient>
+<linearGradient id="paint9_linear_452_3452" x1="-170" y1="67.5" x2="31" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F433C" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#3F433C"/>
+<stop offset="0.9" stop-color="#3F433C"/>
+<stop offset="1" stop-color="#3F433C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_452_3452" x1="-180.5" y1="93.5" x2="41.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#565A52" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#565A52"/>
+<stop offset="0.9" stop-color="#565A52"/>
+<stop offset="1" stop-color="#565A52" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_452_3452">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/왼쪽.svg
new file mode 100644
index 0000000..05b9016
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/왼쪽.svg	
@@ -0,0 +1,134 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_452_3404)">
+<g filter="url(#filter0_i_452_3404)">
+<path d="M0 40C0 17.9086 17.9086 0 40 0H196C218.091 0 236 17.9086 236 40V86C236 90.9706 231.971 95 227 95H10C4.47715 95 0 90.5229 0 85V40Z" fill="#A2A69E"/>
+</g>
+<path d="M40 1.5H196C217.263 1.5 234.5 18.737 234.5 40V86C234.5 90.1421 231.142 93.5 227 93.5H10C5.30558 93.5 1.5 89.6944 1.5 85V40C1.5 18.737 18.737 1.5 40 1.5Z" stroke="#565A52" stroke-width="3"/>
+<g filter="url(#filter1_i_452_3404)">
+<path d="M5 42C5 21.5655 21.5655 5 42 5H194C214.435 5 231 21.5655 231 42V90C231 92.2091 229.209 94 227 94H9C6.79086 94 5 92.2091 5 90V42Z" fill="#A2A69E"/>
+</g>
+<path d="M194 4.5C214.711 4.5 231.5 21.2893 231.5 42V90C231.5 92.4853 229.485 94.5 227 94.5H9C6.51472 94.5 4.5 92.4853 4.5 90V42C4.5 21.2893 21.2893 4.5 42 4.5H194Z" stroke="#565A52" stroke-opacity="0.647059" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_452_3404)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 87C6.62675 87.0986 6.66645 87.1931 6.73662 87.2628C6.80678 87.3325 6.90143 87.3717 7 87.3717C7.09857 87.3717 7.19322 87.3325 7.26338 87.2628C7.33355 87.1931 7.37325 87.0986 7.375 87C7.41667 84.637 7.45625 82.2739 7.49375 79.9109C7.67725 68.348 7.81086 56.7851 7.89459 45.2222L7.89125 45.2995C8.7529 35.8075 11.5117 26.1616 18.0778 19.2957C23.6589 13.3418 31.4478 9.86908 39.4341 7.89575L39.2174 7.9216C52.1152 7.84105 65.013 7.69843 77.9109 7.49375C80.2739 7.45625 82.637 7.41667 85 7.375C85.0986 7.37325 85.1931 7.33355 85.2628 7.26338C85.3326 7.19322 85.3717 7.09857 85.3717 7C85.3717 6.90143 85.3326 6.80678 85.2628 6.73662C85.1931 6.66645 85.0986 6.62675 85 6.625C82.637 6.58333 80.2739 6.54375 77.9109 6.50625C65.013 6.30157 52.1152 6.15895 39.2174 6.0784L39.0007 6.10425C30.7911 8.02431 22.5734 11.5808 16.6229 17.9233C9.61946 25.2535 6.84506 35.4506 6.10875 45.1449L6.10541 45.2222C6.18914 56.7851 6.32275 68.348 6.50625 79.9109C6.54375 82.2739 6.58333 84.637 6.625 87Z" fill="url(#paint0_linear_452_3404)"/>
+</g>
+<mask id="path-6-inside-1_452_3404" fill="white">
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z"/>
+</mask>
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z" fill="url(#paint1_linear_452_3404)"/>
+<path d="M15 39C15 25.1929 26.1929 14 40 14H197C210.807 14 222 25.1929 222 39H218C218 27.402 208.598 18 197 18H40C28.402 18 19 27.402 19 39H15ZM19 39M220 72H17H220M21 72C17.6863 72 15 69.3137 15 66V39C15 25.1929 26.1929 14 40 14V18C28.402 18 19 27.402 19 39V68C19 70.2091 19.8954 72 21 72ZM197 14C210.807 14 222 25.1929 222 39V66C222 69.3137 219.314 72 216 72C217.105 72 218 70.2091 218 68V39C218 27.402 208.598 18 197 18V14Z" fill="#3F433C" mask="url(#path-6-inside-1_452_3404)"/>
+<mask id="path-8-inside-2_452_3404" fill="white">
+<path d="M15 38C15 24.7452 25.7452 14 39 14H198C211.255 14 222 24.7452 222 38V68C222 70.2091 220.209 72 218 72H19C16.7909 72 15 70.2091 15 68V38Z"/>
+</mask>
+<path d="M14 38C14 24.1929 25.1929 13 39 13H198C211.807 13 223 24.1929 223 38H221C221 25.2975 210.703 15 198 15H39C26.2975 15 16 25.2975 16 38H14ZM16 38M222 72H15H222M19 72C16.2386 72 14 69.7614 14 67V38C14 24.1929 25.1929 13 39 13V15C26.2975 15 16 25.2975 16 38V68C16 70.2091 17.3431 72 19 72ZM198 13C211.807 13 223 24.1929 223 38V67C223 69.7614 220.761 72 218 72C219.657 72 221 70.2091 221 68V38C221 25.2975 210.703 15 198 15V13Z" fill="url(#paint2_linear_452_3404)" mask="url(#path-8-inside-2_452_3404)"/>
+<g filter="url(#filter3_f_452_3404)">
+<path d="M21.9375 65.5C21.9473 65.6443 22.0078 65.7826 22.1123 65.8846C22.2168 65.9866 22.3558 66.0439 22.5 66.0439C22.6442 66.0439 22.7832 65.9866 22.8877 65.8846C22.9922 65.7826 23.0527 65.6443 23.0625 65.5C23.0625 65.5 23.0625 65.5 23.0625 65.5C23.125 64.5706 23.1844 63.6412 23.2406 62.7118C23.6585 55.8079 23.9039 48.9039 23.9768 42L23.9708 42.1337C24.1156 40.7127 24.2988 39.3046 24.5499 37.9233C25.5527 29.813 31.3226 23.5852 39.4095 21.4043C39.6541 21.3263 39.9028 21.2496 40.1556 21.1744L40 21.1922C40.6667 21.1506 41.3333 21.1073 42 21.0625C42.1443 21.0527 42.2826 20.9922 42.3846 20.8877C42.4866 20.7832 42.5439 20.6442 42.5439 20.5C42.5439 20.3558 42.4866 20.2168 42.3846 20.1123C42.2826 20.0078 42.1443 19.9473 42 19.9375C41.3333 19.8927 40.6667 19.8494 40 19.8078L39.8444 19.8256C39.5753 19.8708 39.3097 19.9183 39.0475 19.9679C30.5538 20.9146 22.4625 28.5392 21.5983 37.3865C21.3268 38.8804 21.1494 40.3766 21.0292 41.8663L21.0232 42C21.0961 48.9039 21.3415 55.8079 21.7594 62.7118C21.8156 63.6412 21.875 64.5706 21.9375 65.5Z" fill="url(#paint3_linear_452_3404)"/>
+</g>
+<g filter="url(#filter4_f_452_3404)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 86C6.62719 86.0984 6.66695 86.1927 6.73707 86.2622C6.80719 86.3318 6.90166 86.3709 7 86.3709C7.09834 86.3709 7.19281 86.3318 7.26293 86.2622C7.33305 86.1927 7.37281 86.0984 7.375 86C7.375 86 7.375 86 7.375 86C7.41667 84.119 7.45625 82.2381 7.49375 80.3571C7.74533 67.7381 7.90315 55.1191 7.96719 42.5C7.98589 38.3142 8.8255 34.1433 10.4096 30.272C15.188 18.4179 26.7502 10.0736 39.3427 7.6879L39.2174 7.69922C43.0973 7.63959 46.9772 7.5711 50.8571 7.49375C52.7381 7.45625 54.619 7.41667 56.5 7.375C56.5984 7.37281 56.6927 7.33305 56.7622 7.26293C56.8318 7.19281 56.8709 7.09834 56.8709 7C56.8709 6.90166 56.8318 6.80719 56.7622 6.73707C56.6927 6.66695 56.5984 6.62719 56.5 6.625C54.619 6.58333 52.7381 6.54375 50.8571 6.50625C46.9772 6.4289 43.0973 6.36041 39.2174 6.30078L39.0921 6.3121C26.0455 8.35251 13.628 16.9223 8.55807 29.5158C6.87747 33.6213 6.00697 38.064 6.03281 42.5C6.09685 55.1191 6.25467 67.7381 6.50625 80.3571C6.54375 82.2381 6.58333 84.119 6.625 86Z" fill="url(#paint4_linear_452_3404)"/>
+</g>
+<g filter="url(#filter5_f_452_3404)">
+<path d="M43 5.5H193C213.711 5.5 230.5 22.2893 230.5 43V85.7949L219.564 68.6934C220.732 67.8814 221.5 66.5322 221.5 65V39C221.5 25.469 210.531 14.5 197 14.5H39C25.469 14.5 14.5 25.469 14.5 39V65C14.5 67.0752 15.9051 68.8207 17.8154 69.3408L5.5 87.835V43C5.5 22.2893 22.2893 5.5 43 5.5Z" stroke="url(#paint5_linear_452_3404)"/>
+</g>
+<path d="M5.71979 92.7413C4.95273 92.7413 4.47127 91.9133 4.8507 91.2466L18.4632 67.3301H218.537L232.149 91.2466C232.529 91.9133 232.047 92.7413 231.28 92.7413H5.71979Z" fill="#747870" stroke="#565A52" stroke-width="1.2"/>
+<path d="M7.22949 92.3823L5.24609 91.7212L14.833 75.5229L7.22949 92.3823Z" fill="#565A52" stroke="#565A52"/>
+<path d="M8.11374 90C4.80054 92.2174 6.19336 94 9.69413 95H228.001C230.112 94.5403 230.501 94.5 232.001 93.5L230.999 90.2433L8.11374 90Z" fill="#565A52"/>
+<g opacity="0.5" filter="url(#filter6_f_452_3404)" style="mix-blend-mode:plus-lighter">
+<path d="M20 67.9077H217L228.5 89.8538H8.5L20 67.9077Z" stroke="url(#paint6_linear_452_3404)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line x1="18.5" y1="66.5" x2="218.5" y2="66.5" stroke="url(#paint7_linear_452_3404)" stroke-linecap="round"/>
+<line x1="8" y1="92.5" x2="229" y2="92.5" stroke="url(#paint8_linear_452_3404)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_452_3404" x="0" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.721569 0 0 0 0 0.741176 0 0 0 0 0.701961 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_452_3404"/>
+</filter>
+<filter id="filter1_i_452_3404" x="4" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.721569 0 0 0 0 0.741176 0 0 0 0 0.701961 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_452_3404"/>
+</filter>
+<filter id="filter2_f_452_3404" x="4.10547" y="4.07861" width="83.2656" height="85.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_452_3404"/>
+</filter>
+<filter id="filter3_f_452_3404" x="19.0234" y="17.8076" width="25.5195" height="50.2363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_452_3404"/>
+</filter>
+<filter id="filter4_f_452_3404" x="4.0332" y="4.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_452_3404"/>
+</filter>
+<filter id="filter5_f_452_3404" x="4" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_452_3404"/>
+</filter>
+<filter id="filter6_f_452_3404" x="5.84766" y="65.9077" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_452_3404"/>
+</filter>
+<linearGradient id="paint0_linear_452_3404" x1="46" y1="6.11111" x2="2.41074" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_452_3404" x1="118.5" y1="16" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B7066"/>
+<stop offset="1" stop-color="#252723"/>
+</linearGradient>
+<linearGradient id="paint2_linear_452_3404" x1="118.5" y1="14" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_452_3404" x1="45.5" y1="20" x2="21" y2="45.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_452_3404" x1="46" y1="6.12222" x2="2.95507" y2="49.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_452_3404" x1="26" y1="6.97622" x2="230.535" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5DCCF"/>
+<stop offset="1" stop-color="#ABB5A3"/>
+</linearGradient>
+<linearGradient id="paint6_linear_452_3404" x1="118.5" y1="67.9077" x2="118.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3"/>
+</linearGradient>
+<linearGradient id="paint7_linear_452_3404" x1="18" y1="67.5" x2="219" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F433C" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#3F433C"/>
+<stop offset="0.9" stop-color="#3F433C"/>
+<stop offset="1" stop-color="#3F433C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_452_3404" x1="7.5" y1="93.5" x2="229.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#565A52" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#565A52"/>
+<stop offset="0.9" stop-color="#565A52"/>
+<stop offset="1" stop-color="#565A52" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_452_3404">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/중앙.svg
new file mode 100644
index 0000000..969bf47
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/실사화/중앙.svg	
@@ -0,0 +1,103 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_452_3354)">
+<g clip-path="url(#clip1_452_3354)">
+<g filter="url(#filter0_i_452_3354)">
+<path d="M-547.408 40C-547.408 17.9086 -529.5 0 -507.408 0H567.408C589.5 0 607.408 17.9086 607.408 40V86C607.408 90.9706 603.379 95 598.408 95H-537.408C-542.931 95 -547.408 90.5229 -547.408 85V40Z" fill="#A2A69E"/>
+</g>
+<path d="M-507.408 1.5H567.408C588.671 1.5 605.908 18.737 605.908 40V86C605.908 90.1421 602.55 93.5 598.408 93.5H-537.408C-542.103 93.5 -545.908 89.6944 -545.908 85V40C-545.908 18.737 -528.671 1.5 -507.408 1.5Z" stroke="#565A52" stroke-width="3"/>
+<g filter="url(#filter1_i_452_3354)">
+<path d="M-522.941 42C-522.941 21.5655 -506.376 5 -485.941 5H545.942C566.377 5 582.942 21.5655 582.942 42V90C582.942 92.2091 581.151 94 578.942 94H-518.941C-521.151 94 -522.941 92.2091 -522.941 90V42Z" fill="#A2A69E"/>
+</g>
+<path d="M545.942 4.5C566.653 4.50013 583.442 21.2894 583.442 42V90C583.442 92.4852 581.428 94.4999 578.942 94.5H-518.941C-521.427 94.5 -523.441 92.4853 -523.441 90V42C-523.441 21.2893 -506.652 4.5 -485.941 4.5H545.942Z" stroke="#565A52" stroke-opacity="0.647059" style="mix-blend-mode:multiply"/>
+<mask id="path-5-inside-1_452_3354" fill="white">
+<path d="M-464.223 39C-464.223 26.2975 -453.925 16 -441.223 16H506.115C518.818 16 529.115 26.2975 529.115 39V68C529.115 70.2091 527.324 72 525.115 72H-460.223C-462.432 72 -464.223 70.2091 -464.223 68V39Z"/>
+</mask>
+<path d="M-464.223 39C-464.223 26.2975 -453.925 16 -441.223 16H506.115C518.818 16 529.115 26.2975 529.115 39V68C529.115 70.2091 527.324 72 525.115 72H-460.223C-462.432 72 -464.223 70.2091 -464.223 68V39Z" fill="url(#paint0_linear_452_3354)"/>
+<path d="M-466.223 39C-466.223 25.1929 -455.03 14 -441.223 14H506.115C519.922 14 531.115 25.1929 531.115 39H527.115C527.115 27.402 517.713 18 506.115 18H-441.223C-452.821 18 -462.223 27.402 -462.223 39H-466.223ZM-462.223 39M529.115 72H-464.223H529.115M-460.223 72C-463.536 72 -466.223 69.3137 -466.223 66V39C-466.223 25.1929 -455.03 14 -441.223 14V18C-452.821 18 -462.223 27.402 -462.223 39V68C-462.223 70.2091 -461.327 72 -460.223 72ZM506.115 14C519.922 14 531.115 25.1929 531.115 39V66C531.115 69.3137 528.429 72 525.115 72C526.22 72 527.115 70.2091 527.115 68V39C527.115 27.402 517.713 18 506.115 18V14Z" fill="#3F433C" mask="url(#path-5-inside-1_452_3354)"/>
+<mask id="path-7-inside-2_452_3354" fill="white">
+<path d="M-474.01 38C-474.01 24.7452 -463.265 14 -450.01 14H514.901C528.156 14 538.901 24.7452 538.901 38V68C538.901 70.2091 537.11 72 534.901 72H-470.01C-472.219 72 -474.01 70.2091 -474.01 68V38Z"/>
+</mask>
+<path d="M-475.01 38C-475.01 24.1929 -463.817 13 -450.01 13H514.901C528.708 13 539.901 24.1929 539.901 38H537.901C537.901 25.2975 527.604 15 514.901 15H-450.01C-462.712 15 -473.01 25.2975 -473.01 38H-475.01ZM-473.01 38M538.901 72H-474.01H538.901M-470.01 72C-472.771 72 -475.01 69.7614 -475.01 67V38C-475.01 24.1929 -463.817 13 -450.01 13V15C-462.712 15 -473.01 25.2975 -473.01 38V68C-473.01 70.2091 -471.667 72 -470.01 72ZM514.901 13C528.708 13 539.901 24.1929 539.901 38V67C539.901 69.7614 537.663 72 534.901 72C536.558 72 537.901 70.2091 537.901 68V38C537.901 25.2975 527.604 15 514.901 15V13Z" fill="url(#paint1_linear_452_3354)" mask="url(#path-7-inside-2_452_3354)"/>
+<g filter="url(#filter2_f_452_3354)">
+<path d="M-484.941 5.5H544.941C565.652 5.5 582.441 22.2893 582.441 43V87.2227L526.985 69.5H530.009C532.494 69.5 534.509 67.4853 534.509 65V39C534.509 25.469 523.54 14.5 510.009 14.5H-450.009C-463.54 14.5 -474.509 25.469 -474.509 39V65C-474.509 67.4853 -472.494 69.5 -470.009 69.5H-458.271L-522.242 89.1309C-522.371 88.7668 -522.441 88.3753 -522.441 87.9668V43C-522.441 22.2893 -505.652 5.5 -484.941 5.5Z" stroke="url(#paint2_linear_452_3354)"/>
+</g>
+<path d="M-522.09 92.7413C-523.211 92.7413 -523.483 91.179 -522.428 90.8001L-457.062 67.3301H521.957L587.323 90.8001C588.378 91.179 588.106 92.7413 586.985 92.7413H-522.09Z" fill="url(#paint3_linear_452_3354)" stroke="#565A52" stroke-width="1.2"/>
+<path d="M-507.709 90L-515.602 95.2753L568.262 96C578.595 95.5403 580.495 94.5 587.835 93.5L582.934 90.2433L-507.709 90Z" fill="#565A52"/>
+<g opacity="0.5" filter="url(#filter3_f_452_3354)" style="mix-blend-mode:plus-lighter">
+<path d="M-449.542 67.9077H514.437L570.709 89.8538H-505.814L-449.542 67.9077Z" stroke="url(#paint4_linear_452_3354)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line x1="-458.828" y1="66.5" x2="523.723" y2="66.5" stroke="url(#paint5_linear_452_3354)" stroke-linecap="round"/>
+<line x1="-510.209" y1="92.5" x2="575.101" y2="92.5" stroke="url(#paint6_linear_452_3354)" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_452_3354" x="-547.408" y="0" width="1156.82" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.721569 0 0 0 0 0.741176 0 0 0 0 0.701961 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_452_3354"/>
+</filter>
+<filter id="filter1_i_452_3354" x="-523.941" y="4" width="1109.88" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.721569 0 0 0 0 0.741176 0 0 0 0 0.701961 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_452_3354"/>
+</filter>
+<filter id="filter2_f_452_3354" x="-523.941" y="4" width="1107.88" height="86.7412" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_452_3354"/>
+</filter>
+<filter id="filter3_f_452_3354" x="-507.178" y="65.9077" width="1079.25" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_452_3354"/>
+</filter>
+<linearGradient id="paint0_linear_452_3354" x1="32.4463" y1="16" x2="32.4463" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B7066"/>
+<stop offset="1" stop-color="#252723"/>
+</linearGradient>
+<linearGradient id="paint1_linear_452_3354" x1="32.4457" y1="14" x2="32.4457" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_452_3354" x1="-420.182" y1="6.98896" x2="-104.722" y2="506.72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5DCCF"/>
+<stop offset="1" stop-color="#ABB5A3"/>
+</linearGradient>
+<linearGradient id="paint3_linear_452_3354" x1="-527.834" y1="80.0357" x2="-344.336" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A2A69E"/>
+<stop offset="1" stop-color="#747870"/>
+</linearGradient>
+<linearGradient id="paint4_linear_452_3354" x1="32.4474" y1="67.9077" x2="32.4474" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8BDB3"/>
+<stop offset="1" stop-color="#B8BDB3"/>
+</linearGradient>
+<linearGradient id="paint5_linear_452_3354" x1="-459.328" y1="67.5" x2="524.223" y2="67.5004" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F433C" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#3F433C"/>
+<stop offset="0.9" stop-color="#3F433C"/>
+<stop offset="1" stop-color="#3F433C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_452_3354" x1="-510.709" y1="93.5" x2="575.601" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#565A52" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#565A52"/>
+<stop offset="0.9" stop-color="#565A52"/>
+<stop offset="1" stop-color="#565A52" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_452_3354">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_452_3354">
+<rect width="716" height="95" fill="white" transform="translate(-316)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/오른쪽.svg
new file mode 100644
index 0000000..f9f2bd7
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/오른쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7457)">
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#555555"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#555555" stroke-width="11"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#AAAAAA"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#555555" stroke-width="4"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#777777"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_7457" fill="white">
+<path d="M-152.746 45.5801C-152.746 23.4887 -134.837 5.58008 -112.746 5.58008H-1.74609C19.793 5.58008 37.2539 23.041 37.2539 44.5801V88H-152.746V45.5801Z"/>
+</mask>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_7457)"/>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#5B8736" fill-opacity="0.1" mask="url(#path-4-inside-1_450_7457)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_7457">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/왼쪽.svg
new file mode 100644
index 0000000..d8b6740
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/왼쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7440)">
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#555555"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#555555" stroke-width="11"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#AAAAAA"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#555555" stroke-width="4"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#777777"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_7440" fill="white">
+<path d="M5.25391 45.5801C5.25391 23.4887 23.1625 5.58008 45.2539 5.58008H156.254C177.793 5.58008 195.254 23.041 195.254 44.5801V88H5.25391V45.5801Z"/>
+</mask>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_7440)"/>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#5B8736" fill-opacity="0.1" mask="url(#path-4-inside-1_450_7440)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_7440">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/중앙.svg
new file mode 100644
index 0000000..670b19b
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/시도,군도/터널/위치도/중앙.svg	
@@ -0,0 +1,31 @@
+<svg width="124" height="93" viewBox="0 0 124 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7446)">
+<mask id="mask0_450_7446" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="329" height="93">
+<rect width="329" height="93" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_7446)">
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#555555"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#555555" stroke-width="11"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#AAAAAA"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#555555" stroke-width="4"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#777777"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#5B8736" fill-opacity="0.1"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#555555" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#5B8736" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-5-inside-1_450_7446" fill="white">
+<path d="M-2336.8 45.5801C-2336.8 23.4887 -2318.89 5.58008 -2296.8 5.58008H1301.26C1322.8 5.58008 1340.26 23.041 1340.26 44.5801V88H-2336.8V45.5801Z"/>
+</mask>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#555555" mask="url(#path-5-inside-1_450_7446)"/>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#5B8736" fill-opacity="0.1" mask="url(#path-5-inside-1_450_7446)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_450_7446">
+<rect width="124" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/오른쪽.svg
new file mode 100644
index 0000000..5ab9ba6
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/오른쪽.svg	
@@ -0,0 +1,163 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8613)">
+<g clip-path="url(#clip1_450_8613)">
+<g filter="url(#filter0_i_450_8613)">
+<path d="M-133.938 29.9821C-133.938 22.9121 -128.206 17.1807 -121.136 17.1807H2.83551C9.90555 17.1807 15.637 22.9121 15.637 29.9821V65.6913H-133.938V29.9821Z" fill="url(#paint0_linear_450_8613)"/>
+<path d="M-133.938 29.9821C-133.938 22.9121 -128.206 17.1807 -121.136 17.1807H2.83551C9.90555 17.1807 15.637 22.9121 15.637 29.9821V65.6913H-133.938V29.9821Z" fill="url(#paint1_linear_450_8613)"/>
+</g>
+<path d="M-121.136 17.7139H2.83594C9.6112 17.7141 15.1035 23.2071 15.1035 29.9824V65.1582H-133.404V29.9824C-133.404 23.207 -127.911 17.7139 -121.136 17.7139Z" stroke="black" stroke-width="1.06678"/>
+<path d="M34.75 66.2539C40.6417 66.2539 45.4179 71.0302 45.418 76.9219V93.9707H-163.796V76.9219C-163.796 71.0303 -159.02 66.254 -153.128 66.2539H34.75Z" fill="#7C776B" stroke="#37332B" stroke-width="4.26714"/>
+<g opacity="0.4" filter="url(#filter1_f_450_8613)" style="mix-blend-mode:plus-lighter">
+<path d="M35.458 69.8745C39.2875 69.8745 42.3914 72.9787 42.3916 76.8081V92.2769H-160.297V76.8081C-160.297 72.9788 -157.193 69.8747 -153.363 69.8745H35.458Z" stroke="url(#paint2_linear_450_8613)" stroke-width="1.06678"/>
+</g>
+<mask id="path-5-outside-1_450_8613" maskUnits="userSpaceOnUse" x="-169.033" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-169.033" y="-0.639648" width="219" height="69"/>
+<path d="M45.6504 11.8717C45.6504 12.4609 45.1716 12.9351 44.5835 12.97C35.2827 13.5218 27.9102 21.2394 27.9102 30.6787V62.4068C27.9102 62.996 27.4325 63.4736 26.8434 63.4736H20.5424C19.9532 63.4736 19.4756 62.996 19.4756 62.4068V30.6787C19.4756 20.8818 11.5339 12.9395 1.73732 12.9385C1.73624 12.9385 1.73535 12.9376 1.73535 12.9365C1.73535 12.9354 1.73448 12.9346 1.7334 12.9346H-120.093C-120.094 12.9346 -120.095 12.9354 -120.095 12.9365C-120.095 12.9376 -120.096 12.9385 -120.097 12.9385C-129.893 12.9397 -137.834 20.8819 -137.834 30.6787V62.4068C-137.834 62.996 -138.312 63.4736 -138.901 63.4736H-145.202C-145.791 63.4736 -146.269 62.996 -146.269 62.4068V30.6787C-146.269 21.2395 -153.641 13.5219 -162.942 12.97C-163.53 12.9352 -164.009 12.4609 -164.009 11.8717V7.86171C-164.009 7.27254 -163.531 6.79492 -162.942 6.79492H44.5836C45.1728 6.79492 45.6504 7.27254 45.6504 7.86171V11.8717ZM45.6523 5.11182C45.6523 5.52684 45.3159 5.86328 44.9009 5.86328H-163.282C-163.697 5.86328 -164.033 5.52684 -164.033 5.11182C-164.033 4.69679 -163.697 4.36035 -163.282 4.36035H44.9009C45.3159 4.36035 45.6523 4.69679 45.6523 5.11182Z"/>
+</mask>
+<path d="M45.6504 11.8717C45.6504 12.4609 45.1716 12.9351 44.5835 12.97C35.2827 13.5218 27.9102 21.2394 27.9102 30.6787V62.4068C27.9102 62.996 27.4325 63.4736 26.8434 63.4736H20.5424C19.9532 63.4736 19.4756 62.996 19.4756 62.4068V30.6787C19.4756 20.8818 11.5339 12.9395 1.73732 12.9385C1.73624 12.9385 1.73535 12.9376 1.73535 12.9365C1.73535 12.9354 1.73448 12.9346 1.7334 12.9346H-120.093C-120.094 12.9346 -120.095 12.9354 -120.095 12.9365C-120.095 12.9376 -120.096 12.9385 -120.097 12.9385C-129.893 12.9397 -137.834 20.8819 -137.834 30.6787V62.4068C-137.834 62.996 -138.312 63.4736 -138.901 63.4736H-145.202C-145.791 63.4736 -146.269 62.996 -146.269 62.4068V30.6787C-146.269 21.2395 -153.641 13.5219 -162.942 12.97C-163.53 12.9352 -164.009 12.4609 -164.009 11.8717V7.86171C-164.009 7.27254 -163.531 6.79492 -162.942 6.79492H44.5836C45.1728 6.79492 45.6504 7.27254 45.6504 7.86171V11.8717ZM45.6523 5.11182C45.6523 5.52684 45.3159 5.86328 44.9009 5.86328H-163.282C-163.697 5.86328 -164.033 5.52684 -164.033 5.11182C-164.033 4.69679 -163.697 4.36035 -163.282 4.36035H44.9009C45.3159 4.36035 45.6523 4.69679 45.6523 5.11182Z" fill="url(#paint3_linear_450_8613)"/>
+<path d="M-120.097 12.9385L-120.096 17.2056L-120.097 12.9385ZM-162.942 12.97L-163.195 17.2297L-162.942 12.97ZM1.73732 12.9385L1.73778 8.67134L1.73732 12.9385ZM44.5835 12.97L44.3308 8.71038L44.5835 12.97ZM44.5835 12.97L44.3308 8.71038C32.7889 9.39505 23.643 18.9674 23.643 30.6787H27.9102H32.1773C32.1773 23.5114 37.7764 17.6485 44.8362 17.2297L44.5835 12.97ZM27.9102 30.6787H23.643V62.4068H27.9102H32.1773V30.6787H27.9102ZM26.8434 63.4736V59.2065H20.5424V63.4736V67.7408H26.8434V63.4736ZM19.4756 62.4068H23.7427V30.6787H19.4756H15.2085V62.4068H19.4756ZM19.4756 30.6787H23.7427C23.7427 18.5253 13.8909 8.67265 1.73778 8.67134L1.73732 12.9385L1.73685 17.2056C9.17702 17.2064 15.2085 23.2384 15.2085 30.6787H19.4756ZM1.7334 12.9346V8.66743H-120.093V12.9346V17.2017H1.7334V12.9346ZM-120.097 12.9385L-120.097 8.67134C-132.25 8.67288 -142.101 18.5256 -142.101 30.6787H-137.834H-133.567C-133.567 23.2382 -127.536 17.2066 -120.096 17.2056L-120.097 12.9385ZM-137.834 30.6787H-142.101V62.4068H-137.834H-133.567V30.6787H-137.834ZM-138.901 63.4736V59.2065H-145.202V63.4736V67.7408H-138.901V63.4736ZM-146.269 62.4068H-142.001V30.6787H-146.269H-150.536V62.4068H-146.269ZM-146.269 30.6787H-142.001C-142.001 18.9674 -151.147 9.39521 -162.689 8.7104L-162.942 12.97L-163.195 17.2297C-156.135 17.6486 -150.536 23.5116 -150.536 30.6787H-146.269ZM-164.009 11.8717H-159.742V7.86171H-164.009H-168.276V11.8717H-164.009ZM-162.942 6.79492V11.0621H44.5836V6.79492V2.52778H-162.942V6.79492ZM45.6504 7.86171H41.3833V11.8717H45.6504H49.9175V7.86171H45.6504ZM44.9009 5.86328V1.59614H-163.282V5.86328V10.1304H44.9009V5.86328ZM-163.282 4.36035V8.62749H44.9009V4.36035V0.0932121H-163.282V4.36035ZM44.9009 4.36035V8.62749C42.9592 8.62749 41.3852 7.0535 41.3852 5.11182H45.6523H49.9195C49.9195 2.34009 47.6725 0.0932121 44.9009 0.0932121V4.36035ZM-164.033 5.11182H-159.766C-159.766 7.05347 -161.34 8.62749 -163.282 8.62749V4.36035V0.0932121C-166.053 0.0932121 -168.3 2.34012 -168.3 5.11182H-164.033ZM-163.282 5.86328V1.59614C-161.34 1.59614 -159.766 3.17013 -159.766 5.11182H-164.033H-168.3C-168.3 7.88354 -166.053 10.1304 -163.282 10.1304V5.86328ZM44.9009 5.86328V10.1304C47.6726 10.1304 49.9195 7.88351 49.9195 5.11182H45.6523H41.3852C41.3852 3.17016 42.9592 1.59614 44.9009 1.59614V5.86328ZM44.5836 6.79492V11.0621C42.8161 11.0621 41.3833 9.62924 41.3833 7.86171H45.6504H49.9175C49.9175 4.91584 47.5294 2.52778 44.5836 2.52778V6.79492ZM-137.834 62.4068H-142.101C-142.101 60.6393 -140.668 59.2065 -138.901 59.2065V63.4736V67.7408C-135.955 67.7408 -133.567 65.3527 -133.567 62.4068H-137.834ZM-120.095 12.9365H-124.362C-124.362 10.5487 -122.42 8.67163 -120.097 8.67134L-120.097 12.9385L-120.096 17.2056C-117.771 17.2053 -115.828 15.3265 -115.828 12.9365H-120.095ZM-120.093 12.9346V8.66743C-122.45 8.66743 -124.362 10.5781 -124.362 12.9365H-120.095H-115.828C-115.828 15.2928 -117.738 17.2017 -120.093 17.2017V12.9346ZM1.73535 12.9365H6.00249C6.00249 10.5788 4.09116 8.66743 1.7334 8.66743V12.9346V17.2017C-0.622192 17.2017 -2.53178 15.2921 -2.53178 12.9365H1.73535ZM-164.009 7.86171H-159.742C-159.742 9.62921 -161.174 11.0621 -162.942 11.0621V6.79492V2.52778C-165.888 2.52778 -168.276 4.91586 -168.276 7.86171H-164.009ZM20.5424 63.4736V59.2065C22.3099 59.2065 23.7427 60.6393 23.7427 62.4068H19.4756H15.2085C15.2085 65.3527 17.5965 67.7408 20.5424 67.7408V63.4736ZM-162.942 12.97L-162.689 8.7104C-161.188 8.79944 -159.742 10.04 -159.742 11.8717H-164.009H-168.276C-168.276 14.8817 -165.872 17.0709 -163.195 17.2297L-162.942 12.97ZM27.9102 62.4068H23.643C23.643 60.6393 25.0759 59.2065 26.8434 59.2065V63.4736V67.7408C29.7892 67.7408 32.1773 65.3527 32.1773 62.4068H27.9102ZM1.73732 12.9385L1.73778 8.67134C4.06232 8.67159 6.00249 10.5503 6.00249 12.9365H1.73535H-2.53178C-2.53178 15.3249 -0.589828 17.2054 1.73685 17.2056L1.73732 12.9385ZM-145.202 63.4736V59.2065C-143.434 59.2065 -142.001 60.6393 -142.001 62.4068H-146.269H-150.536C-150.536 65.3527 -148.148 67.7408 -145.202 67.7408V63.4736ZM44.5835 12.97L44.8362 17.2297C47.5132 17.0709 49.9175 14.8817 49.9175 11.8717H45.6504H41.3833C41.3833 10.04 42.83 8.79941 44.3308 8.71038L44.5835 12.97Z" fill="#37332B" mask="url(#path-5-outside-1_450_8613)"/>
+<mask id="path-7-outside-2_450_8613" maskUnits="userSpaceOnUse" x="-166.033" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="-166.033" y="2.36035" width="213" height="63"/>
+<path d="M45.6504 12.9385C35.8529 12.9385 27.9102 20.8812 27.9102 30.6787V63.4736H19.4756V30.6787C19.4756 20.8812 11.5329 12.9385 1.73535 12.9385V12.9346H-120.095V12.9385C-129.892 12.9387 -137.834 20.8813 -137.834 30.6787V63.4736H-146.269V30.6787C-146.269 20.8813 -154.211 12.9386 -164.009 12.9385V6.79492H45.6504V12.9385ZM45.6523 5.86328H-164.033V4.36035H45.6523V5.86328Z"/>
+</mask>
+<path d="M45.6504 12.9385V14.0053C46.2396 14.0053 46.7172 13.5276 46.7172 12.9385H45.6504ZM27.9102 63.4736V64.5404C28.4993 64.5404 28.9769 64.0628 28.9769 63.4736H27.9102ZM19.4756 63.4736H18.4088C18.4088 64.0628 18.8864 64.5404 19.4756 64.5404V63.4736ZM1.73535 12.9385H0.668564C0.668564 13.5276 1.14618 14.0053 1.73535 14.0053V12.9385ZM1.73535 12.9346H2.80214C2.80214 12.3454 2.32452 11.8678 1.73535 11.8678V12.9346ZM-120.095 12.9346V11.8678C-120.684 11.8678 -121.162 12.3454 -121.162 12.9346H-120.095ZM-120.095 12.9385L-120.095 14.0053C-119.506 14.0052 -119.028 13.5276 -119.028 12.9385H-120.095ZM-137.834 63.4736V64.5404C-137.245 64.5404 -136.767 64.0628 -136.767 63.4736H-137.834ZM-146.269 63.4736H-147.335C-147.335 64.0628 -146.858 64.5404 -146.269 64.5404V63.4736ZM-164.009 12.9385H-165.076C-165.076 13.5276 -164.598 14.0053 -164.009 14.0053L-164.009 12.9385ZM-164.009 6.79492V5.72814C-164.598 5.72814 -165.076 6.20575 -165.076 6.79492H-164.009ZM45.6504 6.79492H46.7172C46.7172 6.20575 46.2396 5.72814 45.6504 5.72814V6.79492ZM45.6523 5.86328V6.93007C46.2415 6.93007 46.7191 6.45245 46.7191 5.86328H45.6523ZM-164.033 5.86328H-165.1C-165.1 6.45245 -164.622 6.93007 -164.033 6.93007V5.86328ZM-164.033 4.36035V3.29357C-164.622 3.29357 -165.1 3.77118 -165.1 4.36035H-164.033ZM45.6523 4.36035H46.7191C46.7191 3.77118 46.2415 3.29357 45.6523 3.29357V4.36035ZM45.6504 12.9385V11.8717C35.2637 11.8717 26.8434 20.292 26.8434 30.6787H27.9102H28.9769C28.9769 21.4703 36.442 14.0053 45.6504 14.0053V12.9385ZM27.9102 30.6787H26.8434V63.4736H27.9102H28.9769V30.6787H27.9102ZM27.9102 63.4736V62.4068H19.4756V63.4736V64.5404H27.9102V63.4736ZM19.4756 63.4736H20.5424V30.6787H19.4756H18.4088V63.4736H19.4756ZM19.4756 30.6787H20.5424C20.5424 20.292 12.1221 11.8717 1.73535 11.8717V12.9385V14.0053C10.9437 14.0053 18.4088 21.4704 18.4088 30.6787H19.4756ZM1.73535 12.9385H2.80214V12.9346H1.73535H0.668564V12.9385H1.73535ZM1.73535 12.9346V11.8678H-120.095V12.9346V14.0014H1.73535V12.9346ZM-120.095 12.9346H-121.162V12.9385H-120.095H-119.028V12.9346H-120.095ZM-120.095 12.9385L-120.095 11.8717C-130.481 11.8719 -138.901 20.2922 -138.901 30.6787H-137.834H-136.767C-136.767 21.4704 -129.303 14.0054 -120.095 14.0053L-120.095 12.9385ZM-137.834 30.6787H-138.901V63.4736H-137.834H-136.767V30.6787H-137.834ZM-137.834 63.4736V62.4068H-146.269V63.4736V64.5404H-137.834V63.4736ZM-146.269 63.4736H-145.202V30.6787H-146.269H-147.335V63.4736H-146.269ZM-146.269 30.6787H-145.202C-145.202 20.2921 -153.622 11.8718 -164.009 11.8717L-164.009 12.9385L-164.009 14.0053C-154.801 14.0054 -147.335 21.4704 -147.335 30.6787H-146.269ZM-164.009 12.9385H-162.942V6.79492H-164.009H-165.076V12.9385H-164.009ZM-164.009 6.79492V7.86171H45.6504V6.79492V5.72814H-164.009V6.79492ZM45.6504 6.79492H44.5836V12.9385H45.6504H46.7172V6.79492H45.6504ZM45.6523 5.86328V4.7965H-164.033V5.86328V6.93007H45.6523V5.86328ZM-164.033 5.86328H-162.966V4.36035H-164.033H-165.1V5.86328H-164.033ZM-164.033 4.36035V5.42714H45.6523V4.36035V3.29357H-164.033V4.36035ZM45.6523 4.36035H44.5856V5.86328H45.6523H46.7191V4.36035H45.6523Z" fill="#040404" fill-opacity="0.5" mask="url(#path-7-outside-2_450_8613)"/>
+<g opacity="0.8" filter="url(#filter2_f_450_8613)" style="mix-blend-mode:plus-lighter">
+<path d="M34.3906 65.6074C40.5769 65.6074 45.5918 70.6223 45.5918 76.8086V94.4102H-164.564V76.8086C-164.564 70.6223 -159.55 65.6074 -153.363 65.6074H34.3906Z" stroke="url(#paint4_linear_450_8613)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter3_f_450_8613)" style="mix-blend-mode:plus-lighter">
+<mask id="path-10-outside-3_450_8613" maskUnits="userSpaceOnUse" x="-166.033" y="3.33496" width="212" height="61" fill="black">
+<rect fill="white" x="-166.033" y="3.33496" width="212" height="61"/>
+<path d="M43.9932 5.33496V11.4834C34.2722 11.4836 26.3918 19.364 26.3916 29.085V62.9395H18.0225V29.085C18.0223 19.7567 10.766 12.1251 1.58984 11.5234H-121.629C-130.805 12.125 -138.062 19.7566 -138.062 29.085V62.9395H-146.431V29.085C-146.431 19.3639 -154.312 11.4834 -164.033 11.4834V5.33496H43.9932Z"/>
+</mask>
+<path d="M43.9932 5.33496H45.06V4.26818H43.9932V5.33496ZM43.9932 11.4834L43.9932 12.5502L45.06 12.5502V11.4834H43.9932ZM26.3916 29.085L25.3248 29.0849V29.085H26.3916ZM26.3916 62.9395V64.0062H27.4584V62.9395H26.3916ZM18.0225 62.9395H16.9557V64.0062H18.0225V62.9395ZM18.0225 29.085H19.0892V29.0849L18.0225 29.085ZM1.58984 11.5234L1.65964 10.4589L1.62477 10.4567H1.58984V11.5234ZM-121.629 11.5234V10.4567H-121.664L-121.699 10.4589L-121.629 11.5234ZM-138.062 29.085L-139.129 29.0849V29.085H-138.062ZM-138.062 62.9395V64.0062H-136.996V62.9395H-138.062ZM-146.431 62.9395H-147.497V64.0062H-146.431V62.9395ZM-146.431 29.085H-145.364L-145.364 29.0849L-146.431 29.085ZM-164.033 11.4834H-165.1V12.5502H-164.033V11.4834ZM-164.033 5.33496V4.26818H-165.1V5.33496H-164.033ZM43.9932 5.33496H42.9264V11.4834H43.9932H45.06V5.33496H43.9932ZM43.9932 11.4834L43.9931 10.4166C33.6831 10.4168 25.325 18.7749 25.3248 29.0849L26.3916 29.085L27.4584 29.085C27.4586 19.9532 34.8614 12.5504 43.9932 12.5502L43.9932 11.4834ZM26.3916 29.085H25.3248V62.9395H26.3916H27.4584V29.085H26.3916ZM26.3916 62.9395V61.8727H18.0225V62.9395V64.0062H26.3916V62.9395ZM18.0225 62.9395H19.0892V29.085H18.0225H16.9557V62.9395H18.0225ZM18.0225 29.085L19.0892 29.0849C19.0891 19.1908 11.3928 11.0971 1.65964 10.4589L1.58984 11.5234L1.52005 12.5879C10.1391 13.153 16.9555 20.3226 16.9557 29.085L18.0225 29.085ZM1.58984 11.5234V10.4567H-121.629V11.5234V12.5902H1.58984V11.5234ZM-121.629 11.5234L-121.699 10.4589C-131.432 11.097 -139.129 19.1907 -139.129 29.0849L-138.062 29.085L-136.996 29.085C-136.996 20.3226 -130.178 13.153 -121.559 12.5879L-121.629 11.5234ZM-138.062 29.085H-139.129V62.9395H-138.062H-136.996V29.085H-138.062ZM-138.062 62.9395V61.8727H-146.431V62.9395V64.0062H-138.062V62.9395ZM-146.431 62.9395H-145.364V29.085H-146.431H-147.497V62.9395H-146.431ZM-146.431 29.085L-145.364 29.0849C-145.364 18.7747 -153.723 10.4166 -164.033 10.4166V11.4834V12.5502C-154.901 12.5502 -147.498 19.9531 -147.497 29.085L-146.431 29.085ZM-164.033 11.4834H-162.966V5.33496H-164.033H-165.1V11.4834H-164.033ZM-164.033 5.33496V6.40175H43.9932V5.33496V4.26818H-164.033V5.33496Z" fill="url(#paint5_linear_450_8613)" mask="url(#path-10-outside-3_450_8613)"/>
+</g>
+<g filter="url(#filter4_f_450_8613)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-4_450_8613" maskUnits="userSpaceOnUse" x="-164.963" y="3.33496" width="211" height="61" fill="black">
+<rect fill="white" x="-164.963" y="3.33496" width="211" height="61"/>
+<path d="M42.9283 5.33496C43.5175 5.33496 43.9951 5.81258 43.9951 6.40175V10.4166C43.9951 11.0058 43.5163 11.48 42.9282 11.5154C33.7536 12.0668 26.4834 19.682 26.4834 28.9951V61.8727C26.4834 62.4618 26.0058 62.9395 25.4166 62.9395H19.224C18.6348 62.9395 18.1572 62.4618 18.1572 61.8727V28.9951C18.1572 19.7197 10.9462 12.1295 1.82422 11.5234H-120.792C-129.914 12.1295 -137.125 19.7197 -137.125 28.9951V61.8727C-137.125 62.4618 -137.603 62.9395 -138.192 62.9395H-144.384C-144.974 62.9395 -145.451 62.4618 -145.451 61.8727V28.9951C-145.451 19.682 -152.721 12.0668 -161.896 11.5154C-162.484 11.48 -162.963 11.0058 -162.963 10.4166V6.40175C-162.963 5.81258 -162.485 5.33496 -161.896 5.33496H42.9283Z"/>
+</mask>
+<path d="M1.82422 11.5234L1.89493 10.459L1.85962 10.4567H1.82422V11.5234ZM-120.792 11.5234V10.4567H-120.827L-120.863 10.459L-120.792 11.5234ZM42.9282 11.5154L42.8642 10.4505V10.4505L42.9282 11.5154ZM43.9951 6.40175H42.9283V10.4166H43.9951H45.0619V6.40175H43.9951ZM42.9282 11.5154L42.8642 10.4505C33.1298 11.0356 25.4166 19.1143 25.4166 28.9951H26.4834H27.5502C27.5502 20.2498 34.3775 13.098 42.9922 12.5802L42.9282 11.5154ZM26.4834 28.9951H25.4166V61.8727H26.4834H27.5502V28.9951H26.4834ZM25.4166 62.9395V61.8727H19.224V62.9395V64.0062H25.4166V62.9395ZM18.1572 61.8727H19.224V28.9951H18.1572H17.0904V61.8727H18.1572ZM18.1572 28.9951H19.224C19.224 19.1542 11.5735 11.102 1.89493 10.459L1.82422 11.5234L1.75351 12.5879C10.3187 13.1569 17.0904 20.2852 17.0904 28.9951H18.1572ZM1.82422 11.5234V10.4567H-120.792V11.5234V12.5902H1.82422V11.5234ZM-120.792 11.5234L-120.863 10.459C-130.541 11.102 -138.192 19.1542 -138.192 28.9951H-137.125H-136.058C-136.058 20.2852 -129.287 13.1569 -120.721 12.5879L-120.792 11.5234ZM-137.125 28.9951H-138.192V61.8727H-137.125H-136.058V28.9951H-137.125ZM-138.192 62.9395V61.8727H-144.384V62.9395V64.0062H-138.192V62.9395ZM-145.451 61.8727H-144.384V28.9951H-145.451H-146.518V61.8727H-145.451ZM-145.451 28.9951H-144.384C-144.384 19.1143 -152.098 11.0356 -161.832 10.4505L-161.896 11.5154L-161.96 12.5802C-153.345 13.098 -146.518 20.2498 -146.518 28.9951H-145.451ZM-162.963 10.4166H-161.896V6.40175H-162.963H-164.03V10.4166H-162.963ZM-161.896 5.33496V6.40175H42.9283V5.33496V4.26818H-161.896V5.33496ZM-162.963 6.40175H-161.896V6.40175V5.33496V4.26818C-163.074 4.26818 -164.03 5.22341 -164.03 6.40175H-162.963ZM-144.384 62.9395V61.8727H-144.384H-145.451H-146.518C-146.518 63.051 -145.563 64.0062 -144.384 64.0062V62.9395ZM-137.125 61.8727H-138.192H-138.192V62.9395V64.0062C-137.013 64.0062 -136.058 63.051 -136.058 61.8727H-137.125ZM19.224 62.9395V61.8727V61.8727H18.1572H17.0904C17.0904 63.051 18.0457 64.0062 19.224 64.0062V62.9395ZM26.4834 61.8727H25.4166V61.8727V62.9395V64.0062C26.595 64.0062 27.5502 63.051 27.5502 61.8727H26.4834ZM-161.896 11.5154L-161.832 10.4505C-161.857 10.449 -161.877 10.4383 -161.889 10.426C-161.895 10.4204 -161.896 10.4166 -161.896 10.4163C-161.896 10.4162 -161.896 10.4165 -161.896 10.4171C-161.896 10.4178 -161.896 10.4178 -161.896 10.4166H-162.963H-164.03C-164.03 11.6112 -163.069 12.5136 -161.96 12.5802L-161.896 11.5154ZM43.9951 10.4166H42.9283C42.9283 10.4178 42.9282 10.4178 42.9284 10.4171C42.9285 10.4165 42.9286 10.4162 42.9286 10.4163C42.9285 10.4166 42.9268 10.4204 42.9213 10.426C42.9092 10.4383 42.8891 10.449 42.8642 10.4505L42.9282 11.5154L42.9922 12.5802C44.1016 12.5136 45.0619 11.6112 45.0619 10.4166H43.9951ZM43.9951 6.40175H45.0619C45.0619 5.2234 44.1067 4.26818 42.9283 4.26818V5.33496V6.40175V6.40175H43.9951Z" fill="url(#paint6_linear_450_8613)" mask="url(#path-12-outside-4_450_8613)"/>
+</g>
+<g filter="url(#filter5_f_450_8613)">
+<path d="M-166.164 13.8684V4.26736C-166.164 3.08902 -165.209 2.13379 -164.03 2.13379H46.1261C47.3045 2.13379 48.2597 3.08902 48.2597 4.26736V13.8684" stroke="url(#paint7_linear_450_8613)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter6_f_450_8613)">
+<path d="M19.9897 63.4733V29.3361C19.9897 22.9354 14.1224 12.2676 0.787575 12.2676C-10.7337 12.2676 -33.7051 12.2676 -44.5508 12.2676" stroke="url(#paint8_linear_450_8613)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_8613)">
+<path d="M-135.229 62.9403V26.9541C-134.873 22.5921 -131.495 15.4683 -121.36 13.8682H-0.280231C9.32083 14.4016 16.2549 18.2301 16.2549 31.316V62.9403" stroke="url(#paint9_linear_450_8613)" stroke-width="1.06678"/>
+</g>
+<path d="M-150.107 63.6704L30.7968 63.6704" stroke="#1F1600" stroke-width="1.06678"/>
+<g filter="url(#filter8_f_450_8613)">
+<path d="M20.5234 45.8716V62.4067H27.4575V45.8716" stroke="url(#paint10_linear_450_8613)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_8613" x="-133.938" y="17.1807" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8613"/>
+</filter>
+<filter id="filter1_f_450_8613" x="-161.897" y="68.274" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<filter id="filter2_f_450_8613" x="-166.164" y="64.0069" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<filter id="filter3_f_450_8613" x="-166.166" y="3.20128" width="212.294" height="61.8719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<filter id="filter4_f_450_8613" x="-165.096" y="3.20128" width="211.225" height="61.8719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<filter id="filter5_f_450_8613" x="-167.764" y="0.533801" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<filter id="filter6_f_450_8613" x="-45.6176" y="10.6676" width="67.2078" height="53.8723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<filter id="filter7_f_450_8613" x="-136.829" y="12.2682" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<filter id="filter8_f_450_8613" x="18.9234" y="44.8048" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8613"/>
+</filter>
+<linearGradient id="paint0_linear_450_8613" x1="-59.1503" y1="17.1807" x2="-59.1503" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#948F83"/>
+<stop offset="0.05" stop-color="#534F45"/>
+<stop offset="1" stop-color="#22211F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_8613" x1="-136.608" y1="34.5812" x2="15.637" y2="34.5812" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78715F"/>
+<stop offset="0.077962" stop-color="#40361D" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#40361D" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#78715F"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_8613" x1="-58.9525" y1="70.4077" x2="-58.9525" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDCC2"/>
+<stop offset="1" stop-color="#DEDCC2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_8613" x1="-164.033" y1="33.917" x2="45.6523" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8B6B1"/>
+<stop offset="0.144231" stop-color="#AAA599"/>
+<stop offset="0.889423" stop-color="#AAA599"/>
+<stop offset="0.961538" stop-color="#9F9B90"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_8613" x1="-59.4863" y1="66.1406" x2="-59.4863" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B8881"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_8613" x1="-60.02" y1="5.33496" x2="-60.02" y2="14.4015" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDCC2"/>
+<stop offset="1" stop-color="#DEDCC2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_8613" x1="-149.696" y1="12.2679" x2="-93.902" y2="33.943" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78715F"/>
+<stop offset="1" stop-color="#78715F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_8613" x1="-58.9522" y1="2.13379" x2="-58.9522" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B0ACA3"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_8613" x1="13.0556" y1="16.0013" x2="6.50804" y2="15.9301" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BAB4A6"/>
+<stop offset="1" stop-color="#BAB4A6" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_8613" x1="-59.4868" y1="13.8682" x2="-59.4868" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B0ACA3"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0.639216"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_8613" x1="22.657" y1="61.8734" x2="22.1236" y2="36.2705" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4DAC1"/>
+<stop offset="1" stop-color="#E4DAC1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_8613">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_8613">
+<rect width="218.298" height="95" fill="white" transform="translate(-168.299)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/왼쪽.svg
new file mode 100644
index 0000000..f8f627a
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/왼쪽.svg	
@@ -0,0 +1,151 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8537)">
+<g clip-path="url(#clip1_450_8537)">
+<g filter="url(#filter0_i_450_8537)">
+<path d="M34.3613 29.9821C34.3613 22.9121 40.0927 17.1807 47.1627 17.1807H171.134C178.204 17.1807 183.936 22.9121 183.936 29.9821V65.6913H34.3613V29.9821Z" fill="url(#paint0_linear_450_8537)"/>
+<path d="M34.3613 29.9821C34.3613 22.9121 40.0927 17.1807 47.1627 17.1807H171.134C178.204 17.1807 183.936 22.9121 183.936 29.9821V65.6913H34.3613V29.9821Z" fill="url(#paint1_linear_450_8537)"/>
+</g>
+<path d="M47.1631 17.7139H171.135C177.91 17.7141 183.402 23.2071 183.402 29.9824V65.1582H34.8945V29.9824C34.8945 23.207 40.3876 17.7139 47.1631 17.7139Z" stroke="black" stroke-width="1.06678"/>
+<path d="M203.049 66.2539C208.94 66.2539 213.717 71.0302 213.717 76.9219V93.9707H4.50293V76.9219C4.50298 71.0303 9.27929 66.254 15.1709 66.2539H203.049Z" fill="#7C776B" stroke="#37332B" stroke-width="4.26714"/>
+<g opacity="0.4" filter="url(#filter1_f_450_8537)" style="mix-blend-mode:plus-lighter">
+<path d="M203.757 69.8745C207.586 69.8745 210.69 72.9787 210.69 76.8081V92.2769H8.00195V76.8081C8.00213 72.9788 11.1062 69.8747 14.9355 69.8745H203.757Z" stroke="url(#paint2_linear_450_8537)" stroke-width="1.06678"/>
+</g>
+<mask id="path-5-outside-1_450_8537" maskUnits="userSpaceOnUse" x="-0.734375" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-0.734375" y="-0.639648" width="219" height="69"/>
+<path d="M213.949 11.8717C213.949 12.4609 213.47 12.9351 212.882 12.97C203.581 13.5218 196.209 21.2394 196.209 30.6787V62.4068C196.209 62.996 195.731 63.4736 195.142 63.4736H188.841C188.252 63.4736 187.774 62.996 187.774 62.4068V30.6787C187.774 20.8818 179.833 12.9395 170.036 12.9385C170.035 12.9385 170.034 12.9376 170.034 12.9365C170.034 12.9354 170.033 12.9346 170.032 12.9346H48.2061C48.205 12.9346 48.2041 12.9354 48.2041 12.9365C48.2041 12.9376 48.2032 12.9385 48.2021 12.9385C38.4057 12.9397 30.4648 20.8819 30.4648 30.6787V62.4068C30.4648 62.996 29.9872 63.4736 29.3981 63.4736H23.0971C22.5079 63.4736 22.0303 62.996 22.0303 62.4068V30.6787C22.0303 21.2395 14.6577 13.5219 5.35695 12.97C4.76882 12.9352 4.29004 12.4609 4.29004 11.8717V7.86171C4.29004 7.27254 4.76765 6.79492 5.35682 6.79492H212.882C213.472 6.79492 213.949 7.27254 213.949 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z"/>
+</mask>
+<path d="M213.949 11.8717C213.949 12.4609 213.47 12.9351 212.882 12.97C203.581 13.5218 196.209 21.2394 196.209 30.6787V62.4068C196.209 62.996 195.731 63.4736 195.142 63.4736H188.841C188.252 63.4736 187.774 62.996 187.774 62.4068V30.6787C187.774 20.8818 179.833 12.9395 170.036 12.9385C170.035 12.9385 170.034 12.9376 170.034 12.9365C170.034 12.9354 170.033 12.9346 170.032 12.9346H48.2061C48.205 12.9346 48.2041 12.9354 48.2041 12.9365C48.2041 12.9376 48.2032 12.9385 48.2021 12.9385C38.4057 12.9397 30.4648 20.8819 30.4648 30.6787V62.4068C30.4648 62.996 29.9872 63.4736 29.3981 63.4736H23.0971C22.5079 63.4736 22.0303 62.996 22.0303 62.4068V30.6787C22.0303 21.2395 14.6577 13.5219 5.35695 12.97C4.76882 12.9352 4.29004 12.4609 4.29004 11.8717V7.86171C4.29004 7.27254 4.76765 6.79492 5.35682 6.79492H212.882C213.472 6.79492 213.949 7.27254 213.949 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z" fill="url(#paint3_linear_450_8537)"/>
+<path d="M48.2021 12.9385L48.2027 17.2056L48.2021 12.9385ZM5.35695 12.97L5.10421 17.2297L5.35695 12.97ZM170.036 12.9385L170.037 8.67134L170.036 12.9385ZM212.882 12.97L212.63 8.71038L212.882 12.97ZM212.882 12.97L212.63 8.71038C201.088 9.39505 191.942 18.9674 191.942 30.6787H196.209H200.476C200.476 23.5114 206.075 17.6485 213.135 17.2297L212.882 12.97ZM196.209 30.6787H191.942V62.4068H196.209H200.476V30.6787H196.209ZM195.142 63.4736V59.2065H188.841V63.4736V67.7408H195.142V63.4736ZM187.774 62.4068H192.042V30.6787H187.774H183.507V62.4068H187.774ZM187.774 30.6787H192.042C192.042 18.5253 182.19 8.67265 170.037 8.67134L170.036 12.9385L170.036 17.2056C177.476 17.2064 183.507 23.2384 183.507 30.6787H187.774ZM170.032 12.9346V8.66743H48.2061V12.9346V17.2017H170.032V12.9346ZM48.2021 12.9385L48.2016 8.67134C36.0485 8.67288 26.1977 18.5256 26.1977 30.6787H30.4648H34.732C34.732 23.2382 40.7628 17.2066 48.2027 17.2056L48.2021 12.9385ZM30.4648 30.6787H26.1977V62.4068H30.4648H34.732V30.6787H30.4648ZM29.3981 63.4736V59.2065H23.0971V63.4736V67.7408H29.3981V63.4736ZM22.0303 62.4068H26.2974V30.6787H22.0303H17.7631V62.4068H22.0303ZM22.0303 30.6787H26.2974C26.2974 18.9674 17.1514 9.39521 5.60969 8.7104L5.35695 12.97L5.10421 17.2297C12.1639 17.6486 17.7631 23.5116 17.7631 30.6787H22.0303ZM4.29004 11.8717H8.55718V7.86171H4.29004H0.0228996V11.8717H4.29004ZM5.35682 6.79492V11.0621H212.882V6.79492V2.52778H5.35682V6.79492ZM213.949 7.86171H209.682V11.8717H213.949H218.216V7.86171H213.949ZM213.2 5.86328V1.59614H5.01709V5.86328V10.1304H213.2V5.86328ZM5.01709 4.36035V8.62749H213.2V4.36035V0.0932121H5.01709V4.36035ZM213.2 4.36035V8.62749C211.258 8.62749 209.684 7.0535 209.684 5.11182H213.951H218.218C218.218 2.34009 215.971 0.0932121 213.2 0.0932121V4.36035ZM4.26562 5.11182H8.53276C8.53276 7.05347 6.95874 8.62749 5.01709 8.62749V4.36035V0.0932121C2.24539 0.0932121 -0.00151443 2.34012 -0.00151443 5.11182H4.26562ZM5.01709 5.86328V1.59614C6.95872 1.59614 8.53276 3.17013 8.53276 5.11182H4.26562H-0.00151443C-0.00151443 7.88354 2.24542 10.1304 5.01709 10.1304V5.86328ZM213.2 5.86328V10.1304C215.971 10.1304 218.218 7.88351 218.218 5.11182H213.951H209.684C209.684 3.17016 211.258 1.59614 213.2 1.59614V5.86328ZM212.882 6.79492V11.0621C211.115 11.0621 209.682 9.62924 209.682 7.86171H213.949H218.216C218.216 4.91584 215.828 2.52778 212.882 2.52778V6.79492ZM30.4648 62.4068H26.1977C26.1977 60.6393 27.6306 59.2065 29.3981 59.2065V63.4736V67.7408C32.3439 67.7408 34.732 65.3527 34.732 62.4068H30.4648ZM48.2041 12.9365H43.937C43.937 10.5487 45.8788 8.67163 48.2016 8.67134L48.2021 12.9385L48.2027 17.2056C50.5276 17.2053 52.4712 15.3265 52.4712 12.9365H48.2041ZM48.2061 12.9346V8.66743C45.849 8.66743 43.937 10.5781 43.937 12.9365H48.2041H52.4712C52.4712 15.2928 50.561 17.2017 48.2061 17.2017V12.9346ZM170.034 12.9365H174.301C174.301 10.5788 172.39 8.66743 170.032 8.66743V12.9346V17.2017C167.677 17.2017 165.767 15.2921 165.767 12.9365H170.034ZM4.29004 7.86171H8.55718C8.55718 9.62921 7.12433 11.0621 5.35682 11.0621V6.79492V2.52778C2.41098 2.52778 0.0228996 4.91586 0.0228996 7.86171H4.29004ZM188.841 63.4736V59.2065C190.609 59.2065 192.042 60.6393 192.042 62.4068H187.774H183.507C183.507 65.3527 185.895 67.7408 188.841 67.7408V63.4736ZM5.35695 12.97L5.60969 8.7104C7.11043 8.79944 8.55718 10.04 8.55718 11.8717H4.29004H0.0228996C0.0228996 14.8817 2.42722 17.0709 5.10421 17.2297L5.35695 12.97ZM196.209 62.4068H191.942C191.942 60.6393 193.375 59.2065 195.142 59.2065V63.4736V67.7408C198.088 67.7408 200.476 65.3527 200.476 62.4068H196.209ZM170.036 12.9385L170.037 8.67134C172.361 8.67159 174.301 10.5503 174.301 12.9365H170.034H165.767C165.767 15.3249 167.709 17.2054 170.036 17.2056L170.036 12.9385ZM23.0971 63.4736V59.2065C24.8646 59.2065 26.2974 60.6393 26.2974 62.4068H22.0303H17.7631C17.7631 65.3527 20.1512 67.7408 23.0971 67.7408V63.4736ZM212.882 12.97L213.135 17.2297C215.812 17.0709 218.216 14.8817 218.216 11.8717H213.949H209.682C209.682 10.04 211.129 8.79941 212.63 8.71038L212.882 12.97Z" fill="#37332B" mask="url(#path-5-outside-1_450_8537)"/>
+<mask id="path-7-outside-2_450_8537" maskUnits="userSpaceOnUse" x="2.26562" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="2.26562" y="2.36035" width="213" height="63"/>
+<path d="M213.949 12.9385C204.152 12.9385 196.209 20.8812 196.209 30.6787V63.4736H187.774V30.6787C187.774 20.8812 179.832 12.9385 170.034 12.9385V12.9346H48.2041V12.9385C38.4067 12.9387 30.4648 20.8813 30.4648 30.6787V63.4736H22.0303V30.6787C22.0303 20.8813 14.0875 12.9386 4.29004 12.9385V6.79492H213.949V12.9385ZM213.951 5.86328H4.26562V4.36035H213.951V5.86328Z"/>
+</mask>
+<path d="M213.949 12.9385V14.0053C214.538 14.0053 215.016 13.5276 215.016 12.9385H213.949ZM196.209 63.4736V64.5404C196.798 64.5404 197.276 64.0628 197.276 63.4736H196.209ZM187.774 63.4736H186.708C186.708 64.0628 187.185 64.5404 187.774 64.5404V63.4736ZM170.034 12.9385H168.967C168.967 13.5276 169.445 14.0053 170.034 14.0053V12.9385ZM170.034 12.9346H171.101C171.101 12.3454 170.623 11.8678 170.034 11.8678V12.9346ZM48.2041 12.9346V11.8678C47.6149 11.8678 47.1373 12.3454 47.1373 12.9346H48.2041ZM48.2041 12.9385L48.2041 14.0053C48.7933 14.0052 49.2709 13.5276 49.2709 12.9385H48.2041ZM30.4648 63.4736V64.5404C31.054 64.5404 31.5316 64.0628 31.5316 63.4736H30.4648ZM22.0303 63.4736H20.9635C20.9635 64.0628 21.4411 64.5404 22.0303 64.5404V63.4736ZM4.29004 12.9385H3.22325C3.22325 13.5276 3.70086 14.0053 4.29002 14.0053L4.29004 12.9385ZM4.29004 6.79492V5.72814C3.70087 5.72814 3.22325 6.20575 3.22325 6.79492H4.29004ZM213.949 6.79492H215.016C215.016 6.20575 214.538 5.72814 213.949 5.72814V6.79492ZM213.951 5.86328V6.93007C214.54 6.93007 215.018 6.45245 215.018 5.86328H213.951ZM4.26562 5.86328H3.19884C3.19884 6.45245 3.67646 6.93007 4.26562 6.93007V5.86328ZM4.26562 4.36035V3.29357C3.67646 3.29357 3.19884 3.77118 3.19884 4.36035H4.26562ZM213.951 4.36035H215.018C215.018 3.77118 214.54 3.29357 213.951 3.29357V4.36035ZM213.949 12.9385V11.8717C203.563 11.8717 195.142 20.292 195.142 30.6787H196.209H197.276C197.276 21.4703 204.741 14.0053 213.949 14.0053V12.9385ZM196.209 30.6787H195.142V63.4736H196.209H197.276V30.6787H196.209ZM196.209 63.4736V62.4068H187.774V63.4736V64.5404H196.209V63.4736ZM187.774 63.4736H188.841V30.6787H187.774H186.708V63.4736H187.774ZM187.774 30.6787H188.841C188.841 20.292 180.421 11.8717 170.034 11.8717V12.9385V14.0053C179.243 14.0053 186.708 21.4704 186.708 30.6787H187.774ZM170.034 12.9385H171.101V12.9346H170.034H168.967V12.9385H170.034ZM170.034 12.9346V11.8678H48.2041V12.9346V14.0014H170.034V12.9346ZM48.2041 12.9346H47.1373V12.9385H48.2041H49.2709V12.9346H48.2041ZM48.2041 12.9385L48.2041 11.8717C37.8175 11.8719 29.3981 20.2922 29.3981 30.6787H30.4648H31.5316C31.5316 21.4704 38.9959 14.0054 48.2041 14.0053L48.2041 12.9385ZM30.4648 30.6787H29.3981V63.4736H30.4648H31.5316V30.6787H30.4648ZM30.4648 63.4736V62.4068H22.0303V63.4736V64.5404H30.4648V63.4736ZM22.0303 63.4736H23.0971V30.6787H22.0303H20.9635V63.4736H22.0303ZM22.0303 30.6787H23.0971C23.0971 20.2921 14.6766 11.8718 4.29005 11.8717L4.29004 12.9385L4.29002 14.0053C13.4983 14.0054 20.9635 21.4704 20.9635 30.6787H22.0303ZM4.29004 12.9385H5.35682V6.79492H4.29004H3.22325V12.9385H4.29004ZM4.29004 6.79492V7.86171H213.949V6.79492V5.72814H4.29004V6.79492ZM213.949 6.79492H212.882V12.9385H213.949H215.016V6.79492H213.949ZM213.951 5.86328V4.7965H4.26562V5.86328V6.93007H213.951V5.86328ZM4.26562 5.86328H5.33241V4.36035H4.26562H3.19884V5.86328H4.26562ZM4.26562 4.36035V5.42714H213.951V4.36035V3.29357H4.26562V4.36035ZM213.951 4.36035H212.884V5.86328H213.951H215.018V4.36035H213.951Z" fill="#040404" fill-opacity="0.5" mask="url(#path-7-outside-2_450_8537)"/>
+<g opacity="0.8" filter="url(#filter2_f_450_8537)" style="mix-blend-mode:plus-lighter">
+<path d="M202.689 65.6074C208.876 65.6074 213.891 70.6223 213.891 76.8086V94.4102H3.73438V76.8086C3.73438 70.6223 8.74927 65.6074 14.9355 65.6074H202.689Z" stroke="url(#paint4_linear_450_8537)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter3_f_450_8537)" style="mix-blend-mode:plus-lighter">
+<mask id="path-10-outside-3_450_8537" maskUnits="userSpaceOnUse" x="2.26562" y="3.33398" width="212" height="61" fill="black">
+<rect fill="white" x="2.26562" y="3.33398" width="212" height="61"/>
+<path d="M212.292 5.33398V11.4834C202.571 11.4836 194.691 19.364 194.69 29.085V62.9395H186.321V29.085C186.321 19.7567 179.065 12.1251 169.889 11.5234H46.6699C37.4937 12.125 30.2365 19.7566 30.2363 29.085V62.9395H21.8682V29.085C21.868 19.3639 13.9867 11.4834 4.26562 11.4834V5.33398H212.292Z"/>
+</mask>
+<path d="M212.292 5.33398H213.359V4.2672H212.292V5.33398ZM212.292 11.4834L212.292 12.5502L213.359 12.5502V11.4834H212.292ZM194.69 29.085L193.624 29.0849V29.085H194.69ZM194.69 62.9395V64.0062H195.757V62.9395H194.69ZM186.321 62.9395H185.255V64.0062H186.321V62.9395ZM186.321 29.085H187.388V29.0849L186.321 29.085ZM169.889 11.5234L169.958 10.4589L169.924 10.4567H169.889V11.5234ZM46.6699 11.5234V10.4567H46.635L46.6001 10.4589L46.6699 11.5234ZM30.2363 29.085L29.1695 29.0849V29.085H30.2363ZM30.2363 62.9395V64.0062H31.3031V62.9395H30.2363ZM21.8682 62.9395H20.8014V64.0062H21.8682V62.9395ZM21.8682 29.085H22.9349L22.9349 29.0849L21.8682 29.085ZM4.26562 11.4834H3.19884V12.5502H4.26562V11.4834ZM4.26562 5.33398V4.2672H3.19884V5.33398H4.26562ZM212.292 5.33398H211.225V11.4834H212.292H213.359V5.33398H212.292ZM212.292 11.4834L212.292 10.4166C201.982 10.4168 193.624 18.7749 193.624 29.0849L194.69 29.085L195.757 29.085C195.757 19.9532 203.16 12.5504 212.292 12.5502L212.292 11.4834ZM194.69 29.085H193.624V62.9395H194.69H195.757V29.085H194.69ZM194.69 62.9395V61.8727H186.321V62.9395V64.0062H194.69V62.9395ZM186.321 62.9395H187.388V29.085H186.321H185.255V62.9395H186.321ZM186.321 29.085L187.388 29.0849C187.388 19.1908 179.692 11.0971 169.958 10.4589L169.889 11.5234L169.819 12.5879C178.438 13.153 185.254 20.3226 185.255 29.085L186.321 29.085ZM169.889 11.5234V10.4567H46.6699V11.5234V12.5902H169.889V11.5234ZM46.6699 11.5234L46.6001 10.4589C36.867 11.097 29.1697 19.1907 29.1695 29.0849L30.2363 29.085L31.3031 29.085C31.3033 20.3226 38.1205 13.153 46.7397 12.5879L46.6699 11.5234ZM30.2363 29.085H29.1695V62.9395H30.2363H31.3031V29.085H30.2363ZM30.2363 62.9395V61.8727H21.8682V62.9395V64.0062H30.2363V62.9395ZM21.8682 62.9395H22.9349V29.085H21.8682H20.8014V62.9395H21.8682ZM21.8682 29.085L22.9349 29.0849C22.9348 18.7747 14.5758 10.4166 4.26562 10.4166V11.4834V12.5502C13.3976 12.5502 20.8012 19.9531 20.8014 29.085L21.8682 29.085ZM4.26562 11.4834H5.33241V5.33398H4.26562H3.19884V11.4834H4.26562ZM4.26562 5.33398V6.40077H212.292V5.33398V4.2672H4.26562V5.33398Z" fill="url(#paint5_linear_450_8537)" mask="url(#path-10-outside-3_450_8537)"/>
+</g>
+<g filter="url(#filter4_f_450_8537)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-4_450_8537" maskUnits="userSpaceOnUse" x="3.33594" y="3.33398" width="211" height="61" fill="black">
+<rect fill="white" x="3.33594" y="3.33398" width="211" height="61"/>
+<path d="M211.227 5.33398C211.816 5.33398 212.294 5.8116 212.294 6.40077V10.4166C212.294 11.0058 211.815 11.48 211.227 11.5154C202.052 12.0668 194.782 19.682 194.782 28.9951V61.8727C194.782 62.4618 194.305 62.9395 193.715 62.9395H187.523C186.934 62.9395 186.456 62.4618 186.456 61.8727V28.9951C186.456 19.7197 179.245 12.1295 170.123 11.5234H47.5068C38.3849 12.1295 31.1738 19.7197 31.1738 28.9951V61.8727C31.1738 62.4618 30.6962 62.9395 30.107 62.9395H23.9144C23.3253 62.9395 22.8477 62.4618 22.8477 61.8727V28.9951C22.8477 19.682 15.5774 12.0668 6.40289 11.5154C5.81478 11.48 5.33594 11.0058 5.33594 10.4166V6.40077C5.33594 5.8116 5.81355 5.33398 6.40272 5.33398H211.227Z"/>
+</mask>
+<path d="M170.123 11.5234L170.194 10.459L170.158 10.4567H170.123V11.5234ZM47.5068 11.5234V10.4567H47.4714L47.4361 10.459L47.5068 11.5234ZM211.227 11.5154L211.163 10.4505V10.4505L211.227 11.5154ZM212.294 6.40077H211.227V10.4166H212.294H213.361V6.40077H212.294ZM211.227 11.5154L211.163 10.4505C201.429 11.0356 193.715 19.1143 193.715 28.9951H194.782H195.849C195.849 20.2498 202.676 13.098 211.291 12.5802L211.227 11.5154ZM194.782 28.9951H193.715V61.8727H194.782H195.849V28.9951H194.782ZM193.715 62.9395V61.8727H187.523V62.9395V64.0062H193.715V62.9395ZM186.456 61.8727H187.523V28.9951H186.456H185.389V61.8727H186.456ZM186.456 28.9951H187.523C187.523 19.1542 179.872 11.102 170.194 10.459L170.123 11.5234L170.052 12.5879C178.618 13.1569 185.389 20.2852 185.389 28.9951H186.456ZM170.123 11.5234V10.4567H47.5068V11.5234V12.5902H170.123V11.5234ZM47.5068 11.5234L47.4361 10.459C37.7575 11.102 30.107 19.1542 30.107 28.9951H31.1738H32.2406C32.2406 20.2852 39.0123 13.1569 47.5776 12.5879L47.5068 11.5234ZM31.1738 28.9951H30.107V61.8727H31.1738H32.2406V28.9951H31.1738ZM30.107 62.9395V61.8727H23.9144V62.9395V64.0062H30.107V62.9395ZM22.8477 61.8727H23.9144V28.9951H22.8477H21.7809V61.8727H22.8477ZM22.8477 28.9951H23.9144C23.9144 19.1143 16.2013 11.0356 6.46689 10.4505L6.40289 11.5154L6.33888 12.5802C14.9535 13.098 21.7809 20.2498 21.7809 28.9951H22.8477ZM5.33594 10.4166H6.40272V6.40077H5.33594H4.26915V10.4166H5.33594ZM6.40272 5.33398V6.40077H211.227V5.33398V4.2672H6.40272V5.33398ZM5.33594 6.40077H6.40272V6.40077V5.33398V4.2672C5.22438 4.2672 4.26915 5.22243 4.26915 6.40077H5.33594ZM23.9144 62.9395V61.8727H23.9144H22.8477H21.7809C21.7809 63.051 22.7361 64.0062 23.9144 64.0062V62.9395ZM31.1738 61.8727H30.107H30.107V62.9395V64.0062C31.2854 64.0062 32.2406 63.051 32.2406 61.8727H31.1738ZM187.523 62.9395V61.8727V61.8727H186.456H185.389C185.389 63.051 186.344 64.0062 187.523 64.0062V62.9395ZM194.782 61.8727H193.715V61.8727V62.9395V64.0062C194.894 64.0062 195.849 63.051 195.849 61.8727H194.782ZM6.40289 11.5154L6.46689 10.4505C6.44196 10.449 6.4219 10.4383 6.40975 10.426C6.40426 10.4204 6.40258 10.4166 6.40246 10.4163C6.40241 10.4162 6.40256 10.4165 6.40268 10.4171C6.40282 10.4178 6.40272 10.4178 6.40272 10.4166H5.33594H4.26915C4.26915 11.6112 5.22947 12.5136 6.33888 12.5802L6.40289 11.5154ZM212.294 10.4166H211.227C211.227 10.4178 211.227 10.4178 211.227 10.4171C211.227 10.4165 211.227 10.4162 211.227 10.4163C211.227 10.4166 211.226 10.4204 211.22 10.426C211.208 10.4383 211.188 10.449 211.163 10.4505L211.227 11.5154L211.291 12.5802C212.4 12.5136 213.361 11.6112 213.361 10.4166H212.294ZM212.294 6.40077H213.361C213.361 5.22243 212.405 4.2672 211.227 4.2672V5.33398V6.40077V6.40077H212.294Z" fill="url(#paint6_linear_450_8537)" mask="url(#path-12-outside-4_450_8537)"/>
+</g>
+<g filter="url(#filter5_f_450_8537)">
+<path d="M2.13477 13.8684V4.26736C2.13477 3.08902 3.09 2.13379 4.26834 2.13379H214.425C215.603 2.13379 216.559 3.08902 216.559 4.26736V13.8684" stroke="url(#paint7_linear_450_8537)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter6_f_450_8537)">
+<path d="M33.0703 62.9403V26.9541C33.4259 22.5921 36.8041 15.4683 46.9385 13.8682H168.019C177.62 14.4016 184.554 18.2301 184.554 31.316V62.9403" stroke="url(#paint8_linear_450_8537)" stroke-width="1.06678"/>
+</g>
+<path d="M18.1914 63.6704L199.096 63.6704" stroke="#1F1600" stroke-width="1.06678"/>
+<g filter="url(#filter7_f_450_8537)">
+<path d="M22.9355 45.8716V62.4067H29.8696V45.8716" stroke="url(#paint9_linear_450_8537)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_8537" x="34.3613" y="17.1807" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8537"/>
+</filter>
+<filter id="filter1_f_450_8537" x="6.40197" y="68.274" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8537"/>
+</filter>
+<filter id="filter2_f_450_8537" x="2.13439" y="64.0069" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8537"/>
+</filter>
+<filter id="filter3_f_450_8537" x="2.13243" y="3.2003" width="212.294" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8537"/>
+</filter>
+<filter id="filter4_f_450_8537" x="3.20275" y="3.2003" width="211.225" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8537"/>
+</filter>
+<filter id="filter5_f_450_8537" x="0.534778" y="0.533801" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8537"/>
+</filter>
+<filter id="filter6_f_450_8537" x="31.4703" y="12.2682" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8537"/>
+</filter>
+<filter id="filter7_f_450_8537" x="21.3356" y="44.8048" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8537"/>
+</filter>
+<linearGradient id="paint0_linear_450_8537" x1="109.149" y1="17.1807" x2="109.149" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#948F83"/>
+<stop offset="0.05" stop-color="#534F45"/>
+<stop offset="1" stop-color="#22211F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_8537" x1="31.6904" y1="34.5812" x2="183.936" y2="34.5812" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78715F"/>
+<stop offset="0.077962" stop-color="#40361D" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#40361D" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#78715F"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_8537" x1="109.346" y1="70.4077" x2="109.346" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDCC2"/>
+<stop offset="1" stop-color="#DEDCC2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_8537" x1="4.26562" y1="33.917" x2="213.951" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8B6B1"/>
+<stop offset="0.144231" stop-color="#AAA599"/>
+<stop offset="0.889423" stop-color="#AAA599"/>
+<stop offset="0.961538" stop-color="#9F9B90"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_8537" x1="108.812" y1="66.1406" x2="108.812" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B8881"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_8537" x1="108.279" y1="5.33398" x2="108.279" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDCC2"/>
+<stop offset="1" stop-color="#DEDCC2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_8537" x1="18.6024" y1="12.2671" x2="44.0222" y2="15.6689" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78715F"/>
+<stop offset="1" stop-color="#78715F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_8537" x1="109.347" y1="2.13379" x2="109.347" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B0ACA3"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_8537" x1="108.812" y1="13.8682" x2="108.812" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B0ACA3"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0.639216"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_8537" x1="25.0691" y1="61.8734" x2="24.5357" y2="36.2705" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E4DAC1"/>
+<stop offset="1" stop-color="#E4DAC1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_8537">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_8537">
+<rect width="218.298" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/중앙.svg
new file mode 100644
index 0000000..63558cf
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/실사화/중앙.svg	
@@ -0,0 +1,123 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="68" height="95" viewBox="0 0 68 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8574)">
+<g clip-path="url(#clip1_450_8574)">
+<g filter="url(#filter0_i_450_8574)">
+<path d="M-524.5 29.9821C-524.5 22.9121 -518.769 17.1807 -511.699 17.1807H554.321C561.391 17.1807 567.122 22.9121 567.122 29.9821V65.6913H-524.5V29.9821Z" fill="url(#paint0_linear_450_8574)"/>
+<path d="M-524.5 29.9821C-524.5 22.9121 -518.769 17.1807 -511.699 17.1807H554.321C561.391 17.1807 567.122 22.9121 567.122 29.9821V65.6913H-524.5V29.9821Z" fill="url(#paint1_linear_450_8574)"/>
+</g>
+<path d="M-511.698 17.7139H554.32C561.096 17.7139 566.589 23.207 566.589 29.9824V65.1582H-523.967V29.9824C-523.967 23.207 -518.474 17.7139 -511.698 17.7139Z" stroke="black" stroke-width="1.06678"/>
+<path d="M760.363 66.2539C766.255 66.254 771.031 71.0302 771.031 76.9219V93.9707H-728.974V76.9219C-728.974 71.0303 -724.197 66.254 -718.306 66.2539H760.363Z" fill="#7C776B" stroke="#37332B" stroke-width="4.26714"/>
+<g opacity="0.4" filter="url(#filter1_f_450_8574)" style="mix-blend-mode:plus-lighter">
+<path d="M752.092 69.8745C755.921 69.8745 759.026 72.9786 759.026 76.8081V92.2769H-713.518V76.8081C-713.517 72.9788 -710.413 69.8747 -706.584 69.8745H752.092Z" stroke="url(#paint2_linear_450_8574)" stroke-width="1.06678"/>
+</g>
+<mask id="path-5-outside-1_450_8574" maskUnits="userSpaceOnUse" x="-749.129" y="-0.639648" width="1540" height="69" fill="black">
+<rect fill="white" x="-749.129" y="-0.639648" width="1540" height="69"/>
+<path d="M786.185 11.8717C786.185 12.4609 785.707 12.9385 785.118 12.9385H707.25C679.698 12.9387 657.296 34.9875 656.726 62.4033C656.714 62.9923 656.237 63.4736 655.648 63.4736H596.224C595.635 63.4736 595.158 62.9923 595.146 62.4033C594.576 34.9876 572.174 12.9387 544.622 12.9385H465.69C465.689 12.9385 465.688 12.9374 465.688 12.936C465.688 12.9347 465.686 12.9336 465.685 12.9336H-423.458C-423.46 12.9336 -423.461 12.9347 -423.461 12.936C-423.461 12.9374 -423.462 12.9385 -423.463 12.9385H-502.396C-529.948 12.9386 -552.35 34.9875 -552.92 62.4033C-552.932 62.9923 -553.408 63.4736 -553.997 63.4736H-613.421C-614.011 63.4736 -614.487 62.9923 -614.499 62.4033C-615.069 34.9874 -637.472 12.9385 -665.024 12.9385H-742.891C-743.48 12.9385 -743.958 12.4609 -743.958 11.8717V7.86171C-743.958 7.27254 -743.48 6.79492 -742.891 6.79492H785.118C785.707 6.79492 786.185 7.27254 786.185 7.86171V11.8717ZM786.191 5.11182C786.191 5.52684 785.855 5.86328 785.44 5.86328H-743.377C-743.793 5.86328 -744.129 5.52684 -744.129 5.11182C-744.129 4.69679 -743.792 4.36035 -743.377 4.36035H785.44C785.855 4.36035 786.191 4.69679 786.191 5.11182Z"/>
+</mask>
+<path d="M786.185 11.8717C786.185 12.4609 785.707 12.9385 785.118 12.9385H707.25C679.698 12.9387 657.296 34.9875 656.726 62.4033C656.714 62.9923 656.237 63.4736 655.648 63.4736H596.224C595.635 63.4736 595.158 62.9923 595.146 62.4033C594.576 34.9876 572.174 12.9387 544.622 12.9385H465.69C465.689 12.9385 465.688 12.9374 465.688 12.936C465.688 12.9347 465.686 12.9336 465.685 12.9336H-423.458C-423.46 12.9336 -423.461 12.9347 -423.461 12.936C-423.461 12.9374 -423.462 12.9385 -423.463 12.9385H-502.396C-529.948 12.9386 -552.35 34.9875 -552.92 62.4033C-552.932 62.9923 -553.408 63.4736 -553.997 63.4736H-613.421C-614.011 63.4736 -614.487 62.9923 -614.499 62.4033C-615.069 34.9874 -637.472 12.9385 -665.024 12.9385H-742.891C-743.48 12.9385 -743.958 12.4609 -743.958 11.8717V7.86171C-743.958 7.27254 -743.48 6.79492 -742.891 6.79492H785.118C785.707 6.79492 786.185 7.27254 786.185 7.86171V11.8717ZM786.191 5.11182C786.191 5.52684 785.855 5.86328 785.44 5.86328H-743.377C-743.793 5.86328 -744.129 5.52684 -744.129 5.11182C-744.129 4.69679 -743.792 4.36035 -743.377 4.36035H785.44C785.855 4.36035 786.191 4.69679 786.191 5.11182Z" fill="url(#paint3_linear_450_8574)"/>
+<path d="M707.25 12.9385V8.67134V8.67134V12.9385ZM544.622 12.9385V8.67134V8.67134V12.9385ZM-502.396 12.9385V8.67134H-502.396L-502.396 12.9385ZM-552.92 62.4033L-548.653 62.4919L-552.92 62.4033ZM595.146 62.4033L590.88 62.4919L595.146 62.4033ZM656.726 62.4033L652.46 62.3146L656.726 62.4033ZM-614.499 62.4033L-618.766 62.4919L-614.499 62.4033ZM785.118 12.9385V8.67134H707.25V12.9385V17.2056H785.118V12.9385ZM707.25 12.9385V8.67134C677.371 8.67154 653.078 32.5821 652.46 62.3146L656.726 62.4033L660.992 62.4919C661.514 37.393 682.025 17.2058 707.25 17.2056V12.9385ZM655.648 63.4736V59.2065H596.224V63.4736V67.7408H655.648V63.4736ZM595.146 62.4033L599.412 62.3146C598.795 32.5821 574.501 8.6716 544.622 8.67134V12.9385V17.2056C569.847 17.2058 590.358 37.393 590.88 62.4919L595.146 62.4033ZM544.622 12.9385V8.67134H465.69V12.9385V17.2056H544.622V12.9385ZM465.685 12.9336V8.66645H-423.458V12.9336V17.2007H465.685V12.9336ZM-423.463 12.9385V8.67134H-502.396V12.9385V17.2056H-423.463V12.9385ZM-502.396 12.9385L-502.396 8.67134C-532.275 8.67146 -556.568 32.582 -557.186 62.3146L-552.92 62.4033L-548.653 62.4919C-548.132 37.3929 -527.621 17.2057 -502.395 17.2056L-502.396 12.9385ZM-553.997 63.4736V59.2065H-613.421V63.4736V67.7408H-553.997V63.4736ZM-614.499 62.4033L-610.233 62.3146C-610.851 32.5819 -635.145 8.67134 -665.024 8.67134V12.9385V17.2056C-639.799 17.2056 -619.287 37.3929 -618.766 62.4919L-614.499 62.4033ZM-665.024 12.9385V8.67134H-742.891V12.9385V17.2056H-665.024V12.9385ZM-743.958 11.8717H-739.691V7.86171H-743.958H-748.225V11.8717H-743.958ZM-742.891 6.79492V11.0621H785.118V6.79492V2.52778H-742.891V6.79492ZM786.185 7.86171H781.917V11.8717H786.185H790.452V7.86171H786.185ZM785.44 5.86328V1.59614H-743.377V5.86328V10.1304H785.44V5.86328ZM-743.377 4.36035V8.62749H785.44V4.36035V0.0932121H-743.377V4.36035ZM785.44 4.36035V8.62749C783.498 8.62749 781.924 7.05316 781.924 5.11182H786.191H790.458C790.458 2.34043 788.212 0.0932121 785.44 0.0932121V4.36035ZM-744.129 5.11182H-739.862C-739.862 7.05347 -741.436 8.62749 -743.377 8.62749V4.36035V0.0932121C-746.149 0.0932121 -748.396 2.34012 -748.396 5.11182H-744.129ZM-743.377 5.86328V1.59614C-741.436 1.59614 -739.862 3.17048 -739.862 5.11182H-744.129H-748.396C-748.396 7.8832 -746.149 10.1304 -743.377 10.1304V5.86328ZM785.44 5.86328V10.1304C788.212 10.1304 790.458 7.88351 790.458 5.11182H786.191H781.924C781.924 3.17016 783.498 1.59614 785.44 1.59614V5.86328ZM785.118 6.79492V11.0621C783.35 11.0621 781.917 9.62934 781.917 7.86171H786.185H790.452C790.452 4.91574 788.063 2.52778 785.118 2.52778V6.79492ZM-552.92 62.4033L-557.186 62.3146C-557.151 60.6582 -555.806 59.2065 -553.997 59.2065V63.4736V67.7408C-551.011 67.7408 -548.712 65.3264 -548.653 62.4919L-552.92 62.4033ZM-423.461 12.936H-427.728C-427.728 10.5807 -425.819 8.67134 -423.463 8.67134V12.9385V17.2056C-421.105 17.2056 -419.194 15.2941 -419.194 12.936H-423.461ZM-423.458 12.9336V8.66645C-425.825 8.66645 -427.728 10.5861 -427.728 12.936H-423.461H-419.194C-419.194 15.2833 -421.095 17.2007 -423.458 17.2007V12.9336ZM465.688 12.936H469.955C469.955 10.578 468.043 8.66645 465.685 8.66645V12.9336V17.2007C463.33 17.2007 461.42 15.2914 461.42 12.936H465.688ZM-743.958 7.86171H-739.691C-739.691 9.62921 -741.124 11.0621 -742.891 11.0621V6.79492V2.52778C-745.837 2.52778 -748.225 4.91586 -748.225 7.86171H-743.958ZM596.224 63.4736V59.2065C598.032 59.2065 599.378 60.6582 599.412 62.3146L595.146 62.4033L590.88 62.4919C590.939 65.3264 593.237 67.7408 596.224 67.7408V63.4736ZM-742.891 12.9385V8.67134C-741.124 8.67134 -739.691 10.1042 -739.691 11.8717H-743.958H-748.225C-748.225 14.8175 -745.837 17.2056 -742.891 17.2056V12.9385ZM656.726 62.4033L652.46 62.3146C652.494 60.6583 653.84 59.2065 655.648 59.2065V63.4736V67.7408C658.635 67.7408 660.933 65.3263 660.992 62.4919L656.726 62.4033ZM465.69 12.9385V8.67134C468.044 8.67134 469.955 10.5798 469.955 12.936H465.688H461.42C461.42 15.295 463.333 17.2056 465.69 17.2056V12.9385ZM-613.421 63.4736V59.2065C-611.613 59.2065 -610.268 60.6582 -610.233 62.3146L-614.499 62.4033L-618.766 62.4919C-618.707 65.3264 -616.408 67.7408 -613.421 67.7408V63.4736ZM785.118 12.9385V17.2056C788.064 17.2056 790.452 14.8175 790.452 11.8717H786.185H781.917C781.917 10.1042 783.35 8.67134 785.118 8.67134V12.9385Z" fill="#37332B" mask="url(#path-5-outside-1_450_8574)"/>
+<mask id="path-7-outside-2_450_8574" maskUnits="userSpaceOnUse" x="-746.129" y="2.36035" width="1534" height="63" fill="black">
+<rect fill="white" x="-746.129" y="2.36035" width="1534" height="63"/>
+<path d="M786.185 12.9385H707.25C679.34 12.9387 656.715 35.5637 656.715 63.4736H595.157C595.157 35.5637 572.532 12.9387 544.622 12.9385H465.688V12.9336H-423.461V12.9385H-502.396C-530.305 12.9386 -552.931 35.5637 -552.931 63.4736H-614.488C-614.488 35.5636 -637.114 12.9385 -665.024 12.9385H-743.958V6.79492H786.185V12.9385ZM786.191 5.86328H-744.129V4.36035H786.191V5.86328Z"/>
+</mask>
+<path d="M786.185 12.9385V14.0053C786.774 14.0053 787.251 13.5276 787.251 12.9385H786.185ZM707.25 12.9385V11.8717V11.8717V12.9385ZM656.715 63.4736V64.5404C657.304 64.5404 657.782 64.0628 657.782 63.4736H656.715ZM595.157 63.4736H594.09C594.09 64.0628 594.568 64.5404 595.157 64.5404V63.4736ZM544.622 12.9385V11.8717V11.8717V12.9385ZM465.688 12.9385H464.621C464.621 13.5276 465.098 14.0053 465.688 14.0053V12.9385ZM465.688 12.9336H466.754C466.754 12.3444 466.277 11.8668 465.688 11.8668V12.9336ZM-423.461 12.9336V11.8668C-424.05 11.8668 -424.528 12.3444 -424.528 12.9336H-423.461ZM-423.461 12.9385V14.0053C-422.872 14.0053 -422.394 13.5276 -422.394 12.9385H-423.461ZM-502.396 12.9385V11.8717V11.8717V12.9385ZM-552.931 63.4736V64.5404C-552.341 64.5404 -551.864 64.0628 -551.864 63.4736H-552.931ZM-614.488 63.4736H-615.555C-615.555 64.0628 -615.077 64.5404 -614.488 64.5404V63.4736ZM-743.958 12.9385H-745.025C-745.025 13.5276 -744.547 14.0053 -743.958 14.0053V12.9385ZM-743.958 6.79492V5.72814C-744.547 5.72814 -745.025 6.20575 -745.025 6.79492H-743.958ZM786.185 6.79492H787.251C787.251 6.20575 786.774 5.72814 786.185 5.72814V6.79492ZM786.191 5.86328V6.93007C786.781 6.93007 787.258 6.45245 787.258 5.86328H786.191ZM-744.129 5.86328H-745.196C-745.196 6.45245 -744.718 6.93007 -744.129 6.93007V5.86328ZM-744.129 4.36035V3.29357C-744.718 3.29357 -745.196 3.77118 -745.196 4.36035H-744.129ZM786.191 4.36035H787.258C787.258 3.77118 786.781 3.29357 786.191 3.29357V4.36035ZM786.185 12.9385V11.8717H707.25V12.9385V14.0053H786.185V12.9385ZM707.25 12.9385V11.8717C678.751 11.8719 655.648 34.9745 655.648 63.4736H656.715H657.782C657.782 36.1529 679.929 14.0054 707.25 14.0053V12.9385ZM656.715 63.4736V62.4068H595.157V63.4736V64.5404H656.715V63.4736ZM595.157 63.4736H596.224C596.224 34.9746 573.121 11.8719 544.622 11.8717V12.9385V14.0053C571.943 14.0055 594.09 36.1529 594.09 63.4736H595.157ZM544.622 12.9385V11.8717H465.688V12.9385V14.0053H544.622V12.9385ZM465.688 12.9385H466.754V12.9336H465.688H464.621V12.9385H465.688ZM465.688 12.9336V11.8668H-423.461V12.9336V14.0004H465.688V12.9336ZM-423.461 12.9336H-424.528V12.9385H-423.461H-422.394V12.9336H-423.461ZM-423.461 12.9385V11.8717H-502.396V12.9385V14.0053H-423.461V12.9385ZM-502.396 12.9385V11.8717C-530.895 11.8718 -553.997 34.9745 -553.997 63.4736H-552.931H-551.864C-551.864 36.1528 -529.716 14.0054 -502.396 14.0053V12.9385ZM-552.931 63.4736V62.4068H-614.488V63.4736V64.5404H-552.931V63.4736ZM-614.488 63.4736H-613.421C-613.421 34.9744 -636.525 11.8717 -665.024 11.8717V12.9385V14.0053C-637.704 14.0053 -615.555 36.1528 -615.555 63.4736H-614.488ZM-665.024 12.9385V11.8717H-743.958V12.9385V14.0053H-665.024V12.9385ZM-743.958 12.9385H-742.891V6.79492H-743.958H-745.025V12.9385H-743.958ZM-743.958 6.79492V7.86171H786.185V6.79492V5.72814H-743.958V6.79492ZM786.185 6.79492H785.118V12.9385H786.185H787.251V6.79492H786.185ZM786.191 5.86328V4.7965H-744.129V5.86328V6.93007H786.191V5.86328ZM-744.129 5.86328H-743.062V4.36035H-744.129H-745.196V5.86328H-744.129ZM-744.129 4.36035V5.42714H786.191V4.36035V3.29357H-744.129V4.36035ZM786.191 4.36035H785.125V5.86328H786.191H787.258V4.36035H786.191Z" fill="#040404" fill-opacity="0.5" mask="url(#path-7-outside-2_450_8574)"/>
+<g opacity="0.8" filter="url(#filter2_f_450_8574)" style="mix-blend-mode:plus-lighter">
+<path d="M771.178 65.6074C777.364 65.6075 782.379 70.6224 782.379 76.8086V94.4102H-744.664V76.8086C-744.664 70.6223 -739.649 65.6074 -733.463 65.6074H771.178Z" stroke="url(#paint4_linear_450_8574)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter3_f_450_8574)" style="mix-blend-mode:plus-lighter">
+<mask id="path-10-outside-3_450_8574" maskUnits="userSpaceOnUse" x="-746.129" y="3.33398" width="1522" height="61" fill="black">
+<rect fill="white" x="-746.129" y="3.33398" width="1522" height="61"/>
+<path d="M774.095 5.33398V11.4834H697.09C668.671 11.4834 645.633 34.5211 645.633 62.9395H584.556C584.555 34.5211 561.517 11.4834 533.099 11.4834H499.591V11.5234H-505.167C-532.643 12.591 -554.591 35.2019 -554.591 62.9395H-615.668C-615.668 34.5211 -638.707 11.4834 -667.125 11.4834H-744.129V5.33398H774.095Z"/>
+</mask>
+<path d="M774.095 5.33398H775.161V4.2672H774.095V5.33398ZM774.095 11.4834V12.5502H775.161V11.4834H774.095ZM645.633 62.9395V64.0062H646.7V62.9395L645.633 62.9395ZM584.556 62.9395L583.489 62.9395V64.0062H584.556V62.9395ZM499.591 11.4834V10.4166H498.524V11.4834H499.591ZM499.591 11.5234V12.5902H500.658V11.5234H499.591ZM-505.167 11.5234V10.4567H-505.188L-505.208 10.4575L-505.167 11.5234ZM-554.591 62.9395V64.0062H-553.524L-553.524 62.9395L-554.591 62.9395ZM-615.668 62.9395L-616.735 62.9395L-616.735 64.0062H-615.668V62.9395ZM-744.129 11.4834H-745.196V12.5502H-744.129V11.4834ZM-744.129 5.33398V4.2672H-745.196V5.33398H-744.129ZM774.095 5.33398H773.028V11.4834H774.095H775.161V5.33398H774.095ZM774.095 11.4834V10.4166H697.09V11.4834V12.5502H774.095V11.4834ZM697.09 11.4834V10.4166C668.082 10.4166 644.566 33.9319 644.566 62.9394L645.633 62.9395L646.7 62.9395C646.7 35.1103 669.26 12.5502 697.09 12.5502V11.4834ZM645.633 62.9395V61.8727H584.556V62.9395V64.0062H645.633V62.9395ZM584.556 62.9395L585.622 62.9394C585.622 33.9319 562.106 10.4166 533.099 10.4166V11.4834V12.5502C560.928 12.5502 583.489 35.1103 583.489 62.9395L584.556 62.9395ZM533.099 11.4834V10.4166H499.591V11.4834V12.5502H533.099V11.4834ZM499.591 11.4834H498.524V11.5234H499.591H500.658V11.4834H499.591ZM499.591 11.5234V10.4567H-505.167V11.5234V12.5902H499.591V11.5234ZM-505.167 11.5234L-505.208 10.4575C-533.255 11.5471 -555.657 34.6266 -555.658 62.9394L-554.591 62.9395L-553.524 62.9395C-553.524 35.7772 -532.031 13.6348 -505.126 12.5894L-505.167 11.5234ZM-554.591 62.9395V61.8727H-615.668V62.9395V64.0062H-554.591V62.9395ZM-615.668 62.9395L-614.601 62.9394C-614.601 33.9319 -638.117 10.4166 -667.125 10.4166V11.4834V12.5502C-639.296 12.5502 -616.735 35.1103 -616.735 62.9395L-615.668 62.9395ZM-667.125 11.4834V10.4166H-744.129V11.4834V12.5502H-667.125V11.4834ZM-744.129 11.4834H-743.062V5.33398H-744.129H-745.196V11.4834H-744.129ZM-744.129 5.33398V6.40077H774.095V5.33398V4.2672H-744.129V5.33398Z" fill="url(#paint5_linear_450_8574)" mask="url(#path-10-outside-3_450_8574)"/>
+</g>
+<g filter="url(#filter4_f_450_8574)">
+<path d="M-759.682 13.8684V4.26736C-759.682 3.08902 -758.726 2.13379 -757.548 2.13379H803.089C804.267 2.13379 805.223 3.08902 805.223 4.26736V13.8684" stroke="url(#paint6_linear_450_8574)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter5_f_450_8574)">
+<path d="M-533.922 62.9403V26.9541C-531.327 22.5921 -506.672 15.4683 -432.709 13.8682H450.956C521.026 14.4016 571.632 18.2301 571.632 31.316V62.9403" stroke="url(#paint7_linear_450_8574)" stroke-width="1.06678"/>
+</g>
+<path d="M-642.512 63.6704L677.761 63.6704" stroke="#1F1600" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_8574" x="-524.5" y="17.1807" width="1092.69" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8574"/>
+</filter>
+<filter id="filter1_f_450_8574" x="-715.118" y="68.274" width="1475.74" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8574"/>
+</filter>
+<filter id="filter2_f_450_8574" x="-746.264" y="64.0069" width="1530.24" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8574"/>
+</filter>
+<filter id="filter3_f_450_8574" x="-746.262" y="3.2003" width="1522.49" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8574"/>
+</filter>
+<filter id="filter4_f_450_8574" x="-761.282" y="0.533801" width="1568.1" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8574"/>
+</filter>
+<filter id="filter5_f_450_8574" x="-535.522" y="12.2677" width="1108.75" height="51.7395" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_8574"/>
+</filter>
+<linearGradient id="paint0_linear_450_8574" x1="21.3111" y1="17.1807" x2="21.3111" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#948F83"/>
+<stop offset="0.05" stop-color="#534F45"/>
+<stop offset="1" stop-color="#22211F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_8574" x1="-543.993" y1="34.5812" x2="567.122" y2="34.5814" gradientUnits="userSpaceOnUse">
+<stop stop-color="#78715F"/>
+<stop offset="0.077962" stop-color="#40361D" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#40361D" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#78715F"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_8574" x1="22.7542" y1="70.4077" x2="22.7542" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDCC2"/>
+<stop offset="1" stop-color="#DEDCC2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_8574" x1="-744.129" y1="33.917" x2="786.191" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B8B6B1"/>
+<stop offset="0.144231" stop-color="#AAA599"/>
+<stop offset="0.889423" stop-color="#AAA599"/>
+<stop offset="0.961538" stop-color="#9F9B90"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_8574" x1="18.8573" y1="66.1406" x2="18.8573" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B8881"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_8574" x1="14.9829" y1="5.33398" x2="14.9829" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEDCC2"/>
+<stop offset="1" stop-color="#DEDCC2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_8574" x1="22.7705" y1="2.13379" x2="22.7705" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B0ACA3"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_8574" x1="18.8553" y1="13.8682" x2="18.8553" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B0ACA3"/>
+<stop offset="1" stop-color="#B0ACA3" stop-opacity="0.639216"/>
+</linearGradient>
+<clipPath id="clip0_450_8574">
+<rect width="68" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_8574">
+<rect width="526" height="95" fill="white" transform="translate(-229.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/오른쪽.svg
new file mode 100644
index 0000000..8f00ed5
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/오른쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8696)">
+<g filter="url(#filter0_i_450_8696)">
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#555555"/>
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#A77900" fill-opacity="0.1"/>
+</g>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#555555"/>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#A77900" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_8696" maskUnits="userSpaceOnUse" x="-155.559" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="-155.559" y="1.0874" width="205" height="80"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z"/>
+</mask>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#AAAAAA"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#555555" mask="url(#path-3-outside-1_450_8696)"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#A77900" fill-opacity="0.1" mask="url(#path-3-outside-1_450_8696)"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#777777"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#555555" stroke-width="4"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_8696" x="-124.781" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8696"/>
+</filter>
+<clipPath id="clip0_450_8696">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/왼쪽.svg
new file mode 100644
index 0000000..e31f962
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/왼쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8678)">
+<g filter="url(#filter0_i_450_8678)">
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#555555"/>
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#A77900" fill-opacity="0.1"/>
+</g>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#555555"/>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#A77900" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_8678" maskUnits="userSpaceOnUse" x="1" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="1" y="1.0874" width="205" height="80"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z"/>
+</mask>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#AAAAAA"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#555555" mask="url(#path-3-outside-1_450_8678)"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#A77900" fill-opacity="0.1" mask="url(#path-3-outside-1_450_8678)"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#777777"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#555555" stroke-width="4"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_8678" x="31.7773" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8678"/>
+</filter>
+<clipPath id="clip0_450_8678">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/중앙.svg
new file mode 100644
index 0000000..36d6ef2
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교량/위치도/중앙.svg	
@@ -0,0 +1,37 @@
+<svg width="97" height="93" viewBox="0 0 97 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8687)">
+<g filter="url(#filter0_i_450_8687)">
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#555555"/>
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#A77900" fill-opacity="0.1"/>
+</g>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#555555"/>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#A77900" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_8687" maskUnits="userSpaceOnUse" x="-122.176" y="1" width="343" height="17" fill="black">
+<rect fill="white" x="-122.176" y="1" width="343" height="17"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z"/>
+</mask>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#AAAAAA"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#555555" mask="url(#path-3-outside-1_450_8687)"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#A77900" fill-opacity="0.1" mask="url(#path-3-outside-1_450_8687)"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#777777"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#A77900" fill-opacity="0.1"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#555555" stroke-width="4"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_8687" x="-72.6289" y="13" width="243.246" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8687"/>
+</filter>
+<clipPath id="clip0_450_8687">
+<rect width="97" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/오른쪽.svg
new file mode 100644
index 0000000..da8e2fd
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/오른쪽.svg	
@@ -0,0 +1,101 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7256)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_450_7256)"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="black" fill-opacity="0.5"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" stroke="url(#paint1_linear_450_7256)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_7256)">
+<path d="M-44.9453 7.66511C-44.9453 3.94713 -41.9313 0.933105 -38.2133 0.933105H25.0126C28.7306 0.933105 31.7446 3.94712 31.7446 7.66511V32.0673C31.7446 50.2927 16.97 65.0673 -1.25538 65.0673H-38.2133C-41.9313 65.0673 -44.9453 62.0533 -44.9453 58.3353V7.66511Z" fill="#4E493D" fill-opacity="0.01"/>
+<path d="M-38.2129 1.13135H25.0127C28.6213 1.13139 31.5469 4.05692 31.5469 7.66553V32.0669C31.5469 50.1829 16.8602 64.8696 -1.25586 64.8696H-38.2129C-41.8215 64.8696 -44.747 61.944 -44.7471 58.3354V7.66553C-44.7471 4.0569 -41.8215 1.13135 -38.2129 1.13135Z" stroke="url(#paint2_linear_450_7256)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_7256)">
+<path d="M-41.9766 7.39212C-41.9766 5.64248 -40.5582 4.22412 -38.8086 4.22412H25.6074C27.3571 4.22412 28.7754 5.64248 28.7754 7.39212V33.0001C28.7754 48.8927 15.892 61.7761 -0.000556946 61.7761H-38.8086C-40.5582 61.7761 -41.9766 60.3578 -41.9766 58.6081V7.39212Z" fill="#4E493D" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48779H25.6074C27.2112 4.48779 28.5117 5.78827 28.5117 7.39209V33.0005C28.5115 48.7471 15.7456 61.5122 -0.000976562 61.5122H-38.8086C-40.4124 61.5122 -41.7129 60.2117 -41.7129 58.6079V7.39209C-41.7129 5.78828 -40.4124 4.48781 -38.8086 4.48779Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_450_7256)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#4E493D" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#4E493D" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_450_7256)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_450_7256)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_450_7256)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_7256" x="-45.6053" y="-0.122895" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7256"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_7256" result="effect2_innerShadow_450_7256"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_7256"/>
+</filter>
+<filter id="filter1_ddi_450_7256" x="-43.0326" y="2.90412" width="72.864" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_7256"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_7256" result="effect2_dropShadow_450_7256"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_7256" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_7256"/>
+</filter>
+<filter id="filter2_f_450_7256" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_7256"/>
+</filter>
+<filter id="filter3_f_450_7256" x="24.402" y="6.3361" width="2.45964" height="3.29314" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_450_7256"/>
+</filter>
+<linearGradient id="paint0_linear_450_7256" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBF0D6"/>
+<stop offset="0.5" stop-color="#88816F"/>
+<stop offset="1" stop-color="#35322C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_7256" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C776C"/>
+<stop offset="0.2" stop-color="#4E493D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_7256" x1="-6.60035" y1="0.933105" x2="-6.60035" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#59564E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_7256" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DED9CF"/>
+<stop offset="0.201923" stop-color="#B4AB96" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_7256" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_7256">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/왼쪽.svg
new file mode 100644
index 0000000..faa3ac7
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/왼쪽.svg	
@@ -0,0 +1,236 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7229)">
+<mask id="mask0_450_7229" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_7229)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_450_7229)"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" stroke="url(#paint1_linear_450_7229)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_7229)">
+<rect x="-66.252" y="0.933105" width="170.438" height="64.1342" rx="6.732" fill="#4E493D" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13111" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_7229)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_7229)">
+<rect x="-59.6523" y="4.22412" width="157.242" height="57.552" rx="3.168" fill="#4E493D" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.48812" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_450_7229)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#4E493D" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="#4E493D" fill-opacity="0.01"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="url(#paint3_linear_450_7229)"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" stroke="url(#paint4_linear_450_7229)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_450_7229)">
+<path d="M2.64258 32.7358C2.64258 14.5104 17.4172 -0.26416 35.6426 -0.26416H66.5306C67.697 -0.26416 68.6426 0.681415 68.6426 1.84784V32.7358C68.6426 50.9612 53.868 65.7358 35.6426 65.7358H4.75458C3.58815 65.7358 2.64258 64.7903 2.64258 63.6238V32.7358Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_450_7229" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_450_7229)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_450_7229)" stroke-width="8.448" mask="url(#path-10-inside-1_450_7229)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_450_7229)" stroke-width="8.448" mask="url(#path-10-inside-1_450_7229)"/>
+<g filter="url(#filter4_iif_450_7229)">
+<path d="M0.93392 33.8745C0.967179 15.6491 15.7687 0.901473 33.9941 0.934732L64.0729 0.989621C64.6561 0.990686 65.128 1.46433 65.1269 2.04755L65.0721 32.1257C65.0388 50.351 50.2373 65.0987 32.0119 65.0654L1.9331 65.0105C1.34989 65.0095 0.877968 64.5358 0.879032 63.9526L0.93392 33.8745Z" fill="#4E493D" fill-opacity="0.01"/>
+<path d="M33.9937 1.13297L64.0728 1.18786C64.5464 1.18887 64.9293 1.57323 64.9286 2.04685L64.8737 32.1249C64.8407 50.2409 50.1282 64.9008 32.0122 64.8677L1.93313 64.8129C1.45942 64.8118 1.07641 64.4266 1.07727 63.9529L1.13216 33.8748C1.16523 15.7588 15.8777 1.09992 33.9937 1.13297Z" stroke="url(#paint8_linear_450_7229)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_450_7229)">
+<mask id="path-13-inside-2_450_7229" fill="white">
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z"/>
+</mask>
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_450_7229)"/>
+</g>
+<g filter="url(#filter6_f_450_7229)">
+<mask id="path-14-inside-3_450_7229" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#4E493D" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_450_7229)"/>
+</g>
+<mask id="path-15-inside-4_450_7229" fill="white">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z"/>
+</mask>
+<g filter="url(#filter7_i_450_7229)">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" fill="#4E493D" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" stroke="url(#paint9_linear_450_7229)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_450_7229)"/>
+<g filter="url(#filter8_dii_450_7229)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0176 13.3682C35.3983 13.3682 36.5176 14.4875 36.5176 15.8682V21.005L46.103 30.5903H52.0741C53.4547 30.5903 54.5741 31.7096 54.5741 33.0903C54.5741 34.471 53.4547 35.5903 52.0741 35.5903H45.3842L36.5176 44.4569V49.8682C36.5176 51.2489 35.3983 52.3681 34.0176 52.3681C32.637 52.3681 31.5177 51.2489 31.5176 49.8682V44.7304L22.3775 35.5903H15.9629C14.5822 35.5903 13.4629 34.471 13.4629 33.0903C13.4629 31.7096 14.5822 30.5903 15.9629 30.5903H21.6587L31.5176 20.7314V15.8682C31.5176 14.4875 32.6369 13.3682 34.0176 13.3682ZM31.5176 41.9018V35.5903H25.2061L31.5176 41.9018ZM36.5176 41.6283L42.5556 35.5903H36.5176V41.6283ZM24.4871 30.5903H31.5176V23.5597L24.4871 30.5903ZM36.5176 30.5903H43.2747L36.5176 23.8333V30.5903Z" fill="url(#paint10_linear_450_7229)"/>
+<path d="M25.1123 35.6836L31.6494 42.2207V35.458H24.8877L25.1123 35.6836ZM36.3857 41.9473L42.6494 35.6836L42.874 35.458H36.3857V41.9473ZM24.168 30.7227H31.6494V23.2412L24.168 30.7227ZM36.3857 30.7227H43.5938L36.3857 23.5146V30.7227ZM31.6494 44.6758L31.6113 44.6367L22.4707 35.4971L22.4326 35.458H15.9629C14.6551 35.458 13.5947 34.3976 13.5947 33.0898C13.595 31.7823 14.6552 30.7227 15.9629 30.7227H21.7139L21.752 30.6836L31.6113 20.8252L31.6494 20.7861V15.8682C31.6494 14.5604 32.7098 13.5 34.0176 13.5C35.3254 13.5 36.3857 14.5604 36.3857 15.8682V21.0596L36.4238 21.0986L46.0098 30.6836L46.0479 30.7227H52.0742C53.3818 30.7228 54.4421 31.7823 54.4424 33.0898C54.4424 34.3976 53.3819 35.4579 52.0742 35.458H45.3291L45.291 35.4971L36.4238 44.3633L36.3857 44.4023V49.8682C36.3857 51.1759 35.3253 52.2363 34.0176 52.2363C32.7098 52.2363 31.6495 51.1759 31.6494 49.8682V44.6758Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_7229" x="-66.912" y="-0.122895" width="171.757" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7229"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_7229" result="effect2_innerShadow_450_7229"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_7229"/>
+</filter>
+<filter id="filter1_ddi_450_7229" x="-60.7083" y="2.90412" width="159.354" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_7229"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_7229" result="effect2_dropShadow_450_7229"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_7229" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_7229"/>
+</filter>
+<filter id="filter2_f_450_7229" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_7229"/>
+</filter>
+<filter id="filter3_f_450_7229" x="-2.63742" y="-5.54416" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_450_7229"/>
+</filter>
+<filter id="filter4_iif_450_7229" x="0.218906" y="-0.12143" width="65.568" height="65.8469" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7229"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_7229" result="effect2_innerShadow_450_7229"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_7229"/>
+</filter>
+<filter id="filter5_dd_450_7229" x="3.17252" y="2.90412" width="59.6647" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_7229"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_7229" result="effect2_dropShadow_450_7229"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_7229" result="shape"/>
+</filter>
+<filter id="filter6_f_450_7229" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_7229"/>
+</filter>
+<filter id="filter7_i_450_7229" x="5.21028" y="5.73438" width="55.0592" height="55.5877" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7229"/>
+</filter>
+<filter id="filter8_dii_450_7229" x="11.6149" y="12.3122" width="45.3353" height="43.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_7229"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_450_7229" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_450_7229"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_450_7229" result="effect3_innerShadow_450_7229"/>
+</filter>
+<linearGradient id="paint0_linear_450_7229" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBF0D6"/>
+<stop offset="0.5" stop-color="#88816F"/>
+<stop offset="1" stop-color="#35322C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_7229" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C776C"/>
+<stop offset="0.2" stop-color="#4E493D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_7229" x1="18.9672" y1="0.933105" x2="18.9672" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#59564E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_7229" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DED9CF"/>
+<stop offset="0.201923" stop-color="#B4AB96" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_7229" x1="-36.6666" y1="5.34131" x2="-36.6666" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_7229" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAE3D1"/>
+<stop offset="0.458959" stop-color="#AAA599"/>
+<stop offset="1" stop-color="#706C63"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_7229" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#797056"/>
+<stop offset="0.5" stop-color="#4E493D"/>
+<stop offset="1" stop-color="#312B19"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_7229" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C776C"/>
+<stop offset="0.2" stop-color="#4E493D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_7229" x1="33.0615" y1="0.93303" x2="32.9445" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#59564E"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_7229" x1="6.81248" y1="6.65267" x2="18.6608" y2="57.589" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_7229" x1="23.1374" y1="19.1191" x2="49.1137" y2="45.0954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_450_7229">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/중앙.svg
new file mode 100644
index 0000000..18ed9bb
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/실사화/중앙.svg	
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7248)">
+<g clip-path="url(#clip1_450_7248)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_450_7248)"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint1_linear_450_7248)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_450_7248)">
+<rect x="-249.951" y="0.933105" width="590.064" height="64.1342" rx="6.732" fill="#4E493D" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13111" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_450_7248)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_450_7248)">
+<rect x="-227.107" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="#4E493D" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_450_7248)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#4E493D" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#4E493D" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_450_7248)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_450_7248)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_450_7248" x="-250.611" y="-0.122895" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7248"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_7248" result="effect2_innerShadow_450_7248"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_450_7248"/>
+</filter>
+<filter id="filter1_ddi_450_7248" x="-228.163" y="2.90412" width="546.489" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_450_7248"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_450_7248" result="effect2_dropShadow_450_7248"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_450_7248" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_450_7248"/>
+</filter>
+<filter id="filter2_f_450_7248" x="-219.201" y="4.02131" width="528.562" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_450_7248"/>
+</filter>
+<linearGradient id="paint0_linear_450_7248" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBF0D6"/>
+<stop offset="0.5" stop-color="#88816F"/>
+<stop offset="1" stop-color="#35322C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_7248" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7C776C"/>
+<stop offset="0.2" stop-color="#4E493D" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_7248" x1="45.0809" y1="0.933105" x2="45.0809" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#59564E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_7248" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DED9CF"/>
+<stop offset="0.201923" stop-color="#B4AB96" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_7248" x1="-147.526" y1="5.34131" x2="-147.526" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#5C4C26" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_7248">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_7248">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/위치도/오른쪽.svg
new file mode 100644
index 0000000..1ccae38
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1922" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#444444"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1922)" fill-opacity="0.3"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1922)"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#A77900" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1922)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1922" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/위치도/왼쪽.svg
new file mode 100644
index 0000000..8f227ed
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/교차로/위치도/왼쪽.svg	
@@ -0,0 +1,15 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1919" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#444444"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1919)"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#A77900" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1919)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#555555" stroke-width="4"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 13.5C34.3807 13.5 35.5 14.6193 35.5 16V21.1367L45.0859 30.7227H51.0566C52.4373 30.7228 53.5566 31.842 53.5566 33.2227C53.5564 34.6031 52.4371 35.7225 51.0566 35.7227H44.3652L35.5 44.5879V50C35.5 51.3807 34.3807 52.5 33 52.5C31.6193 52.5 30.5 51.3807 30.5 50V44.8613L21.3613 35.7227H14.9453C13.5647 35.7227 12.4455 34.6032 12.4453 33.2227C12.4453 31.8419 13.5646 30.7227 14.9453 30.7227H20.6406L30.5 20.8633V16C30.5 14.6193 31.6193 13.5 33 13.5ZM30.5 42.0332V35.7227H24.1895L30.5 42.0332ZM35.5 35.7227V41.7598L41.5371 35.7227H35.5ZM35.5 30.7227H42.2578L35.5 23.9648V30.7227ZM23.4688 30.7227H30.5V23.6914L23.4688 30.7227Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/오른쪽.svg
new file mode 100644
index 0000000..842656f
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/오른쪽.svg	
@@ -0,0 +1,156 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8515)">
+<g clip-path="url(#clip1_450_8515)">
+<g filter="url(#filter0_i_450_8515)">
+<path d="M-188 40C-188 17.9086 -170.091 0 -148 0H8C30.0914 0 48 17.9086 48 40V86C48 90.9706 43.9706 95 39 95H-178C-183.523 95 -188 90.5229 -188 85V40Z" fill="#A59C85"/>
+</g>
+<path d="M-148 1.5H8C29.263 1.5 46.5 18.737 46.5 40V86C46.5 90.1421 43.1421 93.5 39 93.5H-178C-182.694 93.5 -186.5 89.6944 -186.5 85V40C-186.5 18.737 -169.263 1.5 -148 1.5Z" stroke="#37332B" stroke-width="3"/>
+<g filter="url(#filter1_i_450_8515)">
+<path d="M-183 42C-183 21.5655 -166.435 5 -146 5H6C26.4345 5 43 21.5655 43 42V89C43 91.2091 41.2091 93 39 93H-179C-181.209 93 -183 91.2091 -183 89V42Z" fill="#AAA599"/>
+</g>
+<path d="M6 4.5C26.7107 4.5 43.5 21.2893 43.5 42V89C43.5 91.4853 41.4853 93.5 39 93.5H-179C-181.485 93.5 -183.5 91.4853 -183.5 89V42C-183.5 21.2893 -166.711 4.5 -146 4.5H6Z" stroke="#37332B" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_8515)" style="mix-blend-mode:plus-lighter">
+<path d="M43.375 87C43.3733 87.0986 43.3335 87.1931 43.2634 87.2628C43.1932 87.3325 43.0986 87.3717 43 87.3717C42.9014 87.3717 42.8068 87.3325 42.7366 87.2628C42.6665 87.1931 42.6267 87.0986 42.625 87C42.5833 84.637 42.5437 82.2739 42.5062 79.9109C42.3228 68.348 42.1891 56.7851 42.1054 45.2222L42.1088 45.2995C41.2471 35.8075 38.4883 26.1616 31.9222 19.2957C26.3411 13.3418 18.5522 9.86908 10.5659 7.89575L10.7826 7.9216C-2.11522 7.84105 -15.013 7.69843 -27.9109 7.49375C-30.2739 7.45625 -32.637 7.41667 -35 7.375C-35.0986 7.37325 -35.1931 7.33355 -35.2628 7.26338C-35.3326 7.19322 -35.3717 7.09857 -35.3717 7C-35.3717 6.90143 -35.3326 6.80678 -35.2628 6.73662C-35.1931 6.66645 -35.0986 6.62675 -35 6.625C-32.637 6.58333 -30.2739 6.54375 -27.9109 6.50625C-15.013 6.30157 -2.11522 6.15895 10.7826 6.0784L10.9993 6.10425C19.2089 8.02431 27.4266 11.5808 33.3771 17.9233C40.3805 25.2535 43.1549 35.4506 43.8912 45.1449L43.8946 45.2222C43.8109 56.7851 43.6772 68.348 43.4938 79.9109C43.4563 82.2739 43.4167 84.637 43.375 87Z" fill="url(#paint0_linear_450_8515)"/>
+</g>
+<mask id="path-6-inside-1_450_8515" fill="white">
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z"/>
+</mask>
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z" fill="url(#paint1_linear_450_8515)"/>
+<path d="M-173 39C-173 25.1929 -161.807 14 -148 14H9C22.8071 14 34 25.1929 34 39H30C30 27.402 20.598 18 9 18H-148C-159.598 18 -169 27.402 -169 39H-173ZM-169 39M32 72H-171H32M-167 72C-170.314 72 -173 69.3137 -173 66V39C-173 25.1929 -161.807 14 -148 14V18C-159.598 18 -169 27.402 -169 39V68C-169 70.2091 -168.105 72 -167 72ZM9 14C22.8071 14 34 25.1929 34 39V66C34 69.3137 31.3137 72 28 72C29.1046 72 30 70.2091 30 68V39C30 27.402 20.598 18 9 18V14Z" fill="#37332B" mask="url(#path-6-inside-1_450_8515)"/>
+<g filter="url(#filter3_f_450_8515)" style="mix-blend-mode:color-dodge">
+<path d="M44.875 83C44.8728 83.0984 44.8331 83.1927 44.7629 83.2622C44.6928 83.3318 44.5983 83.3709 44.5 83.3709C44.4017 83.3709 44.3072 83.3318 44.2371 83.2622C44.1669 83.1927 44.1272 83.0984 44.125 83C44.125 83 44.125 83 44.125 83C44.0833 81.119 44.0437 79.2381 44.0062 77.3571C43.7547 64.7381 43.5969 52.1191 43.5328 39.5C43.5141 35.3142 42.6745 31.1433 41.0904 27.272C36.312 15.4179 24.7498 7.07363 12.1573 4.6879L12.2826 4.69922C8.40269 4.63959 4.52277 4.5711 0.642853 4.49375C-1.2381 4.45625 -3.11905 4.41667 -5 4.375C-5.09836 4.37281 -5.19269 4.33305 -5.26224 4.26293C-5.33179 4.19281 -5.37086 4.09834 -5.37086 4C-5.37086 3.90166 -5.33179 3.80719 -5.26224 3.73707C-5.19269 3.66695 -5.09836 3.62719 -5 3.625C-3.11905 3.58333 -1.2381 3.54375 0.642853 3.50625C4.52277 3.4289 8.40269 3.36041 12.2826 3.30078L12.4079 3.3121C25.4545 5.35251 37.872 13.9223 42.9419 26.5158C44.6225 30.6213 45.493 35.064 45.4672 39.5C45.4031 52.1191 45.2453 64.7381 44.9938 77.3571C44.9563 79.2381 44.9167 81.119 44.875 83Z" fill="url(#paint2_linear_450_8515)"/>
+</g>
+<g filter="url(#filter4_f_450_8515)">
+<path d="M-145 5.5H5C25.7107 5.5 42.5 22.2893 42.5 43V85.7949L31.5645 68.6934C32.7322 67.8814 33.5 66.5322 33.5 65V39C33.5 25.469 22.531 14.5 9 14.5H-149C-162.531 14.5 -173.5 25.469 -173.5 39V65C-173.5 67.0752 -172.095 68.8207 -170.185 69.3408L-182.5 87.835V43C-182.5 22.2893 -165.711 5.5 -145 5.5Z" stroke="url(#paint3_linear_450_8515)"/>
+</g>
+<g filter="url(#filter5_f_450_8515)">
+<path d="M29.8113 70.8396H10L13.1698 66.6721H29.0189V33.9283C29.0189 27.2605 22 23 17.5 18C24 22 30.3396 29.1656 31 33.9283V69.8084C30.7822 70.565 30.4874 70.762 29.8113 70.8396Z" fill="url(#paint4_linear_450_8515)"/>
+</g>
+<path d="M-182.28 92.7408C-183.047 92.7408 -183.529 91.9128 -183.149 91.2462L-169.537 67.3296H30.5369L44.1493 91.2462C44.5287 91.9128 44.0473 92.7408 43.2802 92.7408H-182.28Z" fill="url(#paint5_linear_450_8515)" stroke="#37332B" stroke-width="1.2"/>
+<path d="M-179.887 90L-181.5 94.2753L40 95C42.1116 94.5403 42.634 94 44.134 93L43.5 90.1088L-179.887 90Z" fill="#37332B"/>
+<g opacity="0.5" filter="url(#filter6_f_450_8515)" style="mix-blend-mode:plus-lighter">
+<path d="M-168 67.9072H29L40.5 89.8533H-179.5L-168 67.9072Z" stroke="url(#paint6_linear_450_8515)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter7_f_450_8515)">
+<path d="M11.8691 19.417C21.2814 22.2894 27.001 29.7988 27.001 41.3678V63.4999" stroke="url(#paint7_linear_450_8515)" stroke-width="2"/>
+</g>
+<line x1="-169.5" y1="66.4526" x2="30.5" y2="66.4527" stroke="url(#paint8_linear_450_8515)" stroke-linecap="round"/>
+<line x1="-180" y1="92.5" x2="41" y2="92.5" stroke="url(#paint9_linear_450_8515)" stroke-linecap="round"/>
+<g opacity="0.45">
+<mask id="path-17-inside-2_450_8515" fill="white">
+<path d="M-173 38C-173 24.7452 -162.255 14 -149 14H10C23.2548 14 34 24.7452 34 38V68C34 70.2091 32.2091 72 30 72H-169C-171.209 72 -173 70.2091 -173 68V38Z"/>
+</mask>
+<path d="M-174 38C-174 24.1929 -162.807 13 -149 13H10C23.8071 13 35 24.1929 35 38H33C33 25.2975 22.7025 15 10 15H-149C-161.703 15 -172 25.2975 -172 38H-174ZM-172 38M34 72H-173H34M-169 72C-171.761 72 -174 69.7614 -174 67V38C-174 24.1929 -162.807 13 -149 13V15C-161.703 15 -172 25.2975 -172 38V68C-172 70.2091 -170.657 72 -169 72ZM10 13C23.8071 13 35 24.1929 35 38V67C35 69.7614 32.7614 72 30 72C31.6569 72 33 70.2091 33 68V38C33 25.2975 22.7025 15 10 15V13Z" fill="url(#paint10_linear_450_8515)" mask="url(#path-17-inside-2_450_8515)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_8515" x="-188" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8515"/>
+</filter>
+<filter id="filter1_i_450_8515" x="-184" y="4" width="230" height="92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0 0.870588 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8515"/>
+</filter>
+<filter id="filter2_f_450_8515" x="-37.3711" y="4.07861" width="83.2656" height="85.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_8515"/>
+</filter>
+<filter id="filter3_f_450_8515" x="-7.37109" y="1.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_8515"/>
+</filter>
+<filter id="filter4_f_450_8515" x="-184" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_8515"/>
+</filter>
+<filter id="filter5_f_450_8515" x="8" y="16" width="25" height="56.8394" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_8515"/>
+</filter>
+<filter id="filter6_f_450_8515" x="-182.152" y="65.9072" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_8515"/>
+</filter>
+<filter id="filter7_f_450_8515" x="7.87812" y="14.7604" width="23.8238" height="52.4396" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_450_8515"/>
+</filter>
+<linearGradient id="paint0_linear_450_8515" x1="4" y1="6.11111" x2="47.5893" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0EEEA" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#F0EEEA"/>
+<stop offset="1" stop-color="#F0EEEA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_8515" x1="-69.5" y1="16" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E594A"/>
+<stop offset="0.509615" stop-color="#4B473E"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_8515" x1="5.49999" y1="3.12222" x2="48.5449" y2="46.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E7E5E0" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#E7E5E0"/>
+<stop offset="1" stop-color="#E7E5E0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_8515" x1="-162" y1="6.97622" x2="42.5351" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2D9C3"/>
+<stop offset="1" stop-color="#E2D9C3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_8515" x1="31" y1="43.1561" x2="27.0377" y2="43.1561" gradientUnits="userSpaceOnUse">
+<stop stop-color="#72654B"/>
+<stop offset="1" stop-color="#72654B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_8515" x1="-184" y1="80.0352" x2="-146.5" y2="80.0352" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B877C"/>
+<stop offset="1" stop-color="#7C776B"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_8515" x1="-69.5" y1="67.9072" x2="-69.5" y2="89.8533" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2D9C3"/>
+<stop offset="1" stop-color="#E2D9C3"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_8515" x1="9.86058" y1="47.404" x2="28.1576" y2="32.1975" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AEA17F" stop-opacity="0"/>
+<stop offset="1" stop-color="#AEA17F"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_8515" x1="-170" y1="67.4526" x2="31" y2="67.4527" gradientUnits="userSpaceOnUse">
+<stop stop-color="#37332B" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#37332B"/>
+<stop offset="0.9" stop-color="#37332B"/>
+<stop offset="1" stop-color="#37332B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_8515" x1="-180.5" y1="93.5" x2="41.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#37332B" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#37332B"/>
+<stop offset="0.9" stop-color="#37332B"/>
+<stop offset="1" stop-color="#37332B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_8515" x1="-69.5" y1="14" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFDE7"/>
+<stop offset="1" stop-color="#FEFDE7" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_8515">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_8515">
+<rect width="236" height="95" fill="white" transform="translate(-188)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/왼쪽.svg
new file mode 100644
index 0000000..1365a09
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/왼쪽.svg	
@@ -0,0 +1,146 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8475)">
+<g clip-path="url(#clip1_450_8475)">
+<g filter="url(#filter0_i_450_8475)">
+<path d="M0 40C0 17.9086 17.9086 0 40 0H196C218.091 0 236 17.9086 236 40V86C236 90.9706 231.971 95 227 95H10C4.47715 95 0 90.5229 0 85V40Z" fill="#A59C85"/>
+</g>
+<path d="M40 1.5H196C217.263 1.5 234.5 18.737 234.5 40V86C234.5 90.1421 231.142 93.5 227 93.5H10C5.30558 93.5 1.5 89.6944 1.5 85V40C1.5 18.737 18.737 1.5 40 1.5Z" stroke="#37332B" stroke-width="3"/>
+<g filter="url(#filter1_i_450_8475)">
+<path d="M5 42C5 21.5655 21.5655 5 42 5H194C214.435 5 231 21.5655 231 42V89C231 91.2091 229.209 93 227 93H9C6.79086 93 5 91.2091 5 89V42Z" fill="#AAA599"/>
+</g>
+<path d="M194 4.5C214.711 4.5 231.5 21.2893 231.5 42V89C231.5 91.4853 229.485 93.5 227 93.5H9C6.51472 93.5 4.5 91.4853 4.5 89V42C4.5 21.2893 21.2893 4.5 42 4.5H194Z" stroke="#37332B" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_8475)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 87C6.62675 87.0986 6.66645 87.1931 6.73662 87.2628C6.80678 87.3325 6.90143 87.3717 7 87.3717C7.09857 87.3717 7.19322 87.3325 7.26338 87.2628C7.33355 87.1931 7.37325 87.0986 7.375 87C7.41667 84.637 7.45625 82.2739 7.49375 79.9109C7.67725 68.348 7.81086 56.7851 7.89459 45.2222L7.89125 45.2995C8.7529 35.8075 11.5117 26.1616 18.0778 19.2957C23.6589 13.3418 31.4478 9.86908 39.4341 7.89575L39.2174 7.9216C52.1152 7.84105 65.013 7.69843 77.9109 7.49375C80.2739 7.45625 82.637 7.41667 85 7.375C85.0986 7.37325 85.1931 7.33355 85.2628 7.26338C85.3326 7.19322 85.3717 7.09857 85.3717 7C85.3717 6.90143 85.3326 6.80678 85.2628 6.73662C85.1931 6.66645 85.0986 6.62675 85 6.625C82.637 6.58333 80.2739 6.54375 77.9109 6.50625C65.013 6.30157 52.1152 6.15895 39.2174 6.0784L39.0007 6.10425C30.7911 8.02431 22.5734 11.5808 16.6229 17.9233C9.61946 25.2535 6.84506 35.4506 6.10875 45.1449L6.10541 45.2222C6.18914 56.7851 6.32275 68.348 6.50625 79.9109C6.54375 82.2739 6.58333 84.637 6.625 87Z" fill="url(#paint0_linear_450_8475)"/>
+</g>
+<mask id="path-6-inside-1_450_8475" fill="white">
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z"/>
+</mask>
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z" fill="url(#paint1_linear_450_8475)"/>
+<path d="M15 39C15 25.1929 26.1929 14 40 14H197C210.807 14 222 25.1929 222 39H218C218 27.402 208.598 18 197 18H40C28.402 18 19 27.402 19 39H15ZM19 39M220 72H17H220M21 72C17.6863 72 15 69.3137 15 66V39C15 25.1929 26.1929 14 40 14V18C28.402 18 19 27.402 19 39V68C19 70.2091 19.8954 72 21 72ZM197 14C210.807 14 222 25.1929 222 39V66C222 69.3137 219.314 72 216 72C217.105 72 218 70.2091 218 68V39C218 27.402 208.598 18 197 18V14Z" fill="#37332B" mask="url(#path-6-inside-1_450_8475)"/>
+<g filter="url(#filter3_f_450_8475)">
+<path d="M21.9375 65.5C21.9473 65.6443 22.0078 65.7826 22.1123 65.8846C22.2168 65.9866 22.3558 66.0439 22.5 66.0439C22.6442 66.0439 22.7832 65.9866 22.8877 65.8846C22.9922 65.7826 23.0527 65.6443 23.0625 65.5C23.0625 65.5 23.0625 65.5 23.0625 65.5C23.125 64.5706 23.1844 63.6412 23.2406 62.7118C23.6585 55.8079 23.9039 48.9039 23.9768 42L23.9708 42.1337C24.1156 40.7127 24.2988 39.3046 24.5499 37.9233C25.5527 29.813 31.3226 23.5852 39.4095 21.4043C39.6541 21.3263 39.9028 21.2496 40.1556 21.1744L40 21.1922C40.6667 21.1506 41.3333 21.1073 42 21.0625C42.1443 21.0527 42.2826 20.9922 42.3846 20.8877C42.4866 20.7832 42.5439 20.6442 42.5439 20.5C42.5439 20.3558 42.4866 20.2168 42.3846 20.1123C42.2826 20.0078 42.1443 19.9473 42 19.9375C41.3333 19.8927 40.6667 19.8494 40 19.8078L39.8444 19.8256C39.5753 19.8708 39.3097 19.9183 39.0475 19.9679C30.5538 20.9146 22.4625 28.5392 21.5983 37.3865C21.3268 38.8804 21.1494 40.3766 21.0292 41.8663L21.0232 42C21.0961 48.9039 21.3415 55.8079 21.7594 62.7118C21.8156 63.6412 21.875 64.5706 21.9375 65.5Z" fill="url(#paint2_linear_450_8475)"/>
+</g>
+<g filter="url(#filter4_f_450_8475)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 86C6.62719 86.0984 6.66695 86.1927 6.73707 86.2622C6.80719 86.3318 6.90166 86.3709 7 86.3709C7.09834 86.3709 7.19281 86.3318 7.26293 86.2622C7.33305 86.1927 7.37281 86.0984 7.375 86C7.375 86 7.375 86 7.375 86C7.41667 84.119 7.45625 82.2381 7.49375 80.3571C7.74533 67.7381 7.90315 55.1191 7.96719 42.5C7.98589 38.3142 8.8255 34.1433 10.4096 30.272C15.188 18.4179 26.7502 10.0736 39.3427 7.6879L39.2174 7.69922C43.0973 7.63959 46.9772 7.5711 50.8571 7.49375C52.7381 7.45625 54.619 7.41667 56.5 7.375C56.5984 7.37281 56.6927 7.33305 56.7622 7.26293C56.8318 7.19281 56.8709 7.09834 56.8709 7C56.8709 6.90166 56.8318 6.80719 56.7622 6.73707C56.6927 6.66695 56.5984 6.62719 56.5 6.625C54.619 6.58333 52.7381 6.54375 50.8571 6.50625C46.9772 6.4289 43.0973 6.36041 39.2174 6.30078L39.0921 6.3121C26.0455 8.35251 13.628 16.9223 8.55807 29.5158C6.87747 33.6213 6.00697 38.064 6.03281 42.5C6.09685 55.1191 6.25467 67.7381 6.50625 80.3571C6.54375 82.2381 6.58333 84.119 6.625 86Z" fill="url(#paint3_linear_450_8475)"/>
+</g>
+<g filter="url(#filter5_f_450_8475)">
+<path d="M43 5.5H193C213.711 5.5 230.5 22.2893 230.5 43V85.7949L219.564 68.6934C220.732 67.8814 221.5 66.5322 221.5 65V39C221.5 25.469 210.531 14.5 197 14.5H39C25.469 14.5 14.5 25.469 14.5 39V65C14.5 67.0752 15.9051 68.8207 17.8154 69.3408L5.5 87.835V43C5.5 22.2893 22.2893 5.5 43 5.5Z" stroke="url(#paint4_linear_450_8475)"/>
+</g>
+<path d="M5.71979 92.7408C4.95273 92.7408 4.47127 91.9128 4.8507 91.2462L18.4632 67.3296H218.537L232.149 91.2462C232.529 91.9128 232.047 92.7408 231.28 92.7408H5.71979Z" fill="url(#paint5_linear_450_8475)" stroke="#37332B" stroke-width="1.2"/>
+<path d="M7.22949 92.3818L5.24609 91.7207L14.833 75.5225L7.22949 92.3818Z" fill="#37332B" stroke="#37332B"/>
+<path d="M8.11303 90L6.5 94.2753L228 95C230.112 94.5403 230.634 94 232.134 93L231.5 90.1088L8.11303 90Z" fill="#37332B"/>
+<g opacity="0.5" filter="url(#filter6_f_450_8475)" style="mix-blend-mode:plus-lighter">
+<path d="M20 67.9072H217L228.5 89.8533H8.5L20 67.9072Z" stroke="url(#paint6_linear_450_8475)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line x1="18.5" y1="66.4526" x2="218.5" y2="66.4527" stroke="url(#paint7_linear_450_8475)" stroke-linecap="round"/>
+<line x1="8" y1="92.5" x2="229" y2="92.5" stroke="url(#paint8_linear_450_8475)" stroke-linecap="round"/>
+<g opacity="0.45">
+<mask id="path-17-inside-2_450_8475" fill="white">
+<path d="M15 38C15 24.7452 25.7452 14 39 14H198C211.255 14 222 24.7452 222 38V68C222 70.2091 220.209 72 218 72H19C16.7909 72 15 70.2091 15 68V38Z"/>
+</mask>
+<path d="M14 38C14 24.1929 25.1929 13 39 13H198C211.807 13 223 24.1929 223 38H221C221 25.2975 210.703 15 198 15H39C26.2975 15 16 25.2975 16 38H14ZM16 38M222 72H15H222M19 72C16.2386 72 14 69.7614 14 67V38C14 24.1929 25.1929 13 39 13V15C26.2975 15 16 25.2975 16 38V68C16 70.2091 17.3431 72 19 72ZM198 13C211.807 13 223 24.1929 223 38V67C223 69.7614 220.761 72 218 72C219.657 72 221 70.2091 221 68V38C221 25.2975 210.703 15 198 15V13Z" fill="url(#paint9_linear_450_8475)" mask="url(#path-17-inside-2_450_8475)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_8475" x="0" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8475"/>
+</filter>
+<filter id="filter1_i_450_8475" x="4" y="4" width="230" height="92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0 0.870588 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8475"/>
+</filter>
+<filter id="filter2_f_450_8475" x="4.10547" y="4.07861" width="83.2656" height="85.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_8475"/>
+</filter>
+<filter id="filter3_f_450_8475" x="19.0234" y="17.8076" width="25.5195" height="50.2363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_8475"/>
+</filter>
+<filter id="filter4_f_450_8475" x="4.0332" y="4.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_8475"/>
+</filter>
+<filter id="filter5_f_450_8475" x="4" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_8475"/>
+</filter>
+<filter id="filter6_f_450_8475" x="5.84766" y="65.9072" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_8475"/>
+</filter>
+<linearGradient id="paint0_linear_450_8475" x1="46" y1="6.11111" x2="2.41074" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EBE9E2" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#EBE9E2"/>
+<stop offset="1" stop-color="#EBE9E2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_8475" x1="118.5" y1="16" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E594A"/>
+<stop offset="0.509615" stop-color="#4B473E"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_8475" x1="45.5" y1="20" x2="21" y2="45.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AEA17F" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#AEA17F"/>
+<stop offset="1" stop-color="#AEA17F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_8475" x1="46" y1="6.12222" x2="2.95507" y2="49.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B2D0E3" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#B2D0E3"/>
+<stop offset="1" stop-color="#B2D0E3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_8475" x1="26" y1="6.97622" x2="230.535" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2D9C3"/>
+<stop offset="1" stop-color="#E2D9C3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_8475" x1="4" y1="80.0352" x2="41.5" y2="80.0352" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B877C"/>
+<stop offset="1" stop-color="#7C776B"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_8475" x1="118.5" y1="67.9072" x2="118.5" y2="89.8533" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2D9C3"/>
+<stop offset="1" stop-color="#E2D9C3"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_8475" x1="18" y1="67.4526" x2="219" y2="67.4527" gradientUnits="userSpaceOnUse">
+<stop stop-color="#37332B" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#37332B"/>
+<stop offset="0.9" stop-color="#37332B"/>
+<stop offset="1" stop-color="#37332B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_8475" x1="7.5" y1="93.5" x2="229.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#37332B" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#37332B"/>
+<stop offset="0.9" stop-color="#37332B"/>
+<stop offset="1" stop-color="#37332B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_8475" x1="118.5" y1="14" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFDE7"/>
+<stop offset="1" stop-color="#FEFDE7" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_8475">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_8475">
+<rect width="236" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/중앙.svg
new file mode 100644
index 0000000..03fde94
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/실사화/중앙.svg	
@@ -0,0 +1,107 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="68" height="95" viewBox="0 0 68 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8495)">
+<g clip-path="url(#clip1_450_8495)">
+<rect width="586" height="95" transform="translate(-259)" fill="white"/>
+<g filter="url(#filter0_i_450_8495)">
+<path d="M-9019.96 40C-9019.96 17.9086 -9002.05 0 -8979.96 0H9145.62C9167.72 0 9185.62 17.9086 9185.62 40V86C9185.62 90.9706 9181.6 95 9176.62 95H-9009.96C-9015.48 95 -9019.96 90.5229 -9019.96 85V40Z" fill="#A59C85"/>
+</g>
+<path d="M-8979.96 1.5H9145.62C9166.89 1.5 9184.12 18.737 9184.12 40V86C9184.12 90.1422 9180.77 93.5 9176.62 93.5H-9009.96C-9014.65 93.5 -9018.46 89.6945 -9018.46 85V40C-9018.46 18.737 -9001.22 1.5 -8979.96 1.5Z" stroke="#37332B" stroke-width="3"/>
+<g filter="url(#filter1_i_450_8495)">
+<path d="M-8634.23 42C-8634.23 21.5655 -8617.67 5 -8597.23 5H8762.93C8783.36 5 8799.93 21.5655 8799.93 42V89C8799.93 91.2091 8798.13 93 8795.93 93H-8630.23C-8632.44 93 -8634.23 91.2091 -8634.23 89V42Z" fill="#AAA599"/>
+</g>
+<path d="M8762.93 4.5C8783.64 4.5 8800.43 21.2893 8800.43 42V89C8800.43 91.4853 8798.41 93.5 8795.93 93.5H-8630.23C-8632.72 93.5 -8634.73 91.4852 -8634.73 89V42C-8634.73 21.2893 -8617.94 4.5 -8597.23 4.5H8762.93Z" stroke="#37332B" style="mix-blend-mode:multiply"/>
+<mask id="path-5-inside-1_450_8495" fill="white">
+<path d="M-7708.55 39C-7708.55 26.2975 -7698.26 16 -7685.55 16H7928.33C7941.03 16 7951.33 26.2975 7951.33 39V68C7951.33 70.2091 7949.54 72 7947.33 72H-7704.56C-7706.76 72 -7708.55 70.2091 -7708.55 68V39Z"/>
+</mask>
+<path d="M-7708.55 39C-7708.55 26.2975 -7698.26 16 -7685.55 16H7928.33C7941.03 16 7951.33 26.2975 7951.33 39V68C7951.33 70.2091 7949.54 72 7947.33 72H-7704.56C-7706.76 72 -7708.55 70.2091 -7708.55 68V39Z" fill="url(#paint0_linear_450_8495)"/>
+<path d="M-7710.55 39C-7710.55 25.1929 -7699.36 14 -7685.55 14H7928.33C7942.14 14 7953.33 25.1929 7953.33 39H7949.33C7949.33 27.402 7939.93 18 7928.33 18H-7685.55C-7697.15 18 -7706.55 27.402 -7706.55 39H-7710.55ZM-7706.55 39M7951.33 72H-7708.55H7951.33M-7704.55 72C-7707.87 72 -7710.55 69.3137 -7710.55 66V39C-7710.55 25.1929 -7699.36 14 -7685.55 14V18C-7697.15 18 -7706.55 27.402 -7706.55 39V68C-7706.55 70.2091 -7705.66 72 -7704.55 72ZM7928.33 14C7942.14 14 7953.33 25.1929 7953.33 39V66C7953.33 69.3137 7950.64 72 7947.33 72C7948.43 72 7949.33 70.2091 7949.33 68V39C7949.33 27.402 7939.93 18 7928.33 18V14Z" fill="#37332B" mask="url(#path-5-inside-1_450_8495)"/>
+<g filter="url(#filter2_f_450_8495)">
+<path d="M-704.91 5.5H242.913C309.201 5.5 369.203 9.75261 412.622 16.624C434.336 20.0604 451.88 24.1478 463.984 28.6768C470.039 30.9422 474.703 33.3079 477.845 35.7373C480.995 38.1741 482.528 40.6063 482.528 43V86.8652L409.324 68.748C412.08 68.4356 414.437 68.0381 416.236 67.5752C417.434 67.2671 418.414 66.9237 419.104 66.543C419.45 66.3528 419.746 66.1396 419.963 65.8975C420.182 65.6523 420.341 65.3505 420.341 65V39C420.341 37.1136 419.133 35.3667 417.065 33.7676C414.988 32.161 411.955 30.6327 408.098 29.1895C400.377 26.3009 389.235 23.7087 375.501 21.5352C348.024 17.1868 310.084 14.5 268.188 14.5H-730.186C-772.081 14.5 -810.021 17.1868 -837.497 21.5352C-851.231 23.7087 -862.374 26.3009 -870.095 29.1895C-873.952 30.6327 -876.985 32.161 -879.062 33.7676C-881.13 35.3667 -882.337 37.1136 -882.337 39V65C-882.337 65.5055 -882.014 65.904 -881.63 66.2012C-881.236 66.5058 -880.686 66.7785 -880.026 67.0254C-878.701 67.5212 -876.812 67.9584 -874.513 68.3223C-871.273 68.835 -867.173 69.2079 -862.592 69.3848L-943.738 88.668C-944.025 88.5156 -944.229 88.3735 -944.358 88.2441C-944.51 88.0935 -944.525 88.0022 -944.525 87.9668V43C-944.525 40.6062 -942.992 38.1742 -939.841 35.7373C-936.699 33.3079 -932.035 30.9422 -925.98 28.6768C-913.876 24.1479 -896.333 20.0603 -874.619 16.624C-831.2 9.75259 -771.198 5.5 -704.91 5.5Z" stroke="url(#paint1_linear_450_8495)"/>
+</g>
+<path d="M-8711.38 92.7413L-7595.66 67.3301H7838.48L8954.2 92.7413H-8711.38Z" fill="url(#paint2_linear_450_8495)" stroke="#37332B" stroke-width="1.2"/>
+<path d="M-925.356 90L-935.549 94.2753L464.07 95C477.413 94.5403 480.714 94 490.192 93L486.186 90.1088L-925.356 90Z" fill="#37332B"/>
+<g opacity="0.5" filter="url(#filter3_f_450_8495)" style="mix-blend-mode:plus-lighter">
+<path d="M-850.246 67.9072H394.562L467.229 89.8533H-922.912L-850.246 67.9072Z" stroke="url(#paint3_linear_450_8495)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line x1="-862.383" y1="66.4526" x2="406.701" y2="66.4527" stroke="url(#paint4_linear_450_8495)" stroke-linecap="round"/>
+<line x1="-928.73" y1="92.5" x2="473.048" y2="92.5" stroke="url(#paint5_linear_450_8495)" stroke-linecap="round"/>
+<g opacity="0.45">
+<mask id="path-13-inside-2_450_8495" fill="white">
+<path d="M-7862.82 38C-7862.82 24.7452 -7852.08 14 -7838.82 14H8081.63C8094.89 14 8105.63 24.7452 8105.63 38V68C8105.63 70.2091 8103.84 72 8101.63 72H-7858.82C-7861.03 72 -7862.82 70.2091 -7862.82 68V38Z"/>
+</mask>
+<path d="M-7863.82 38C-7863.82 24.1929 -7852.63 13 -7838.82 13H8081.63C8095.44 13 8106.63 24.1929 8106.63 38H8104.63C8104.63 25.2975 8094.34 15 8081.63 15H-7838.82C-7851.52 15 -7861.82 25.2975 -7861.82 38H-7863.82ZM-7861.82 38M8105.63 72H-7862.82H8105.63M-7858.82 72C-7861.58 72 -7863.82 69.7614 -7863.82 67V38C-7863.82 24.1929 -7852.63 13 -7838.82 13V15C-7851.52 15 -7861.82 25.2975 -7861.82 38V68C-7861.82 70.2091 -7860.48 72 -7858.82 72ZM8081.63 13C8095.44 13 8106.63 24.1929 8106.63 38V67C8106.63 69.7614 8104.4 72 8101.63 72C8103.29 72 8104.63 70.2091 8104.63 68V38C8104.63 25.2975 8094.34 15 8081.63 15V13Z" fill="url(#paint6_linear_450_8495)" mask="url(#path-13-inside-2_450_8495)"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_8495" x="-9019.96" y="0" width="18207.6" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8495"/>
+</filter>
+<filter id="filter1_i_450_8495" x="-8635.23" y="4" width="17438.2" height="92" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0 0.870588 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_8495"/>
+</filter>
+<filter id="filter2_f_450_8495" x="-946.025" y="4" width="1430.05" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_8495"/>
+</filter>
+<filter id="filter3_f_450_8495" x="-924.201" y="65.9072" width="1392.72" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_8495"/>
+</filter>
+<linearGradient id="paint0_linear_450_8495" x1="121.388" y1="16" x2="121.388" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5E594A"/>
+<stop offset="0.509615" stop-color="#4B473E"/>
+<stop offset="1"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_8495" x1="-812.33" y1="6.97622" x2="-539.435" y2="568.818" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2D9C3"/>
+<stop offset="1" stop-color="#E2D9C3" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_8495" x1="-8711.38" y1="80.0357" x2="-5818.55" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B877C"/>
+<stop offset="1" stop-color="#7C776B"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_8495" x1="-227.842" y1="67.9072" x2="-227.842" y2="89.8533" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E2D9C3"/>
+<stop offset="1" stop-color="#E2D9C3"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_8495" x1="-862.883" y1="67.4526" x2="407.201" y2="67.4533" gradientUnits="userSpaceOnUse">
+<stop stop-color="#37332B" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#37332B"/>
+<stop offset="0.9" stop-color="#37332B"/>
+<stop offset="1" stop-color="#37332B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_8495" x1="-929.23" y1="93.5" x2="473.548" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#37332B" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#37332B"/>
+<stop offset="0.9" stop-color="#37332B"/>
+<stop offset="1" stop-color="#37332B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_8495" x1="121.407" y1="14" x2="121.407" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFDE7"/>
+<stop offset="1" stop-color="#FEFDE7" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_8495">
+<rect width="68" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_8495">
+<rect width="586" height="95" fill="white" transform="translate(-259)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/오른쪽.svg
new file mode 100644
index 0000000..222c20a
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/오른쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="53" height="93" viewBox="0 0 53 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8670)">
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#555555"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#555555" stroke-width="11"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#AAAAAA"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#555555" stroke-width="4"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#777777"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_8670" fill="white">
+<path d="M-152.746 45.5801C-152.746 23.4887 -134.837 5.58008 -112.746 5.58008H-1.74609C19.793 5.58008 37.2539 23.041 37.2539 44.5801V88H-152.746V45.5801Z"/>
+</mask>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_8670)"/>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#A77900" fill-opacity="0.1" mask="url(#path-4-inside-1_450_8670)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_8670">
+<rect width="53" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/왼쪽.svg
new file mode 100644
index 0000000..a671edd
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/왼쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8653)">
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#555555"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#555555" stroke-width="11"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#AAAAAA"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#555555" stroke-width="4"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#777777"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_8653" fill="white">
+<path d="M5.25391 45.5801C5.25391 23.4887 23.1625 5.58008 45.2539 5.58008H156.254C177.793 5.58008 195.254 23.041 195.254 44.5801V88H5.25391V45.5801Z"/>
+</mask>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_8653)"/>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#A77900" fill-opacity="0.1" mask="url(#path-4-inside-1_450_8653)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_8653">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/중앙.svg
new file mode 100644
index 0000000..c16f36d
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/지방도/터널/위치도/중앙.svg	
@@ -0,0 +1,31 @@
+<svg width="124" height="93" viewBox="0 0 124 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_8659)">
+<mask id="mask0_450_8659" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="329" height="93">
+<rect width="329" height="93" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_8659)">
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#555555"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#555555" stroke-width="11"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#AAAAAA"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#555555" stroke-width="4"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#777777"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#A77900" fill-opacity="0.1"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#555555" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#A77900" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-5-inside-1_450_8659" fill="white">
+<path d="M-2336.8 45.5801C-2336.8 23.4887 -2318.89 5.58008 -2296.8 5.58008H1301.26C1322.8 5.58008 1340.26 23.041 1340.26 44.5801V88H-2336.8V45.5801Z"/>
+</mask>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#555555" mask="url(#path-5-inside-1_450_8659)"/>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#A77900" fill-opacity="0.1" mask="url(#path-5-inside-1_450_8659)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_450_8659">
+<rect width="124" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/오른쪽.svg
new file mode 100644
index 0000000..d47cd6f
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/오른쪽.svg	
@@ -0,0 +1,183 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9389)">
+<g clip-path="url(#clip1_450_9389)">
+<g filter="url(#filter0_i_450_9389)">
+<path d="M-133.938 29.9821C-133.938 22.9121 -128.206 17.1807 -121.136 17.1807H2.83551C9.90555 17.1807 15.637 22.9121 15.637 29.9821V65.6913H-133.938V29.9821Z" fill="url(#paint0_linear_450_9389)"/>
+<path d="M-133.938 29.9821C-133.938 22.9121 -128.206 17.1807 -121.136 17.1807H2.83551C9.90555 17.1807 15.637 22.9121 15.637 29.9821V65.6913H-133.938V29.9821Z" fill="url(#paint1_linear_450_9389)"/>
+</g>
+<path d="M-121.136 17.7139H2.83594C9.6112 17.7141 15.1035 23.2071 15.1035 29.9824V65.1582H-133.404V29.9824C-133.404 23.207 -127.911 17.7139 -121.136 17.7139Z" stroke="#1A1302" stroke-width="1.06678"/>
+<path d="M34.75 66.2539C40.6417 66.2539 45.4179 71.0302 45.418 76.9219V93.9707H-163.796V76.9219C-163.796 71.0303 -159.02 66.254 -153.128 66.2539H34.75Z" fill="#76707A" stroke="#444047" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_9389)">
+<path d="M-161.662 76.922C-161.662 72.2086 -157.841 68.3877 -153.128 68.3877H34.7501C39.4634 68.3877 43.2844 72.2086 43.2844 76.922V90.7699C43.2844 91.359 42.8067 91.8366 42.2176 91.8366H-160.595C-161.184 91.8366 -161.662 91.359 -161.662 90.7699V76.922Z" fill="#76707A"/>
+</g>
+<path d="M34.75 67.8545C39.7579 67.8545 43.8173 71.914 43.8174 76.9219V90.7695C43.8174 91.6532 43.1014 92.37 42.2178 92.3701H-160.596C-161.479 92.3699 -162.195 91.6532 -162.195 90.7695V76.9219C-162.195 71.914 -158.136 67.8545 -153.128 67.8545H34.75Z" stroke="#444047" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_9389)" style="mix-blend-mode:plus-lighter">
+<path d="M35.458 69.8745C39.2875 69.8745 42.3914 72.9787 42.3916 76.8081V92.2769H-160.297V76.8081C-160.297 72.9788 -157.193 69.8747 -153.363 69.8745H35.458Z" stroke="url(#paint2_linear_450_9389)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_9389" maskUnits="userSpaceOnUse" x="-169.033" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-169.033" y="-0.639648" width="219" height="69"/>
+<path d="M45.6504 11.8717C45.6504 12.4609 45.1716 12.9351 44.5835 12.97C35.2827 13.5218 27.9102 21.2394 27.9102 30.6787V62.4068C27.9102 62.996 27.4325 63.4736 26.8434 63.4736H20.5424C19.9532 63.4736 19.4756 62.996 19.4756 62.4068V30.6787C19.4756 20.8818 11.5339 12.9395 1.73732 12.9385C1.73624 12.9385 1.73535 12.9376 1.73535 12.9365C1.73535 12.9354 1.73448 12.9346 1.7334 12.9346H-120.093C-120.094 12.9346 -120.095 12.9354 -120.095 12.9365C-120.095 12.9376 -120.096 12.9385 -120.097 12.9385C-129.893 12.9397 -137.834 20.8819 -137.834 30.6787V62.4068C-137.834 62.996 -138.312 63.4736 -138.901 63.4736H-145.202C-145.791 63.4736 -146.269 62.996 -146.269 62.4068V30.6787C-146.269 21.2395 -153.641 13.5219 -162.942 12.97C-163.53 12.9352 -164.009 12.4609 -164.009 11.8717V7.86171C-164.009 7.27254 -163.531 6.79492 -162.942 6.79492H44.5836C45.1728 6.79492 45.6504 7.27254 45.6504 7.86171V11.8717ZM45.6523 5.11182C45.6523 5.52684 45.3159 5.86328 44.9009 5.86328H-163.282C-163.697 5.86328 -164.033 5.52684 -164.033 5.11182C-164.033 4.69679 -163.697 4.36035 -163.282 4.36035H44.9009C45.3159 4.36035 45.6523 4.69679 45.6523 5.11182Z"/>
+</mask>
+<path d="M45.6504 11.8717C45.6504 12.4609 45.1716 12.9351 44.5835 12.97C35.2827 13.5218 27.9102 21.2394 27.9102 30.6787V62.4068C27.9102 62.996 27.4325 63.4736 26.8434 63.4736H20.5424C19.9532 63.4736 19.4756 62.996 19.4756 62.4068V30.6787C19.4756 20.8818 11.5339 12.9395 1.73732 12.9385C1.73624 12.9385 1.73535 12.9376 1.73535 12.9365C1.73535 12.9354 1.73448 12.9346 1.7334 12.9346H-120.093C-120.094 12.9346 -120.095 12.9354 -120.095 12.9365C-120.095 12.9376 -120.096 12.9385 -120.097 12.9385C-129.893 12.9397 -137.834 20.8819 -137.834 30.6787V62.4068C-137.834 62.996 -138.312 63.4736 -138.901 63.4736H-145.202C-145.791 63.4736 -146.269 62.996 -146.269 62.4068V30.6787C-146.269 21.2395 -153.641 13.5219 -162.942 12.97C-163.53 12.9352 -164.009 12.4609 -164.009 11.8717V7.86171C-164.009 7.27254 -163.531 6.79492 -162.942 6.79492H44.5836C45.1728 6.79492 45.6504 7.27254 45.6504 7.86171V11.8717ZM45.6523 5.11182C45.6523 5.52684 45.3159 5.86328 44.9009 5.86328H-163.282C-163.697 5.86328 -164.033 5.52684 -164.033 5.11182C-164.033 4.69679 -163.697 4.36035 -163.282 4.36035H44.9009C45.3159 4.36035 45.6523 4.69679 45.6523 5.11182Z" fill="url(#paint3_linear_450_9389)"/>
+<path d="M-120.097 12.9385L-120.096 17.2056L-120.097 12.9385ZM-162.942 12.97L-163.195 17.2297L-162.942 12.97ZM1.73732 12.9385L1.73778 8.67134L1.73732 12.9385ZM44.5835 12.97L44.3308 8.71038L44.5835 12.97ZM44.5835 12.97L44.3308 8.71038C32.7889 9.39505 23.643 18.9674 23.643 30.6787H27.9102H32.1773C32.1773 23.5114 37.7764 17.6485 44.8362 17.2297L44.5835 12.97ZM27.9102 30.6787H23.643V62.4068H27.9102H32.1773V30.6787H27.9102ZM26.8434 63.4736V59.2065H20.5424V63.4736V67.7408H26.8434V63.4736ZM19.4756 62.4068H23.7427V30.6787H19.4756H15.2085V62.4068H19.4756ZM19.4756 30.6787H23.7427C23.7427 18.5253 13.8909 8.67265 1.73778 8.67134L1.73732 12.9385L1.73685 17.2056C9.17702 17.2064 15.2085 23.2384 15.2085 30.6787H19.4756ZM1.7334 12.9346V8.66743H-120.093V12.9346V17.2017H1.7334V12.9346ZM-120.097 12.9385L-120.097 8.67134C-132.25 8.67288 -142.101 18.5256 -142.101 30.6787H-137.834H-133.567C-133.567 23.2382 -127.536 17.2066 -120.096 17.2056L-120.097 12.9385ZM-137.834 30.6787H-142.101V62.4068H-137.834H-133.567V30.6787H-137.834ZM-138.901 63.4736V59.2065H-145.202V63.4736V67.7408H-138.901V63.4736ZM-146.269 62.4068H-142.001V30.6787H-146.269H-150.536V62.4068H-146.269ZM-146.269 30.6787H-142.001C-142.001 18.9674 -151.147 9.39521 -162.689 8.7104L-162.942 12.97L-163.195 17.2297C-156.135 17.6486 -150.536 23.5116 -150.536 30.6787H-146.269ZM-164.009 11.8717H-159.742V7.86171H-164.009H-168.276V11.8717H-164.009ZM-162.942 6.79492V11.0621H44.5836V6.79492V2.52778H-162.942V6.79492ZM45.6504 7.86171H41.3833V11.8717H45.6504H49.9175V7.86171H45.6504ZM44.9009 5.86328V1.59614H-163.282V5.86328V10.1304H44.9009V5.86328ZM-163.282 4.36035V8.62749H44.9009V4.36035V0.0932121H-163.282V4.36035ZM44.9009 4.36035V8.62749C42.9592 8.62749 41.3852 7.0535 41.3852 5.11182H45.6523H49.9195C49.9195 2.34009 47.6725 0.0932121 44.9009 0.0932121V4.36035ZM-164.033 5.11182H-159.766C-159.766 7.05347 -161.34 8.62749 -163.282 8.62749V4.36035V0.0932121C-166.053 0.0932121 -168.3 2.34012 -168.3 5.11182H-164.033ZM-163.282 5.86328V1.59614C-161.34 1.59614 -159.766 3.17013 -159.766 5.11182H-164.033H-168.3C-168.3 7.88354 -166.053 10.1304 -163.282 10.1304V5.86328ZM44.9009 5.86328V10.1304C47.6726 10.1304 49.9195 7.88351 49.9195 5.11182H45.6523H41.3852C41.3852 3.17016 42.9592 1.59614 44.9009 1.59614V5.86328ZM44.5836 6.79492V11.0621C42.8161 11.0621 41.3833 9.62924 41.3833 7.86171H45.6504H49.9175C49.9175 4.91584 47.5294 2.52778 44.5836 2.52778V6.79492ZM-137.834 62.4068H-142.101C-142.101 60.6393 -140.668 59.2065 -138.901 59.2065V63.4736V67.7408C-135.955 67.7408 -133.567 65.3527 -133.567 62.4068H-137.834ZM-120.095 12.9365H-124.362C-124.362 10.5487 -122.42 8.67163 -120.097 8.67134L-120.097 12.9385L-120.096 17.2056C-117.771 17.2053 -115.828 15.3265 -115.828 12.9365H-120.095ZM-120.093 12.9346V8.66743C-122.45 8.66743 -124.362 10.5781 -124.362 12.9365H-120.095H-115.828C-115.828 15.2928 -117.738 17.2017 -120.093 17.2017V12.9346ZM1.73535 12.9365H6.00249C6.00249 10.5788 4.09116 8.66743 1.7334 8.66743V12.9346V17.2017C-0.622192 17.2017 -2.53178 15.2921 -2.53178 12.9365H1.73535ZM-164.009 7.86171H-159.742C-159.742 9.62921 -161.174 11.0621 -162.942 11.0621V6.79492V2.52778C-165.888 2.52778 -168.276 4.91586 -168.276 7.86171H-164.009ZM20.5424 63.4736V59.2065C22.3099 59.2065 23.7427 60.6393 23.7427 62.4068H19.4756H15.2085C15.2085 65.3527 17.5965 67.7408 20.5424 67.7408V63.4736ZM-162.942 12.97L-162.689 8.7104C-161.188 8.79944 -159.742 10.04 -159.742 11.8717H-164.009H-168.276C-168.276 14.8817 -165.872 17.0709 -163.195 17.2297L-162.942 12.97ZM27.9102 62.4068H23.643C23.643 60.6393 25.0759 59.2065 26.8434 59.2065V63.4736V67.7408C29.7892 67.7408 32.1773 65.3527 32.1773 62.4068H27.9102ZM1.73732 12.9385L1.73778 8.67134C4.06232 8.67159 6.00249 10.5503 6.00249 12.9365H1.73535H-2.53178C-2.53178 15.3249 -0.589828 17.2054 1.73685 17.2056L1.73732 12.9385ZM-145.202 63.4736V59.2065C-143.434 59.2065 -142.001 60.6393 -142.001 62.4068H-146.269H-150.536C-150.536 65.3527 -148.148 67.7408 -145.202 67.7408V63.4736ZM44.5835 12.97L44.8362 17.2297C47.5132 17.0709 49.9175 14.8817 49.9175 11.8717H45.6504H41.3833C41.3833 10.04 42.83 8.79941 44.3308 8.71038L44.5835 12.97Z" fill="#444047" mask="url(#path-7-outside-1_450_9389)"/>
+<mask id="path-9-outside-2_450_9389" maskUnits="userSpaceOnUse" x="-166.033" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="-166.033" y="2.36035" width="213" height="63"/>
+<path d="M45.6504 12.9385C35.8529 12.9385 27.9102 20.8812 27.9102 30.6787V63.4736H19.4756V30.6787C19.4756 20.8812 11.5329 12.9385 1.73535 12.9385V12.9346H-120.095V12.9385C-129.892 12.9387 -137.834 20.8813 -137.834 30.6787V63.4736H-146.269V30.6787C-146.269 20.8813 -154.211 12.9386 -164.009 12.9385V6.79492H45.6504V12.9385ZM45.6523 5.86328H-164.033V4.36035H45.6523V5.86328Z"/>
+</mask>
+<path d="M45.6504 12.9385V14.0053C46.2396 14.0053 46.7172 13.5276 46.7172 12.9385H45.6504ZM27.9102 63.4736V64.5404C28.4993 64.5404 28.9769 64.0628 28.9769 63.4736H27.9102ZM19.4756 63.4736H18.4088C18.4088 64.0628 18.8864 64.5404 19.4756 64.5404V63.4736ZM1.73535 12.9385H0.668564C0.668564 13.5276 1.14618 14.0053 1.73535 14.0053V12.9385ZM1.73535 12.9346H2.80214C2.80214 12.3454 2.32452 11.8678 1.73535 11.8678V12.9346ZM-120.095 12.9346V11.8678C-120.684 11.8678 -121.162 12.3454 -121.162 12.9346H-120.095ZM-120.095 12.9385L-120.095 14.0053C-119.506 14.0052 -119.028 13.5276 -119.028 12.9385H-120.095ZM-137.834 63.4736V64.5404C-137.245 64.5404 -136.767 64.0628 -136.767 63.4736H-137.834ZM-146.269 63.4736H-147.335C-147.335 64.0628 -146.858 64.5404 -146.269 64.5404V63.4736ZM-164.009 12.9385H-165.076C-165.076 13.5276 -164.598 14.0053 -164.009 14.0053L-164.009 12.9385ZM-164.009 6.79492V5.72814C-164.598 5.72814 -165.076 6.20575 -165.076 6.79492H-164.009ZM45.6504 6.79492H46.7172C46.7172 6.20575 46.2396 5.72814 45.6504 5.72814V6.79492ZM45.6523 5.86328V6.93007C46.2415 6.93007 46.7191 6.45245 46.7191 5.86328H45.6523ZM-164.033 5.86328H-165.1C-165.1 6.45245 -164.622 6.93007 -164.033 6.93007V5.86328ZM-164.033 4.36035V3.29357C-164.622 3.29357 -165.1 3.77118 -165.1 4.36035H-164.033ZM45.6523 4.36035H46.7191C46.7191 3.77118 46.2415 3.29357 45.6523 3.29357V4.36035ZM45.6504 12.9385V11.8717C35.2637 11.8717 26.8434 20.292 26.8434 30.6787H27.9102H28.9769C28.9769 21.4703 36.442 14.0053 45.6504 14.0053V12.9385ZM27.9102 30.6787H26.8434V63.4736H27.9102H28.9769V30.6787H27.9102ZM27.9102 63.4736V62.4068H19.4756V63.4736V64.5404H27.9102V63.4736ZM19.4756 63.4736H20.5424V30.6787H19.4756H18.4088V63.4736H19.4756ZM19.4756 30.6787H20.5424C20.5424 20.292 12.1221 11.8717 1.73535 11.8717V12.9385V14.0053C10.9437 14.0053 18.4088 21.4704 18.4088 30.6787H19.4756ZM1.73535 12.9385H2.80214V12.9346H1.73535H0.668564V12.9385H1.73535ZM1.73535 12.9346V11.8678H-120.095V12.9346V14.0014H1.73535V12.9346ZM-120.095 12.9346H-121.162V12.9385H-120.095H-119.028V12.9346H-120.095ZM-120.095 12.9385L-120.095 11.8717C-130.481 11.8719 -138.901 20.2922 -138.901 30.6787H-137.834H-136.767C-136.767 21.4704 -129.303 14.0054 -120.095 14.0053L-120.095 12.9385ZM-137.834 30.6787H-138.901V63.4736H-137.834H-136.767V30.6787H-137.834ZM-137.834 63.4736V62.4068H-146.269V63.4736V64.5404H-137.834V63.4736ZM-146.269 63.4736H-145.202V30.6787H-146.269H-147.335V63.4736H-146.269ZM-146.269 30.6787H-145.202C-145.202 20.2921 -153.622 11.8718 -164.009 11.8717L-164.009 12.9385L-164.009 14.0053C-154.801 14.0054 -147.335 21.4704 -147.335 30.6787H-146.269ZM-164.009 12.9385H-162.942V6.79492H-164.009H-165.076V12.9385H-164.009ZM-164.009 6.79492V7.86171H45.6504V6.79492V5.72814H-164.009V6.79492ZM45.6504 6.79492H44.5836V12.9385H45.6504H46.7172V6.79492H45.6504ZM45.6523 5.86328V4.7965H-164.033V5.86328V6.93007H45.6523V5.86328ZM-164.033 5.86328H-162.966V4.36035H-164.033H-165.1V5.86328H-164.033ZM-164.033 4.36035V5.42714H45.6523V4.36035V3.29357H-164.033V4.36035ZM45.6523 4.36035H44.5856V5.86328H45.6523H46.7191V4.36035H45.6523Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_9389)"/>
+<g filter="url(#filter3_f_450_9389)" style="mix-blend-mode:plus-lighter">
+<path d="M34.3906 65.6074C40.5769 65.6074 45.5918 70.6223 45.5918 76.8086V94.4102H-164.564V76.8086C-164.564 70.6223 -159.55 65.6074 -153.363 65.6074H34.3906Z" stroke="url(#paint4_linear_450_9389)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_9389)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_9389" maskUnits="userSpaceOnUse" x="-166.033" y="3.33496" width="212" height="61" fill="black">
+<rect fill="white" x="-166.033" y="3.33496" width="212" height="61"/>
+<path d="M43.9932 5.33496V11.4834C34.2722 11.4836 26.3918 19.364 26.3916 29.085V62.9395H18.0225V29.085C18.0223 19.7567 10.766 12.1251 1.58984 11.5234H-121.629C-130.805 12.125 -138.062 19.7566 -138.062 29.085V62.9395H-146.431V29.085C-146.431 19.3639 -154.312 11.4834 -164.033 11.4834V5.33496H43.9932Z"/>
+</mask>
+<path d="M43.9932 5.33496H45.06V4.26818H43.9932V5.33496ZM43.9932 11.4834L43.9932 12.5502L45.06 12.5502V11.4834H43.9932ZM26.3916 29.085L25.3248 29.0849V29.085H26.3916ZM26.3916 62.9395V64.0062H27.4584V62.9395H26.3916ZM18.0225 62.9395H16.9557V64.0062H18.0225V62.9395ZM18.0225 29.085H19.0892V29.0849L18.0225 29.085ZM1.58984 11.5234L1.65964 10.4589L1.62477 10.4567H1.58984V11.5234ZM-121.629 11.5234V10.4567H-121.664L-121.699 10.4589L-121.629 11.5234ZM-138.062 29.085L-139.129 29.0849V29.085H-138.062ZM-138.062 62.9395V64.0062H-136.996V62.9395H-138.062ZM-146.431 62.9395H-147.497V64.0062H-146.431V62.9395ZM-146.431 29.085H-145.364L-145.364 29.0849L-146.431 29.085ZM-164.033 11.4834H-165.1V12.5502H-164.033V11.4834ZM-164.033 5.33496V4.26818H-165.1V5.33496H-164.033ZM43.9932 5.33496H42.9264V11.4834H43.9932H45.06V5.33496H43.9932ZM43.9932 11.4834L43.9931 10.4166C33.6831 10.4168 25.325 18.7749 25.3248 29.0849L26.3916 29.085L27.4584 29.085C27.4586 19.9532 34.8614 12.5504 43.9932 12.5502L43.9932 11.4834ZM26.3916 29.085H25.3248V62.9395H26.3916H27.4584V29.085H26.3916ZM26.3916 62.9395V61.8727H18.0225V62.9395V64.0062H26.3916V62.9395ZM18.0225 62.9395H19.0892V29.085H18.0225H16.9557V62.9395H18.0225ZM18.0225 29.085L19.0892 29.0849C19.0891 19.1908 11.3928 11.0971 1.65964 10.4589L1.58984 11.5234L1.52005 12.5879C10.1391 13.153 16.9555 20.3226 16.9557 29.085L18.0225 29.085ZM1.58984 11.5234V10.4567H-121.629V11.5234V12.5902H1.58984V11.5234ZM-121.629 11.5234L-121.699 10.4589C-131.432 11.097 -139.129 19.1907 -139.129 29.0849L-138.062 29.085L-136.996 29.085C-136.996 20.3226 -130.178 13.153 -121.559 12.5879L-121.629 11.5234ZM-138.062 29.085H-139.129V62.9395H-138.062H-136.996V29.085H-138.062ZM-138.062 62.9395V61.8727H-146.431V62.9395V64.0062H-138.062V62.9395ZM-146.431 62.9395H-145.364V29.085H-146.431H-147.497V62.9395H-146.431ZM-146.431 29.085L-145.364 29.0849C-145.364 18.7747 -153.723 10.4166 -164.033 10.4166V11.4834V12.5502C-154.901 12.5502 -147.498 19.9531 -147.497 29.085L-146.431 29.085ZM-164.033 11.4834H-162.966V5.33496H-164.033H-165.1V11.4834H-164.033ZM-164.033 5.33496V6.40175H43.9932V5.33496V4.26818H-164.033V5.33496Z" fill="url(#paint5_linear_450_9389)" mask="url(#path-12-outside-3_450_9389)"/>
+</g>
+<g filter="url(#filter5_f_450_9389)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_9389" maskUnits="userSpaceOnUse" x="-164.963" y="3.33496" width="211" height="61" fill="black">
+<rect fill="white" x="-164.963" y="3.33496" width="211" height="61"/>
+<path d="M42.9283 5.33496C43.5175 5.33496 43.9951 5.81258 43.9951 6.40175V10.4166C43.9951 11.0058 43.5163 11.48 42.9282 11.5154C33.7536 12.0668 26.4834 19.682 26.4834 28.9951V61.8727C26.4834 62.4618 26.0058 62.9395 25.4166 62.9395H19.224C18.6348 62.9395 18.1572 62.4618 18.1572 61.8727V28.9951C18.1572 19.7197 10.9462 12.1295 1.82422 11.5234H-120.792C-129.914 12.1295 -137.125 19.7197 -137.125 28.9951V61.8727C-137.125 62.4618 -137.603 62.9395 -138.192 62.9395H-144.384C-144.974 62.9395 -145.451 62.4618 -145.451 61.8727V28.9951C-145.451 19.682 -152.721 12.0668 -161.896 11.5154C-162.484 11.48 -162.963 11.0058 -162.963 10.4166V6.40175C-162.963 5.81258 -162.485 5.33496 -161.896 5.33496H42.9283Z"/>
+</mask>
+<path d="M1.82422 11.5234L1.89493 10.459L1.85962 10.4567H1.82422V11.5234ZM-120.792 11.5234V10.4567H-120.827L-120.863 10.459L-120.792 11.5234ZM42.9282 11.5154L42.8642 10.4505V10.4505L42.9282 11.5154ZM43.9951 6.40175H42.9283V10.4166H43.9951H45.0619V6.40175H43.9951ZM42.9282 11.5154L42.8642 10.4505C33.1298 11.0356 25.4166 19.1143 25.4166 28.9951H26.4834H27.5502C27.5502 20.2498 34.3775 13.098 42.9922 12.5802L42.9282 11.5154ZM26.4834 28.9951H25.4166V61.8727H26.4834H27.5502V28.9951H26.4834ZM25.4166 62.9395V61.8727H19.224V62.9395V64.0062H25.4166V62.9395ZM18.1572 61.8727H19.224V28.9951H18.1572H17.0904V61.8727H18.1572ZM18.1572 28.9951H19.224C19.224 19.1542 11.5735 11.102 1.89493 10.459L1.82422 11.5234L1.75351 12.5879C10.3187 13.1569 17.0904 20.2852 17.0904 28.9951H18.1572ZM1.82422 11.5234V10.4567H-120.792V11.5234V12.5902H1.82422V11.5234ZM-120.792 11.5234L-120.863 10.459C-130.541 11.102 -138.192 19.1542 -138.192 28.9951H-137.125H-136.058C-136.058 20.2852 -129.287 13.1569 -120.721 12.5879L-120.792 11.5234ZM-137.125 28.9951H-138.192V61.8727H-137.125H-136.058V28.9951H-137.125ZM-138.192 62.9395V61.8727H-144.384V62.9395V64.0062H-138.192V62.9395ZM-145.451 61.8727H-144.384V28.9951H-145.451H-146.518V61.8727H-145.451ZM-145.451 28.9951H-144.384C-144.384 19.1143 -152.098 11.0356 -161.832 10.4505L-161.896 11.5154L-161.96 12.5802C-153.345 13.098 -146.518 20.2498 -146.518 28.9951H-145.451ZM-162.963 10.4166H-161.896V6.40175H-162.963H-164.03V10.4166H-162.963ZM-161.896 5.33496V6.40175H42.9283V5.33496V4.26818H-161.896V5.33496ZM-162.963 6.40175H-161.896V6.40175V5.33496V4.26818C-163.074 4.26818 -164.03 5.22341 -164.03 6.40175H-162.963ZM-144.384 62.9395V61.8727H-144.384H-145.451H-146.518C-146.518 63.051 -145.563 64.0062 -144.384 64.0062V62.9395ZM-137.125 61.8727H-138.192H-138.192V62.9395V64.0062C-137.013 64.0062 -136.058 63.051 -136.058 61.8727H-137.125ZM19.224 62.9395V61.8727V61.8727H18.1572H17.0904C17.0904 63.051 18.0457 64.0062 19.224 64.0062V62.9395ZM26.4834 61.8727H25.4166V61.8727V62.9395V64.0062C26.595 64.0062 27.5502 63.051 27.5502 61.8727H26.4834ZM-161.896 11.5154L-161.832 10.4505C-161.857 10.449 -161.877 10.4383 -161.889 10.426C-161.895 10.4204 -161.896 10.4166 -161.896 10.4163C-161.896 10.4162 -161.896 10.4165 -161.896 10.4171C-161.896 10.4178 -161.896 10.4178 -161.896 10.4166H-162.963H-164.03C-164.03 11.6112 -163.069 12.5136 -161.96 12.5802L-161.896 11.5154ZM43.9951 10.4166H42.9283C42.9283 10.4178 42.9282 10.4178 42.9284 10.4171C42.9285 10.4165 42.9286 10.4162 42.9286 10.4163C42.9285 10.4166 42.9268 10.4204 42.9213 10.426C42.9092 10.4383 42.8891 10.449 42.8642 10.4505L42.9282 11.5154L42.9922 12.5802C44.1016 12.5136 45.0619 11.6112 45.0619 10.4166H43.9951ZM43.9951 6.40175H45.0619C45.0619 5.2234 44.1067 4.26818 42.9283 4.26818V5.33496V6.40175V6.40175H43.9951Z" fill="url(#paint6_linear_450_9389)" mask="url(#path-14-outside-4_450_9389)"/>
+</g>
+<g filter="url(#filter6_f_450_9389)">
+<path d="M-166.164 13.8684V4.26736C-166.164 3.08902 -165.209 2.13379 -164.03 2.13379H46.1261C47.3045 2.13379 48.2597 3.08902 48.2597 4.26736V13.8684" stroke="url(#paint7_linear_450_9389)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_9389)">
+<path d="M19.9897 63.4733V29.3361C19.9897 22.9354 14.1224 12.2676 0.787575 12.2676C-10.7337 12.2676 -33.7051 12.2676 -44.5508 12.2676" stroke="url(#paint8_linear_450_9389)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter8_f_450_9389)">
+<path d="M-135.229 62.9403V26.9541C-134.873 22.5921 -131.495 15.4683 -121.36 13.8682H-0.280231C9.32083 14.4016 16.2549 18.2301 16.2549 31.316V62.9403" stroke="url(#paint9_linear_450_9389)" stroke-width="1.06678"/>
+</g>
+<path d="M-150.107 63.6704L30.7968 63.6704" stroke="#1F1600" stroke-width="1.06678"/>
+<g filter="url(#filter9_f_450_9389)">
+<path d="M20.5234 45.8716V62.4067H27.4575V45.8716" stroke="url(#paint10_linear_450_9389)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_9389" x="-133.938" y="17.1807" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9389"/>
+</filter>
+<filter id="filter1_ii_450_9389" x="-162.729" y="66.254" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9389"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231222 0 0 0 0 0.219004 0 0 0 0 0.240385 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_9389" result="effect2_innerShadow_450_9389"/>
+</filter>
+<filter id="filter2_f_450_9389" x="-161.897" y="68.274" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<filter id="filter3_f_450_9389" x="-166.164" y="64.0069" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<filter id="filter4_f_450_9389" x="-166.166" y="3.20128" width="212.294" height="61.8719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<filter id="filter5_f_450_9389" x="-165.096" y="3.20128" width="211.225" height="61.8719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<filter id="filter6_f_450_9389" x="-167.764" y="0.533801" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<filter id="filter7_f_450_9389" x="-45.6176" y="10.6676" width="67.2078" height="53.8723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<filter id="filter8_f_450_9389" x="-136.829" y="12.2682" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<filter id="filter9_f_450_9389" x="18.9234" y="44.8048" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9389"/>
+</filter>
+<linearGradient id="paint0_linear_450_9389" x1="-59.1503" y1="17.1807" x2="-59.1503" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#454148"/>
+<stop offset="0.05" stop-color="#454148"/>
+<stop offset="1" stop-color="#3D3A40"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9389" x1="-136.608" y1="34.5812" x2="15.637" y2="34.5812" gradientUnits="userSpaceOnUse">
+<stop stop-color="#615F63"/>
+<stop offset="0.077962" stop-color="#454148" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#454148" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#615F63"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9389" x1="-58.9525" y1="70.4077" x2="-58.9525" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#615F63"/>
+<stop offset="1" stop-color="#615F63" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9389" x1="-164.033" y1="33.917" x2="45.6523" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3AFB5"/>
+<stop offset="0.144231" stop-color="#A49EA8"/>
+<stop offset="0.889423" stop-color="#A49EA8"/>
+<stop offset="0.961538" stop-color="#9B959B"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9389" x1="-59.4863" y1="66.1406" x2="-59.4863" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7BEC7"/>
+<stop offset="1" stop-color="#C7BEC7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9389" x1="-60.02" y1="5.33496" x2="-60.02" y2="14.4015" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BBA9C7"/>
+<stop offset="1" stop-color="#BBA9C7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9389" x1="-149.696" y1="12.2679" x2="-93.902" y2="33.943" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7BEC7" stop-opacity="0.905882"/>
+<stop offset="1" stop-color="#C7BEC7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9389" x1="-58.9522" y1="2.13379" x2="-58.9522" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF0FF"/>
+<stop offset="1" stop-color="#FFF0FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_9389" x1="13.0556" y1="16.0013" x2="0.90335" y2="14.0155" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF0FF"/>
+<stop offset="1" stop-color="#FFF0FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_9389" x1="-59.4868" y1="13.8682" x2="-59.4868" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#938F96"/>
+<stop offset="1" stop-color="#938F96" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_9389" x1="22.657" y1="61.8734" x2="22.1236" y2="36.2705" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BBB3BF"/>
+<stop offset="1" stop-color="#BBB3BF" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9389">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_9389">
+<rect width="218.298" height="95" fill="white" transform="translate(-168.299)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/왼쪽.svg
new file mode 100644
index 0000000..3f7a617
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/왼쪽.svg	
@@ -0,0 +1,166 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="50" height="95" viewBox="0 0 50 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9314)">
+<g filter="url(#filter0_i_450_9314)">
+<path d="M34.3613 29.9821C34.3613 22.9121 40.0927 17.1807 47.1627 17.1807H171.134C178.204 17.1807 183.936 22.9121 183.936 29.9821V65.6913H34.3613V29.9821Z" fill="url(#paint0_linear_450_9314)"/>
+<path d="M34.3613 29.9821C34.3613 22.9121 40.0927 17.1807 47.1627 17.1807H171.134C178.204 17.1807 183.936 22.9121 183.936 29.9821V65.6913H34.3613V29.9821Z" fill="url(#paint1_linear_450_9314)"/>
+</g>
+<path d="M47.1631 17.7139H171.135C177.91 17.7141 183.402 23.2071 183.402 29.9824V65.1582H34.8945V29.9824C34.8945 23.207 40.3876 17.7139 47.1631 17.7139Z" stroke="#1A1302" stroke-width="1.06678"/>
+<path d="M203.049 66.2539C208.94 66.2539 213.717 71.0302 213.717 76.9219V93.9707H4.50293V76.9219C4.50298 71.0303 9.27929 66.254 15.1709 66.2539H203.049Z" fill="#76707A" stroke="#444047" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_9314)">
+<path d="M6.63672 76.922C6.63672 72.2086 10.4576 68.3877 15.171 68.3877H203.049C207.762 68.3877 211.583 72.2086 211.583 76.922V90.7699C211.583 91.359 211.106 91.8366 210.516 91.8366H7.70351C7.11434 91.8366 6.63672 91.359 6.63672 90.7699V76.922Z" fill="#76707A"/>
+</g>
+<path d="M203.049 67.8545C208.057 67.8545 212.116 71.914 212.116 76.9219V90.7695C212.116 91.6532 211.4 92.37 210.517 92.3701H7.70312C6.81955 92.3699 6.10352 91.6532 6.10352 90.7695V76.9219C6.10357 71.914 10.163 67.8545 15.1709 67.8545H203.049Z" stroke="#444047" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_9314)" style="mix-blend-mode:plus-lighter">
+<path d="M203.757 69.8745C207.586 69.8745 210.69 72.9787 210.69 76.8081V92.2769H8.00195V76.8081C8.00213 72.9788 11.1062 69.8747 14.9355 69.8745H203.757Z" stroke="url(#paint2_linear_450_9314)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_9314" maskUnits="userSpaceOnUse" x="-0.734375" y="-0.639648" width="219" height="69" fill="black">
+<rect fill="white" x="-0.734375" y="-0.639648" width="219" height="69"/>
+<path d="M213.949 11.8717C213.949 12.4609 213.47 12.9351 212.882 12.97C203.581 13.5218 196.209 21.2394 196.209 30.6787V62.4068C196.209 62.996 195.731 63.4736 195.142 63.4736H188.841C188.252 63.4736 187.774 62.996 187.774 62.4068V30.6787C187.774 20.8818 179.833 12.9395 170.036 12.9385C170.035 12.9385 170.034 12.9376 170.034 12.9365C170.034 12.9354 170.033 12.9346 170.032 12.9346H48.2061C48.205 12.9346 48.2041 12.9354 48.2041 12.9365C48.2041 12.9376 48.2032 12.9385 48.2021 12.9385C38.4057 12.9397 30.4648 20.8819 30.4648 30.6787V62.4068C30.4648 62.996 29.9872 63.4736 29.3981 63.4736H23.0971C22.5079 63.4736 22.0303 62.996 22.0303 62.4068V30.6787C22.0303 21.2395 14.6577 13.5219 5.35695 12.97C4.76882 12.9352 4.29004 12.4609 4.29004 11.8717V7.86171C4.29004 7.27254 4.76765 6.79492 5.35682 6.79492H212.882C213.472 6.79492 213.949 7.27254 213.949 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z"/>
+</mask>
+<path d="M213.949 11.8717C213.949 12.4609 213.47 12.9351 212.882 12.97C203.581 13.5218 196.209 21.2394 196.209 30.6787V62.4068C196.209 62.996 195.731 63.4736 195.142 63.4736H188.841C188.252 63.4736 187.774 62.996 187.774 62.4068V30.6787C187.774 20.8818 179.833 12.9395 170.036 12.9385C170.035 12.9385 170.034 12.9376 170.034 12.9365C170.034 12.9354 170.033 12.9346 170.032 12.9346H48.2061C48.205 12.9346 48.2041 12.9354 48.2041 12.9365C48.2041 12.9376 48.2032 12.9385 48.2021 12.9385C38.4057 12.9397 30.4648 20.8819 30.4648 30.6787V62.4068C30.4648 62.996 29.9872 63.4736 29.3981 63.4736H23.0971C22.5079 63.4736 22.0303 62.996 22.0303 62.4068V30.6787C22.0303 21.2395 14.6577 13.5219 5.35695 12.97C4.76882 12.9352 4.29004 12.4609 4.29004 11.8717V7.86171C4.29004 7.27254 4.76765 6.79492 5.35682 6.79492H212.882C213.472 6.79492 213.949 7.27254 213.949 7.86171V11.8717ZM213.951 5.11182C213.951 5.52684 213.615 5.86328 213.2 5.86328H5.01709C4.60207 5.86328 4.26562 5.52684 4.26562 5.11182C4.26562 4.69679 4.60207 4.36035 5.01709 4.36035H213.2C213.615 4.36035 213.951 4.69679 213.951 5.11182Z" fill="url(#paint3_linear_450_9314)"/>
+<path d="M48.2021 12.9385L48.2027 17.2056L48.2021 12.9385ZM5.35695 12.97L5.10421 17.2297L5.35695 12.97ZM170.036 12.9385L170.037 8.67134L170.036 12.9385ZM212.882 12.97L212.63 8.71038L212.882 12.97ZM212.882 12.97L212.63 8.71038C201.088 9.39505 191.942 18.9674 191.942 30.6787H196.209H200.476C200.476 23.5114 206.075 17.6485 213.135 17.2297L212.882 12.97ZM196.209 30.6787H191.942V62.4068H196.209H200.476V30.6787H196.209ZM195.142 63.4736V59.2065H188.841V63.4736V67.7408H195.142V63.4736ZM187.774 62.4068H192.042V30.6787H187.774H183.507V62.4068H187.774ZM187.774 30.6787H192.042C192.042 18.5253 182.19 8.67265 170.037 8.67134L170.036 12.9385L170.036 17.2056C177.476 17.2064 183.507 23.2384 183.507 30.6787H187.774ZM170.032 12.9346V8.66743H48.2061V12.9346V17.2017H170.032V12.9346ZM48.2021 12.9385L48.2016 8.67134C36.0485 8.67288 26.1977 18.5256 26.1977 30.6787H30.4648H34.732C34.732 23.2382 40.7628 17.2066 48.2027 17.2056L48.2021 12.9385ZM30.4648 30.6787H26.1977V62.4068H30.4648H34.732V30.6787H30.4648ZM29.3981 63.4736V59.2065H23.0971V63.4736V67.7408H29.3981V63.4736ZM22.0303 62.4068H26.2974V30.6787H22.0303H17.7631V62.4068H22.0303ZM22.0303 30.6787H26.2974C26.2974 18.9674 17.1514 9.39521 5.60969 8.7104L5.35695 12.97L5.10421 17.2297C12.1639 17.6486 17.7631 23.5116 17.7631 30.6787H22.0303ZM4.29004 11.8717H8.55718V7.86171H4.29004H0.0228996V11.8717H4.29004ZM5.35682 6.79492V11.0621H212.882V6.79492V2.52778H5.35682V6.79492ZM213.949 7.86171H209.682V11.8717H213.949H218.216V7.86171H213.949ZM213.2 5.86328V1.59614H5.01709V5.86328V10.1304H213.2V5.86328ZM5.01709 4.36035V8.62749H213.2V4.36035V0.0932121H5.01709V4.36035ZM213.2 4.36035V8.62749C211.258 8.62749 209.684 7.0535 209.684 5.11182H213.951H218.218C218.218 2.34009 215.971 0.0932121 213.2 0.0932121V4.36035ZM4.26562 5.11182H8.53276C8.53276 7.05347 6.95874 8.62749 5.01709 8.62749V4.36035V0.0932121C2.24539 0.0932121 -0.00151443 2.34012 -0.00151443 5.11182H4.26562ZM5.01709 5.86328V1.59614C6.95872 1.59614 8.53276 3.17013 8.53276 5.11182H4.26562H-0.00151443C-0.00151443 7.88354 2.24542 10.1304 5.01709 10.1304V5.86328ZM213.2 5.86328V10.1304C215.971 10.1304 218.218 7.88351 218.218 5.11182H213.951H209.684C209.684 3.17016 211.258 1.59614 213.2 1.59614V5.86328ZM212.882 6.79492V11.0621C211.115 11.0621 209.682 9.62924 209.682 7.86171H213.949H218.216C218.216 4.91584 215.828 2.52778 212.882 2.52778V6.79492ZM30.4648 62.4068H26.1977C26.1977 60.6393 27.6306 59.2065 29.3981 59.2065V63.4736V67.7408C32.3439 67.7408 34.732 65.3527 34.732 62.4068H30.4648ZM48.2041 12.9365H43.937C43.937 10.5487 45.8788 8.67163 48.2016 8.67134L48.2021 12.9385L48.2027 17.2056C50.5276 17.2053 52.4712 15.3265 52.4712 12.9365H48.2041ZM48.2061 12.9346V8.66743C45.849 8.66743 43.937 10.5781 43.937 12.9365H48.2041H52.4712C52.4712 15.2928 50.561 17.2017 48.2061 17.2017V12.9346ZM170.034 12.9365H174.301C174.301 10.5788 172.39 8.66743 170.032 8.66743V12.9346V17.2017C167.677 17.2017 165.767 15.2921 165.767 12.9365H170.034ZM4.29004 7.86171H8.55718C8.55718 9.62921 7.12433 11.0621 5.35682 11.0621V6.79492V2.52778C2.41098 2.52778 0.0228996 4.91586 0.0228996 7.86171H4.29004ZM188.841 63.4736V59.2065C190.609 59.2065 192.042 60.6393 192.042 62.4068H187.774H183.507C183.507 65.3527 185.895 67.7408 188.841 67.7408V63.4736ZM5.35695 12.97L5.60969 8.7104C7.11043 8.79944 8.55718 10.04 8.55718 11.8717H4.29004H0.0228996C0.0228996 14.8817 2.42722 17.0709 5.10421 17.2297L5.35695 12.97ZM196.209 62.4068H191.942C191.942 60.6393 193.375 59.2065 195.142 59.2065V63.4736V67.7408C198.088 67.7408 200.476 65.3527 200.476 62.4068H196.209ZM170.036 12.9385L170.037 8.67134C172.361 8.67159 174.301 10.5503 174.301 12.9365H170.034H165.767C165.767 15.3249 167.709 17.2054 170.036 17.2056L170.036 12.9385ZM23.0971 63.4736V59.2065C24.8646 59.2065 26.2974 60.6393 26.2974 62.4068H22.0303H17.7631C17.7631 65.3527 20.1512 67.7408 23.0971 67.7408V63.4736ZM212.882 12.97L213.135 17.2297C215.812 17.0709 218.216 14.8817 218.216 11.8717H213.949H209.682C209.682 10.04 211.129 8.79941 212.63 8.71038L212.882 12.97Z" fill="#444047" mask="url(#path-7-outside-1_450_9314)"/>
+<mask id="path-9-outside-2_450_9314" maskUnits="userSpaceOnUse" x="2.26562" y="2.36035" width="213" height="63" fill="black">
+<rect fill="white" x="2.26562" y="2.36035" width="213" height="63"/>
+<path d="M213.949 12.9385C204.152 12.9385 196.209 20.8812 196.209 30.6787V63.4736H187.774V30.6787C187.774 20.8812 179.832 12.9385 170.034 12.9385V12.9346H48.2041V12.9385C38.4067 12.9387 30.4648 20.8813 30.4648 30.6787V63.4736H22.0303V30.6787C22.0303 20.8813 14.0875 12.9386 4.29004 12.9385V6.79492H213.949V12.9385ZM213.951 5.86328H4.26562V4.36035H213.951V5.86328Z"/>
+</mask>
+<path d="M213.949 12.9385V14.0053C214.538 14.0053 215.016 13.5276 215.016 12.9385H213.949ZM196.209 63.4736V64.5404C196.798 64.5404 197.276 64.0628 197.276 63.4736H196.209ZM187.774 63.4736H186.708C186.708 64.0628 187.185 64.5404 187.774 64.5404V63.4736ZM170.034 12.9385H168.967C168.967 13.5276 169.445 14.0053 170.034 14.0053V12.9385ZM170.034 12.9346H171.101C171.101 12.3454 170.623 11.8678 170.034 11.8678V12.9346ZM48.2041 12.9346V11.8678C47.6149 11.8678 47.1373 12.3454 47.1373 12.9346H48.2041ZM48.2041 12.9385L48.2041 14.0053C48.7933 14.0052 49.2709 13.5276 49.2709 12.9385H48.2041ZM30.4648 63.4736V64.5404C31.054 64.5404 31.5316 64.0628 31.5316 63.4736H30.4648ZM22.0303 63.4736H20.9635C20.9635 64.0628 21.4411 64.5404 22.0303 64.5404V63.4736ZM4.29004 12.9385H3.22325C3.22325 13.5276 3.70086 14.0053 4.29002 14.0053L4.29004 12.9385ZM4.29004 6.79492V5.72814C3.70087 5.72814 3.22325 6.20575 3.22325 6.79492H4.29004ZM213.949 6.79492H215.016C215.016 6.20575 214.538 5.72814 213.949 5.72814V6.79492ZM213.951 5.86328V6.93007C214.54 6.93007 215.018 6.45245 215.018 5.86328H213.951ZM4.26562 5.86328H3.19884C3.19884 6.45245 3.67646 6.93007 4.26562 6.93007V5.86328ZM4.26562 4.36035V3.29357C3.67646 3.29357 3.19884 3.77118 3.19884 4.36035H4.26562ZM213.951 4.36035H215.018C215.018 3.77118 214.54 3.29357 213.951 3.29357V4.36035ZM213.949 12.9385V11.8717C203.563 11.8717 195.142 20.292 195.142 30.6787H196.209H197.276C197.276 21.4703 204.741 14.0053 213.949 14.0053V12.9385ZM196.209 30.6787H195.142V63.4736H196.209H197.276V30.6787H196.209ZM196.209 63.4736V62.4068H187.774V63.4736V64.5404H196.209V63.4736ZM187.774 63.4736H188.841V30.6787H187.774H186.708V63.4736H187.774ZM187.774 30.6787H188.841C188.841 20.292 180.421 11.8717 170.034 11.8717V12.9385V14.0053C179.243 14.0053 186.708 21.4704 186.708 30.6787H187.774ZM170.034 12.9385H171.101V12.9346H170.034H168.967V12.9385H170.034ZM170.034 12.9346V11.8678H48.2041V12.9346V14.0014H170.034V12.9346ZM48.2041 12.9346H47.1373V12.9385H48.2041H49.2709V12.9346H48.2041ZM48.2041 12.9385L48.2041 11.8717C37.8175 11.8719 29.3981 20.2922 29.3981 30.6787H30.4648H31.5316C31.5316 21.4704 38.9959 14.0054 48.2041 14.0053L48.2041 12.9385ZM30.4648 30.6787H29.3981V63.4736H30.4648H31.5316V30.6787H30.4648ZM30.4648 63.4736V62.4068H22.0303V63.4736V64.5404H30.4648V63.4736ZM22.0303 63.4736H23.0971V30.6787H22.0303H20.9635V63.4736H22.0303ZM22.0303 30.6787H23.0971C23.0971 20.2921 14.6766 11.8718 4.29005 11.8717L4.29004 12.9385L4.29002 14.0053C13.4983 14.0054 20.9635 21.4704 20.9635 30.6787H22.0303ZM4.29004 12.9385H5.35682V6.79492H4.29004H3.22325V12.9385H4.29004ZM4.29004 6.79492V7.86171H213.949V6.79492V5.72814H4.29004V6.79492ZM213.949 6.79492H212.882V12.9385H213.949H215.016V6.79492H213.949ZM213.951 5.86328V4.7965H4.26562V5.86328V6.93007H213.951V5.86328ZM4.26562 5.86328H5.33241V4.36035H4.26562H3.19884V5.86328H4.26562ZM4.26562 4.36035V5.42714H213.951V4.36035V3.29357H4.26562V4.36035ZM213.951 4.36035H212.884V5.86328H213.951H215.018V4.36035H213.951Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_9314)"/>
+<g filter="url(#filter3_f_450_9314)" style="mix-blend-mode:plus-lighter">
+<path d="M202.689 65.6074C208.876 65.6074 213.891 70.6223 213.891 76.8086V94.4102H3.73438V76.8086C3.73438 70.6223 8.74927 65.6074 14.9355 65.6074H202.689Z" stroke="url(#paint4_linear_450_9314)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_9314)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_9314" maskUnits="userSpaceOnUse" x="2.26562" y="3.33398" width="212" height="61" fill="black">
+<rect fill="white" x="2.26562" y="3.33398" width="212" height="61"/>
+<path d="M212.292 5.33398V11.4834C202.571 11.4836 194.691 19.364 194.69 29.085V62.9395H186.321V29.085C186.321 19.7567 179.065 12.1251 169.889 11.5234H46.6699C37.4937 12.125 30.2365 19.7566 30.2363 29.085V62.9395H21.8682V29.085C21.868 19.3639 13.9867 11.4834 4.26562 11.4834V5.33398H212.292Z"/>
+</mask>
+<path d="M212.292 5.33398H213.359V4.2672H212.292V5.33398ZM212.292 11.4834L212.292 12.5502L213.359 12.5502V11.4834H212.292ZM194.69 29.085L193.624 29.0849V29.085H194.69ZM194.69 62.9395V64.0062H195.757V62.9395H194.69ZM186.321 62.9395H185.255V64.0062H186.321V62.9395ZM186.321 29.085H187.388V29.0849L186.321 29.085ZM169.889 11.5234L169.958 10.4589L169.924 10.4567H169.889V11.5234ZM46.6699 11.5234V10.4567H46.635L46.6001 10.4589L46.6699 11.5234ZM30.2363 29.085L29.1695 29.0849V29.085H30.2363ZM30.2363 62.9395V64.0062H31.3031V62.9395H30.2363ZM21.8682 62.9395H20.8014V64.0062H21.8682V62.9395ZM21.8682 29.085H22.9349L22.9349 29.0849L21.8682 29.085ZM4.26562 11.4834H3.19884V12.5502H4.26562V11.4834ZM4.26562 5.33398V4.2672H3.19884V5.33398H4.26562ZM212.292 5.33398H211.225V11.4834H212.292H213.359V5.33398H212.292ZM212.292 11.4834L212.292 10.4166C201.982 10.4168 193.624 18.7749 193.624 29.0849L194.69 29.085L195.757 29.085C195.757 19.9532 203.16 12.5504 212.292 12.5502L212.292 11.4834ZM194.69 29.085H193.624V62.9395H194.69H195.757V29.085H194.69ZM194.69 62.9395V61.8727H186.321V62.9395V64.0062H194.69V62.9395ZM186.321 62.9395H187.388V29.085H186.321H185.255V62.9395H186.321ZM186.321 29.085L187.388 29.0849C187.388 19.1908 179.692 11.0971 169.958 10.4589L169.889 11.5234L169.819 12.5879C178.438 13.153 185.254 20.3226 185.255 29.085L186.321 29.085ZM169.889 11.5234V10.4567H46.6699V11.5234V12.5902H169.889V11.5234ZM46.6699 11.5234L46.6001 10.4589C36.867 11.097 29.1697 19.1907 29.1695 29.0849L30.2363 29.085L31.3031 29.085C31.3033 20.3226 38.1205 13.153 46.7397 12.5879L46.6699 11.5234ZM30.2363 29.085H29.1695V62.9395H30.2363H31.3031V29.085H30.2363ZM30.2363 62.9395V61.8727H21.8682V62.9395V64.0062H30.2363V62.9395ZM21.8682 62.9395H22.9349V29.085H21.8682H20.8014V62.9395H21.8682ZM21.8682 29.085L22.9349 29.0849C22.9348 18.7747 14.5758 10.4166 4.26562 10.4166V11.4834V12.5502C13.3976 12.5502 20.8012 19.9531 20.8014 29.085L21.8682 29.085ZM4.26562 11.4834H5.33241V5.33398H4.26562H3.19884V11.4834H4.26562ZM4.26562 5.33398V6.40077H212.292V5.33398V4.2672H4.26562V5.33398Z" fill="url(#paint5_linear_450_9314)" mask="url(#path-12-outside-3_450_9314)"/>
+</g>
+<g filter="url(#filter5_f_450_9314)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_9314" maskUnits="userSpaceOnUse" x="3.33594" y="3.33398" width="211" height="61" fill="black">
+<rect fill="white" x="3.33594" y="3.33398" width="211" height="61"/>
+<path d="M211.227 5.33398C211.816 5.33398 212.294 5.8116 212.294 6.40077V10.4166C212.294 11.0058 211.815 11.48 211.227 11.5154C202.052 12.0668 194.782 19.682 194.782 28.9951V61.8727C194.782 62.4618 194.305 62.9395 193.715 62.9395H187.523C186.934 62.9395 186.456 62.4618 186.456 61.8727V28.9951C186.456 19.7197 179.245 12.1295 170.123 11.5234H47.5068C38.3849 12.1295 31.1738 19.7197 31.1738 28.9951V61.8727C31.1738 62.4618 30.6962 62.9395 30.107 62.9395H23.9144C23.3253 62.9395 22.8477 62.4618 22.8477 61.8727V28.9951C22.8477 19.682 15.5774 12.0668 6.40289 11.5154C5.81478 11.48 5.33594 11.0058 5.33594 10.4166V6.40077C5.33594 5.8116 5.81355 5.33398 6.40272 5.33398H211.227Z"/>
+</mask>
+<path d="M170.123 11.5234L170.194 10.459L170.158 10.4567H170.123V11.5234ZM47.5068 11.5234V10.4567H47.4714L47.4361 10.459L47.5068 11.5234ZM211.227 11.5154L211.163 10.4505V10.4505L211.227 11.5154ZM212.294 6.40077H211.227V10.4166H212.294H213.361V6.40077H212.294ZM211.227 11.5154L211.163 10.4505C201.429 11.0356 193.715 19.1143 193.715 28.9951H194.782H195.849C195.849 20.2498 202.676 13.098 211.291 12.5802L211.227 11.5154ZM194.782 28.9951H193.715V61.8727H194.782H195.849V28.9951H194.782ZM193.715 62.9395V61.8727H187.523V62.9395V64.0062H193.715V62.9395ZM186.456 61.8727H187.523V28.9951H186.456H185.389V61.8727H186.456ZM186.456 28.9951H187.523C187.523 19.1542 179.872 11.102 170.194 10.459L170.123 11.5234L170.052 12.5879C178.618 13.1569 185.389 20.2852 185.389 28.9951H186.456ZM170.123 11.5234V10.4567H47.5068V11.5234V12.5902H170.123V11.5234ZM47.5068 11.5234L47.4361 10.459C37.7575 11.102 30.107 19.1542 30.107 28.9951H31.1738H32.2406C32.2406 20.2852 39.0123 13.1569 47.5776 12.5879L47.5068 11.5234ZM31.1738 28.9951H30.107V61.8727H31.1738H32.2406V28.9951H31.1738ZM30.107 62.9395V61.8727H23.9144V62.9395V64.0062H30.107V62.9395ZM22.8477 61.8727H23.9144V28.9951H22.8477H21.7809V61.8727H22.8477ZM22.8477 28.9951H23.9144C23.9144 19.1143 16.2013 11.0356 6.46689 10.4505L6.40289 11.5154L6.33888 12.5802C14.9535 13.098 21.7809 20.2498 21.7809 28.9951H22.8477ZM5.33594 10.4166H6.40272V6.40077H5.33594H4.26915V10.4166H5.33594ZM6.40272 5.33398V6.40077H211.227V5.33398V4.2672H6.40272V5.33398ZM5.33594 6.40077H6.40272V6.40077V5.33398V4.2672C5.22438 4.2672 4.26915 5.22243 4.26915 6.40077H5.33594ZM23.9144 62.9395V61.8727H23.9144H22.8477H21.7809C21.7809 63.051 22.7361 64.0062 23.9144 64.0062V62.9395ZM31.1738 61.8727H30.107H30.107V62.9395V64.0062C31.2854 64.0062 32.2406 63.051 32.2406 61.8727H31.1738ZM187.523 62.9395V61.8727V61.8727H186.456H185.389C185.389 63.051 186.344 64.0062 187.523 64.0062V62.9395ZM194.782 61.8727H193.715V61.8727V62.9395V64.0062C194.894 64.0062 195.849 63.051 195.849 61.8727H194.782ZM6.40289 11.5154L6.46689 10.4505C6.44196 10.449 6.4219 10.4383 6.40975 10.426C6.40426 10.4204 6.40258 10.4166 6.40246 10.4163C6.40241 10.4162 6.40256 10.4165 6.40268 10.4171C6.40282 10.4178 6.40272 10.4178 6.40272 10.4166H5.33594H4.26915C4.26915 11.6112 5.22947 12.5136 6.33888 12.5802L6.40289 11.5154ZM212.294 10.4166H211.227C211.227 10.4178 211.227 10.4178 211.227 10.4171C211.227 10.4165 211.227 10.4162 211.227 10.4163C211.227 10.4166 211.226 10.4204 211.22 10.426C211.208 10.4383 211.188 10.449 211.163 10.4505L211.227 11.5154L211.291 12.5802C212.4 12.5136 213.361 11.6112 213.361 10.4166H212.294ZM212.294 6.40077H213.361C213.361 5.22243 212.405 4.2672 211.227 4.2672V5.33398V6.40077V6.40077H212.294Z" fill="url(#paint6_linear_450_9314)" mask="url(#path-14-outside-4_450_9314)"/>
+</g>
+<g filter="url(#filter6_f_450_9314)">
+<path d="M2.13477 13.8684V4.26736C2.13477 3.08902 3.09 2.13379 4.26834 2.13379H214.425C215.603 2.13379 216.559 3.08902 216.559 4.26736V13.8684" stroke="url(#paint7_linear_450_9314)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_9314)">
+<path d="M33.0703 62.9403V26.9541C33.4259 22.5921 36.8041 15.4683 46.9385 13.8682H168.019C177.62 14.4016 184.554 18.2301 184.554 31.316V62.9403" stroke="url(#paint8_linear_450_9314)" stroke-width="1.06678"/>
+</g>
+<path d="M18.1914 63.6704L199.096 63.6704" stroke="#1F1600" stroke-width="1.06678"/>
+<g filter="url(#filter8_f_450_9314)">
+<path d="M22.9355 45.8716V62.4067H29.8696V45.8716" stroke="url(#paint9_linear_450_9314)" style="mix-blend-mode:plus-lighter" stroke-width="1.06678"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_9314" x="34.3613" y="17.1807" width="150.641" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9314"/>
+</filter>
+<filter id="filter1_ii_450_9314" x="5.57031" y="66.254" width="208.147" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9314"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231222 0 0 0 0 0.219004 0 0 0 0 0.240385 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_9314" result="effect2_innerShadow_450_9314"/>
+</filter>
+<filter id="filter2_f_450_9314" x="6.40197" y="68.274" width="205.889" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9314"/>
+</filter>
+<filter id="filter3_f_450_9314" x="2.13439" y="64.0069" width="213.356" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9314"/>
+</filter>
+<filter id="filter4_f_450_9314" x="2.13243" y="3.2003" width="212.294" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9314"/>
+</filter>
+<filter id="filter5_f_450_9314" x="3.20275" y="3.2003" width="211.225" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9314"/>
+</filter>
+<filter id="filter6_f_450_9314" x="0.534778" y="0.533801" width="217.624" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9314"/>
+</filter>
+<filter id="filter7_f_450_9314" x="31.4703" y="12.2682" width="154.684" height="51.739" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9314"/>
+</filter>
+<filter id="filter8_f_450_9314" x="21.3356" y="44.8048" width="10.1336" height="19.2019" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9314"/>
+</filter>
+<linearGradient id="paint0_linear_450_9314" x1="109.149" y1="17.1807" x2="109.149" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#454148"/>
+<stop offset="0.05" stop-color="#454148"/>
+<stop offset="1" stop-color="#3D3A40"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9314" x1="31.6904" y1="34.5812" x2="183.936" y2="34.5812" gradientUnits="userSpaceOnUse">
+<stop stop-color="#615F63"/>
+<stop offset="0.077962" stop-color="#454148" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#454148" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#615F63"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9314" x1="109.346" y1="70.4077" x2="109.346" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#615F63"/>
+<stop offset="1" stop-color="#615F63" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9314" x1="4.26562" y1="33.917" x2="213.951" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3AFB5"/>
+<stop offset="0.144231" stop-color="#A49EA8"/>
+<stop offset="0.889423" stop-color="#A49EA8"/>
+<stop offset="0.961538" stop-color="#9B959B"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9314" x1="108.812" y1="66.1406" x2="108.812" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7BEC7"/>
+<stop offset="1" stop-color="#C7BEC7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9314" x1="108.279" y1="5.33398" x2="108.279" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BBA9C7"/>
+<stop offset="1" stop-color="#BBA9C7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9314" x1="18.6024" y1="12.2671" x2="49.217" y2="15.5103" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7BEC7" stop-opacity="0.905882"/>
+<stop offset="1" stop-color="#C7BEC7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9314" x1="109.347" y1="2.13379" x2="109.347" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF0FF"/>
+<stop offset="1" stop-color="#FFF0FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_9314" x1="108.812" y1="13.8682" x2="108.812" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#938F96"/>
+<stop offset="1" stop-color="#938F96" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_9314" x1="25.0691" y1="61.8734" x2="24.5357" y2="36.2705" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BBB3BF"/>
+<stop offset="1" stop-color="#BBB3BF" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9314">
+<rect width="50" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/중앙.svg
new file mode 100644
index 0000000..e3a18a9
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/실사화/중앙.svg	
@@ -0,0 +1,154 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9350)">
+<g filter="url(#filter0_i_450_9350)">
+<path d="M-469.148 29.9821C-469.148 22.9121 -463.417 17.1807 -456.347 17.1807H551.006C558.076 17.1807 563.807 22.9121 563.807 29.9821V65.6913H-469.148V29.9821Z" fill="url(#paint0_linear_450_9350)"/>
+<path d="M-469.148 29.9821C-469.148 22.9121 -463.417 17.1807 -456.347 17.1807H551.006C558.076 17.1807 563.807 22.9121 563.807 29.9821V65.6913H-469.148V29.9821Z" fill="url(#paint1_linear_450_9350)"/>
+</g>
+<path d="M-456.347 17.7139H551.006C557.781 17.7139 563.274 23.207 563.274 29.9824V65.1582H-468.615V29.9824C-468.615 23.207 -463.122 17.7139 -456.347 17.7139Z" stroke="#1A1302" stroke-width="1.06678"/>
+<path d="M746.205 66.2539C752.097 66.2539 756.873 71.0302 756.873 76.9219V93.9707H-662.747V76.9219C-662.747 71.0303 -657.971 66.254 -652.079 66.2539H746.205Z" fill="#76707A" stroke="#444047" stroke-width="4.26714"/>
+<g filter="url(#filter1_ii_450_9350)">
+<path d="M-660.613 76.922C-660.613 72.2086 -656.792 68.3877 -652.079 68.3877H746.205C750.919 68.3877 754.74 72.2086 754.74 76.922V90.7699C754.74 91.359 754.262 91.8366 753.673 91.8366H-659.547C-660.136 91.8366 -660.613 91.359 -660.613 90.7699V76.922Z" fill="#76707A"/>
+</g>
+<path d="M746.205 67.8545C751.213 67.8545 755.273 71.914 755.273 76.9219V90.7695C755.273 91.6533 754.557 92.3701 753.673 92.3701H-659.547C-660.43 92.3699 -661.146 91.6531 -661.146 90.7695V76.9219C-661.146 71.914 -657.087 67.8545 -652.079 67.8545H746.205Z" stroke="#444047" stroke-width="1.06678"/>
+<g filter="url(#filter2_f_450_9350)" style="mix-blend-mode:plus-lighter">
+<path d="M738.494 69.8745C742.324 69.8746 745.428 72.9787 745.428 76.8081V92.2769H-648.035V76.8081C-648.035 72.9788 -644.931 69.8747 -641.102 69.8745H738.494Z" stroke="url(#paint2_linear_450_9350)" stroke-width="1.06678"/>
+</g>
+<mask id="path-7-outside-1_450_9350" maskUnits="userSpaceOnUse" x="-681.986" y="-0.639648" width="1458" height="69" fill="black">
+<rect fill="white" x="-681.986" y="-0.639648" width="1458" height="69"/>
+<path d="M771.086 11.8717C771.086 12.4609 770.608 12.9385 770.019 12.9385H699.109C671.557 12.9385 649.154 34.9874 648.584 62.4033C648.572 62.9923 648.096 63.4736 647.506 63.4736H591.391C590.802 63.4736 590.325 62.9923 590.313 62.4033C589.743 34.9875 567.341 12.9387 539.789 12.9385H467.815C467.814 12.9385 467.812 12.9374 467.812 12.936C467.812 12.9347 467.811 12.9336 467.81 12.9336H-373.548C-373.55 12.9336 -373.551 12.9347 -373.551 12.936C-373.551 12.9374 -373.552 12.9385 -373.553 12.9385H-445.527C-473.08 12.9385 -495.483 34.9874 -496.052 62.4033C-496.065 62.9923 -496.541 63.4736 -497.13 63.4736H-553.246C-553.835 63.4736 -554.311 62.9923 -554.324 62.4033C-554.893 34.9875 -577.295 12.9387 -604.848 12.9385H-675.757C-676.347 12.9385 -676.824 12.4609 -676.824 11.8717V7.86171C-676.824 7.27254 -676.347 6.79492 -675.757 6.79492H770.019C770.608 6.79492 771.086 7.27254 771.086 7.86171V11.8717ZM771.091 5.11182C771.091 5.52684 770.754 5.86328 770.339 5.86328H-676.235C-676.65 5.86328 -676.986 5.52684 -676.986 5.11182C-676.986 4.69679 -676.65 4.36035 -676.235 4.36035H770.339C770.754 4.36035 771.091 4.69679 771.091 5.11182Z"/>
+</mask>
+<path d="M771.086 11.8717C771.086 12.4609 770.608 12.9385 770.019 12.9385H699.109C671.557 12.9385 649.154 34.9874 648.584 62.4033C648.572 62.9923 648.096 63.4736 647.506 63.4736H591.391C590.802 63.4736 590.325 62.9923 590.313 62.4033C589.743 34.9875 567.341 12.9387 539.789 12.9385H467.815C467.814 12.9385 467.812 12.9374 467.812 12.936C467.812 12.9347 467.811 12.9336 467.81 12.9336H-373.548C-373.55 12.9336 -373.551 12.9347 -373.551 12.936C-373.551 12.9374 -373.552 12.9385 -373.553 12.9385H-445.527C-473.08 12.9385 -495.483 34.9874 -496.052 62.4033C-496.065 62.9923 -496.541 63.4736 -497.13 63.4736H-553.246C-553.835 63.4736 -554.311 62.9923 -554.324 62.4033C-554.893 34.9875 -577.295 12.9387 -604.848 12.9385H-675.757C-676.347 12.9385 -676.824 12.4609 -676.824 11.8717V7.86171C-676.824 7.27254 -676.347 6.79492 -675.757 6.79492H770.019C770.608 6.79492 771.086 7.27254 771.086 7.86171V11.8717ZM771.091 5.11182C771.091 5.52684 770.754 5.86328 770.339 5.86328H-676.235C-676.65 5.86328 -676.986 5.52684 -676.986 5.11182C-676.986 4.69679 -676.65 4.36035 -676.235 4.36035H770.339C770.754 4.36035 771.091 4.69679 771.091 5.11182Z" fill="url(#paint3_linear_450_9350)"/>
+<path d="M539.789 12.9385V8.67134V8.67134V12.9385ZM-604.848 12.9385L-604.848 8.67134H-604.848V12.9385ZM-496.052 62.4033L-500.319 62.3146V62.3146L-496.052 62.4033ZM590.313 62.4033L594.579 62.3146L590.313 62.4033ZM648.584 62.4033L652.851 62.4919L648.584 62.4033ZM-554.324 62.4033L-550.057 62.3146L-554.324 62.4033ZM770.019 12.9385V8.67134H699.109V12.9385V17.2056H770.019V12.9385ZM699.109 12.9385V8.67134C669.23 8.67134 644.936 32.5819 644.318 62.3146L648.584 62.4033L652.851 62.4919C653.372 37.3929 673.884 17.2056 699.109 17.2056V12.9385ZM647.506 63.4736V59.2065H591.391V63.4736V67.7408H647.506V63.4736ZM590.313 62.4033L594.579 62.3146C593.962 32.5821 569.668 8.67154 539.789 8.67134V12.9385V17.2056C565.014 17.2058 585.525 37.393 586.047 62.4919L590.313 62.4033ZM539.789 12.9385V8.67134H467.815V12.9385V17.2056H539.789V12.9385ZM467.81 12.9336V8.66645H-373.548V12.9336V17.2007H467.81V12.9336ZM-373.553 12.9385V8.67134H-445.527V12.9385V17.2056H-373.553V12.9385ZM-445.527 12.9385V8.67134C-475.407 8.67134 -499.701 32.5819 -500.319 62.3146L-496.052 62.4033L-491.786 62.4919C-491.265 37.3929 -470.753 17.2056 -445.527 17.2056V12.9385ZM-497.13 63.4736V59.2065H-553.246V63.4736V67.7408H-497.13V63.4736ZM-554.324 62.4033L-550.057 62.3146C-550.675 32.5821 -574.968 8.67154 -604.848 8.67134L-604.848 12.9385L-604.848 17.2056C-579.622 17.2058 -559.111 37.393 -558.59 62.4919L-554.324 62.4033ZM-604.848 12.9385V8.67134H-675.757V12.9385V17.2056H-604.848V12.9385ZM-676.824 11.8717H-672.557V7.86171H-676.824H-681.091V11.8717H-676.824ZM-675.757 6.79492V11.0621H770.019V6.79492V2.52778H-675.757V6.79492ZM771.086 7.86171H766.819V11.8717H771.086H775.353V7.86171H771.086ZM770.339 5.86328V1.59614H-676.235V5.86328V10.1304H770.339V5.86328ZM-676.235 4.36035V8.62749H770.339V4.36035V0.0932121H-676.235V4.36035ZM770.339 4.36035V8.62749C768.397 8.62749 766.824 7.05324 766.824 5.11182H771.091H775.358C775.358 2.34035 773.111 0.0932121 770.339 0.0932121V4.36035ZM-676.986 5.11182H-672.719C-672.719 7.05347 -674.293 8.62749 -676.235 8.62749V4.36035V0.0932121C-679.007 0.0932121 -681.253 2.34012 -681.253 5.11182H-676.986ZM-676.235 5.86328V1.59614C-674.293 1.59614 -672.719 3.1704 -672.719 5.11182H-676.986H-681.253C-681.253 7.88328 -679.007 10.1304 -676.235 10.1304V5.86328ZM770.339 5.86328V10.1304C773.111 10.1304 775.358 7.88351 775.358 5.11182H771.091H766.824C766.824 3.17016 768.398 1.59614 770.339 1.59614V5.86328ZM770.019 6.79492V11.0621C768.252 11.0621 766.819 9.62919 766.819 7.86171H771.086H775.353C775.353 4.91588 772.965 2.52778 770.019 2.52778V6.79492ZM-496.052 62.4033L-500.319 62.3146C-500.284 60.6582 -498.939 59.2065 -497.13 59.2065V63.4736V67.7408C-494.143 67.7408 -491.845 65.3264 -491.786 62.4919L-496.052 62.4033ZM-373.551 12.936H-377.818C-377.818 10.5807 -375.909 8.67134 -373.553 8.67134V12.9385V17.2056C-371.195 17.2056 -369.284 15.2941 -369.284 12.936H-373.551ZM-373.548 12.9336V8.66645C-375.87 8.66645 -377.818 10.5421 -377.818 12.936H-373.551H-369.284C-369.284 15.3273 -371.229 17.2007 -373.548 17.2007V12.9336ZM467.812 12.936H472.08C472.08 10.578 470.168 8.66645 467.81 8.66645V12.9336V17.2007C465.455 17.2007 463.545 15.2914 463.545 12.936H467.812ZM-676.824 7.86171H-672.557C-672.557 9.62921 -673.99 11.0621 -675.757 11.0621V6.79492V2.52778C-678.703 2.52778 -681.091 4.91586 -681.091 7.86171H-676.824ZM591.391 63.4736V59.2065C593.199 59.2065 594.545 60.6582 594.579 62.3146L590.313 62.4033L586.047 62.4919C586.106 65.3264 588.404 67.7408 591.391 67.7408V63.4736ZM-675.757 12.9385V8.67134C-673.99 8.67134 -672.557 10.1042 -672.557 11.8717H-676.824H-681.091C-681.091 14.8175 -678.703 17.2056 -675.757 17.2056V12.9385ZM648.584 62.4033L644.318 62.3146C644.353 60.6582 645.698 59.2065 647.506 59.2065V63.4736V67.7408C650.493 67.7408 652.792 65.3264 652.851 62.4919L648.584 62.4033ZM467.815 12.9385V8.67134C470.171 8.67134 472.08 10.5814 472.08 12.936H467.812H463.545C463.545 15.2933 465.456 17.2056 467.815 17.2056V12.9385ZM-553.246 63.4736V59.2065C-551.437 59.2065 -550.092 60.6582 -550.057 62.3146L-554.324 62.4033L-558.59 62.4919C-558.531 65.3264 -556.232 67.7408 -553.246 67.7408V63.4736ZM770.019 12.9385V17.2056C772.965 17.2056 775.353 14.8175 775.353 11.8717H771.086H766.819C766.819 10.1042 768.252 8.67134 770.019 8.67134V12.9385Z" fill="#444047" mask="url(#path-7-outside-1_450_9350)"/>
+<mask id="path-9-outside-2_450_9350" maskUnits="userSpaceOnUse" x="-678.986" y="2.36035" width="1452" height="63" fill="black">
+<rect fill="white" x="-678.986" y="2.36035" width="1452" height="63"/>
+<path d="M771.086 12.9385H699.109C671.199 12.9385 648.573 35.5636 648.573 63.4736H590.324C590.324 35.5637 567.699 12.9387 539.789 12.9385H467.812V12.9336H-373.551V12.9385H-445.527C-473.437 12.9385 -496.063 35.5636 -496.063 63.4736H-554.312C-554.312 35.5637 -576.938 12.9387 -604.848 12.9385H-676.824V6.79492H771.086V12.9385ZM771.091 5.86328H-676.986V4.36035H771.091V5.86328Z"/>
+</mask>
+<path d="M771.086 12.9385V14.0053C771.675 14.0053 772.153 13.5276 772.153 12.9385H771.086ZM648.573 63.4736V64.5404C649.162 64.5404 649.64 64.0628 649.64 63.4736H648.573ZM590.324 63.4736H589.257C589.257 64.0628 589.735 64.5404 590.324 64.5404V63.4736ZM539.789 12.9385V11.8717V11.8717V12.9385ZM467.812 12.9385H466.746C466.746 13.5276 467.223 14.0053 467.812 14.0053V12.9385ZM467.812 12.9336H468.879C468.879 12.3444 468.402 11.8668 467.812 11.8668V12.9336ZM-373.551 12.9336V11.8668C-374.14 11.8668 -374.618 12.3444 -374.618 12.9336H-373.551ZM-373.551 12.9385V14.0053C-372.962 14.0053 -372.484 13.5276 -372.484 12.9385H-373.551ZM-496.063 63.4736V64.5404C-495.474 64.5404 -494.997 64.0628 -494.997 63.4736H-496.063ZM-554.312 63.4736H-555.379C-555.379 64.0628 -554.902 64.5404 -554.312 64.5404V63.4736ZM-604.848 12.9385L-604.848 11.8717H-604.848V12.9385ZM-676.824 12.9385H-677.891C-677.891 13.5276 -677.413 14.0053 -676.824 14.0053V12.9385ZM-676.824 6.79492V5.72814C-677.413 5.72814 -677.891 6.20575 -677.891 6.79492H-676.824ZM771.086 6.79492H772.153C772.153 6.20575 771.675 5.72814 771.086 5.72814V6.79492ZM771.091 5.86328V6.93007C771.68 6.93007 772.158 6.45245 772.158 5.86328H771.091ZM-676.986 5.86328H-678.053C-678.053 6.45245 -677.575 6.93007 -676.986 6.93007V5.86328ZM-676.986 4.36035V3.29357C-677.575 3.29357 -678.053 3.77118 -678.053 4.36035H-676.986ZM771.091 4.36035H772.158C772.158 3.77118 771.68 3.29357 771.091 3.29357V4.36035ZM771.086 12.9385V11.8717H699.109V12.9385V14.0053H771.086V12.9385ZM699.109 12.9385V11.8717C670.61 11.8717 647.506 34.9744 647.506 63.4736H648.573H649.64C649.64 36.1528 671.788 14.0053 699.109 14.0053V12.9385ZM648.573 63.4736V62.4068H590.324V63.4736V64.5404H648.573V63.4736ZM590.324 63.4736H591.391C591.391 34.9745 568.288 11.8719 539.789 11.8717V12.9385V14.0053C567.11 14.0054 589.257 36.1529 589.257 63.4736H590.324ZM539.789 12.9385V11.8717H467.812V12.9385V14.0053H539.789V12.9385ZM467.812 12.9385H468.879V12.9336H467.812H466.746V12.9385H467.812ZM467.812 12.9336V11.8668H-373.551V12.9336V14.0004H467.812V12.9336ZM-373.551 12.9336H-374.618V12.9385H-373.551H-372.484V12.9336H-373.551ZM-373.551 12.9385V11.8717H-445.527V12.9385V14.0053H-373.551V12.9385ZM-445.527 12.9385V11.8717C-474.027 11.8717 -497.13 34.9744 -497.13 63.4736H-496.063H-494.997C-494.997 36.1528 -472.848 14.0053 -445.527 14.0053V12.9385ZM-496.063 63.4736V62.4068H-554.312V63.4736V64.5404H-496.063V63.4736ZM-554.312 63.4736H-553.246C-553.246 34.9745 -576.349 11.8719 -604.848 11.8717L-604.848 12.9385L-604.848 14.0053C-577.527 14.0054 -555.379 36.1529 -555.379 63.4736H-554.312ZM-604.848 12.9385V11.8717H-676.824V12.9385V14.0053H-604.848V12.9385ZM-676.824 12.9385H-675.757V6.79492H-676.824H-677.891V12.9385H-676.824ZM-676.824 6.79492V7.86171H771.086V6.79492V5.72814H-676.824V6.79492ZM771.086 6.79492H770.019V12.9385H771.086H772.153V6.79492H771.086ZM771.091 5.86328V4.7965H-676.986V5.86328V6.93007H771.091V5.86328ZM-676.986 5.86328H-675.92V4.36035H-676.986H-678.053V5.86328H-676.986ZM-676.986 4.36035V5.42714H771.091V4.36035V3.29357H-676.986V4.36035ZM771.091 4.36035H770.024V5.86328H771.091H772.158V4.36035H771.091Z" fill="#040404" fill-opacity="0.5" mask="url(#path-9-outside-2_450_9350)"/>
+<g filter="url(#filter3_f_450_9350)" style="mix-blend-mode:plus-lighter">
+<path d="M756.324 65.6074C762.511 65.6074 767.525 70.6223 767.525 76.8086V94.4102H-677.508V76.8086C-677.508 70.6223 -672.493 65.6074 -666.307 65.6074H756.324Z" stroke="url(#paint4_linear_450_9350)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter4_f_450_9350)" style="mix-blend-mode:plus-lighter">
+<mask id="path-12-outside-3_450_9350" maskUnits="userSpaceOnUse" x="-678.986" y="3.33398" width="1440" height="61" fill="black">
+<rect fill="white" x="-678.986" y="3.33398" width="1440" height="61"/>
+<path d="M759.645 5.33398V11.4834H689.543C661.125 11.4836 638.087 34.5212 638.087 62.9395H580.292C580.292 34.5211 557.253 11.4834 528.835 11.4834H499.894V11.5234H-448.211C-475.687 12.5912 -497.634 35.2021 -497.634 62.9395H-555.43C-555.43 34.5211 -578.467 11.4834 -606.886 11.4834H-676.986V5.33398H759.645Z"/>
+</mask>
+<path d="M759.645 5.33398H760.711V4.2672H759.645V5.33398ZM759.645 11.4834V12.5502H760.711V11.4834H759.645ZM689.543 11.4834V10.4166V10.4166V11.4834ZM638.087 62.9395V64.0062H639.154V62.9395L638.087 62.9395ZM580.292 62.9395L579.225 62.9395V64.0062H580.292V62.9395ZM499.894 11.4834V10.4166H498.827V11.4834H499.894ZM499.894 11.5234V12.5902H500.96V11.5234H499.894ZM-448.211 11.5234V10.4567H-448.232L-448.252 10.4575L-448.211 11.5234ZM-497.634 62.9395V64.0062H-496.567L-496.567 62.9395L-497.634 62.9395ZM-555.43 62.9395L-556.496 62.9395L-556.496 64.0062H-555.43V62.9395ZM-676.986 11.4834H-678.053V12.5502H-676.986V11.4834ZM-676.986 5.33398V4.2672H-678.053V5.33398H-676.986ZM759.645 5.33398H758.578V11.4834H759.645H760.711V5.33398H759.645ZM759.645 11.4834V10.4166H689.543V11.4834V12.5502H759.645V11.4834ZM689.543 11.4834V10.4166C660.536 10.4168 637.02 33.932 637.02 62.9394L638.087 62.9395L639.154 62.9395C639.154 35.1104 661.714 12.5504 689.543 12.5502V11.4834ZM638.087 62.9395V61.8727H580.292V62.9395V64.0062H638.087V62.9395ZM580.292 62.9395L581.359 62.9394C581.359 33.9319 557.843 10.4166 528.835 10.4166V11.4834V12.5502C556.664 12.5502 579.225 35.1103 579.225 62.9395L580.292 62.9395ZM528.835 11.4834V10.4166H499.894V11.4834V12.5502H528.835V11.4834ZM499.894 11.4834H498.827V11.5234H499.894H500.96V11.4834H499.894ZM499.894 11.5234V10.4567H-448.211V11.5234V12.5902H499.894V11.5234ZM-448.211 11.5234L-448.252 10.4575C-476.299 11.5474 -498.7 34.6268 -498.701 62.9394L-497.634 62.9395L-496.567 62.9395C-496.567 35.7774 -475.075 13.635 -448.17 12.5894L-448.211 11.5234ZM-497.634 62.9395V61.8727H-555.43V62.9395V64.0062H-497.634V62.9395ZM-555.43 62.9395L-554.363 62.9394C-554.363 33.9319 -577.878 10.4166 -606.886 10.4166V11.4834V12.5502C-579.056 12.5502 -556.497 35.1102 -556.496 62.9395L-555.43 62.9395ZM-606.886 11.4834V10.4166H-676.986V11.4834V12.5502H-606.886V11.4834ZM-676.986 11.4834H-675.92V5.33398H-676.986H-678.053V11.4834H-676.986ZM-676.986 5.33398V6.40077H759.645V5.33398V4.2672H-676.986V5.33398Z" fill="url(#paint5_linear_450_9350)" mask="url(#path-12-outside-3_450_9350)"/>
+</g>
+<g filter="url(#filter5_f_450_9350)" style="mix-blend-mode:plus-lighter">
+<mask id="path-14-outside-4_450_9350" maskUnits="userSpaceOnUse" x="-671.596" y="3.33398" width="1433" height="61" fill="black">
+<rect fill="white" x="-671.596" y="3.33398" width="1433" height="61"/>
+<path d="M758.586 5.33398C759.175 5.33398 759.652 5.8116 759.652 6.40077V10.4166C759.652 11.0058 759.175 11.4834 758.586 11.4834H690.175C662.114 11.4834 639.299 33.9448 638.729 61.869C638.717 62.4581 638.24 62.9395 637.651 62.9395H582.286C581.696 62.9395 581.22 62.4581 581.208 61.869C580.638 33.9448 557.823 11.4834 529.763 11.4834H501.268C501.257 11.4834 501.248 11.4924 501.248 11.5034C501.248 11.5145 501.239 11.5234 501.228 11.5234H-441.739C-468.861 12.5772 -490.596 34.6224 -491.152 61.8692C-491.164 62.4582 -491.641 62.9395 -492.23 62.9395H-547.595C-548.185 62.9395 -548.661 62.4581 -548.673 61.869C-549.243 33.9448 -572.057 11.4834 -600.118 11.4834H-668.529C-669.118 11.4834 -669.596 11.0058 -669.596 10.4166V6.40077C-669.596 5.8116 -669.118 5.33398 -668.529 5.33398H758.586Z"/>
+</mask>
+<path d="M529.763 11.4834V10.4166V10.4166V11.4834ZM-441.739 11.5234V10.4567H-441.76L-441.781 10.4575L-441.739 11.5234ZM-600.118 11.4834V10.4166V10.4166V11.4834ZM-548.673 61.869L-549.74 61.8908L-548.673 61.869ZM-491.152 61.8692L-490.086 61.891L-491.152 61.8692ZM581.208 61.869L582.274 61.8473L581.208 61.869ZM638.729 61.869L637.662 61.8473L638.729 61.869ZM759.652 6.40077H758.586V10.4166H759.652H760.719V6.40077H759.652ZM758.586 11.4834V10.4166H690.175V11.4834V12.5502H758.586V11.4834ZM690.175 11.4834V10.4166C661.532 10.4166 638.244 33.3437 637.662 61.8473L638.729 61.869L639.795 61.8908C640.354 34.546 662.696 12.5502 690.175 12.5502V11.4834ZM637.651 62.9395V61.8727H582.286V62.9395V64.0062H637.651V62.9395ZM581.208 61.869L582.274 61.8473C581.693 33.3437 558.405 10.4166 529.763 10.4166V11.4834V12.5502C557.242 12.5502 579.583 34.546 580.141 61.8908L581.208 61.869ZM529.763 11.4834V10.4166H501.268V11.4834V12.5502H529.763V11.4834ZM501.228 11.5234V10.4567H-441.739V11.5234V12.5902H501.228V11.5234ZM-441.739 11.5234L-441.781 10.4575C-469.466 11.5331 -491.651 34.0351 -492.219 61.8474L-491.152 61.8692L-490.086 61.891C-489.541 35.2098 -468.257 13.6213 -441.698 12.5894L-441.739 11.5234ZM-492.23 62.9395V61.8727H-547.595V62.9395V64.0062H-492.23V62.9395ZM-548.673 61.869L-547.606 61.8473C-548.188 33.3437 -571.476 10.4166 -600.118 10.4166V11.4834V12.5502C-572.639 12.5502 -550.298 34.546 -549.74 61.8908L-548.673 61.869ZM-600.118 11.4834V10.4166H-668.529V11.4834V12.5502H-600.118V11.4834ZM-669.596 10.4166H-668.529V6.40077H-669.596H-670.662V10.4166H-669.596ZM-668.529 5.33398V6.40077H758.586V5.33398V4.2672H-668.529V5.33398ZM-669.596 6.40077H-668.529V6.40077V5.33398V4.2672C-669.707 4.2672 -670.662 5.22243 -670.662 6.40077H-669.596ZM-547.595 62.9395V61.8727C-547.596 61.8727 -547.596 61.8726 -547.595 61.8728C-547.594 61.873 -547.593 61.8732 -547.593 61.8734C-547.592 61.8737 -547.594 61.8731 -547.597 61.8702C-547.6 61.8673 -547.602 61.8637 -547.604 61.8599C-547.605 61.8567 -547.606 61.8529 -547.606 61.8473L-548.673 61.869L-549.74 61.8908C-549.716 63.0416 -548.784 64.0062 -547.595 64.0062V62.9395ZM-491.152 61.8692L-492.219 61.8474C-492.219 61.853 -492.22 61.8568 -492.221 61.86C-492.223 61.8637 -492.225 61.8674 -492.228 61.8702C-492.231 61.873 -492.233 61.8737 -492.232 61.8734C-492.232 61.8732 -492.231 61.873 -492.23 61.8728C-492.229 61.8726 -492.229 61.8727 -492.23 61.8727V62.9395V64.0062C-491.042 64.0062 -490.109 63.0419 -490.086 61.891L-491.152 61.8692ZM501.248 11.5034H500.181C500.181 10.9253 500.65 10.4567 501.228 10.4567V11.5234V12.5902C501.828 12.5902 502.315 12.1036 502.315 11.5034H501.248ZM582.286 62.9395V61.8727C582.285 61.8727 582.285 61.8726 582.286 61.8728C582.287 61.873 582.287 61.8732 582.288 61.8734C582.289 61.8737 582.287 61.8731 582.284 61.8702C582.281 61.8673 582.279 61.8637 582.277 61.8599C582.276 61.8567 582.275 61.8529 582.274 61.8473L581.208 61.869L580.141 61.8908C580.165 63.0416 581.097 64.0062 582.286 64.0062V62.9395ZM638.729 61.869L637.662 61.8473C637.662 61.8529 637.661 61.8567 637.66 61.8599C637.658 61.8637 637.655 61.8673 637.653 61.8702C637.65 61.8731 637.648 61.8737 637.649 61.8734C637.649 61.8732 637.65 61.873 637.651 61.8728C637.651 61.8726 637.652 61.8727 637.651 61.8727V62.9395V64.0062C638.839 64.0062 639.772 63.0416 639.795 61.8908L638.729 61.869ZM501.268 11.4834V10.4166C500.668 10.4166 500.181 10.9032 500.181 11.5034H501.248H502.315C502.315 12.0815 501.846 12.5502 501.268 12.5502V11.4834ZM-668.529 11.4834V10.4166H-668.529H-669.596H-670.662C-670.662 11.595 -669.707 12.5502 -668.529 12.5502V11.4834ZM759.652 10.4166H758.586V10.4166V11.4834V12.5502C759.764 12.5502 760.719 11.595 760.719 10.4166H759.652ZM759.652 6.40077H760.719C760.719 5.22248 759.764 4.2672 758.586 4.2672V5.33398V6.40077V6.40077H759.652Z" fill="url(#paint6_linear_450_9350)" mask="url(#path-14-outside-4_450_9350)"/>
+</g>
+<g filter="url(#filter6_f_450_9350)">
+<path d="M-691.703 13.8684V4.26736C-691.703 3.08902 -690.748 2.13379 -689.57 2.13379H786.966C788.144 2.13379 789.1 3.08902 789.1 4.26736V13.8684" stroke="url(#paint7_linear_450_9350)" stroke-width="1.06678"/>
+</g>
+<g filter="url(#filter7_f_450_9350)">
+<path d="M-478.062 62.9403V26.9541C-475.607 22.5921 -452.277 15.4683 -382.289 13.8682H453.885C520.19 14.4016 568.077 18.2301 568.077 31.316V62.9403" stroke="url(#paint8_linear_450_9350)" stroke-width="1.06678"/>
+</g>
+<path d="M-580.816 63.6704L668.502 63.6704" stroke="#1F1600" stroke-width="1.06678"/>
+</g>
+<defs>
+<filter id="filter0_i_450_9350" x="-469.148" y="17.1807" width="1034.02" height="49.5775" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9350"/>
+</filter>
+<filter id="filter1_ii_450_9350" x="-661.68" y="66.254" width="1418.55" height="27.7161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="1.06678" dy="1.06678"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.941176 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9350"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2.13357"/>
+<feGaussianBlur stdDeviation="0.533392"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231222 0 0 0 0 0.219004 0 0 0 0 0.240385 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_450_9350" result="effect2_innerShadow_450_9350"/>
+</filter>
+<filter id="filter2_f_450_9350" x="-649.635" y="68.274" width="1396.66" height="25.6028" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9350"/>
+</filter>
+<filter id="filter3_f_450_9350" x="-679.108" y="64.0069" width="1448.23" height="32.0037" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9350"/>
+</filter>
+<filter id="filter4_f_450_9350" x="-679.12" y="3.2003" width="1440.9" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9350"/>
+</filter>
+<filter id="filter5_f_450_9350" x="-671.729" y="3.2003" width="1433.51" height="61.8728" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9350"/>
+</filter>
+<filter id="filter6_f_450_9350" x="-693.303" y="0.533801" width="1484" height="14.4016" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9350"/>
+</filter>
+<filter id="filter7_f_450_9350" x="-479.662" y="12.2677" width="1049.34" height="51.7395" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.533392" result="effect1_foregroundBlur_450_9350"/>
+</filter>
+<linearGradient id="paint0_linear_450_9350" x1="47.3295" y1="17.1807" x2="47.3295" y2="65.6913" gradientUnits="userSpaceOnUse">
+<stop stop-color="#454148"/>
+<stop offset="0.05" stop-color="#454148"/>
+<stop offset="1" stop-color="#3D3A40"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9350" x1="-487.594" y1="34.5812" x2="563.807" y2="34.5814" gradientUnits="userSpaceOnUse">
+<stop stop-color="#615F63"/>
+<stop offset="0.077962" stop-color="#454148" stop-opacity="0.28"/>
+<stop offset="0.939742" stop-color="#454148" stop-opacity="0.282099"/>
+<stop offset="1" stop-color="#615F63"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9350" x1="48.6964" y1="70.4077" x2="48.6964" y2="91.7434" gradientUnits="userSpaceOnUse">
+<stop stop-color="#615F63"/>
+<stop offset="1" stop-color="#615F63" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9350" x1="-676.986" y1="33.917" x2="771.091" y2="33.917" gradientUnits="userSpaceOnUse">
+<stop stop-color="#B3AFB5"/>
+<stop offset="0.144231" stop-color="#A49EA8"/>
+<stop offset="0.889423" stop-color="#A49EA8"/>
+<stop offset="0.961538" stop-color="#9B959B"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9350" x1="45.0088" y1="66.1406" x2="45.0088" y2="93.877" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7BEC7"/>
+<stop offset="1" stop-color="#C7BEC7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9350" x1="41.3291" y1="5.33398" x2="41.3291" y2="14.4006" gradientUnits="userSpaceOnUse">
+<stop stop-color="#BBA9C7"/>
+<stop offset="1" stop-color="#BBA9C7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9350" x1="-577.978" y1="12.2671" x2="-523.879" y2="157.402" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C7BEC7" stop-opacity="0.905882"/>
+<stop offset="1" stop-color="#C7BEC7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9350" x1="48.6982" y1="2.13379" x2="48.6982" y2="13.8684" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFF0FF"/>
+<stop offset="1" stop-color="#FFF0FF" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_9350" x1="45.0071" y1="13.8682" x2="45.0071" y2="62.9403" gradientUnits="userSpaceOnUse">
+<stop stop-color="#938F96"/>
+<stop offset="1" stop-color="#938F96" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9350">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/오른쪽.svg
new file mode 100644
index 0000000..05a9335
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/오른쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7308)">
+<g filter="url(#filter0_i_450_7308)">
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#555555"/>
+<path d="M-124.781 24.0874C-124.781 18.0123 -119.856 13.0874 -113.781 13.0874H7.21875C13.2939 13.0874 18.2188 18.0123 18.2188 24.0874V69.0874H-124.781V24.0874Z" fill="#713699" fill-opacity="0.1"/>
+</g>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#555555"/>
+<path d="M-113.781 13.5874H7.21875C13.0177 13.5874 17.7188 18.2884 17.7188 24.0874V68.5874H-124.281V24.0874C-124.281 18.2884 -119.58 13.5874 -113.781 13.5874Z" stroke="#713699" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_7308" maskUnits="userSpaceOnUse" x="-155.559" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="-155.559" y="1.0874" width="205" height="80"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z"/>
+</mask>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#AAAAAA"/>
+<path d="M44.9971 13.1284C35.8131 13.1286 28.3683 20.5734 28.3682 29.7573V76.5884H20.4619V29.7573C20.4618 20.5732 13.0161 13.1284 3.83203 13.1284V13.1245H-110.368V13.1284C-119.552 13.1286 -126.997 20.5734 -126.997 29.7573V76.5884H-134.903V29.7573C-134.903 20.5732 -142.349 13.1284 -151.533 13.1284V7.36865H44.9971V13.1284ZM44.999 6.49658H-151.559V5.0874H44.999V6.49658Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#555555" mask="url(#path-3-outside-1_450_7308)"/>
+<path d="M44.9971 13.1284L44.9972 17.1284C47.2063 17.1284 48.9971 15.3375 48.9971 13.1284H44.9971ZM28.3682 29.7573L24.3682 29.7573V29.7573H28.3682ZM28.3682 76.5884V80.5884C30.5773 80.5884 32.3682 78.7975 32.3682 76.5884H28.3682ZM20.4619 76.5884H16.4619C16.4619 78.7975 18.2528 80.5884 20.4619 80.5884V76.5884ZM20.4619 29.7573H24.4619V29.7573L20.4619 29.7573ZM3.83203 13.1284H-0.167969C-0.167969 15.3376 1.62289 17.1284 3.83203 17.1284V13.1284ZM3.83203 13.1245H7.83203C7.83203 10.9154 6.04117 9.12451 3.83203 9.12451V13.1245ZM-110.368 13.1245V9.12451C-112.577 9.12451 -114.368 10.9154 -114.368 13.1245H-110.368ZM-110.368 13.1284L-110.368 17.1284C-108.159 17.1284 -106.368 15.3375 -106.368 13.1284H-110.368ZM-126.997 29.7573L-130.997 29.7573V29.7573H-126.997ZM-126.997 76.5884V80.5884C-124.788 80.5884 -122.997 78.7975 -122.997 76.5884H-126.997ZM-134.903 76.5884H-138.903C-138.903 78.7975 -137.112 80.5884 -134.903 80.5884V76.5884ZM-134.903 29.7573H-130.903V29.7573L-134.903 29.7573ZM-151.533 13.1284H-155.533C-155.533 15.3376 -153.742 17.1284 -151.533 17.1284V13.1284ZM-151.533 7.36865V3.36865C-153.742 3.36865 -155.533 5.15951 -155.533 7.36865H-151.533ZM44.9971 7.36865H48.9971C48.9971 5.15951 47.2062 3.36865 44.9971 3.36865V7.36865ZM44.999 6.49658V10.4966C47.2082 10.4966 48.999 8.70572 48.999 6.49658H44.999ZM-151.559 6.49658H-155.559C-155.559 8.70572 -153.768 10.4966 -151.559 10.4966V6.49658ZM-151.559 5.0874V1.0874C-153.768 1.0874 -155.559 2.87826 -155.559 5.0874L-151.559 5.0874ZM44.999 5.0874H48.999C48.999 2.87826 47.2082 1.0874 44.999 1.0874V5.0874ZM44.9971 13.1284L44.997 9.12842C33.604 9.12868 24.3683 18.3642 24.3682 29.7573L28.3682 29.7573L32.3682 29.7574C32.3682 22.7826 38.0223 17.1286 44.9972 17.1284L44.9971 13.1284ZM28.3682 29.7573H24.3682V76.5884H28.3682H32.3682V29.7573H28.3682ZM28.3682 76.5884V72.5884H20.4619V76.5884V80.5884H28.3682V76.5884ZM20.4619 76.5884H24.4619V29.7573H20.4619H16.4619V76.5884H20.4619ZM20.4619 29.7573L24.4619 29.7573C24.4618 18.3638 15.225 9.12842 3.83203 9.12842V13.1284V17.1284C10.8073 17.1284 16.4618 22.7827 16.4619 29.7574L20.4619 29.7573ZM3.83203 13.1284H7.83203V13.1245H3.83203H-0.167969V13.1284H3.83203ZM3.83203 13.1245V9.12451H-110.368V13.1245V17.1245H3.83203V13.1245ZM-110.368 13.1245H-114.368V13.1284H-110.368H-106.368V13.1245H-110.368ZM-110.368 13.1284L-110.368 9.12842C-121.761 9.12868 -130.997 18.3642 -130.997 29.7573L-126.997 29.7573L-122.997 29.7574C-122.997 22.7826 -117.343 17.1286 -110.368 17.1284L-110.368 13.1284ZM-126.997 29.7573H-130.997V76.5884H-126.997H-122.997V29.7573H-126.997ZM-126.997 76.5884V72.5884H-134.903V76.5884V80.5884H-126.997V76.5884ZM-134.903 76.5884H-130.903V29.7573H-134.903H-138.903V76.5884H-134.903ZM-134.903 29.7573L-130.903 29.7573C-130.903 18.3638 -140.14 9.12842 -151.533 9.12842V13.1284V17.1284C-144.558 17.1284 -138.903 22.7827 -138.903 29.7574L-134.903 29.7573ZM-151.533 13.1284H-147.533V7.36865H-151.533H-155.533V13.1284H-151.533ZM-151.533 7.36865V11.3687H44.9971V7.36865V3.36865H-151.533V7.36865ZM44.9971 7.36865H40.9971V13.1284H44.9971H48.9971V7.36865H44.9971ZM44.999 6.49658V2.49658H-151.559V6.49658V10.4966H44.999V6.49658ZM-151.559 6.49658H-147.559V5.0874H-151.559H-155.559V6.49658H-151.559ZM-151.559 5.0874V9.0874H44.999V5.0874V1.0874H-151.559V5.0874ZM44.999 5.0874H40.999V6.49658H44.999H48.999V5.0874H44.999Z" fill="#713699" fill-opacity="0.1" mask="url(#path-3-outside-1_450_7308)"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#777777"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#555555" stroke-width="4"/>
+<path d="M34.7783 63.1064C40.3011 63.1065 44.7783 67.5837 44.7783 73.1064V89.0879H-151.338V73.1064C-151.338 67.5836 -146.861 63.1064 -141.338 63.1064H34.7783Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7308" x="-124.781" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7308"/>
+</filter>
+<clipPath id="clip0_450_7308">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/왼쪽.svg
new file mode 100644
index 0000000..044e489
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/왼쪽.svg	
@@ -0,0 +1,37 @@
+<svg width="50" height="93" viewBox="0 0 50 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7290)">
+<g filter="url(#filter0_i_450_7290)">
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#555555"/>
+<path d="M31.7773 24.0874C31.7773 18.0123 36.7022 13.0874 42.7773 13.0874H163.777C169.852 13.0874 174.777 18.0123 174.777 24.0874V69.0874H31.7773V24.0874Z" fill="#713699" fill-opacity="0.1"/>
+</g>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#555555"/>
+<path d="M42.7773 13.5874H163.777C169.576 13.5874 174.277 18.2884 174.277 24.0874V68.5874H32.2773V24.0874C32.2773 18.2884 36.9784 13.5874 42.7773 13.5874Z" stroke="#713699" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_7290" maskUnits="userSpaceOnUse" x="1" y="1.0874" width="205" height="80" fill="black">
+<rect fill="white" x="1" y="1.0874" width="205" height="80"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z"/>
+</mask>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#AAAAAA"/>
+<path d="M201.556 13.1284C192.372 13.1286 184.927 20.5734 184.927 29.7573V76.5884H177.021V29.7573C177.02 20.5732 169.575 13.1284 160.391 13.1284V13.1245H46.1904V13.1284C37.0065 13.1286 29.5616 20.5734 29.5615 29.7573V76.5884H21.6553V29.7573C21.6552 20.5732 14.2095 13.1284 5.02539 13.1284V7.36865H201.556V13.1284ZM201.558 6.49658H5V5.0874H201.558V6.49658Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#555555" mask="url(#path-3-outside-1_450_7290)"/>
+<path d="M201.556 13.1284L201.556 17.1284C203.765 17.1284 205.556 15.3375 205.556 13.1284H201.556ZM184.927 29.7573L180.927 29.7573V29.7573H184.927ZM184.927 76.5884V80.5884C187.136 80.5884 188.927 78.7975 188.927 76.5884H184.927ZM177.021 76.5884H173.021C173.021 78.7975 174.811 80.5884 177.021 80.5884V76.5884ZM177.021 29.7573H181.021V29.7573L177.021 29.7573ZM160.391 13.1284H156.391C156.391 15.3376 158.181 17.1284 160.391 17.1284V13.1284ZM160.391 13.1245H164.391C164.391 10.9154 162.6 9.12451 160.391 9.12451V13.1245ZM46.1904 13.1245V9.12451C43.9813 9.12451 42.1904 10.9154 42.1904 13.1245H46.1904ZM46.1904 13.1284L46.1905 17.1284C48.3996 17.1284 50.1904 15.3375 50.1904 13.1284H46.1904ZM29.5615 29.7573L25.5615 29.7573V29.7573H29.5615ZM29.5615 76.5884V80.5884C31.7707 80.5884 33.5615 78.7975 33.5615 76.5884H29.5615ZM21.6553 76.5884H17.6553C17.6553 78.7975 19.4461 80.5884 21.6553 80.5884V76.5884ZM21.6553 29.7573H25.6553V29.7573L21.6553 29.7573ZM5.02539 13.1284H1.02539C1.02539 15.3376 2.81625 17.1284 5.02539 17.1284V13.1284ZM5.02539 7.36865V3.36865C2.81625 3.36865 1.02539 5.15951 1.02539 7.36865H5.02539ZM201.556 7.36865H205.556C205.556 5.15951 203.765 3.36865 201.556 3.36865V7.36865ZM201.558 6.49658V10.4966C203.767 10.4966 205.558 8.70572 205.558 6.49658H201.558ZM5 6.49658H1C1 8.70572 2.79086 10.4966 5 10.4966L5 6.49658ZM5 5.0874V1.0874C2.79086 1.0874 1 2.87826 1 5.0874L5 5.0874ZM201.558 5.0874H205.558C205.558 2.87826 203.767 1.0874 201.558 1.0874V5.0874ZM201.556 13.1284L201.556 9.12842C190.163 9.12868 180.927 18.3642 180.927 29.7573L184.927 29.7573L188.927 29.7574C188.927 22.7826 194.581 17.1286 201.556 17.1284L201.556 13.1284ZM184.927 29.7573H180.927V76.5884H184.927H188.927V29.7573H184.927ZM184.927 76.5884V72.5884H177.021V76.5884V80.5884H184.927V76.5884ZM177.021 76.5884H181.021V29.7573H177.021H173.021V76.5884H177.021ZM177.021 29.7573L181.021 29.7573C181.02 18.3638 171.784 9.12842 160.391 9.12842V13.1284V17.1284C167.366 17.1284 173.02 22.7827 173.021 29.7574L177.021 29.7573ZM160.391 13.1284H164.391V13.1245H160.391H156.391V13.1284H160.391ZM160.391 13.1245V9.12451H46.1904V13.1245V17.1245H160.391V13.1245ZM46.1904 13.1245H42.1904V13.1284H46.1904H50.1904V13.1245H46.1904ZM46.1904 13.1284L46.1903 9.12842C34.7974 9.12868 25.5617 18.3642 25.5615 29.7573L29.5615 29.7573L33.5615 29.7574C33.5616 22.7826 39.2156 17.1286 46.1905 17.1284L46.1904 13.1284ZM29.5615 29.7573H25.5615V76.5884H29.5615H33.5615V29.7573H29.5615ZM29.5615 76.5884V72.5884H21.6553V76.5884V80.5884H29.5615V76.5884ZM21.6553 76.5884H25.6553V29.7573H21.6553H17.6553V76.5884H21.6553ZM21.6553 29.7573L25.6553 29.7573C25.6551 18.3638 16.4184 9.12842 5.02539 9.12842V13.1284V17.1284C12.0006 17.1284 17.6552 22.7827 17.6553 29.7574L21.6553 29.7573ZM5.02539 13.1284H9.02539V7.36865H5.02539H1.02539V13.1284H5.02539ZM5.02539 7.36865V11.3687H201.556V7.36865V3.36865H5.02539V7.36865ZM201.556 7.36865H197.556V13.1284H201.556H205.556V7.36865H201.556ZM201.558 6.49658V2.49658H5V6.49658V10.4966H201.558V6.49658ZM5 6.49658H9V5.0874H5H1V6.49658H5ZM5 5.0874V9.0874H201.558V5.0874V1.0874H5V5.0874ZM201.558 5.0874H197.558V6.49658H201.558H205.558V5.0874H201.558Z" fill="#713699" fill-opacity="0.1" mask="url(#path-3-outside-1_450_7290)"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#777777"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#555555" stroke-width="4"/>
+<path d="M191.337 63.1064C196.86 63.1065 201.337 67.5837 201.337 73.1064V89.0879H5.2207V73.1064C5.2207 67.5836 9.69786 63.1064 15.2207 63.1064H191.337Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7290" x="31.7773" y="13.0874" width="143" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7290"/>
+</filter>
+<clipPath id="clip0_450_7290">
+<rect width="50" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/중앙.svg
new file mode 100644
index 0000000..e31d3cb
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교량/위치도/중앙.svg	
@@ -0,0 +1,37 @@
+<svg width="97" height="93" viewBox="0 0 97 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7299)">
+<g filter="url(#filter0_i_450_7299)">
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#555555"/>
+<rect x="-72.6289" y="13" width="243.246" height="56" fill="#713699" fill-opacity="0.1"/>
+</g>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#555555"/>
+<rect x="-72.1289" y="13.5" width="242.246" height="55" stroke="#713699" stroke-opacity="0.1"/>
+<mask id="path-3-outside-1_450_7299" maskUnits="userSpaceOnUse" x="-122.176" y="1" width="343" height="17" fill="black">
+<rect fill="white" x="-122.176" y="1" width="343" height="17"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z"/>
+</mask>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#AAAAAA"/>
+<path d="M155.595 13.0371H-78.4512V7.28223H155.595V13.0371ZM216.174 6.40918H-118.176V5H216.174V6.40918Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#555555" mask="url(#path-3-outside-1_450_7299)"/>
+<path d="M155.595 13.0371V17.0371C157.804 17.0371 159.595 15.2462 159.595 13.0371H155.595ZM-78.4512 13.0371H-82.4512C-82.4512 15.2462 -80.6603 17.0371 -78.4512 17.0371V13.0371ZM-78.4512 7.28223V3.28223C-80.6603 3.28223 -82.4512 5.07309 -82.4512 7.28223H-78.4512ZM155.595 7.28223H159.595C159.595 5.07309 157.804 3.28223 155.595 3.28223V7.28223ZM216.174 6.40918V10.4092C218.383 10.4092 220.174 8.61832 220.174 6.40918H216.174ZM-118.176 6.40918H-122.176C-122.176 8.61832 -120.385 10.4092 -118.176 10.4092V6.40918ZM-118.176 5V1C-120.385 1 -122.176 2.79086 -122.176 5L-118.176 5ZM216.174 5H220.174C220.174 2.79086 218.383 1 216.174 1V5ZM155.595 13.0371V9.03711H-78.4512V13.0371V17.0371H155.595V13.0371ZM-78.4512 13.0371H-74.4512V7.28223H-78.4512H-82.4512V13.0371H-78.4512ZM-78.4512 7.28223V11.2822H155.595V7.28223V3.28223H-78.4512V7.28223ZM155.595 7.28223H151.595V13.0371H155.595H159.595V7.28223H155.595ZM216.174 6.40918V2.40918H-118.176V6.40918V10.4092H216.174V6.40918ZM-118.176 6.40918H-114.176V5H-118.176H-122.176V6.40918H-118.176ZM-118.176 5V9H216.174V5V1H-118.176V5ZM216.174 5H212.174V6.40918H216.174H220.174V5H216.174Z" fill="#713699" fill-opacity="0.1" mask="url(#path-3-outside-1_450_7299)"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#777777"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" fill="#713699" fill-opacity="0.1"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#555555" stroke-width="4"/>
+<rect x="-116.398" y="63.019" width="330.793" height="25.981" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+</g>
+<defs>
+<filter id="filter0_i_450_7299" x="-72.6289" y="13" width="243.246" height="60" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_7299"/>
+</filter>
+<clipPath id="clip0_450_7299">
+<rect width="97" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/오른쪽.svg
new file mode 100644
index 0000000..142a5a6
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/오른쪽.svg	
@@ -0,0 +1,101 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="33" height="66" viewBox="0 0 33 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1508)">
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="url(#paint0_linear_467_1508)"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" fill="black" fill-opacity="0.5"/>
+<path d="M-38.2793 2.1123H25.0811C28.2886 2.11245 30.8886 4.71238 30.8887 7.91992V33C30.8887 50.0589 17.0599 63.8876 0.000976562 63.8877H-38.2793C-41.4869 63.8877 -44.0869 61.2877 -44.0869 58.0801V7.91992C-44.0869 4.71231 -41.4869 2.11235 -38.2793 2.1123Z" stroke="url(#paint1_linear_467_1508)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1508)">
+<path d="M-44.9453 7.66511C-44.9453 3.94713 -41.9313 0.933105 -38.2133 0.933105H25.0126C28.7306 0.933105 31.7446 3.94712 31.7446 7.66511V32.0673C31.7446 50.2927 16.97 65.0673 -1.25538 65.0673H-38.2133C-41.9313 65.0673 -44.9453 62.0533 -44.9453 58.3353V7.66511Z" fill="#7C6F84" fill-opacity="0.01"/>
+<path d="M-38.2129 1.13135H25.0127C28.6213 1.13139 31.5469 4.05692 31.5469 7.66553V32.0669C31.5469 50.1829 16.8602 64.8696 -1.25586 64.8696H-38.2129C-41.8215 64.8696 -44.747 61.944 -44.7471 58.3354V7.66553C-44.7471 4.0569 -41.8215 1.13135 -38.2129 1.13135Z" stroke="url(#paint2_linear_467_1508)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1508)">
+<path d="M-41.9766 7.39212C-41.9766 5.64248 -40.5582 4.22412 -38.8086 4.22412H25.6074C27.3571 4.22412 28.7754 5.64248 28.7754 7.39212V33.0001C28.7754 48.8927 15.892 61.7761 -0.000556946 61.7761H-38.8086C-40.5582 61.7761 -41.9766 60.3578 -41.9766 58.6081V7.39212Z" fill="#7C6F84" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<path d="M-38.8086 4.48779H25.6074C27.2112 4.48779 28.5117 5.78827 28.5117 7.39209V33.0005C28.5115 48.7471 15.7456 61.5122 -0.000976562 61.5122H-38.8086C-40.4124 61.5122 -41.7129 60.2117 -41.7129 58.6079V7.39209C-41.7129 5.78828 -40.4124 4.48781 -38.8086 4.48779Z" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1508)">
+<path d="M-38.6631 5.86963H25.4658C26.3406 5.86963 27.0498 6.57879 27.0498 7.45361V32.939C27.0497 47.9565 14.8759 60.1303 -0.141602 60.1304H-38.6631C-39.5379 60.1304 -40.2471 59.4212 -40.2471 58.5464V7.45361C-40.2471 6.57879 -39.5379 5.86963 -38.6631 5.86963Z" stroke="#7C6F84" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="#7C6F84" fill-opacity="0.01"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" fill="url(#paint3_linear_467_1508)"/>
+<path d="M-38.6631 5.60498H25.4658C26.4864 5.60498 27.3145 6.43299 27.3145 7.45361V32.939C27.3143 48.1023 15.0217 60.3949 -0.141602 60.395H-38.6631C-39.6837 60.395 -40.5117 59.567 -40.5117 58.5464V7.45361C-40.5117 6.43299 -39.6837 5.60498 -38.6631 5.60498Z" stroke="url(#paint4_linear_467_1508)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1508)">
+<path d="M26.4234 9.36467C26.6384 9.40552 26.9411 6.58316 25.3409 6.60031C23.7406 6.61747 25.4296 7.21277 25.9076 7.9896C26.3855 8.76643 26.2084 9.32382 26.4234 9.36467Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1508" x="-45.6053" y="-0.122895" width="78.0095" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1508"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1508" result="effect2_innerShadow_467_1508"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1508"/>
+</filter>
+<filter id="filter1_ddi_467_1508" x="-43.0326" y="2.90412" width="72.864" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1508"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1508" result="effect2_dropShadow_467_1508"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1508" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1508"/>
+</filter>
+<filter id="filter2_f_467_1508" x="-42.0954" y="4.02131" width="70.9935" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1508"/>
+</filter>
+<filter id="filter3_f_467_1508" x="24.402" y="6.3361" width="2.45964" height="3.29314" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.132" result="effect1_foregroundBlur_467_1508"/>
+</filter>
+<linearGradient id="paint0_linear_467_1508" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0E5F8"/>
+<stop offset="0.5" stop-color="#A19AA6"/>
+<stop offset="1" stop-color="#413C45"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1508" x1="-6.59922" y1="0" x2="-6.59922" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ACABAD"/>
+<stop offset="0.2" stop-color="#C6BFCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1508" x1="-6.60035" y1="0.933105" x2="-6.60035" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#9D87AB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1508" x1="-6.59861" y1="5.34131" x2="-6.59861" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFBFF"/>
+<stop offset="0.201923" stop-color="#AEA8B2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1508" x1="-31.6315" y1="5.34131" x2="-31.6315" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#593E6B" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1508">
+<rect width="33" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/왼쪽.svg
new file mode 100644
index 0000000..5dbb3bf
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/왼쪽.svg	
@@ -0,0 +1,236 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="79" height="66" viewBox="0 0 79 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1481)">
+<mask id="mask0_467_1481" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="66">
+<path d="M47.882 0H79.2039V66H0.00390625L0.00393937 46.5884L47.882 0Z" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_467_1481)">
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1481)"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-66.929" y="2.112" width="171.793" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1481)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1481)">
+<rect x="-66.252" y="0.933105" width="170.438" height="64.1342" rx="6.732" fill="#7C6F84" fill-opacity="0.01"/>
+<rect x="-66.054" y="1.13111" width="170.042" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1481)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1481)">
+<rect x="-59.6523" y="4.22412" width="157.242" height="57.552" rx="3.168" fill="#7C6F84" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-59.3883" y="4.48812" width="156.714" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1481)">
+<path d="M-54.876 5.86963H92.8115C93.6861 5.86987 94.3955 6.57894 94.3955 7.45361V58.5464C94.3955 59.4211 93.6861 60.1301 92.8115 60.1304H-54.876C-55.7508 60.1304 -56.46 59.4212 -56.46 58.5464V7.45361C-56.46 6.57879 -55.7508 5.86963 -54.876 5.86963Z" stroke="#7C6F84" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="#7C6F84" fill-opacity="0.01"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1481)"/>
+<rect x="-56.7243" y="5.60531" width="151.383" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1481)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+<g filter="url(#filter3_f_467_1481)">
+<path d="M2.64258 32.7358C2.64258 14.5104 17.4172 -0.26416 35.6426 -0.26416H66.5306C67.697 -0.26416 68.6426 0.681415 68.6426 1.84784V32.7358C68.6426 50.9612 53.868 65.7358 35.6426 65.7358H4.75458C3.58815 65.7358 2.64258 64.7903 2.64258 63.6238V32.7358Z" fill="black"/>
+</g>
+</g>
+<mask id="path-10-inside-1_467_1481" fill="white">
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z"/>
+</mask>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" fill="url(#paint5_linear_467_1481)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint6_linear_467_1481)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1481)"/>
+<path d="M0.00390625 33C0.00390625 14.7746 14.7785 0 33.0039 0H63.8919C65.0583 0 66.0039 0.945575 66.0039 2.112V33C66.0039 51.2254 51.2293 66 33.0039 66H2.11591C0.949481 66 0.00390625 65.0544 0.00390625 63.888V33Z" stroke="url(#paint7_linear_467_1481)" stroke-width="8.448" mask="url(#path-10-inside-1_467_1481)"/>
+<g filter="url(#filter4_iif_467_1481)">
+<path d="M0.93392 33.8745C0.967179 15.6491 15.7687 0.901473 33.9941 0.934732L64.0729 0.989621C64.6561 0.990686 65.128 1.46433 65.1269 2.04755L65.0721 32.1257C65.0388 50.351 50.2373 65.0987 32.0119 65.0654L1.9331 65.0105C1.34989 65.0095 0.877968 64.5358 0.879032 63.9526L0.93392 33.8745Z" fill="#7C6F84" fill-opacity="0.01"/>
+<path d="M33.9937 1.13297L64.0728 1.18786C64.5464 1.18887 64.9293 1.57323 64.9286 2.04685L64.8737 32.1249C64.8407 50.2409 50.1282 64.9008 32.0122 64.8677L1.93313 64.8129C1.45942 64.8118 1.07641 64.4266 1.07727 63.9529L1.13216 33.8748C1.16523 15.7588 15.8777 1.09992 33.9937 1.13297Z" stroke="url(#paint8_linear_467_1481)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter5_dd_467_1481)">
+<mask id="path-13-inside-2_467_1481" fill="white">
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z"/>
+</mask>
+<path d="M4.22852 33.0001C4.22852 17.1076 17.112 4.22412 33.0045 4.22412H61.7805V33.0001C61.7805 48.8927 48.8971 61.7761 33.0045 61.7761H4.49252C4.34671 61.7761 4.22852 61.6579 4.22852 61.5121V33.0001Z" stroke="black" stroke-width="1.056" shape-rendering="crispEdges" mask="url(#path-13-inside-2_467_1481)"/>
+</g>
+<g filter="url(#filter6_f_467_1481)">
+<mask id="path-14-inside-3_467_1481" fill="white">
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z"/>
+</mask>
+<path d="M5.3457 33.0613C5.3457 17.752 17.7564 5.34131 33.0657 5.34131H60.3989C60.5447 5.34131 60.6629 5.45951 60.6629 5.60531V32.9387C60.6629 48.248 48.2523 60.6587 32.9429 60.6587H5.6097C5.4639 60.6587 5.3457 60.5405 5.3457 60.3947V33.0613Z" stroke="#7C6F84" style="mix-blend-mode:screen" stroke-width="2.112" mask="url(#path-14-inside-3_467_1481)"/>
+</g>
+<mask id="path-15-inside-4_467_1481" fill="white">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z"/>
+</mask>
+<g filter="url(#filter7_i_467_1481)">
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" fill="#7C6F84" fill-opacity="0.01"/>
+</g>
+<path d="M5.73828 33.4544C5.73828 18.1451 18.149 5.73438 33.4583 5.73438H60.0058C60.1516 5.73438 60.2698 5.85257 60.2698 5.99837V32.546C60.2698 47.8553 47.8591 60.266 32.5498 60.266H6.00228C5.85648 60.266 5.73828 60.1478 5.73828 60.002V33.4544Z" stroke="url(#paint9_linear_467_1481)" style="mix-blend-mode:screen" stroke-width="1.056" mask="url(#path-15-inside-4_467_1481)"/>
+<g filter="url(#filter8_dii_467_1481)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.0176 13.3682C35.3983 13.3682 36.5176 14.4875 36.5176 15.8682V21.005L46.103 30.5903H52.0741C53.4547 30.5903 54.5741 31.7096 54.5741 33.0903C54.5741 34.471 53.4547 35.5903 52.0741 35.5903H45.3842L36.5176 44.4569V49.8682C36.5176 51.2489 35.3983 52.3681 34.0176 52.3681C32.637 52.3681 31.5177 51.2489 31.5176 49.8682V44.7304L22.3775 35.5903H15.9629C14.5822 35.5903 13.4629 34.471 13.4629 33.0903C13.4629 31.7096 14.5822 30.5903 15.9629 30.5903H21.6587L31.5176 20.7314V15.8682C31.5176 14.4875 32.6369 13.3682 34.0176 13.3682ZM31.5176 41.9018V35.5903H25.2061L31.5176 41.9018ZM36.5176 41.6283L42.5556 35.5903H36.5176V41.6283ZM24.4871 30.5903H31.5176V23.5597L24.4871 30.5903ZM36.5176 30.5903H43.2747L36.5176 23.8333V30.5903Z" fill="url(#paint10_linear_467_1481)"/>
+<path d="M25.1123 35.6836L31.6494 42.2207V35.458H24.8877L25.1123 35.6836ZM36.3857 41.9473L42.6494 35.6836L42.874 35.458H36.3857V41.9473ZM24.168 30.7227H31.6494V23.2412L24.168 30.7227ZM36.3857 30.7227H43.5938L36.3857 23.5146V30.7227ZM31.6494 44.6758L31.6113 44.6367L22.4707 35.4971L22.4326 35.458H15.9629C14.6551 35.458 13.5947 34.3976 13.5947 33.0898C13.595 31.7823 14.6552 30.7227 15.9629 30.7227H21.7139L21.752 30.6836L31.6113 20.8252L31.6494 20.7861V15.8682C31.6494 14.5604 32.7098 13.5 34.0176 13.5C35.3254 13.5 36.3857 14.5604 36.3857 15.8682V21.0596L36.4238 21.0986L46.0098 30.6836L46.0479 30.7227H52.0742C53.3818 30.7228 54.4421 31.7823 54.4424 33.0898C54.4424 34.3976 53.3819 35.4579 52.0742 35.458H45.3291L45.291 35.4971L36.4238 44.3633L36.3857 44.4023V49.8682C36.3857 51.1759 35.3253 52.2363 34.0176 52.2363C32.7098 52.2363 31.6495 51.1759 31.6494 49.8682V44.6758Z" stroke="black" stroke-opacity="0.1" stroke-width="0.264"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1481" x="-66.912" y="-0.122895" width="171.757" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1481"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1481" result="effect2_innerShadow_467_1481"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1481"/>
+</filter>
+<filter id="filter1_ddi_467_1481" x="-60.7083" y="2.90412" width="159.354" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1481"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1481" result="effect2_dropShadow_467_1481"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1481" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1481"/>
+</filter>
+<filter id="filter2_f_467_1481" x="-58.3083" y="4.02131" width="154.552" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1481"/>
+</filter>
+<filter id="filter3_f_467_1481" x="-2.63742" y="-5.54416" width="76.56" height="76.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2.64" result="effect1_foregroundBlur_467_1481"/>
+</filter>
+<filter id="filter4_iif_467_1481" x="0.218906" y="-0.12143" width="65.568" height="65.8469" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1481"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1481" result="effect2_innerShadow_467_1481"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1481"/>
+</filter>
+<filter id="filter5_dd_467_1481" x="3.17252" y="2.90412" width="59.6647" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1481"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1481" result="effect2_dropShadow_467_1481"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1481" result="shape"/>
+</filter>
+<filter id="filter6_f_467_1481" x="4.0257" y="4.02131" width="57.9564" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1481"/>
+</filter>
+<filter id="filter7_i_467_1481" x="5.21028" y="5.73438" width="55.0592" height="55.5877" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.528" dy="1.452"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1481"/>
+</filter>
+<filter id="filter8_dii_467_1481" x="11.6149" y="12.3122" width="45.3353" height="43.224" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.264" dy="1.056"/>
+<feGaussianBlur stdDeviation="1.056"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1481"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_467_1481" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-0.264" dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_467_1481"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="0.528" dy="0.528"/>
+<feGaussianBlur stdDeviation="0.132"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_467_1481" result="effect3_innerShadow_467_1481"/>
+</filter>
+<linearGradient id="paint0_linear_467_1481" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0E5F8"/>
+<stop offset="0.5" stop-color="#A19AA6"/>
+<stop offset="1" stop-color="#413C45"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1481" x1="18.9674" y1="0" x2="18.9674" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ACABAD"/>
+<stop offset="0.2" stop-color="#C6BFCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1481" x1="18.9672" y1="0.933105" x2="18.9672" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#9D87AB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1481" x1="18.9674" y1="5.34131" x2="18.9674" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFBFF"/>
+<stop offset="0.201923" stop-color="#AEA8B2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1481" x1="-36.6666" y1="5.34131" x2="-36.6666" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#593E6B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_467_1481" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E5E5E5"/>
+<stop offset="0.458959" stop-color="#A199A6"/>
+<stop offset="1" stop-color="#4C494D"/>
+</linearGradient>
+<linearGradient id="paint6_linear_467_1481" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9D97A1"/>
+<stop offset="0.5" stop-color="#6A646E"/>
+<stop offset="1" stop-color="#2C2730"/>
+</linearGradient>
+<linearGradient id="paint7_linear_467_1481" x1="33.0039" y1="0" x2="33.0039" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ACABAD"/>
+<stop offset="0.2" stop-color="#C6BFCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_467_1481" x1="33.0615" y1="0.93303" x2="32.9445" y2="65.0671" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#9D87AB"/>
+</linearGradient>
+<linearGradient id="paint9_linear_467_1481" x1="6.81248" y1="6.65267" x2="18.6608" y2="57.589" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#593E6B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_467_1481" x1="23.1374" y1="19.1191" x2="49.1137" y2="45.0954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EEEEEE"/>
+<stop offset="0.438095" stop-color="white"/>
+<stop offset="1" stop-color="#CCCCCC"/>
+</linearGradient>
+<clipPath id="clip0_467_1481">
+<rect width="79" height="66" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/중앙.svg
new file mode 100644
index 0000000..3888735
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/실사화/중앙.svg	
@@ -0,0 +1,99 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="90" height="66" viewBox="0 0 90 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_467_1500)">
+<g clip-path="url(#clip1_467_1500)">
+<rect width="456.588" height="66" transform="translate(-183.215)" fill="white"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="url(#paint0_linear_467_1500)"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" fill="black" fill-opacity="0.5"/>
+<rect x="-257.495" y="2.112" width="605.153" height="61.776" rx="5.808" stroke="url(#paint1_linear_467_1500)" stroke-width="4.224"/>
+<g filter="url(#filter0_iif_467_1500)">
+<rect x="-249.951" y="0.933105" width="590.064" height="64.1342" rx="6.732" fill="#7C6F84" fill-opacity="0.01"/>
+<rect x="-249.753" y="1.13111" width="589.668" height="63.7382" rx="6.534" stroke="url(#paint2_linear_467_1500)" stroke-width="0.396"/>
+</g>
+<g filter="url(#filter1_ddi_467_1500)">
+<rect x="-227.107" y="4.22412" width="544.377" height="57.552" rx="3.168" fill="#7C6F84" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<rect x="-226.843" y="4.48812" width="543.849" height="57.024" rx="2.904" stroke="black" stroke-width="0.528" shape-rendering="crispEdges"/>
+</g>
+<g opacity="0.5" filter="url(#filter2_f_467_1500)">
+<path d="M-215.769 5.86963H305.93C306.805 5.86963 307.514 6.57879 307.514 7.45361V58.5464C307.514 59.4212 306.805 60.1304 305.93 60.1304H-215.769C-216.643 60.1304 -217.353 59.4212 -217.353 58.5464V7.45361C-217.353 6.57879 -216.643 5.86963 -215.769 5.86963Z" stroke="#7C6F84" style="mix-blend-mode:screen" stroke-width="1.056"/>
+</g>
+<g opacity="0.5">
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="#7C6F84" fill-opacity="0.01"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" fill="url(#paint3_linear_467_1500)"/>
+<rect x="-217.617" y="5.60531" width="525.395" height="54.7894" rx="1.848" stroke="url(#paint4_linear_467_1500)" style="mix-blend-mode:screen" stroke-width="0.528"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_iif_467_1500" x="-250.611" y="-0.122895" width="591.384" height="65.8503" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.924"/>
+<feGaussianBlur stdDeviation="0.264"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_467_1500"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-1.056"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_467_1500" result="effect2_innerShadow_467_1500"/>
+<feGaussianBlur stdDeviation="0.33" result="effect3_foregroundBlur_467_1500"/>
+</filter>
+<filter id="filter1_ddi_467_1500" x="-228.163" y="2.90412" width="546.489" height="60.4558" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.528"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_467_1500"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-0.264"/>
+<feGaussianBlur stdDeviation="0.528"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_467_1500" result="effect2_dropShadow_467_1500"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_467_1500" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.65"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow_467_1500"/>
+</filter>
+<filter id="filter2_f_467_1500" x="-219.201" y="4.02131" width="528.562" height="57.9574" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.66" result="effect1_foregroundBlur_467_1500"/>
+</filter>
+<linearGradient id="paint0_linear_467_1500" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0E5F8"/>
+<stop offset="0.5" stop-color="#A19AA6"/>
+<stop offset="1" stop-color="#413C45"/>
+</linearGradient>
+<linearGradient id="paint1_linear_467_1500" x1="45.0811" y1="0" x2="45.0811" y2="66" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ACABAD"/>
+<stop offset="0.2" stop-color="#C6BFCC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_467_1500" x1="45.0809" y1="0.933105" x2="45.0809" y2="65.0673" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.192308" stop-color="#9D87AB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_467_1500" x1="45.0806" y1="5.34131" x2="45.0806" y2="60.6587" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEFBFF"/>
+<stop offset="0.201923" stop-color="#AEA8B2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_467_1500" x1="-147.526" y1="5.34131" x2="-147.526" y2="59.271" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#593E6B" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_467_1500">
+<rect width="90" height="66" fill="white"/>
+</clipPath>
+<clipPath id="clip1_467_1500">
+<rect width="456.588" height="66" fill="white" transform="translate(-183.215)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/위치도/오른쪽.svg
new file mode 100644
index 0000000..2b62d58
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/위치도/오른쪽.svg	
@@ -0,0 +1,16 @@
+<svg width="126" height="66" viewBox="0 0 126 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1933" fill="white">
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z"/>
+</mask>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#444444"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="url(#paint0_linear_468_1933)" fill-opacity="0.3"/>
+<path d="M0 0H126V36C126 52.5685 112.569 66 96 66H0V0Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#555555" mask="url(#path-1-inside-1_468_1933)"/>
+<path d="M0 -4H130L122 4H0V-4ZM130 36C130 54.7777 114.778 70 96 70H0V62H96C110.359 62 122 50.3594 122 36H130ZM122 36M0 66V0V66M130 -4V36C130 54.7777 114.778 70 96 70V62C110.359 62 122 50.3594 122 36V4L130 -4Z" fill="#713699" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1933)"/>
+<defs>
+<linearGradient id="paint0_linear_468_1933" x1="0" y1="33" x2="126" y2="33" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="0.1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/위치도/왼쪽.svg
new file mode 100644
index 0000000..db0205e
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/교차로/위치도/왼쪽.svg	
@@ -0,0 +1,15 @@
+<svg width="66" height="66" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_468_1930" fill="white">
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z"/>
+</mask>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#444444"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="black" fill-opacity="0.3"/>
+<path d="M0 33C0 14.7746 14.7746 0 33 0H66V66H0V33Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#555555" mask="url(#path-1-inside-1_468_1930)"/>
+<path d="M0 33C0 12.5655 16.5655 -4 37 -4H66V4H33C14.7746 4 0 16.9837 0 33ZM66 70H0V62H66V70ZM66 62M0 66V0V66M0 66M66 0V66V0" fill="#713699" fill-opacity="0.1" mask="url(#path-1-inside-1_468_1930)"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#AAAAAA"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#555555" stroke-width="4"/>
+<path d="M33 2H64V33C64 50.1208 50.1208 64 33 64H2V33C2 15.8792 15.8792 2 33 2Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M33 13.5C34.3807 13.5 35.5 14.6193 35.5 16V21.1367L45.0859 30.7227H51.0566C52.4373 30.7228 53.5566 31.842 53.5566 33.2227C53.5564 34.6031 52.4371 35.7225 51.0566 35.7227H44.3652L35.5 44.5879V50C35.5 51.3807 34.3807 52.5 33 52.5C31.6193 52.5 30.5 51.3807 30.5 50V44.8613L21.3613 35.7227H14.9453C13.5647 35.7227 12.4455 34.6032 12.4453 33.2227C12.4453 31.8419 13.5646 30.7227 14.9453 30.7227H20.6406L30.5 20.8633V16C30.5 14.6193 31.6193 13.5 33 13.5ZM30.5 42.0332V35.7227H24.1895L30.5 42.0332ZM35.5 35.7227V41.7598L41.5371 35.7227H35.5ZM35.5 30.7227H42.2578L35.5 23.9648V30.7227ZM23.4688 30.7227H30.5V23.6914L23.4688 30.7227Z" fill="white"/>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/오른쪽.svg
new file mode 100644
index 0000000..066b3c8
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/오른쪽.svg	
@@ -0,0 +1,144 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9477)">
+<g filter="url(#filter0_i_450_9477)">
+<path d="M-188 40C-188 17.9086 -170.091 0 -148 0H8C30.0914 0 48 17.9086 48 40V86C48 90.9706 43.9706 95 39 95H-178C-183.523 95 -188 90.5229 -188 85V40Z" fill="#B2ABB0"/>
+</g>
+<path d="M-148 1.5H8C29.263 1.5 46.5 18.737 46.5 40V86C46.5 90.1421 43.1421 93.5 39 93.5H-178C-182.694 93.5 -186.5 89.6944 -186.5 85V40C-186.5 18.737 -169.263 1.5 -148 1.5Z" stroke="#1A1302" stroke-width="3"/>
+<g filter="url(#filter1_i_450_9477)">
+<path d="M-183 42C-183 21.5655 -166.435 5 -146 5H6C26.4345 5 43 21.5655 43 42V90C43 92.2091 41.2091 94 39 94H-179C-181.209 94 -183 92.2091 -183 90V42Z" fill="#A49EA8"/>
+</g>
+<path d="M6 4.5C26.7107 4.5 43.5 21.2893 43.5 42V90C43.5 92.4853 41.4853 94.5 39 94.5H-179C-181.485 94.5 -183.5 92.4853 -183.5 90V42C-183.5 21.2893 -166.711 4.5 -146 4.5H6Z" stroke="#58525C" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_9477)" style="mix-blend-mode:plus-lighter">
+<path d="M43.375 87C43.3733 87.0986 43.3335 87.1931 43.2634 87.2628C43.1932 87.3325 43.0986 87.3717 43 87.3717C42.9014 87.3717 42.8068 87.3325 42.7366 87.2628C42.6665 87.1931 42.6267 87.0986 42.625 87C42.5833 84.637 42.5437 82.2739 42.5062 79.9109C42.3228 68.348 42.1891 56.7851 42.1054 45.2222L42.1088 45.2995C41.2471 35.8075 38.4883 26.1616 31.9222 19.2957C26.3411 13.3418 18.5522 9.86908 10.5659 7.89575L10.7826 7.9216C-2.11522 7.84105 -15.013 7.69843 -27.9109 7.49375C-30.2739 7.45625 -32.637 7.41667 -35 7.375C-35.0986 7.37325 -35.1931 7.33355 -35.2628 7.26338C-35.3326 7.19322 -35.3717 7.09857 -35.3717 7C-35.3717 6.90143 -35.3326 6.80678 -35.2628 6.73662C-35.1931 6.66645 -35.0986 6.62675 -35 6.625C-32.637 6.58333 -30.2739 6.54375 -27.9109 6.50625C-15.013 6.30157 -2.11522 6.15895 10.7826 6.0784L10.9993 6.10425C19.2089 8.02431 27.4266 11.5808 33.3771 17.9233C40.3805 25.2535 43.1549 35.4506 43.8912 45.1449L43.8946 45.2222C43.8109 56.7851 43.6772 68.348 43.4938 79.9109C43.4563 82.2739 43.4167 84.637 43.375 87Z" fill="url(#paint0_linear_450_9477)"/>
+</g>
+<mask id="path-6-inside-1_450_9477" fill="white">
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z"/>
+</mask>
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z" fill="#413E43"/>
+<path d="M-173 39C-173 25.1929 -161.807 14 -148 14H9C22.8071 14 34 25.1929 34 39H30C30 27.402 20.598 18 9 18H-148C-159.598 18 -169 27.402 -169 39H-173ZM-169 39M32 72H-171H32M-167 72C-170.314 72 -173 69.3137 -173 66V39C-173 25.1929 -161.807 14 -148 14V18C-159.598 18 -169 27.402 -169 39V68C-169 70.2091 -168.105 72 -167 72ZM9 14C22.8071 14 34 25.1929 34 39V66C34 69.3137 31.3137 72 28 72C29.1046 72 30 70.2091 30 68V39C30 27.402 20.598 18 9 18V14Z" fill="black" mask="url(#path-6-inside-1_450_9477)"/>
+<mask id="path-8-inside-2_450_9477" fill="white">
+<path d="M-173 38C-173 24.7452 -162.255 14 -149 14H10C23.2548 14 34 24.7452 34 38V68C34 70.2091 32.2091 72 30 72H-169C-171.209 72 -173 70.2091 -173 68V38Z"/>
+</mask>
+<path d="M-174 38C-174 24.1929 -162.807 13 -149 13H10C23.8071 13 35 24.1929 35 38H33C33 25.2975 22.7025 15 10 15H-149C-161.703 15 -172 25.2975 -172 38H-174ZM-172 38M34 72H-173H34M-169 72C-171.761 72 -174 69.7614 -174 67V38C-174 24.1929 -162.807 13 -149 13V15C-161.703 15 -172 25.2975 -172 38V68C-172 70.2091 -170.657 72 -169 72ZM10 13C23.8071 13 35 24.1929 35 38V67C35 69.7614 32.7614 72 30 72C31.6569 72 33 70.2091 33 68V38C33 25.2975 22.7025 15 10 15V13Z" fill="url(#paint1_linear_450_9477)" mask="url(#path-8-inside-2_450_9477)"/>
+<g filter="url(#filter3_f_450_9477)" style="mix-blend-mode:plus-lighter">
+<path d="M44.875 83C44.8728 83.0984 44.8331 83.1927 44.7629 83.2622C44.6928 83.3318 44.5983 83.3709 44.5 83.3709C44.4017 83.3709 44.3072 83.3318 44.2371 83.2622C44.1669 83.1927 44.1272 83.0984 44.125 83C44.125 83 44.125 83 44.125 83C44.0833 81.119 44.0437 79.2381 44.0062 77.3571C43.7547 64.7381 43.5969 52.1191 43.5328 39.5C43.5141 35.3142 42.6745 31.1433 41.0904 27.272C36.312 15.4179 24.7498 7.07363 12.1573 4.6879L12.2826 4.69922C8.40269 4.63959 4.52277 4.5711 0.642853 4.49375C-1.2381 4.45625 -3.11905 4.41667 -5 4.375C-5.09836 4.37281 -5.19269 4.33305 -5.26224 4.26293C-5.33179 4.19281 -5.37086 4.09834 -5.37086 4C-5.37086 3.90166 -5.33179 3.80719 -5.26224 3.73707C-5.19269 3.66695 -5.09836 3.62719 -5 3.625C-3.11905 3.58333 -1.2381 3.54375 0.642853 3.50625C4.52277 3.4289 8.40269 3.36041 12.2826 3.30078L12.4079 3.3121C25.4545 5.35251 37.872 13.9223 42.9419 26.5158C44.6225 30.6213 45.493 35.064 45.4672 39.5C45.4031 52.1191 45.2453 64.7381 44.9938 77.3571C44.9563 79.2381 44.9167 81.119 44.875 83Z" fill="url(#paint2_linear_450_9477)"/>
+</g>
+<g filter="url(#filter4_f_450_9477)">
+<path d="M42.2842 89.1699C41.7934 90.5104 40.5093 91.4668 39 91.4668H-179C-180.077 91.4668 -181.04 90.9798 -181.683 90.2129L-168.604 70.5742L29.874 69.7627L42.2842 89.1699ZM-145 5.5H5C25.7107 5.5 42.5 22.2893 42.5 43V85.7949L31.5645 68.6934C32.7322 67.8814 33.5 66.5322 33.5 65V39C33.5 25.469 22.531 14.5 9 14.5H-149C-162.531 14.5 -173.5 25.469 -173.5 39V65C-173.5 67.0752 -172.095 68.8207 -170.185 69.3408L-182.5 87.835V43C-182.5 22.2893 -165.711 5.5 -145 5.5Z" stroke="url(#paint3_linear_450_9477)"/>
+</g>
+<g filter="url(#filter5_f_450_9477)">
+<path d="M29.8113 70.8396H10L13.1698 66.6721H29.0189V33.9283C29.0189 27.2605 22 23 17.5 18C24 22 30.3396 29.1656 31 33.9283V69.8084C30.7822 70.565 30.4874 70.762 29.8113 70.8396Z" fill="url(#paint4_linear_450_9477)"/>
+</g>
+<path d="M-182.28 92.7413C-183.047 92.7413 -183.529 91.9133 -183.149 91.2466L-169.537 67.3301H30.5369L44.1493 91.2466C44.5287 91.9133 44.0473 92.7413 43.2802 92.7413H-182.28Z" fill="url(#paint5_linear_450_9477)" stroke="#1A1302" stroke-width="1.2"/>
+<path d="M-179.887 90L-181.5 94.2753L40 95C42.1116 94.5403 42.5 94.5 44 93.5L42.9983 90.2433L-179.887 90Z" fill="#1A1302"/>
+<g opacity="0.7" filter="url(#filter6_f_450_9477)" style="mix-blend-mode:plus-lighter">
+<path d="M-168 67.9077H29L40.5 89.8538H-179.5L-168 67.9077Z" stroke="url(#paint6_linear_450_9477)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter7_f_450_9477)">
+<path d="M7.74023 19.4775C18.8035 20.7164 27.0001 27.932 27.0001 40.1419V63.4999" stroke="url(#paint7_linear_450_9477)" stroke-width="2"/>
+</g>
+<line x1="-169.5" y1="66.5" x2="30.5" y2="66.5" stroke="url(#paint8_linear_450_9477)" stroke-linecap="round"/>
+<line x1="-180" y1="92.5" x2="41" y2="92.5" stroke="url(#paint9_linear_450_9477)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_9477" x="-188" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9477"/>
+</filter>
+<filter id="filter1_i_450_9477" x="-184" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0 0.870588 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9477"/>
+</filter>
+<filter id="filter2_f_450_9477" x="-37.3711" y="4.07861" width="83.2656" height="85.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9477"/>
+</filter>
+<filter id="filter3_f_450_9477" x="-7.37109" y="1.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9477"/>
+</filter>
+<filter id="filter4_f_450_9477" x="-184" y="4" width="228" height="88.9668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9477"/>
+</filter>
+<filter id="filter5_f_450_9477" x="8" y="16" width="25" height="56.8398" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9477"/>
+</filter>
+<filter id="filter6_f_450_9477" x="-182.152" y="65.9077" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9477"/>
+</filter>
+<filter id="filter7_f_450_9477" x="3.92891" y="14.7839" width="27.7711" height="52.4161" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_450_9477"/>
+</filter>
+<linearGradient id="paint0_linear_450_9477" x1="4" y1="6.11111" x2="47.5893" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F0EEEA" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#F0EEEA"/>
+<stop offset="1" stop-color="#F0EEEA" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9477" x1="-69.5" y1="14" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A2AA"/>
+<stop offset="1" stop-color="#FEFDE7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9477" x1="5.49999" y1="3.12222" x2="48.5449" y2="46.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E7E5E0" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#E7E5E0"/>
+<stop offset="1" stop-color="#E7E5E0" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9477" x1="-162" y1="7.0412" x2="43.7725" y2="71.9523" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC"/>
+<stop offset="1" stop-color="#ECEBEC"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9477" x1="31" y1="43.1561" x2="27.0377" y2="43.1561" gradientUnits="userSpaceOnUse">
+<stop stop-color="#38323B"/>
+<stop offset="1" stop-color="#38323B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9477" x1="-184" y1="80.0357" x2="-146.5" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#76707A"/>
+<stop offset="1" stop-color="#76707A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9477" x1="-69.5" y1="67.9077" x2="-69.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC"/>
+<stop offset="1" stop-color="#ECEBEC" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9477" x1="6.56635" y1="46.5123" x2="26.1692" y2="28.1089" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC" stop-opacity="0"/>
+<stop offset="1" stop-color="#ECEBEC"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_9477" x1="-170" y1="67.5" x2="31" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1402"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_9477" x1="-180.5" y1="93.5" x2="41.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A1302" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1302"/>
+<stop offset="0.9" stop-color="#1A1302"/>
+<stop offset="1" stop-color="#1A1302" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9477">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/왼쪽.svg
new file mode 100644
index 0000000..a051575
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/왼쪽.svg	
@@ -0,0 +1,139 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9427)">
+<g clip-path="url(#clip1_450_9427)">
+<g filter="url(#filter0_i_450_9427)">
+<path d="M0 40C0 17.9086 17.9086 0 40 0H196C218.091 0 236 17.9086 236 40V86C236 90.9706 231.971 95 227 95H10C4.47715 95 0 90.5229 0 85V40Z" fill="#B2ABB0"/>
+</g>
+<path d="M40 1.5H196C217.263 1.5 234.5 18.737 234.5 40V86C234.5 90.1421 231.142 93.5 227 93.5H10C5.30558 93.5 1.5 89.6944 1.5 85V40C1.5 18.737 18.737 1.5 40 1.5Z" stroke="#1A1302" stroke-width="3"/>
+<g filter="url(#filter1_i_450_9427)">
+<path d="M5 42C5 21.5655 21.5655 5 42 5H194C214.435 5 231 21.5655 231 42V90C231 92.2091 229.209 94 227 94H9C6.79086 94 5 92.2091 5 90V42Z" fill="#A49EA8"/>
+</g>
+<path d="M194 4.5C214.711 4.5 231.5 21.2893 231.5 42V90C231.5 92.4853 229.485 94.5 227 94.5H9C6.51472 94.5 4.5 92.4853 4.5 90V42C4.5 21.2893 21.2893 4.5 42 4.5H194Z" stroke="#58525C" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_9427)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 87C6.62675 87.0986 6.66645 87.1931 6.73662 87.2628C6.80678 87.3325 6.90143 87.3717 7 87.3717C7.09857 87.3717 7.19322 87.3325 7.26338 87.2628C7.33355 87.1931 7.37325 87.0986 7.375 87C7.41667 84.637 7.45625 82.2739 7.49375 79.9109C7.67725 68.348 7.81086 56.7851 7.89459 45.2222L7.89125 45.2995C8.7529 35.8075 11.5117 26.1616 18.0778 19.2957C23.6589 13.3418 31.4478 9.86908 39.4341 7.89575L39.2174 7.9216C52.1152 7.84105 65.013 7.69843 77.9109 7.49375C80.2739 7.45625 82.637 7.41667 85 7.375C85.0986 7.37325 85.1931 7.33355 85.2628 7.26338C85.3326 7.19322 85.3717 7.09857 85.3717 7C85.3717 6.90143 85.3326 6.80678 85.2628 6.73662C85.1931 6.66645 85.0986 6.62675 85 6.625C82.637 6.58333 80.2739 6.54375 77.9109 6.50625C65.013 6.30157 52.1152 6.15895 39.2174 6.0784L39.0007 6.10425C30.7911 8.02431 22.5734 11.5808 16.6229 17.9233C9.61946 25.2535 6.84506 35.4506 6.10875 45.1449L6.10541 45.2222C6.18914 56.7851 6.32275 68.348 6.50625 79.9109C6.54375 82.2739 6.58333 84.637 6.625 87Z" fill="url(#paint0_linear_450_9427)"/>
+</g>
+<mask id="path-6-inside-1_450_9427" fill="white">
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z"/>
+</mask>
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z" fill="#413E43"/>
+<path d="M15 39C15 25.1929 26.1929 14 40 14H197C210.807 14 222 25.1929 222 39H218C218 27.402 208.598 18 197 18H40C28.402 18 19 27.402 19 39H15ZM19 39M220 72H17H220M21 72C17.6863 72 15 69.3137 15 66V39C15 25.1929 26.1929 14 40 14V18C28.402 18 19 27.402 19 39V68C19 70.2091 19.8954 72 21 72ZM197 14C210.807 14 222 25.1929 222 39V66C222 69.3137 219.314 72 216 72C217.105 72 218 70.2091 218 68V39C218 27.402 208.598 18 197 18V14Z" fill="black" mask="url(#path-6-inside-1_450_9427)"/>
+<mask id="path-8-inside-2_450_9427" fill="white">
+<path d="M15 38C15 24.7452 25.7452 14 39 14H198C211.255 14 222 24.7452 222 38V68C222 70.2091 220.209 72 218 72H19C16.7909 72 15 70.2091 15 68V38Z"/>
+</mask>
+<path d="M14 38C14 24.1929 25.1929 13 39 13H198C211.807 13 223 24.1929 223 38H221C221 25.2975 210.703 15 198 15H39C26.2975 15 16 25.2975 16 38H14ZM16 38M222 72H15H222M19 72C16.2386 72 14 69.7614 14 67V38C14 24.1929 25.1929 13 39 13V15C26.2975 15 16 25.2975 16 38V68C16 70.2091 17.3431 72 19 72ZM198 13C211.807 13 223 24.1929 223 38V67C223 69.7614 220.761 72 218 72C219.657 72 221 70.2091 221 68V38C221 25.2975 210.703 15 198 15V13Z" fill="url(#paint1_linear_450_9427)" mask="url(#path-8-inside-2_450_9427)"/>
+<g filter="url(#filter3_f_450_9427)">
+<path d="M21.9375 65.5C21.9473 65.6443 22.0078 65.7826 22.1123 65.8846C22.2168 65.9866 22.3558 66.0439 22.5 66.0439C22.6442 66.0439 22.7832 65.9866 22.8877 65.8846C22.9922 65.7826 23.0527 65.6443 23.0625 65.5C23.0625 65.5 23.0625 65.5 23.0625 65.5C23.125 64.5706 23.1844 63.6412 23.2406 62.7118C23.6585 55.8079 23.9039 48.9039 23.9768 42L23.9708 42.1337C24.1156 40.7127 24.2988 39.3046 24.5499 37.9233C25.5527 29.813 31.3226 23.5852 39.4095 21.4043C39.6541 21.3263 39.9028 21.2496 40.1556 21.1744L40 21.1922C40.6667 21.1506 41.3333 21.1073 42 21.0625C42.1443 21.0527 42.2826 20.9922 42.3846 20.8877C42.4866 20.7832 42.5439 20.6442 42.5439 20.5C42.5439 20.3558 42.4866 20.2168 42.3846 20.1123C42.2826 20.0078 42.1443 19.9473 42 19.9375C41.3333 19.8927 40.6667 19.8494 40 19.8078L39.8444 19.8256C39.5753 19.8708 39.3097 19.9183 39.0475 19.9679C30.5538 20.9146 22.4625 28.5392 21.5983 37.3865C21.3268 38.8804 21.1494 40.3766 21.0292 41.8663L21.0232 42C21.0961 48.9039 21.3415 55.8079 21.7594 62.7118C21.8156 63.6412 21.875 64.5706 21.9375 65.5Z" fill="url(#paint2_linear_450_9427)"/>
+</g>
+<g filter="url(#filter4_f_450_9427)" style="mix-blend-mode:plus-lighter">
+<path d="M6.625 86C6.62719 86.0984 6.66695 86.1927 6.73707 86.2622C6.80719 86.3318 6.90166 86.3709 7 86.3709C7.09834 86.3709 7.19281 86.3318 7.26293 86.2622C7.33305 86.1927 7.37281 86.0984 7.375 86C7.375 86 7.375 86 7.375 86C7.41667 84.119 7.45625 82.2381 7.49375 80.3571C7.74533 67.7381 7.90315 55.1191 7.96719 42.5C7.98589 38.3142 8.8255 34.1433 10.4096 30.272C15.188 18.4179 26.7502 10.0736 39.3427 7.6879L39.2174 7.69922C43.0973 7.63959 46.9772 7.5711 50.8571 7.49375C52.7381 7.45625 54.619 7.41667 56.5 7.375C56.5984 7.37281 56.6927 7.33305 56.7622 7.26293C56.8318 7.19281 56.8709 7.09834 56.8709 7C56.8709 6.90166 56.8318 6.80719 56.7622 6.73707C56.6927 6.66695 56.5984 6.62719 56.5 6.625C54.619 6.58333 52.7381 6.54375 50.8571 6.50625C46.9772 6.4289 43.0973 6.36041 39.2174 6.30078L39.0921 6.3121C26.0455 8.35251 13.628 16.9223 8.55807 29.5158C6.87747 33.6213 6.00697 38.064 6.03281 42.5C6.09685 55.1191 6.25467 67.7381 6.50625 80.3571C6.54375 82.2381 6.58333 84.119 6.625 86Z" fill="url(#paint3_linear_450_9427)"/>
+</g>
+<g filter="url(#filter5_f_450_9427)">
+<path d="M230.835 89.1035C230.345 90.759 228.814 91.9668 227 91.9668V90.9668C228.207 90.9668 229.247 90.2522 229.723 89.2217L217.601 70.2637L19.6641 71.0732L6.9541 90.1592C7.49076 90.6606 8.20925 90.9668 9 90.9668V91.9668C7.63232 91.9668 6.42544 91.2805 5.7041 90.2334L19.1279 70.0762L218.147 69.2617L230.835 89.1035ZM227 90.9668V91.9668H9V90.9668H227ZM230 43C230 22.5655 213.435 6 193 6H43C22.5655 6 6 22.5655 6 43V86.1826L17.042 69.6016C15.2538 68.8397 14 67.0665 14 65V39C14 25.1929 25.1929 14 39 14V15C25.7452 15 15 25.7452 15 39V65C15 67.2091 16.7909 69 19 69H37.9326L18.5918 69.0791L5.19336 89.1982C5.06804 88.8104 5 88.3963 5 87.9668V43C5 22.0132 22.0132 5 43 5H193C213.987 5 231 22.0132 231 43V87.5049L218.87 68.5352C220.137 67.8638 221 66.5333 221 65V39C221 25.7452 210.255 15 197 15V14C210.807 14 222 25.1929 222 39V65C222 66.5292 221.311 67.8938 220.232 68.8096L230 84.083V43ZM197 14V15H39V14H197Z" fill="url(#paint4_linear_450_9427)"/>
+</g>
+<path d="M5.71979 92.7413C4.95273 92.7413 4.47127 91.9133 4.8507 91.2466L18.4632 67.3301H218.537L232.149 91.2466C232.529 91.9133 232.047 92.7413 231.28 92.7413H5.71979Z" fill="url(#paint5_linear_450_9427)" stroke="#1A1302" stroke-width="1.2"/>
+<path d="M7.22949 92.3823L5.24609 91.7212L14.833 75.5229L7.22949 92.3823Z" fill="#1A1302" stroke="#1A1302"/>
+<path d="M8.11303 90L6.5 94.2753L228 95C230.112 94.5403 230.5 94.5 232 93.5L230.998 90.2433L8.11303 90Z" fill="#1A1302"/>
+<g opacity="0.7" filter="url(#filter6_f_450_9427)" style="mix-blend-mode:plus-lighter">
+<path d="M20 67.9077H217L228.5 89.8538H8.5L20 67.9077Z" stroke="url(#paint6_linear_450_9427)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line x1="18.5" y1="66.5" x2="218.5" y2="66.5" stroke="url(#paint7_linear_450_9427)" stroke-linecap="round"/>
+<line x1="8" y1="92.5" x2="229" y2="92.5" stroke="url(#paint8_linear_450_9427)" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_9427" x="0" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9427"/>
+</filter>
+<filter id="filter1_i_450_9427" x="4" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0 0.870588 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9427"/>
+</filter>
+<filter id="filter2_f_450_9427" x="4.10547" y="4.07861" width="83.2656" height="85.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9427"/>
+</filter>
+<filter id="filter3_f_450_9427" x="19.0234" y="17.8076" width="25.5195" height="50.2363" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9427"/>
+</filter>
+<filter id="filter4_f_450_9427" x="4.0332" y="4.30078" width="54.8379" height="84.0703" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9427"/>
+</filter>
+<filter id="filter5_f_450_9427" x="4" y="4" width="228" height="88.9668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9427"/>
+</filter>
+<filter id="filter6_f_450_9427" x="5.84766" y="65.9077" width="225.305" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9427"/>
+</filter>
+<linearGradient id="paint0_linear_450_9427" x1="46" y1="6.11111" x2="2.41074" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EBE9E2" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#EBE9E2"/>
+<stop offset="1" stop-color="#EBE9E2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9427" x1="118.5" y1="14" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A2AA"/>
+<stop offset="1" stop-color="#FEFDE7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9427" x1="45.5" y1="20" x2="21" y2="45.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#ECEBEC"/>
+<stop offset="1" stop-color="#ECEBEC" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9427" x1="46" y1="6.12222" x2="2.95507" y2="49.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#757277" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#757277"/>
+<stop offset="1" stop-color="#757277" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9427" x1="26" y1="7.0412" x2="231.772" y2="71.9523" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC"/>
+<stop offset="1" stop-color="#ECEBEC"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9427" x1="4" y1="80.0357" x2="41.5" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#76707A"/>
+<stop offset="1" stop-color="#76707A"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9427" x1="118.5" y1="67.9077" x2="118.5" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC"/>
+<stop offset="1" stop-color="#ECEBEC" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9427" x1="18" y1="67.5" x2="219" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1402"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_9427" x1="7.5" y1="93.5" x2="229.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A1302" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1302"/>
+<stop offset="0.9" stop-color="#1A1302"/>
+<stop offset="1" stop-color="#1A1302" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9427">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_9427">
+<rect width="236" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/중앙.svg
new file mode 100644
index 0000000..6f1c68b
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/실사화/중앙.svg	
@@ -0,0 +1,125 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_9452)">
+<g clip-path="url(#clip1_450_9452)">
+<rect width="606" height="95" transform="translate(-261)" fill="white"/>
+<g filter="url(#filter0_i_450_9452)">
+<path d="M-462.824 40C-462.824 17.9086 -444.916 0 -422.824 0H807.602C829.693 0 847.602 17.9086 847.602 40V86C847.602 90.9706 843.572 95 838.602 95H-452.824C-458.347 95 -462.824 90.5229 -462.824 85V40Z" fill="#B2ABB0"/>
+</g>
+<path d="M-422.824 1.5H807.602C828.865 1.5 846.102 18.737 846.102 40V86C846.102 90.1421 842.744 93.5 838.602 93.5H-452.824C-457.519 93.5 -461.324 89.6944 -461.324 85V40C-461.324 18.737 -444.087 1.5 -422.824 1.5Z" stroke="#1A1302" stroke-width="3"/>
+<g filter="url(#filter1_i_450_9452)">
+<path d="M-435.061 42C-435.061 21.5655 -418.495 5 -398.061 5H782.839C803.273 5 819.839 21.5655 819.839 42V90C819.839 92.2091 818.048 94 815.839 94H-431.061C-433.27 94 -435.061 92.2091 -435.061 90V42Z" fill="#A49EA8"/>
+</g>
+<path d="M782.839 4.5C803.55 4.50007 820.339 21.2894 820.339 42V90C820.339 92.4852 818.324 94.4999 815.839 94.5H-431.061C-433.546 94.5 -435.561 92.4853 -435.561 90V42C-435.561 21.2893 -418.771 4.5 -398.061 4.5H782.839Z" stroke="#58525C" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_9452)" style="mix-blend-mode:color-dodge">
+<path d="M-424.33 87C-424.33 87.0992 -424.29 87.1943 -424.22 87.2645C-424.149 87.3346 -424.054 87.374 -423.955 87.374C-423.856 87.374 -423.761 87.3346 -423.69 87.2645C-423.62 87.1943 -423.581 87.0992 -423.58 87C-423.58 87 -423.58 87 -423.58 87C-423.538 78.9463 -423.499 70.8926 -423.461 62.8389C-423.434 56.9666 -423.408 51.0944 -423.383 45.2222L-423.439 45.4706C-376.457 4.95987 -305.418 13.8926 -245.02 7.99735L-245.063 7.9983C-240.862 7.99943 -236.661 8 -232.46 8C-159.976 8 -87.4928 7.83125 -15.0094 7.49375C-6.95569 7.45625 1.09802 7.41667 9.15173 7.375C9.25092 7.37448 9.34607 7.33492 9.4162 7.26464C9.48636 7.19436 9.52576 7.09919 9.52576 7C9.52576 6.90081 9.48636 6.80564 9.4162 6.73536C9.34607 6.66508 9.25092 6.62552 9.15173 6.625C1.09802 6.58333 -6.95569 6.54375 -15.0094 6.50625C-87.4928 6.16875 -159.976 6 -232.46 6C-236.661 6 -240.862 6.00057 -245.063 6.0017L-245.107 6.00265C-305.702 12.1134 -376.235 2.68909 -424.471 44.9739L-424.528 45.2222C-424.502 51.0944 -424.476 56.9666 -424.449 62.8389C-424.411 70.8926 -424.372 78.9463 -424.33 87Z" fill="url(#paint0_linear_450_9452)"/>
+</g>
+<mask id="path-6-inside-1_450_9452" fill="white">
+<path d="M-368.43 39C-368.43 26.2975 -358.132 16 -345.43 16H735.759C748.461 16 758.759 26.2975 758.759 39V68C758.759 70.2091 756.968 72 754.759 72H-364.43C-366.639 72 -368.43 70.2091 -368.43 68V39Z"/>
+</mask>
+<path d="M-368.43 39C-368.43 26.2975 -358.132 16 -345.43 16H735.759C748.461 16 758.759 26.2975 758.759 39V68C758.759 70.2091 756.968 72 754.759 72H-364.43C-366.639 72 -368.43 70.2091 -368.43 68V39Z" fill="#413E43"/>
+<path d="M-370.43 39C-370.43 25.1929 -359.237 14 -345.43 14H735.759C749.566 14 760.759 25.1929 760.759 39H756.759C756.759 27.402 747.357 18 735.759 18H-345.43C-357.028 18 -366.43 27.402 -366.43 39H-370.43ZM-366.43 39M758.759 72H-368.43H758.759M-364.43 72C-367.743 72 -370.43 69.3137 -370.43 66V39C-370.43 25.1929 -359.237 14 -345.43 14V18C-357.028 18 -366.43 27.402 -366.43 39V68C-366.43 70.2091 -365.534 72 -364.43 72ZM735.759 14C749.566 14 760.759 25.1929 760.759 39V66C760.759 69.3137 758.072 72 754.759 72C755.863 72 756.759 70.2091 756.759 68V39C756.759 27.402 747.357 18 735.759 18V14Z" fill="black" mask="url(#path-6-inside-1_450_9452)"/>
+<mask id="path-8-inside-2_450_9452" fill="white">
+<path d="M-379.535 38C-379.535 24.7452 -368.79 14 -355.535 14H745.864C759.119 14 769.864 24.7452 769.864 38V68C769.864 70.2091 768.073 72 765.864 72H-375.535C-377.744 72 -379.535 70.2091 -379.535 68V38Z"/>
+</mask>
+<path d="M-380.535 38C-380.535 24.1929 -369.342 13 -355.535 13H745.864C759.671 13 770.864 24.1929 770.864 38H768.864C768.864 25.2975 758.566 15 745.864 15H-355.535C-368.238 15 -378.535 25.2975 -378.535 38H-380.535ZM-378.535 38M769.864 72H-379.535H769.864M-375.535 72C-378.297 72 -380.535 69.7614 -380.535 67V38C-380.535 24.1929 -369.342 13 -355.535 13V15C-368.238 15 -378.535 25.2975 -378.535 38V68C-378.535 70.2091 -377.192 72 -375.535 72ZM745.864 13C759.671 13 770.864 24.1929 770.864 38V67C770.864 69.7614 768.625 72 765.864 72C767.521 72 768.864 70.2091 768.864 68V38C768.864 25.2975 758.566 15 745.864 15V13Z" fill="url(#paint1_linear_450_9452)" mask="url(#path-8-inside-2_450_9452)"/>
+<g filter="url(#filter3_f_450_9452)">
+<path d="M819.086 89.2607C818.571 90.5529 817.313 91.4668 815.838 91.4668H-431.061C-431.783 91.4668 -432.454 91.2474 -433.012 90.8721L-357.97 70.5771L749.851 69.7617L819.086 89.2607ZM-397.061 5.5H781.838C802.549 5.5 819.338 22.2893 819.338 43V87.2529L756.302 69.5H760.312C762.797 69.5 764.812 67.4853 764.812 65V39C764.812 25.469 753.843 14.5 740.312 14.5H-355.534C-369.065 14.5 -380.034 25.469 -380.034 39V65C-380.034 67.4853 -378.019 69.5 -375.534 69.5H-361.642L-434.352 89.1631C-434.487 88.7903 -434.561 88.3874 -434.561 87.9668V43C-434.561 22.2893 -417.771 5.5 -397.061 5.5Z" stroke="url(#paint2_linear_450_9452)"/>
+</g>
+<path d="M-434.138 92.7413C-435.281 92.7413 -435.53 91.1328 -434.44 90.7879L-360.304 67.3301H750.635L824.771 90.7879C825.86 91.1328 825.612 92.7413 824.469 92.7413H-434.138Z" fill="url(#paint3_linear_450_9452)" stroke="#1A1302" stroke-width="1.2"/>
+<path d="M-417.776 90L-426.732 94.2753L803.18 95L805.215 94.9205C815.19 94.5319 817.568 94.4392 825.391 93.5L819.828 90.2433L-417.776 90Z" fill="#1A1302"/>
+<g opacity="0.7" filter="url(#filter4_f_450_9452)" style="mix-blend-mode:plus-lighter">
+<path d="M-351.771 67.9077H742.101L805.956 89.8538H-415.627L-351.771 67.9077Z" stroke="url(#paint4_linear_450_9452)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter5_f_450_9452)">
+<path d="M-124.113 20.5H611.999C681.183 20.5 730.995 27.9321 730.995 40.142V63.5" stroke="url(#paint5_linear_450_9452)" stroke-width="2"/>
+</g>
+<line x1="-362.377" y1="66.5" x2="752.706" y2="66.5" stroke="url(#paint6_linear_450_9452)" stroke-linecap="round"/>
+<line x1="-420.68" y1="92.5" x2="811.009" y2="92.5" stroke="url(#paint7_linear_450_9452)" stroke-linecap="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_i_450_9452" x="-462.824" y="0" width="1312.43" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.788235 0 0 0 0 0.870588 0 0 0 0 0.941176 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9452"/>
+</filter>
+<filter id="filter1_i_450_9452" x="-436.061" y="4" width="1258.9" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0 0.870588 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_9452"/>
+</filter>
+<filter id="filter2_f_450_9452" x="-426.527" y="4" width="438.053" height="85.374" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_9452"/>
+</filter>
+<filter id="filter3_f_450_9452" x="-436.061" y="4" width="1256.9" height="88.9668" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9452"/>
+</filter>
+<filter id="filter4_f_450_9452" x="-416.951" y="65.9077" width="1224.23" height="25.9463" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_9452"/>
+</filter>
+<filter id="filter5_f_450_9452" x="-127.813" y="15.8" width="863.507" height="51.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_450_9452"/>
+</filter>
+<linearGradient id="paint0_linear_450_9452" x1="-207.402" y1="6.11111" x2="-222.713" y2="90.5142" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EBE9E2" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#EBE9E2"/>
+<stop offset="1" stop-color="#EBE9E2" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_9452" x1="195.164" y1="14" x2="195.164" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A8A2AA"/>
+<stop offset="1" stop-color="#FEFDE7" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_9452" x1="-318.455" y1="7.0412" x2="-9.63958" y2="547.959" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC"/>
+<stop offset="1" stop-color="#ECEBEC"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_9452" x1="-440.613" y1="80.0357" x2="-232.389" y2="80.0357" gradientUnits="userSpaceOnUse">
+<stop stop-color="#76707A"/>
+<stop offset="1" stop-color="#76707A"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_9452" x1="195.165" y1="67.9077" x2="195.165" y2="89.8538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC"/>
+<stop offset="1" stop-color="#ECEBEC" stop-opacity="0.8"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_9452" x1="617.534" y1="46.5123" x2="624.803" y2="8.62272" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ECEBEC" stop-opacity="0"/>
+<stop offset="1" stop-color="#ECEBEC"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_9452" x1="-362.877" y1="67.5" x2="753.206" y2="67.5005" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1402"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_9452" x1="-421.18" y1="93.5" x2="811.509" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A1302" stop-opacity="0"/>
+<stop offset="0.1" stop-color="#1A1302"/>
+<stop offset="0.9" stop-color="#1A1302"/>
+<stop offset="1" stop-color="#1A1302" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_9452">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+<clipPath id="clip1_450_9452">
+<rect width="606" height="95" fill="white" transform="translate(-261)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/오른쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/오른쪽.svg
new file mode 100644
index 0000000..0ca17a9
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/오른쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7283)">
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#555555"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#555555" stroke-width="11"/>
+<path d="M-3.85547 13.5C14.0096 13.5002 29.1299 27.132 29.1299 44.708V77.5H-145.113V44.708C-145.113 27.1319 -129.993 13.5001 -112.128 13.5H-3.85547Z" stroke="#713699" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#AAAAAA"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#555555" stroke-width="4"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#777777"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M25.25 65.0991L39.1631 91.0005H-154.546L-139.671 65.0991H25.25Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_7283" fill="white">
+<path d="M-152.746 45.5801C-152.746 23.4887 -134.837 5.58008 -112.746 5.58008H-1.74609C19.793 5.58008 37.2539 23.041 37.2539 44.5801V88H-152.746V45.5801Z"/>
+</mask>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_7283)"/>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#713699" fill-opacity="0.1" mask="url(#path-4-inside-1_450_7283)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_7283">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/왼쪽.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/왼쪽.svg
new file mode 100644
index 0000000..ec00c94
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/왼쪽.svg	
@@ -0,0 +1,26 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7266)">
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#555555"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#555555" stroke-width="11"/>
+<path d="M154.145 13.5C172.01 13.5002 187.13 27.132 187.13 44.708V77.5H12.8867V44.708C12.8867 27.1319 28.007 13.5001 45.8721 13.5H154.145Z" stroke="#713699" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#AAAAAA"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#555555" stroke-width="4"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#777777"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#555555" stroke-width="4"/>
+<path d="M183.25 65.0991L197.163 91.0005H3.4541L18.3291 65.0991H183.25Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-4-inside-1_450_7266" fill="white">
+<path d="M5.25391 45.5801C5.25391 23.4887 23.1625 5.58008 45.2539 5.58008H156.254C177.793 5.58008 195.254 23.041 195.254 44.5801V88H5.25391V45.5801Z"/>
+</mask>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#555555" mask="url(#path-4-inside-1_450_7266)"/>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#713699" fill-opacity="0.1" mask="url(#path-4-inside-1_450_7266)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_7266">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/중앙.svg b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/중앙.svg
new file mode 100644
index 0000000..60bbcb9
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/batch/source/연계 시설물/특별시도/터널/위치도/중앙.svg	
@@ -0,0 +1,31 @@
+<svg width="124" height="93" viewBox="0 0 124 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_7272)">
+<mask id="mask0_450_7272" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="329" height="93">
+<rect width="329" height="93" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_7272)">
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#555555"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#555555" stroke-width="11"/>
+<path d="M544.653 13.5C691.6 13.5 824.675 16.3785 921.048 21.0361C969.216 23.3641 1008.31 26.1403 1035.4 29.2363C1048.92 30.7807 1059.63 32.4239 1067.04 34.1738C1070.7 35.0383 1073.85 35.9962 1076.2 37.1133C1077.35 37.6643 1078.63 38.3962 1079.68 39.4043C1080.74 40.411 1082.08 42.1938 1082.08 44.708V77.5H-2088.15V44.708C-2088.15 42.194 -2086.81 40.411 -2085.76 39.4043C-2084.7 38.3962 -2083.43 37.6643 -2082.27 37.1133C-2079.92 35.9962 -2076.77 35.0384 -2073.11 34.1738C-2065.7 32.424 -2054.99 30.7806 -2041.48 29.2363C-2014.38 26.1402 -1975.29 23.3641 -1927.12 21.0361C-1830.75 16.3785 -1697.67 13.5 -1550.73 13.5H544.653Z" stroke="#713699" stroke-opacity="0.1" stroke-width="11"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#AAAAAA"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#555555" stroke-width="4"/>
+<path d="M584.026 2V2.00195C802.911 2.03014 1001.04 6.6821 1144.59 14.1934C1216.58 17.9601 1274.88 22.4465 1315.2 27.4346C1335.35 29.9271 1351.08 32.5534 1361.8 35.2949C1367.15 36.6616 1371.36 38.0841 1374.28 39.5869C1375.73 40.3365 1376.97 41.159 1377.87 42.0869C1378.77 43.0216 1379.47 44.2078 1379.47 45.6201V91H-2364.04V45.6201L-2364.03 45.3584C-2363.95 44.0607 -2363.29 42.9633 -2362.44 42.0869C-2361.54 41.159 -2360.3 40.3365 -2358.84 39.5869C-2355.93 38.0841 -2351.72 36.6616 -2346.37 35.2949C-2335.65 32.5534 -2319.92 29.9271 -2299.77 27.4346C-2259.45 22.4465 -2201.15 17.9601 -2129.16 14.1934C-1985.61 6.68211 -1787.48 2.03013 -1568.59 2.00195V2H584.026ZM-1566.59 19.0811C-1717.19 19.0811 -1853.52 22.2752 -1952.18 27.4375C-2001.52 30.019 -2041.4 33.0904 -2068.93 36.4961C-2082.71 38.2005 -2093.32 39.981 -2100.46 41.8066C-2104.05 42.7235 -2106.65 43.6247 -2108.31 44.4805C-2109.14 44.9101 -2109.63 45.2751 -2109.89 45.543C-2109.97 45.626 -2110.02 45.6852 -2110.04 45.7197V73.9189H1125.47V45.7197C1125.45 45.6852 1125.4 45.626 1125.32 45.543C1125.06 45.2751 1124.57 44.91 1123.74 44.4805C1122.08 43.6247 1119.48 42.7235 1115.89 41.8066C1108.75 39.981 1098.14 38.2005 1084.36 36.4961C1056.83 33.0904 1016.95 30.019 967.609 27.4375C872.031 22.4365 741.106 19.2821 596.102 19.0898L582.026 19.0811H-1566.59Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#777777"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" fill="#713699" fill-opacity="0.1"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#555555" stroke-width="4"/>
+<path d="M1130.98 65.0991L1400.27 91.0005H-2393.94L-2106.08 65.0991H1130.98Z" stroke="#713699" stroke-opacity="0.1" stroke-width="4"/>
+<mask id="path-5-inside-1_450_7272" fill="white">
+<path d="M-2336.8 45.5801C-2336.8 23.4887 -2318.89 5.58008 -2296.8 5.58008H1301.26C1322.8 5.58008 1340.26 23.041 1340.26 44.5801V88H-2336.8V45.5801Z"/>
+</mask>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#555555" mask="url(#path-5-inside-1_450_7272)"/>
+<path d="M-2337.8 45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008H1301.26C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801H1339.26C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008H-2296.8C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801H-2337.8ZM-2335.8 45.5801M1340.26 88H-2336.8H1340.26M-2337.8 88V45.5801C-2337.8 22.9364 -2319.44 4.58008 -2296.8 4.58008V6.58008C-2318.34 6.58008 -2335.8 24.041 -2335.8 45.5801V88H-2337.8ZM1301.26 4.58008C1323.35 4.58008 1341.26 22.4887 1341.26 44.5801V88H1339.26V44.5801C1339.26 23.5933 1322.25 6.58008 1301.26 6.58008V4.58008Z" fill="#713699" fill-opacity="0.1" mask="url(#path-5-inside-1_450_7272)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_450_7272">
+<rect width="124" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/tunnel/actual-detail/center.svg b/packages/center-graphic/src/assets/facility/tunnel/actual-detail/center.svg
new file mode 100644
index 0000000..8ca38c8
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/tunnel/actual-detail/center.svg
@@ -0,0 +1,116 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="84" height="95" viewBox="0 0 84 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_11407)">
+<g filter="url(#filter0_i_450_11407)">
+<path d="M-472.049 40C-472.049 17.9086 -454.14 0 -432.049 0H516.049C538.14 0 556.049 17.9086 556.049 40V86C556.049 90.9706 552.019 95 547.049 95H-462.049C-467.572 95 -472.049 90.5229 -472.049 85V40Z" fill="#FD981E"/>
+</g>
+<path d="M-432.049 1.5H516.049C537.312 1.5 554.549 18.737 554.549 40V86C554.549 90.1421 551.191 93.5 547.049 93.5H-462.049C-466.743 93.5 -470.549 89.6944 -470.549 85V40C-470.549 18.737 -453.312 1.5 -432.049 1.5Z" stroke="#420601" stroke-width="3"/>
+<g filter="url(#filter1_i_450_11407)">
+<path d="M-450.268 43C-450.268 22.0132 -433.254 5 -412.268 5H496.267C517.253 5 534.267 22.0132 534.267 43V90C534.267 92.2091 532.476 94 530.267 94H-446.268C-448.477 94 -450.268 92.2091 -450.268 90V43Z" fill="url(#paint0_linear_450_11407)"/>
+</g>
+<path d="M496.267 4.5C517.53 4.5 534.767 21.737 534.767 43V90C534.767 92.4853 532.752 94.5 530.267 94.5H-446.268C-448.753 94.5 -450.768 92.4853 -450.768 90V43C-450.768 21.737 -433.531 4.5 -412.268 4.5H496.267Z" stroke="#1D0500" style="mix-blend-mode:multiply"/>
+<mask id="path-5-inside-1_450_11407" fill="white">
+<path d="M-397.99 39C-397.99 26.2975 -387.693 16 -374.99 16H463.348C476.051 16 486.348 26.2975 486.348 39V68C486.348 70.2091 484.557 72 482.348 72H-393.99C-396.199 72 -397.99 70.2091 -397.99 68V39Z"/>
+</mask>
+<path d="M-397.99 39C-397.99 26.2975 -387.693 16 -374.99 16H463.348C476.051 16 486.348 26.2975 486.348 39V68C486.348 70.2091 484.557 72 482.348 72H-393.99C-396.199 72 -397.99 70.2091 -397.99 68V39Z" fill="url(#paint1_linear_450_11407)"/>
+<path d="M-399.99 39C-399.99 25.1929 -388.797 14 -374.99 14H463.348C477.155 14 488.348 25.1929 488.348 39H484.348C484.348 27.402 474.946 18 463.348 18H-374.99C-386.588 18 -395.99 27.402 -395.99 39H-399.99ZM-395.99 39M486.348 72H-397.99H486.348M-393.99 72C-397.304 72 -399.99 69.3137 -399.99 66V39C-399.99 25.1929 -388.797 14 -374.99 14V18C-386.588 18 -395.99 27.402 -395.99 39V68C-395.99 70.2091 -395.095 72 -393.99 72ZM463.348 14C477.155 14 488.348 25.1929 488.348 39V66C488.348 69.3137 485.662 72 482.348 72C483.453 72 484.348 70.2091 484.348 68V39C484.348 27.402 474.946 18 463.348 18V14Z" fill="black" mask="url(#path-5-inside-1_450_11407)"/>
+<mask id="path-7-inside-2_450_11407" fill="white">
+<path d="M-406.703 38C-406.703 24.7452 -395.958 14 -382.703 14H471.06C484.315 14 495.06 24.7452 495.06 38V68C495.06 70.2091 493.27 72 491.06 72H-402.703C-404.912 72 -406.703 70.2091 -406.703 68V38Z"/>
+</mask>
+<path d="M-407.703 38C-407.703 24.1929 -396.51 13 -382.703 13H471.06C484.868 13 496.06 24.1929 496.06 38H494.06C494.06 25.2975 483.763 15 471.06 15H-382.703C-395.406 15 -405.703 25.2975 -405.703 38H-407.703ZM-405.703 38M495.06 72H-406.703H495.06M-402.703 72C-405.465 72 -407.703 69.7614 -407.703 67V38C-407.703 24.1929 -396.51 13 -382.703 13V15C-395.406 15 -405.703 25.2975 -405.703 38V68C-405.703 70.2091 -404.36 72 -402.703 72ZM471.06 13C484.868 13 496.06 24.1929 496.06 38V67C496.06 69.7614 493.822 72 491.06 72C492.717 72 494.06 70.2091 494.06 68V38C494.06 25.2975 483.763 15 471.06 15V13Z" fill="url(#paint2_linear_450_11407)" mask="url(#path-7-inside-2_450_11407)"/>
+<g filter="url(#filter2_f_450_11407)">
+<path d="M-412.268 5.5H496.267C516.977 5.5 533.767 22.2893 533.767 43V87.1904L484.487 69.5H486.704C489.189 69.5 491.204 67.4853 491.204 65V39C491.204 25.469 480.235 14.5 466.704 14.5H-382.703C-396.234 14.5 -407.203 25.469 -407.203 39V65C-407.203 67.4077 -405.312 69.3737 -402.935 69.4941L-402.703 69.5H-392.729L-449.581 89.0957C-449.702 88.7418 -449.768 88.3622 -449.768 87.9668V43C-449.768 22.2893 -432.978 5.5 -412.268 5.5Z" stroke="url(#paint3_linear_450_11407)"/>
+</g>
+<path d="M-449.47 92.7411C-450.569 92.7411 -450.864 91.2249 -449.844 90.8136L-391.617 67.3298H479.974L538.201 90.8136C539.221 91.2249 538.927 92.7411 537.827 92.7411H-449.47Z" fill="#854114"/>
+<path d="M-449.47 92.7411C-450.569 92.7411 -450.864 91.2249 -449.844 90.8136L-391.617 67.3298H479.974L538.201 90.8136C539.221 91.2249 538.927 92.7411 537.827 92.7411H-449.47Z" fill="url(#paint4_linear_450_11407)"/>
+<path d="M-449.47 92.7411C-450.569 92.7411 -450.864 91.2249 -449.844 90.8136L-391.617 67.3298H479.974L538.201 90.8136C539.221 91.2249 538.927 92.7411 537.827 92.7411H-449.47Z" stroke="#240700" stroke-width="1.2"/>
+<path d="M-436.705 90L-443.732 94.2753L521.198 95L522.795 94.9205C530.621 94.5319 532.486 94.4392 538.624 93.5L534.26 90.2433L-436.705 90Z" fill="#391101"/>
+<g filter="url(#filter3_f_450_11407)" style="mix-blend-mode:plus-lighter">
+<path d="M-384.922 67.9073H473.279L523.377 89.8534H-435.02L-384.922 67.9073Z" stroke="url(#paint5_linear_450_11407)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter4_f_450_11407)">
+<path d="M-206.312 20.5H371.206C425.485 20.5 464.565 27.9321 464.565 40.142V63.5" stroke="url(#paint6_linear_450_11407)" stroke-width="2"/>
+</g>
+<line x1="-393.135" y1="66.5" x2="481.491" y2="66.5" stroke="url(#paint7_linear_450_11407)" stroke-linecap="round"/>
+<line x1="-438.877" y1="92.5" x2="527.232" y2="92.5" stroke="url(#paint8_linear_450_11407)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_11407" x="-472.049" y="0" width="1030.1" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.819952 0 0 0 0 0.485577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11407"/>
+</filter>
+<filter id="filter1_i_450_11407" x="-451.268" y="4" width="988.533" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.819952 0 0 0 0 0.485577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11407"/>
+</filter>
+<filter id="filter2_f_450_11407" x="-451.268" y="4" width="986.533" height="86.7227" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_11407"/>
+</filter>
+<filter id="filter3_f_450_11407" x="-436.42" y="65.9073" width="961.197" height="25.946" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_11407"/>
+</filter>
+<filter id="filter4_f_450_11407" x="-210.013" y="15.8" width="679.277" height="51.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_450_11407"/>
+</filter>
+<linearGradient id="paint0_linear_450_11407" x1="41.9995" y1="5" x2="41.9995" y2="94" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F77505"/>
+<stop offset="1" stop-color="#F67503"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_11407" x1="44.1789" y1="16" x2="44.1789" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7B3934"/>
+<stop offset="1" stop-color="#100100"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_11407" x1="44.1787" y1="14" x2="44.1787" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC171"/>
+<stop offset="1" stop-color="#FC9224"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_11407" x1="-358.784" y1="6.98852" x2="-29.1276" y2="472.007" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBF1B2"/>
+<stop offset="1" stop-color="#FBF1B2" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_11407" x1="-454.623" y1="80.0354" x2="-271.657" y2="80.0354" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D67930"/>
+<stop offset="1" stop-color="#D67930" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_11407" x1="44.1785" y1="67.9073" x2="44.1785" y2="89.8534" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCE87"/>
+<stop offset="1" stop-color="#8F632C"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_11407" x1="375.549" y1="46.5123" x2="384.612" y2="9.44453" gradientUnits="userSpaceOnUse">
+<stop stop-color="#853C17" stop-opacity="0"/>
+<stop offset="1" stop-color="#853C17"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_11407" x1="-393.635" y1="67.5" x2="481.991" y2="67.5003" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_11407" x1="-439.377" y1="93.5" x2="527.732" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_11407">
+<rect width="84" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/tunnel/actual-detail/left.svg b/packages/center-graphic/src/assets/facility/tunnel/actual-detail/left.svg
new file mode 100644
index 0000000..c785e03
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/tunnel/actual-detail/left.svg
@@ -0,0 +1,171 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_11382)">
+<g filter="url(#filter0_i_450_11382)">
+<path d="M0 40C0 17.9086 17.9086 0 40 0H196C218.091 0 236 17.9086 236 40V86C236 90.9706 231.971 95 227 95H10C4.47715 95 0 90.5229 0 85V40Z" fill="#FD981E"/>
+</g>
+<path d="M40 1.5H196C217.263 1.5 234.5 18.737 234.5 40V86C234.5 90.1421 231.142 93.5 227 93.5H10C5.30558 93.5 1.5 89.6944 1.5 85V40C1.5 18.737 18.737 1.5 40 1.5Z" stroke="#420601" stroke-width="3"/>
+<g filter="url(#filter1_i_450_11382)">
+<path d="M5 43C5 22.0132 22.0132 5 43 5H193C213.987 5 231 22.0132 231 43V90C231 92.2091 229.209 94 227 94H9C6.79086 94 5 92.2091 5 90V43Z" fill="url(#paint0_linear_450_11382)"/>
+</g>
+<path d="M193 4.5C214.263 4.5 231.5 21.737 231.5 43V90C231.5 92.4853 229.485 94.5 227 94.5H9C6.51472 94.5 4.5 92.4853 4.5 90V43C4.5 21.737 21.737 4.5 43 4.5H193Z" stroke="#1D0500" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_11382)" style="mix-blend-mode:color-dodge">
+<path d="M6.625 87C6.62675 87.0986 6.66645 87.1931 6.73662 87.2628C6.80678 87.3325 6.90143 87.3717 7 87.3717C7.09857 87.3717 7.19322 87.3325 7.26338 87.2628C7.33355 87.1931 7.37325 87.0986 7.375 87C7.41667 84.637 7.45625 82.2739 7.49375 79.9109C7.67725 68.348 7.81086 56.7851 7.89459 45.2222L7.89125 45.2995C8.7529 35.8075 11.5117 26.1616 18.0778 19.2957C23.6589 13.3418 31.4478 9.86908 39.4341 7.89575L39.2174 7.9216C52.1152 7.84105 65.013 7.69843 77.9109 7.49375C80.2739 7.45625 82.637 7.41667 85 7.375C85.0986 7.37325 85.1931 7.33355 85.2628 7.26338C85.3326 7.19322 85.3717 7.09857 85.3717 7C85.3717 6.90143 85.3326 6.80678 85.2628 6.73662C85.1931 6.66645 85.0986 6.62675 85 6.625C82.637 6.58333 80.2739 6.54375 77.9109 6.50625C65.013 6.30157 52.1152 6.15895 39.2174 6.0784L39.0007 6.10425C30.7911 8.02431 22.5734 11.5808 16.6229 17.9233C9.61946 25.2535 6.84506 35.4506 6.10875 45.1449L6.10541 45.2222C6.18914 56.7851 6.32275 68.348 6.50625 79.9109C6.54375 82.2739 6.58333 84.637 6.625 87Z" fill="url(#paint1_linear_450_11382)"/>
+</g>
+<mask id="path-6-inside-1_450_11382" fill="white">
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z"/>
+</mask>
+<path d="M17 39C17 26.2975 27.2975 16 40 16H197C209.703 16 220 26.2975 220 39V68C220 70.2091 218.209 72 216 72H21C18.7909 72 17 70.2091 17 68V39Z" fill="url(#paint2_linear_450_11382)"/>
+<path d="M15 39C15 25.1929 26.1929 14 40 14H197C210.807 14 222 25.1929 222 39H218C218 27.402 208.598 18 197 18H40C28.402 18 19 27.402 19 39H15ZM19 39M220 72H17H220M21 72C17.6863 72 15 69.3137 15 66V39C15 25.1929 26.1929 14 40 14V18C28.402 18 19 27.402 19 39V68C19 70.2091 19.8954 72 21 72ZM197 14C210.807 14 222 25.1929 222 39V66C222 69.3137 219.314 72 216 72C217.105 72 218 70.2091 218 68V39C218 27.402 208.598 18 197 18V14Z" fill="black" mask="url(#path-6-inside-1_450_11382)"/>
+<mask id="path-8-inside-2_450_11382" fill="white">
+<path d="M15 38C15 24.7452 25.7452 14 39 14H198C211.255 14 222 24.7452 222 38V68C222 70.2091 220.209 72 218 72H19C16.7909 72 15 70.2091 15 68V38Z"/>
+</mask>
+<path d="M14 38C14 24.1929 25.1929 13 39 13H198C211.807 13 223 24.1929 223 38H221C221 25.2975 210.703 15 198 15H39C26.2975 15 16 25.2975 16 38H14ZM16 38M222 72H15H222M19 72C16.2386 72 14 69.7614 14 67V38C14 24.1929 25.1929 13 39 13V15C26.2975 15 16 25.2975 16 38V68C16 70.2091 17.3431 72 19 72ZM198 13C211.807 13 223 24.1929 223 38V67C223 69.7614 220.761 72 218 72C219.657 72 221 70.2091 221 68V38C221 25.2975 210.703 15 198 15V13Z" fill="url(#paint3_linear_450_11382)" mask="url(#path-8-inside-2_450_11382)"/>
+<g filter="url(#filter3_f_450_11382)">
+<path d="M20 42C20 29.2975 30.2975 19 43 19H193C205.703 19 216 29.2975 216 42V67C216 69.2091 214.209 71 212 71H24C21.7909 71 20 69.2091 20 67V42Z" fill="url(#paint4_linear_450_11382)"/>
+</g>
+<g filter="url(#filter4_f_450_11382)">
+<path d="M21.9375 65.5C21.9442 65.6458 22.0043 65.7856 22.1092 65.8887C22.214 65.9918 22.3542 66.0497 22.5 66.0497C22.6458 66.0497 22.786 65.9918 22.8908 65.8887C22.9957 65.7856 23.0558 65.6458 23.0625 65.5C23.0625 65.5 23.0625 65.5 23.0625 65.5C23.125 64.1391 23.1844 62.7782 23.2406 61.4173C23.5082 54.9449 23.705 48.4724 23.8311 42L23.8257 42.1205C24.4104 36.5753 26.2414 31.1588 30.2144 27.5588C33.3334 24.6591 37.494 22.9251 41.8131 21.8568L41.5 21.8925C49.1391 21.7737 56.7782 21.5564 64.4173 21.2406C65.7782 21.1844 67.1391 21.125 68.5 21.0625C68.6458 21.0558 68.7856 20.9957 68.8887 20.8908C68.9918 20.786 69.0497 20.6458 69.0497 20.5C69.0497 20.3542 68.9918 20.214 68.8887 20.1092C68.7856 20.0043 68.6458 19.9442 68.5 19.9375C67.1391 19.875 65.7782 19.8156 64.4173 19.7594C56.7782 19.4436 49.1391 19.2263 41.5 19.1075L41.1869 19.1432C36.5612 20.1385 31.8489 21.9532 28.1752 25.3583C23.4711 29.6196 21.5491 36.009 21.1743 41.8795L21.1689 42C21.295 48.4724 21.4918 54.9449 21.7594 61.4173C21.8156 62.7782 21.875 64.1391 21.9375 65.5Z" fill="url(#paint5_linear_450_11382)"/>
+</g>
+<g filter="url(#filter5_f_450_11382)" style="mix-blend-mode:color-dodge">
+<path d="M4.625 84C4.62719 84.0984 4.66695 84.1927 4.73707 84.2622C4.80719 84.3318 4.90166 84.3709 5 84.3709C5.09834 84.3709 5.19281 84.3318 5.26293 84.2622C5.33305 84.1927 5.37281 84.0984 5.375 84C5.375 84 5.375 84 5.375 84C5.41667 82.119 5.45625 80.2381 5.49375 78.3571C5.74533 65.7381 5.90315 53.1191 5.96719 40.5C5.98589 36.3142 6.8255 32.1433 8.40964 28.272C13.188 16.4179 24.7502 8.07363 37.3427 5.6879L37.2174 5.69922C41.0973 5.63959 44.9772 5.5711 48.8571 5.49375C50.7381 5.45625 52.619 5.41667 54.5 5.375C54.5984 5.37281 54.6927 5.33305 54.7622 5.26293C54.8318 5.19281 54.8709 5.09834 54.8709 5C54.8709 4.90166 54.8318 4.80719 54.7622 4.73707C54.6927 4.66695 54.5984 4.62719 54.5 4.625C52.619 4.58333 50.7381 4.54375 48.8571 4.50625C44.9772 4.4289 41.0973 4.36041 37.2174 4.30078L37.0921 4.3121C24.0455 6.35251 11.628 14.9223 6.55807 27.5158C4.87747 31.6213 4.00697 36.064 4.03281 40.5C4.09685 53.1191 4.25467 65.7381 4.50625 78.3571C4.54375 80.2381 4.58333 82.119 4.625 84Z" fill="url(#paint6_linear_450_11382)"/>
+</g>
+<g filter="url(#filter6_f_450_11382)">
+<path d="M43 5.5H193C213.711 5.5 230.5 22.2893 230.5 43V85.7949L219.564 68.6934C220.732 67.8814 221.5 66.5322 221.5 65V39C221.5 25.469 210.531 14.5 197 14.5H39C25.469 14.5 14.5 25.469 14.5 39V65C14.5 67.0752 15.9051 68.8207 17.8154 69.3408L5.5 87.835V43C5.5 22.2893 22.2893 5.5 43 5.5Z" stroke="url(#paint7_linear_450_11382)"/>
+</g>
+<path d="M5.71979 92.7411C4.95273 92.7411 4.47127 91.913 4.8507 91.2464L18.4632 67.3298H218.537L232.149 91.2464C232.529 91.913 232.047 92.7411 231.28 92.7411H5.71979Z" fill="#854114"/>
+<path d="M5.71979 92.7411C4.95273 92.7411 4.47127 91.913 4.8507 91.2464L18.4632 67.3298H218.537L232.149 91.2464C232.529 91.913 232.047 92.7411 231.28 92.7411H5.71979Z" fill="url(#paint8_linear_450_11382)"/>
+<path d="M5.71979 92.7411C4.95273 92.7411 4.47127 91.913 4.8507 91.2464L18.4632 67.3298H218.537L232.149 91.2464C232.529 91.913 232.047 92.7411 231.28 92.7411H5.71979Z" stroke="#240700" stroke-width="1.2"/>
+<g opacity="0.85" filter="url(#filter7_f_450_11382)">
+<path d="M4 92.741H9.48953L21.1109 67.3298L4 92.741Z" fill="url(#paint9_linear_450_11382)"/>
+</g>
+<path d="M8.5 90.4309L21 67.3298H18.5L4.5 92.7411L6.5 94L8.5 90.4309Z" fill="#391101"/>
+<path d="M8.11303 90L6.5 94.2753L228 95C230.112 94.5403 230.5 94.5 232 93.5L230.998 90.2433L8.11303 90Z" fill="#391101"/>
+<g filter="url(#filter8_f_450_11382)" style="mix-blend-mode:plus-lighter">
+<path d="M20 67.9073H217L228.5 89.8534H8.5L20 67.9073Z" stroke="url(#paint10_linear_450_11382)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<line x1="18.5" y1="66.5" x2="218.5" y2="66.5" stroke="url(#paint11_linear_450_11382)" stroke-linecap="round"/>
+<line x1="8" y1="92.5" x2="229" y2="92.5" stroke="url(#paint12_linear_450_11382)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_11382" x="0" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.819952 0 0 0 0 0.485577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11382"/>
+</filter>
+<filter id="filter1_i_450_11382" x="4" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.819952 0 0 0 0 0.485577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11382"/>
+</filter>
+<filter id="filter2_f_450_11382" x="4.10547" y="4.07837" width="83.2656" height="85.2933" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_11382"/>
+</filter>
+<filter id="filter3_f_450_11382" x="16.5" y="15.5" width="203" height="59" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.75" result="effect1_foregroundBlur_450_11382"/>
+</filter>
+<filter id="filter4_f_450_11382" x="19.168" y="17.1075" width="51.8809" height="50.9421" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_11382"/>
+</filter>
+<filter id="filter5_f_450_11382" x="2.0332" y="2.30078" width="54.8379" height="84.0701" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_11382"/>
+</filter>
+<filter id="filter6_f_450_11382" x="4" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_11382"/>
+</filter>
+<filter id="filter7_f_450_11382" x="-2.7" y="60.6298" width="30.5113" height="38.8113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3.35" result="effect1_foregroundBlur_450_11382"/>
+</filter>
+<filter id="filter8_f_450_11382" x="5.84766" y="65.9073" width="225.305" height="25.946" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_11382"/>
+</filter>
+<linearGradient id="paint0_linear_450_11382" x1="118" y1="5" x2="118" y2="94" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F77505"/>
+<stop offset="1" stop-color="#F67503"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_11382" x1="46" y1="6.11111" x2="2.41074" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEEEDB" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#FFCF97"/>
+<stop offset="1" stop-color="#FEEEDB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_11382" x1="118.5" y1="16" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7B3934"/>
+<stop offset="1" stop-color="#100100"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_11382" x1="118.5" y1="14" x2="118.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC171"/>
+<stop offset="1" stop-color="#FC9224"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_11382" x1="20.8819" y1="30.1623" x2="49.2863" y2="41.8755" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D7997E"/>
+<stop offset="0.485446" stop-color="#140904" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_11382" x1="45.5" y1="20" x2="21" y2="45.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEEEDB" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#FEEEDB"/>
+<stop offset="1" stop-color="#FEEEDB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_11382" x1="44" y1="4.12222" x2="0.955073" y2="47.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEEEDB" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#FEEEDB"/>
+<stop offset="1" stop-color="#FEEEDB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_11382" x1="26" y1="6.97622" x2="230.535" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBF1B2"/>
+<stop offset="1" stop-color="#FBF1B2" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_11382" x1="4" y1="80.0354" x2="46" y2="80.0354" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D67930"/>
+<stop offset="1" stop-color="#D67930" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_11382" x1="4" y1="92.741" x2="26.0401" y2="79.9775" gradientUnits="userSpaceOnUse">
+<stop stop-color="#240700"/>
+<stop offset="0.25" stop-color="#BA4B00"/>
+<stop offset="0.55" stop-color="#FF7F00"/>
+<stop offset="0.8" stop-color="#FFE885"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_11382" x1="118.5" y1="67.9073" x2="118.5" y2="89.8534" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCE87"/>
+<stop offset="1" stop-color="#8F632C"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_11382" x1="18" y1="67.5" x2="219" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint12_linear_450_11382" x1="7.5" y1="93.5" x2="229.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_11382">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/tunnel/actual-detail/right.svg b/packages/center-graphic/src/assets/facility/tunnel/actual-detail/right.svg
new file mode 100644
index 0000000..99faaff
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/tunnel/actual-detail/right.svg
@@ -0,0 +1,155 @@
+<svg shape-rendering="geometricPrecision" stroke-linecap="round" stroke-linejoin="round" width="48" height="95" viewBox="0 0 48 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_11433)">
+<g filter="url(#filter0_i_450_11433)">
+<path d="M-188 40C-188 17.9086 -170.091 0 -148 0H8C30.0914 0 48 17.9086 48 40V86C48 90.9706 43.9706 95 39 95H-178C-183.523 95 -188 90.5229 -188 85V40Z" fill="#FD981E"/>
+</g>
+<path d="M-148 1.5H8C29.263 1.5 46.5 18.737 46.5 40V86C46.5 90.1421 43.1421 93.5 39 93.5H-178C-182.694 93.5 -186.5 89.6944 -186.5 85V40C-186.5 18.737 -169.263 1.5 -148 1.5Z" stroke="#420601" stroke-width="3"/>
+<g filter="url(#filter1_i_450_11433)">
+<path d="M-183 43C-183 22.0132 -165.987 5 -145 5H5C25.9868 5 43 22.0132 43 43V90C43 92.2091 41.2091 94 39 94H-179C-181.209 94 -183 92.2091 -183 90V43Z" fill="url(#paint0_linear_450_11433)"/>
+</g>
+<path d="M5 4.5C26.263 4.5 43.5 21.737 43.5 43V90C43.5 92.4853 41.4853 94.5 39 94.5H-179C-181.485 94.5 -183.5 92.4853 -183.5 90V43C-183.5 21.737 -166.263 4.5 -145 4.5H5Z" stroke="#1D0500" style="mix-blend-mode:multiply"/>
+<g filter="url(#filter2_f_450_11433)" style="mix-blend-mode:color-dodge">
+<path d="M43.375 87C43.3733 87.0986 43.3335 87.1931 43.2634 87.2628C43.1932 87.3325 43.0986 87.3717 43 87.3717C42.9014 87.3717 42.8068 87.3325 42.7366 87.2628C42.6665 87.1931 42.6267 87.0986 42.625 87C42.5833 84.637 42.5437 82.2739 42.5062 79.9109C42.3228 68.348 42.1891 56.7851 42.1054 45.2222L42.1088 45.2995C41.2471 35.8075 38.4883 26.1616 31.9222 19.2957C26.3411 13.3418 18.5522 9.86908 10.5659 7.89575L10.7826 7.9216C-2.11522 7.84105 -15.013 7.69843 -27.9109 7.49375C-30.2739 7.45625 -32.637 7.41667 -35 7.375C-35.0986 7.37325 -35.1931 7.33355 -35.2628 7.26338C-35.3326 7.19322 -35.3717 7.09857 -35.3717 7C-35.3717 6.90143 -35.3326 6.80678 -35.2628 6.73662C-35.1931 6.66645 -35.0986 6.62675 -35 6.625C-32.637 6.58333 -30.2739 6.54375 -27.9109 6.50625C-15.013 6.30157 -2.11522 6.15895 10.7826 6.0784L10.9993 6.10425C19.2089 8.02431 27.4266 11.5808 33.3771 17.9233C40.3805 25.2535 43.1549 35.4506 43.8912 45.1449L43.8946 45.2222C43.8109 56.7851 43.6772 68.348 43.4938 79.9109C43.4563 82.2739 43.4167 84.637 43.375 87Z" fill="url(#paint1_linear_450_11433)"/>
+</g>
+<mask id="path-6-inside-1_450_11433" fill="white">
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z"/>
+</mask>
+<path d="M-171 39C-171 26.2975 -160.703 16 -148 16H9C21.7025 16 32 26.2975 32 39V68C32 70.2091 30.2091 72 28 72H-167C-169.209 72 -171 70.2091 -171 68V39Z" fill="url(#paint2_linear_450_11433)"/>
+<path d="M-173 39C-173 25.1929 -161.807 14 -148 14H9C22.8071 14 34 25.1929 34 39H30C30 27.402 20.598 18 9 18H-148C-159.598 18 -169 27.402 -169 39H-173ZM-169 39M32 72H-171H32M-167 72C-170.314 72 -173 69.3137 -173 66V39C-173 25.1929 -161.807 14 -148 14V18C-159.598 18 -169 27.402 -169 39V68C-169 70.2091 -168.105 72 -167 72ZM9 14C22.8071 14 34 25.1929 34 39V66C34 69.3137 31.3137 72 28 72C29.1046 72 30 70.2091 30 68V39C30 27.402 20.598 18 9 18V14Z" fill="black" mask="url(#path-6-inside-1_450_11433)"/>
+<mask id="path-8-inside-2_450_11433" fill="white">
+<path d="M-173 38C-173 24.7452 -162.255 14 -149 14H10C23.2548 14 34 24.7452 34 38V68C34 70.2091 32.2091 72 30 72H-169C-171.209 72 -173 70.2091 -173 68V38Z"/>
+</mask>
+<path d="M-174 38C-174 24.1929 -162.807 13 -149 13H10C23.8071 13 35 24.1929 35 38H33C33 25.2975 22.7025 15 10 15H-149C-161.703 15 -172 25.2975 -172 38H-174ZM-172 38M34 72H-173H34M-169 72C-171.761 72 -174 69.7614 -174 67V38C-174 24.1929 -162.807 13 -149 13V15C-161.703 15 -172 25.2975 -172 38V68C-172 70.2091 -170.657 72 -169 72ZM10 13C23.8071 13 35 24.1929 35 38V67C35 69.7614 32.7614 72 30 72C31.6569 72 33 70.2091 33 68V38C33 25.2975 22.7025 15 10 15V13Z" fill="url(#paint3_linear_450_11433)" mask="url(#path-8-inside-2_450_11433)"/>
+<g filter="url(#filter3_f_450_11433)" style="mix-blend-mode:color-dodge">
+<path d="M43.875 84C43.8728 84.0984 43.8331 84.1927 43.7629 84.2622C43.6928 84.3318 43.5983 84.3709 43.5 84.3709C43.4017 84.3709 43.3072 84.3318 43.2371 84.2622C43.1669 84.1927 43.1272 84.0984 43.125 84C43.125 84 43.125 84 43.125 84C43.0833 82.119 43.0437 80.2381 43.0062 78.3571C42.7547 65.7381 42.5969 53.1191 42.5328 40.5C42.5141 36.3142 41.6745 32.1433 40.0904 28.272C35.312 16.4179 23.7498 8.07363 11.1573 5.6879L11.2826 5.69922C7.40269 5.63959 3.52277 5.5711 -0.357147 5.49375C-2.2381 5.45625 -4.11905 5.41667 -6 5.375C-6.09836 5.37281 -6.19269 5.33305 -6.26224 5.26293C-6.33179 5.19281 -6.37086 5.09834 -6.37086 5C-6.37086 4.90166 -6.33179 4.80719 -6.26224 4.73707C-6.19269 4.66695 -6.09836 4.62719 -6 4.625C-4.11905 4.58333 -2.2381 4.54375 -0.357147 4.50625C3.52277 4.4289 7.40269 4.36041 11.2826 4.30078L11.4079 4.3121C24.4545 6.35251 36.872 14.9223 41.9419 27.5158C43.6225 31.6213 44.493 36.064 44.4672 40.5C44.4031 53.1191 44.2453 65.7381 43.9938 78.3571C43.9563 80.2381 43.9167 82.119 43.875 84Z" fill="url(#paint4_linear_450_11433)"/>
+</g>
+<g filter="url(#filter4_f_450_11433)">
+<path d="M-145 5.5H5C25.7107 5.5 42.5 22.2893 42.5 43V85.7949L31.5645 68.6934C32.7322 67.8814 33.5 66.5322 33.5 65V39C33.5 25.469 22.531 14.5 9 14.5H-149C-162.531 14.5 -173.5 25.469 -173.5 39V65C-173.5 67.0752 -172.095 68.8207 -170.185 69.3408L-182.5 87.835V43C-182.5 22.2893 -165.711 5.5 -145 5.5Z" stroke="url(#paint5_linear_450_11433)"/>
+</g>
+<g filter="url(#filter5_f_450_11433)">
+<path d="M29.8113 70.8396H10L13.1698 66.6721H29.0189V33.9283C29.0189 27.2605 22 23 17.5 18C24 22 30.3396 29.1656 31 33.9283V69.8084C30.7822 70.565 30.4874 70.762 29.8113 70.8396Z" fill="url(#paint6_linear_450_11433)"/>
+</g>
+<path d="M-182.28 92.7411C-183.047 92.7411 -183.529 91.913 -183.149 91.2464L-169.537 67.3298H30.5369L44.1493 91.2464C44.5287 91.913 44.0473 92.7411 43.2802 92.7411H-182.28Z" fill="#854114"/>
+<path d="M-182.28 92.7411C-183.047 92.7411 -183.529 91.913 -183.149 91.2464L-169.537 67.3298H30.5369L44.1493 91.2464C44.5287 91.913 44.0473 92.7411 43.2802 92.7411H-182.28Z" fill="url(#paint7_linear_450_11433)"/>
+<path d="M-182.28 92.7411C-183.047 92.7411 -183.529 91.913 -183.149 91.2464L-169.537 67.3298H30.5369L44.1493 91.2464C44.5287 91.913 44.0473 92.7411 43.2802 92.7411H-182.28Z" stroke="#240700" stroke-width="1.2"/>
+<path d="M40 89.2759L29 67.9074L30.5 66.1748L44.5 90.431L44 92.7411L42.5 93.8961L40 89.2759Z" fill="#391101"/>
+<path d="M-179.887 90L-181.5 94.2753L40 95C42.1116 94.5403 42.5 94.5 44 93.5L42.9983 90.2433L-179.887 90Z" fill="#391101"/>
+<g filter="url(#filter6_f_450_11433)" style="mix-blend-mode:plus-lighter">
+<path d="M-168 67.9073H29L40.5 89.8534H-179.5L-168 67.9073Z" stroke="url(#paint8_linear_450_11433)" style="mix-blend-mode:plus-darker" stroke-width="2"/>
+</g>
+<g filter="url(#filter7_f_450_11433)">
+<path d="M8.35938 19C19.1974 19 27.0007 26.6914 27.0007 39.3272V63.5" stroke="url(#paint9_linear_450_11433)" stroke-width="2"/>
+</g>
+<line x1="-169.5" y1="66.5" x2="30.5" y2="66.5" stroke="url(#paint10_linear_450_11433)" stroke-linecap="round"/>
+<line x1="-180" y1="92.5" x2="41" y2="92.5" stroke="url(#paint11_linear_450_11433)" stroke-linecap="round"/>
+</g>
+<defs>
+<filter id="filter0_i_450_11433" x="-188" y="0" width="238" height="97" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.819952 0 0 0 0 0.485577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11433"/>
+</filter>
+<filter id="filter1_i_450_11433" x="-184" y="4" width="230" height="93" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2" dy="2"/>
+<feGaussianBlur stdDeviation="1.9"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.819952 0 0 0 0 0.485577 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_450_11433"/>
+</filter>
+<filter id="filter2_f_450_11433" x="-37.3711" y="4.07837" width="83.2656" height="85.2933" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_11433"/>
+</filter>
+<filter id="filter3_f_450_11433" x="-8.37109" y="2.30078" width="54.8379" height="84.0701" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_11433"/>
+</filter>
+<filter id="filter4_f_450_11433" x="-184" y="4" width="228" height="86.1982" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_11433"/>
+</filter>
+<filter id="filter5_f_450_11433" x="8" y="16" width="25" height="56.8396" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur_450_11433"/>
+</filter>
+<filter id="filter6_f_450_11433" x="-182.152" y="65.9073" width="225.305" height="25.946" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.5" result="effect1_foregroundBlur_450_11433"/>
+</filter>
+<filter id="filter7_f_450_11433" x="4.65937" y="14.3" width="27.0406" height="52.9" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1.85" result="effect1_foregroundBlur_450_11433"/>
+</filter>
+<linearGradient id="paint0_linear_450_11433" x1="-70" y1="5" x2="-70" y2="94" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F77505"/>
+<stop offset="1" stop-color="#F67503"/>
+</linearGradient>
+<linearGradient id="paint1_linear_450_11433" x1="4" y1="6.11111" x2="47.5893" y2="49.3837" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEEEDB" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#FFCF97"/>
+<stop offset="1" stop-color="#FEEEDB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_450_11433" x1="-69.5" y1="16" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7B3934"/>
+<stop offset="1" stop-color="#100100"/>
+</linearGradient>
+<linearGradient id="paint3_linear_450_11433" x1="-69.5" y1="14" x2="-69.5" y2="72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC171"/>
+<stop offset="1" stop-color="#FC9224"/>
+</linearGradient>
+<linearGradient id="paint4_linear_450_11433" x1="4.49999" y1="4.12222" x2="47.5449" y2="47.3954" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEEEDB" stop-opacity="0"/>
+<stop offset="0.471154" stop-color="#FEEEDB"/>
+<stop offset="1" stop-color="#FEEEDB" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint5_linear_450_11433" x1="-162" y1="6.97622" x2="42.5351" y2="73.6186" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FBF1B2"/>
+<stop offset="1" stop-color="#FBF1B2" stop-opacity="0.4"/>
+</linearGradient>
+<linearGradient id="paint6_linear_450_11433" x1="31" y1="43.1561" x2="27.0377" y2="43.1561" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AF3E01"/>
+<stop offset="1" stop-color="#AF3E01" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_450_11433" x1="-184" y1="80.0354" x2="-142" y2="80.0354" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D67930"/>
+<stop offset="1" stop-color="#D67930" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_450_11433" x1="-69.5" y1="67.9073" x2="-69.5" y2="89.8534" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCE87"/>
+<stop offset="1" stop-color="#8F632C"/>
+</linearGradient>
+<linearGradient id="paint9_linear_450_11433" x1="9.22578" y1="45.9198" x2="28.9958" y2="30.3192" gradientUnits="userSpaceOnUse">
+<stop stop-color="#853C17" stop-opacity="0"/>
+<stop offset="1" stop-color="#853C17"/>
+</linearGradient>
+<linearGradient id="paint10_linear_450_11433" x1="-170" y1="67.5" x2="31" y2="67.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint11_linear_450_11433" x1="-180.5" y1="93.5" x2="41.5" y2="93.5" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.1"/>
+<stop offset="0.9"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_450_11433">
+<rect width="48" height="95" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/tunnel/position-map/center.svg b/packages/center-graphic/src/assets/facility/tunnel/position-map/center.svg
new file mode 100644
index 0000000..5ff405e
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/tunnel/position-map/center.svg
@@ -0,0 +1,21 @@
+<svg width="99" height="93" viewBox="0 0 99 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_3608)">
+<mask id="mask0_450_3608" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="229" height="93">
+<rect width="229" height="93" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_450_3608)">
+<path d="M-1449.63 44.7076C-1449.63 30.5097 -1283.86 19 -1079.38 19H379.105C583.587 19 749.352 30.5097 749.352 44.7076V72H-1449.63V44.7076Z" fill="#400500"/>
+<path d="M407.118 2V2.00195C559.249 2.04239 696.947 6.69257 796.768 14.1963C846.887 17.9639 887.507 22.4532 915.623 27.4502C929.666 29.946 940.681 32.5846 948.224 35.3555C951.983 36.7365 955.001 38.1932 957.114 39.7578C959.173 41.2818 960.783 43.2204 960.783 45.6201V91H-1646.09V45.6201L-1646.09 45.3965C-1645.99 43.0995 -1644.42 41.2342 -1642.42 39.7578C-1640.31 38.1933 -1637.29 36.7365 -1633.53 35.3555C-1625.99 32.5846 -1614.97 29.946 -1600.93 27.4502C-1572.82 22.4532 -1532.2 17.9638 -1482.08 14.1963C-1382.26 6.69255 -1244.56 2.04238 -1092.43 2.00195V2H407.118ZM-1090.43 19.0811C-1195.23 19.0811 -1290.09 22.2747 -1358.73 27.4346C-1393.06 30.0152 -1420.78 33.0837 -1439.9 36.4805C-1449.47 38.1816 -1456.79 39.9498 -1461.68 41.7461C-1464.14 42.6486 -1465.86 43.5156 -1466.93 44.3096C-1468.06 45.1416 -1468.08 45.5958 -1468.08 45.6201V73.9189H782.774V45.6201C782.774 45.5958 782.748 45.1416 781.624 44.3096C780.551 43.5156 778.828 42.6486 776.371 41.7461C771.481 39.9498 764.16 38.1816 754.589 36.4805C735.476 33.0837 707.755 30.0152 673.425 27.4346C606.929 22.436 515.826 19.282 414.913 19.0898L405.118 19.0811H-1090.43Z" fill="#FF7700" stroke="#400500" stroke-width="4"/>
+<path d="M787.146 65.099L974.583 91.0004H-1666.23L-1465.87 65.099H787.146Z" fill="#6B2A00" stroke="#400500" stroke-width="4"/>
+<mask id="path-5-inside-1_450_3608" fill="white">
+<path d="M-1626.53 45.5801C-1626.53 23.4887 -1608.62 5.58008 -1586.53 5.58008H893.886C915.426 5.58008 932.886 23.041 932.886 44.5801V88H-1626.53V45.5801Z"/>
+</mask>
+<path d="M-1627.53 45.5801C-1627.53 22.9364 -1609.17 4.58008 -1586.53 4.58008H893.886C915.978 4.58008 933.886 22.4887 933.886 44.5801H931.886C931.886 23.5933 914.873 6.58008 893.886 6.58008H-1586.53C-1608.06 6.58008 -1625.53 24.041 -1625.53 45.5801H-1627.53ZM-1625.53 45.5801M932.886 88H-1626.53H932.886M-1627.53 88V45.5801C-1627.53 22.9364 -1609.17 4.58008 -1586.53 4.58008V6.58008C-1608.06 6.58008 -1625.53 24.041 -1625.53 45.5801V88H-1627.53ZM893.886 4.58008C915.978 4.58008 933.886 22.4887 933.886 44.5801V88H931.886V44.5801C931.886 23.5933 914.873 6.58008 893.886 6.58008V4.58008Z" fill="#400500" mask="url(#path-5-inside-1_450_3608)"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_450_3608">
+<rect width="99" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/tunnel/position-map/left.svg b/packages/center-graphic/src/assets/facility/tunnel/position-map/left.svg
new file mode 100644
index 0000000..174e7a0
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/tunnel/position-map/left.svg
@@ -0,0 +1,16 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_3602)">
+<path d="M18.3867 44.7076C18.3867 30.5097 30.6924 19 45.8723 19H154.144C169.324 19 181.63 30.5097 181.63 44.7076V72H18.3867V44.7076Z" fill="#400500"/>
+<path d="M158.074 2V2.04883C180.971 3.10672 199.176 22.2303 199.176 45.6201V91H1.94922V45.6201L1.96289 44.4951C2.53561 21.6198 20.5219 3.08969 43.0508 2.04883V2H158.074ZM45.0508 19.0811C30.6134 19.0812 18.8673 30.9391 18.8672 45.6201V73.9189H182.258V45.6201C182.258 31.1685 170.876 19.4516 156.749 19.0889L156.074 19.0811H45.0508Z" fill="#FF7700" stroke="#400500" stroke-width="4"/>
+<path d="M183.25 65.099L197.163 91.0004H3.4541L18.3291 65.099H183.25Z" fill="#6B2A00" stroke="#400500" stroke-width="4"/>
+<mask id="path-4-inside-1_450_3602" fill="white">
+<path d="M5.25391 45.5801C5.25391 23.4887 23.1625 5.58008 45.2539 5.58008H156.254C177.793 5.58008 195.254 23.041 195.254 44.5801V88H5.25391V45.5801Z"/>
+</mask>
+<path d="M4.25391 45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008H156.254C178.345 4.58008 196.254 22.4887 196.254 44.5801H194.254C194.254 23.5933 177.241 6.58008 156.254 6.58008H45.2539C23.7148 6.58008 6.25391 24.041 6.25391 45.5801H4.25391ZM6.25391 45.5801M195.254 88H5.25391H195.254M4.25391 88V45.5801C4.25391 22.9364 22.6102 4.58008 45.2539 4.58008V6.58008C23.7148 6.58008 6.25391 24.041 6.25391 45.5801V88H4.25391ZM156.254 4.58008C178.345 4.58008 196.254 22.4887 196.254 44.5801V88H194.254V44.5801C194.254 23.5933 177.241 6.58008 156.254 6.58008V4.58008Z" fill="#400500" mask="url(#path-4-inside-1_450_3602)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_3602">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/assets/facility/tunnel/position-map/right.svg b/packages/center-graphic/src/assets/facility/tunnel/position-map/right.svg
new file mode 100644
index 0000000..a77fac5
--- /dev/null
+++ b/packages/center-graphic/src/assets/facility/tunnel/position-map/right.svg
@@ -0,0 +1,16 @@
+<svg width="43" height="93" viewBox="0 0 43 93" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_3618)">
+<path d="M-139.613 44.7076C-139.613 30.5097 -127.308 19 -112.128 19H-3.85577C11.3241 19 23.6298 30.5097 23.6298 44.7076V72H-139.613V44.7076Z" fill="#400500"/>
+<path d="M0.0742188 2V2.04883C22.9712 3.10672 41.1757 22.2303 41.1758 45.6201V91H-156.051V45.6201L-156.037 44.4951C-155.464 21.6198 -137.478 3.08969 -114.949 2.04883V2H0.0742188ZM-112.949 19.0811C-127.387 19.0812 -139.133 30.9391 -139.133 45.6201V73.9189H24.2578V45.6201C24.2577 31.1685 12.8758 19.4516 -1.25098 19.0889L-1.92578 19.0811H-112.949Z" fill="#FF7700" stroke="#400500" stroke-width="4"/>
+<path d="M25.25 65.099L39.1631 91.0004H-154.546L-139.671 65.099H25.25Z" fill="#6B2A00" stroke="#400500" stroke-width="4"/>
+<mask id="path-4-inside-1_450_3618" fill="white">
+<path d="M-152.746 45.5801C-152.746 23.4887 -134.837 5.58008 -112.746 5.58008H-1.74609C19.793 5.58008 37.2539 23.041 37.2539 44.5801V88H-152.746V45.5801Z"/>
+</mask>
+<path d="M-153.746 45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008H-1.74609C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801H36.2539C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008H-112.746C-134.285 6.58008 -151.746 24.041 -151.746 45.5801H-153.746ZM-151.746 45.5801M37.2539 88H-152.746H37.2539M-153.746 88V45.5801C-153.746 22.9364 -135.39 4.58008 -112.746 4.58008V6.58008C-134.285 6.58008 -151.746 24.041 -151.746 45.5801V88H-153.746ZM-1.74609 4.58008C20.3453 4.58008 38.2539 22.4887 38.2539 44.5801V88H36.2539V44.5801C36.2539 23.5933 19.2407 6.58008 -1.74609 6.58008V4.58008Z" fill="#400500" mask="url(#path-4-inside-1_450_3618)"/>
+</g>
+<defs>
+<clipPath id="clip0_450_3618">
+<rect width="43" height="93" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/center-graphic/src/components/CenterInformationDisplay.css b/packages/center-graphic/src/components/CenterInformationDisplay.css
new file mode 100644
index 0000000..5afa5fa
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterInformationDisplay.css
@@ -0,0 +1,599 @@
+/*
+ * CENTER Information Display — Reference Implementation styles.
+ *
+ * Every length is expressed in design units (u) via calc(N * var(--cid-u)), where the
+ * numbers N are the normalised values measured from the Source SVGs and recorded in
+ * verification/center-information-display/SOURCE-ANALYSIS.md.
+ *
+ * Setting --cid-u is how a consumer chooses a rendering scale. The Source itself does
+ * not declare an absolute size for 1 u (Inventory FU-2).
+ */
+
+.cid-scope {
+  --cid-u: 1px;
+  --cid-font: var(--center-font-family, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif);
+}
+
+/* ── Shared card ──────────────────────────────────────────────────────── */
+
+.cid-card {
+  min-width: 0;
+  box-sizing: border-box;
+  width: var(--cid-card-width, fit-content);
+  padding: calc(2 * var(--cid-u));
+  border-radius: calc(8 * var(--cid-u));
+  background: #ffffff;
+  box-shadow:
+    calc(4 * var(--cid-u)) calc(4 * var(--cid-u)) calc(4 * var(--cid-u)) rgba(0, 0, 0, 0.25);
+  font-family: var(--cid-font);
+  font-feature-settings: normal;
+  text-rendering: geometricPrecision;
+}
+
+.cid-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--cid-header-height, calc(40.654 * var(--cid-u)));
+  padding: 0 calc(10 * var(--cid-u));
+  overflow: hidden;
+  /* The band's top radius is the one card value that does NOT scale with the family:
+     both export scales carry the same raw 8.133 px, so it is 5.7921 u in the box family
+     and 5.5894 u in the table family. Both are Source-measured, neither is derived. */
+  border-radius: var(--cid-header-radius, calc(5.7921 * var(--cid-u)))
+                 var(--cid-header-radius, calc(5.7921 * var(--cid-u))) 0 0;
+  background: linear-gradient(90deg, var(--cid-header-from), var(--cid-header-to));
+}
+
+.cid-card__header > span {
+  min-width: 0;
+  text-overflow: ellipsis;
+  color: #ffffff;
+  font-size: var(--cid-header-size, calc(27.4 * var(--cid-u)));
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-text-stroke: calc(2 * var(--cid-u)) rgba(0, 0, 0, 0.5);
+  paint-order: stroke fill;
+}
+
+.cid-card__body {
+  box-sizing: border-box;
+  margin-top: calc(2 * var(--cid-u));
+  background: #ffffff;
+}
+
+/*
+ * The body frame is NOT a CSS border: Chrome snaps used border-width to a coarse
+ * grid (calc(4 * 1.4041px) resolves to 5.333px, not 5.6164px), which breaks
+ * sub-pixel parity with the Source. Padding + a layered inner surface is exact.
+ */
+.cid-card__body--list,
+.cid-card__body--emphasis {
+  position: relative;
+  border-radius: 0 0 calc(6 * var(--cid-u)) calc(6 * var(--cid-u));
+  background: var(--cid-border);
+}
+
+/* The Source paints the inner content surface as a plain, UNROUNDED <rect> inside the
+   rounded frame — its square corners clear the 6 u curve, so no rounding is applied. */
+.cid-card__body--list::before,
+.cid-card__body--emphasis::before {
+  content: '';
+  position: absolute;
+  inset: calc(4 * var(--cid-u));
+  z-index: 0;
+  border-radius: 0;
+  background: #ffffff;
+}
+
+.cid-card__body--list > *,
+.cid-card__body--emphasis > * {
+  position: relative;
+  z-index: 1;
+}
+
+.cid-card__body--table {
+  padding: calc(2 * var(--cid-u));
+  border-radius: 0 0 calc(6 * var(--cid-u)) calc(6 * var(--cid-u));
+  background: var(--cid-border);
+  overflow: hidden;
+}
+
+/* ── Bullet badge ─────────────────────────────────────────────────────── */
+
+.cid-badge {
+  box-sizing: border-box;
+  position: relative;
+  /* Confines the sheen's plus-lighter blending to the badge's own surface. */
+  isolation: isolate;
+  flex: 0 0 auto;
+  width: calc(20 * var(--cid-u));
+  height: calc(20 * var(--cid-u));
+  border-radius: 50%;
+  background: var(--cid-badge);
+  /* The white ring is an inset shadow, not a border: border-width is snapped by the
+     engine and a bordered background also fails to paint inside foreignObject. */
+  box-shadow:
+    inset 0 0 0 calc(1.093 * var(--cid-u)) #ffffff,
+    calc(1.093 * var(--cid-u)) calc(1.093 * var(--cid-u))
+    calc(2.186 * var(--cid-u)) rgba(0, 0, 0, 0.25);
+}
+
+/*
+ * The Source overlays a 25% white diagonal sheen on the badge.
+ *
+ * The Source gradient is userSpaceOnUse from (29.2028, 94.3404) to (43.7721, 114.161)
+ * on a badge of centre (36.5078, 104.822) and diameter 28.082 raw. Re-solved for CSS,
+ * whose gradient line is sized to the box, that vector is 143.682deg and its four Source
+ * stops (0 / 0.35 / 0.65 / 1) land at 17.467 / 39.398 / 58.196 / 80.126 percent.
+ *
+ * The Source composites it with `mix-blend-mode: plus-lighter`, which on a non-zero
+ * channel is materially brighter than normal alpha compositing (badge blue 0x41:
+ * 128.75 additive vs 112.5 normal), so the blend mode is reproduced rather than
+ * approximated. It is painted BEFORE the chevron, as in the Source, so the sheen
+ * passes under the white glyph instead of tinting it.
+ */
+.cid-badge::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: 50%;
+  background: linear-gradient(
+    143.682deg,
+    rgba(255, 255, 255, 0.25) 17.467%,
+    rgba(255, 255, 255, 0) 39.398%,
+    rgba(255, 255, 255, 0) 58.196%,
+    rgba(255, 255, 255, 0.25) 80.126%
+  );
+  mix-blend-mode: plus-lighter;
+  pointer-events: none;
+}
+
+.cid-badge__chevron {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: calc(20 * var(--cid-u));
+  height: calc(20 * var(--cid-u));
+  filter: drop-shadow(
+    calc(1.093 * var(--cid-u)) calc(1.093 * var(--cid-u))
+    calc(3.278 * var(--cid-u)) rgba(0, 37, 89, 0.65)
+  );
+}
+
+/* ── Form 1a — list body ──────────────────────────────────────────────── */
+
+.cid-card__body--list,
+.cid-card__body--emphasis {
+  padding: calc(15.756 * var(--cid-u)) calc(14 * var(--cid-u))
+           calc(13.56 * var(--cid-u)) calc(14 * var(--cid-u));
+}
+
+/*
+ * 강조형 1's content area measures 80 u tall against the list form's own rule predicting
+ * 78.834 u. The stack above the remainder is fully constrained and font-independent —
+ * 11.756 u lead-in (confirmed by the badge, which centres on line 1), 28.488 u primary
+ * line, 0.542 u secondary offset, 28.488 u secondary line — so the 1.166 u difference
+ * lands entirely in the trailing pad: 10.726 u of content pad plus the 4 u frame.
+ * One Source sample, so REFERENCE_OBSERVATION, not a derived rule.
+ */
+.cid-card__body--emphasis {
+  padding-bottom: calc(14.726 * var(--cid-u));
+}
+
+.cid-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.cid-item + .cid-item {
+  margin-top: calc(7.512 * var(--cid-u));
+}
+
+.cid-item > .cid-badge {
+  margin-top: calc(4.244 * var(--cid-u));
+}
+
+.cid-item__text {
+  flex: 1 1 0;
+  margin-left: calc(10 * var(--cid-u));
+  min-width: 0;
+}
+
+.cid-item__primary {
+  margin: 0;
+  color: var(--cid-text);
+  font-size: calc(23.7 * var(--cid-u));
+  letter-spacing: calc(-0.90642333984375 * var(--cid-u));
+  font-weight: 700;
+  line-height: calc(28.488 * var(--cid-u));
+}
+
+/* 강조형 1 measures a 29.03 u advance from the primary line to the secondary one,
+   0.542 u more than the primary line-height. */
+.cid-item__secondary {
+  margin: calc(0.542 * var(--cid-u)) 0 0;
+  color: var(--cid-text);
+  font-size: calc(21.49 * var(--cid-u));
+  letter-spacing: calc(-0.8260262229225852 * var(--cid-u));
+  font-weight: 700;
+  line-height: calc(28.488 * var(--cid-u));
+}
+
+.cid-item__line {
+  display: block;
+}
+
+/* ── Form 1b — definition body ────────────────────────────────────────── */
+
+.cid-card__body--definition {
+  padding: calc(10 * var(--cid-u)) 0 0 0;
+}
+
+.cid-def {
+  margin-bottom: calc(12.21 * var(--cid-u));
+}
+
+.cid-def__chip {
+  box-sizing: border-box;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: calc(28 * var(--cid-u));
+  margin-left: calc(8 * var(--cid-u));
+  padding-left: calc(4 * var(--cid-u));
+  padding-right: calc(81.8 * var(--cid-u));
+  /* information-box.md §5.3/§5.5: pill relation, radius = height / 2 = 14 u
+     (Confirmed across five chip widths). */
+  border-radius: calc(14 * var(--cid-u));
+  background: linear-gradient(
+    to right,
+    #dce7f6 29.54%,
+    rgba(245, 249, 255, 0) 100%
+  );
+}
+
+.cid-def__label {
+  margin-left: calc(4.44 * var(--cid-u));
+  color: #000000;
+  font-size: calc(20 * var(--cid-u));
+  font-weight: 700;
+  line-height: calc(19.12 * var(--cid-u));
+  white-space: nowrap;
+  -webkit-text-stroke: calc(2 * var(--cid-u)) #ffffff;
+  paint-order: stroke fill;
+}
+
+.cid-def__value {
+  margin: calc(2.12 * var(--cid-u)) 0 0 calc(36.5 * var(--cid-u));
+  color: #000000;
+  font-size: calc(21.79 * var(--cid-u));
+  font-weight: 500;
+  line-height: calc(32.049 * var(--cid-u));
+}
+
+.cid-def__line {
+  display: block;
+}
+
+.cid-def__bullets {
+  margin: calc(2.12 * var(--cid-u)) 0 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.cid-def__bullets > li {
+  position: relative;
+  margin-left: calc(36.5 * var(--cid-u));
+  color: #000000;
+  font-size: calc(21.79 * var(--cid-u));
+  font-weight: 500;
+  line-height: calc(32.049 * var(--cid-u));
+}
+
+.cid-def__bullets > li + li {
+  margin-top: calc(7.834 * var(--cid-u));
+}
+
+.cid-def__bullets > li::before {
+  content: '\2022';
+  position: absolute;
+  left: calc(-18.5 * var(--cid-u));
+}
+
+/* ── Form 2 — table body ──────────────────────────────────────────────── */
+
+.cid-card--table {
+  --cid-header-size: calc(26.66 * var(--cid-u));
+  --cid-header-height: calc(39.231 * var(--cid-u));
+  --cid-header-radius: calc(5.5894 * var(--cid-u));
+}
+
+.cid-table {
+  display: grid;
+  grid-template-columns: calc(133.299 * var(--cid-u)) minmax(0, 1fr);
+  gap: calc(2 * var(--cid-u));
+  background: var(--cid-border);
+}
+
+.cid-table__row {
+  display: contents;
+}
+
+.cid-table__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 calc(4 * var(--cid-u));
+  background: #dce7f6;
+  color: #001a41;
+  font-size: calc(20 * var(--cid-u));
+  font-weight: 700;
+  line-height: calc(26.116 * var(--cid-u));
+  text-align: center;
+}
+
+/* Source 테이블형 rounds ONLY the last row's value cell, by 4 u, so the frame's own
+   6 u bottom-right curve stays visible through it. The bottom-left label cell is a
+   square rect in the Source and is left square here. */
+.cid-table__row:last-child .cid-table__value {
+  border-bottom-right-radius: calc(4 * var(--cid-u));
+}
+
+.cid-table__value {
+  min-width: 0;
+  box-sizing: border-box;
+  padding: calc(8.5 * var(--cid-u)) calc(10 * var(--cid-u))
+           calc(9.19 * var(--cid-u)) calc(33.89 * var(--cid-u));
+  background: #ffffff;
+}
+
+.cid-table__item {
+  position: relative;
+  margin: 0;
+  color: #000000;
+  font-size: calc(21.79 * var(--cid-u));
+  font-weight: 500;
+  line-height: calc(26.116 * var(--cid-u));
+}
+
+.cid-table__item + .cid-table__item {
+  margin-top: calc(8.248 * var(--cid-u));
+}
+
+.cid-table__item::before {
+  content: '\2022';
+  position: absolute;
+  left: calc(-20.32 * var(--cid-u));
+}
+
+.cid-table__line {
+  display: block;
+}
+
+/* ── Form 3 — emphasis ────────────────────────────────────────────────── */
+
+.cid-emphasis {
+  display: flex;
+  align-items: stretch;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.cid-card--emphasis {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+}
+
+.cid-panel {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  width: var(--cid-panel-width, calc(447.5 * var(--cid-u)));
+  min-width: 0;
+  margin: calc(0.178 * var(--cid-u)) 0 calc(0.178 * var(--cid-u)) calc(-4 * var(--cid-u));
+  padding-left: calc(20 * var(--cid-u));
+  font-family: var(--cid-font);
+}
+
+.cid-panel::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: calc(8.688 * var(--cid-u));
+  background: linear-gradient(90deg, #0054cc 0%, rgba(0, 27, 66, 0) 100%);
+  opacity: 0.85;
+}
+
+.cid-panel__arrow {
+  flex: 0 0 auto;
+  width: calc(53.676 * var(--cid-u));
+  height: calc(40.583 * var(--cid-u));
+  margin-right: calc(14.41 * var(--cid-u));
+  overflow: visible;
+  fill: #0044a4;
+  stroke: #ffffff;
+  stroke-width: calc(4 * var(--cid-u));
+  stroke-linejoin: miter;
+  paint-order: stroke fill;
+  filter: drop-shadow(0 calc(4 * var(--cid-u)) calc(4 * var(--cid-u)) rgba(0, 0, 0, 0.25));
+}
+
+/* With no arrow the text sits 21.23 u from the panel's left edge (강조형2). */
+.cid-panel:not(:has(.cid-panel__arrow)) {
+  padding-left: calc(21.23 * var(--cid-u));
+}
+
+.cid-panel__text {
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  color: #ffffff;
+  font-size: var(--cid-emphasis-size, calc(33.742 * var(--cid-u)));
+  font-weight: 700;
+  line-height: calc(36.322 * var(--cid-u));
+  white-space: nowrap;
+  -webkit-text-stroke: calc(2.896 * var(--cid-u)) #0054cc;
+  paint-order: stroke fill;
+}
+
+.cid-panel__line {
+  display: block;
+}
+
+/* ── Mini table (강조형2 left card) ───────────────────────────────────── */
+
+.cid-card__body--emphasis:has(.cid-metrics) {
+  padding: calc(4 * var(--cid-u));
+}
+
+.cid-metrics {
+  display: grid;
+  grid-template-columns: calc(91.22 * var(--cid-u)) minmax(0, 1fr);
+  gap: calc(2 * var(--cid-u));
+  background: var(--cid-border);
+}
+
+.cid-metrics__row {
+  display: contents;
+}
+
+.cid-metrics__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(37.093 * var(--cid-u));
+  background: #dce7f6;
+  color: #001a41;
+  font-size: calc(20 * var(--cid-u));
+  font-weight: 700;
+  line-height: calc(19.12 * var(--cid-u));
+}
+
+/* Information-only renderer calibration, not Canonical size/weight/tracking tokens.
+ * Source-supported Hangul ink: term/table label 18.52 u, metric label 18.58 u,
+ * primary 22.22 u, secondary 20.19 u (existing ±3% height / ±2% width gates).
+ * Controlled probes under the resolved Noto face established the sizes above.
+ * Term/label tracking preserves the previous Hangul advance; word spacing preserves
+ * the previous space advance. Primary/secondary tracking preserves the complete
+ * representative Source-string advance, including spaces and mixed-script content.
+ * Fixed line boxes and all existing component geometry remain unchanged.
+ * Evidence: verification/center-information-typography-remediation/.
+ * Font binary approval and complete role mappings remain TBD.
+ */
+.cid-def__label,
+.cid-table__label,
+.cid-metrics__label {
+  letter-spacing: calc(-0.809600830078125 * var(--cid-u));
+  word-spacing: calc(0.563201904296875 * var(--cid-u));
+}
+
+.cid-metrics__value {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  height: calc(37.093 * var(--cid-u));
+  padding-left: calc(10.667 * var(--cid-u));
+  background: #ffffff;
+  color: #001a41;
+  font-size: calc(21.05 * var(--cid-u));
+  font-weight: 400;
+  line-height: 1;
+  white-space: pre;
+}
+
+/* Source-confirmed weight split: only the result value and the delta are bold. */
+.cid-metrics__from {
+  font-weight: 400;
+}
+
+.cid-metrics__to {
+  font-weight: 700;
+}
+
+.cid-metrics__delta {
+  color: #ff0000;
+  font-weight: 700;
+}
+
+/* User-confirmed overflow policy. Each authored line stays a separate line;
+   long dynamic strings do not create extra rows or expand an owned region. */
+.cid-item__line,
+.cid-def__line,
+.cid-def__label,
+.cid-def__bullet-line,
+.cid-table__line,
+.cid-table__label > span,
+.cid-metrics__label > span,
+.cid-metrics__run,
+.cid-panel__line {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cid-def__value,
+.cid-table__label,
+.cid-metrics__label { min-width: 0; }
+
+/* ── Reference page demo chrome (not part of the Component contract) ───── */
+
+.cid-demo {
+  display: grid;
+  gap: 24px;
+}
+
+.cid-demo__block > header {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.cid-demo__block > header strong {
+  color: var(--color-action-primary);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.cid-demo__block > header span {
+  color: var(--color-fg-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.cid-demo__stage {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 28px;
+  align-items: flex-start;
+  padding: 20px 20px 24px;
+  border: 1px solid var(--color-stroke-subtle);
+  border-radius: 4px;
+  background: #eceff3;
+  overflow-x: auto;
+}
+
+.cid-demo__state {
+  display: grid;
+  gap: 8px;
+  justify-items: start;
+}
+
+.cid-demo__tag {
+  color: var(--color-fg-secondary);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
diff --git a/packages/center-graphic/src/components/CenterInformationDisplay.tsx b/packages/center-graphic/src/components/CenterInformationDisplay.tsx
new file mode 100644
index 0000000..0eb7d5b
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterInformationDisplay.tsx
@@ -0,0 +1,445 @@
+import { useId, type CSSProperties, type ReactNode } from 'react';
+
+import './CenterInformationDisplay.css';
+
+/*
+ * CENTER Information Display — React Reference Implementation.
+ *
+ * This is a Reference Implementation, not a Canonical Contract. It exists to verify
+ * the geometry, typography, surface and dynamic-content rules extracted in
+ * verification/center-information-display/SOURCE-ANALYSIS.md against the Source SVGs.
+ *
+ * It has ZERO runtime dependency on the Source assets: no <img>, no background-image,
+ * no embedded Source SVG. The only two inline vector shapes (bullet chevron, emphasis
+ * arrow) are reconstructed from normalised coordinates that are published in the
+ * Contract Proposal, so any renderer can redraw them from the document alone.
+ *
+ * All geometry is expressed in design units (u). 1 u is set by --cid-u in the CSS.
+ */
+
+/* Normalised bullet chevron, drawn inside the 20 x 20 u badge box. Contract §15.1. */
+const CHEVRON_PATH =
+  'M14.632 9.81C14.733 9.916 14.733 10.083 14.632 10.189L8.722 16.326C8.615 16.438 8.436 16.438 '
+  + '8.328 16.326L7.118 15.069C7.016 14.963 7.016 14.795 7.118 14.69L11.451 10.189C11.553 10.083 '
+  + '11.553 9.916 11.451 9.81L7.118 5.309C7.017 5.203 7.017 5.036 7.118 4.93L8.328 3.673C8.436 '
+  + '3.561 8.615 3.561 8.722 3.673L14.632 9.81Z';
+
+/* Normalised emphasis arrow, drawn inside a 53.676 x 40.583 u box. Contract §15.2. */
+const ARROW_POINTS = '53.676,20.291 24.547,40.583 24.547,32.006 0,32.006 0,8.576 24.547,8.576 24.547,0';
+
+export const CENTER_INFORMATION_PALETTES = Object.freeze({
+  navy: Object.freeze({
+    label: "주 색상 · Navy",
+    sourceFile: '박스형 설명2.svg',
+    headerFrom: '#012F67', headerTo: '#001A41',
+    border: '#98A4B2', badge: '#001A41', text: '#001A41',
+  }),
+  teal: Object.freeze({
+    label: "보조 · Teal",
+    sourceFile: '박스형 설명 보조컬러1.svg',
+    headerFrom: '#087577', headerTo: '#003A3B',
+    border: '#809FA0', badge: '#004748', text: '#004748',
+  }),
+  orange: Object.freeze({
+    label: "보조 · Orange",
+    sourceFile: '박스형 설명 보조 컬러 2.svg',
+    headerFrom: '#B55400', headerTo: '#6F3005',
+    border: '#D3BCA7', badge: '#7B3704', text: '#6C2D00',
+  }),
+  violet: Object.freeze({
+    label: "보조 · Violet",
+    sourceFile: '박스형 설명 보조 컬러3.svg',
+    headerFrom: '#7056A0', headerTo: '#492F79',
+    border: '#C2B8D5', badge: '#3B2368', text: '#3B2368',
+  }),
+  /* The 강조형 and 테이블형 cards use the navy header with a different, darker border. */
+  navyStrong: Object.freeze({
+    label: "주 색상 · Navy (강한 테두리)",
+    sourceFile: '강조형 1.svg / 테이블형.svg',
+    headerFrom: '#012F67', headerTo: '#001A41',
+    border: '#5D7A9D', badge: '#001A41', text: '#001A41',
+  }),
+});
+
+export type CenterInformationPalette = keyof typeof CENTER_INFORMATION_PALETTES;
+
+/** list item: lines (+ optional secondaryLines). definition item: label (+ lines / bullets). */
+export type CenterInformationBoxItem = { label?: string; lines?: string[]; secondaryLines?: string[]; bullets?: string[] };
+export type CenterInformationListItem = { lines: string[]; secondaryLines?: string[] };
+export type CenterInformationTableRow = { label: string; items: string[][] };
+export type CenterInformationMetric = { label: string; from: string; to: string; delta: string; direction?: 'up' | 'down' };
+
+function paletteVars(palette: CenterInformationPalette): CSSProperties {
+  const p = CENTER_INFORMATION_PALETTES[palette] ?? CENTER_INFORMATION_PALETTES.navy;
+  return {
+    '--cid-header-from': p.headerFrom,
+    '--cid-header-to': p.headerTo,
+    '--cid-border': p.border,
+    '--cid-badge': p.badge,
+    '--cid-text': p.text,
+  } as CSSProperties;
+}
+
+function BulletBadge() {
+  return (
+    <span className="cid-badge" aria-hidden="true">
+      <svg className="cid-badge__chevron" viewBox="0 0 20 20" focusable="false">
+        <path d={CHEVRON_PATH} fill="#FFFFFF" />
+      </svg>
+    </span>
+  );
+}
+
+function CardHeader({ title }: { title: string }) {
+  return <div className="cid-card__header"><span>{title}</span></div>;
+}
+
+/* ── Form 1 — 박스형 / Box ─────────────────────────────────────────────── */
+
+/**
+ * layout="list"       items: [{ lines: string[], secondaryLines?: string[] }]
+ * layout="definition" items: [{ label: string, lines?: string[], bullets?: string[] }]
+ */
+export function CenterInformationBox({
+  title,
+  palette = 'navy',
+  layout = 'list',
+  items = [],
+  width,
+  className = '',
+}: {
+  title: string;
+  palette?: CenterInformationPalette;
+  layout?: 'list' | 'definition';
+  items?: CenterInformationBoxItem[];
+  width?: string;
+  className?: string;
+}) {
+  const style = { ...paletteVars(palette), ...(width ? { '--cid-card-width': width } : null) } as CSSProperties;
+
+  return (
+    <section
+      className={`cid-card cid-card--${layout} ${className}`.trim()}
+      style={style}
+      aria-label={title}
+    >
+      <CardHeader title={title} />
+      <div className={`cid-card__body cid-card__body--${layout}`}>
+        {layout === 'definition'
+          ? items.map((item, i) => (
+            <div className="cid-def" key={i}>
+              <div className="cid-def__chip">
+                <BulletBadge />
+                <span className="cid-def__label">{item.label}</span>
+              </div>
+              {item.lines?.length ? (
+                <p className="cid-def__value">
+                  {item.lines.map((line, j) => (
+                    <span className="cid-def__line" key={j}>{line}</span>
+                  ))}
+                </p>
+              ) : null}
+              {item.bullets?.length ? (
+                <ul className="cid-def__bullets">
+                  {item.bullets.map((line, j) => <li key={j}><span className="cid-def__bullet-line">{line}</span></li>)}
+                </ul>
+              ) : null}
+            </div>
+          ))
+          : items.map((item, i) => (
+            <div className="cid-item" key={i}>
+              <BulletBadge />
+              <div className="cid-item__text">
+                <p className="cid-item__primary">
+                  {(item.lines ?? []).map((line, j) => (
+                    <span className="cid-item__line" key={j}>{line}</span>
+                  ))}
+                </p>
+                {item.secondaryLines?.length ? (
+                  <p className="cid-item__secondary">
+                    {item.secondaryLines.map((line, j) => (
+                      <span className="cid-item__line" key={j}>{line}</span>
+                    ))}
+                  </p>
+                ) : null}
+              </div>
+            </div>
+          ))}
+      </div>
+    </section>
+  );
+}
+
+/* ── Form 2 — 테이블형 / Table ─────────────────────────────────────────── */
+
+/** rows: [{ label: string, items: string[][] }] — each item is an array of lines. */
+export function CenterInformationTable({ title, rows = [], width, className = '' }: { title: string; rows?: CenterInformationTableRow[]; width?: string; className?: string }) {
+  const style = { ...paletteVars('navyStrong'), ...(width ? { '--cid-card-width': width } : null) } as CSSProperties;
+  return (
+    <section className={`cid-card cid-card--table ${className}`.trim()} style={style} aria-label={title}>
+      <CardHeader title={title} />
+      <div className="cid-card__body cid-card__body--table">
+        <div className="cid-table" role="table">
+          {rows.map((row, i) => (
+            <div className="cid-table__row" role="row" key={i}>
+              <div className="cid-table__label" role="rowheader"><span>{row.label}</span></div>
+              <div className="cid-table__value" role="cell">
+                {row.items.map((lines, j) => (
+                  <p className="cid-table__item" key={j}>
+                    {lines.map((line, k) => (
+                      <span className="cid-table__line" key={k}>{line}</span>
+                    ))}
+                  </p>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/* ── Form 3 — 강조형 / Emphasis ────────────────────────────────────────── */
+
+/**
+ * Left card body is either a list (`items`) or a mini table (`metrics`).
+ * metrics: [{ label, from, to, delta, direction: 'up'|'down' }]
+ * Rendered as: from → to(▲delta) — the result value and the delta are emphasised,
+ * the from-value is not. This weight split is Source-confirmed (강조형2).
+ * emphasis: string[]  — one entry per emphasis line.
+ */
+export function CenterInformationEmphasis({
+  title,
+  items,
+  metrics,
+  emphasis = [],
+  arrow = false,
+  emphasisSize,
+  cardWidth,
+  panelWidth,
+  className = '',
+}: {
+  title: string;
+  items?: CenterInformationListItem[];
+  metrics?: CenterInformationMetric[];
+  emphasis?: string[];
+  arrow?: boolean;
+  emphasisSize?: string;
+  cardWidth?: string;
+  panelWidth?: string;
+  className?: string;
+}) {
+  const style = {
+    ...paletteVars('navyStrong'),
+    ...(cardWidth ? { '--cid-card-width': cardWidth } : null),
+    ...(panelWidth ? { '--cid-panel-width': panelWidth } : null),
+    ...(emphasisSize ? { '--cid-emphasis-size': emphasisSize } : null),
+  } as CSSProperties;
+  const accessibleEmphasis = emphasis.join(' ');
+  /* Unique per instance: several arrows can share one page. */
+  const sheenId = `cid-arrow-sheen-${useId().replace(/:/g, '')}`;
+
+  return (
+    <div className={`cid-emphasis ${className}`.trim()} style={style}>
+      <section className="cid-card cid-card--emphasis" aria-label={title}>
+        <CardHeader title={title} />
+        <div className="cid-card__body cid-card__body--emphasis">
+          {metrics ? (
+            <div className="cid-metrics" role="table">
+              {metrics.map((m, i) => (
+                <div className="cid-metrics__row" role="row" key={i}>
+                  <div className="cid-metrics__label" role="rowheader"><span>{m.label}</span></div>
+                  <div className="cid-metrics__value" role="cell">
+                    <span className="cid-metrics__run">
+                    <span className="cid-metrics__from">{m.from} → </span>
+                    <span className="cid-metrics__to">{m.to}(</span>
+                    <span className="cid-metrics__delta">
+                      {m.direction === 'down' ? '▼' : '▲'}{m.delta}
+                    </span>
+                    <span className="cid-metrics__to">)</span>
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            (items ?? []).map((item, i) => (
+              <div className="cid-item" key={i}>
+                <BulletBadge />
+                <div className="cid-item__text">
+                  <p className="cid-item__primary">
+                    {item.lines.map((line, j) => <span className="cid-item__line" key={j}>{line}</span>)}
+                  </p>
+                  {item.secondaryLines?.length ? (
+                    <p className="cid-item__secondary">
+                      {item.secondaryLines.map((line, j) => (
+                        <span className="cid-item__line" key={j}>{line}</span>
+                      ))}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </section>
+
+      <div className="cid-panel" role="note" aria-label={accessibleEmphasis}>
+        {arrow ? (
+          <svg className="cid-panel__arrow" viewBox="0 0 53.676 40.583" focusable="false" aria-hidden="true">
+            <defs>
+              {/*
+                Source 강조형 1 paints a second copy of the arrow over the solid fill with a
+                white gradient at fill-opacity 0.2, running from the arrow's RIGHT edge
+                (x1 = 655.886, the tip) leftward to alpha 0 at 55%. Reconstructed from the
+                Source's own stops; no Source asset is referenced.
+              */}
+              <linearGradient id={sheenId} x1="53.676" y1="0" x2="0" y2="0"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#FFFFFF" />
+                <stop offset="0.55" stopColor="#FFFFFF" stopOpacity="0" />
+              </linearGradient>
+            </defs>
+            <polygon points={ARROW_POINTS} />
+            <polygon points={ARROW_POINTS} fill={`url(#${sheenId})`} fillOpacity="0.2" stroke="none" />
+          </svg>
+        ) : null}
+        <p className="cid-panel__text" aria-hidden="true">
+          {emphasis.map((line, i) => <span className="cid-panel__line" key={i}>{line}</span>)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/* ── Reference page demo ──────────────────────────────────────────────── */
+
+const SOURCE_LIST_ITEMS = [
+  { lines: ['과천 지식정보타운과 과천 기존 생활권의 연결지'] },
+  { lines: ['제2경인고속도로, 4호선'] },
+  { lines: ['광역교통 확충 예정 (GTX-C, 경강선(시흥-성남),', '과천 위례선)'] },
+];
+
+const CONTENT_STATES = [
+  { key: 'short', label: 'SHORT', title: '입지', items: [{ lines: ['연결지'] }] },
+  { key: 'reference', label: 'REFERENCE', title: '광역 교통 중심지 내 입지', items: SOURCE_LIST_ITEMS },
+  {
+    key: 'long',
+    label: 'LONG',
+    title: '광역 교통 중심지 내 입지 및 연계 교통망 확충 계획 검토',
+    items: [
+      { lines: ['과천 지식정보타운과 과천 기존 생활권의 연결지이며 광역 환승 거점으로 기능하는 지역이다'] },
+      { lines: ['제2경인고속도로, 4호선, 위례과천선, 경강선 연장 구간 및 광역급행철도 접속 예정'] },
+    ],
+  },
+  { key: 'extreme', label: 'EXTREME LONG', title: '극단적으로 긴 동적 사업 정보 '.repeat(24), items: [{ lines: ['가용 콘텐츠 영역을 초과하는 동적 정보 '.repeat(40)] }] },
+];
+
+function Block({ title, note, children }: { title: string; note?: string; children?: ReactNode }) {
+  return (
+    <section className="cid-demo__block">
+      <header>
+        <strong>{title}</strong>
+        {note ? <span>{note}</span> : null}
+      </header>
+      <div className="cid-demo__stage cid-scope">{children}</div>
+    </section>
+  );
+}
+
+export function CenterInformationDisplayReferenceDemo() {
+  return (
+    <div className="cid-demo">
+      <Block
+        title="박스형 · 정의 목록 (박스형 설명1)"
+        note="배지 + 그라데이션 레이블 칩 + 값 블록; 하위 불릿은 값 열 유지"
+      >
+        <CenterInformationBox
+          layout="definition"
+          palette="navy"
+          title="과업내용"
+          width="498px"
+          items={[
+            { label: '사업명', lines: ['주암댐 광역 노후관 개량사업(1차, 광주계통)', '기본 및 실시 설계 용역'] },
+            { label: '사업의 위치', lines: ['전라남도 순천시, 화순군 일원'] },
+            { label: '급수대상지역', lines: ['광주광역시, 전라남도 목포시, 나주시, 화순군 일원'] },
+            { label: '과업내용', bullets: ['노후관 개량 : D1,800~D2,800 / L=22.1km', '대체관로(신설 : D2,200 / L=1.2km)'] },
+            { label: '과업기간', lines: ['착수일로부터 24개월 (720일간)'] },
+          ]}
+        />
+      </Block>
+
+      <Block title="박스형 · 목록 — Source 팔레트 4종" note="지오메트리 동일; 팔레트만 다름">
+        {['navy', 'teal', 'orange', 'violet'].map((palette) => (
+          <CenterInformationBox
+            key={palette}
+            palette={palette as CenterInformationPalette}
+            title="광역 교통 중심지 내 입지"
+            width="509px"
+            items={SOURCE_LIST_ITEMS}
+          />
+        ))}
+      </Block>
+
+      <Block title="테이블형" note="행 높이 = 기본값 + 추가 행마다 26.116 u + 추가 항목마다 34.364 u">
+        <CenterInformationTable
+          title="사업효과"
+          width="643px"
+          rows={[
+            { label: '과업개요', items: [['기간 : 2026년 ~2028년 (3년간)'], ['대상 : 동작대교~행주대교(총 10개소)']] },
+            {
+              label: '주요 과업내용',
+              items: [
+                ['일상 유지관리 : 연간 일상보수 및 긴급 조치 대응 (연간단가공사)'],
+                ['성능개선 사업 : 내진보강 등 정밀 안전 진단 결과 반영 공사 관리'],
+              ],
+            },
+            { label: '용역기간', items: [['착수일부터 36개월']] },
+            { label: '발주처', items: [['서울특별시(재난안전실 교량안전과)']] },
+          ]}
+        />
+      </Block>
+
+      <Block title="강조형 · 화살표 표시 (강조형 1)" note="패널은 카드 뒤에 4 u 겹침으로 배치되며 투명하게 사라짐">
+        <CenterInformationEmphasis
+          title="사업목적"
+          arrow
+          cardWidth="398px"
+          panelWidth="448px"
+          items={[{
+            lines: ['수도권과 접근성을 향상'],
+            secondaryLines: ['수출 경쟁력 강화 및 지역 균형발전 촉진'],
+          }]}
+          emphasis={['대산~당진 고속도로 건설']}
+        />
+      </Block>
+
+      <Block title="강조형 · 수치 소형 테이블 (강조형2)" note="변화값은 색상과 ▲/▼ 방향 표시를 함께 사용">
+        <CenterInformationEmphasis
+          title="사업효과"
+          cardWidth="409px"
+          panelWidth="488px"
+          emphasisSize="calc(28.033 * var(--cid-u))"
+          metrics={[
+            { label: '이동거리', from: '38km', to: '25.4km', delta: '12.6km', direction: 'up' },
+            { label: '이동시간', from: '35분', to: '15분', delta: '20분', direction: 'down' },
+          ]}
+          emphasis={['수도권과 접근성을 향상', '수출 경쟁력 강화 및 지역 균형발전 촉진']}
+        />
+      </Block>
+
+      <Block title="동적 콘텐츠 — 짧은 / 기준 / 긴 / 매우 긴" note="소유 단일행은 말줄임으로 클리핑; 명시적 줄바꿈 유지; 장문이 지오메트리를 늘리지 않음">
+        {CONTENT_STATES.map((state) => (
+          <div className="cid-demo__state" key={state.key} data-content-test={state.key}>
+            <span className="cid-demo__tag">{state.label}</span>
+            <CenterInformationBox palette="teal" title={state.title} width="420px" items={state.items} />
+            <CenterInformationBox layout="definition" title={state.title} width="420px" items={[{ label: '사업명', lines: [state.items[0].lines[0]] }]} />
+            <CenterInformationTable title={state.title} width="420px" rows={[{ label: '과업개요', items: [[state.items[0].lines[0]]] }]} />
+            <CenterInformationEmphasis title={state.title} cardWidth="420px" panelWidth="448px" items={[{ lines: [state.items[0].lines[0]] }]} emphasis={[state.items[0].lines[0]]} />
+          </div>
+        ))}
+      </Block>
+    </div>
+  );
+}
diff --git a/packages/center-graphic/src/components/CenterRepresentation.css b/packages/center-graphic/src/components/CenterRepresentation.css
new file mode 100644
index 0000000..edacedb
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterRepresentation.css
@@ -0,0 +1,22 @@
+.center-representation { min-width: 0; }
+.center-representation__note { color: var(--color-fg-secondary); font-size: 12px; margin: 0 0 16px; }
+
+/* Per-representation sizing. Reference shell/demo layout is not a scaled canvas.
+   zoom is a scoped CSS implementation choice, not a Canonical browser setting.
+   Existing Source-unit calibrations / specimen densities are kept independent. */
+.center-representation .center-title,
+.center-representation .tunnel-facility:not(.tunnel-applied-example .tunnel-facility),
+.center-representation .local-facility:not(.facility-applied .local-facility),
+.center-representation .roadside-facility-tag:not(.facility-applied .roadside-facility-tag),
+.center-representation .tunnel-applied-example,
+.center-representation .facility-applied,
+.center-representation .cid-card:not(.cid-emphasis .cid-card),
+.center-representation .cid-emphasis {
+  zoom: var(--center-representation-scale);
+}
+
+.center-representation .csi { --csi-u: calc(1px * var(--center-representation-scale)); }
+.center-representation .csi-scale-50 { --csi-u: calc(0.5px * var(--center-representation-scale)); }
+.center-representation .csi-scale-40 { --csi-u: calc(0.4px * var(--center-representation-scale)); }
+.center-representation .csi-scale-32 { --csi-u: calc(0.32px * var(--center-representation-scale)); }
+.center-representation .csi-scale-22 { --csi-u: calc(0.22px * var(--center-representation-scale)); }
diff --git a/packages/center-graphic/src/components/CenterRepresentation.tsx b/packages/center-graphic/src/components/CenterRepresentation.tsx
new file mode 100644
index 0000000..556ffde
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterRepresentation.tsx
@@ -0,0 +1,23 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import './CenterRepresentation.css';
+
+// The authoring target is supplied by the caller. The browser and Storybook iframe
+// dimensions never select the graphic scale.
+export type CenterTargetResolution = '7680x2160' | '3840x2160';
+
+export function CenterRepresentation({ children, targetResolution = '7680x2160' }: { children?: ReactNode; targetResolution?: CenterTargetResolution }) {
+  const isCompact = targetResolution === '3840x2160';
+  const scale = isCompact ? 0.75 : 1;
+  const resolution = isCompact ? '3840x2160' : '7680x2160';
+  return (
+    <div className="center-representation" data-representation-scale={scale}
+      data-resolution={resolution} data-scale-status="CONFIRMED_PAIR"
+      style={{ '--center-representation-scale': scale } as CSSProperties}>
+      <p className="center-representation__note">
+        표시 배율 {scale * 100}% · 제작 대상 {isCompact ? '3840' : '7680'} × 2160
+      </p>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/center-graphic/src/components/CenterSpatialInformation.css b/packages/center-graphic/src/components/CenterSpatialInformation.css
new file mode 100644
index 0000000..0cf420a
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterSpatialInformation.css
@@ -0,0 +1,1051 @@
+/*
+ * CENTER Spatial Information Representation — Web Reference styles.
+ *
+ * WEB_MAPPING only. This file is not the Canonical Contract. Every value here
+ * implements a rule published in
+ * verification/center-spatial-information/CENTER_SPATIAL_INFORMATION_CONTRACT_PROPOSAL.md
+ *
+ * All geometry is expressed in design units (u). 1u is set by --csi-u so the
+ * whole system can be rendered at Source scale (1u = 1px) for measurement, or
+ * scaled down for the demo page, without changing any ratio.
+ */
+
+.csi {
+  --csi-u: 1px;
+
+  /* Route line — Source: "Outline : Line 대비 20% (Line 18px 기준 3.6px)" */
+  --csi-line: 18;            /* route core thickness */
+  --csi-casing: 3.6;         /* outline thickness, 20% of core */
+  --csi-shadow-blur: 6;      /* Source: "Shadow 기본값 X 0 / Y 0 / Blur 6px / Opacity 70%" */
+  --csi-shadow-alpha: 0.7;
+
+  /* Route palette — Source: 노선 유형별 구분 */
+  --csi-expressway: #0D6199;
+  --csi-national: #203E6F;
+  --csi-provincial: #DBB860;
+  --csi-metropolitan: #A862C9;
+  --csi-city-county: #499A02;
+  --csi-other: #FFFFFF;
+  --csi-railway: #333333;
+  --csi-project: #D21203;
+
+  --csi-casing-light: #FFFFFF;
+  --csi-casing-dark: rgba(0, 0, 0, 0.3);   /* Source: Dark Outline #000 / Opacity 30% */
+
+  font-family: var(--center-font-family, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif);
+}
+
+/* ============================================================
+   1. 노선 — Route line
+   ============================================================ */
+
+.csi-route {
+  position: relative;
+  height: calc(var(--csi-line) * var(--csi-u));
+  background-color: var(--csi-core);
+  box-shadow: 0 0 0 calc(var(--csi-casing) * var(--csi-u)) var(--csi-casing-color, var(--csi-casing-light));
+  filter: drop-shadow(0 0 calc(var(--csi-shadow-blur) * var(--csi-u)) rgba(0, 0, 0, var(--csi-shadow-alpha)));
+}
+
+.csi-route--no-shadow { filter: none; }
+
+/* Dark-outline classes — Source rule: 지방도 · 구도 · 면도 · 이도 use the Dark Outline */
+.csi-route--provincial,
+.csi-route--other { --csi-casing-color: var(--csi-casing-dark); }
+
+.csi-route--expressway   { --csi-core: var(--csi-expressway); }
+.csi-route--national     { --csi-core: var(--csi-national); }
+.csi-route--provincial   { --csi-core: var(--csi-provincial); }
+.csi-route--metropolitan { --csi-core: var(--csi-metropolitan); }
+.csi-route--city-county  { --csi-core: var(--csi-city-county); }
+.csi-route--other        { --csi-core: var(--csi-other); }
+.csi-route--project      { --csi-core: var(--csi-project); }
+
+/* 공사중 — under construction: white blocks cut into the core, 32u on / 32u off */
+.csi-route--under-construction {
+  background-image: repeating-linear-gradient(
+    90deg,
+    #FFFFFF 0 calc(32 * var(--csi-u)),
+    transparent calc(32 * var(--csi-u)) calc(64 * var(--csi-u))
+  );
+}
+
+/* 계획 — planned: 45 degree white hatch plus a white lightening wash */
+.csi-route--planned {
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.5) 0 calc(1.077 * var(--csi-u)),
+      transparent calc(1.077 * var(--csi-u)) calc(7.010 * var(--csi-u))
+    ),
+    linear-gradient(rgba(255, 255, 255, var(--csi-plan-wash, 0)), rgba(255, 255, 255, var(--csi-plan-wash, 0)));
+}
+.csi-route--planned.csi-route--expressway,
+.csi-route--planned.csi-route--national     { --csi-plan-wash: 0.3; }
+.csi-route--planned.csi-route--metropolitan,
+.csi-route--planned.csi-route--city-county  { --csi-plan-wash: 0.5; }
+.csi-route--planned.csi-route--other            { --csi-core: #DDDDDD; }
+.csi-route--under-construction.csi-route--other { --csi-core: #DDDDDD; }
+
+/* 철도선 — railway: thinner dark core carrying a white dash pattern */
+.csi-route--railway {
+  --csi-line: 8;
+  --csi-casing: 2.694;
+  --csi-core: var(--csi-railway);
+  --csi-shadow-blur: 4.041;
+}
+.csi-railway-dash {
+  position: absolute;
+  left: 0; right: 0; top: 50%;
+  height: calc(4 * var(--csi-u));
+  transform: translateY(-50%);
+  background-image: repeating-linear-gradient(
+    90deg,
+    #FFFFFF 0 calc(40 * var(--csi-u)),
+    transparent calc(40 * var(--csi-u)) calc(80 * var(--csi-u))
+  );
+}
+.csi-route--railway.csi-route--planned {
+  /* Railway planned uses a washed core and dashed casing, never the road hatch. */
+  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+}
+.csi-route--railway.csi-route--under-construction {
+  /* Railway construction keeps the dark core; state is carried by its 6/6 casing. */
+  background-image: none;
+}
+
+/* Railway 계획 / 공사중 replace the solid casing with a dashed casing. */
+.csi-route-dashed-casing {
+  position: relative;
+  padding: calc(var(--csi-rail-casing, 2.694) * var(--csi-u)) 0;
+  filter: drop-shadow(0 0 calc(var(--csi-shadow-blur) * var(--csi-u)) rgba(0, 0, 0, var(--csi-shadow-alpha)));
+  background-image: repeating-linear-gradient(
+    90deg,
+    #FFFFFF 0 calc(var(--csi-dash, 2) * var(--csi-u)),
+    transparent calc(var(--csi-dash, 2) * var(--csi-u)) calc(2 * var(--csi-dash, 2) * var(--csi-u))
+  );
+}
+.csi-route-dashed-casing--underConstruction {
+  --csi-rail-casing: 2;
+  --csi-shadow-blur: 6;
+}
+.csi-route-dashed-casing > .csi-route { box-shadow: none; filter: none; }
+
+/* 사업노선 원형마커 — project route terminal marker: Circle at 150% of the line */
+.csi-route-marker {
+  position: relative;
+  z-index: 1;
+  width: calc(1.5 * var(--csi-line) * var(--csi-u));
+  height: calc(1.5 * var(--csi-line) * var(--csi-u));
+  border-radius: 50%;
+  /* route.md 5.1.1: the authored gradient is a circle of 72.24% of the disc diameter,
+     centred at 65.04% / 29.35%. Without an explicit size the browser would use
+     farthest-corner (~97%) and the disc would reach #910101 much too late. */
+  background: radial-gradient(
+    circle calc(0.7224 * 1.5 * var(--csi-line) * var(--csi-u)) at 65.04% 29.35%,
+    #FFC8C8 0%,
+    #D21203 23.56%,
+    #910101 100%
+  );
+  box-shadow: 0 0 0 calc(var(--csi-casing) * var(--csi-u)) var(--csi-casing-light);
+  filter: drop-shadow(0 0 calc(var(--csi-shadow-blur) * var(--csi-u)) rgba(0, 0, 0, var(--csi-shadow-alpha)));
+  flex: none;
+}
+
+.csi-project-route { display: flex; align-items: center; }
+.csi-project-route > .csi-route { flex: 1 1 auto; }
+.csi-project-route > .csi-route-marker { margin: 0 calc(-0.5 * var(--csi-line) * var(--csi-u)); position: relative; }
+
+/* ============================================================
+   2. 노선 정보 표기 — Route information labelling
+   ============================================================ */
+
+/* 2.1 노선명 — route name badge (dynamic text) */
+.csi-route-name {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: calc(54 * var(--csi-u));
+  padding: 0 calc(9 * var(--csi-u));
+  border-radius: calc(10 * var(--csi-u));
+  background: var(--csi-name-surface);
+  color: var(--csi-name-text);
+  box-shadow: inset 0 0 0 calc(4 * var(--csi-u)) var(--csi-name-border, rgba(0, 0, 0, 0.4));
+  font-size: calc(var(--csi-name-size, 31.695) * var(--csi-u));
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: var(--csi-name-track, -0.0366em);
+  white-space: nowrap;
+}
+.csi-route-name > span { position: relative; top: calc(-0.9 * var(--csi-u)); }
+
+/* The Source advance of 28u already contains the tracking, and the Source box is
+   exactly 2 x 9u padding + n x 28u, so the trailing letter-space is NOT compensated. */
+
+.csi-route-name--expressway   { --csi-name-surface: #2E619A; --csi-name-text: #FFFFFF; }
+.csi-route-name--national     { --csi-name-surface: #203E6F; --csi-name-text: #FFFFFF; }
+.csi-route-name--provincial   { --csi-name-surface: #DBB860; --csi-name-text: #000000; }
+.csi-route-name--metropolitan { --csi-name-surface: #9729E5; --csi-name-text: #FFFFFF; }
+.csi-route-name--city-county  { --csi-name-surface: #499A02; --csi-name-text: #FFFFFF; }
+.csi-route-name--other        { --csi-name-surface: #FFFFFF; --csi-name-text: #000000; }
+.csi-route-name--railway      { --csi-name-surface: #FFFFFF; --csi-name-text: #000000;
+                                --csi-name-border: rgba(0, 0, 0, 0.6); }
+
+/* 2.2 노선번호 — route number badge (dynamic text), 64u base */
+.csi-route-number {
+  --csi-badge: 64;
+  --csi-badge-outline: 3.2;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex: none;
+  color: var(--csi-number-text, #FFFFFF);
+  font-size: calc(var(--csi-number-size, 35.409) * var(--csi-u));
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.051em;
+  white-space: nowrap;
+  filter: drop-shadow(0 0 calc(3.2 * var(--csi-u)) rgba(0, 0, 0, 0.25));
+}
+.csi-number-text { position: relative; z-index: 1; top: calc(var(--csi-number-shift, -1.63) * var(--csi-u)); }
+
+/* 국도 — circle */
+.csi-route-number--circle {
+  width: calc(var(--csi-badge) * var(--csi-u));
+  height: calc(var(--csi-badge) * var(--csi-u));
+  border-radius: 50%;
+  background: #003B7E;
+  box-shadow: inset 0 0 0 calc(var(--csi-badge-outline) * var(--csi-u)) #FFFFFF;
+}
+
+/* 지방도 — rectangle, centred 3.2u dark outline */
+.csi-route-number--rect {
+  --csi-number-shift: -2.18;
+  width: calc(1.25 * var(--csi-badge) * var(--csi-u));
+  height: calc(0.75 * var(--csi-badge) * var(--csi-u));
+  border: calc(var(--csi-badge-outline) * var(--csi-u)) solid #000000;
+  border-radius: calc(0.5 * var(--csi-badge-outline) * var(--csi-u));
+  background: #DBB860;
+  --csi-number-text: #000000;
+}
+
+/* 시도 · 군도 — hexagon, 1.125 x 1.0 of the badge base */
+.csi-route-number--hexagon {
+  --csi-number-shift: -3.61;
+  width: calc(1.125 * var(--csi-badge) * var(--csi-u));
+  height: calc(var(--csi-badge) * var(--csi-u));
+  --csi-number-text: #000000;
+  background: none;
+}
+.csi-hex {
+  position: absolute;
+  inset: 0;
+  clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
+  background: #FFFFFF;
+}
+.csi-hex-rule {
+  position: absolute;
+  inset: calc(3.4 * var(--csi-u)) calc(3.9 * var(--csi-u));
+  clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
+  background: #000000;
+}
+.csi-hex-rule::after {
+  content: '';
+  position: absolute;
+  inset: calc(0.4 * var(--csi-u));
+  clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%);
+  background: #FFFFFF;
+}
+
+/* 고속도로 — national expressway shield (irreducible symbol geometry) */
+.csi-route-number--shield {
+  width: calc(var(--csi-badge) * var(--csi-u));
+  height: calc(71.2 * var(--csi-u));
+  background: none;
+  align-items: flex-start;
+}
+.csi-route-number--shield > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.csi-route-number--shield { --csi-number-shift: 0; }
+.csi-route-number--shield > .csi-number-text { margin-top: calc(22.03 * var(--csi-u)); }
+
+/* ============================================================
+   3. 방면 표기 — Direction (bound-for) badge
+   ============================================================ */
+
+.csi-direction {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: calc(50 * var(--csi-u));
+  padding: 0 calc(18.516 * var(--csi-u));
+  gap: calc(8.227 * var(--csi-u));
+  border-radius: calc(25 * var(--csi-u));
+  background: #00916C;
+  box-shadow: inset 0 0 0 calc(2 * var(--csi-u)) rgba(255, 255, 255, 0.8);
+  color: #FFFFFF;
+  font-size: calc(27.834 * var(--csi-u));
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.0017em;
+  white-space: nowrap;
+}
+
+.csi-direction-text { position: relative; top: calc(-1.5 * var(--csi-u)); }
+.csi-direction-arrow { flex: none; display: block; }
+
+/* ============================================================
+   4. 행정구역 표기 — Administrative district labelling
+   ============================================================ */
+
+.csi-admin { display: inline-flex; align-items: center; }
+
+/* 4.1 기본형 — plain outlined text over the map */
+.csi-admin--plain {
+  color: #FFFFFF;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  font-size: calc(var(--csi-admin-size) * var(--csi-u));
+  letter-spacing: calc(var(--csi-admin-track) * var(--csi-u));
+  paint-order: stroke fill;
+  -webkit-text-stroke: calc(2 * var(--csi-admin-outline) * var(--csi-u)) #000000;
+}
+
+
+.csi-admin--plain.csi-admin--sigun         { --csi-admin-size: 69.674; --csi-admin-outline: 4.714; --csi-admin-track: 45.79; }
+.csi-admin--plain.csi-admin--eupmyeondong  { --csi-admin-size: 57.602; --csi-admin-outline: 3.367; --csi-admin-track: 35.85; }
+.csi-admin--plain.csi-admin--ri            { --csi-admin-size: 47.704; --csi-admin-outline: 2.694; --csi-admin-track: 32.47; }
+
+/* 4.2 강조형 — one bevelled tile per character */
+.csi-admin--tiles { gap: calc(var(--csi-tile-gap) * var(--csi-u)); }
+.csi-admin-tile {
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  position: relative;
+  flex: none;
+  width: calc(var(--csi-tile) * var(--csi-u));
+  height: calc(var(--csi-tile) * var(--csi-u));
+  border-radius: calc(var(--csi-tile-radius) * var(--csi-u));
+  background: var(--csi-tile-frame);
+  border: calc(var(--csi-tile-stroke) * var(--csi-u)) solid var(--csi-tile-stroke-color);
+  /* spatial-map.md 6.2: offset X = Y (45 deg); ratio and alpha differ per level. */
+  filter: drop-shadow(
+    calc(var(--csi-tile-shadow-offset) * var(--csi-tile) * var(--csi-u))
+    calc(var(--csi-tile-shadow-offset) * var(--csi-tile) * var(--csi-u))
+    calc(var(--csi-tile-shadow-blur) * var(--csi-tile) * var(--csi-u))
+    rgba(0, 0, 0, var(--csi-tile-shadow-alpha)));
+}
+.csi-admin-tile::before {
+  content: '';
+  position: absolute;
+  inset: calc(var(--csi-tile-inset) * var(--csi-u));
+  border-radius: calc(var(--csi-tile-inner-radius) * var(--csi-u));
+  background: var(--csi-tile-face);
+  opacity: var(--csi-tile-face-opacity, 1);
+  /* color.md 5.3.1 LAYER 4: the 읍·면·동 inset face is a MULTIPLY composite, not plain
+     alpha. Under plain alpha the tile bottom reads lighter than its own face colour
+     (#5F5555 vs the authored #1C0E0D) and the bevel inverts. */
+  mix-blend-mode: var(--csi-tile-face-blend, normal);
+}
+.csi-admin-tile > span {
+  position: relative;
+  top: calc(var(--csi-tile-shift) * var(--csi-u));
+  z-index: 1;
+  color: var(--csi-tile-text);
+  font-weight: 700;
+  line-height: 1;
+  font-size: calc(var(--csi-tile-font) * var(--csi-u));
+}
+
+/* Light tiers — 시 · 군 and 리 */
+.csi-admin--tiles.csi-admin--sigun,
+.csi-admin--tiles.csi-admin--ri {
+  --csi-tile-frame: #FFFFFF;
+  --csi-tile-stroke-color: #5A5A5A;
+  /* authored: the face gradient maps to the inset box exactly, 0% -> 100%. */
+  --csi-tile-face: linear-gradient(180deg, #BFBFBF 0%, #FFFFFF 100%);
+  --csi-tile-text: #404040;
+  --csi-tile-shadow-offset: 0.03891;
+  --csi-tile-shadow-blur: 0.03891;
+  --csi-tile-shadow-alpha: 0.55;
+}
+/* Dark tier — 읍 · 면 · 동 */
+.csi-admin--tiles.csi-admin--eupmyeondong .csi-admin-tile {
+  box-shadow: 0 0 0 calc(2.873 * var(--csi-u)) #F6F7F7;
+}
+.csi-admin--tiles.csi-admin--eupmyeondong {
+  /* color.md 5.3.1 - the full authored stop lists. The face peaks at #866A4A and
+     comes back down; the first four stops alone read as a plain rising ramp. */
+  --csi-tile-frame: linear-gradient(180deg,
+    #130B00 -1.41%, #2E2111 0.38%, #4E3B26 3.05%, #665035 6.63%, #785E41 9.30%,
+    #826747 12.87%, #866A4A 16.44%, #745C3D 26.25%, #4C3D21 43.20%, #3C2D1A 52.12%,
+    #1C0E0D 65.50%);
+  /* inner border is a horizontal gradient, not a flat stroke; it spans the border box. */
+  --csi-tile-border-paint: linear-gradient(90deg,
+    #413622 0%, #837559 10%, #D7C5A0 23%, #F9E6BD 29%, #F5E2BA 39%, #EBD9B2 48%,
+    #DAC9A5 55%, #C3B293 63%, #A4957C 69%, #93856F 73%);
+  --csi-tile-stroke-color: transparent;
+  /* inset face is the authored white->black axis clipped to the inset box, at 0.3. */
+  --csi-tile-face: linear-gradient(180deg,
+    #6C6C6C 0%, #777777 4.27%, #A7A7A7 28.94%, #CDCDCD 50.70%, #E8E8E8 71.02%,
+    #F9F9F9 88.43%, #FEFEFE 100%);
+  --csi-tile-face-opacity: 0.3;
+  --csi-tile-face-blend: multiply;
+  --csi-tile-text: #FFFFFF;
+  --csi-tile-shadow-offset: 0.03443;
+  --csi-tile-shadow-blur: 0.05509;
+  --csi-tile-shadow-alpha: 0.75;
+}
+
+.csi-admin--tiles.csi-admin--eupmyeondong .csi-admin-tile {
+  background:
+    var(--csi-tile-frame) padding-box,
+    var(--csi-tile-border-paint) border-box;
+}
+
+.csi-admin--tiles.csi-admin--sigun {
+  --csi-tile: 98.428; --csi-tile-radius: 9.191; --csi-tile-stroke: 1.532;
+  --csi-tile-inset: 7.493; --csi-tile-inner-radius: 6.127; --csi-tile-gap: 25.465; --csi-tile-font: 64.965; --csi-tile-shift: -3.07;
+}
+.csi-admin--tiles.csi-admin--eupmyeondong {
+  --csi-tile: 81.349; --csi-tile-radius: 15.011; --csi-tile-stroke: 2.873;
+  --csi-tile-inset: 6.292; --csi-tile-inner-radius: 10.142; --csi-tile-gap: 15.030; --csi-tile-font: 56.943; --csi-tile-shift: -3.19;
+}
+.csi-admin--tiles.csi-admin--ri {
+  --csi-tile: 64.314; --csi-tile-radius: 6.005; --csi-tile-stroke: 1.001;
+  --csi-tile-inset: 4.895; --csi-tile-inner-radius: 4.004; --csi-tile-gap: 16.636; --csi-tile-font: 41.924; --csi-tile-shift: -2.86;
+}
+
+/* ============================================================
+   5. 방위 표기 — North arrow
+   ============================================================ */
+
+.csi-north { position: relative; flex: none; }
+
+.csi-north-direction {
+  position: absolute;
+  inset: 0;
+  transform: rotate(var(--csi-north-angle, 0deg));
+  transform-origin: calc(74.4 * var(--csi-u)) calc(121.536 * var(--csi-u));
+}
+.csi-north--simple .csi-north-direction {
+  transform-origin: calc(98.03 * var(--csi-u)) calc(121.186 * var(--csi-u));
+}
+
+.csi-north--full {
+  width: calc(149 * var(--csi-u));
+  height: calc(229 * var(--csi-u));
+}
+.csi-north-ring {
+  position: absolute;
+  /* spatial-map.md §8.1 "Stroke extent 규약": the declared 143.538 u diameter is the stroke
+     CENTRE LINE, not the painted extent — painted outer = 143.538 + 5.260 = 148.798 u, which is
+     what the authored Source 방위 표기/기본형.svg measures (path box 143.538, stroke 5.2604
+     painted centred, so the paint reaches 0.001 .. 148.799 inside the 149 u box).
+     This element is a border-box, so its width must be the PAINTED outer diameter and its origin
+     the painted origin; centre stays (74.40, 121.536).
+     ⚠ Before 2026-09-19 this box was 143.538 u with an inside stroke, which drew the disc one
+     stroke width too small (centre line 138.278 u) — see REFERENCE_ERROR RE-01. */
+  left: calc(0.001 * var(--csi-u));
+  top: calc(47.137 * var(--csi-u));
+  width: calc(148.798 * var(--csi-u));
+  height: calc(148.798 * var(--csi-u));
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: #FFFFFF;
+  border: calc(5.26 * var(--csi-u)) solid #D64000;
+}
+.csi-north-ring::after {
+  content: '';
+  position: absolute;
+  /* Inner ring: centre-line diameter 122.006 u, stroke 1.753 u (§8.1 Confirmed), so its painted
+     outer is 123.759 u. The inset is measured from this element's padding box
+     (148.798 - 2*5.26 = 138.278 u): (138.278 - 123.759) / 2 = 7.260 u. */
+  inset: calc(7.26 * var(--csi-u));
+  border-radius: 50%;
+  border: calc(1.753 * var(--csi-u)) solid #D64000;
+}
+.csi-north-needle {
+  position: absolute;
+  inset: 0;
+  background: #D64000;
+  clip-path: polygon(49.93% 0%, 11.83% 99.59%, 49.93% 81.52%, 88.04% 99.59%);
+}
+.csi-north-label {
+  position: absolute;
+  left: 0; right: 0;
+  top: calc(98.061 * var(--csi-u));
+  text-align: center;
+  color: #FFFFFF;
+  -webkit-text-stroke: calc(5.782 * var(--csi-u)) #761D00;
+  paint-order: stroke fill;
+  font-size: calc(42.029 * var(--csi-u));
+  font-weight: 700;
+  line-height: 1;
+}
+
+.csi-north--simple {
+  width: calc(197 * var(--csi-u));
+  height: calc(219 * var(--csi-u));
+}
+.csi-north--simple .csi-north-ring {
+  left: calc(20.63 * var(--csi-u));
+  top: calc(43.786 * var(--csi-u));
+  width: calc(154.8 * var(--csi-u));
+  height: calc(154.8 * var(--csi-u));
+  background: transparent;
+  border: calc(8.6 * var(--csi-u)) solid #000000;
+}
+.csi-north--simple .csi-north-ring::after { content: none; }
+.csi-north--simple .csi-north-needle {
+  background: #000000;
+  clip-path: polygon(46.12% 18.83%, 54.52% 18.83%, 51.13% 54.95%, 49.17% 54.95%);
+}
+.csi-north--simple .csi-north-label {
+  top: calc(-10.012 * var(--csi-u));
+  left: 0;
+  right: calc(197 * var(--csi-u) - 2 * 98.03 * var(--csi-u));
+  color: #000000;
+  -webkit-text-stroke: 0;
+  font-size: calc(49.659 * var(--csi-u));
+  font-weight: 400;
+}
+
+/* ============================================================
+   6. 구역 표현 — Region boundary line
+   ============================================================ */
+
+.csi-boundary {
+  height: calc(var(--csi-boundary-weight) * var(--csi-u));
+}
+.csi-boundary--solid {
+  --csi-boundary-weight: 3;
+  --csi-boundary-glow: 5.388;
+  background: #FFFFFF;
+  filter: drop-shadow(0 0 calc(var(--csi-boundary-glow) * var(--csi-u)) rgba(0, 0, 0, 1));
+}
+.csi-boundary--dashed {
+  --csi-boundary-weight: 2;
+  background-image: repeating-linear-gradient(
+    90deg,
+    #FFFFFF 0 calc(10 * var(--csi-u)),
+    transparent calc(10 * var(--csi-u)) calc(12 * var(--csi-u))
+  );
+}
+
+/* ============================================================
+   7. 사업 시 · 종점 표기 — Project extent labelling
+   ============================================================ */
+
+/* The authored 기본형 lays three layers under the annotation: a warm corridor wash
+   starting at the extent band and fading over 238.383 u, a dark scrim across the band
+   row, and a white rail on each Arrowhead apex axis. The wash is authored as
+   #FFEDDE -> #9E5518(alpha 0) painted at 40 % multiply; over a light surface that
+   composites identically to the source-over ramp below, sampled every 10 % so CSS
+   premultiplied interpolation reproduces the SVG's non-premultiplied ramp. */
+.csi-extent {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding-bottom: calc(var(--csi-extent-corridor, 370.259) * var(--csi-u));
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 237, 222, 0.40) 0%,
+    rgba(245, 222, 202, 0.36) 10%,
+    rgba(236, 207, 182, 0.32) 20%,
+    rgba(226, 191, 163, 0.28) 30%,
+    rgba(216, 176, 143, 0.24) 40%,
+    rgba(207, 161, 123, 0.20) 50%,
+    rgba(197, 146, 103, 0.16) 60%,
+    rgba(187, 131, 83, 0.12) 70%,
+    rgba(177, 115, 64, 0.08) 80%,
+    rgba(168, 100, 44, 0.04) 90%,
+    rgba(158, 85, 24, 0) 100%
+  );
+  background-repeat: no-repeat;
+  background-position: 0 calc(95.906 * var(--csi-u));
+  background-size: 100% calc(var(--csi-extent-wash-depth, 238.383) * var(--csi-u));
+}
+.csi-extent::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 0;
+  height: calc(96.667 * var(--csi-u));
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 23.59%, rgba(0, 0, 0, 0.5) 95.79%);
+}
+/* Rails are 2.995 u wide, centred on the two apex axes, and fade inward. The authored
+   specimen runs them 370.259 u below the band; here they take the corridor's depth so
+   the two stay locked together when --csi-extent-corridor is overridden. */
+.csi-extent::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(95.906 * var(--csi-u));
+  bottom: 0;
+  z-index: 0;
+  background-image:
+    linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%),
+    linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
+  background-repeat: no-repeat, no-repeat;
+  background-size: calc(2.995 * var(--csi-u)) 100%;
+  background-position: left calc(1.297 * var(--csi-u)) top, right calc(3.503 * var(--csi-u)) top;
+}
+.csi-extent--vertical::before,
+.csi-extent--vertical::after,
+.csi-extent--regions::after { content: none; }
+.csi-extent-row {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: stretch;
+  height: calc(96.667 * var(--csi-u));
+}
+.csi-extent-flag {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  box-sizing: border-box;
+  height: 100%;
+  background: #6A0800;
+  color: #FFFFFF;
+  font-size: calc(36 * var(--csi-u));
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+/* Authored silhouette: a body rect and a tail piece overlapped by 2.995 u. Merged, the
+   flat top runs 10.579 u past the text and the taper falls 58.306 u across the full
+   96.667 u height. The 66 u in spatial-section.md 8.3.4 is the tail piece's own bbox --
+   an authoring artifact of the same kind as the Arrowhead stub in 8.7.3. */
+.csi-extent-flag--start {
+  padding: 0 calc(68.885 * var(--csi-u)) 0 calc(17.97 * var(--csi-u));
+  border-top-left-radius: calc(11.98 * var(--csi-u));
+  clip-path: polygon(0 0, calc(100% - 58.306 * var(--csi-u)) 0, 100% 100%, 0 100%);
+}
+.csi-extent-flag--end {
+  padding: 0 calc(17.97 * var(--csi-u)) 0 calc(68.885 * var(--csi-u));
+  border-top-right-radius: calc(11.98 * var(--csi-u));
+  clip-path: polygon(calc(58.306 * var(--csi-u)) 0, 100% 0, 100% 100%, 0 100%);
+}
+.csi-extent-spacer { flex: 1 1 auto; }
+
+/* spatial-section.md 8.7.2: the terminal Arrowhead is an equilateral triangle with apex 60deg,
+   axis-direction height = 2t and base = 4t/sqrt(3), where t is the extent band thickness. With the
+   authored Family A t (17.958-17.971) that is height 35.941 and base 41.5 -- the same pair the
+   vertical variant below already uses, as 8.7.5 requires. 8.7.4 also makes Start and End Terminal
+   graphically identical, so both ends take the same axial length. */
+.csi-extent-arrow {
+  position: absolute;
+  z-index: 1;
+  left: calc(2.795 * var(--csi-u));
+  right: calc(5 * var(--csi-u));
+  top: calc(74.45 * var(--csi-u));
+  height: calc(41.5 * var(--csi-u));
+  background: #D21203;
+  clip-path: polygon(
+    0 50%,
+    calc(35.941 * var(--csi-u)) 0,
+    calc(35.941 * var(--csi-u)) calc(50% - 9 * var(--csi-u)),
+    calc(100% - 35.941 * var(--csi-u)) calc(50% - 9 * var(--csi-u)),
+    calc(100% - 35.941 * var(--csi-u)) 0,
+    100% 50%,
+    calc(100% - 35.941 * var(--csi-u)) 100%,
+    calc(100% - 35.941 * var(--csi-u)) calc(50% + 9 * var(--csi-u)),
+    calc(35.941 * var(--csi-u)) calc(50% + 9 * var(--csi-u)),
+    calc(35.941 * var(--csi-u)) 100%
+  );
+}
+
+.csi-extent-card {
+  position: absolute;
+  left: 50%;
+  top: calc(7.771 * var(--csi-u));
+  transform: translateX(-50%);
+  box-sizing: border-box;
+  /* Authored frame is 714 x 168 u with 5.99 u of white on top and both sides; the fixed
+     height leaves the value row flush with the bottom edge, so there is no bottom pad.
+     Width stays content-driven per spatial-section.md 8.3.3 -- 714 u is an observation. */
+  padding: calc(5.99 * var(--csi-u)) calc(5.99 * var(--csi-u)) 0;
+  border-radius: calc(23.96 * var(--csi-u));
+  background: #FFFFFF;
+  filter: drop-shadow(0 calc(2 * var(--csi-u)) calc(6 * var(--csi-u)) rgba(0, 0, 0, 0.3));
+  z-index: 2;
+}
+.csi-extent-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(90 * var(--csi-u));
+  padding: 0 calc(29.95 * var(--csi-u));
+  border-radius: calc(17.97 * var(--csi-u)) calc(17.97 * var(--csi-u)) 0 0;
+  background: linear-gradient(100deg, #A50D02 0%, #D21203 20%, #EE3A28 46%, #D21203 72%, #A50D02 100%);
+  color: #FFFFFF;
+  font-size: calc(46 * var(--csi-u));
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  -webkit-text-stroke: calc(6 * var(--csi-u)) rgba(0, 0, 0, 0.5);
+  paint-order: stroke fill;
+}
+.csi-extent-length {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(72 * var(--csi-u));
+  border-radius: 0 0 calc(23.96 * var(--csi-u)) calc(23.96 * var(--csi-u));
+  color: #000000;
+  font-size: calc(42 * var(--csi-u));
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* 공구표기 — spatial-section.md 8.3.6 / 8.7.6. The authored 기본형+공구표기 draws the
+   section band and its Arrowheads with the SAME contract and the SAME t as that file's
+   main extent band (both 11.146 u there), only in #6A0800 instead of #D21203. That file
+   is authored at scale family B; 8.7.8 does not promote a family's absolute u, so the
+   section row here takes the rendering t (18 u) and every value below is t-relative.
+   Segments touch apex to apex -- no gap -- and the boundary separator stands on that
+   contact point at t/6. */
+.csi-extent-sections {
+  position: absolute;
+  z-index: 1;
+  left: calc(2.795 * var(--csi-u));
+  right: calc(5 * var(--csi-u));
+  top: calc(var(--csi-section-top, 305.7) * var(--csi-u));
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.csi-extent--sections { --csi-extent-corridor: 406; }
+.csi-extent-section-boundary {
+  position: absolute;
+  left: calc(-1.5 * var(--csi-u));
+  width: calc(3 * var(--csi-u));            /* t / 6 */
+  /* Starts at the main band's lower edge (104.179u) and runs the authored proportion
+     past the section axis. Exact lower endpoint remains Canonical TBD. */
+  top: calc((104.179 - var(--csi-section-top, 305.7)) * var(--csi-u));
+  height: calc(var(--csi-separator-depth, 340.3) * var(--csi-u));
+  background: #fff;
+}
+.csi-extent-section {
+  position: relative;
+  /* Preserve length-proportional allocation; long tags remain visible overflow. */
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(73.53 * var(--csi-u));
+}
+.csi-extent-section::before {
+  content: '';
+  position: absolute;
+  left: 0; right: 0; top: 50%;
+  height: calc(41.5 * var(--csi-u));
+  transform: translateY(-50%);
+  background: #6A0800;
+  filter: drop-shadow(0 calc(3 * var(--csi-u)) calc(3 * var(--csi-u)) #3F2F1D);
+  clip-path: polygon(
+    0 50%,
+    calc(35.941 * var(--csi-u)) 0,
+    calc(35.941 * var(--csi-u)) calc(50% - 9 * var(--csi-u)),
+    calc(100% - 35.941 * var(--csi-u)) calc(50% - 9 * var(--csi-u)),
+    calc(100% - 35.941 * var(--csi-u)) 0,
+    100% 50%,
+    calc(100% - 35.941 * var(--csi-u)) 100%,
+    calc(100% - 35.941 * var(--csi-u)) calc(50% + 9 * var(--csi-u)),
+    calc(35.941 * var(--csi-u)) calc(50% + 9 * var(--csi-u)),
+    calc(35.941 * var(--csi-u)) 100%
+  );
+}
+.csi-extent-section-pill {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  gap: calc(20.97 * var(--csi-u));                    /* 1.1675 t */
+  height: calc(73.53 * var(--csi-u));
+  padding: 0 calc(var(--csi-section-pill-padding, 35.94) * var(--csi-u)); /* default 2 t */
+  border: calc(2.995 * var(--csi-u)) solid #240301;   /* t / 6 */
+  border-radius: calc(11.98 * var(--csi-u));          /* 2 t / 3 */
+  background: #6A0800;
+  color: #FFFFFF;
+  font-size: calc(26.938 * var(--csi-u));
+  font-weight: 500;
+  line-height: calc(31.602 * var(--csi-u));
+  white-space: nowrap;
+}
+/* Tag reads name (Medium) | length (Bold), split by a thin light divider. */
+.csi-extent-section-pill > span:first-child {
+  -webkit-text-stroke: calc(2 * var(--csi-u)) #000000;
+  paint-order: stroke fill;
+}
+.csi-extent-section-pill > span:last-child { font-weight: 700; }
+.csi-extent-section-pill i {
+  width: calc(1.497 * var(--csi-u));                  /* t / 12 */
+  height: calc(47.43 * var(--csi-u));                 /* 2.641 t */
+  background: rgba(255, 255, 255, 0.5);
+  opacity: 0.85;
+  box-shadow: calc(-1.497 * var(--csi-u)) 0 0 0 rgba(0, 0, 0, 0.8);
+}
+
+/* 행정구역 전환 표기 — vertical region ribbons at both ends. The authored ribbon is a
+   78.545 u #D21203 fill carrying a 2.455 u white stroke, so the outer box is 81 u; that
+   stroke is the one spatial-section.md 11 lists as unrecorded. The element paints the
+   stroke and ::before the fill, because a clip-path cannot carry a stroke. The bottom
+   edge slopes: the OUTWARD edge is 41.835 u shorter than the one at the apex. */
+.csi-extent-region {
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  width: calc(81 * var(--csi-u));
+  padding: calc(36.82 * var(--csi-u)) 0 calc(57.9 * var(--csi-u));
+  background: #FFFFFF;
+  color: #FFFFFF;
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+  font-size: calc(39.672 * var(--csi-u));
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: calc(2.055 * var(--csi-u));
+  text-align: start;
+  white-space: nowrap;
+}
+.csi-extent-region::before {
+  content: '';
+  position: absolute;
+  inset: calc(2.455 * var(--csi-u));
+  z-index: 0;
+  background: #D21203;
+}
+.csi-extent-region > span { position: relative; z-index: 1; }
+/* Each administrative level is its own inline box; the authored gap between levels
+   (about 18.4u) is a margin on the inline axis, not an upright character slot. */
+.csi-extent-region > span > span + span { margin-inline-start: calc(18.4 * var(--csi-u)); }
+.csi-extent-region--start {
+  left: calc(2.795 * var(--csi-u) - 81 * var(--csi-u));
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 41.835 * var(--csi-u)));
+}
+.csi-extent-region--start::before {
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 41.835 * var(--csi-u)));
+}
+.csi-extent-region--end {
+  right: calc(5 * var(--csi-u) - 81 * var(--csi-u));
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 41.835 * var(--csi-u)), 0 100%);
+}
+.csi-extent-region--end::before {
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 41.835 * var(--csi-u)), 0 100%);
+}
+.csi-extent-region-row { display: flex; align-items: start; justify-content: space-between; }
+.csi-extent--regions { padding-bottom: 0; }
+
+/* Vertical layout (세로형) */
+.csi-extent--vertical { display: flex; justify-content: center; padding-bottom: 0; background: none; }
+/* 세로형 is the horizontal corridor turned 90 degrees: the STA. flag column takes the
+   place of the flag row, the band scrim covers that column, and the corridor wash runs
+   outward from the axis over the authored 363.261 u ramp. */
+.csi-extent-vrail {
+  --csi-vaxis-center: 105.635;
+  position: relative;
+  width: calc(478 * var(--csi-u));
+  height: calc(1000 * var(--csi-u));
+  background-image: linear-gradient(
+    90deg,
+    rgba(255, 237, 222, 0.40) 0%,
+    rgba(245, 222, 202, 0.36) 10%,
+    rgba(236, 207, 182, 0.32) 20%,
+    rgba(226, 191, 163, 0.28) 30%,
+    rgba(216, 176, 143, 0.24) 40%,
+    rgba(207, 161, 123, 0.20) 50%,
+    rgba(197, 146, 103, 0.16) 60%,
+    rgba(187, 131, 83, 0.12) 70%,
+    rgba(177, 115, 64, 0.08) 80%,
+    rgba(168, 100, 44, 0.04) 90%,
+    rgba(158, 85, 24, 0) 100%
+  );
+  background-repeat: no-repeat;
+  background-position: calc(var(--csi-vaxis-center) * var(--csi-u)) 0;
+  background-size: calc((478 - var(--csi-vaxis-center)) * var(--csi-u)) 100%;
+}
+/* Horizontal depth/plane split transposed: shadow on the STA side grows darker
+   toward the red axis; the existing light corridor wash stays on the other side.
+   The shadow/wash division and STA terminal edges share the axis center. */
+.csi-extent-vrail::before {
+  content: '';
+  position: absolute;
+  left: calc((var(--csi-vaxis-center) - 96.97) * var(--csi-u));
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  width: calc(96.97 * var(--csi-u));
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 23.59%, rgba(0, 0, 0, 0.5) 95.79%);
+}
+/* Terminal boundaries leave the top/bottom apex at the rail's outer edges.
+   The 35.941 u shaft inset is arrowhead geometry, not a white-boundary inset. */
+.csi-extent-vrail::after {
+  content: '';
+  position: absolute;
+  left: calc(var(--csi-vaxis-center) * var(--csi-u));
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 0;
+  background-image:
+    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%),
+    linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
+  background-repeat: no-repeat, no-repeat;
+  background-size: 100% calc(2.995 * var(--csi-u));
+  background-position: left top, left bottom;
+}
+/* 세로형.svg paints the axis as three separate pieces, in this order after the
+   flags: a straight shaft (x 264.383→282.341, w 17.958) and two arrowheads that
+   protrude past it (x 252.611→294.111, w 41.5; apex 35.941 beyond the barb line),
+   both concentric with the shaft. The shaft is inset by one arrowhead height at
+   each end so the tips still land on the rail ends. */
+.csi-extent-vaxis {
+  position: absolute;
+  z-index: 3;
+  left: calc((var(--csi-vaxis-center) - 9) * var(--csi-u));
+  top: calc(35.941 * var(--csi-u)); bottom: calc(35.941 * var(--csi-u));
+  width: calc(18 * var(--csi-u));
+  background: #D21203;
+}
+.csi-extent-vaxis::before,
+.csi-extent-vaxis::after {
+  position: absolute;
+  left: 50%;
+  width: calc(41.5 * var(--csi-u));
+  height: calc(35.941 * var(--csi-u));
+  transform: translateX(-50%);
+  background: #D21203;
+  content: '';
+}
+.csi-extent-vaxis::before { bottom: 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
+.csi-extent-vaxis::after { top: 100%; clip-path: polygon(50% 100%, 100% 0, 0 0); }
+/* The 세로형 flag is the horizontal flag turned 90 degrees: the same 96.667 u across the
+   axis, the same 17.97 u outer padding and 68.885 u / 58.306 u taper along it, and the
+   same 11.98 u radius on the outer corner away from the axis. Text does not rotate --
+   the label sits on one line and the station value stacks one character per line. */
+.csi-extent-vflag {
+  position: absolute;
+  z-index: 2;
+  left: calc((var(--csi-vaxis-center) - 96.635) * var(--csi-u));
+  box-sizing: border-box;
+  width: calc(96.635 * var(--csi-u));
+  padding: calc(17.97 * var(--csi-u)) calc(14.975 * var(--csi-u));
+  background: #6A0800;
+  color: #FFFFFF;
+  font-size: calc(36 * var(--csi-u));
+  font-weight: 500;
+  line-height: calc(34 * var(--csi-u));
+  text-align: center;
+}
+.csi-extent-vflag--start {
+  top: 0;
+  padding-bottom: calc(68.885 * var(--csi-u));
+  border-top-left-radius: calc(11.98 * var(--csi-u));
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 58.306 * var(--csi-u)));
+}
+.csi-extent-vflag--end {
+  bottom: 0;
+  padding-top: calc(68.885 * var(--csi-u));
+  border-bottom-left-radius: calc(11.98 * var(--csi-u));
+  clip-path: polygon(0 calc(58.306 * var(--csi-u)), 100% 0, 100% 100%, 0 100%);
+}
+.csi-extent-vflag span { display: block; }
+.csi-extent-vflag-label { font-size: calc(30 * var(--csi-u)); line-height: calc(62 * var(--csi-u)); }
+/* The Source paints the card after the axis, so it stays above the raised axis. Its
+   centre sits 44.372 u to the side of the axis that spatial-section.md 8.3.7 records. */
+.csi-extent--vertical .csi-extent-card {
+  z-index: 4;
+  top: 50%;
+  left: calc(61.263 * var(--csi-u));
+  transform: translate(-50%, -50%);
+}
+.csi-extent-vertical-demo {
+  display: flex;
+  justify-content: center;
+  min-height: calc(1000 * var(--csi-u));
+  padding-inline: calc(260 * var(--csi-u));
+  overflow: visible;
+}
+
+/* ============================================================
+   Reference page scaffolding (demo only — not part of the contract)
+   ============================================================ */
+
+.csi-demo { display: grid; gap: 26px; }
+.csi-panel {
+  background: #5C6B57;
+  border-radius: 10px;
+  padding: 20px 22px;
+  display: grid;
+  gap: 16px;
+  overflow-x: auto;
+}
+.csi-panel--light { background: #EFEFEF; }
+.csi-panel h4 { margin: 0; color: #FFFFFF; font-size: 13px; font-weight: 700; }
+.csi-panel--light h4 { color: #222222; }
+.csi-legend { color: rgba(255, 255, 255, 0.78); font-size: 12px; line-height: 1.55; margin: 0; }
+.csi-panel--light .csi-legend { color: #555555; }
+.csi-row { display: flex; align-items: center; gap: 14px; }
+.csi-row--top { align-items: flex-start; }
+.csi-row-label {
+  flex: none; width: 176px; color: rgba(255, 255, 255, 0.88);
+  font-size: 12px; line-height: 1.4;
+}
+.csi-panel--light .csi-row-label { color: #333333; }
+.csi-row-body { flex: 1 1 auto; min-width: 0; }
+.csi-swatchgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px 24px; }
+.csi-note { color: #FFD9A0; font-size: 12px; margin: 0; line-height: 1.55; }
+.csi-panel--light .csi-note { color: #8A5A00; }
+.csi-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
+.csi-controls label { color: rgba(255, 255, 255, 0.88); font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
+.csi-controls input, .csi-controls select { font: inherit; font-size: 12px; padding: 3px 6px; }
+.csi-scale-50 { --csi-u: 0.5px; }
+.csi-scale-40 { --csi-u: 0.4px; }
+.csi-scale-32 { --csi-u: 0.32px; }
+.csi-scale-22 { --csi-u: 0.22px; }
+
+/* Bounded four-specimen review fixture. The fixed frame and compact depths
+   implement the supplied layout target; they are not global section/reflow rules. */
+.csi-spatial-specimens {
+  --csi-specimen-width: 840px;
+  display: grid;
+  gap: 12px;
+  width: var(--csi-specimen-width);
+  --csi-extent-corridor: 206;
+  --csi-extent-wash-depth: 206;
+  --csi-section-top: 209;
+  --csi-separator-depth: 190;
+  /* Compact outer padding keeps adjacent text pills independent without
+     shrinking text or changing the length-proportional segment allocation. */
+  --csi-section-pill-padding: 14;
+}
+.csi-spatial-specimens > :last-child { margin-top: 14px; }
+.csi-specimen-frame { width: var(--csi-specimen-width, 840px); }
+.csi-specimen-frame > .csi-extent { width: 100%; }
+.csi-specimen-frame > .csi-extent--sections { --csi-extent-corridor: 296; }
+/* Reserve both ribbon widths inside the shared frame. Their outward silhouette
+   reaches the frame edges, while the inner axis and title stay centered. */
+.csi-specimen-frame > .csi-extent--regions {
+  width: calc(100% - 162 * var(--csi-u));
+  margin-inline: calc(81 * var(--csi-u));
+}
+.csi-specimen-frame .csi-extent-region--start { left: calc(-81 * var(--csi-u)); }
+.csi-specimen-frame .csi-extent-region--end { right: calc(-81 * var(--csi-u)); }
+/* Center the vertical text column inside the ribbon; an inline vertical box can
+   include font ascent outside its containing silhouette on fallback fonts. */
+.csi-specimen-frame .csi-extent-region { display: flex; align-items: center; }
+.csi-specimen-frame .csi-extent-region > span { display: block; }
diff --git a/packages/center-graphic/src/components/CenterSpatialInformation.tsx b/packages/center-graphic/src/components/CenterSpatialInformation.tsx
new file mode 100644
index 0000000..642fd9a
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterSpatialInformation.tsx
@@ -0,0 +1,633 @@
+import { useMemo, useState, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import './CenterSpatialInformation.css';
+
+/*
+ * CENTER Spatial Information Representation (공간정보 표현)
+ * React Reference Implementation.
+ *
+ * This is a Reference Implementation, NOT a Canonical Contract. It exists to
+ * verify the geometry, typography, surface and dynamic-content rules extracted
+ * in verification/center-spatial-information/SOURCE-ANALYSIS.md against the
+ * Source SVGs and 시안 mockups.
+ *
+ * Runtime dependency on the Source assets is ZERO:
+ *   - no <img>, no background-image, no embedded Source SVG file,
+ *   - every text string is real DOM text, never an outlined glyph path,
+ *   - every surface, outline, dash, hatch and marker is rebuilt from the
+ *     primitives published in the Contract Proposal.
+ *
+ * The only inline vector shapes are the two 방위 needles (reconstructed from
+ * 4-point polygons, expressed as clip-path in CSS) and the 고속도로 route-number
+ * shield, which is irreducible symbol geometry. Its normalised path data is
+ * published in the Contract Proposal §12.4 so any renderer can redraw it from
+ * the document alone.
+ *
+ * All geometry is expressed in design units (u); 1u is set by --csi-u.
+ */
+
+/* ------------------------------------------------------------------
+ * Route classes — Source: 노선 유형별 구분 + 노선 정보 표기
+ * ------------------------------------------------------------------ */
+
+export const ROUTE_CLASSES = Object.freeze({
+  expressway: Object.freeze({
+    key: 'expressway', label: '고속도로', modifier: 'expressway',
+    line: '#0D6199', casing: 'light', numberShape: 'shield', sampleName: '고속도로', sampleNumber: '66',
+  }),
+  national: Object.freeze({
+    key: 'national', label: '국도', modifier: 'national',
+    line: '#203E6F', casing: 'light', numberShape: 'circle', sampleName: '국도', sampleNumber: '32',
+  }),
+  provincial: Object.freeze({
+    key: 'provincial', label: '지방도', modifier: 'provincial',
+    line: '#DBB860', casing: 'dark', numberShape: 'rect', sampleName: '지방도', sampleNumber: '123',
+  }),
+  metropolitan: Object.freeze({
+    key: 'metropolitan', label: '특별시도 · 광역시도', modifier: 'metropolitan',
+    line: '#A862C9', casing: 'light', numberShape: null, sampleName: '특별시도', sampleNumber: null,
+  }),
+  cityCounty: Object.freeze({
+    key: 'cityCounty', label: '시도 · 군도', modifier: 'city-county',
+    line: '#499A02', casing: 'light', numberShape: 'hexagon', sampleName: '시도/군도', sampleNumber: '66',
+  }),
+  other: Object.freeze({
+    key: 'other', label: '구도 · 면도 · 이도 (기타도로)', modifier: 'other',
+    line: '#FFFFFF', casing: 'dark', numberShape: null, sampleName: '구도·면도·이도', sampleNumber: null,
+  }),
+  railway: Object.freeze({
+    key: 'railway', label: '철도선', modifier: 'railway',
+    line: '#333333', casing: 'light', numberShape: null, sampleName: '철도선', sampleNumber: null,
+  }),
+});
+
+export type RouteClassKey = keyof typeof ROUTE_CLASSES;
+
+export const ROUTE_STATES = Object.freeze(['existing', 'underConstruction', 'planned'] as const);
+export type RouteState = (typeof ROUTE_STATES)[number];
+
+const STATE_LABEL: Record<RouteState, string> = { existing: '기본', underConstruction: '공사중', planned: '계획(예정)' };
+
+/* ------------------------------------------------------------------
+ * 1. 노선 — Route line
+ * ------------------------------------------------------------------ */
+
+export function RouteLine({ routeClass = 'national', state = 'existing', shadow = true, style, ...rest }: {
+  routeClass?: RouteClassKey;
+  state?: RouteState;
+  shadow?: boolean;
+  style?: CSSProperties;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'style'>) {
+  const cls = ROUTE_CLASSES[routeClass] ?? ROUTE_CLASSES.national;
+  const isRailway = cls.key === 'railway';
+
+  const core = (
+    <div
+      className={[
+        'csi-route',
+        `csi-route--${cls.modifier}`,
+        state === 'underConstruction' ? 'csi-route--under-construction' : '',
+        state === 'planned' ? 'csi-route--planned' : '',
+        shadow ? '' : 'csi-route--no-shadow',
+      ].filter(Boolean).join(' ')}
+      style={isRailway ? undefined : style}
+      {...(isRailway ? {} : rest)}
+    >
+      {isRailway ? <span className="csi-railway-dash" /> : null}
+    </div>
+  );
+
+  /* 철도선 계획 / 공사중 swap the solid casing for a dashed casing. */
+  if (isRailway && state !== 'existing') {
+    return (
+      <div
+        className={`csi-route-dashed-casing csi-route-dashed-casing--${state} csi-route--railway`}
+        style={{ '--csi-dash': state === 'planned' ? 2 : 6, ...style } as CSSProperties}
+        {...rest}
+      >
+        {core}
+      </div>
+    );
+  }
+  return core;
+}
+
+/* 사업노선 — project route: a #D21203 line terminated by circular markers. */
+export function ProjectRoute({ markers = true, style, ...rest }: { markers?: boolean; style?: CSSProperties } & Omit<HTMLAttributes<HTMLDivElement>, 'style'>) {
+  return (
+    <div className="csi-project-route" style={style} {...rest}>
+      {markers ? <span className="csi-route-marker" /> : null}
+      <RouteLine routeClass="national" state="existing" style={{ '--csi-core': '#D21203' } as CSSProperties} />
+      {markers ? <span className="csi-route-marker" /> : null}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------
+ * 2. 노선 정보 표기 — Route information labelling (DYNAMIC TEXT)
+ * ------------------------------------------------------------------ */
+
+/* 2.1 노선명 — route name. Content-driven width, fixed 54u height. */
+export function RouteNameBadge({ routeClass = 'national', name, lang = 'ko' }: { routeClass?: RouteClassKey; name?: string | null; lang?: string }) {
+  const cls = ROUTE_CLASSES[routeClass] ?? ROUTE_CLASSES.national;
+  return (
+    <span className={`csi-route-name csi-route-name--${cls.modifier}`} lang={lang}>
+      <span>{name ?? cls.sampleName}</span>
+    </span>
+  );
+}
+
+/* Irreducible symbol geometry — 고속도로 route-number shield.
+ * Contract §12.4. Coordinates are the Source coordinates of the 64u badge;
+ * the viewBox crops to the shield's own visual bounds so the element box is
+ * exactly 64u x 71.2u. */
+const SHIELD_VIEWBOX = '8 4.29 64.001 71.201';
+const SHIELD_BODY =
+  'M64.9492 26.85H14.9492L15.5492 30.7L11.2492 42L10.6992 56.1L14.6492 64.6L26.5992 69.1L39.4992 '
+  + '73.2L43.0992 71.3L62.2492 67L69.3492 59.15L70.2492 48.35L65.7492 35.95L64.9492 26.85Z';
+const SHIELD_BAND =
+  'M30.5004 9.55C27.7337 8.61667 22.0904 6.75 21.6504 6.75L10.1504 16.85L15.3504 27.95H64.8504L69.2004 '
+  + '18.1L58.6004 6.75L49.1504 8.8L40.5504 6.75L30.5004 9.55Z';
+const SHIELD_OUTLINE =
+  'M40 5.88965C44.9961 8.86249 49.9279 8.81213 53.627 7.98535C55.5783 7.54917 57.1987 6.89594 58.334 '
+  + '6.35156C58.5823 6.2325 58.8079 6.11693 59.0098 6.01074L69.792 17.2461C69.7586 17.3002 69.7227 '
+  + '17.3556 69.6875 17.4131C69.2122 18.1904 68.5776 19.2813 67.9414 20.5361C66.7072 22.9706 65.3185 '
+  + '26.3013 65.3184 29.1875C65.3184 34.1169 66.7289 36.9271 67.9824 39.9297C69.1936 42.8307 70.4004 '
+  + '46.1823 70.4004 52.5635C70.4004 57.5169 68.9507 60.7782 66.8076 63.0762C64.621 65.4207 61.5729 '
+  + '66.9135 58.1133 68.0381C54.5896 69.1835 51.0175 69.8475 47.5273 70.7656C44.775 71.4896 42.0405 '
+  + '72.3819 40 73.8906C37.9595 72.3819 35.225 71.4896 32.4727 70.7656C28.9825 69.8475 25.4104 69.1835 '
+  + '21.8867 68.0381C18.4271 66.9135 15.379 65.4207 13.1924 63.0762C11.0493 60.7782 9.59961 57.5169 '
+  + '9.59961 52.5635C9.59965 46.1823 10.8064 42.8307 12.0176 39.9297C13.2711 36.9271 14.6816 34.1169 '
+  + '14.6816 29.1875C14.6815 26.3013 13.2928 22.9706 12.0586 20.5361C11.4224 19.2813 10.7878 18.1904 '
+  + '10.3125 17.4131C10.2772 17.3554 10.2405 17.3003 10.207 17.2461L20.9893 6.01074C21.1913 6.11705 '
+  + '21.4174 6.23235 21.666 6.35156C22.8013 6.89594 24.4217 7.54917 26.373 7.98535C30.0721 8.81213 '
+  + '35.0039 8.86249 40 5.88965Z';
+
+/* 2.2 노선번호 — route number. Fixed 64u-base symbol, dynamic numeric text. */
+export function RouteNumberBadge({ routeClass = 'national', number }: { routeClass?: RouteClassKey; number?: string | null }) {
+  const cls = ROUTE_CLASSES[routeClass] ?? ROUTE_CLASSES.national;
+  const shape = cls.numberShape;
+  if (!shape) return null;
+  const value = number ?? cls.sampleNumber;
+
+  return (
+    <span className={`csi-route-number csi-route-number--${shape}`}>
+      {shape === 'hexagon' ? (
+        <>
+          <span className="csi-hex" aria-hidden="true" />
+          <span className="csi-hex-rule" aria-hidden="true" />
+        </>
+      ) : null}
+      {shape === 'shield' ? (
+        <svg viewBox={SHIELD_VIEWBOX} aria-hidden="true" focusable="false">
+          <path d={SHIELD_BODY} fill="#0043B3" />
+          <path d={SHIELD_BAND} fill="#BF0000" />
+          <path d={SHIELD_OUTLINE} fill="none" stroke="#FFFFFF" strokeWidth="3.2" strokeLinejoin="round" />
+          <path d="M14.8477 27.1836H65.1504" stroke="#FFFFFF" strokeWidth="3.2" strokeLinejoin="round" />
+        </svg>
+      ) : null}
+      <span className="csi-number-text">{value}</span>
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------------
+ * 3. 방면 표기 — Direction (bound-for) badge
+ * ------------------------------------------------------------------ */
+
+/* Reconstructed arrow, Contract §13.2: a 7-point polygon in a 19.615 x 16.092u
+ * box; the shaft is 5u tall and the head spans the full box height. */
+export type DirectionKind = 'start' | 'end';
+
+function DirectionArrow({ direction }: { direction: DirectionKind }) {
+  const flip = direction === 'start';
+  return (
+    <svg
+      className="csi-direction-arrow"
+      viewBox="0 0 19.615 16.092"
+      width="19.615" height="16.092"
+      style={{
+        width: 'calc(19.615 * var(--csi-u))',
+        height: 'calc(16.092 * var(--csi-u))',
+        transform: flip ? 'scaleX(-1)' : undefined,
+      }}
+      aria-hidden="true" focusable="false"
+    >
+      <polygon
+        points="0,5.547 9.708,5.547 9.708,0 19.615,8.046 9.708,16.092 9.708,10.547 0,10.547"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function DirectionBadge({ name = '서울', direction = 'end' }: { name?: string; direction?: DirectionKind }) {
+  const arrow = <DirectionArrow direction={direction} />;
+  return (
+    <span className="csi-direction">
+      {direction === 'start' ? arrow : null}
+      <span className="csi-direction-text">{name}</span>
+      {direction === 'end' ? arrow : null}
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------------
+ * 4. 행정구역 표기 — Administrative district labelling
+ * ------------------------------------------------------------------ */
+
+export const ADMIN_LEVELS = Object.freeze({
+  sigun: { key: 'sigun', modifier: 'sigun', label: '시 · 군', sample: '당진시' },
+  eupmyeondong: { key: 'eupmyeondong', modifier: 'eupmyeondong', label: '읍 · 면 · 동', sample: '남해군' },
+  ri: { key: 'ri', modifier: 'ri', label: '리', sample: '조금리' },
+});
+
+export type AdminLevelKey = keyof typeof ADMIN_LEVELS;
+
+export function AdministrativeLabel({ level = 'sigun', form = 'plain', name }: { level?: AdminLevelKey; form?: 'plain' | 'tiles'; name?: string }) {
+  const lv = ADMIN_LEVELS[level] ?? ADMIN_LEVELS.sigun;
+  const text = name ?? lv.sample;
+
+  if (form === 'tiles') {
+    /* 강조형 renders one bevelled tile per character. */
+    return (
+      <span className={`csi-admin csi-admin--tiles csi-admin--${lv.modifier}`} aria-label={text}>
+        {Array.from(text).map((ch, i) => (
+          <span className="csi-admin-tile" key={`${ch}-${i}`} aria-hidden="true">
+            <span>{ch}</span>
+          </span>
+        ))}
+      </span>
+    );
+  }
+  return (
+    <span className={`csi-admin csi-admin--plain csi-admin--${lv.modifier}`}>
+      <span>{text}</span>
+    </span>
+  );
+}
+
+/* ------------------------------------------------------------------
+ * 5. 방위 표기 — North arrow
+ * ------------------------------------------------------------------ */
+
+export function NorthArrow({ variant = 'full', label = 'N', orientation = 0 }: { variant?: 'full' | 'simple'; label?: string; orientation?: number }) {
+  return (
+    <div className={`csi-north csi-north--${variant}`} role="img" aria-label={`방위 표시 ${label}, ${orientation}°`} data-orientation={orientation} style={{ '--csi-north-angle': `${orientation}deg` } as CSSProperties}>
+      <span className="csi-north-ring" aria-hidden="true" />
+      <span className="csi-north-direction" aria-hidden="true">
+      <span className="csi-north-needle" aria-hidden="true" />
+      <span className="csi-north-label" aria-hidden="true">{label}</span>
+      </span>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------
+ * 6. 구역 표현 — Region boundary line
+ * ------------------------------------------------------------------ */
+
+export function BoundaryLine({ form = 'solid', style }: { form?: 'solid' | 'dashed'; style?: CSSProperties }) {
+  return <div className={`csi-boundary csi-boundary--${form}`} style={style} />;
+}
+
+/* ------------------------------------------------------------------
+ * 7. 사업 시 · 종점 표기 — Project extent labelling
+ * ------------------------------------------------------------------ */
+
+/* 세로형 STA. — the authored flag keeps the label on one line and then stacks the
+ * station value one character per line. Nothing is rotated. */
+function VerticalStation({ sta }: { sta: string }) {
+  const [label, ...rest] = String(sta).trim().split(/\s+/);
+  return (
+    <>
+      <span className="csi-extent-vflag-label">{label}</span>
+      {Array.from(rest.join(' ')).map((ch, i) => <span key={i}>{ch}</span>)}
+    </>
+  );
+}
+
+export type ProjectExtentSection = { name: string; length: string; weight?: number };
+
+export function ProjectExtent({
+  variant = 'basic',
+  projectName = '장암~민락 수락터널 민간투자사업',
+  totalLength = 'L=4.30km',
+  startSta = 'STA. 0+000',
+  endSta = 'STA. 0+000',
+  sections = [],
+  startRegion = ['김포시', '동진읍', '서앙리'],
+  endRegion = ['김포시', '양촌읍', '누산리'],
+}: {
+  variant?: 'basic' | 'sections' | 'regions' | 'vertical';
+  projectName?: string;
+  totalLength?: string;
+  startSta?: string;
+  endSta?: string;
+  sections?: ProjectExtentSection[];
+  startRegion?: string[];
+  endRegion?: string[];
+}) {
+  const withSections = variant === 'sections';
+  const withRegions = variant === 'regions';
+
+  if (variant === 'vertical') {
+    return (
+      <div className="csi-extent csi-extent--vertical">
+        <div className="csi-extent-vrail">
+          <span className="csi-extent-vaxis" aria-hidden="true" />
+          <div className="csi-extent-vflag csi-extent-vflag--start">
+            <VerticalStation sta={startSta} />
+          </div>
+          <div className="csi-extent-card">
+            <div className="csi-extent-title">{projectName}</div>
+            <div className="csi-extent-length">{totalLength}</div>
+          </div>
+          <div className="csi-extent-vflag csi-extent-vflag--end">
+            <VerticalStation sta={endSta} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`csi-extent${withRegions ? ' csi-extent--regions' : ''}${withSections ? ' csi-extent--sections' : ''}`}
+    >
+      <div className="csi-extent-row">
+        {withRegions ? null : (
+          <span className="csi-extent-flag csi-extent-flag--start">{startSta}</span>
+        )}
+        <span className="csi-extent-spacer" />
+        {withRegions ? null : (
+          <span className="csi-extent-flag csi-extent-flag--end">{endSta}</span>
+        )}
+      </div>
+
+      <span className="csi-extent-arrow" aria-hidden="true" />
+
+      <div className="csi-extent-card">
+        <div className="csi-extent-title">{projectName}</div>
+        <div className="csi-extent-length">{totalLength}</div>
+      </div>
+
+      {withSections && sections.length > 0 ? (
+        <div className="csi-extent-sections">
+          {sections.map((s, i) => (
+            <div className="csi-extent-section" key={i} style={{ flex: `${s.weight ?? 1} 1 0` }}>
+              {i > 0 ? <span className="csi-extent-section-boundary" aria-hidden="true" /> : null}
+              <span className="csi-extent-section-pill">
+                <span>{s.name}</span>
+                <i aria-hidden="true" />
+                <span>{s.length}</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {withRegions ? (
+        <div className="csi-extent-region-row">
+          <div className="csi-extent-region csi-extent-region--start">
+            <span>{startRegion.map((level, i) => <span key={i}>{level}</span>)}</span>
+          </div>
+          <div className="csi-extent-region csi-extent-region--end">
+            <span>{endRegion.map((level, i) => <span key={i}>{level}</span>)}</span>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/* ==================================================================
+ * Reference demo page
+ * ================================================================== */
+
+type RouteClassEntry = (typeof ROUTE_CLASSES)[RouteClassKey];
+
+const NAME_SAMPLES: Record<string, { label: string; get: (c: RouteClassEntry) => string }> = {
+  short: { label: 'Short', get: (c) => (c.key === 'cityCounty' ? '군도' : '국도') },
+  reference: { label: "기준 (Source 표본)", get: (c) => c.sampleName },
+  long: { label: 'Long', get: () => '서해안고속도로지선제2구간' },
+};
+
+const NUMBER_SAMPLES: Record<string, { label: string; get: (c: RouteClassEntry) => string | null }> = {
+  short: { label: 'Short', get: () => '1' },
+  reference: { label: "기준 (Source 표본)", get: (c) => c.sampleNumber },
+  long: { label: 'Long', get: () => '4885' },
+};
+
+function Panel({ id, title, legend, note, light, children }: { id: string; title: string; legend?: string; note?: string; light?: boolean; children?: ReactNode }) {
+  return (
+    <section id={id} className={`csi-panel${light ? ' csi-panel--light' : ''}`}>
+      <h4>{title}</h4>
+      {legend ? <p className="csi-legend">{legend}</p> : null}
+      {children}
+      {note ? <p className="csi-note">{note}</p> : null}
+    </section>
+  );
+}
+
+function Row({ label, children, top }: { label: string; children?: ReactNode; top?: boolean }) {
+  return (
+    <div className={`csi-row${top ? ' csi-row--top' : ''}`}>
+      <span className="csi-row-label">{label}</span>
+      <div className="csi-row-body">{children}</div>
+    </div>
+  );
+}
+
+export function CenterSpatialInformationReferenceDemo() {
+  const [content, setContent] = useState('reference');
+  const [routeName, setRouteName] = useState('');
+  const [routeNumber, setRouteNumber] = useState('');
+
+  const classList = useMemo(() => Object.values(ROUTE_CLASSES), []);
+
+  const nameFor = (c: RouteClassEntry) => (routeName.trim() ? routeName : NAME_SAMPLES[content].get(c));
+  const numberFor = (c: RouteClassEntry) => (routeNumber.trim() ? routeNumber : NUMBER_SAMPLES[content].get(c));
+
+  return (
+    <div className="csi csi-demo">
+      <Panel
+        id="csi-area-route" title="1. 노선 — 노선, 상태, 윤곽"
+        legend={
+          "중심선 18u, 윤곽은 중심선의 20% (3.6u), 그림자 X0 Y0 Blur 6u Opacity 70%. "
+          + "지방도 · 구도 · 면도 · 이도는 Dark Outline (#000 / 30%), 나머지 분류는 White Outline 적용. "
+          + "Source SVG를 로드하지 않음: 외피는 spread box-shadow, 공사중은 반복 파선 그라데이션, 계획은 45° 빗금 그라데이션."
+        }
+        note={
+          "KNOWN_DEVIATION — 구도,면도, 이도.svg는 흰색 윤곽으로 내보내며 명시된 Source 규칙과 시안 색상 견본에 모순"
+          + "여기서는 명시된 규칙 구현"
+        }
+      >
+        <div className="csi-swatchgrid csi-scale-50">
+          {classList.map((c) => (
+            <div key={c.key}>
+              <div className="csi-row-label" style={{ width: 'auto', marginBottom: 10 }}>{c.label}</div>
+              {ROUTE_STATES.map((s) => (
+                <div key={s} style={{ margin: '0 0 18px', paddingLeft: 6 }}>
+                  <RouteLine routeClass={c.key} state={s} />
+                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,.6)', marginTop: 7 }}>{STATE_LABEL[s]}</div>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </Panel>
+
+      <Panel
+        id="csi-area-project-route" title="1b. 사업 노선 — 사업노선과 끝 표시"
+        legend={"사업 노선 #D21203. 원형 표시 = 선의 150%인 원 (18u 선에서 27u), 노선 윤곽과 그림자 공유."}
+      >
+        <div className="csi-scale-50" style={{ padding: '10px 4px 4px' }}>
+          <ProjectRoute />
+        </div>
+      </Panel>
+
+      <Panel
+        id="csi-area-route-information" title="2. 노선 정보 표기 — 노선번호와 노선명 (동적 텍스트)"
+        legend={
+          '노선 식별에 필요한 경우 노선번호 또는 노선명을 선택하여 표기한다. '
+          + "아래 문자열은 모두 실제 DOM 텍스트다. Source SVG에는 윤곽 글리프 경로로 기록되어 있지만 해당 지오메트리는 런타임에서 사용하지 않음. "
+          + "노선명 너비 = padding 9u + 고유 텍스트 너비 (높이 54u 고정). 노선번호 기호는 배지 기본 64u로 고정."
+        }
+        note={
+          "KNOWN_DEVIATION — 고속도로 노선명.svg 높이는 48u이며 고속도로/특별시도 이름 표면 (#2E619A / #9729E5)은 선 색상과 다름"
+          + "Canonical 후보: 모든 분류의 높이 54u; 두 표면 색상은 기록되었으나 미해결"
+        }
+      >
+        <div className="csi-controls">
+          <label>
+            콘텐츠
+            <select value={content} onChange={(e) => setContent(e.target.value)}>
+              {Object.entries(NAME_SAMPLES).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
+            </select>
+          </label>
+          <label>
+            노선명 재정의
+            <input value={routeName} onChange={(e) => setRouteName(e.target.value)} placeholder="(표본)" size={18} />
+          </label>
+          <label>
+            노선번호 재정의
+            <input value={routeNumber} onChange={(e) => setRouteNumber(e.target.value)} placeholder="(표본)" size={8} />
+          </label>
+        </div>
+
+        <div className="csi-swatchgrid csi-scale-50">
+          {classList.map((c) => (
+            <Row key={c.key} label={c.label} top>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+                {c.numberShape ? <RouteNumberBadge routeClass={c.key} number={numberFor(c)} /> : null}
+                <RouteNameBadge routeClass={c.key} name={nameFor(c)} />
+              </div>
+            </Row>
+          ))}
+        </div>
+      </Panel>
+
+      <Panel
+        id="csi-area-direction" title="3. 방면 표기 — 방면 배지"
+        legend={
+          '노선의 진행 방향을 안내할 경우 화살표와 방면명을 조합한 배지형으로 표기한다. 노선 유형과 관계없이 동일한 형태로 적용한다. '
+          + "완전히 둥근 50u 캡슐, 흰색 80%의 안쪽 윤곽 2u, 7점 화살표 다각형, 콘텐츠 기반 너비."
+        }
+      >
+        <div className="csi-scale-50" style={{ position: 'relative', padding: '4px 0 18px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
+            <DirectionBadge name={content === 'long' ? '평택제천' : '천안'} direction="start" />
+            <DirectionBadge name={content === 'long' ? '당진영덕' : '서울'} direction="end" />
+          </div>
+          <RouteLine routeClass="expressway" state="existing" />
+        </div>
+      </Panel>
+
+      <Panel
+        id="csi-area-administrative" title="4. 행정구역 표기 — 행정구역 레이블"
+        legend={
+          '기본형: 배경 정보와 함께 자연스럽게 표기하거나 여러 행정구역을 표기할 경우. '
+          + "강조형: 행정구역을 명확히 구분하거나 주요 위치정보로 강조할 경우 — 글자마다 베벨 타일 하나."
+        }
+      >
+        <div className="csi-scale-40" style={{ display: 'flex', gap: 48, flexWrap: 'wrap' }}>
+          <div>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 12 }}>기본형</div>
+            {Object.values(ADMIN_LEVELS).map((lv) => (
+              <div key={lv.key} style={{ marginBottom: 16 }}>
+                <AdministrativeLabel level={lv.key as AdminLevelKey} form="plain" name={content === 'long' ? '서울특별시' : undefined} />
+              </div>
+            ))}
+          </div>
+          <div>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 12 }}>강조형</div>
+            {Object.values(ADMIN_LEVELS).map((lv) => (
+              <div key={lv.key} style={{ marginBottom: 16 }}>
+                <AdministrativeLabel level={lv.key as AdminLevelKey} form="tiles" name={content === 'long' ? '서울특별시' : undefined} />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Panel>
+
+      <Panel
+        id="csi-area-north-arrow" title="5. 방위 표기 — 북쪽 화살표"
+        legend={"지도 및 실사화 화면에서 방위 정보가 필요할 때 선택적으로 사용한다. 기본형 = 채워진 나침반; 간소형 = 최소 링과 바늘."}
+        light
+      >
+        <div className="csi-scale-40" style={{ display: 'flex', gap: 60, alignItems: 'flex-start' }}>
+          {[0, 90, 37].map(angle => <NorthArrow key={`full-${angle}`} variant="full" orientation={angle} />)}
+          {[0, 90, 37].map(angle => <NorthArrow key={`simple-${angle}`} variant="simple" orientation={angle} />)}
+        </div>
+      </Panel>
+
+      <Panel
+        id="csi-area-zone-boundary" title="6. 구역 표현 — 영역 경계"
+        legend={"선 형태: 실선 / 긴 파선. ※ 선 두께는 영역 범위와 화면 배율에 따라 조정 가능 — 두께는 명시적으로 배율에 의존하므로 고정 Canonical 값이 아님."}
+      >
+        <div style={{ display: 'grid', gap: 26, padding: '8px 0' }}>
+          <Row label="실선"><BoundaryLine form="solid" /></Row>
+          <Row label="긴 파선"><BoundaryLine form="dashed" /></Row>
+        </div>
+      </Panel>
+
+      <Panel
+        id="csi-area-spatial-section" title="7. 사업 시 · 종점 표기 — 사업 범위 레이블 (동적 데이터)"
+        legend={
+          '사업 구간의 시점 · 종점과 전체 연장을 표기한다. 필요에 따라 측점(STA.)과 공구별 연장 정보를, 또 시 · 종점의 행정구역 정보를 함께 표기할 수 있다. '
+          + '화면 구성에 따라 가로형 또는 세로형으로 배치한다.'
+        }
+        light
+      >
+        <div className="csi-scale-32 csi-spatial-specimens">
+          <div>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 8 }}>기본형</div>
+            <div className="csi-specimen-frame"><ProjectExtent variant="basic" /></div>
+          </div>
+          <div>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 8 }}>기본형 + 공구표기</div>
+            <div className="csi-specimen-frame"><ProjectExtent
+              variant="sections"
+              sections={[
+                { name: '제 1공구', length: 'L=7.12km', weight: 7.12 },
+                { name: '제 2공구', length: 'L=8.40km', weight: 8.40 },
+                { name: '제 3공구', length: 'L=5.39km', weight: 5.39 },
+                { name: '제 4공구', length: 'L=4.11km', weight: 4.11 },
+              ]}
+            /></div>
+          </div>
+          <div>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 8 }}>기본형 + 행정구역 전환 표기</div>
+            <div className="csi-specimen-frame"><ProjectExtent variant="regions" projectName="사업구간 (5공구)" totalLength="L=4.00km" /></div>
+          </div>
+          <div>
+            <div className="csi-row-label" style={{ width: 'auto', marginBottom: 8 }}>세로형</div>
+            <div className="csi-specimen-frame">
+              <ProjectExtent variant="vertical" projectName="사업구간 (5공구)" totalLength="L=4.00km" />
+            </div>
+          </div>
+        </div>
+      </Panel>
+    </div>
+  );
+}
diff --git a/packages/center-graphic/src/components/CenterTitle.css b/packages/center-graphic/src/components/CenterTitle.css
new file mode 100644
index 0000000..f4adda6
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterTitle.css
@@ -0,0 +1,307 @@
+.center-title-reference {
+  display: grid;
+  gap: 16px;
+}
+
+.center-title-reference__sample {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-stroke-subtle);
+  border-radius: 4px;
+  background: var(--color-bg-content);
+}
+
+.center-title-reference__sample > header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--color-stroke-subtle);
+}
+
+.center-title-reference__sample > header div {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.center-title-reference__sample > header strong {
+  color: var(--color-action-primary);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.center-title-reference__sample > header span,
+.center-title-reference__sample > header small {
+  color: var(--color-fg-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.center-title-reference__stage {
+  min-width: 0;
+  min-height: 184px;
+  display: flex;
+  align-items: center;
+  padding: 32px;
+  overflow: auto;
+  background: #d6d6d6;
+}
+
+.center-title {
+  --center-title-border: 3.609px;
+  --center-title-main-height: 100px;
+  --center-title-sub-height: 67px;
+  --center-title-chamfer: 14.436px;
+  --center-title-main-start: 20.65px;
+  --center-title-main-gap: 8.44px;
+  --center-title-main-end: 42.466px;
+  --center-title-route-padding: 23.5px;
+  --center-title-sub-start: 12px;
+  --center-title-sub-end: 19.247px;
+  /* title.md §6.4.8 (Q1, 2026-09-28): Source ratio of the main outer inline-size. */
+  --center-title-main-bevel: 2.41747%;
+
+  flex: none;
+  display: inline-flex;
+  align-items: flex-start;
+  width: max-content;
+  margin: 0;
+  color: #f5f9ff;
+  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
+}
+
+.center-title[data-composition='projectNameRoute'] {
+  --center-title-main-end: 32.466px;
+}
+
+.center-title[data-composition='routeProjectName'] {
+  --center-title-main-end: 24.947px;
+  --center-title-route-padding: 24.294px;
+}
+
+.center-title[data-composition='routeProjectNameRoute'] {
+  --center-title-main-end: 32.572px;
+  --center-title-sub-end: 14.963px;
+}
+
+.center-title__body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: max-content;
+}
+
+.center-title__main {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: max-content;
+  height: var(--center-title-main-height);
+  padding-inline: var(--center-title-main-end);
+  padding-inline-start: var(--center-title-main-start);
+  border: var(--center-title-border) solid #f5f9ff;
+  overflow: hidden;
+  isolation: isolate;
+  background: #f5f9ff;
+  --center-title-surface-frame-inline: calc(2 * var(--center-title-border));
+  --center-title-surface-position: center;
+}
+
+.center-title:has(.center-title__route-classification) .center-title__main {
+  border-inline-start: 0;
+  --center-title-surface-frame-inline: var(--center-title-border);
+  --center-title-surface-position: left;
+}
+
+/* Paint the frame and chamfer as one surface. Separate triangle clipping left
+   dark coverage seams at fractional inner-frame edges (title.md §6.4.3). */
+.center-title__main::after {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: '';
+  background: linear-gradient(90deg, #002f68 0%, #001a41 100%);
+  /* Keep the authored gradient extent at the outer frame, not the fill box. */
+  background-size: calc(100% + var(--center-title-surface-frame-inline)) 100%;
+  background-position: var(--center-title-surface-position);
+  clip-path: polygon(0 0, 100% 0,
+    100% calc(100% - var(--center-title-chamfer)),
+    calc(100% - var(--center-title-chamfer)) 100%, 0 100%);
+}
+
+/* Type 3/4 only: title.md §6.4.8. Alpha and compositing are per-Type (Type 3
+   0.25 additive, Type 4 0.20 source-over). The box spans the main outer
+   inline-size, so the percentage stop keeps the extent proportional to it at
+   every content length (title.md §6.6.2). */
+.center-title:has(.center-title__route-classification) .center-title__main::before {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  content: '';
+  width: calc(100% + var(--center-title-border));
+  background: linear-gradient(90deg, rgb(255 255 255 / 25%) 0,
+    rgb(255 255 255 / 0%) var(--center-title-main-bevel));
+  pointer-events: none;
+}
+
+.center-title[data-composition='routeProjectName'] .center-title__main::before {
+  /* Restore the previous Type 3 transition, independently of its divider. */
+  content: '';
+  mix-blend-mode: plus-lighter;
+}
+
+.center-title[data-composition='routeProjectName'] .center-title__main::after {
+  /* Keep fractional join pixels inside the fill clip, not on its edge. */
+  clip-path: polygon(-1px 0, 100% 0,
+    100% calc(100% - var(--center-title-chamfer)),
+    calc(100% - var(--center-title-chamfer)) 100%, -1px 100%);
+}
+
+.center-title[data-composition='routeProjectNameRoute'] .center-title__main::before {
+  background: linear-gradient(90deg, rgb(255 255 255 / 20%) 0,
+    rgb(255 255 255 / 0%) var(--center-title-main-bevel));
+}
+
+.center-title__main-text {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--center-title-main-gap);
+  white-space: nowrap;
+  font-size: 44.5px;
+  line-height: 1;
+  letter-spacing: -0.04326em;
+  text-shadow: 0 3.609px 3.609px rgb(0 0 0 / 45%);
+  transform: translateY(-2px);
+}
+
+.center-title__context {
+  color: #fff;
+  font-weight: 500;
+}
+
+.center-title__project-name {
+  color: #4cc3ff;
+  font-weight: 700;
+}
+
+.center-title__chamfer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: var(--center-title-chamfer);
+  height: var(--center-title-chamfer);
+  /* Semantic geometry marker; the shared main paint owns the visible chamfer. */
+  pointer-events: none;
+}
+
+.center-title__route-classification {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  height: var(--center-title-main-height);
+  padding-inline: var(--center-title-route-padding);
+  border: var(--center-title-border) solid #f5f9ff;
+  border-inline-end: 0;
+  white-space: nowrap;
+  background: linear-gradient(158deg, #1464d7 0%, #072d65 100%);
+  box-shadow: inset -7.218px 0 14.436px rgb(0 17 42 / 50%);
+  color: #fff;
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.112em;
+  text-shadow: 0 2px 2px rgb(0 0 0 / 55%);
+  -webkit-text-stroke: 1.8px #001b42;
+  paint-order: stroke fill;
+}
+
+.center-title__route-classification::after {
+  position: absolute;
+  inset-block: 0;
+  right: 0;
+  width: 1.805px;
+  content: '';
+  background: rgb(0 0 0 / 20%);
+}
+
+.center-title[data-composition='routeProjectName'] .center-title__route-classification::after {
+  content: none;
+}
+
+.center-title[data-composition='routeProjectName'] .center-title__route-classification > span {
+  transform: translate(-3px, -3px) scaleY(0.9);
+}
+
+.center-title[data-composition='routeProjectNameRoute'] .center-title__route-classification {
+  flex-direction: column;
+  gap: 0;
+  height: 167px;
+  padding-inline: 23.32px;
+  background: linear-gradient(132deg, #0054cc 0%, #001b42 100%);
+  font-size: 38.5px;
+  line-height: 1.32;
+  letter-spacing: -0.106em;
+}
+
+.center-title[data-composition='routeProjectNameRoute'] .center-title__route-classification > span {
+  transform: translate(-1px, -2px) scale(0.984, 0.953);
+  transform-origin: left top;
+}
+
+.center-title__project-route {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: max-content;
+  height: var(--center-title-sub-height);
+  padding-inline: var(--center-title-sub-end);
+  padding-inline-start: var(--center-title-sub-start);
+  padding-block-start: 0;
+  border-inline: var(--center-title-border) solid #fff;
+  border-bottom: var(--center-title-border) solid #fff;
+  background: linear-gradient(90deg, #f5f9ff 0%, #f5f9ff 6.05%, #dce7f6 100%);
+  box-shadow: 0 3.609px 3.609px 0 #97b6db inset;
+  color: #002555;
+  white-space: nowrap;
+  font-size: 34px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: -0.075em;
+  text-indent: -1.5px;
+}
+
+.center-title__project-route-value {
+  letter-spacing: inherit;
+}
+
+.center-title[data-composition='routeProjectNameRoute'] .center-title__project-route-value {
+  margin-inline-start: 4px;
+}
+
+.center-title[data-composition='projectNameRoute'] .center-title__project-route {
+  letter-spacing: -0.067em;
+}
+
+.center-title[data-composition='routeProjectNameRoute'] .center-title__project-route {
+  letter-spacing: -0.06em;
+}
+
+@media (max-width: 720px) {
+  .center-title-reference__sample > header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .center-title-reference__stage {
+    padding: 24px;
+  }
+}
diff --git a/packages/center-graphic/src/components/CenterTitle.tsx b/packages/center-graphic/src/components/CenterTitle.tsx
new file mode 100644
index 0000000..20b3b04
--- /dev/null
+++ b/packages/center-graphic/src/components/CenterTitle.tsx
@@ -0,0 +1,138 @@
+import './CenterTitle.css';
+
+const DEFAULT_CONTENT = Object.freeze({
+  context: '서산영덕선',
+  projectName: '대산~당진 건설공사',
+  routeClassification: '고속국도 제30호',
+  projectRoute: 'L=1.0km',
+});
+
+export const CENTER_TITLE_COMPOSITIONS = Object.freeze({
+  projectName: Object.freeze({
+    type: 'Type 1',
+    label: '사업명',
+    sourceFile: '사업명.svg',
+    sourceViewport: Object.freeze({ width: 620, height: 100 }),
+    hasRouteClassification: false,
+    hasProjectRoute: false,
+  }),
+  projectNameRoute: Object.freeze({
+    type: 'Type 2',
+    label: '사업명 + 사업노선',
+    sourceFile: '사업명+사업노선.svg',
+    sourceViewport: Object.freeze({ width: 610, height: 167 }),
+    hasRouteClassification: false,
+    hasProjectRoute: true,
+  }),
+  routeProjectName: Object.freeze({
+    type: 'Type 3',
+    label: '노선구분 + 사업명',
+    sourceFile: '노선구분 + 사업명.svg',
+    sourceViewport: Object.freeze({ width: 890, height: 100 }),
+    hasRouteClassification: true,
+    hasProjectRoute: false,
+  }),
+  routeProjectNameRoute: Object.freeze({
+    type: 'Type 4',
+    label: '노선구분 + 사업명 + 사업노선',
+    sourceFile: '노선구분 + 사업명 + 사업노선.svg',
+    sourceViewport: Object.freeze({ width: 782, height: 167 }),
+    hasRouteClassification: true,
+    hasProjectRoute: true,
+  }),
+});
+
+export type CenterTitleComposition = keyof typeof CENTER_TITLE_COMPOSITIONS;
+
+function splitRouteClassification(value: string): string[] {
+  const match = value.trim().match(/^(.*?)(\s+제\s*\d+호)$/u);
+  return match ? [match[1], match[2].trim()] : [value];
+}
+
+export function CenterTitle({
+  composition = 'projectName',
+  context = DEFAULT_CONTENT.context,
+  projectName = DEFAULT_CONTENT.projectName,
+  routeClassification = DEFAULT_CONTENT.routeClassification,
+  projectRoute,
+  className = '',
+}: {
+  composition?: CenterTitleComposition;
+  context?: string;
+  projectName?: string;
+  routeClassification?: string;
+  projectRoute?: string;
+  className?: string;
+}) {
+  const specimen = CENTER_TITLE_COMPOSITIONS[composition] ?? CENTER_TITLE_COMPOSITIONS.projectName;
+  const routeValue = projectRoute ?? (
+    composition === 'routeProjectNameRoute' ? 'L=25.36km' : DEFAULT_CONTENT.projectRoute
+  );
+  const routeLines = composition === 'routeProjectNameRoute'
+    ? splitRouteClassification(routeClassification)
+    : [routeClassification];
+  const projectRouteSeparator = composition === 'routeProjectNameRoute' ? ' ' : '';
+  const accessibleName = [
+    specimen.hasRouteClassification ? `노선구분: ${routeClassification}` : null,
+    `사업명: ${context} ${projectName}`,
+    specimen.hasProjectRoute ? `사업노선: ${routeValue}` : null,
+  ].filter(Boolean).join('. ');
+
+  return (
+    <figure
+      className={['center-title', className].filter(Boolean).join(' ')}
+      role="group"
+      aria-label={accessibleName}
+      data-center-component="title"
+      data-composition={composition}
+      data-source-evidence={specimen.sourceFile}
+      data-source-viewport={`${specimen.sourceViewport.width}x${specimen.sourceViewport.height}`}
+    >
+      {specimen.hasRouteClassification && (
+        <div className="center-title__route-classification" aria-hidden="true">
+          {routeLines.map((line, index) => <span key={`${index}-${line}`}>{line}</span>)}
+        </div>
+      )}
+
+      <div className="center-title__body">
+        <div className="center-title__main" aria-hidden="true">
+          <div className="center-title__main-text">
+            <span className="center-title__context">{context}</span>
+            <span className="center-title__project-name">{projectName}</span>
+          </div>
+          <span className="center-title__chamfer" aria-hidden="true" />
+        </div>
+
+        {specimen.hasProjectRoute && (
+          <div className="center-title__project-route" aria-hidden="true">
+            사업노선{projectRouteSeparator}<span className="center-title__project-route-value">({routeValue})</span>
+          </div>
+        )}
+      </div>
+    </figure>
+  );
+}
+
+export function CenterTitleReferenceDemo() {
+  return (
+    <div className="center-title-reference" data-reference-component="center-title">
+      {Object.entries(CENTER_TITLE_COMPOSITIONS).map(([composition, specimen]) => (
+        <article className="center-title-reference__sample" key={composition}>
+          <header>
+            <div><strong>{specimen.type}</strong><span>{specimen.label}</span></div>
+            <small>{specimen.sourceViewport.width} × {specimen.sourceViewport.height} · Source 근거 뷰포트</small>
+          </header>
+          <div className="center-title-reference__stage">
+            <CenterTitle composition={composition as CenterTitleComposition} />
+          </div>
+        </article>
+      ))}
+      <article className="center-title-reference__sample" data-content-test="long">
+        <header><strong>유형 3 · 긴 콘텐츠</strong><span>같은 연결과 고정 외곽 지오메트리; 콘텐츠 기반 너비</span></header>
+        <div className="center-title-reference__stage">
+          <CenterTitle composition="routeProjectName" projectName="서해안고속도로 대산연결 제2구간 장기 건설사업 기본 및 실시설계" />
+        </div>
+      </article>
+    </div>
+  );
+}
diff --git a/packages/center-graphic/src/components/CompactFacilityConnection.css b/packages/center-graphic/src/components/CompactFacilityConnection.css
new file mode 100644
index 0000000..95a37f1
--- /dev/null
+++ b/packages/center-graphic/src/components/CompactFacilityConnection.css
@@ -0,0 +1,92 @@
+.compact-facility-connection {
+  /* Nominal Web specimen size and stem length are preview choices, not Canonical geometry. */
+  --compact-route-primary: 18px;
+  --compact-route-outline: calc(var(--compact-route-primary) * .2);
+  --compact-stem-width: calc(var(--compact-route-primary) * .1);
+  --compact-joint-size: calc(var(--compact-route-primary) * .4);
+  --compact-stem-length: 18px;
+  width: min(100%, 680px);
+  min-width: 360px;
+  position: relative;
+  display: grid;
+  grid-template-rows: auto var(--compact-stem-length) auto;
+  justify-items: center;
+  padding-block: 14px 17px;
+  isolation: isolate;
+}
+
+.compact-facility-connection__route {
+  z-index: 3;
+  grid-row: 1;
+  position: relative;
+  width: 84%;
+  height: var(--compact-route-primary);
+  box-sizing: content-box;
+  background: #d21203;
+  border: var(--compact-route-outline) solid #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
+}
+
+.compact-facility-connection__segment {
+  position: absolute;
+  inset-block: 0;
+  left: 50%;
+  width: 12px;
+  transform: translateX(-50%);
+  background: #ff7700;
+  border-inline: 2px solid #fff;
+}
+
+.compact-facility-connection__anchor {
+  z-index: 1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--compact-route-primary);
+  height: var(--compact-route-primary);
+  box-sizing: content-box;
+  transform: translate(-50%, -50%);
+  background: #d21203;
+  border: calc(var(--compact-route-primary) * .12) solid #fff;
+  border-radius: 50%;
+}
+
+.compact-facility-connection__stem {
+  z-index: 4;
+  grid-row: 2;
+  position: relative;
+  width: var(--compact-stem-width);
+  height: 100%;
+  background: #400500;
+}
+
+.compact-facility-connection__stem::before {
+  /* Paint across the lower white outline, up to the orange/primary lower edge. */
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  width: 100%;
+  height: var(--compact-route-outline);
+  background: inherit;
+}
+
+.compact-facility-connection__stem > span {
+  position: absolute;
+  bottom: calc(var(--compact-joint-size) / -2);
+  left: 50%;
+  width: var(--compact-joint-size);
+  height: var(--compact-joint-size);
+  box-sizing: border-box;
+  transform: translateX(-50%);
+  background: #fff;
+  border: 0;
+  /* Keep the white nominal circle intact; paint its fine boundary outside. */
+  box-shadow: 0 0 0 1px #400500;
+  border-radius: 50%;
+}
+
+.compact-facility-connection > :last-child {
+  z-index: 1;
+  grid-row: 3;
+}
diff --git a/packages/center-graphic/src/components/CompactFacilityConnection.tsx b/packages/center-graphic/src/components/CompactFacilityConnection.tsx
new file mode 100644
index 0000000..4a06af9
--- /dev/null
+++ b/packages/center-graphic/src/components/CompactFacilityConnection.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+
+import './CompactFacilityConnection.css';
+
+// Shared Web preview relationship; entity assets and text layout remain child-owned.
+export function CompactFacilityConnection({ children, className, routeMode, sourceStatus, label }: {
+  children?: ReactNode;
+  className?: string;
+  routeMode?: string;
+  sourceStatus?: string;
+  label?: string;
+}) {
+  const inline = routeMode === 'inline';
+  return (
+    <div className={`compact-facility-connection ${className}`} data-source-status={sourceStatus} data-connection-model="tunnel-shared" data-route-attachment={inline ? 'segment' : 'marker'} aria-label={label}>
+      <div className="compact-facility-connection__route facility-applied__route tunnel-applied-example__route" aria-hidden="true">
+        {inline
+          ? <span className="compact-facility-connection__segment facility-applied__route-segment tunnel-applied-example__segment" />
+          : <span className="compact-facility-connection__anchor facility-applied__route-anchor" />}
+      </div>
+      <div className="compact-facility-connection__stem facility-applied__connector tunnel-applied-example__connector" aria-hidden="true"><span /></div>
+      {children}
+    </div>
+  );
+}
diff --git a/packages/center-graphic/src/components/FacilityBatch.css b/packages/center-graphic/src/components/FacilityBatch.css
new file mode 100644
index 0000000..92fdc95
--- /dev/null
+++ b/packages/center-graphic/src/components/FacilityBatch.css
@@ -0,0 +1,397 @@
+.facility-reference,
+.linked-facility {
+  width: 100%;
+  display: grid;
+  gap: 18px;
+}
+
+.facility-reference__variant-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(280px, 1fr));
+  gap: 14px;
+}
+
+.facility-reference__sample,
+.linked-facility__group,
+.linked-facility__context,
+.linked-facility__pending {
+  min-width: 0;
+  overflow: hidden;
+  background: rgba(217, 217, 217, .48);
+  border: 1px solid rgba(64, 5, 0, .14);
+  border-radius: 8px;
+}
+
+.facility-reference__sample > header,
+.linked-facility__group > header,
+.linked-facility__card > header {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 14px;
+  background: rgba(255, 255, 255, .62);
+  border-bottom: 1px solid rgba(64, 5, 0, .12);
+}
+
+.facility-reference__sample > header strong,
+.linked-facility__group > header h3,
+.linked-facility__card > header strong {
+  margin: 0;
+  color: #400500;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.facility-reference__sample > header span,
+.linked-facility__group > header span,
+.linked-facility__card > header span {
+  color: #6e6759;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: right;
+}
+
+.facility-reference__stage {
+  min-height: 154px;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  overflow-x: auto;
+}
+
+.facility-reference__row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  gap: 28px;
+}
+
+.local-facility {
+  position: relative;
+  width: max-content;
+  height: var(--facility-height);
+  display: block;
+  flex: 0 0 auto;
+  margin: 0;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.local-facility__parts {
+  height: var(--facility-height);
+  display: flex;
+  align-items: start;
+}
+
+.local-facility__part {
+  position: relative;
+  display: block;
+  flex: 0 0 auto;
+  overflow: hidden;
+}
+
+.local-facility__part.is-fixed { z-index: 1; }
+.local-facility__part.is-flex { overflow: visible; }
+.local-facility__part.is-two-part-name { overflow: hidden; }
+
+.local-facility__part img {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  max-width: none;
+  display: block;
+  transform: translateX(-50%) scaleX(var(--facility-part-scale));
+  transform-origin: center;
+  user-select: none;
+}
+
+/* Non-separated only: fixed parts paint on top (z-index: 1), so a fractional-scaleX
+   compositing seam at the shared edge is hidden by extending this layer 1px under each
+   neighbor rather than by resizing the flex part itself. */
+.local-facility:not(.is-separated) .local-facility__part.is-flex img {
+  transform: translateX(-50%) scaleX(calc((var(--facility-part-rendered-width) + 2px) / var(--facility-part-base-width)));
+}
+
+.two-part-name-region {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  background-color: var(--name-plate-surface);
+  background-image:
+    linear-gradient(var(--name-plate-tint-overlay), var(--name-plate-tint-overlay)),
+    linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) var(--name-plate-seam-width));
+  background-repeat: no-repeat;
+  border-radius: 0 0 var(--name-plate-radius) 0;
+  box-shadow:
+    inset 0 var(--name-plate-border-width) var(--name-plate-border),
+    inset 0 calc(-1 * var(--name-plate-border-width)) var(--name-plate-border),
+    inset calc(-1 * var(--name-plate-border-width)) 0 var(--name-plate-border);
+}
+
+.two-part-name-region::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow:
+    inset 0 var(--name-plate-border-width) var(--name-plate-tint-overlay),
+    inset 0 calc(-1 * var(--name-plate-border-width)) var(--name-plate-tint-overlay),
+    inset calc(-1 * var(--name-plate-border-width)) 0 var(--name-plate-tint-overlay);
+  content: '';
+  pointer-events: none;
+}
+
+.local-facility__part .local-facility__dimension-loader {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  transform: none;
+}
+
+.local-facility.is-separated { overflow: visible; }
+
+.local-facility__labels {
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: var(--facility-height);
+  display: block;
+  color: #fff;
+  pointer-events: none;
+}
+
+.local-facility__primary,
+.local-facility__secondary {
+  position: absolute;
+  left: 50%;
+  display: block;
+  width: max-content;
+  transform: translateX(-50%);
+  color: #fff;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.local-facility__primary {
+  top: 14px;
+  font-size: 30px;
+  line-height: 36px;
+  letter-spacing: -1.2px;
+}
+
+.local-facility__secondary {
+  top: 66px;
+  font-size: 16px;
+  line-height: 19px;
+  letter-spacing: -.64px;
+}
+
+/* Local silhouette Actual/Detail inherits common primary (14px); only secondary is overridden. */
+.local-facility--silhouette.local-facility--actualDetail .local-facility__secondary { top: 70px; }
+
+/* Bridge and Linked Bridge only: text sits lower than the common start. Keyed on
+   data-facility because the silhouette kind is shared with Tunnel.
+   Canonical owner: facility.md §12.21.1 — Bridge-specific CANONICAL_OVERRIDE,
+   OWNER_CONFIRMED 2026-09-19. Common primary stays 14px. */
+.local-facility[data-facility='bridge'] .local-facility__primary,
+.local-facility[data-facility='linked-bridge'] .local-facility__primary { top: 20px; }
+
+/* Linked Tunnel uses this renderer, but its geometry owner is Tunnel common. */
+.local-facility[data-facility='linked-tunnel'] .local-facility__primary { top: 22px; }
+.local-facility[data-facility='linked-tunnel'] .local-facility__secondary { top: 68px; }
+
+/* Facility-local user-confirmed 16px, not a Foundation spacing token. */
+.local-facility[data-composition='two-part'] .local-facility__labels .local-facility__primary {
+  left: 16px;
+  transform: none;
+  text-align: left;
+}
+
+/* Badge Actual has a common content start, independent of label length.
+   Its fixed graphic boundary is the origin; Compact's 16px does not apply. */
+.local-facility--badge.local-facility--actualDetail .local-facility__labels .local-facility__primary {
+  left: 0;
+  transform: none;
+  text-align: left;
+}
+
+/* Badge Actual only (Intersection / JC / IC): user-confirmed 3px horizontal label
+   correction (facility.md §12.23). Applied to the labels box so primary/sub keep their
+   shared start and bounds relationship. Not generalized to Tunnel / Bridge / Roadside,
+   whose §12.18 middle-center contract is unchanged. */
+.local-facility--badge.local-facility--actualDetail .local-facility__labels { transform: translateX(3px); }
+
+.local-facility__measure {
+  position: fixed;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.local-facility__measure .local-facility__primary,
+.local-facility__measure .local-facility__secondary {
+  position: fixed;
+  left: auto;
+  top: auto;
+  transform: none;
+}
+
+.facility-reference__width-tests {
+  width: 100%;
+  display: grid;
+  gap: 16px;
+}
+
+.facility-reference__width-tests > div {
+  min-width: max-content;
+  display: grid;
+  grid-template-columns: 64px max-content;
+  align-items: center;
+  gap: 16px;
+}
+
+.facility-reference__width-tests > div > span {
+  color: #6e6759;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .08em;
+}
+
+.roadside-tag-tests {
+  width: 100%;
+  display: grid;
+  gap: 18px;
+}
+
+.roadside-tag-test {
+  min-width: max-content;
+  display: grid;
+  grid-template-columns: 132px max-content;
+  align-items: center;
+  gap: 18px;
+}
+
+.roadside-tag-test__meta {
+  display: grid;
+  gap: 2px;
+  color: #400500;
+}
+
+.roadside-tag-test__meta strong {
+  font-size: 13px;
+  line-height: 18px;
+}
+
+.roadside-tag-test__meta small {
+  color: #6e6759;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .08em;
+}
+
+.roadside-facility-tag {
+  --roadside-height: 66px;
+  --roadside-border-width: 4px;
+  --roadside-border-width: round(nearest, calc(var(--roadside-height) * .06), 1px);
+  --roadside-radius: calc(var(--roadside-height) * .12);
+  width: max-content;
+  height: var(--roadside-height);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  padding-inline: 16px;
+  overflow: visible;
+  background: #6a0800;
+  border: var(--roadside-border-width) solid #400500;
+  border-radius: var(--roadside-radius);
+  color: #fff;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-size: 30px;
+  font-weight: 700;
+  line-height: 36px;
+  letter-spacing: -1.2px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.roadside-facility-tag > span {
+  display: block;
+  width: max-content;
+  white-space: nowrap;
+}
+
+.linked-facility__context {
+  min-height: 76px;
+  display: grid;
+  grid-template-columns: max-content minmax(120px, 1fr) max-content;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  color: #400500;
+}
+
+.linked-facility__context i {
+  height: 18px;
+  background: #6f797e;
+  border: 3px solid #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,.2);
+}
+
+.linked-facility__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 12px;
+  padding: 14px;
+}
+
+.linked-facility__card {
+  min-width: 0;
+  background: rgba(255,255,255,.5);
+  border: 1px solid rgba(64,5,0,.12);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.linked-facility__variant {
+  min-height: 122px;
+  display: grid;
+  grid-template-columns: 56px minmax(180px, 1fr);
+  grid-template-rows: 1fr 1fr;
+  align-items: center;
+  justify-items: center;
+  gap: 4px 10px;
+  padding: 10px;
+  overflow-x: auto;
+}
+
+.linked-facility__variant + .linked-facility__variant { border-top: 1px solid rgba(64,5,0,.1); }
+.linked-facility__variant small { grid-row: 1 / 3; color: #6e6759; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
+
+.linked-facility__pending {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 14px 18px;
+  color: #400500;
+}
+
+.linked-facility__pending span { color: #6e6759; }
+
+@media (max-width: 760px) {
+  .facility-reference__variant-grid { grid-template-columns: 1fr; }
+  .facility-reference__stage { justify-content: start; }
+  .linked-facility__context { grid-template-columns: 1fr; }
+  .linked-facility__pending { align-items: flex-start; flex-direction: column; }
+}
diff --git a/packages/center-graphic/src/components/FacilityBatch.tsx b/packages/center-graphic/src/components/FacilityBatch.tsx
new file mode 100644
index 0000000..a6a98d6
--- /dev/null
+++ b/packages/center-graphic/src/components/FacilityBatch.tsx
@@ -0,0 +1,595 @@
+import { useLayoutEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+
+import './FacilityBatch.css';
+import { CompactFacilityConnection } from './CompactFacilityConnection';
+
+export type FacilityVariant = 'positionMap' | 'actualDetail';
+export type FacilityKind = 'silhouette' | 'badge' | 'roadside-actual';
+export type FacilityNamePlate = { baseWidth: number; surface: string; border: string; tint?: string; tintOpacity?: number };
+export type FacilityPiece = { url: string; relativePath: string; part: string };
+type SizedPiece = FacilityPiece & { role: 'flex' | 'fixed'; width: number; height: number };
+export type FacilityAssetSet = { sourcePath: string; pieces: readonly (FacilityPiece & { role: 'flex' | 'fixed' })[] };
+export type FacilityConfig = {
+  id: string;
+  label: string;
+  sourcePrefix?: string;
+  defaultName: string;
+  secondaryText: string;
+  kind: FacilityKind;
+  flexPadding: number;
+  gaps: Partial<Record<FacilityVariant, number[]>>;
+  sourceReferenceTotals?: Partial<Record<FacilityVariant, number>>;
+  routeMode: string;
+  labelRegion: string;
+  namePlate?: FacilityNamePlate;
+  variants: Partial<Record<FacilityVariant, FacilityAssetSet | null>>;
+};
+
+const assetUrls = import.meta.glob<string>([
+  '../assets/facility/batch/source/**/*.svg',
+], {
+  eager: true,
+  query: '?url',
+  import: 'default',
+});
+
+const ASSET_MARKER = '/batch/source/';
+const PART_ORDER: Record<string, number> = { '왼쪽': 0, '중앙': 1, '오른쪽': 2, '위치도': 1 };
+const NAME_PLATE_GEOMETRY = Object.freeze({ seamRatio: 0.1, rightTerminalRadius: 30, borderRatio: 0.06 });
+const DIRECT_NAME_PLATE_BORDER = '#400500';
+const LINKED_NAME_PLATE_BORDER = '#555555';
+const LINKED_NAME_PLATE_TINTS: Readonly<Record<string, string>> = Object.freeze({
+  '고속도로, 국도': '#0D6199',
+  '지방도': '#A77900',
+  '특별시도': '#713699',
+  '시도,군도': '#5B8736',
+});
+
+export const FACILITY_BATCH_ASSETS = Object.freeze(Object.fromEntries(
+  Object.entries(assetUrls).map(([modulePath, url]) => {
+    const relativePath = modulePath.split(ASSET_MARKER)[1];
+    const filename = relativePath.split('/').at(-1)!.replace('.svg', '');
+    return [relativePath, Object.freeze({
+      url,
+      relativePath,
+      part: filename,
+    })];
+  }),
+));
+
+function getAssetSet(prefix: string, variant: string, optional: true): FacilityAssetSet | null;
+function getAssetSet(prefix: string, variant: string, optional?: false): FacilityAssetSet;
+function getAssetSet(prefix: string, variant: string, optional = false): FacilityAssetSet | null {
+  const start = `${prefix}/${variant}/`;
+  const pieces = Object.values(FACILITY_BATCH_ASSETS)
+    .filter((asset) => asset.relativePath.startsWith(start))
+    .sort((a, b) => PART_ORDER[a.part] - PART_ORDER[b.part]);
+
+  if (!pieces.length && optional) return null;
+  if (!pieces.length) throw new Error(`Missing local Facility assets: ${start}`);
+
+  return Object.freeze({
+    sourcePath: `시설물 표현/${start.slice(0, -1)}`,
+    pieces: Object.freeze(pieces.map((piece, index) => Object.freeze({
+      ...piece,
+      role: pieces.length === 1
+        ? 'flex'
+        : piece.part === '중앙' || (pieces.length === 2 && index === 1)
+          ? 'flex'
+          : 'fixed',
+    }))),
+  });
+}
+
+function makeConfig({ id, label, sourcePrefix, defaultName, secondaryText = '', kind, flexPadding, gaps, sourceReferenceTotals, routeMode = 'anchored', labelRegion = 'all', namePlate }: {
+  id: string; label: string; sourcePrefix: string; defaultName: string; secondaryText?: string; kind: FacilityKind; flexPadding: number;
+  gaps: FacilityConfig['gaps']; sourceReferenceTotals: FacilityConfig['sourceReferenceTotals']; routeMode?: string; labelRegion?: string; namePlate?: FacilityNamePlate;
+}): FacilityConfig {
+  return Object.freeze({
+    id,
+    label,
+    sourcePrefix,
+    defaultName,
+    secondaryText,
+    kind,
+    flexPadding,
+    gaps,
+    sourceReferenceTotals,
+    routeMode,
+    labelRegion,
+    namePlate,
+    variants: Object.freeze({
+      positionMap: getAssetSet(sourcePrefix, '위치도'),
+      actualDetail: getAssetSet(sourcePrefix, '실사화'),
+    }),
+  });
+}
+
+export const FACILITY_CONFIGS = Object.freeze({
+  bridge: makeConfig({
+    id: 'bridge', label: "교량", sourcePrefix: '교량', defaultName: '운산1교', secondaryText: 'L=200m',
+    kind: 'silhouette', flexPadding: 10, gaps: { positionMap: [13, 13], actualDetail: [10, 13] },
+    sourceReferenceTotals: { positionMap: 197, actualDetail: 197 }, routeMode: 'inline',
+  }),
+  intersection: makeConfig({
+    id: 'intersection', label: "교차로", sourcePrefix: '교차로', defaultName: '신시교차로',
+    kind: 'badge', flexPadding: 40, gaps: { positionMap: [10], actualDetail: [13, 11] },
+    sourceReferenceTotals: { positionMap: 245, actualDetail: 255 }, labelRegion: 'afterLeft',
+    namePlate: { baseWidth: 179, surface: '#420E0A', border: DIRECT_NAME_PLATE_BORDER },
+  }),
+  junction: makeConfig({
+    id: 'junction', label: "분기점 / JC", sourcePrefix: '분기점, 나들목/분기점', defaultName: '당진분기점',
+    kind: 'badge', flexPadding: 40, gaps: { positionMap: [10], actualDetail: [20, 25] },
+    sourceReferenceTotals: { positionMap: 245, actualDetail: 255 }, labelRegion: 'afterLeft',
+    namePlate: { baseWidth: 179, surface: '#6A0800', border: DIRECT_NAME_PLATE_BORDER },
+  }),
+  interchange: makeConfig({
+    id: 'interchange', label: "나들목 / IC", sourcePrefix: '분기점, 나들목/나들목', defaultName: '정미나들목',
+    kind: 'badge', flexPadding: 40, gaps: { positionMap: [10], actualDetail: [21, 26] },
+    sourceReferenceTotals: { positionMap: 245, actualDetail: 255 }, labelRegion: 'afterLeft',
+    namePlate: { baseWidth: 179, surface: '#6A0800', border: DIRECT_NAME_PLATE_BORDER },
+  }),
+});
+
+function classNames(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(' ');
+}
+
+function calculateFlexibleWidth(config: FacilityConfig, pieces: SizedPiece[], textWidth: number, variant: FacilityVariant, name: string) {
+  const flexIndex = pieces.findIndex((piece) => piece.role === 'flex');
+  const flexPiece = pieces[flexIndex]!;
+  const fixedWidth = pieces.filter((piece) => piece.role === 'fixed').reduce((sum, piece) => sum + piece.width, 0);
+  const sourceReferenceTotal = config.sourceReferenceTotals?.[variant];
+  if (pieces.length === 3 && variant === 'actualDetail' && config.kind === 'badge') {
+    // The existing end allowance includes the fixed right cap. Only the right
+    // edge follows content; the fixed left graphic and text origin stay locked.
+    return Math.ceil(textWidth + config.flexPadding) - pieces.at(-1)!.width;
+  }
+  if (pieces.length !== 2 && name === config.defaultName && Number.isFinite(sourceReferenceTotal)) {
+    return Math.max(flexPiece.width, sourceReferenceTotal! - fixedWidth);
+  }
+  if (pieces.length === 1) return Math.max(flexPiece.width, Math.ceil(textWidth + config.flexPadding));
+  if (pieces.length === 2) return Math.ceil(textWidth + config.flexPadding);
+  if (pieces.length === 3 && variant === 'actualDetail') {
+    // Labels occupy the center only; fixed graphic widths never subsidize content.
+    return Math.max(flexPiece.width, Math.ceil(textWidth + config.flexPadding));
+  }
+  if (config.kind === 'silhouette' || config.labelRegion === 'middle') {
+    return Math.max(flexPiece.width, Math.ceil(textWidth + config.flexPadding));
+  }
+  return Math.max(flexPiece.width, Math.ceil(textWidth + config.flexPadding - fixedWidth));
+}
+
+function TwoPartNameRegion({ renderedWidth, height, namePlate }: { renderedWidth: number; height: number; namePlate: FacilityNamePlate }) {
+  const seamWidth = Math.round(namePlate.baseWidth * NAME_PLATE_GEOMETRY.seamRatio);
+  const terminalWidth = NAME_PLATE_GEOMETRY.rightTerminalRadius;
+  const renderedBodyWidth = Math.max(0, renderedWidth - seamWidth - terminalWidth);
+  const tintOpacity = namePlate.tint ? (namePlate.tintOpacity ?? 0.1) : 0;
+  const tintOverlay = namePlate.tint
+    ? `rgb(${Number.parseInt(namePlate.tint.slice(1, 3), 16)} ${Number.parseInt(namePlate.tint.slice(3, 5), 16)} ${Number.parseInt(namePlate.tint.slice(5, 7), 16)} / ${tintOpacity})`
+    : 'transparent';
+
+  return (
+    <span
+      className="two-part-name-region"
+      data-source-width={namePlate.baseWidth}
+      data-rendered-width={renderedWidth}
+      data-name-body-width={renderedBodyWidth}
+      data-right-terminal-width={terminalWidth}
+      data-graphic-implementation="reconstructed-name-plate"
+      data-source-surface={namePlate.surface}
+      data-source-border={namePlate.border}
+      data-source-tint={namePlate.tint ?? 'none'}
+      data-source-tint-opacity={tintOpacity}
+      style={{
+        width: `${renderedWidth}px`,
+        height: `${height}px`,
+        '--name-plate-surface': namePlate.surface,
+        '--name-plate-border': namePlate.border,
+        '--name-plate-tint-overlay': tintOverlay,
+        '--name-plate-border-width': `${height * NAME_PLATE_GEOMETRY.borderRatio}px`,
+        '--name-plate-radius': `${terminalWidth}px`,
+        '--name-plate-seam-width': `${seamWidth}px`,
+      } as CSSProperties}
+    />
+  );
+}
+
+export function LocalAssetFacility({
+  config,
+  name = config.defaultName,
+  secondaryText = config.secondaryText,
+  variant = 'positionMap',
+  separated = false,
+  showLabels = !separated,
+  className = '',
+}: {
+  config: FacilityConfig;
+  name?: string;
+  secondaryText?: string;
+  variant?: FacilityVariant;
+  separated?: boolean;
+  showLabels?: boolean;
+  className?: string;
+}) {
+  const assetSet = config.variants[variant]!;
+  const primaryProbeRef = useRef<HTMLSpanElement>(null);
+  const secondaryProbeRef = useRef<HTMLSpanElement>(null);
+  const fallbackHeight = config.kind === 'silhouette' ? (variant === 'positionMap' ? 93 : 95) : 66;
+  const [assetDimensions, setAssetDimensions] = useState<Record<string, { width: number; height: number }>>({});
+  const sizedPieces: SizedPiece[] = assetSet.pieces.map((piece, index) => ({
+    ...piece,
+    width: assetDimensions[piece.relativePath]?.width
+      ?? (assetSet.pieces.length === 2 && index === 1 && config.namePlate ? config.namePlate.baseWidth : 1),
+    height: assetDimensions[piece.relativePath]?.height ?? fallbackHeight,
+  }));
+  const baseFlexWidth = sizedPieces.find((piece) => piece.role === 'flex')!.width;
+  const [flexWidth, setFlexWidth] = useState(baseFlexWidth);
+
+  useLayoutEffect(() => {
+    if (separated) {
+      setFlexWidth(baseFlexWidth);
+      return undefined;
+    }
+
+    let active = true;
+    const measure = () => {
+      if (!active) return;
+      const primaryWidth = primaryProbeRef.current ? Number.parseFloat(getComputedStyle(primaryProbeRef.current).width) : 0;
+      const secondaryWidth = secondaryProbeRef.current ? Number.parseFloat(getComputedStyle(secondaryProbeRef.current).width) : 0;
+      const nextWidth = calculateFlexibleWidth(config, sizedPieces, Math.max(primaryWidth, secondaryWidth), variant, name);
+      setFlexWidth((current) => current === nextWidth ? current : nextWidth);
+    };
+    measure();
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+    if (observer && primaryProbeRef.current) observer.observe(primaryProbeRef.current);
+    if (observer && secondaryProbeRef.current) observer.observe(secondaryProbeRef.current);
+    document.fonts?.ready.then(measure);
+    return () => { active = false; observer?.disconnect(); };
+  }, [assetDimensions, assetSet, baseFlexWidth, config, name, secondaryText, separated]);
+
+  const height = Math.max(...sizedPieces.map((piece) => piece.height));
+  const gaps = separated ? (config.gaps[variant] ?? []) : [];
+  const renderedWidths = sizedPieces.map((piece) => piece.role === 'flex' ? flexWidth : piece.width);
+  const isTwoPart = sizedPieces.length === 2;
+  const isThreePartActual = sizedPieces.length === 3 && variant === 'actualDetail';
+  const labelRegion = isTwoPart ? 'afterLeft' : isThreePartActual ? 'middle' : config.labelRegion;
+  const isContentDrivenActual = isThreePartActual && config.kind === 'badge';
+  const sourceReferenceTotal = !isTwoPart && !isContentDrivenActual && name === config.defaultName ? config.sourceReferenceTotals?.[variant] : undefined;
+  const leftInset = ['afterLeft', 'middle'].includes(labelRegion) && sizedPieces.length > 1 ? renderedWidths[0] : 0;
+  const rightInset = labelRegion === 'middle' ? renderedWidths.at(-1)! : 0;
+  const accessibleName = [config.label, name, secondaryText, variant === 'positionMap' ? '위치도' : '실사화', separated ? '분리 표현' : null]
+    .filter(Boolean).join(', ');
+
+  return (
+    <figure
+      className={classNames('local-facility', `local-facility--${config.kind}`, `local-facility--${variant}`, separated && 'is-separated', className)}
+      role="img"
+      aria-label={accessibleName}
+      data-facility={config.id}
+      data-label-region={labelRegion}
+      data-composition={isTwoPart ? 'two-part' : sizedPieces.length === 3 ? 'three-part' : 'one-part'}
+      data-variant={variant}
+      data-separated={separated ? 'true' : 'false'}
+      data-flex-width={flexWidth}
+      data-height={height}
+      data-source-reference-total={sourceReferenceTotal}
+      style={{ '--facility-height': `${height}px` } as CSSProperties}
+    >
+      <span className="local-facility__parts" aria-hidden="true">
+        {sizedPieces.map((piece, index) => {
+          const width = renderedWidths[index];
+          const isTwoPartNameRegion = sizedPieces.length === 2 && index === 1 && config.namePlate;
+          const updateDimensions = (widthValue: number, heightValue: number) => {
+            setAssetDimensions((current) => current[piece.relativePath]?.width === widthValue
+              && current[piece.relativePath]?.height === heightValue
+              ? current
+              : { ...current, [piece.relativePath]: { width: widthValue, height: heightValue } });
+          };
+          return (
+            <span
+              key={piece.relativePath}
+              className={classNames('local-facility__part', `is-${piece.role}`, isTwoPartNameRegion && 'is-two-part-name')}
+              data-part={piece.part}
+              data-base-width={piece.width}
+              data-rendered-width={width}
+              style={{ width: `${width}px`, height: `${piece.height}px`, marginLeft: `${gaps[index - 1] ?? 0}px` }}
+            >
+              {isTwoPartNameRegion ? (
+                <TwoPartNameRegion renderedWidth={width} height={piece.height} namePlate={config.namePlate!} />
+              ) : (
+                <img
+                  src={piece.url}
+                  alt=""
+                  draggable="false"
+                  onLoad={(event) => updateDimensions(event.currentTarget.naturalWidth, event.currentTarget.naturalHeight)}
+                  style={{
+                    width: `${piece.width}px`,
+                    height: `${piece.height}px`,
+                    '--facility-part-scale': width / piece.width,
+                    '--facility-part-base-width': `${piece.width}px`,
+                    '--facility-part-rendered-width': `${width}px`,
+                  } as CSSProperties}
+                />
+              )}
+            </span>
+          );
+        })}
+      </span>
+
+      {showLabels ? (
+        <span className="local-facility__labels" style={{ left: `${leftInset}px`, right: `${rightInset}px` }} aria-hidden="true">
+          <span className="local-facility__primary">{name}</span>
+          {secondaryText ? <span className="local-facility__secondary">{secondaryText}</span> : null}
+        </span>
+      ) : null}
+
+      <span className="local-facility__measure" aria-hidden="true">
+        <span ref={primaryProbeRef} className="local-facility__primary">{name}</span>
+        <span ref={secondaryProbeRef} className="local-facility__secondary">{secondaryText}</span>
+      </span>
+    </figure>
+  );
+}
+
+function Sample({ title, note, children }: { title: string; note?: string; children?: ReactNode }) {
+  return (
+    <article className="facility-reference__sample">
+      <header><strong>{title}</strong>{note ? <span>{note}</span> : null}</header>
+      <div className="facility-reference__stage">{children}</div>
+    </article>
+  );
+}
+
+function CompactAppliedExample({ config }: { config: FacilityConfig }) {
+  return (
+    <CompactFacilityConnection className={classNames('facility-applied', `facility-applied--${config.routeMode}`)} routeMode={config.routeMode} sourceStatus={config.id === 'interchange' ? 'SOURCE_PENDING' : 'SOURCE_RECEIVED'} label={`${config.label} 간략 적용 예제`}>
+      <LocalAssetFacility config={config} />
+    </CompactFacilityConnection>
+  );
+}
+
+export type RoadsideEntity = 'rest-area' | 'drowsy-shelter';
+
+const ROADSIDE_DEFAULT_LABELS: Readonly<Record<RoadsideEntity, string>> = Object.freeze({
+  'rest-area': '휴게소',
+  'drowsy-shelter': '졸음쉼터',
+});
+
+const ROADSIDE_ACTUAL_CONFIG: FacilityConfig = Object.freeze({
+  id: 'roadside',
+  label: "도로변 시설물",
+  defaultName: ROADSIDE_DEFAULT_LABELS['drowsy-shelter'],
+  secondaryText: '',
+  kind: 'roadside-actual',
+  flexPadding: 0,
+  gaps: { actualDetail: [19, 14] },
+  routeMode: 'anchored',
+  labelRegion: 'middle',
+  variants: Object.freeze({ actualDetail: getAssetSet('기타 시설물', '실사화') }),
+});
+
+export function RoadsideFacilityTag({ entity = 'drowsy-shelter', label, variant = 'positionMap', separated = false, className = '' }: {
+  entity?: RoadsideEntity;
+  label?: string;
+  variant?: FacilityVariant;
+  separated?: boolean;
+  className?: string;
+}) {
+  const resolvedLabel = label ?? ROADSIDE_DEFAULT_LABELS[entity] ?? ROADSIDE_DEFAULT_LABELS['drowsy-shelter'];
+  const entityLabel = entity === 'rest-area' ? "휴게소" : "졸음쉼터";
+
+  if (variant === 'actualDetail') {
+    return (
+      <LocalAssetFacility
+        config={ROADSIDE_ACTUAL_CONFIG}
+        name={resolvedLabel}
+        variant="actualDetail"
+        separated={separated}
+        className={classNames('roadside-facility-tag--actual', className)}
+      />
+    );
+  }
+
+  return (
+    <span
+      className={classNames('roadside-facility-tag', className)}
+      role="img"
+      aria-label={`${entityLabel}, ${resolvedLabel}`}
+      data-roadside-entity={entity}
+      data-variant="positionMap"
+    >
+      <span>{resolvedLabel}</span>
+    </span>
+  );
+}
+
+function RoadsideAppliedExample() {
+  return (
+    <CompactFacilityConnection className="facility-applied facility-applied--anchored roadside-applied" routeMode="anchored" sourceStatus="SOURCE_PENDING" label="졸음쉼터 연계 노선 간략 적용 예제">
+      <RoadsideFacilityTag entity="drowsy-shelter" />
+    </CompactFacilityConnection>
+  );
+}
+
+function FacilityReferenceDemo({ config, alternateName }: { config: FacilityConfig; alternateName?: string }) {
+  const widthNames = useMemo(() => [
+    config.id === 'bridge' ? '1교' : '신시',
+    config.defaultName,
+    config.id === 'bridge' ? '서해안고속도로 대산연결 제2교량' : `서해안고속도로 ${config.defaultName}`,
+  ], [config]);
+
+  return (
+    <div className="facility-reference" data-reference-facility={config.id}>
+      <div className="facility-reference__variant-grid">
+        <Sample title="Position Map" note="로컬 SVG · 위치도"><LocalAssetFacility config={config} /></Sample>
+        <Sample title="Actual / Detail" note="로컬 SVG · 실사화"><LocalAssetFacility config={config} variant="actualDetail" /></Sample>
+      </div>
+
+      {alternateName ? (
+        <Sample title="의미 개체" note="같은 자산 · 이름으로 개체 구분">
+          <div className="facility-reference__row">
+            <LocalAssetFacility config={config} name={config.defaultName} />
+            <LocalAssetFacility config={config} name={alternateName} variant="actualDetail" />
+          </div>
+        </Sample>
+      ) : null}
+
+      <Sample title="Separated" note="Source 작성 부분 간격">
+        <div className="facility-reference__row">
+          <LocalAssetFacility config={config} separated />
+          <LocalAssetFacility config={config} variant="actualDetail" separated />
+        </div>
+      </Sample>
+
+      <Sample title="너비 동작" note="Source 정의 가변 영역만 확장">
+        <div className="facility-reference__width-tests">
+          {widthNames.map((name, index) => (
+            <div key={name}><span>{['SHORT', 'MEDIUM', 'LONG'][index]}</span><LocalAssetFacility config={config} name={name} /></div>
+          ))}
+          {widthNames.map((name, index) => (
+            <div key={`actual-${name}`}><span>{`ACTUAL ${['SHORT', 'REF', 'LONG'][index]}`}</span><LocalAssetFacility config={config} name={name} variant="actualDetail" /></div>
+          ))}
+        </div>
+      </Sample>
+
+      <Sample title="간략 적용 예제" note={config.id === 'interchange' ? "SOURCE_PENDING · 기존 Preview 전용; 정확한 IC 구성 추론 안 함" : "SOURCE_RECEIVED · 관계 비교, 정확한 픽셀 정합 아님"}>
+        <CompactAppliedExample config={config} />
+      </Sample>
+    </div>
+  );
+}
+
+export function BridgeReferenceDemo() { return <FacilityReferenceDemo config={FACILITY_CONFIGS.bridge} />; }
+export function IntersectionReferenceDemo() { return <FacilityReferenceDemo config={FACILITY_CONFIGS.intersection} />; }
+export function JunctionReferenceDemo() { return <FacilityReferenceDemo config={FACILITY_CONFIGS.junction} />; }
+export function InterchangeReferenceDemo() { return <FacilityReferenceDemo config={FACILITY_CONFIGS.interchange} />; }
+export function RoadsideReferenceDemo() {
+  const tests: { size: string; entity: RoadsideEntity; entityLabel: string; label: string }[] = [
+    { size: 'SHORT', entity: 'rest-area', entityLabel: "휴게소", label: '휴게소' },
+    { size: 'REFERENCE', entity: 'drowsy-shelter', entityLabel: "졸음쉼터", label: '졸음쉼터' },
+    { size: 'LONG', entity: 'drowsy-shelter', entityLabel: "졸음쉼터", label: '서해안고속도로 대산방향 졸음쉼터' },
+  ];
+
+  return (
+    <div className="facility-reference roadside-reference" data-reference-facility="roadside">
+      <Sample title="Position Map" note="재구성 Primitive · 콘텐츠 기반 너비">
+        <div className="roadside-tag-tests">
+          {tests.map((test) => (
+            <div key={test.size} className="roadside-tag-test" data-roadside-test={test.size.toLowerCase()}>
+              <span className="roadside-tag-test__meta"><strong>{test.entityLabel}</strong><small>{test.size}</small></span>
+              <RoadsideFacilityTag entity={test.entity} label={test.label} />
+            </div>
+          ))}
+        </div>
+      </Sample>
+
+      <Sample title="Actual / Detail" note="Source 작성 그라데이션/filter 그래픽 · 고정 양 끝 + 가변 중앙">
+        <div className="roadside-tag-tests">
+          {tests.map((test) => (
+            <div key={test.size} className="roadside-tag-test" data-roadside-actual-test={test.size.toLowerCase()}>
+              <span className="roadside-tag-test__meta"><strong>{test.entityLabel}</strong><small>{test.size}</small></span>
+              <RoadsideFacilityTag entity={test.entity} label={test.label} variant="actualDetail" />
+            </div>
+          ))}
+        </div>
+      </Sample>
+
+      <Sample title="Actual / Detail · Separated" note="Source 작성 13 / 90 / 13 구조, 예제 간격 19 / 14">
+        <RoadsideFacilityTag entity="drowsy-shelter" variant="actualDetail" separated />
+      </Sample>
+
+      <Sample title="연계 / 노선 맥락" note="노선 + 앵커 + 연결선 + 같은 시설물 태그 계약">
+        <RoadsideAppliedExample />
+      </Sample>
+    </div>
+  );
+}
+
+const LINKED_DEFINITIONS: Readonly<Record<string, { id: string; label: string; name: string; secondaryText: string; kind: FacilityKind; flexPadding: number; labelRegion: string; sourceReferenceTotals: FacilityConfig['sourceReferenceTotals'] }>> = Object.freeze({
+  '터널': { id: 'tunnel', label: "터널", name: '대산2터널', secondaryText: 'L=750m', kind: 'silhouette', flexPadding: 0, labelRegion: 'all', sourceReferenceTotals: { positionMap: 210, actualDetail: 220 } },
+  '교량': { id: 'bridge', label: "교량", name: '운산1교', secondaryText: 'L=200m', kind: 'silhouette', flexPadding: 10, labelRegion: 'all', sourceReferenceTotals: { positionMap: 197, actualDetail: 197 } },
+  '교차로': { id: 'intersection', label: "교차로", name: '신시교차로', secondaryText: '', kind: 'badge', flexPadding: 40, labelRegion: 'afterLeft', sourceReferenceTotals: { positionMap: 245, actualDetail: 255 } },
+  '분기점': { id: 'junction', label: 'JC', name: '당진분기점', secondaryText: '', kind: 'badge', flexPadding: 40, labelRegion: 'afterLeft', sourceReferenceTotals: { positionMap: 245, actualDetail: 255 } },
+  '나들목': { id: 'interchange', label: 'IC', name: '정미나들목', secondaryText: '', kind: 'badge', flexPadding: 40, labelRegion: 'afterLeft', sourceReferenceTotals: { positionMap: 245, actualDetail: 255 } },
+});
+
+const LINKED_GROUPS = Object.freeze([
+  { roadClass: '고속도로, 국도', facilities: ['터널', '교량', '교차로', '분기점', '나들목'] },
+  { roadClass: '지방도', facilities: ['터널', '교량', '교차로'] },
+  { roadClass: '특별시도', facilities: ['터널', '교량', '교차로'] },
+  { roadClass: '시도,군도', facilities: ['터널', '교량', '교차로'] },
+  { roadClass: '구도,면도, 이도', facilities: ['터널', '교량', '교차로'] },
+]);
+
+function linkedPrefix(roadClass: string, facility: string) {
+  if (roadClass === '고속도로, 국도' && facility === '나들목') return `연계 시설물/${roadClass}/${facility}/시설물`;
+  return `연계 시설물/${roadClass}/${facility}`;
+}
+
+function linkedConfig(roadClass: string, facility: string): FacilityConfig | null {
+  const definition = LINKED_DEFINITIONS[facility]!;
+  const prefix = linkedPrefix(roadClass, facility);
+  const positionMap = getAssetSet(prefix, '위치도', true);
+  const actualDetail = getAssetSet(prefix, '실사화', true);
+  if (!positionMap || !actualDetail) return null;
+  return {
+    id: `linked-${definition.id}`,
+    label: `${roadClass} ${definition.label}`,
+    defaultName: definition.name,
+    secondaryText: definition.secondaryText,
+    kind: definition.kind,
+    flexPadding: definition.flexPadding,
+    sourceReferenceTotals: definition.sourceReferenceTotals,
+    labelRegion: definition.labelRegion,
+    namePlate: positionMap.pieces.length === 2 ? {
+      baseWidth: 126,
+      surface: facility === '교차로' ? '#444444' : '#777777',
+      border: LINKED_NAME_PLATE_BORDER,
+      tint: LINKED_NAME_PLATE_TINTS[roadClass],
+      tintOpacity: LINKED_NAME_PLATE_TINTS[roadClass] ? 0.1 : 0,
+    } : undefined,
+    routeMode: 'context',
+    gaps: {
+      positionMap: Array(positionMap.pieces.length - 1).fill(10),
+      actualDetail: Array(actualDetail.pieces.length - 1).fill(8),
+    },
+    variants: { positionMap, actualDetail },
+  };
+}
+
+function LinkedCard({ roadClass, facility }: { roadClass: string; facility: string }) {
+  const config = linkedConfig(roadClass, facility);
+  if (!config) return null;
+  return (
+    <article className="linked-facility__card" data-road-class={roadClass} data-linked-facility={facility}>
+      <header><strong>{LINKED_DEFINITIONS[facility]!.label}</strong><span>{facility}</span></header>
+      <div className="linked-facility__variant">
+        <small>POSITION</small><LocalAssetFacility config={config} /><LocalAssetFacility config={config} separated />
+      </div>
+      <div className="linked-facility__variant">
+        <small>ACTUAL</small><LocalAssetFacility config={config} variant="actualDetail" /><LocalAssetFacility config={config} variant="actualDetail" separated />
+      </div>
+    </article>
+  );
+}
+
+export function LinkedFacilityReferenceDemo() {
+  return (
+    <div className="linked-facility" data-reference-facility="linked">
+      <div className="linked-facility__context">
+        <span>사업 인접 노선 분류 맥락</span>
+        <i aria-hidden="true" />
+        <strong>낮은 채도의 로컬 자산 변형</strong>
+      </div>
+      {LINKED_GROUPS.map((group) => (
+        <section key={group.roadClass} className="linked-facility__group">
+          <header><h3>{group.roadClass}</h3><span>{group.facilities.length} READY 시설물 집합</span></header>
+          <div className="linked-facility__grid">
+            {group.facilities.map((facility) => <LinkedCard key={facility} roadClass={group.roadClass} facility={facility} />)}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/center-graphic/src/components/TunnelFacility.css b/packages/center-graphic/src/components/TunnelFacility.css
new file mode 100644
index 0000000..11e7e20
--- /dev/null
+++ b/packages/center-graphic/src/components/TunnelFacility.css
@@ -0,0 +1,221 @@
+.tunnel-reference {
+  width: 100%;
+  display: grid;
+  gap: 18px;
+}
+
+.tunnel-reference__variant-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(260px, 1fr));
+  gap: 14px;
+}
+
+.tunnel-reference__sample {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  background: rgba(217, 217, 217, .48);
+  border: 1px solid rgba(64, 5, 0, .14);
+  border-radius: 8px;
+}
+
+.tunnel-reference__sample > header {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 14px;
+  background: rgba(255, 255, 255, .62);
+  border-bottom: 1px solid rgba(64, 5, 0, .12);
+}
+
+.tunnel-reference__sample > header strong {
+  color: #400500;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.tunnel-reference__sample > header span {
+  color: #6e6759;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: right;
+}
+
+.tunnel-reference__stage {
+  min-height: 154px;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  overflow-x: auto;
+}
+
+.tunnel-reference__row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  gap: 28px;
+}
+
+.tunnel-facility {
+  position: relative;
+  width: max-content;
+  height: var(--tunnel-height);
+  display: grid;
+  grid-template-columns:
+    var(--tunnel-left-width)
+    var(--tunnel-left-gap)
+    var(--tunnel-center-width)
+    var(--tunnel-right-gap)
+    var(--tunnel-right-width);
+  grid-template-rows: var(--tunnel-height);
+  margin: 0;
+  isolation: isolate;
+  flex: 0 0 auto;
+}
+
+.tunnel-facility__segment {
+  grid-row: 1;
+  display: block;
+  height: var(--tunnel-height);
+  overflow: hidden;
+}
+
+.tunnel-facility__segment img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  user-select: none;
+}
+
+.tunnel-facility__segment--left {
+  grid-column: 1;
+  width: var(--tunnel-left-width);
+  z-index: 1;
+}
+
+.tunnel-facility__segment--center {
+  grid-column: 3;
+  width: var(--tunnel-center-width);
+  position: relative;
+  overflow: visible;
+}
+
+.tunnel-facility__segment--center img {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--tunnel-center-base-width);
+  max-width: none;
+  transform: translateX(-50%) scaleX(var(--tunnel-center-scale));
+  transform-origin: center;
+}
+
+/* Non-separated only: the fixed ends paint on top (z-index: 1), so a fractional-scaleX
+   compositing seam at the shared edge is hidden by extending this layer 1px under each
+   neighbor rather than by resizing the flex track itself. */
+.tunnel-facility:not(.is-separated) .tunnel-facility__segment--center img {
+  transform: translateX(-50%) scaleX(calc((var(--tunnel-center-width) + 2px) / var(--tunnel-center-base-width)));
+}
+
+.tunnel-facility__segment--right {
+  grid-column: 5;
+  width: var(--tunnel-right-width);
+  z-index: 1;
+}
+
+.tunnel-facility__labels {
+  z-index: 1;
+  grid-column: 1 / -1;
+  grid-row: 1;
+  position: relative;
+  display: block;
+  height: var(--tunnel-height);
+  color: #fff;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* Actual/Detail owns the available center track, not the full component. */
+.tunnel-facility--actualDetail .tunnel-facility__labels {
+  grid-column: 3;
+}
+
+.tunnel-facility__primary,
+.tunnel-facility__secondary {
+  position: absolute;
+  left: 50%;
+  display: block;
+  width: max-content;
+  max-width: none;
+  transform: translateX(-50%);
+  color: #fff;
+  font-family: 'Noto Sans KR', sans-serif;
+  font-weight: 700;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.tunnel-facility__primary {
+  top: 22px;
+  font-size: 30px;
+  line-height: 36px;
+  letter-spacing: -1.2px;
+}
+
+.tunnel-facility__secondary {
+  top: 68px;
+  font-size: 16px;
+  line-height: 19px;
+  letter-spacing: -.64px;
+}
+
+/* All Tunnel representations share vertical anchors; retain Actual typography. */
+.tunnel-facility--actualDetail .tunnel-facility__secondary { line-height: 23px; }
+
+.tunnel-facility__measure {
+  position: fixed;
+  inset: auto;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.tunnel-facility__measure .tunnel-facility__primary,
+.tunnel-facility__measure .tunnel-facility__secondary {
+  position: fixed;
+  left: auto;
+  top: auto;
+  transform: none;
+}
+
+.tunnel-reference__width-tests {
+  width: 100%;
+  display: grid;
+  gap: 16px;
+}
+
+.tunnel-reference__width-tests > div {
+  min-width: max-content;
+  display: grid;
+  grid-template-columns: 64px max-content;
+  align-items: center;
+  gap: 16px;
+}
+
+.tunnel-reference__width-tests > div > span {
+  color: #6e6759;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .08em;
+}
+
+@media (max-width: 760px) {
+  .tunnel-reference__variant-grid { grid-template-columns: 1fr; }
+  .tunnel-reference__stage { justify-content: start; }
+}
diff --git a/packages/center-graphic/src/components/TunnelFacility.tsx b/packages/center-graphic/src/components/TunnelFacility.tsx
new file mode 100644
index 0000000..c4f3202
--- /dev/null
+++ b/packages/center-graphic/src/components/TunnelFacility.tsx
@@ -0,0 +1,212 @@
+import { useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+
+import positionMapLeft from '../assets/facility/tunnel/position-map/left.svg';
+import positionMapCenter from '../assets/facility/tunnel/position-map/center.svg';
+import positionMapRight from '../assets/facility/tunnel/position-map/right.svg';
+import actualDetailLeft from '../assets/facility/tunnel/actual-detail/left.svg';
+import actualDetailCenter from '../assets/facility/tunnel/actual-detail/center.svg';
+import actualDetailRight from '../assets/facility/tunnel/actual-detail/right.svg';
+
+import './TunnelFacility.css';
+import { CompactFacilityConnection } from './CompactFacilityConnection';
+
+export const TUNNEL_ASSET_MAP = Object.freeze({
+  positionMap: Object.freeze({
+    semanticId: 'facility.tunnel.position-map',
+    sourceDirectory: '시설물 표현/터널/위치도',
+    left: Object.freeze({ src: positionMapLeft, width: 43, height: 93, role: 'fixed-left-terminal' }),
+    center: Object.freeze({ src: positionMapCenter, width: 99, height: 93, role: 'horizontal-flex-center' }),
+    right: Object.freeze({ src: positionMapRight, width: 43, height: 93, role: 'fixed-right-terminal' }),
+    separatedGap: Object.freeze({ leftToCenter: 7, centerToRight: 5 }),
+  }),
+  actualDetail: Object.freeze({
+    semanticId: 'facility.tunnel.actual-detail',
+    sourceDirectory: '시설물 표현/터널/실사화',
+    left: Object.freeze({ src: actualDetailLeft, width: 48, height: 95, role: 'fixed-left-terminal' }),
+    center: Object.freeze({ src: actualDetailCenter, width: 84, height: 95, role: 'horizontal-flex-center' }),
+    right: Object.freeze({ src: actualDetailRight, width: 48, height: 95, role: 'fixed-right-terminal' }),
+    separatedGap: Object.freeze({ leftToCenter: 10, centerToRight: 9 }),
+  }),
+});
+
+export type TunnelVariant = keyof typeof TUNNEL_ASSET_MAP;
+
+const VARIANT_LABEL: Record<TunnelVariant, string> = {
+  positionMap: '위치도',
+  actualDetail: '실사화',
+};
+
+const SOURCE_REFERENCE_NAME = '대산2터널';
+const SOURCE_REFERENCE_TOTALS = Object.freeze({
+  positionMap: 210,
+  actualDetail: 220,
+});
+
+function classNames(...values: Array<string | false | null | undefined>) {
+  return values.filter(Boolean).join(' ');
+}
+
+export function TunnelFacility({
+  name = '대산2터널',
+  secondaryText = 'L=750m',
+  variant = 'positionMap',
+  separated = false,
+  showLabels = !separated,
+  className = '',
+}: {
+  name?: string;
+  secondaryText?: string;
+  variant?: TunnelVariant;
+  separated?: boolean;
+  showLabels?: boolean;
+  className?: string;
+}) {
+  const asset = TUNNEL_ASSET_MAP[variant];
+  if (!asset) throw new Error(`Unsupported Tunnel visual variant: ${variant}`);
+
+  const primaryProbeRef = useRef<HTMLSpanElement>(null);
+  const secondaryProbeRef = useRef<HTMLSpanElement>(null);
+  const [measuredCenterWidth, setMeasuredCenterWidth] = useState<number>(asset.center.width);
+
+  useLayoutEffect(() => {
+    if (separated) {
+      setMeasuredCenterWidth(asset.center.width);
+      return undefined;
+    }
+
+    let active = true;
+    const measure = () => {
+      if (!active) return;
+      const primaryWidth = primaryProbeRef.current ? Number.parseFloat(getComputedStyle(primaryProbeRef.current).width) : 0;
+      const secondaryWidth = secondaryProbeRef.current ? Number.parseFloat(getComputedStyle(secondaryProbeRef.current).width) : 0;
+      const referenceCenterWidth = SOURCE_REFERENCE_TOTALS[variant] - asset.left.width - asset.right.width;
+      const nextWidth = name === SOURCE_REFERENCE_NAME
+        ? Math.max(asset.center.width, referenceCenterWidth)
+        : Math.max(asset.center.width, Math.ceil(primaryWidth), Math.ceil(secondaryWidth));
+      setMeasuredCenterWidth((current) => current === nextWidth ? current : nextWidth);
+    };
+
+    measure();
+    const observer = typeof ResizeObserver === 'function' ? new ResizeObserver(measure) : null;
+    if (observer && primaryProbeRef.current) observer.observe(primaryProbeRef.current);
+    if (observer && secondaryProbeRef.current) observer.observe(secondaryProbeRef.current);
+    document.fonts?.ready.then(measure);
+
+    return () => {
+      active = false;
+      observer?.disconnect();
+    };
+  }, [asset, name, secondaryText, separated]);
+
+  const centerWidth = separated ? asset.center.width : measuredCenterWidth;
+  const leftGap = separated ? asset.separatedGap.leftToCenter : 0;
+  const rightGap = separated ? asset.separatedGap.centerToRight : 0;
+  const accessibleName = [name, secondaryText, VARIANT_LABEL[variant], separated ? '분리 표현' : null]
+    .filter(Boolean)
+    .join(', ');
+  const style = {
+    '--tunnel-height': `${asset.center.height}px`,
+    '--tunnel-left-width': `${asset.left.width}px`,
+    '--tunnel-center-base-width': `${asset.center.width}px`,
+    '--tunnel-center-width': `${centerWidth}px`,
+    '--tunnel-center-scale': centerWidth / asset.center.width,
+    '--tunnel-right-width': `${asset.right.width}px`,
+    '--tunnel-left-gap': `${leftGap}px`,
+    '--tunnel-right-gap': `${rightGap}px`,
+  } as CSSProperties;
+
+  return (
+    <figure
+      className={classNames('tunnel-facility', `tunnel-facility--${variant}`, separated && 'is-separated', className)}
+      style={style}
+      role="img"
+      aria-label={accessibleName}
+      data-tunnel-variant={variant}
+      data-separated={separated ? 'true' : 'false'}
+      data-left-width={asset.left.width}
+      data-center-width={centerWidth}
+      data-right-width={asset.right.width}
+      data-height={asset.center.height}
+      data-source-reference-total={name === SOURCE_REFERENCE_NAME ? SOURCE_REFERENCE_TOTALS[variant] : undefined}
+    >
+      <span className="tunnel-facility__segment tunnel-facility__segment--left" aria-hidden="true">
+        <img src={asset.left.src} alt="" draggable="false" />
+      </span>
+      <span className="tunnel-facility__segment tunnel-facility__segment--center" aria-hidden="true">
+        <img src={asset.center.src} alt="" draggable="false" />
+      </span>
+      <span className="tunnel-facility__segment tunnel-facility__segment--right" aria-hidden="true">
+        <img src={asset.right.src} alt="" draggable="false" />
+      </span>
+
+      {showLabels && (
+        <span className="tunnel-facility__labels" aria-hidden="true">
+          <span className="tunnel-facility__primary">{name}</span>
+          {secondaryText ? <span className="tunnel-facility__secondary">{secondaryText}</span> : null}
+        </span>
+      )}
+
+      <span className="tunnel-facility__measure" aria-hidden="true">
+        <span ref={primaryProbeRef} className="tunnel-facility__primary">{name}</span>
+        <span ref={secondaryProbeRef} className="tunnel-facility__secondary">{secondaryText}</span>
+      </span>
+    </figure>
+  );
+}
+
+function TunnelSample({ title, note, children }: { title: string; note?: string; children?: ReactNode }) {
+  return (
+    <article className="tunnel-reference__sample">
+      <header>
+        <strong>{title}</strong>
+        {note ? <span>{note}</span> : null}
+      </header>
+      <div className="tunnel-reference__stage">{children}</div>
+    </article>
+  );
+}
+
+function CompactTunnelExample() {
+  return (
+    <CompactFacilityConnection className="tunnel-applied-example" routeMode="inline" sourceStatus="SOURCE_RECEIVED" label="노선과 터널 시설물의 간략 적용 예제">
+      <TunnelFacility name="대산2터널" secondaryText="L=750m" variant="positionMap" />
+    </CompactFacilityConnection>
+  );
+}
+
+export function TunnelReferenceDemo() {
+  return (
+    <div className="tunnel-reference">
+      <div className="tunnel-reference__variant-grid">
+        <TunnelSample title="Position Map" note="로컬 SVG · 위치도">
+          <TunnelFacility variant="positionMap" />
+        </TunnelSample>
+        <TunnelSample title="Actual / Detail" note="로컬 SVG · 실사화">
+          <TunnelFacility variant="actualDetail" />
+        </TunnelSample>
+      </div>
+
+      <TunnelSample title="Separated" note="같은 개체 · Source 작성 부분 간격">
+        <div className="tunnel-reference__row">
+          <TunnelFacility variant="positionMap" separated />
+          <TunnelFacility variant="actualDetail" separated />
+        </div>
+      </TunnelSample>
+
+      <TunnelSample title="너비 동작" note="CENTER만 수평 확장">
+        <div className="tunnel-reference__width-tests">
+          <div><span>SHORT</span><TunnelFacility name="터널" secondaryText="L=80m" variant="positionMap" /></div>
+          <div><span>MEDIUM</span><TunnelFacility name="대산2터널" secondaryText="L=750m" variant="positionMap" /></div>
+          <div><span>LONG</span><TunnelFacility name="서해안고속도로 대산연결 제2터널" secondaryText="L=12,480m" variant="positionMap" /></div>
+          <div><span>ACTUAL SHORT</span><TunnelFacility name="터널" secondaryText="L=80m" variant="actualDetail" /></div>
+          <div><span>ACTUAL REF</span><TunnelFacility name="대산2터널" secondaryText="L=750m" variant="actualDetail" /></div>
+          <div><span>ACTUAL LONG</span><TunnelFacility name="서해안고속도로 대산연결 제2터널" secondaryText="L=12,480m" variant="actualDetail" /></div>
+        </div>
+      </TunnelSample>
+
+      <TunnelSample title="간략 적용 예제" note="노선 + 연결 + 터널 + 레이블">
+        <CompactTunnelExample />
+      </TunnelSample>
+    </div>
+  );
+}
diff --git a/packages/center-graphic/src/env.d.ts b/packages/center-graphic/src/env.d.ts
new file mode 100644
index 0000000..c5c0563
--- /dev/null
+++ b/packages/center-graphic/src/env.d.ts
@@ -0,0 +1,11 @@
+// Build-only asset declarations. Public declarations never expose Vite types.
+declare module "*.svg" {
+  const url: string
+  export default url
+}
+
+declare module "*.css" {}
+
+interface ImportMeta {
+  glob<T>(patterns: string[], options: { eager: true; query: "?url"; import: "default" }): Record<string, T>
+}
diff --git a/packages/center-graphic/src/index.ts b/packages/center-graphic/src/index.ts
new file mode 100644
index 0000000..de7ec9e
--- /dev/null
+++ b/packages/center-graphic/src/index.ts
@@ -0,0 +1,44 @@
+// Public API of @hm-design/center-graphic (CENTER domain: title, information, route / spatial, facility).
+// This package does not depend on @hm-design/ui. Reference demo pages are in "@hm-design/center-graphic/reference".
+
+// Scale wrapper (CENTER_PAIR: 7680x2160 = 1.00, 3840x2160 = 0.75)
+export { CenterRepresentation } from "./components/CenterRepresentation"
+export type { CenterTargetResolution } from "./components/CenterRepresentation"
+
+// Title
+export { CenterTitle, CENTER_TITLE_COMPOSITIONS } from "./components/CenterTitle"
+export type { CenterTitleComposition } from "./components/CenterTitle"
+
+// Information
+export { CenterInformationBox, CenterInformationTable, CenterInformationEmphasis, CENTER_INFORMATION_PALETTES } from "./components/CenterInformationDisplay"
+export type {
+  CenterInformationPalette,
+  CenterInformationBoxItem,
+  CenterInformationListItem,
+  CenterInformationTableRow,
+  CenterInformationMetric,
+} from "./components/CenterInformationDisplay"
+
+// Route / spatial
+export {
+  RouteLine,
+  ProjectRoute,
+  RouteNameBadge,
+  RouteNumberBadge,
+  DirectionBadge,
+  AdministrativeLabel,
+  NorthArrow,
+  BoundaryLine,
+  ProjectExtent,
+  ROUTE_CLASSES,
+  ROUTE_STATES,
+  ADMIN_LEVELS,
+} from "./components/CenterSpatialInformation"
+export type { RouteClassKey, RouteState, DirectionKind, AdminLevelKey, ProjectExtentSection } from "./components/CenterSpatialInformation"
+
+// Facility
+export { CompactFacilityConnection } from "./components/CompactFacilityConnection"
+export { TunnelFacility, TUNNEL_ASSET_MAP } from "./components/TunnelFacility"
+export type { TunnelVariant } from "./components/TunnelFacility"
+export { LocalAssetFacility, RoadsideFacilityTag, FACILITY_CONFIGS } from "./components/FacilityBatch"
+export type { FacilityConfig, FacilityVariant, RoadsideEntity } from "./components/FacilityBatch"
diff --git a/packages/center-graphic/src/reference.ts b/packages/center-graphic/src/reference.ts
new file mode 100644
index 0000000..7926727
--- /dev/null
+++ b/packages/center-graphic/src/reference.ts
@@ -0,0 +1,13 @@
+// Reference demo pages used by Storybook review. They are not part of the component API.
+export { CenterTitleReferenceDemo } from "./components/CenterTitle"
+export { CenterInformationDisplayReferenceDemo } from "./components/CenterInformationDisplay"
+export { CenterSpatialInformationReferenceDemo } from "./components/CenterSpatialInformation"
+export { TunnelReferenceDemo } from "./components/TunnelFacility"
+export {
+  BridgeReferenceDemo,
+  IntersectionReferenceDemo,
+  JunctionReferenceDemo,
+  InterchangeReferenceDemo,
+  RoadsideReferenceDemo,
+  LinkedFacilityReferenceDemo,
+} from "./components/FacilityBatch"
diff --git a/packages/center-graphic/tsconfig.build.json b/packages/center-graphic/tsconfig.build.json
new file mode 100644
index 0000000..eaa1d3a
--- /dev/null
+++ b/packages/center-graphic/tsconfig.build.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "types": ["react", "react-dom"]
+  },
+  "include": ["src"]
+}
diff --git a/packages/center-graphic/tsconfig.json b/packages/center-graphic/tsconfig.json
new file mode 100644
index 0000000..b84cda8
--- /dev/null
+++ b/packages/center-graphic/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.app.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+    "paths": {}
+  },
+  "include": ["src"]
+}
diff --git a/packages/ui/README.md b/packages/ui/README.md
new file mode 100644
index 0000000..4588379
--- /dev/null
+++ b/packages/ui/README.md
@@ -0,0 +1,33 @@
+# @hm-design/ui
+
+React 19 UI components and the HM default theme. Published entrypoints contain ESM JavaScript and TypeScript declarations.
+
+```tsx
+import { Button, Input } from "@hm-design/ui"
+import { applyRuntimeTheme, resetRuntimeTheme } from "@hm-design/ui/theme"
+```
+
+With Tailwind CSS 4, import these styles in order in the application's CSS entrypoint:
+
+```css
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+```
+
+Process this entrypoint with the application's Tailwind CSS 4 integration. The package registers its compiled component classes as Tailwind sources and includes the required shadcn CSS without installing the shadcn CLI. React and React DOM are peer dependencies and are not bundled.
+
+The default theme, Noto Sans KR font and its OFL license are included. External theme JSON and a Theme CDN are optional and are not included in this package. The runtime theme API remains available from `@hm-design/ui/theme`.
+
+For Dashboard work status colors, explicitly load the optional status stylesheet after the theme:
+
+```css
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
+@import "@hm-design/ui/theme.css";
+@import "@hm-design/ui/dashboard-status.css";
+```
+
+The status stylesheet defines only `--hm-dashboard-status-active`, `--hm-dashboard-status-hold`, `--hm-dashboard-status-done` and `--hm-dashboard-status-issue`. It does not automatically style `Badge`, buttons or `data-status` attributes. Consumers must map these variables to their existing component styles; the repository's `docs/patterns/dashboard-layout.md` shows the Badge mapping. `done` resolves the existing white palette token in each `:root` / `[data-hm-theme]` scope. The other colors preserve the approved Dashboard values and are not additional Runtime Theme tokens.
+
+From the HMDesignSystem repository, run `npm run build -w @hm-design/ui`. `npm pack` runs this build automatically. Only `dist/`, this README and the package manifest are packed; source and Storybook files are excluded.
diff --git a/packages/ui/components.json b/packages/ui/components.json
new file mode 100644
index 0000000..1c5c773
--- /dev/null
+++ b/packages/ui/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..be6df95
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@hm-design/ui",
+  "version": "0.1.0",
+  "private": false,
+  "description": "HM Design System UI components (shadcn + Radix) and the HM Theme.",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./dashboard-status.css": "./dist/dashboard-status.css",
+    "./tailwind.css": "./dist/tailwind.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "build": "node ../../scripts/build-package.mjs ui",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^9.2.4",
+    "class-variance-authority": "^0.7.1",
+    "cmdk": "^1.1.1",
+    "cn": "^0.4.0",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^1.49.0",
+    "radix-ui": "^1.6.7",
+    "react-day-picker": "^10.0.2",
+    "react-resizable-panels": "^4.14.2",
+    "sonner": "^2.0.8",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "shadcn": "^4.21.1"
+  }
+}
diff --git a/packages/ui/src/components/ui/accordion.tsx b/packages/ui/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..b486132
--- /dev/null
+++ b/packages/ui/src/components/ui/accordion.tsx
@@ -0,0 +1,76 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+import { ChevronDownIcon } from "lucide-react"
+
+// Radix Accordion keeps type single | multiple, collapsible, value / defaultValue / onValueChange, disabled, and the keyboard
+// model (Arrow Up / Down, Home / End, Enter / Space) with ARIA. States are the Radix attributes (data-state, data-disabled).
+// Look comes from src/theme/accordion.css.
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+// The shadcn chevron is kept and rotates with data-state. Disabled keeps the Radix `disabled` attribute and `data-disabled`.
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger flex flex-1 items-start justify-between text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 transition-transform duration-200"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+// shadcn open / close animation (height from --radix-accordion-content-height) is kept; the inner div carries the padding so the
+// height animation is not distorted.
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden data-[state=closed]:animate-[accordion-up_0.2s_ease-out] data-[state=open]:animate-[accordion-down_0.2s_ease-out]"
+      {...props}
+    >
+      <div data-slot="accordion-content-inner" className={cn(className)}>
+        {children}
+      </div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/packages/ui/src/components/ui/alert-dialog.tsx b/packages/ui/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..c8b1946
--- /dev/null
+++ b/packages/ui/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { Button } from "./button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// Radix AlertDialog: no Close (X) button, no outside-click dismiss, Escape still closes, initial focus goes to Cancel.
+// Surface, size and regions come from src/theme/alert-dialog.css.
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 outline-none duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-col-reverse sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("font-heading", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+type ActionButtonProps = Pick<React.ComponentProps<typeof Button>, "variant" | "appearance" | "size">
+
+// Action and Cancel are the HM Button composed over the Radix part (Button asChild). The Radix part gets no data-slot of its
+// own, so the Button's data-slot / data-variant / data-appearance stay and the HM Button style applies. Alert Dialog defines
+// no Button look: Cancel defaults to the cancel role (Gray solid) and Action to primary solid; pass variant="destructive"
+// appearance="outline" for a dangerous action (the same pairing as the Dialog delete confirmation).
+function AlertDialogAction({
+  variant = "primary",
+  appearance = "solid",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> & ActionButtonProps) {
+  return (
+    <Button variant={variant} appearance={appearance} size={size} asChild>
+      <AlertDialogPrimitive.Action {...props} />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  variant = "cancel",
+  appearance = "solid",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> & ActionButtonProps) {
+  return (
+    <Button variant={variant} appearance={appearance} size={size} asChild>
+      <AlertDialogPrimitive.Cancel {...props} />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/packages/ui/src/components/ui/alert.tsx b/packages/ui/src/components/ui/alert.tsx
new file mode 100644
index 0000000..8dc3157
--- /dev/null
+++ b/packages/ui/src/components/ui/alert.tsx
@@ -0,0 +1,33 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+
+// Alert is an inline message, not a Toast. shadcn structure is kept (role="alert", optional leading svg icon, Title, Description);
+// the look comes from src/theme/alert.css via data-variant. Only default and destructive exist: the HM Theme has no success / warning /
+// information status colors yet, so none are invented. There is no close action.
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+)
+
+function Alert({ className, variant = "default", ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return <div data-slot="alert" data-variant={variant} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="alert-title" className={cn("col-start-2 line-clamp-1 min-h-4", className)} {...props} />
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="alert-description" className={cn("col-start-2 grid justify-items-start gap-1", className)} {...props} />
+}
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/packages/ui/src/components/ui/aspect-ratio.tsx b/packages/ui/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 0000000..0e08c84
--- /dev/null
+++ b/packages/ui/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,13 @@
+"use client"
+
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
+
+// A layout primitive only: Radix keeps the `ratio` prop (width / height) and the sizing box. It draws no surface, radius or
+// border, and no image styling (object-fit, rounding) is applied; the consumer composes those on the child.
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }
diff --git a/packages/ui/src/components/ui/avatar.tsx b/packages/ui/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..d929f51
--- /dev/null
+++ b/packages/ui/src/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+// Radix Avatar keeps the image load handling: the Image renders only after it loads, otherwise the Fallback shows
+// (with an optional `delayMs`). `size` is the shadcn API (sm | default | lg); the dimensions and the fallback look come from
+// src/theme/avatar.css.
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn("relative flex shrink-0 overflow-hidden select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full object-cover", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn("flex size-full items-center justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx
new file mode 100644
index 0000000..4e47e07
--- /dev/null
+++ b/packages/ui/src/components/ui/badge.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+import { cn } from "cn"
+
+// Badge is its own component, not a Button variant. Variants are the shadcn set (default / secondary / destructive / outline), each with a
+// meaning that exists in the current HM Theme (primary, neutral, destructive, bordered). Looks come from src/theme/badge.css via data-variant.
+// There is no success / warning / information variant: the HM Theme has no status palette for them yet.
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap outline-none [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "",
+        secondary: "",
+        destructive: "",
+        outline: "",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+  return <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/packages/ui/src/components/ui/breadcrumb.tsx b/packages/ui/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..51b80f0
--- /dev/null
+++ b/packages/ui/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Slot } from "radix-ui"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+// Page-level navigation primitive: nav > ol > li, no router dependency (use `asChild` on BreadcrumbLink with any link component).
+// Look comes from src/theme/breadcrumb.css.
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn("flex flex-wrap items-center break-words", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+// The current page is a label, not a link: `aria-current="page"` with `aria-disabled` and role=link (shadcn), no pointer behavior.
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("inline-flex items-center", className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  )
+}
+
+// Presentational only (aria-hidden + sr-only "More"). Wrapping it in a menu trigger is the consumer's composition.
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx
new file mode 100644
index 0000000..de97ec8
--- /dev/null
+++ b/packages/ui/src/components/ui/button.tsx
@@ -0,0 +1,84 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { Slot } from "radix-ui"
+
+// variant = ui_viz role, appearance = ui_viz treatment (docs/components/button.md §28).
+// `default` and `outline` are kept as aliases (ui_viz also keeps `outline` as an alias) so existing shadcn usage keeps working.
+// `ghost` and `link` are shadcn compatibility variants: ui_viz has no spec for them, so they keep the shadcn defaults.
+type ButtonAppearance = "brand" | "solid" | "outline"
+
+// shadcn motion and disabled defaults. HM roles replace them: no transition, no press shift, not-allowed cursor.
+const shadcnMotion =
+  "transition-all active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50"
+const hmRole = "disabled:cursor-not-allowed"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        primary: hmRole,
+        secondary: hmRole,
+        modify: hmRole,
+        destructive: hmRole,
+        cancel: hmRole,
+        default: hmRole,
+        outline: hmRole,
+        ghost: `${shadcnMotion} hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50`,
+        link: `${shadcnMotion} text-primary underline-offset-4 hover:underline`,
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "primary",
+  appearance = "brand",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    appearance?: ButtonAppearance
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+  const compat = variant === "ghost" || variant === "link"
+  // `default` is the primary role; `outline` is primary + outline appearance.
+  const role = variant === "default" || variant === "outline" ? "primary" : variant
+  const treatment = variant === "outline" ? "outline" : appearance
+
+  return (
+    <Comp
+      data-variant={role}
+      data-appearance={compat ? undefined : treatment}
+      data-size={size}
+      className={cn(buttonVariants({ variant: role, size, className }))}
+      {...props}
+      // After the spread: `<XTrigger asChild><Button/></XTrigger>` passes the trigger's own data-slot down, which would drop the HM Button look.
+      data-slot="button"
+    />
+  )
+}
+
+export { Button, buttonVariants }
+export type { ButtonAppearance }
diff --git a/packages/ui/src/components/ui/calendar.tsx b/packages/ui/src/components/ui/calendar.tsx
new file mode 100644
index 0000000..32141e7
--- /dev/null
+++ b/packages/ui/src/components/ui/calendar.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { DayPicker } from "react-day-picker"
+import { ko } from "react-day-picker/locale"
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "lucide-react"
+
+// A date selection primitive on react-day-picker. The date math, month navigation, keyboard model (arrow keys, Home / End,
+// PageUp / PageDown), selection modes (single | multiple | range), disabled / outside days and the ARIA grid are the library's.
+// The default class names (`rdp-*`) and the day state attributes (`data-selected`, `data-today`, `data-outside`, `data-disabled`,
+// `data-focused`) stay as the library renders them; the HM look is in src/theme/calendar.css. Locale: Korean by default
+// (`react-day-picker/locale`, no extra dependency); pass `locale` for another one. Not a Date Picker (see date-picker.tsx).
+function Calendar({
+  className,
+  showOutsideDays = true,
+  locale = ko,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker>) {
+  return (
+    <DayPicker
+      data-slot="calendar"
+      showOutsideDays={showOutsideDays}
+      locale={locale}
+      className={cn(className)}
+      components={{
+        Chevron: ({ orientation, className: chevronClassName, ...chevronProps }) => {
+          const Icon =
+            orientation === "left"
+              ? ChevronLeftIcon
+              : orientation === "right"
+                ? ChevronRightIcon
+                : orientation === "up"
+                  ? ChevronUpIcon
+                  : ChevronDownIcon
+          return <Icon className={cn(chevronClassName)} {...(chevronProps as React.SVGProps<SVGSVGElement>)} />
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Calendar }
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
new file mode 100644
index 0000000..faf1787
--- /dev/null
+++ b/packages/ui/src/components/ui/card.tsx
@@ -0,0 +1,110 @@
+import * as React from "react"
+import { cn } from "cn"
+
+// Card is the ui_viz Content Card (external ui_viz docs/patterns/content-container.md Type B; HM spec: docs/components/card.md).
+// `surface` is its ui_viz surface axis: White (default) or Beige.
+// Border, radius, surface, padding and the Title typography come from packages/ui/src/theme/card.css. `size="sm"` is a shadcn size ui_viz does not define.
+type CardSurface = "surface" | "content"
+
+function Card({
+  className,
+  size = "default",
+  surface = "surface",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm"; surface?: CardSurface }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      data-surface={surface}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) py-(--card-spacing) text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export type { CardSurface }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/packages/ui/src/components/ui/carousel.tsx b/packages/ui/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..94744ac
--- /dev/null
+++ b/packages/ui/src/components/ui/carousel.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"
+import { cn } from "cn"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+// Slide navigation on Embla (embla-carousel-react): drag / swipe, snapping, loop, alignment, plugins and the scroll math are
+// Embla's. The Carousel adds the previous / next controls, the ArrowLeft / ArrowRight keys and the carousel semantics
+// (`role="region"`, `aria-roledescription="carousel"`, slides as `role="group"` `aria-roledescription="slide"`), and exposes the
+// Embla API through `setApi`. It owns no data fetching or paging. The slide width and the content (cards, media) are the
+// consumer's; the gap and the controls are styled in src/theme/carousel.css.
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative min-w-0", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        data-orientation={orientation}
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn("flex", orientation === "vertical" && "flex-col", className)}
+        data-slot="carousel-track"
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn("min-w-0 shrink-0 grow-0 basis-full", className)}
+      {...props}
+    />
+  )
+}
+
+// The controls are Carousel's own buttons (not the Button component), so Button roles and tokens do not apply.
+function CarouselPrevious({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <button
+      type="button"
+      data-slot="carousel-previous"
+      className={cn(
+        "absolute z-10 inline-flex items-center justify-center outline-none",
+        orientation === "horizontal"
+          ? "top-1/2 -translate-y-1/2"
+          : "left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon />
+      <span className="sr-only">Previous slide</span>
+    </button>
+  )
+}
+
+function CarouselNext({
+  className,
+  ...props
+}: React.ComponentProps<"button">) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <button
+      type="button"
+      data-slot="carousel-next"
+      className={cn(
+        "absolute z-10 inline-flex items-center justify-center outline-none",
+        orientation === "horizontal"
+          ? "top-1/2 -translate-y-1/2"
+          : "left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon />
+      <span className="sr-only">Next slide</span>
+    </button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  useCarousel,
+}
diff --git a/packages/ui/src/components/ui/checkbox.tsx b/packages/ui/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..5847383
--- /dev/null
+++ b/packages/ui/src/components/ui/checkbox.tsx
@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import { CheckIcon, MinusIcon } from "lucide-react"
+
+// Radix Checkbox structure, data-state and ARIA are kept (ui-viz has no Checkbox spec; reference only); the look comes from
+// src/theme/checkbox.css. Indeterminate is `checked="indeterminate"` (Radix); the shadcn check icon is kept and a minus icon is shown for it.
+function Checkbox({ className, form, asChild, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  // Radix's reset listener uses the trigger's native form, while Root only passes `form` to its input.
+  const useFormButton = !!form && !asChild
+  const indicator = (
+    <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="flex items-center justify-center text-current">
+      <CheckIcon aria-hidden="true" className="hidden group-data-[state=checked]/checkbox:block" />
+      <MinusIcon aria-hidden="true" className="hidden group-data-[state=indeterminate]/checkbox:block" />
+    </CheckboxPrimitive.Indicator>
+  )
+
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      form={form}
+      asChild={useFormButton || asChild}
+      className={cn(
+        "group/checkbox peer relative inline-flex shrink-0 items-center justify-center outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60",
+        className
+      )}
+      {...props}
+    >
+      {useFormButton ? <button type="button" form={form}>{indicator}</button> : indicator}
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/packages/ui/src/components/ui/collapsible.tsx b/packages/ui/src/components/ui/collapsible.tsx
new file mode 100644
index 0000000..89f51b9
--- /dev/null
+++ b/packages/ui/src/components/ui/collapsible.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+// A single-region disclosure primitive. Radix keeps open / defaultOpen / onOpenChange / disabled, `aria-expanded`,
+// `aria-controls` and Enter / Space. States are the Radix attributes (data-state, data-disabled).
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+// With asChild the child keeps its own data-slot (same rule as DialogClose), so a Button used as the trigger keeps the HM Button
+// style. A plain trigger gets the HM text-trigger look from src/theme/collapsible.css.
+function CollapsibleTrigger({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  const slot = asChild ? {} : { "data-slot": "collapsible-trigger" }
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      asChild={asChild}
+      className={cn(className)}
+      {...slot}
+      {...props}
+    />
+  )
+}
+
+// shadcn has no open / close animation for Collapsible and HM defines no Motion rule, so the content appears and hides directly.
+function CollapsibleContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/packages/ui/src/components/ui/combobox.tsx b/packages/ui/src/components/ui/combobox.tsx
new file mode 100644
index 0000000..1e53e57
--- /dev/null
+++ b/packages/ui/src/components/ui/combobox.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { CheckIcon, ChevronDownIcon } from "lucide-react"
+
+import {
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+import { useConnectedPopupRef } from "./use-connected-popup-ref"
+
+// A searchable single select composed from the public Popover and Command (not Select, not a copy of its list):
+//   <Popover><PopoverTrigger = field-like button role="combobox"/><PopoverContent><Command>Input + List</Command></PopoverContent></Popover>
+// Select stays for short lists that need no search (Radix Select). Combobox is for search / filter. Filtering, keyboard and the
+// listbox ARIA are cmdk's; Popover keeps Portal, collision, Escape and focus return to the trigger.
+// The typed `options` wrapper is a minimal API (value, label, disabled); anything richer is composed with Command directly.
+type ComboboxOption = {
+  value: string
+  label: string
+  disabled?: boolean
+}
+
+type ComboboxSize = "medium" | "large"
+
+type ComboboxProps = Omit<
+  React.ComponentProps<"button">,
+  "value" | "defaultValue" | "onChange" | "children"
+> & {
+  options: ComboboxOption[]
+  value?: string
+  defaultValue?: string
+  /** Explicit value ownership. Omitted: infer from value !== undefined. Keep this mode stable while mounted. */
+  controlled?: boolean
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  size?: ComboboxSize
+}
+
+function Combobox({
+  className,
+  options,
+  value: valueProp,
+  defaultValue,
+  controlled: controlledProp,
+  onValueChange,
+  placeholder = "선택",
+  searchPlaceholder = "검색...",
+  emptyText = "결과가 없습니다.",
+  size = "large",
+  disabled,
+  ...props
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+  const [inner, setInner] = React.useState<string | undefined>(defaultValue)
+  const controlled = controlledProp ?? (valueProp !== undefined)
+  const value = controlled ? valueProp : inner
+  const selected = options.find((option) => option.value === value)
+  const popupRef = useConnectedPopupRef()
+
+  const select = (next: string) => {
+    if (!controlled) setInner(next)
+    onValueChange?.(next)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded={open}
+          data-slot="combobox-trigger"
+          data-size={size}
+          data-empty={selected ? undefined : ""}
+          disabled={disabled}
+          className={cn("flex w-full items-center justify-between text-left outline-none disabled:cursor-not-allowed", className)}
+          {...props}
+        >
+          <span data-slot="combobox-value">{selected ? selected.label : placeholder}</span>
+          <ChevronDownIcon data-slot="combobox-icon" aria-hidden="true" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        ref={popupRef}
+        data-combobox-popup=""
+        data-size={size}
+        align="start"
+        sideOffset={-1}
+        style={
+          {
+            "--hm-popover-padding": "0px",
+            "--hm-popover-width": "var(--radix-popover-trigger-width)",
+          } as React.CSSProperties
+        }
+      >
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            {options.map((option) => (
+              <CommandItem
+                key={option.value}
+                value={option.value}
+                keywords={[option.label]}
+                disabled={option.disabled}
+                data-checked={option.value === value ? "" : undefined}
+                onSelect={() => select(option.value)}
+              >
+                <span data-slot="combobox-item-label">{option.label}</span>
+                <CheckIcon
+                  data-slot="combobox-item-check"
+                  aria-hidden="true"
+                  className={option.value === value ? "opacity-100" : "opacity-0"}
+                />
+              </CommandItem>
+            ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { Combobox }
+export type { ComboboxOption, ComboboxSize }
diff --git a/packages/ui/src/components/ui/command.tsx b/packages/ui/src/components/ui/command.tsx
new file mode 100644
index 0000000..29c5393
--- /dev/null
+++ b/packages/ui/src/components/ui/command.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+// A searchable list primitive on cmdk. Filtering (fuzzy match on item `value` and `keywords`, custom `filter`, `shouldFilter`),
+// arrow-key / Home / End navigation, Enter selection, disabled skipping, groups, the empty state and the listbox / option ARIA
+// are cmdk's. cmdk marks the highlighted item with `data-selected="true"` and disabled ones with `data-disabled="true"`.
+// Look comes from src/theme/command.css. There is no CommandDialog / global command palette here (a separate pattern).
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn("flex h-full w-full flex-col overflow-hidden", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex items-center"
+    >
+      <SearchIcon className="shrink-0" aria-hidden="true" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn("flex w-full outline-hidden disabled:cursor-not-allowed", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn("overflow-x-hidden overflow-y-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return <CommandPrimitive.Empty data-slot="command-empty" {...props} />
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn("overflow-hidden", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "relative flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn("ml-auto", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/packages/ui/src/components/ui/context-menu.tsx b/packages/ui/src/components/ui/context-menu.tsx
new file mode 100644
index 0000000..930df50
--- /dev/null
+++ b/packages/ui/src/components/ui/context-menu.tsx
@@ -0,0 +1,253 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { ContextMenu as ContextMenuPrimitive } from "radix-ui"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+}
+
+// Surface, border, radius and shadow come from src/theme/context-menu.css (Floating Semantic). Radix keeps Portal, positioning,
+// collision handling, focus movement and keyboard navigation; the shadcn open / close animation classes are kept.
+// Bound preferred and minimum widths by Radix's available space on the resolved side, including submenus.
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "z-50 max-h-(--radix-context-menu-content-available-height) max-w-(--radix-context-menu-content-available-width) min-w-[min(8rem,var(--radix-context-menu-content-available-width))] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+// `variant="destructive"` is the shadcn API (`data-variant`); the HM look is in the theme CSS.
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        data-slot="context-menu-item-indicator"
+        className="pointer-events-none absolute flex items-center justify-center"
+      >
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
+}
+
+// The radio dot is the shadcn filled circle; its size and color are theme tokens.
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="context-menu-item-indicator"
+        className="pointer-events-none absolute flex items-center justify-center"
+      >
+        <ContextMenuPrimitive.ItemIndicator>
+          <span data-slot="context-menu-radio-dot" className="block rounded-full bg-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn("ml-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "z-50 max-h-(--radix-context-menu-content-available-height) max-w-(--radix-context-menu-content-available-width) min-w-[min(6rem,var(--radix-context-menu-content-available-width))] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuPortal,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuLabel,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+}
diff --git a/packages/ui/src/components/ui/date-picker.tsx b/packages/ui/src/components/ui/date-picker.tsx
new file mode 100644
index 0000000..0af3b30
--- /dev/null
+++ b/packages/ui/src/components/ui/date-picker.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import type { PropsBase } from "react-day-picker"
+import { CalendarIcon } from "lucide-react"
+
+import { Calendar } from "./calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+
+// A single-date picker composed from the public Popover and Calendar (no new date engine, no Popover copy):
+//   <Popover><PopoverTrigger = field-like button/><PopoverContent><Calendar mode="single"/></PopoverContent></Popover>
+// The package owns the value handling because every service picker needs the same trigger text, close-on-select and focus
+// return. Popover keeps Portal, collision, Escape and focus return to the trigger; Calendar keeps the date model and keyboard.
+// The trigger is a field (src/theme/date-picker.css, `--hm-date-picker-*`), not a Button, in Select's two sizes.
+type DatePickerSize = "medium" | "large"
+
+type DatePickerProps = Omit<
+  React.ComponentProps<"button">,
+  "value" | "defaultValue" | "onChange" | "children"
+> & {
+  value?: Date
+  defaultValue?: Date
+  /** Explicit value ownership. Omitted: infer from value !== undefined. Keep this mode stable while mounted. */
+  controlled?: boolean
+  onValueChange?: (date: Date | undefined) => void
+  placeholder?: string
+  size?: DatePickerSize
+  /** Text for the selected date. Default: local calendar date as YYYY.MM.DD, e.g. "2026.10.06". */
+  format?: (date: Date) => string
+  /** A few Calendar options (disabled dates, range of months, caption, locale, week start). */
+  calendarProps?: Partial<
+    Pick<PropsBase, "disabled" | "startMonth" | "endMonth" | "locale" | "captionLayout" | "weekStartsOn" | "today">
+  >
+}
+
+const defaultFormat = (date: Date) =>
+  `${String(date.getFullYear()).padStart(4, "0")}.${String(date.getMonth() + 1).padStart(2, "0")}.${String(date.getDate()).padStart(2, "0")}`
+
+function DatePicker({
+  className,
+  value: valueProp,
+  defaultValue,
+  controlled: controlledProp,
+  onValueChange,
+  placeholder = "날짜 선택",
+  size = "large",
+  format = defaultFormat,
+  calendarProps,
+  disabled,
+  ...props
+}: DatePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [inner, setInner] = React.useState<Date | undefined>(defaultValue)
+  const controlled = controlledProp ?? (valueProp !== undefined)
+  const value = controlled ? valueProp : inner
+
+  const select = (date: Date | undefined) => {
+    if (!controlled) setInner(date)
+    onValueChange?.(date)
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          data-slot="date-picker-trigger"
+          data-size={size}
+          data-empty={value ? undefined : ""}
+          disabled={disabled}
+          className={cn("flex w-full items-center justify-between text-left outline-none disabled:cursor-not-allowed", className)}
+          {...props}
+        >
+          <span data-slot="date-picker-value">{value ? format(value) : placeholder}</span>
+          <CalendarIcon data-slot="date-picker-icon" aria-hidden="true" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        style={{ "--hm-popover-padding": "0px", "--hm-popover-width": "auto" } as React.CSSProperties}
+        // Radix focuses the first tabbable (the "previous month" icon button). Land on the day the Calendar marks as its tab stop
+        // (selected, otherwise today / first day) so the keyboard can pick a date right away; focus still returns to the trigger on close.
+        onOpenAutoFocus={(event) => {
+          const day = (event.currentTarget as HTMLElement).querySelector<HTMLElement>(
+            ".rdp-day:not([data-disabled]) button[tabindex='0']"
+          )
+          if (day) {
+            event.preventDefault()
+            day.focus()
+          }
+        }}
+      >
+        <Calendar
+          mode="single"
+          required
+          selected={value}
+          onSelect={select}
+          defaultMonth={value}
+          {...calendarProps}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { DatePicker }
+export type { DatePickerSize }
diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..f2902bc
--- /dev/null
+++ b/packages/ui/src/components/ui/dialog.tsx
@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { Button } from "./button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+// With asChild the child keeps its own data-slot: Slot would otherwise replace the Button's `data-slot="button"` with
+// "dialog-close", and the HM Button styles (selected by data-slot="button") would not apply to Dialog actions.
+function DialogClose({
+  asChild,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  // An explicit `data-slot={undefined}` would still replace the child's value, so the prop is left out entirely.
+  const slot = asChild ? {} : { "data-slot": "dialog-close" }
+  return <DialogPrimitive.Close asChild={asChild} {...slot} {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2 text-sm duration-100 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+// ui_viz Body region (dialog.md §1, §2.1): padding, scrolling and the 16/24 text come from src/theme/dialog.css. Header and Footer stay fixed; only Body scrolls.
+function DialogBody({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dialog-body" className={cn(className)} {...props} />
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/ui/src/components/ui/drawer.tsx b/packages/ui/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..d14525d
--- /dev/null
+++ b/packages/ui/src/components/ui/drawer.tsx
@@ -0,0 +1,148 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+// Drawer is built on vaul (the shadcn Drawer base): drag to dismiss, snap points, scroll / drag arbitration and body
+// scroll lock are vaul's. vaul sits on Radix Dialog, so Portal, focus trap, Escape and ARIA are Radix's.
+//
+// vaul defaults `autoFocus` to false, which cancels Radix's initial focus: focus stays on the trigger behind the aria-hidden page
+// and Tab leaves the Drawer. HM turns it on by default so a modal Drawer moves focus inside like Dialog and Sheet; pass
+// `autoFocus={false}` to restore the vaul behavior.
+function Drawer({
+  autoFocus = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" autoFocus={autoFocus} {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+}
+
+// Same asChild rule as DialogClose: with asChild the child keeps its own data-slot so an HM Button keeps its style.
+function DrawerClose({
+  asChild,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  const slot = asChild ? {} : { "data-slot": "drawer-close" }
+  return <DrawerPrimitive.Close asChild={asChild} {...slot} {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// The handle (shown for the bottom direction) is the vaul drag affordance; surface, radius, border, shadow and handle
+// look come from src/theme/drawer.css. Direction comes from the Drawer root (`direction`, default bottom) as in shadcn.
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col outline-none data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-slot="drawer-handle"
+          className="mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+        />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+// Body region: the scroll owner, so Header and Footer stay in view. vaul decides drag vs. scroll from the scrollable ancestor.
+function DrawerBody({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="drawer-body" className={cn(className)} {...props} />
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("font-heading font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
diff --git a/packages/ui/src/components/ui/dropdown-menu.tsx b/packages/ui/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..bf28a9b
--- /dev/null
+++ b/packages/ui/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,254 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+// Surface, border, radius and shadow come from src/theme/dropdown-menu.css. Radix keeps Portal, positioning,
+// collision handling, focus movement and keyboard navigation; the shadcn open / close animation classes are kept.
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+// `variant="destructive"` is the shadcn API (`data-variant`); the HM look is in the theme CSS.
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        data-slot="dropdown-menu-item-indicator"
+        className="pointer-events-none absolute flex items-center justify-center"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
+}
+
+// The radio dot is the shadcn filled circle; its size and color are theme tokens.
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="dropdown-menu-item-indicator"
+        className="pointer-events-none absolute flex items-center justify-center"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <span data-slot="dropdown-menu-radio-dot" className="block rounded-full bg-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn("ml-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-24 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}
diff --git a/packages/ui/src/components/ui/hover-card.tsx b/packages/ui/src/components/ui/hover-card.tsx
new file mode 100644
index 0000000..b3a6b31
--- /dev/null
+++ b/packages/ui/src/components/ui/hover-card.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+}
+
+// A richer preview than Tooltip. Surface, border, radius, shadow, width and padding come from src/theme/hover-card.css.
+// Radix keeps the open / close delay, the hover bridge between trigger and content, and Portal positioning.
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/packages/ui/src/components/ui/input.tsx b/packages/ui/src/components/ui/input.tsx
new file mode 100644
index 0000000..a59ddd8
--- /dev/null
+++ b/packages/ui/src/components/ui/input.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { cn } from "cn"
+
+// `size` is the ui_viz Input size (docs/components/input.md §24), not the native character-width attribute. Default is large (42px).
+// Face, border, radius, height, typography and the Focus / Error looks come from src/theme/input.css.
+type InputSize = "small" | "medium" | "large"
+
+function Input({
+  className,
+  type,
+  size = "large",
+  ...props
+}: Omit<React.ComponentProps<"input">, "size"> & { size?: InputSize }) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      data-size={size}
+      className={cn(
+        "w-full min-w-0 transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
+export type { InputSize }
diff --git a/packages/ui/src/components/ui/label.tsx b/packages/ui/src/components/ui/label.tsx
new file mode 100644
index 0000000..73b1cfe
--- /dev/null
+++ b/packages/ui/src/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Label as LabelPrimitive } from "radix-ui"
+
+// Radix Label keeps the native label semantics (htmlFor / wrapping a control, click focuses the control).
+// Typography and color come from src/theme/label.css. Required star and Helper/Error message are not part of Label (consumer composition).
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex w-fit items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/packages/ui/src/components/ui/menubar.tsx b/packages/ui/src/components/ui/menubar.tsx
new file mode 100644
index 0000000..1da2576
--- /dev/null
+++ b/packages/ui/src/components/ui/menubar.tsx
@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+// Radix Menubar keeps the menu-bar model: Left / Right between top menus, Down / Enter / Space to open, Up / Down between
+// items, sub menus, typeahead, Escape and focus return, with ARIA (`role=menubar`, `menu`, `menuitem*`). States are Radix attributes
+// (data-highlighted, data-disabled, data-state). Look comes from src/theme/menubar.css.
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn("flex items-center outline-hidden select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = 8,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        data-slot="menubar-item-indicator"
+        className="pointer-events-none absolute flex items-center justify-center"
+      >
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="menubar-item-indicator"
+        className="pointer-events-none absolute flex items-center justify-center"
+      >
+        <MenubarPrimitive.ItemIndicator>
+          <span data-slot="menubar-radio-dot" className="block rounded-full bg-current" />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn("ml-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      className={cn(
+        "z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}
diff --git a/packages/ui/src/components/ui/navigation-menu.tsx b/packages/ui/src/components/ui/navigation-menu.tsx
new file mode 100644
index 0000000..345b455
--- /dev/null
+++ b/packages/ui/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cn } from "cn"
+import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"
+import { ChevronDownIcon } from "lucide-react"
+
+// Radix NavigationMenu keeps the disclosure / link model (not an ARIA menu), hover open delay, Arrow-key and Tab movement,
+// Escape, the viewport and the indicator. Look comes from src/theme/navigation-menu.css. It is for navigation destinations
+// (links), not commands; it does not depend on any router (use `asChild` on NavigationMenuLink).
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      // Indicator measures trigger offsets against Radix's List wrapper. Only inline content needs an Item anchor.
+      className={cn("group-data-[viewport=false]/navigation-menu:relative", className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(
+        "group inline-flex w-max items-center justify-center outline-none disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        data-slot="navigation-menu-trigger-icon"
+        className="relative top-px ml-1 transition duration-300 group-data-[state=open]/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "top-0 left-0 w-full data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      data-slot="navigation-menu-viewport-wrapper"
+      className="absolute top-full left-0 isolate z-50 flex justify-center"
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+// `active` (Radix) marks the link of the current location: it sets `data-active` and `aria-current="page"`.
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn("flex outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
+        className
+      )}
+      {...props}
+    >
+      <div
+        data-slot="navigation-menu-indicator-arrow"
+        className="relative top-[60%] size-2 rotate-45 rounded-tl-sm"
+      />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
diff --git a/packages/ui/src/components/ui/pagination.tsx b/packages/ui/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..6ce7371
--- /dev/null
+++ b/packages/ui/src/components/ui/pagination.tsx
@@ -0,0 +1,130 @@
+import * as React from "react"
+import { cn } from "cn"
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+// Presentational navigation primitive: the consumer owns the page state and the hrefs. Links stay anchors (never buttons).
+// Look comes from src/theme/pagination.css; it does not compose Button.
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row flex-wrap items-center", className)}
+      {...props}
+    />
+  )
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean
+  size?: "default" | "icon"
+} & React.ComponentProps<"a">
+
+// `isActive` marks the current page (`aria-current="page"`). A link with `aria-disabled="true"` is also taken out of the tab order
+// and its activation is cancelled, because an anchor has no native disabled state.
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  onClick,
+  tabIndex,
+  ...props
+}: PaginationLinkProps) {
+  const disabled = props["aria-disabled"] === true || props["aria-disabled"] === "true"
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      data-size={size}
+      className={cn("inline-flex items-center justify-center", className)}
+      tabIndex={disabled ? -1 : tabIndex}
+      onClick={(event) => {
+        if (disabled) {
+          event.preventDefault()
+          return
+        }
+        onClick?.(event)
+      }}
+      {...props}
+    />
+  )
+}
+
+function PaginationPrevious({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1", className)}
+      {...props}
+    >
+      <ChevronLeftIcon data-icon="inline-start" />
+      {children ?? <span className="hidden sm:block">Previous</span>}
+    </PaginationLink>
+  )
+}
+
+function PaginationNext({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1", className)}
+      {...props}
+    >
+      {children ?? <span className="hidden sm:block">Next</span>}
+      <ChevronRightIcon data-icon="inline-end" />
+    </PaginationLink>
+  )
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More pages</span>
+    </span>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
new file mode 100644
index 0000000..8e8199b
--- /dev/null
+++ b/packages/ui/src/components/ui/popover.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+// A non-modal floating panel (not a Dialog or Sheet). Surface, border, radius, shadow, width and padding come from
+// src/theme/popover.css. Radix keeps Portal, positioning, collision handling, Escape / outside close and focus return.
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 origin-(--radix-popover-content-transform-origin) outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+// The Radix close button. With asChild the child keeps its own data-slot (same rule as DialogClose), so a Button
+// inside keeps its HM style.
+function PopoverClose({
+  asChild,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Close>) {
+  const slot = asChild ? {} : { "data-slot": "popover-close" }
+  return <PopoverPrimitive.Close asChild={asChild} {...slot} {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose }
diff --git a/packages/ui/src/components/ui/progress.tsx b/packages/ui/src/components/ui/progress.tsx
new file mode 100644
index 0000000..335ce04
--- /dev/null
+++ b/packages/ui/src/components/ui/progress.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+// Radix Progress keeps `role="progressbar"` with aria-valuemin / aria-valuemax / aria-valuenow (and `data-state`:
+// loading | complete | indeterminate). The indicator width follows `value` (0..max). Look comes from packages/ui/src/theme/progress.css.
+function Progress({
+  className,
+  value,
+  max,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  // Use the same valid range/default as Radix so the visual fill agrees with its ARIA value.
+  const effectiveMax = typeof max === "number" && max > 0 ? max : 100
+  const percentage = typeof value === "number" && value >= 0 && value <= effectiveMax
+    ? (value / effectiveMax) * 100
+    : 0
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn("relative w-full overflow-hidden", className)}
+      value={value}
+      max={max}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="size-full flex-1 transition-all"
+        style={{ transform: `translateX(${percentage - 100}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/packages/ui/src/components/ui/radio-group.tsx b/packages/ui/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..0a7165b
--- /dev/null
+++ b/packages/ui/src/components/ui/radio-group.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { cn } from "cn"
+import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
+import { CircleIcon } from "lucide-react"
+
+// Radix RadioGroup structure, roving focus, arrow-key selection and ARIA are kept (ui-viz has no Radio spec; reference only);
+// the look comes from src/theme/radio-group.css.
+function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn("grid", className)} {...props} />
+}
+
+function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        "group/radio peer relative inline-flex aspect-square shrink-0 items-center justify-center outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator data-slot="radio-group-indicator" className="flex items-center justify-center">
+        <CircleIcon aria-hidden="true" className="fill-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/packages/ui/src/components/ui/resizable.tsx b/packages/ui/src/components/ui/resizable.tsx
new file mode 100644
index 0000000..8414928
--- /dev/null
+++ b/packages/ui/src/components/ui/resizable.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Group, Panel, Separator } from "react-resizable-panels"
+import { GripVerticalIcon } from "lucide-react"
+
+// Panel layout interaction on react-resizable-panels v4 (Group / Panel / Separator). The library owns dragging, min / max
+// constraints, collapsing, the layout math, keyboard resizing, pointer hit-target expansion and the separator ARIA
+// (`role="separator"`, `aria-valuenow|min|max`, `aria-controls`, `aria-orientation`); it also sets the panels' inline sizing,
+// which cannot be overridden. Sizes: a number is pixels, a string without a unit ("30") or with "%" is a percentage.
+// Persistence, sidebar state and layout presets are not here (a later layout pattern). Look: src/theme/resizable.css.
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof Group>) {
+  return (
+    <Group
+      data-slot="resizable-panel-group"
+      className={cn("flex h-full w-full", className)}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof Panel>) {
+  return <Panel data-slot="resizable-panel" {...props} />
+}
+
+// `withHandle` adds a visible grip in the middle of the divider (shadcn API). The divider itself is thin; the pointer target is
+// larger because the library expands it.
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator> & {
+  withHandle?: boolean
+}) {
+  return (
+    <Separator
+      data-slot="resizable-handle"
+      className={cn("relative flex items-center justify-center outline-none", className)}
+      {...props}
+    >
+      {withHandle && (
+        <div
+          data-slot="resizable-handle-grip"
+          className="z-10 flex items-center justify-center"
+        >
+          <GripVerticalIcon />
+        </div>
+      )}
+    </Separator>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..3a994fe
--- /dev/null
+++ b/packages/ui/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+// Radix ScrollArea owns scrolling (wheel, touch, native keyboard scroll, viewport measurement, thumb drag); only the scrollbar
+// chrome is styled, in src/theme/scroll-area.css. The scrollbar `type` keeps the Radix default ("hover").
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
new file mode 100644
index 0000000..6bd71b1
--- /dev/null
+++ b/packages/ui/src/components/ui/select.tsx
@@ -0,0 +1,228 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Select as SelectPrimitive } from "radix-ui"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { useConnectedPopupRef } from "./use-connected-popup-ref"
+
+// ui_viz Select size (docs/components/select.md §1.1): medium (outer 34px) or large (outer 44px, default).
+type SelectSize = "medium" | "large"
+
+// One size per Select: SelectTrigger owns the `size` prop and registers it here, so the Portal-ed SelectContent (and its
+// items) read the same value without a second prop. Large is the default before the Trigger registers.
+const SelectSizeContext = React.createContext<{ size: SelectSize; setSize: (size: SelectSize) => void }>({
+  size: "large",
+  setSize: () => {},
+})
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  const [size, setSize] = React.useState<SelectSize>("large")
+  const value = React.useMemo(() => ({ size, setSize }), [size])
+  return (
+    <SelectSizeContext.Provider value={value}>
+      <SelectPrimitive.Root data-slot="select" {...props} />
+    </SelectSizeContext.Provider>
+  )
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+// `size` replaces the shadcn "sm" | "default". Border, radius, height, padding, typography and the Open / Focus looks come from
+// src/theme/select.css, including the independent Invalid border and keyboard Focus ring. The indicator is the ui_viz 18x18 glyph (§7).
+function SelectTrigger({
+  className,
+  size = "large",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: SelectSize
+}) {
+  const { setSize } = React.useContext(SelectSizeContext)
+  React.useLayoutEffect(() => setSize(size), [size, setSize])
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between transition-colors outline-none select-none whitespace-nowrap disabled:cursor-not-allowed *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <svg
+          data-slot="select-icon"
+          viewBox="0 0 18 18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.50542"
+          strokeLinecap="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M5 7 L9 11 L13 7" />
+        </svg>
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+// popper position, directly under the trigger: sideOffset -1 shares the 1px border, and select.css gives the list the
+// trigger width and the connected outline (docs/components/select.md §8).
+function SelectContent({
+  ref,
+  className,
+  children,
+  position = "popper",
+  align = "start",
+  sideOffset = -1,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  const { size } = React.useContext(SelectSizeContext)
+  const popupRef = useConnectedPopupRef(ref)
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={popupRef}
+        data-slot="select-content"
+        data-size={size}
+        data-align-trigger={position === "item-aligned"}
+        className={cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto bg-popover text-popover-foreground shadow-md duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position ==="popper"&&"data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1", className )}
+        position={position}
+        align={align}
+        sideOffset={sideOffset}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+// ui_viz shows Hover, Selected and Keyboard Active as a background face only (no border, no check icon), so the
+// shadcn check indicator is removed and a selected item uses the same face as a highlighted one.
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-1.5 outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
+export type { SelectSize }
diff --git a/packages/ui/src/components/ui/separator.tsx b/packages/ui/src/components/ui/separator.tsx
new file mode 100644
index 0000000..2dc9acd
--- /dev/null
+++ b/packages/ui/src/components/ui/separator.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+// Radix Separator: `decorative` (default true, no semantics) and `orientation` are kept. Thickness and color come from src/theme/separator.css.
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn("shrink-0 data-[orientation=horizontal]:w-full data-[orientation=vertical]:self-stretch", className)}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/ui/src/components/ui/sheet.tsx b/packages/ui/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..9083d07
--- /dev/null
+++ b/packages/ui/src/components/ui/sheet.tsx
@@ -0,0 +1,156 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { Button } from "./button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+// Same asChild rule as DialogClose: with asChild the child keeps its own data-slot so an HM Button keeps its style.
+function SheetClose({
+  asChild,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  const slot = asChild ? {} : { "data-slot": "sheet-close" }
+  return <SheetPrimitive.Close asChild={asChild} {...slot} {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// `side` is the shadcn API (top | right | bottom | left, default right). Position and slide animation stay shadcn;
+// surface, border, shadow, size and regions come from src/theme/sheet.css. Radix keeps Portal, focus trap, Escape and focus return.
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col outline-none transition duration-200 ease-in-out data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+// Body region: the scroll owner, so Header and Footer stay in view. Padding and scrolling come from src/theme/sheet.css.
+function SheetBody({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="sheet-body" className={cn(className)} {...props} />
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col-reverse sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-heading font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetPortal,
+  SheetOverlay,
+  SheetContent,
+  SheetHeader,
+  SheetBody,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/packages/ui/src/components/ui/skeleton.tsx b/packages/ui/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..3845775
--- /dev/null
+++ b/packages/ui/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "cn"
+
+// Visual placeholder only (no loading logic). Size and shape come from `className`; the color and radius from
+// src/theme/skeleton.css; the pulse is the shadcn `animate-pulse`.
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/packages/ui/src/components/ui/slider.tsx b/packages/ui/src/components/ui/slider.tsx
new file mode 100644
index 0000000..284fd56
--- /dev/null
+++ b/packages/ui/src/components/ui/slider.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+// Radix Slider keeps value / defaultValue / onValueChange / onValueCommit, min / max / step, orientation, inverted, disabled,
+// pointer drag, the keyboard model (Arrow keys, Home / End, PageUp / PageDown) and `role="slider"` ARIA on each thumb.
+// An array value renders one thumb per entry (a range uses two). Look comes from src/theme/slider.css.
+// The `role="slider"` element is the Thumb, not the Root, so the Slider hands its `aria-label` to every thumb (a range gets
+// "label 1/2", "label 2/2"). Without `aria-label` Radix keeps its own thumb names (Minimum / Maximum for two thumbs).
+function Slider({
+  className,
+  defaultValue,
+  value,
+  disabled,
+  name,
+  min = 0,
+  max = 100,
+  "aria-label": ariaLabel,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  // Radix initializes uncontrolled values once; keep the thumb count on the same initial array.
+  const initialValues = React.useRef(Array.isArray(defaultValue) ? defaultValue : [min])
+  const _values = Array.isArray(value) ? value : initialValues.current
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      disabled={disabled}
+      // Installed Radix does not disable its form inputs; unnamed inputs are excluded from submission.
+      name={disabled ? undefined : name}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-vertical:h-full data-vertical:min-h-44 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="relative grow overflow-hidden"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="absolute"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          aria-label={
+            ariaLabel
+              ? _values.length > 1
+                ? `${ariaLabel} ${index + 1}/${_values.length}`
+                : ariaLabel
+              : undefined
+          }
+          className="block shrink-0 outline-hidden"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }
diff --git a/packages/ui/src/components/ui/sonner.tsx b/packages/ui/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..ae37a39
--- /dev/null
+++ b/packages/ui/src/components/ui/sonner.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, LoaderCircleIcon, OctagonXIcon, TriangleAlertIcon } from "lucide-react"
+
+// Toast is Sonner. Sonner owns the queue, stacking, timeout, hover pause, swipe, promise lifecycle and the `aria-live` region;
+// this file only supplies the shadcn icon set. Surface, text, action and status values come from src/theme/sonner.css.
+// There is no Light / Dark switch (no next-themes), so `theme` stays Sonner's default. Place <Toaster /> once at the app root.
+function Toaster(props: ToasterProps) {
+  return (
+    <Sonner
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <LoaderCircleIcon className="size-4 animate-spin" />,
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
+export { toast } from "sonner"
+export type { ToasterProps, ExternalToast } from "sonner"
diff --git a/packages/ui/src/components/ui/switch.tsx b/packages/ui/src/components/ui/switch.tsx
new file mode 100644
index 0000000..8f6a95e
--- /dev/null
+++ b/packages/ui/src/components/ui/switch.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+// Radix Switch structure (role=switch, data-state, keyboard) is kept; the look comes from src/theme/switch.css.
+// Transitions are the shadcn defaults (transition-all on the track, transition-transform on the thumb); no new motion is defined.
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex shrink-0 items-center outline-none transition-all focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb data-slot="switch-thumb" className="pointer-events-none block transition-transform" />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/packages/ui/src/components/ui/table.tsx b/packages/ui/src/components/ui/table.tsx
new file mode 100644
index 0000000..c093c84
--- /dev/null
+++ b/packages/ui/src/components/ui/table.tsx
@@ -0,0 +1,87 @@
+import * as React from "react"
+import { cn } from "cn"
+
+// Static data display primitive: semantic <table> elements only. No sorting, filtering, selection state, column logic or paging;
+// those belong to a later Data Table pattern that composes this Table. The container scrolls horizontally on a narrow screen
+// (the Table is never turned into cards). Look comes from src/theme/table.css.
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return <thead data-slot="table-header" className={cn(className)} {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return <tbody data-slot="table-body" className={cn(className)} {...props} />
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return <tfoot data-slot="table-footer" className={cn(className)} {...props} />
+}
+
+// A row marks the selected state with `data-state="selected"` (shadcn); the consumer decides which rows are selected.
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return <tr data-slot="table-row" className={cn(className)} {...props} />
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-left align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "align-middle [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/packages/ui/src/components/ui/tabs.tsx b/packages/ui/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..2c00a97
--- /dev/null
+++ b/packages/ui/src/components/ui/tabs.tsx
@@ -0,0 +1,162 @@
+import * as React from "react"
+import { cn } from "cn"
+import { Tabs as TabsPrimitive } from "radix-ui"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
+// ui_viz docs/components/tabs.md: horizontal, text-only, no size/variant axis. Bar, Tab geometry, colors, the Selected connection,
+// the `fill` profile and the overflow move buttons come from src/theme/tabs.css. The content surface is the consumer's panel.
+// TabsList renders a frame (`data-slot="tabs-frame"`) around the Radix list; the move buttons appear in the frame only when the tabs overflow (D-090).
+type TabsPanelSurface = "surface" | "content"
+
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return <TabsPrimitive.Root data-slot="tabs" className={cn("group/tabs flex flex-col", className)} {...props} />
+}
+
+const reducedMotion = () => typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+function TabsList({
+  className,
+  fill = true,
+  panelSurface = "content",
+  id,
+  ref,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & {
+  /** Defaults to Primary Fill: equal-width tabs, Green selected border, curved joins. Use false for Legacy non-fill. */
+  fill?: boolean
+  /** Defaults to content (Primary); surface selects Secondary. Visually ignored when fill is false. */
+  panelSurface?: TabsPanelSurface
+}) {
+  const uid = React.useId()
+  const listId = id ?? `tabs-list-${uid}`
+  const frameRef = React.useRef<HTMLDivElement>(null)
+  const listRef = React.useRef<HTMLDivElement | null>(null)
+  const [overflow, setOverflow] = React.useState(false)
+  const [edge, setEdge] = React.useState({ start: true, end: true })
+
+  const setRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      listRef.current = node
+      if (typeof ref === "function") ref(node)
+      else if (ref) (ref as React.RefObject<HTMLDivElement | null>).current = node
+    },
+    [ref]
+  )
+
+  const update = React.useCallback(() => {
+    const list = listRef.current
+    const frame = frameRef.current
+    if (!list || !frame) return
+    // Overflow: needed tab width > the whole frame width (measured before the buttons take space, so showing them cannot flip the result).
+    setOverflow(list.scrollWidth > frame.clientWidth + 0.5)
+    setEdge({ start: list.scrollLeft <= 0.5, end: list.scrollLeft + list.clientWidth >= list.scrollWidth - 0.5 })
+  }, [])
+
+  const keepSelectedVisible = React.useCallback(() => {
+    const list = listRef.current
+    const active = list?.querySelector<HTMLElement>('[role="tab"][data-state="active"]')
+    if (!list || !active) return
+    const l = list.getBoundingClientRect()
+    const a = active.getBoundingClientRect()
+    if (a.left < l.left || a.width > l.width) list.scrollLeft += a.left - l.left
+    else if (a.right > l.right) list.scrollLeft += a.right - l.right
+  }, [])
+
+  React.useEffect(() => {
+    const list = listRef.current
+    const frame = frameRef.current
+    if (!list || !frame) return
+    const sync = () => {
+      update()
+      keepSelectedVisible()
+    }
+    const resize = new ResizeObserver(sync)
+    resize.observe(frame)
+    resize.observe(list)
+    const mutation = new MutationObserver(sync)
+    mutation.observe(list, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ["data-state"] })
+    list.addEventListener("scroll", update, { passive: true })
+    document.fonts?.ready.then(sync)
+    sync()
+    return () => {
+      resize.disconnect()
+      mutation.disconnect()
+      list.removeEventListener("scroll", update)
+    }
+  }, [update, keepSelectedVisible])
+
+  // One item per press: align the first item cut off on that side with the visible edge.
+  const step = (dir: 1 | -1) => {
+    const list = listRef.current
+    if (!list) return
+    const l = list.getBoundingClientRect()
+    const tabs = Array.from(list.querySelectorAll<HTMLElement>('[role="tab"]'))
+    let delta = 0
+    if (dir === 1) {
+      const next = tabs.find((t) => t.getBoundingClientRect().right > l.right + 0.5)
+      if (next) delta = next.getBoundingClientRect().right - l.right
+    } else {
+      const prev = [...tabs].reverse().find((t) => t.getBoundingClientRect().left < l.left - 0.5)
+      if (prev) delta = prev.getBoundingClientRect().left - l.left
+    }
+    if (delta) list.scrollBy({ left: delta, behavior: reducedMotion() ? "auto" : "smooth" })
+  }
+
+  return (
+    <div
+      ref={frameRef}
+      data-slot="tabs-frame"
+      data-overflow={overflow}
+      data-fill={fill}
+      data-panel-surface={panelSurface}
+    >
+      {overflow ? (
+        <button
+          type="button"
+          data-slot="tabs-arrow"
+          data-direction="previous"
+          aria-label="이전 탭 보기"
+          aria-controls={listId}
+          disabled={edge.start}
+          onClick={() => step(-1)}
+        >
+          <ChevronLeftIcon aria-hidden="true" />
+        </button>
+      ) : null}
+      <TabsPrimitive.List ref={setRefs} id={listId} data-slot="tabs-list" className={cn("inline-flex w-fit", className)} {...props} />
+      {overflow ? (
+        <button
+          type="button"
+          data-slot="tabs-arrow"
+          data-direction="next"
+          aria-label="다음 탭 보기"
+          aria-controls={listId}
+          disabled={edge.end}
+          onClick={() => step(1)}
+        >
+          <ChevronRightIcon aria-hidden="true" />
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex flex-none cursor-pointer items-center justify-center whitespace-nowrap outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
+export type { TabsPanelSurface }
diff --git a/packages/ui/src/components/ui/textarea.tsx b/packages/ui/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..deb8b51
--- /dev/null
+++ b/packages/ui/src/components/ui/textarea.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import { cn } from "cn"
+
+// `resize` is the ui_viz Textarea resize policy (docs/components/textarea.md §2): vertical by default, none or both on request.
+// It replaces nothing in native HTML; readonly always resolves to none (§3.1). Face, border, padding and the Focus / Error looks
+// come from src/theme/textarea.css. Textarea has no size scale in ui_viz, so there is no `size` prop.
+type TextareaResize = "vertical" | "none" | "both"
+
+function Textarea({
+  className,
+  resize = "vertical",
+  ...props
+}: React.ComponentProps<"textarea"> & { resize?: TextareaResize }) {
+  return (
+    <textarea
+      data-slot="textarea"
+      data-resize={resize}
+      className={cn(
+        "block w-full min-w-0 transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-60",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
+export type { TextareaResize }
diff --git a/packages/ui/src/components/ui/toggle-group.tsx b/packages/ui/src/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..fe3e55b
--- /dev/null
+++ b/packages/ui/src/components/ui/toggle-group.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { hasSingleElementChild, toggleVariants } from "./toggle"
+
+// A group of pressed-state items. Radix keeps type single | multiple, value / defaultValue / onValueChange, orientation, disabled,
+// rovingFocus, `role="group"` (single: `radio` items with `aria-checked`; multiple: `aria-pressed`) and arrow-key movement.
+// `variant`, `size` and `spacing` (shadcn API) are given to the group and read by the items. Items are not the Toggle component:
+// they have their own look (src/theme/toggle-group.css, `--hm-toggle-group-*`). With `spacing={0}` (default) the items are connected.
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--hm-toggle-group-gap": `${spacing * 4}px` } as React.CSSProperties}
+      className={cn("group/toggle-group flex w-fit flex-row items-center data-vertical:flex-col data-vertical:items-stretch", className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      data-icon-only={hasSingleElementChild(children) ? "" : undefined}
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center whitespace-nowrap outline-none focus-visible:z-10 focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }
diff --git a/packages/ui/src/components/ui/toggle.tsx b/packages/ui/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..664e5b2
--- /dev/null
+++ b/packages/ui/src/components/ui/toggle.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "cn"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+// A persistent pressed-state control (not an action button): Radix keeps pressed / defaultPressed / onPressedChange, disabled,
+// `aria-pressed`, `data-state="on" | "off"`, Enter / Space. The shadcn `variant` (default | outline) and `size` (default | sm | lg)
+// API is kept, but the look is HM's own (src/theme/toggle.css, `--hm-toggle-*`); it does not use Button variants or tokens.
+const toggleVariants = cva(
+  "inline-flex shrink-0 items-center justify-center whitespace-nowrap outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: "",
+      },
+      size: {
+        default: "",
+        sm: "",
+        lg: "",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+// Count content nodes rather than element siblings: CSS :only-child ignores a label's text node.
+// Arrays and fragments containing one icon must keep the same square geometry as a direct icon child.
+function hasSingleElementChild(children: React.ReactNode): boolean {
+  const content = React.Children.toArray(children)
+  if (content.length !== 1 || !React.isValidElement(content[0])) return false
+  const child = content[0]
+  return child.type === React.Fragment
+    ? hasSingleElementChild((child.props as { children?: React.ReactNode }).children)
+    : true
+}
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      data-variant={variant}
+      data-size={size}
+      data-icon-only={hasSingleElementChild(children) ? "" : undefined}
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive.Root>
+  )
+}
+
+// hasSingleElementChild is shared internally with ToggleGroup; it is not exported by the package entry point.
+export { Toggle, toggleVariants, hasSingleElementChild }
diff --git a/packages/ui/src/components/ui/tooltip.tsx b/packages/ui/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..a082f3a
--- /dev/null
+++ b/packages/ui/src/components/ui/tooltip.tsx
@@ -0,0 +1,73 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+const TooltipProviderContext = React.createContext(false)
+
+function TooltipProvider({
+  delayDuration = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipProviderContext.Provider value={true}>
+      <TooltipPrimitive.Provider
+        data-slot="tooltip-provider"
+        delayDuration={delayDuration}
+        {...props}
+      >
+        {children}
+      </TooltipPrimitive.Provider>
+    </TooltipProviderContext.Provider>
+  )
+}
+
+// Reuse an HM Provider so Radix shares both settings and skip-delay state across the group.
+// A standalone Tooltip keeps its own default Provider.
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  const hasProvider = React.useContext(TooltipProviderContext)
+  const tooltip = <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+
+  return hasProvider ? tooltip : <TooltipProvider>{tooltip}</TooltipProvider>
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+// Short, non-interactive text only (longer or interactive content belongs in Popover / Hover Card). Colors, radius,
+// padding and typography come from src/theme/tooltip.css; the arrow is the shadcn rotated square.
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow
+          data-slot="tooltip-arrow"
+          className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
+        />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/ui/src/components/ui/use-connected-popup-ref.ts b/packages/ui/src/components/ui/use-connected-popup-ref.ts
new file mode 100644
index 0000000..f65de9d
--- /dev/null
+++ b/packages/ui/src/components/ui/use-connected-popup-ref.ts
@@ -0,0 +1,32 @@
+import * as React from "react"
+
+// Radix exposes the collision-resolved side on Content, but not its portaled Trigger.
+// Mirror that attribute through Radix's own ARIA relationship; positioning stays Radix's.
+// No separate side state, global :has selector, or consumer API is needed.
+function useConnectedPopupRef(ref?: React.Ref<HTMLDivElement>) {
+  return React.useCallback((content: HTMLDivElement | null) => {
+    const refCleanup = typeof ref === "function" ? ref(content) : undefined
+    if (ref && typeof ref !== "function") ref.current = content
+    if (!content) return
+
+    const trigger = Array.from(content.ownerDocument.querySelectorAll<HTMLElement>("[aria-controls]"))
+      .find((element) => element.getAttribute("aria-controls") === content.id)
+    const sync = () => {
+      const side = content.getAttribute("data-side")
+      if (side === "top" || side === "bottom") trigger?.setAttribute("data-side", side)
+      else trigger?.removeAttribute("data-side")
+    }
+    sync()
+    const observer = new MutationObserver(sync)
+    observer.observe(content, { attributes: true, attributeFilter: ["data-side"] })
+    return () => {
+      observer.disconnect()
+      trigger?.removeAttribute("data-side")
+      if (typeof refCleanup === "function") refCleanup()
+      else if (typeof ref === "function") ref(null)
+      else if (ref) ref.current = null
+    }
+  }, [ref])
+}
+
+export { useConnectedPopupRef }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..f59a77a
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,286 @@
+// Public API of @hm-design/ui. Styles are separate entries: "@hm-design/ui/tailwind.css" and "@hm-design/ui/theme.css".
+export { Button, buttonVariants } from "./components/ui/button"
+export type { ButtonAppearance } from "./components/ui/button"
+
+export { Input } from "./components/ui/input"
+export type { InputSize } from "./components/ui/input"
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./components/ui/select"
+export type { SelectSize } from "./components/ui/select"
+
+export { Textarea } from "./components/ui/textarea"
+export type { TextareaResize } from "./components/ui/textarea"
+
+export { Card,CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/ui/card"
+export type { CardSurface } from "./components/ui/card"
+
+export {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./components/ui/dialog"
+
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs"
+export type { TabsPanelSurface } from "./components/ui/tabs"
+
+export { Label } from "./components/ui/label"
+
+export { Checkbox } from "./components/ui/checkbox"
+
+export { RadioGroup, RadioGroupItem } from "./components/ui/radio-group"
+
+export { Switch } from "./components/ui/switch"
+
+export { Badge, badgeVariants } from "./components/ui/badge"
+
+export { Alert, AlertDescription, AlertTitle } from "./components/ui/alert"
+
+export { Separator } from "./components/ui/separator"
+
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./components/ui/dropdown-menu"
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./components/ui/popover"
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip"
+
+export { HoverCard, HoverCardContent, HoverCardTrigger } from "./components/ui/hover-card"
+
+export {
+  Sheet,
+  SheetBody,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from "./components/ui/sheet"
+
+export {
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./components/ui/drawer"
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./components/ui/alert-dialog"
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/ui/accordion"
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/ui/collapsible"
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./components/ui/breadcrumb"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./components/ui/pagination"
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "./components/ui/navigation-menu"
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "./components/ui/menubar"
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/ui/table"
+
+export { Progress } from "./components/ui/progress"
+
+export { Skeleton } from "./components/ui/skeleton"
+
+export { Avatar, AvatarFallback, AvatarImage } from "./components/ui/avatar"
+
+export { ScrollArea, ScrollBar } from "./components/ui/scroll-area"
+
+export { Slider } from "./components/ui/slider"
+
+export { Toggle, toggleVariants } from "./components/ui/toggle"
+
+export { ToggleGroup, ToggleGroupItem } from "./components/ui/toggle-group"
+
+export { Calendar } from "./components/ui/calendar"
+
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./components/ui/command"
+
+export { DatePicker } from "./components/ui/date-picker"
+export type { DatePickerSize } from "./components/ui/date-picker"
+
+export { Combobox } from "./components/ui/combobox"
+export type { ComboboxOption, ComboboxSize } from "./components/ui/combobox"
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  useCarousel,
+} from "./components/ui/carousel"
+export type { CarouselApi } from "./components/ui/carousel"
+
+export { AspectRatio } from "./components/ui/aspect-ratio"
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable"
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./components/ui/context-menu"
+
+export { Toaster, toast } from "./components/ui/sonner"
+export type { ExternalToast, ToasterProps } from "./components/ui/sonner"
+
+// Patterns: reusable work-screen UI composed from the primitives above (src/patterns). Pattern code adds no primitive styling of its own.
+export {
+  DataTable,
+  DataTableColumnHeader,
+  DataTablePagination,
+  DataTableViewOptions,
+  dataTableSelectColumn,
+  useDataTable,
+} from "./patterns/data-table"
+export type { DataTableColumnDef, DataTableInstance, DataTableOptions, DataTableProps } from "./patterns/data-table"
+
+export { FilterBar, FilterBarActions, FilterBarSearch } from "./patterns/filter-bar"
+export type { FilterBarSearchProps } from "./patterns/filter-bar/filter-bar"
+
+export {
+  countDashboardFilter,
+  dashboardFilterDefinitions,
+  dashboardFilterIds,
+  dashboardStatusAttributes,
+  dashboardStatusDefinitions,
+  matchesDashboardFilter,
+} from "./patterns/dashboard-status"
+export type { DashboardFilterDefinition, DashboardFilterId, DashboardStatusDefinition, DashboardStatusId, DashboardStatusRecord, DashboardStatusTone } from "./patterns/dashboard-status"
+
+export { GNB, GNBBrand, GNBMobileGroup, GNBMobileLink, GNBMobileMenu, GNBNav, GNBUser, GNBUtilities } from "./patterns/gnb"
+export type { GNBMobileMenuProps, GNBUserProps } from "./patterns/gnb"
+
+export { LNB, LNBBrand, LNBGroup, LNBItem, LNBNav, LNBProfile } from "./patterns/lnb"
+export { LNBMobileHeader, LNBMobileBrand, LNBMobileMenu, LNBMobileLink, LNBMobileGroup } from "./patterns/lnb"
+export type { LNBMobileMenuProps } from "./patterns/lnb"
+export type { LNBGroupProps, LNBProfileProps } from "./patterns/lnb"
+
+export { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle } from "./patterns/page-header"
+
+export { DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DashboardSidebar } from "./patterns/dashboard-layout"
+export type { DashboardLayoutProps } from "./patterns/dashboard-layout"
+
+export { LoadingScreen } from "./patterns/loading-screen"
diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts
new file mode 100644
index 0000000..f815ded
--- /dev/null
+++ b/packages/ui/src/lib/utils.ts
@@ -0,0 +1 @@
+export { cn } from "cn"
diff --git a/packages/ui/src/patterns/dashboard-layout/dashboard-layout.tsx b/packages/ui/src/patterns/dashboard-layout/dashboard-layout.tsx
new file mode 100644
index 0000000..c290589
--- /dev/null
+++ b/packages/ui/src/patterns/dashboard-layout/dashboard-layout.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+
+// DASHBOARD is one navigation mode. Slots contain Dashboard-owned Header/Menu/Sidebar, never external GNB or general LNB patterns.
+// DashboardMain owns vertical scrolling; the outer frame scrolls the entire Dashboard horizontally below 960px (1232px with sidebar).
+// Dashboard navigation keeps its geometry at every viewport width, independent of the GNB/LNB responsive policies.
+
+type DashboardLayoutProps = Omit<React.ComponentProps<"div">, "children"> & {
+  /** Dashboard navigation header; do not pass a GNB. */
+  header?: React.ReactNode
+  /** Dashboard navigation sidebar; do not pass a general LNB. */
+  sidebar?: React.ReactNode
+  children: React.ReactNode
+}
+
+function DashboardLayout({ header, sidebar, className, children, ...props }: DashboardLayoutProps) {
+  return (
+    <div role="region" aria-label="Dashboard" tabIndex={0} className={cn(className)} {...props} data-slot="dashboard-scroll" data-navigation-mode="DASHBOARD">
+      <div
+        data-slot="dashboard-layout"
+        data-header={header ? "" : undefined}
+        data-sidebar={sidebar ? "" : undefined}
+        className="flex flex-col"
+      >
+        {header}
+        <div data-slot="dashboard-body" className="flex">
+          {sidebar}
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Internal navigation elements: share Semantic tokens, not GNB/LNB layout or responsive variables.
+function DashboardHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return <header className={cn(className)} {...props} data-slot="dashboard-header" />
+}
+
+function DashboardSidebar({ className, ...props }: React.ComponentProps<"aside">) {
+  return <aside className={cn("flex flex-col", className)} {...props} data-slot="dashboard-sidebar" />
+}
+
+// The content surface and vertical scroll container of the screen (`<main>`). `min-width: 0` keeps wide children (tables, carousels,
+// comboboxes) from widening the page; they scroll or shrink inside it.
+function DashboardMain({ className, ...props }: React.ComponentProps<"main">) {
+  return <main data-slot="dashboard-main" className={cn(className)} {...props} />
+}
+
+// Vertical stack of sections (cards, Filter Bar + Data Table...) with the layout gap. It styles no section itself.
+function DashboardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="dashboard-content" className={cn("grid", className)} {...props} />
+}
+
+export { DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DashboardSidebar }
+export type { DashboardLayoutProps }
diff --git a/packages/ui/src/patterns/dashboard-layout/index.ts b/packages/ui/src/patterns/dashboard-layout/index.ts
new file mode 100644
index 0000000..f1e5350
--- /dev/null
+++ b/packages/ui/src/patterns/dashboard-layout/index.ts
@@ -0,0 +1,2 @@
+export { DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, DashboardSidebar } from "./dashboard-layout"
+export type { DashboardLayoutProps } from "./dashboard-layout"
diff --git a/packages/ui/src/patterns/dashboard-status/contract.ts b/packages/ui/src/patterns/dashboard-status/contract.ts
new file mode 100644
index 0000000..dd8ebdc
--- /dev/null
+++ b/packages/ui/src/patterns/dashboard-status/contract.ts
@@ -0,0 +1,55 @@
+/**
+ * Runtime-neutral Dashboard work status contract.
+ *
+ * This file intentionally has no React or DOM dependency. React, Static HTML,
+ * and other runtimes consume the same ids, labels, matching rules, and
+ * `data-*` state vocabulary.
+ */
+export type DashboardStatusId = "active" | "hold" | "done"
+export type DashboardFilterId = "all" | DashboardStatusId | "issue"
+export type DashboardStatusTone = "progress" | "hold" | "complete" | "issue"
+
+export type DashboardStatusDefinition = {
+  id: DashboardStatusId
+  label: string
+  tone: DashboardStatusTone
+  ariaLabel: string
+}
+
+export type DashboardFilterDefinition =
+  | { id: "all"; label: string; ariaLabel: string }
+  | (DashboardStatusDefinition & { id: DashboardStatusId })
+  | { id: "issue"; label: string; tone: "issue"; ariaLabel: string; independentFlag: true }
+
+export const dashboardStatusDefinitions: Record<DashboardStatusId, DashboardStatusDefinition> = {
+  active: { id: "active", label: "진행", tone: "progress", ariaLabel: "진행 상태" },
+  hold: { id: "hold", label: "보류", tone: "hold", ariaLabel: "보류 상태" },
+  done: { id: "done", label: "완료", tone: "complete", ariaLabel: "완료 상태" },
+}
+
+export const dashboardFilterDefinitions: Record<DashboardFilterId, DashboardFilterDefinition> = {
+  all: { id: "all", label: "전체", ariaLabel: "전체 업무" },
+  ...dashboardStatusDefinitions,
+  issue: { id: "issue", label: "이슈", tone: "issue", ariaLabel: "이슈 업무", independentFlag: true },
+}
+
+export const dashboardFilterIds: DashboardFilterId[] = ["all", "active", "hold", "done", "issue"]
+
+export type DashboardStatusRecord = { status: DashboardStatusId; issue?: boolean }
+
+export function matchesDashboardFilter(record: DashboardStatusRecord, filter: DashboardFilterId): boolean {
+  return filter === "all" || (filter === "issue" ? record.issue === true : record.status === filter)
+}
+
+export function countDashboardFilter<T extends DashboardStatusRecord>(records: readonly T[], filter: DashboardFilterId): number {
+  return records.filter((record) => matchesDashboardFilter(record, filter)).length
+}
+
+/** Stable DOM vocabulary for React, Static HTML, and other adapters. */
+export const dashboardStatusAttributes = {
+  status: "data-status",
+  issue: "data-issue",
+  filter: "data-filter",
+  selected: "aria-pressed",
+} as const
+
diff --git a/packages/ui/src/patterns/dashboard-status/dashboard-status.css b/packages/ui/src/patterns/dashboard-status/dashboard-status.css
new file mode 100644
index 0000000..e2dd500
--- /dev/null
+++ b/packages/ui/src/patterns/dashboard-status/dashboard-status.css
@@ -0,0 +1,13 @@
+/* Runtime-neutral compatibility contract for the existing Dashboard Story status colors.
+   These are not public Theme tokens. They preserve the approved Story values until
+   a Production-wide semantic status palette is explicitly introduced. */
+:root {
+  --hm-dashboard-status-active: #00c896;
+  --hm-dashboard-status-hold: #ff9500;
+  --hm-dashboard-status-issue: #ff4d4f;
+}
+
+/* Resolve the Theme-dependent alias in each independent HM Theme scope. */
+:root, [data-hm-theme] {
+  --hm-dashboard-status-done: var(--hm-sem-palette-white);
+}
diff --git a/packages/ui/src/patterns/dashboard-status/index.ts b/packages/ui/src/patterns/dashboard-status/index.ts
new file mode 100644
index 0000000..cbcab42
--- /dev/null
+++ b/packages/ui/src/patterns/dashboard-status/index.ts
@@ -0,0 +1,9 @@
+export {
+  countDashboardFilter,
+  dashboardFilterDefinitions,
+  dashboardFilterIds,
+  dashboardStatusAttributes,
+  dashboardStatusDefinitions,
+  matchesDashboardFilter,
+} from "./contract"
+export type { DashboardFilterDefinition, DashboardFilterId, DashboardStatusDefinition, DashboardStatusId, DashboardStatusRecord, DashboardStatusTone } from "./contract"
diff --git a/packages/ui/src/patterns/data-table/data-table.tsx b/packages/ui/src/patterns/data-table/data-table.tsx
new file mode 100644
index 0000000..8797d55
--- /dev/null
+++ b/packages/ui/src/patterns/data-table/data-table.tsx
@@ -0,0 +1,335 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import {
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  filterFn_equalsString,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  tableFeatures,
+  useTable,
+  type Column,
+  type ColumnDef,
+  type ReactTable,
+  type RowData,
+  type TableOptions,
+} from "@tanstack/react-table"
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, ChevronDownIcon } from "lucide-react"
+
+import { Button } from "../../components/ui/button"
+import { Checkbox } from "../../components/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../components/ui/dropdown-menu"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../../components/ui/pagination"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select"
+import { Skeleton } from "../../components/ui/skeleton"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/ui/table"
+
+// Data Table pattern: the HM Table primitive (presentation only) driven by TanStack Table v9. The table state model (sorting, filters,
+// selection, pagination, column visibility) is TanStack's own; this file registers the features and composes the HM primitives.
+// Cell / header looks stay in src/theme/table.css; only the toolbar, footer, empty and loading wrappers are styled here (src/theme/data-table.css).
+const dataTableFeatures = tableFeatures({
+  columnFilteringFeature,
+  globalFilteringFeature,
+  rowSortingFeature,
+  rowSelectionFeature,
+  rowPaginationFeature,
+  columnVisibilityFeature,
+  filteredRowModel: createFilteredRowModel(),
+  sortedRowModel: createSortedRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  filterFns: { includesString: filterFn_includesString, equalsString: filterFn_equalsString },
+  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic, datetime: sortFn_datetime },
+})
+
+type DataTableFeatures = typeof dataTableFeatures
+type DataTableColumnDef<TData extends RowData, TValue = unknown> = ColumnDef<DataTableFeatures, TData, TValue>
+type DataTableInstance<TData extends RowData> = ReactTable<DataTableFeatures, TData>
+type DataTableOptions<TData extends RowData> = Omit<TableOptions<DataTableFeatures, TData>, "features">
+
+// Keep `columns` and `data` referentially stable (module scope, useMemo or state): a new array each render rebuilds every row model.
+function useDataTable<TData extends RowData>(options: DataTableOptions<TData>): DataTableInstance<TData> {
+  return useTable({ features: dataTableFeatures, ...options } as TableOptions<DataTableFeatures, TData>)
+}
+
+// Selection column: header checkbox (all rows of the page, mixed when some) and one checkbox per row, both the HM Checkbox.
+function dataTableSelectColumn<TData extends RowData>(): DataTableColumnDef<TData, unknown> {
+  return {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        aria-label="현재 페이지 전체 선택"
+        checked={table.getIsAllPageRowsSelected() ? true : table.getIsSomePageRowsSelected() ? "indeterminate" : false}
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(value === true)}
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox aria-label="행 선택" checked={row.getIsSelected()} onCheckedChange={(value) => row.toggleSelected(value === true)} />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  }
+}
+
+// Sortable header: a button that cycles none → asc → desc → none (TanStack's own order). The sort state is announced by `aria-sort`
+// on the <th>, which DataTable sets from the column.
+function DataTableColumnHeader<TData extends RowData, TValue>({
+  column,
+  title,
+  className,
+}: {
+  column: Column<DataTableFeatures, TData, TValue>
+  title: string
+  className?: string
+}) {
+  if (!column.getCanSort()) return <span className={className}>{title}</span>
+  const sorted = column.getIsSorted()
+  const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon
+  return (
+    <button
+      type="button"
+      data-slot="data-table-sort"
+      data-sorted={sorted || undefined}
+      className={cn("inline-flex items-center", className)}
+      onClick={() => (sorted === "desc" ? column.clearSorting() : column.toggleSorting(sorted === "asc"))}
+      aria-label={`${title} 정렬${sorted === "asc" ? ", 오름차순" : sorted === "desc" ? ", 내림차순" : ""}`}
+    >
+      {title}
+      <Icon aria-hidden="true" />
+    </button>
+  )
+}
+
+// Column visibility menu: the HM Dropdown Menu with one checkbox item per hideable column (labelled from `labels[column.id]`, else the column id).
+function DataTableViewOptions<TData extends RowData>({
+  table,
+  label = "열",
+  labels,
+  className,
+}: {
+  table: DataTableInstance<TData>
+  label?: string
+  /** Menu text per column id (a column header can be a component, so it cannot be read back). */
+  labels?: Record<string, string>
+  className?: string
+}) {
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide())
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button type="button" variant="primary" appearance="outline" className={className}>
+          {label}
+          <ChevronDownIcon aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuLabel>표시할 열</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.map((column) => (
+          <DropdownMenuCheckboxItem
+            key={column.id}
+            checked={column.getIsVisible()}
+            onCheckedChange={(value) => column.toggleVisibility(value)}
+            onSelect={(event) => event.preventDefault()}
+          >
+            {labels?.[column.id] ?? column.id}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+// Page list with ellipses: 1 … (p-1 p p+1) … total.
+function pageRange(page: number, total: number): (number | "start" | "end")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
+  const out: (number | "start" | "end")[] = [1]
+  const from = Math.max(2, Math.min(page - 1, total - 4))
+  const to = Math.min(total - 1, Math.max(page + 1, 5))
+  if (from > 2) out.push("start")
+  for (let p = from; p <= to; p++) out.push(p)
+  if (to < total - 1) out.push("end")
+  out.push(total)
+  return out
+}
+
+// Footer: selected count, page size (HM Select) and the HM Pagination bound to the TanStack page state.
+function DataTablePagination<TData extends RowData>({
+  table,
+  pageSizeOptions = [10, 20, 50],
+  className,
+}: {
+  table: DataTableInstance<TData>
+  pageSizeOptions?: number[]
+  className?: string
+}) {
+  const { pageIndex, pageSize } = table.state.pagination
+  const pageCount = Math.max(table.getPageCount(), 1)
+  const page = pageIndex + 1
+  const selected = table.getFilteredSelectedRowModel().rows.length
+  const total = table.getFilteredRowModel().rows.length
+  const go = (next: number) => (event: React.MouseEvent) => {
+    event.preventDefault()
+    table.setPageIndex(next - 1)
+  }
+  return (
+    <div data-slot="data-table-footer" className={className}>
+      <p data-slot="data-table-summary" role="status">
+        {selected > 0 ? `${selected}개 선택됨 · 전체 ${total}개` : `전체 ${total}개`}
+      </p>
+      <div data-slot="data-table-page-size">
+        <span id="data-table-page-size-label">페이지당</span>
+        <Select value={String(pageSize)} onValueChange={(value) => table.setPageSize(Number(value))}>
+          <SelectTrigger size="medium" aria-labelledby="data-table-page-size-label">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map((size) => (
+              <SelectItem key={size} value={String(size)}>
+                {size}개
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <Pagination data-slot="data-table-pagination">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" aria-disabled={!table.getCanPreviousPage()} onClick={go(page - 1)} />
+          </PaginationItem>
+          {pageRange(page, pageCount).map((entry) =>
+            typeof entry === "number" ? (
+              <PaginationItem key={entry}>
+                <PaginationLink href="#" isActive={entry === page} onClick={go(entry)}>
+                  {entry}
+                </PaginationLink>
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={entry}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            ),
+          )}
+          <PaginationItem>
+            <PaginationNext href="#" aria-disabled={!table.getCanNextPage()} onClick={go(page + 1)} />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
+
+type DataTableProps<TData extends RowData> = {
+  /** The table instance from `useDataTable`. */
+  table: DataTableInstance<TData>
+  /** Shows skeleton rows instead of data (the header stays). */
+  loading?: boolean
+  /** Shown in one full-width row when there are no rows (no data, or every row filtered out). */
+  emptyMessage?: React.ReactNode
+  /** Footer with selected count, page size and Pagination. Default true. */
+  pagination?: boolean
+  pageSizeOptions?: number[]
+  className?: string
+}
+
+function DataTable<TData extends RowData>({
+  table,
+  loading = false,
+  emptyMessage = "표시할 데이터가 없습니다.",
+  pagination = true,
+  pageSizeOptions,
+  className,
+}: DataTableProps<TData>) {
+  const rows = table.getRowModel().rows
+  const columnCount = table.getVisibleLeafColumns().length
+  const skeletonRows = Math.min(table.state.pagination.pageSize, 5)
+  return (
+    <div data-slot="data-table" className={className}>
+      <Table aria-busy={loading || undefined}>
+        <TableHeader>
+          {table.getHeaderGroups().map((group) => (
+            <TableRow key={group.id}>
+              {group.headers.map((header) => {
+                const sorted = header.column.getIsSorted()
+                return (
+                  <TableHead
+                    key={header.id}
+                    colSpan={header.colSpan}
+                    aria-sort={sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined}
+                  >
+                    {header.isPlaceholder ? null : <table.FlexRender header={header} />}
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {loading ? (
+            Array.from({ length: skeletonRows }, (_, index) => (
+              <TableRow key={index}>
+                {table.getVisibleLeafColumns().map((column) => (
+                  <TableCell key={column.id}>
+                    <Skeleton data-slot="data-table-skeleton" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : rows.length ? (
+            rows.map((row) => (
+              <TableRow key={row.id} data-state={row.getIsSelected() ? "selected" : undefined}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    <table.FlexRender cell={cell} />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={Math.max(columnCount, 1)} data-slot="data-table-empty">
+                {emptyMessage}
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      {pagination ? <DataTablePagination table={table} pageSizeOptions={pageSizeOptions} /> : null}
+    </div>
+  )
+}
+
+export {
+  DataTable,
+  DataTableColumnHeader,
+  DataTablePagination,
+  DataTableViewOptions,
+  dataTableSelectColumn,
+  useDataTable,
+}
+export type { DataTableColumnDef, DataTableInstance, DataTableOptions, DataTableProps }
diff --git a/packages/ui/src/patterns/data-table/index.ts b/packages/ui/src/patterns/data-table/index.ts
new file mode 100644
index 0000000..9169fc0
--- /dev/null
+++ b/packages/ui/src/patterns/data-table/index.ts
@@ -0,0 +1,9 @@
+export {
+  DataTable,
+  DataTableColumnHeader,
+  DataTablePagination,
+  DataTableViewOptions,
+  dataTableSelectColumn,
+  useDataTable,
+} from "./data-table"
+export type { DataTableColumnDef, DataTableInstance, DataTableOptions, DataTableProps } from "./data-table"
diff --git a/packages/ui/src/patterns/filter-bar/filter-bar.tsx b/packages/ui/src/patterns/filter-bar/filter-bar.tsx
new file mode 100644
index 0000000..4be3821
--- /dev/null
+++ b/packages/ui/src/patterns/filter-bar/filter-bar.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { SearchIcon, XIcon } from "lucide-react"
+
+import { Input, type InputSize } from "../../components/ui/input"
+
+// Filter Bar pattern: the search / filter condition row of a list screen. It is a layout (flex, wrap, control widths) plus one helper;
+// the controls inside are the HM Input / Select / Combobox / Date Picker / Button themselves, composed as children, and the consumer
+// owns the filter values. It has no dependency on Data Table. The wrapper adds no role (each control keeps its own semantics).
+//   <FilterBar>
+//     <FilterBarSearch value onValueChange />
+//     <Select>…</Select> <Combobox … /> <DatePicker … />
+//     <FilterBarActions><Button onClick={reset}>초기화</Button></FilterBarActions>
+//   </FilterBar>
+function FilterBar({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="filter-bar" className={cn("flex flex-wrap items-center", className)} {...props} />
+}
+
+type FilterBarSearchProps = Omit<React.ComponentProps<"input">, "size" | "value" | "defaultValue" | "onChange" | "type"> & {
+  value: string
+  onValueChange: (value: string) => void
+  size?: InputSize
+}
+
+// Search icon + HM Input + a clear button once there is text. `aria-label` defaults to the placeholder so the field always has a name.
+function FilterBarSearch({
+  className,
+  value,
+  onValueChange,
+  size = "medium",
+  placeholder = "검색",
+  "aria-label": ariaLabel,
+  ...props
+}: FilterBarSearchProps) {
+  return (
+    <div data-slot="filter-bar-search" className={cn("relative", className)}>
+      <SearchIcon aria-hidden="true" data-slot="filter-bar-search-icon" className="pointer-events-none absolute" />
+      <Input
+        type="search"
+        size={size}
+        value={value}
+        placeholder={placeholder}
+        aria-label={ariaLabel ?? placeholder}
+        onChange={(event) => onValueChange(event.target.value)}
+        {...props}
+      />
+      {value ? (
+        <button type="button" data-slot="filter-bar-search-clear" aria-label="검색어 지우기" className="absolute" onClick={() => onValueChange("")}>
+          <XIcon aria-hidden="true" />
+        </button>
+      ) : null}
+    </div>
+  )
+}
+
+// Pushes its content (Reset, Apply, ...) to the end of the row; on a narrow screen it wraps to its own line.
+function FilterBarActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="filter-bar-actions" className={cn("flex items-center", className)} {...props} />
+}
+
+export { FilterBar, FilterBarActions, FilterBarSearch }
+export type { FilterBarSearchProps }
diff --git a/packages/ui/src/patterns/filter-bar/index.ts b/packages/ui/src/patterns/filter-bar/index.ts
new file mode 100644
index 0000000..572d9ee
--- /dev/null
+++ b/packages/ui/src/patterns/filter-bar/index.ts
@@ -0,0 +1 @@
+export { FilterBar, FilterBarActions, FilterBarSearch } from "./filter-bar"
diff --git a/packages/ui/src/patterns/gnb/gnb.tsx b/packages/ui/src/patterns/gnb/gnb.tsx
new file mode 100644
index 0000000..4373152
--- /dev/null
+++ b/packages/ui/src/patterns/gnb/gnb.tsx
@@ -0,0 +1,216 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { MenuIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { Button } from "../../components/ui/button"
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../../components/ui/sheet"
+
+// GNB pattern: the global bar of a service (brand, primary navigation, utilities). It owns the bar (height, surface, border, padding,
+// gaps, the desktop / mobile switch) and nothing inside it: the primary navigation is the HM Navigation Menu, the user menu is
+// Dropdown Menu + Avatar, the mobile menu is a Sheet, icon actions are Buttons with Tooltip / Badge / Popover. All of them are composed
+// as children and keep their own look and behavior. No menu data lives here; the consumer renders its own items.
+//   <GNB>
+//     <GNBMobileMenu>…<GNBMobileLink href active>…</GNBMobileMenu>      (mobile only: hamburger → Sheet)
+//     <GNBBrand href="/">…</GNBBrand>
+//     <GNBNav><NavigationMenu viewport={false} aria-label="주 메뉴">…</NavigationMenu></GNBNav>   (desktop only)
+//     <GNBUtilities>… <DropdownMenu><DropdownMenuTrigger asChild><GNBUser name description><Avatar/></GNBUser></…></DropdownMenu></GNBUtilities>
+//   </GNB>
+// Position is static by default; `sticky` pins it to the top of the scroll container. It is never fixed: the page layout decides.
+// The bar height is exposed as `--hm-gnb-height` for the content layout of GNB Mode.
+function GNB({ className, sticky = false, ...props }: React.ComponentProps<"header"> & { sticky?: boolean }) {
+  return <header data-slot="gnb" data-sticky={sticky ? "" : undefined} className={className} {...props} />
+}
+
+// Brand link, horizontal: an optional `img` / `svg` logo (only when you have a logo asset; no placeholder, no empty space) then one
+// `<span>` with an optional `<small>` eyebrow and a `<strong>` name; both shorten with an ellipsis when the bar is tight.
+// `asChild` renders the consumer's router link.
+function GNBBrand({ className, asChild = false, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "a"
+  return <Comp data-slot="gnb-brand" className={cn("flex items-center", className)} {...props} />
+}
+
+// Primary navigation region (desktop only; hidden below the mobile breakpoint), centered on the whole bar. It holds the HM
+// `<NavigationMenu viewport={false} aria-label>`, which already renders the `<nav>` landmark, so this wrapper adds no role.
+function GNBNav({ className, ref, ...props }: React.ComponentProps<"div">) {
+  const region = React.useRef<HTMLDivElement>(null)
+  React.useImperativeHandle(ref, () => region.current!, [])
+  React.useLayoutEffect(() => {
+    const node = region.current
+    if (!node) return
+    const view = node.ownerDocument.defaultView!
+    const desktop = view.matchMedia("(min-width: 1024px)")
+    const resize = new ResizeObserver(() => alignPanels())
+    const panels = new Set<HTMLElement>()
+    const alignPanels = () => {
+      if (!desktop.matches) return
+      const gnb = node.closest<HTMLElement>('[data-slot="gnb"]')!
+      const edge = parseFloat(view.getComputedStyle(gnb).paddingLeft)
+      node.querySelectorAll<HTMLElement>('[data-slot="navigation-menu-content"]').forEach((panel) => {
+        if (!panels.has(panel)) { panels.add(panel); resize.observe(panel) }
+        // Use layout geometry, unaffected by Radix's opening scale animation or our correction.
+        const parent = panel.offsetParent as HTMLElement | null
+        if (!parent) return
+        const trigger = parent.querySelector<HTMLElement>('[data-slot="navigation-menu-trigger"]')
+        if (!trigger) return
+        const parentLeft = parent.getBoundingClientRect().left + parent.clientLeft
+        const triggerBounds = trigger.getBoundingClientRect()
+        const centeredLeft = triggerBounds.left + (triggerBounds.width - panel.offsetWidth) / 2
+        const left = Math.max(edge, Math.min(centeredLeft, node.ownerDocument.documentElement.clientWidth - edge - panel.offsetWidth))
+        const offset = left - parentLeft
+        const value = `${offset}px`
+        if (panel.style.getPropertyValue("--hm-gnb-panel-offset-x") !== value) {
+          panel.style.setProperty("--hm-gnb-panel-offset-x", value)
+        }
+        // Integer layout widths ignore equal-panel fractional measurement noise.
+        // Reuse the same clamped geometry; joins may extend on only one side.
+        const wider = panel.offsetWidth > trigger.offsetWidth
+        const extensions = {
+          "--hm-gnb-panel-left-extension": wider ? Math.max(0, triggerBounds.left - left) : 0,
+          "--hm-gnb-panel-right-extension": wider ? Math.max(0, left + panel.offsetWidth - triggerBounds.right) : 0,
+        }
+        Object.entries(extensions).forEach(([property, extension]) => {
+          const value = `${extension}px`
+          if (trigger.style.getPropertyValue(property) !== value) trigger.style.setProperty(property, value)
+        })
+      })
+      panels.forEach((panel) => { if (!node.contains(panel)) { resize.unobserve(panel); panels.delete(panel) } })
+    }
+    // NavigationMenu has no collision-positioning API. Observe only the GNB region;
+    // Radix still owns disclosure, focus and keyboard navigation.
+    const mutation = new MutationObserver(alignPanels)
+    mutation.observe(node, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-state"] })
+    resize.observe(node)
+    view.addEventListener("resize", alignPanels)
+    desktop.addEventListener("change", alignPanels)
+    alignPanels()
+    return () => {
+      mutation.disconnect()
+      resize.disconnect()
+      view.removeEventListener("resize", alignPanels)
+      desktop.removeEventListener("change", alignPanels)
+      panels.forEach((panel) => panel.style.removeProperty("--hm-gnb-panel-offset-x"))
+      node.querySelectorAll<HTMLElement>('[data-slot="navigation-menu-trigger"]').forEach((trigger) => {
+        trigger.style.removeProperty("--hm-gnb-panel-left-extension")
+        trigger.style.removeProperty("--hm-gnb-panel-right-extension")
+      })
+    }
+  }, [])
+  return <div ref={region} data-slot="gnb-nav" className={cn("flex items-center", className)} {...props} />
+}
+
+// Right-aligned utility actions (search, notification, user menu...). Plain container; the order and the set are the consumer's.
+function GNBUtilities({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="gnb-utilities" className={cn("flex items-center", className)} {...props} />
+}
+
+type GNBUserProps = Omit<React.ComponentProps<"button">, "children"> & {
+  name: string
+  description?: string
+  /** The Avatar (mobile bar only). */
+  children?: React.ReactNode
+}
+
+// Trigger button of the user menu: name / role text on the desktop bar; the Avatar (children) shows on the mobile bar only, where the
+// text is hidden (ui-viz's profile is text-only, so the desktop bar has no image). Because of that the
+// accessible name defaults to "<name> 사용자 메뉴". Use it as `<DropdownMenuTrigger asChild>`; the data-slot comes after the
+// spread so the trigger's own slot does not replace it (same rule as Button).
+function GNBUser({ className, name, description, children, "aria-label": ariaLabel, ...props }: GNBUserProps) {
+  return (
+    <button type="button" aria-label={ariaLabel ?? `${name} 사용자 메뉴`} className={cn("flex items-center", className)} {...props} data-slot="gnb-user">
+      {children}
+      <span data-slot="gnb-user-text">
+        <span data-slot="gnb-user-name">{name}</span>
+        {description ? <span data-slot="gnb-user-description">{description}</span> : null}
+      </span>
+    </button>
+  )
+}
+
+type GNBMobileMenuProps = React.ComponentProps<typeof Sheet> & {
+  /** Names the trigger button, the Sheet title and the navigation. */
+  title?: string
+  /** Sheet side. */
+  side?: "left" | "right"
+  className?: string
+}
+
+// Mobile navigation: a hamburger button (mobile only) that opens an HM Sheet with the destinations as plain links. It replaces the
+// desktop Navigation Menu on a narrow screen instead of squeezing it. Radix keeps the focus trap, Escape and focus return.
+// `GNBMobileLink` closes it on click. `open` / `defaultOpen` / `onOpenChange` work as on Sheet.
+const GNBMobileMenuContext = React.createContext<{ close: () => void } | null>(null)
+
+function GNBMobileMenu({ title = "메뉴", side = "left", className, children, open: openProp, defaultOpen = false, onOpenChange, ...props }: GNBMobileMenuProps) {
+  const [openState, setOpenState] = React.useState(defaultOpen)
+  const open = openProp ?? openState
+  const setOpen = (next: boolean) => {
+    if (openProp === undefined) setOpenState(next)
+    onOpenChange?.(next)
+  }
+  const context = React.useMemo(() => ({ close: () => setOpen(false) }), [openProp, onOpenChange])
+  return (
+    <Sheet open={open} onOpenChange={setOpen} {...props}>
+      <SheetTrigger asChild>
+        <Button type="button" variant="ghost" size="icon" aria-label={title} className={cn("lg:hidden", className)}>
+          <MenuIcon aria-hidden="true" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side={side} aria-describedby={undefined}>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <SheetBody>
+          <GNBMobileMenuContext.Provider value={context}>
+            <nav data-slot="gnb-mobile-nav" aria-label={title}>
+              {children}
+            </nav>
+          </GNBMobileMenuContext.Provider>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+// A destination link inside the mobile menu. `active` marks the current location (`aria-current="page"`). It closes the Sheet on click
+// even when the consumer's router handler calls preventDefault (a Radix Close would skip a prevented click), so it must be used inside
+// `GNBMobileMenu`. `asChild` renders the consumer's router link.
+function GNBMobileLink({
+  className,
+  active = false,
+  asChild = false,
+  onClick,
+  ...props
+}: React.ComponentProps<"a"> & { active?: boolean; asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "a"
+  const menu = React.useContext(GNBMobileMenuContext)
+  return (
+    <Comp
+      data-slot="gnb-mobile-link"
+      aria-current={active ? "page" : undefined}
+      className={cn("flex items-center", className)}
+      onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
+        onClick?.(event)
+        menu?.close()
+      }}
+      {...props}
+    />
+  )
+}
+
+// A titled group of links in the mobile menu (the second level of a desktop Navigation Menu content).
+function GNBMobileGroup({ className, label, children, ...props }: Omit<React.ComponentProps<"div">, "children"> & { label: string; children: React.ReactNode }) {
+  const labelId = React.useId()
+  return (
+    <div data-slot="gnb-mobile-group" role="group" aria-labelledby={labelId} className={cn(className)} {...props}>
+      <p data-slot="gnb-mobile-group-label" id={labelId}>
+        {label}
+      </p>
+      {children}
+    </div>
+  )
+}
+
+export { GNB, GNBBrand, GNBMobileGroup, GNBMobileLink, GNBMobileMenu, GNBNav, GNBUser, GNBUtilities }
+export type { GNBMobileMenuProps, GNBUserProps }
diff --git a/packages/ui/src/patterns/gnb/index.ts b/packages/ui/src/patterns/gnb/index.ts
new file mode 100644
index 0000000..2d4aef8
--- /dev/null
+++ b/packages/ui/src/patterns/gnb/index.ts
@@ -0,0 +1,2 @@
+export { GNB, GNBBrand, GNBMobileGroup, GNBMobileLink, GNBMobileMenu, GNBNav, GNBUser, GNBUtilities } from "./gnb"
+export type { GNBMobileMenuProps, GNBUserProps } from "./gnb"
diff --git a/packages/ui/src/patterns/lnb/index.ts b/packages/ui/src/patterns/lnb/index.ts
new file mode 100644
index 0000000..51116e4
--- /dev/null
+++ b/packages/ui/src/patterns/lnb/index.ts
@@ -0,0 +1,5 @@
+export { LNB, LNBBrand, LNBGroup, LNBItem, LNBNav, LNBProfile } from "./lnb"
+export type { LNBGroupProps, LNBProfileProps } from "./lnb"
+
+export { LNBMobileHeader, LNBMobileBrand, LNBMobileMenu, LNBMobileLink, LNBMobileGroup } from "./lnb-mobile"
+export type { LNBMobileMenuProps } from "./lnb-mobile"
diff --git a/packages/ui/src/patterns/lnb/lnb-mobile.tsx b/packages/ui/src/patterns/lnb/lnb-mobile.tsx
new file mode 100644
index 0000000..e9ed53c
--- /dev/null
+++ b/packages/ui/src/patterns/lnb/lnb-mobile.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { MenuIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+import { Button } from "../../components/ui/button"
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../../components/ui/sheet"
+
+// Responsive representation of LNB Mode. Hidden at >=1024px; shares destinations and state with the desktop LNB.
+function LNBMobileHeader({ className, ...props }: React.ComponentProps<"header">) {
+  return <header className={cn(className)} {...props} data-slot="lnb-mobile-header" />
+}
+
+function LNBMobileBrand({ className, asChild = false, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "a"
+  return <Comp className={cn("flex items-center", className)} {...props} data-slot="lnb-mobile-brand" />
+}
+
+type LNBMobileMenuProps = React.ComponentProps<typeof Sheet> & {
+  /** Names the trigger button, the Sheet title and the navigation. */
+  title?: string
+  /** Sheet side. */
+  side?: "left" | "right"
+  className?: string
+}
+
+// Mobile navigation: a hamburger button (mobile only) that opens an HM Sheet with the destinations as plain links. It replaces the
+// desktop LNB on a narrow screen instead of squeezing it. Radix keeps the focus trap, Escape and focus return.
+// `LNBMobileLink` closes it on click. `open` / `defaultOpen` / `onOpenChange` work as on Sheet.
+const LNBMobileMenuContext = React.createContext<{ close: () => void } | null>(null)
+
+function LNBMobileMenu({ title = "메뉴", side = "left", className, children, open: openProp, defaultOpen = false, onOpenChange, ...props }: LNBMobileMenuProps) {
+  const [openState, setOpenState] = React.useState(defaultOpen)
+  const [mobile, setMobile] = React.useState(false)
+  React.useEffect(() => {
+    const media = window.matchMedia("(max-width: 1023px)")
+    const sync = () => setMobile(media.matches)
+    sync()
+    media.addEventListener("change", sync)
+    return () => media.removeEventListener("change", sync)
+  }, [])
+  const open = openProp ?? openState
+  const setOpen = (next: boolean) => {
+    if (openProp === undefined) setOpenState(next)
+    onOpenChange?.(next)
+  }
+  const context = React.useMemo(() => ({ close: () => setOpen(false) }), [openProp, onOpenChange])
+  return (
+    <Sheet open={mobile && open} onOpenChange={setOpen} {...props}>
+      <SheetTrigger asChild>
+        <Button type="button" variant="ghost" size="icon" aria-label={title} className={cn("lg:hidden", className)}>
+          <MenuIcon aria-hidden="true" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side={side} aria-describedby={undefined}>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+        </SheetHeader>
+        <SheetBody>
+          <LNBMobileMenuContext.Provider value={context}>
+            <nav data-slot="lnb-mobile-nav" aria-label={title}>
+              {children}
+            </nav>
+          </LNBMobileMenuContext.Provider>
+        </SheetBody>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+// A destination link inside the mobile menu. `active` marks the current location (`aria-current="page"`). It closes the Sheet on click
+// even when the consumer's router handler calls preventDefault (a Radix Close would skip a prevented click), so it must be used inside
+// `LNBMobileMenu`. `asChild` renders the consumer's router link.
+function LNBMobileLink({
+  className,
+  active = false,
+  asChild = false,
+  onClick,
+  ...props
+}: React.ComponentProps<"a"> & { active?: boolean; asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "a"
+  const menu = React.useContext(LNBMobileMenuContext)
+  return (
+    <Comp
+      data-slot="lnb-mobile-link"
+      aria-current={active ? "page" : undefined}
+      className={cn("flex items-center", className)}
+      onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
+        onClick?.(event)
+        menu?.close()
+      }}
+      {...props}
+    />
+  )
+}
+
+// A titled group of links in the mobile representation of the desktop LNB tree.
+function LNBMobileGroup({ className, label, children, ...props }: Omit<React.ComponentProps<"div">, "children"> & { label: string; children: React.ReactNode }) {
+  const labelId = React.useId()
+  return (
+    <div data-slot="lnb-mobile-group" role="group" aria-labelledby={labelId} className={cn(className)} {...props}>
+      <p data-slot="lnb-mobile-group-label" id={labelId}>
+        {label}
+      </p>
+      {children}
+    </div>
+  )
+}
+
+
+export { LNBMobileHeader, LNBMobileBrand, LNBMobileMenu, LNBMobileLink, LNBMobileGroup }
+export type { LNBMobileMenuProps }
diff --git a/packages/ui/src/patterns/lnb/lnb.tsx b/packages/ui/src/patterns/lnb/lnb.tsx
new file mode 100644
index 0000000..9f42162
--- /dev/null
+++ b/packages/ui/src/patterns/lnb/lnb.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "cn"
+import { ChevronRightIcon } from "lucide-react"
+import { Slot } from "radix-ui"
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/ui/collapsible"
+
+// Internal composition depth; consumers keep the existing nested-group API.
+const LNBGroupDepthContext = React.createContext(0)
+
+// LNB pattern: the local navigation column of a service (brand, menu, profile). Layout visual reference is the ui-viz LNB; the parts
+// are plain elements plus the HM Collapsible for 2-depth groups. The pattern owns the column (width, green surface, spacing) and the
+// menu item look; menu data lives with the consumer. Below 1024px the desktop column is hidden; use the LNBMobileHeader and
+// LNBMobileMenu responsive representation of the same LNB Mode, never a GNB.
+//   <LNB>
+//     <LNBBrand><span><small>시스템</small><strong>서비스명</strong></span></LNBBrand>
+//     <LNBNav aria-label="서비스 메뉴">
+//       <LNBItem href="#a" active><LayoutGridIcon/>메뉴 1</LNBItem>
+//       <LNBGroup label="메뉴 2" current><LNBItem href="#b" active>메뉴 2-1</LNBItem> …</LNBGroup>
+//     </LNBNav>
+//     <LNBProfile name="김한맥" description="프로젝트 관리자"><Avatar>…</Avatar></LNBProfile>
+//   </LNB>
+// The column does not draw the content side: the content next to it must be a positioned surface after it in the DOM with the left
+// corners rounded by `--hm-lnb-join` (LNB Mode content contract); the green column continues behind those corners.
+function LNB({ className, ...props }: React.ComponentProps<"aside">) {
+  return <aside data-slot="lnb" className={cn("flex flex-col", className)} {...props} />
+}
+
+// Brand block, vertical: an optional `img` / `svg` logo (only when you have a logo asset; no placeholder, no empty space) above one
+// `<span>` with an optional `<small>` eyebrow and a `<strong>` service name on the same start line.
+function LNBBrand({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="lnb-brand" className={cn("flex flex-col", className)} {...props} />
+}
+
+// Menu region (give it an `aria-label`). It scrolls when the menu is taller than the column; brand and profile stay put.
+function LNBNav({ className, ...props }: React.ComponentProps<"nav">) {
+  return <nav data-slot="lnb-nav" className={cn("flex flex-col", className)} {...props} />
+}
+
+// One destination. `active` marks the current location (`aria-current="page"`, Beige face joined to the content). An optional leading
+// icon (lucide etc.) is any `svg` child. `asChild` renders the consumer's router link.
+function LNBItem({
+  className,
+  active = false,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"a"> & { active?: boolean; asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "a"
+  const groupDepth = React.useContext(LNBGroupDepthContext)
+  const link = <Comp data-slot="lnb-item" aria-current={active ? "page" : undefined} className={cn("flex items-center", className)} {...props} />
+  return groupDepth === 2 ? <div data-slot="lnb-third-row">{link}</div> : link
+}
+
+type LNBGroupProps = Omit<React.ComponentProps<typeof Collapsible>, "children"> & {
+  label: string
+  /** A child is the current location: the group name and arrow turn to the accent color (open or closed). */
+  current?: boolean
+  children: React.ReactNode
+}
+
+// 2-depth group: the HM Collapsible (Radix disclosure: `aria-expanded`, `aria-controls`, Enter / Space) with an arrow, the group
+// name and its `LNBItem` children. Selecting a child does not open or close it; the consumer decides (`open`, `defaultOpen`).
+// 3-depth: nest an `LNBGroup` inside a group (no depth prop); its items get the 3-depth look and connector from lnb.css. Mark the
+// selected link `active` and every group on its path `current`. A closed group unmounts its content, so keep a nested group's `open`
+// in the consumer when it must survive closing the outer group.
+//   <LNBGroup label="1뎁스" current open={a} onOpenChange={setA}>
+//     <LNBGroup label="2뎁스" current open={b} onOpenChange={setB}><LNBItem href="#c" active>3뎁스</LNBItem>…</LNBGroup>
+//     <LNBItem href="#d">2뎁스</LNBItem>
+//   </LNBGroup>
+function LNBGroup({ label, current = false, className, children, ...props }: LNBGroupProps) {
+  const groupDepth = React.useContext(LNBGroupDepthContext)
+  return (
+    <Collapsible data-slot="lnb-group" data-current={current ? "" : undefined} className={className} {...props}>
+      <CollapsibleTrigger asChild>
+        <button type="button" data-slot="lnb-group-trigger" className="flex items-center">
+          <ChevronRightIcon aria-hidden="true" data-slot="lnb-group-arrow" />
+          <span>{label}</span>
+        </button>
+      </CollapsibleTrigger>
+      <CollapsibleContent asChild>
+        <div data-slot="lnb-group-content">
+          <LNBGroupDepthContext.Provider value={groupDepth + 1}>{children}</LNBGroupDepthContext.Provider>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+type LNBProfileProps = Omit<React.ComponentProps<"button">, "children"> & {
+  name: string
+  description?: string
+  /** The Avatar. */
+  children?: React.ReactNode
+}
+
+// User-menu trigger at the bottom of the column: Avatar (children, default size) + name and role. The whole row is a native button so
+// it composes directly with `DropdownMenuTrigger asChild`; Radix owns Enter / Space, arrow navigation, Escape and focus return.
+function LNBProfile({ className, name, description, children, "aria-label": ariaLabel, ...props }: LNBProfileProps) {
+  return (
+    <button type="button" aria-label={ariaLabel ?? `${name} 사용자 메뉴`} className={cn(className)} {...props} data-slot="lnb-profile">
+      {children}
+      <div data-slot="lnb-profile-text">
+        <strong>{name}</strong>
+        {description ? <p>{description}</p> : null}
+      </div>
+    </button>
+  )
+}
+
+export { LNB, LNBBrand, LNBGroup, LNBItem, LNBNav, LNBProfile }
+export type { LNBGroupProps, LNBProfileProps }
diff --git a/packages/ui/src/patterns/loading-screen/index.ts b/packages/ui/src/patterns/loading-screen/index.ts
new file mode 100644
index 0000000..0bcabfc
--- /dev/null
+++ b/packages/ui/src/patterns/loading-screen/index.ts
@@ -0,0 +1 @@
+export { LoadingScreen } from "./loading-screen"
diff --git a/packages/ui/src/patterns/loading-screen/loading-screen.tsx b/packages/ui/src/patterns/loading-screen/loading-screen.tsx
new file mode 100644
index 0000000..58c254a
--- /dev/null
+++ b/packages/ui/src/patterns/loading-screen/loading-screen.tsx
@@ -0,0 +1,40 @@
+import * as React from "react"
+import { cn } from "cn"
+
+const BAR_COUNT = 24
+
+// Loading Screen pattern: a green surface with a 24-bar spinner and a "Loading..." text, for a region or a whole screen while its content
+// is being prepared. The progress is unknown (use Progress when the amount is known, Skeleton when the content shape is known).
+// Visual reference is the ui-viz Dashboard LoadingScreen (inline / fullscreen). Layout and motion only: it has no async lifecycle, cancel
+// or close control, so the consumer mounts it while loading and removes it when done.
+//   <LoadingScreen />                       inline, fills the parent width
+//   <LoadingScreen fullscreen />            covers the viewport (fixed; keep it out of a transformed ancestor)
+//   <LoadingScreen>데이터를 불러오는 중</LoadingScreen>   children replace the "Loading" label ("..." is added)
+// `role="status"` makes the label a polite live region; the bars are decorative (aria-hidden).
+function LoadingScreen({
+  className,
+  fullscreen = false,
+  children = "Loading",
+  ...props
+}: React.ComponentProps<"div"> & { fullscreen?: boolean }) {
+  return (
+    <div
+      data-slot="loading-screen"
+      data-variant={fullscreen ? "fullscreen" : "inline"}
+      role="status"
+      className={cn(className)}
+      {...props}
+    >
+      <div data-slot="loading-screen-content">
+        <div data-slot="loading-spinner" aria-hidden="true">
+          {Array.from({ length: BAR_COUNT }, (_, index) => (
+            <span key={index} style={{ "--hm-loading-index": index } as React.CSSProperties} />
+          ))}
+        </div>
+        <p data-slot="loading-text">{children}</p>
+      </div>
+    </div>
+  )
+}
+
+export { LoadingScreen }
diff --git a/packages/ui/src/patterns/page-header/index.ts b/packages/ui/src/patterns/page-header/index.ts
new file mode 100644
index 0000000..f5c77d3
--- /dev/null
+++ b/packages/ui/src/patterns/page-header/index.ts
@@ -0,0 +1 @@
+export { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle } from "./page-header"
diff --git a/packages/ui/src/patterns/page-header/page-header.tsx b/packages/ui/src/patterns/page-header/page-header.tsx
new file mode 100644
index 0000000..75ff4f9
--- /dev/null
+++ b/packages/ui/src/patterns/page-header/page-header.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import { cn } from "cn"
+
+// Page Header pattern: the top of every screen's content. Breadcrumb (the HM Breadcrumb, composed as a child), the page title (the
+// screen's only `h1`), an optional description or meta line, and the page actions (Buttons, Dropdown Menu...) at the end.
+// Layout only: the Breadcrumb and Buttons keep their own look. Layout visual reference is the ui-viz page heading.
+//   <PageHeader>
+//     <PageHeaderContent>
+//       <Breadcrumb>…</Breadcrumb>
+//       <PageHeaderTitle>업무 현황</PageHeaderTitle>
+//       <PageHeaderDescription>…</PageHeaderDescription>
+//     </PageHeaderContent>
+//     <PageHeaderActions><Button>신규 등록</Button></PageHeaderActions>
+//   </PageHeader>
+function PageHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="page-header" className={cn("flex", className)} {...props} />
+}
+
+// Start side: Breadcrumb, title and description stacked.
+function PageHeaderContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="page-header-content" className={cn("grid", className)} {...props} />
+}
+
+function PageHeaderTitle({ className, ...props }: React.ComponentProps<"h1">) {
+  return <h1 data-slot="page-header-title" className={cn(className)} {...props} />
+}
+
+function PageHeaderDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return <p data-slot="page-header-description" className={cn(className)} {...props} />
+}
+
+// End side: actions on one row, wrapping on a narrow screen. Pass the Buttons as children.
+function PageHeaderActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="page-header-actions" className={cn("flex flex-wrap items-center", className)} {...props} />
+}
+
+export { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle }
diff --git a/packages/ui/src/tailwind.css b/packages/ui/src/tailwind.css
new file mode 100644
index 0000000..bfd8722
--- /dev/null
+++ b/packages/ui/src/tailwind.css
@@ -0,0 +1,82 @@
+/* Tailwind-side setup for @hm-design/ui: shadcn utilities, the @theme mapping of the shadcn variables, and the base layer.
+   The consuming app imports "tailwindcss" itself first; HM component values live in theme.css. */
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+/* Lets Tailwind scan the component classes in this package (the package may sit in node_modules). */
+@source "./components";
+@source "./patterns";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  :root {
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}
diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css
new file mode 100644
index 0000000..d5c5d56
--- /dev/null
+++ b/packages/ui/src/theme.css
@@ -0,0 +1,55 @@
+/* Shared HM theme and component styles. App/demo layout stays in hm-theme.css. */
+@import "./theme/default.css";
+@import "./theme/overlay.css";
+@import "./theme/accordion.css";
+@import "./theme/alert.css";
+@import "./theme/alert-dialog.css";
+@import "./theme/drawer.css";
+@import "./theme/sheet.css";
+@import "./theme/avatar.css";
+@import "./theme/badge.css";
+@import "./theme/breadcrumb.css";
+@import "./theme/button.css";
+@import "./theme/calendar.css";
+@import "./theme/carousel.css";
+@import "./theme/card.css";
+@import "./theme/checkbox.css";
+@import "./theme/collapsible.css";
+@import "./theme/combobox.css";
+@import "./theme/context-menu.css";
+@import "./theme/command.css";
+@import "./theme/data-table.css";
+@import "./theme/date-picker.css";
+@import "./theme/filter-bar.css";
+@import "./theme/gnb.css";
+@import "./theme/lnb.css";
+@import "./theme/page-header.css";
+@import "./theme/dashboard-layout.css";
+@import "./theme/loading-screen.css";
+@import "./theme/dialog.css";
+@import "./theme/dropdown-menu.css";
+@import "./theme/hover-card.css";
+@import "./theme/popover.css";
+@import "./theme/toggle.css";
+@import "./theme/toggle-group.css";
+@import "./theme/tooltip.css";
+@import "./theme/input.css";
+@import "./theme/label.css";
+@import "./theme/menubar.css";
+@import "./theme/navigation-menu.css";
+@import "./theme/pagination.css";
+@import "./theme/progress.css";
+@import "./theme/radio-group.css";
+@import "./theme/resizable.css";
+@import "./theme/scroll-area.css";
+@import "./theme/select.css";
+@import "./theme/sonner.css";
+@import "./theme/separator.css";
+@import "./theme/skeleton.css";
+@import "./theme/slider.css";
+@import "./theme/switch.css";
+@import "./theme/table.css";
+@import "./theme/tabs.css";
+@import "./theme/textarea.css";
+
+@font-face { font-family: "Noto Sans KR"; src: url("/fonts/NotoSansKR-variable.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
diff --git a/packages/ui/src/theme/accordion.css b/packages/ui/src/theme/accordion.css
new file mode 100644
index 0000000..7407c23
--- /dev/null
+++ b/packages/ui/src/theme/accordion.css
@@ -0,0 +1,67 @@
+/* Accordion mapping. ui-viz lists Accordion only as a component name (no spec), so these are current HM values built from the HM
+   Semantic tokens. Items are separated by a 1px divider; no outer box. Radix attributes drive the states (data-state, data-disabled);
+   the open / close animation and the chevron rotation stay the shadcn ones. */
+:root, [data-hm-theme] {
+  --hm-accordion-text: var(--hm-sem-fg-primary);
+  --hm-accordion-content-text: var(--hm-sem-fg-primary);
+  --hm-accordion-divider-width: 1px;
+  --hm-accordion-divider-color: var(--hm-sem-stroke-input-default);
+
+  --hm-accordion-trigger-min-height: 48px;
+  --hm-accordion-trigger-padding-y: 12px;
+  --hm-accordion-trigger-gap: 16px;
+  --hm-accordion-trigger-font-size: 16px;
+  --hm-accordion-trigger-line-height: 24px;
+  --hm-accordion-trigger-font-weight: 500;
+  --hm-accordion-icon-size: 20px;
+  --hm-accordion-icon-color: var(--hm-sem-fg-secondary);
+
+  --hm-accordion-content-font-size: 14px;
+  --hm-accordion-content-line-height: 20px;
+  --hm-accordion-content-padding-bottom: 16px;
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-accordion-disabled-opacity: 0.6;
+}
+
+[data-slot="accordion-item"] {
+  border-bottom: var(--hm-accordion-divider-width) solid var(--hm-accordion-divider-color);
+}
+[data-slot="accordion-item"]:last-child {
+  border-bottom: 0;
+}
+
+[data-slot="accordion-trigger"] {
+  box-sizing: border-box;
+  min-height: var(--hm-accordion-trigger-min-height);
+  padding: var(--hm-accordion-trigger-padding-y) 0;
+  gap: var(--hm-accordion-trigger-gap);
+  align-items: center;
+  color: var(--hm-accordion-text);
+  font-size: var(--hm-accordion-trigger-font-size);
+  line-height: var(--hm-accordion-trigger-line-height);
+  font-weight: var(--hm-accordion-trigger-font-weight);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+[data-slot="accordion-trigger"]:hover:not(:disabled) {
+  background: transparent;
+}
+[data-slot="accordion-trigger"]:disabled {
+  opacity: var(--hm-accordion-disabled-opacity);
+  cursor: not-allowed;
+}
+[data-slot="accordion-trigger-icon"] {
+  width: var(--hm-accordion-icon-size);
+  height: var(--hm-accordion-icon-size);
+  color: var(--hm-accordion-icon-color);
+}
+
+[data-slot="accordion-content-inner"] {
+  padding-bottom: var(--hm-accordion-content-padding-bottom);
+  color: var(--hm-accordion-content-text);
+  font-size: var(--hm-accordion-content-font-size);
+  line-height: var(--hm-accordion-content-line-height);
+  font-weight: 400;
+  overflow-wrap: anywhere;
+}
diff --git a/packages/ui/src/theme/alert-dialog.css b/packages/ui/src/theme/alert-dialog.css
new file mode 100644
index 0000000..43458f2
--- /dev/null
+++ b/packages/ui/src/theme/alert-dialog.css
@@ -0,0 +1,60 @@
+/* Alert Dialog mapping. ui-viz has no Alert Dialog spec (its Dialog doc lists it as a follow-up), so these are current HM values built
+   from the HM Semantic tokens. A compact confirmation: Header (Title + Description) and Actions, no Close (X), no Body region.
+   Radix AlertDialog keeps Portal, focus trap, initial focus on Cancel, Escape, no outside dismiss and focus return. Action and
+   Cancel are the HM Button (composed in the TSX), so no button style is set here. The Overlay keeps the shadcn default.
+   Values repeat Dialog's look in meaning only: no --hm-dialog-* token is referenced. */
+:root, [data-hm-theme] {
+  --hm-alert-dialog-background: var(--hm-sem-bg-surface);
+  --hm-alert-dialog-text: var(--hm-sem-fg-primary);
+  --hm-alert-dialog-border-width: 1px;
+  --hm-alert-dialog-border-color: var(--hm-sem-stroke-input-default);
+  --hm-alert-dialog-radius: 8px;
+  --hm-alert-dialog-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+
+  --hm-alert-dialog-width: 400px;
+  --hm-alert-dialog-edge: 16px;
+  --hm-alert-dialog-padding: 24px;
+  --hm-alert-dialog-header-gap: 8px;
+  --hm-alert-dialog-actions-gap: 8px;
+  --hm-alert-dialog-actions-margin-top: 24px;
+
+  --hm-alert-dialog-title-font-size: 18px;
+  --hm-alert-dialog-title-line-height: 28px;
+  --hm-alert-dialog-title-font-weight: 700;
+  --hm-alert-dialog-description-font-size: 14px;
+  --hm-alert-dialog-description-line-height: 20px;
+  --hm-alert-dialog-description-color: var(--hm-sem-fg-secondary);
+}
+
+[data-slot="alert-dialog-content"] {
+  box-sizing: border-box;
+  width: min(var(--hm-alert-dialog-width), calc(100vw - 2 * var(--hm-alert-dialog-edge)));
+  max-height: calc(100dvh - 2 * var(--hm-alert-dialog-edge));
+  overflow: auto;
+  padding: var(--hm-alert-dialog-padding);
+  border: var(--hm-alert-dialog-border-width) solid var(--hm-alert-dialog-border-color);
+  border-radius: var(--hm-alert-dialog-radius);
+  background: var(--hm-alert-dialog-background);
+  color: var(--hm-alert-dialog-text);
+  box-shadow: var(--hm-alert-dialog-shadow);
+  overflow-wrap: anywhere;
+}
+[data-slot="alert-dialog-header"] {
+  gap: var(--hm-alert-dialog-header-gap);
+}
+[data-slot="alert-dialog-title"] {
+  font-size: var(--hm-alert-dialog-title-font-size);
+  line-height: var(--hm-alert-dialog-title-line-height);
+  font-weight: var(--hm-alert-dialog-title-font-weight);
+  color: var(--hm-alert-dialog-text);
+}
+[data-slot="alert-dialog-description"] {
+  font-size: var(--hm-alert-dialog-description-font-size);
+  line-height: var(--hm-alert-dialog-description-line-height);
+  font-weight: 400;
+  color: var(--hm-alert-dialog-description-color);
+}
+[data-slot="alert-dialog-footer"] {
+  gap: var(--hm-alert-dialog-actions-gap);
+  margin-top: var(--hm-alert-dialog-actions-margin-top);
+}
diff --git a/packages/ui/src/theme/alert.css b/packages/ui/src/theme/alert.css
new file mode 100644
index 0000000..cb7679a
--- /dev/null
+++ b/packages/ui/src/theme/alert.css
@@ -0,0 +1,63 @@
+/* Alert mapping — current HM values from the shared Semantic tokens. ui-viz has no Alert spec (and its success / warning / information
+   status colors are undecided), so only a neutral default and a destructive variant exist. Variants use data-variant. */
+:root, [data-hm-theme] {
+  --hm-alert-radius: var(--hm-radius-control-md);
+  --hm-alert-padding-x: 16px;
+  --hm-alert-padding-y: 12px;
+  --hm-alert-border-width: 1px;
+  --hm-alert-icon-size: 16px;
+  --hm-alert-title-font-size: 14px;
+  --hm-alert-title-line-height: 20px;
+  --hm-alert-title-font-weight: 500;
+  --hm-alert-description-font-size: 14px;
+  --hm-alert-description-line-height: 20px;
+  --hm-alert-description-font-weight: 400;
+
+  --hm-alert-default-background: var(--hm-sem-bg-surface);
+  --hm-alert-default-border-color: var(--hm-sem-stroke-default);
+  --hm-alert-default-title-color: var(--hm-sem-fg-primary);
+  --hm-alert-default-description-color: var(--hm-sem-fg-secondary);
+
+  --hm-alert-destructive-background: var(--hm-sem-bg-surface);
+  --hm-alert-destructive-border-color: var(--hm-sem-action-destructive);
+  --hm-alert-destructive-title-color: var(--hm-sem-action-destructive);
+  --hm-alert-destructive-description-color: var(--hm-sem-fg-secondary);
+}
+
+[data-slot="alert"] {
+  box-sizing: border-box;
+  padding: var(--hm-alert-padding-y) var(--hm-alert-padding-x);
+  border: var(--hm-alert-border-width) solid var(--hm-alert-default-border-color);
+  border-radius: var(--hm-alert-radius);
+  background: var(--hm-alert-default-background);
+  font-size: var(--hm-alert-description-font-size);
+  line-height: var(--hm-alert-description-line-height);
+}
+[data-slot="alert"][data-variant="default"] {
+  color: var(--hm-alert-default-title-color);
+}
+[data-slot="alert"][data-variant="destructive"] {
+  border-color: var(--hm-alert-destructive-border-color);
+  background: var(--hm-alert-destructive-background);
+  color: var(--hm-alert-destructive-title-color);
+}
+[data-slot="alert-title"] {
+  font-size: var(--hm-alert-title-font-size);
+  line-height: var(--hm-alert-title-line-height);
+  font-weight: var(--hm-alert-title-font-weight);
+}
+[data-slot="alert-description"] {
+  font-size: var(--hm-alert-description-font-size);
+  line-height: var(--hm-alert-description-line-height);
+  font-weight: var(--hm-alert-description-font-weight);
+}
+[data-slot="alert"][data-variant="default"] [data-slot="alert-description"] {
+  color: var(--hm-alert-default-description-color);
+}
+[data-slot="alert"][data-variant="destructive"] [data-slot="alert-description"] {
+  color: var(--hm-alert-destructive-description-color);
+}
+[data-slot="alert"] > svg {
+  width: var(--hm-alert-icon-size);
+  height: var(--hm-alert-icon-size);
+}
diff --git a/packages/ui/src/theme/avatar.css b/packages/ui/src/theme/avatar.css
new file mode 100644
index 0000000..81e652e
--- /dev/null
+++ b/packages/ui/src/theme/avatar.css
@@ -0,0 +1,41 @@
+/* Avatar mapping. ui-viz lists Avatar only as a component name (no spec), so these are current HM values. Sizes follow the shadcn
+   API (sm | default | lg). The fallback uses the green tint face (the shared accent). */
+:root, [data-hm-theme] {
+  --hm-avatar-size-sm: 24px;
+  --hm-avatar-size-md: 32px;
+  --hm-avatar-size-lg: 40px;
+  --hm-avatar-radius: 9999px;
+
+  --hm-avatar-fallback-background: var(--accent);
+  --hm-avatar-fallback-text: var(--accent-foreground);
+  --hm-avatar-fallback-font-weight: 500;
+  --hm-avatar-fallback-font-size-sm: 10px;
+  --hm-avatar-fallback-font-size-md: 12px;
+  --hm-avatar-fallback-font-size-lg: 14px;
+}
+
+[data-slot="avatar"] {
+  --hm-avatar-size: var(--hm-avatar-size-md);
+  --hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-md);
+  width: var(--hm-avatar-size);
+  height: var(--hm-avatar-size);
+  border-radius: var(--hm-avatar-radius);
+}
+[data-slot="avatar"][data-size="sm"] {
+  --hm-avatar-size: var(--hm-avatar-size-sm);
+  --hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-sm);
+}
+[data-slot="avatar"][data-size="lg"] {
+  --hm-avatar-size: var(--hm-avatar-size-lg);
+  --hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-lg);
+}
+[data-slot="avatar-fallback"] {
+  border-radius: var(--hm-avatar-radius);
+  background: var(--hm-avatar-fallback-background);
+  color: var(--hm-avatar-fallback-text);
+  font-size: var(--hm-avatar-fallback-font-size);
+  font-weight: var(--hm-avatar-fallback-font-weight);
+  line-height: 1;
+  overflow: hidden;
+  white-space: nowrap;
+}
diff --git a/packages/ui/src/theme/badge.css b/packages/ui/src/theme/badge.css
new file mode 100644
index 0000000..ae76fcb
--- /dev/null
+++ b/packages/ui/src/theme/badge.css
@@ -0,0 +1,58 @@
+/* Badge mapping — current HM values from the shared Semantic tokens (ui-viz has no Badge spec; it was on hold there, so it is reference only).
+   Variants use data-variant. Only roles that exist in the HM Theme: primary, neutral, destructive, outline. */
+:root, [data-hm-theme] {
+  --hm-badge-radius: var(--hm-radius-control-md);
+  --hm-badge-padding-x: 8px;
+  --hm-badge-padding-y: 2px;
+  --hm-badge-border-width: 1px;
+  --hm-badge-font-size: 12px;
+  --hm-badge-line-height: 18px;
+  --hm-badge-font-weight: 500;
+
+  /* Default is the Strong Brand / Primary color (Primary Green), not the Active State Semantic. */
+  --hm-badge-default-background: var(--hm-sem-action-primary);
+  --hm-badge-default-text: var(--hm-sem-on-action-primary);
+  --hm-badge-default-border-color: var(--hm-sem-action-primary);
+
+  --hm-badge-secondary-background: var(--hm-sem-bg-subtle);
+  --hm-badge-secondary-text: var(--hm-sem-fg-secondary);
+  --hm-badge-secondary-border-color: var(--hm-sem-bg-subtle);
+
+  --hm-badge-destructive-background: var(--hm-sem-action-destructive);
+  --hm-badge-destructive-text: var(--hm-sem-on-action-primary);
+  --hm-badge-destructive-border-color: var(--hm-sem-action-destructive);
+
+  --hm-badge-outline-background: var(--hm-sem-bg-surface);
+  --hm-badge-outline-text: var(--hm-sem-fg-primary);
+  --hm-badge-outline-border-color: var(--hm-sem-stroke-default);
+}
+
+[data-slot="badge"] {
+  box-sizing: border-box;
+  padding: var(--hm-badge-padding-y) var(--hm-badge-padding-x);
+  border: var(--hm-badge-border-width) solid transparent;
+  border-radius: var(--hm-badge-radius);
+  font-size: var(--hm-badge-font-size);
+  line-height: var(--hm-badge-line-height);
+  font-weight: var(--hm-badge-font-weight);
+}
+[data-slot="badge"][data-variant="default"] {
+  background: var(--hm-badge-default-background);
+  color: var(--hm-badge-default-text);
+  border-color: var(--hm-badge-default-border-color);
+}
+[data-slot="badge"][data-variant="secondary"] {
+  background: var(--hm-badge-secondary-background);
+  color: var(--hm-badge-secondary-text);
+  border-color: var(--hm-badge-secondary-border-color);
+}
+[data-slot="badge"][data-variant="destructive"] {
+  background: var(--hm-badge-destructive-background);
+  color: var(--hm-badge-destructive-text);
+  border-color: var(--hm-badge-destructive-border-color);
+}
+[data-slot="badge"][data-variant="outline"] {
+  background: var(--hm-badge-outline-background);
+  color: var(--hm-badge-outline-text);
+  border-color: var(--hm-badge-outline-border-color);
+}
diff --git a/packages/ui/src/theme/breadcrumb.css b/packages/ui/src/theme/breadcrumb.css
new file mode 100644
index 0000000..65b036d
--- /dev/null
+++ b/packages/ui/src/theme/breadcrumb.css
@@ -0,0 +1,63 @@
+/* Breadcrumb mapping. ui-viz lists Breadcrumb only as a component name (no spec), so these are current HM values built from the HM
+   Semantic tokens. Parent links are secondary text that turns primary on hover; the current page is a primary-colored label. */
+:root, [data-hm-theme] {
+  --hm-breadcrumb-font-size: 14px;
+  --hm-breadcrumb-line-height: 20px;
+  --hm-breadcrumb-font-weight: 400;
+  --hm-breadcrumb-gap: 8px;
+
+  --hm-breadcrumb-link-color: var(--hm-sem-fg-secondary);
+  --hm-breadcrumb-link-hover-color: var(--hm-sem-fg-primary);
+  --hm-breadcrumb-page-color: var(--hm-sem-fg-primary);
+  --hm-breadcrumb-page-font-weight: 700;
+  --hm-breadcrumb-separator-color: var(--hm-sem-fg-secondary);
+  --hm-breadcrumb-separator-size: 16px;
+  --hm-breadcrumb-ellipsis-size: 20px;
+  --hm-breadcrumb-focus-radius: 2px;
+}
+
+[data-slot="breadcrumb-list"] {
+  gap: var(--hm-breadcrumb-gap);
+  color: var(--hm-breadcrumb-link-color);
+  font-size: var(--hm-breadcrumb-font-size);
+  line-height: var(--hm-breadcrumb-line-height);
+  font-weight: var(--hm-breadcrumb-font-weight);
+}
+[data-slot="breadcrumb-item"] {
+  gap: var(--hm-breadcrumb-gap);
+}
+[data-slot="breadcrumb-link"] {
+  color: var(--hm-breadcrumb-link-color);
+  border-radius: var(--hm-breadcrumb-focus-radius);
+  text-decoration: none;
+  outline: none;
+}
+[data-slot="breadcrumb-link"]:hover {
+  color: var(--hm-breadcrumb-link-hover-color);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+[data-slot="breadcrumb-link"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+[data-slot="breadcrumb-page"] {
+  color: var(--hm-breadcrumb-page-color);
+  font-weight: var(--hm-breadcrumb-page-font-weight);
+  cursor: default;
+}
+[data-slot="breadcrumb-separator"] {
+  color: var(--hm-breadcrumb-separator-color);
+}
+[data-slot="breadcrumb-separator"] > svg {
+  width: var(--hm-breadcrumb-separator-size);
+  height: var(--hm-breadcrumb-separator-size);
+}
+[data-slot="breadcrumb-ellipsis"] {
+  width: var(--hm-breadcrumb-ellipsis-size);
+  height: var(--hm-breadcrumb-ellipsis-size);
+  color: var(--hm-breadcrumb-separator-color);
+}
+[data-slot="breadcrumb-ellipsis"] > svg {
+  width: var(--hm-breadcrumb-separator-size);
+  height: var(--hm-breadcrumb-separator-size);
+}
diff --git a/packages/ui/src/theme/button.css b/packages/ui/src/theme/button.css
new file mode 100644
index 0000000..ab53c3d
--- /dev/null
+++ b/packages/ui/src/theme/button.css
@@ -0,0 +1,192 @@
+/* Button mapping: shared HM theme values are the defaults; each mapping can be overridden alone.
+   variant = ui_viz role, appearance = ui_viz treatment. Only [data-appearance] buttons (the HM roles) are styled here;
+   ghost and link carry no data-appearance and keep the shadcn defaults. */
+:root, [data-hm-theme] {
+  /* ui_viz: docs/components/button.md §1.1 D-087 — Confirmed */
+  --hm-button-radius: var(--hm-radius-button);
+  --hm-button-font-family: var(--hm-font-family-base);
+  --hm-button-weight-brand: var(--hm-font-weight-bold);
+  --hm-button-weight-standard: var(--hm-font-weight-medium);
+  --hm-button-text: var(--hm-sem-on-action-primary);
+  --hm-button-disabled-opacity: 0.6;
+
+  /* ui_viz: docs/components/button.md §26 / §1.1 D-087 — Confirmed (size, padding-x, label size / line-height) */
+  --hm-button-height-sm: 28px;
+  --hm-button-height-md: var(--hm-control-height-md);
+  --hm-button-height-lg: 42px;
+  --hm-button-padding-x-sm: 10px;
+  --hm-button-padding-x-md: 14px;
+  --hm-button-padding-x-lg: 18px;
+  --hm-button-font-size-sm: 12px;
+  --hm-button-font-size-md: var(--hm-font-size-button-md);
+  --hm-button-font-size-lg: 15px;
+  --hm-button-line-height-sm: 18px;
+  --hm-button-line-height-md: 20px;
+  --hm-button-line-height-lg: 22px;
+
+  /* ui_viz: docs/components/button.md §1.1 D-087 Brand gradient (180deg, bg stops 0/30/65/100, border stops 0/50/100) — Confirmed */
+  --hm-button-brand-green-background: var(--hm-sem-surface-action-primary);
+  --hm-button-brand-green-border: var(--hm-sem-border-action-primary);
+  --hm-button-brand-brown-background: linear-gradient(180deg, var(--hm-sem-palette-brown-light-2) 0%, var(--hm-sem-palette-brown-light-1) 30%, var(--hm-sem-palette-brown-dark-1) 65%, var(--hm-sem-palette-brown-deep) 100%);
+  --hm-button-brand-brown-border: linear-gradient(180deg, var(--hm-sem-palette-brown-dark-1) 0%, var(--hm-sem-palette-brown-highlight) 50%, var(--hm-sem-palette-brown-deep) 100%);
+  --hm-button-brand-orange-background: linear-gradient(180deg, var(--hm-sem-palette-orange-light) 0%, var(--hm-sem-palette-orange-mid) 30%, var(--hm-sem-palette-orange-dark) 65%, var(--hm-sem-palette-orange-deep) 100%);
+  --hm-button-brand-orange-border: linear-gradient(180deg, var(--hm-sem-palette-orange-border) 0%, var(--hm-sem-palette-orange-light-4) 50%, var(--hm-sem-palette-orange-border-deep) 100%);
+  /* ui_viz: docs/components/button.md §1.1 D-087 Brand bevel (Green, Brown only) — Confirmed */
+  --hm-button-brand-bevel: inset 0 1px 1px var(--hm-color-action-shadow-light), inset 0 -1px 2px var(--hm-color-action-shadow-dark);
+
+  /* ui_viz: docs/components/button.md §28 / §1.1 D-086, D-087 Standard Solid (face / border) — Confirmed */
+  --hm-button-solid-green-background: var(--hm-sem-palette-green-light-1);
+  --hm-button-solid-green-border: var(--hm-sem-palette-green-dark-1);
+  --hm-button-solid-brown-background: var(--hm-sem-palette-brown-light-1);
+  --hm-button-solid-brown-border: var(--hm-sem-palette-brown-dark-1);
+  --hm-button-solid-orange-background: var(--hm-sem-palette-orange-default);
+  --hm-button-solid-orange-border: var(--hm-sem-palette-orange-default);
+  --hm-button-solid-gray-background: var(--hm-sem-palette-gray);
+  --hm-button-solid-gray-border: var(--hm-sem-palette-gray-dark);
+
+  /* ui_viz: docs/components/button.md §28 Standard Outline (ink) and D-087 Red Outline Hover/Pressed — Confirmed */
+  --hm-button-outline-green-ink: var(--hm-sem-action-primary);
+  --hm-button-outline-brown-ink: var(--hm-sem-palette-brown-default);
+  --hm-button-outline-red-ink: var(--hm-sem-action-destructive);
+  --hm-button-outline-red-surface: var(--hm-color-action-destructive-hover);
+  --hm-button-outline-surface: var(--hm-sem-bg-surface);
+
+  /* ui_viz: docs/components/button.md §12 Hover and Pressed are the same Black 20% state surface — Confirmed */
+  --hm-button-state-overlay: var(--hm-color-action-overlay-hover);
+}
+
+/* Roles: pick the colors of each treatment. */
+[data-slot="button"][data-variant="primary"] {
+  --hm-button-brand-background: var(--hm-button-brand-green-background);
+  --hm-button-brand-border: var(--hm-button-brand-green-border);
+  --hm-button-solid-background: var(--hm-button-solid-green-background);
+  --hm-button-solid-border: var(--hm-button-solid-green-border);
+  --hm-button-outline-ink: var(--hm-button-outline-green-ink);
+}
+[data-slot="button"][data-variant="secondary"] {
+  --hm-button-brand-background: var(--hm-button-brand-brown-background);
+  --hm-button-brand-border: var(--hm-button-brand-brown-border);
+  --hm-button-solid-background: var(--hm-button-solid-brown-background);
+  --hm-button-solid-border: var(--hm-button-solid-brown-border);
+  --hm-button-outline-ink: var(--hm-button-outline-brown-ink);
+}
+[data-slot="button"][data-variant="modify"] {
+  --hm-button-brand-background: var(--hm-button-brand-orange-background);
+  --hm-button-brand-border: var(--hm-button-brand-orange-border);
+  --hm-button-solid-background: var(--hm-button-solid-orange-background);
+  --hm-button-solid-border: var(--hm-button-solid-orange-border);
+}
+[data-slot="button"][data-variant="cancel"] {
+  --hm-button-solid-background: var(--hm-button-solid-gray-background);
+  --hm-button-solid-border: var(--hm-button-solid-gray-border);
+  --hm-button-outline-ink: var(--hm-sem-action-cancel);
+}
+[data-slot="button"][data-variant="destructive"] {
+  --hm-button-outline-ink: var(--hm-button-outline-red-ink);
+}
+
+/* Shared. The last two shadows keep the shadcn focus and invalid ring visible on top of the bevel and state surface. */
+[data-slot="button"][data-appearance] {
+  --hm-button-border-width: 1px;
+  --hm-button-bevel: 0 0 #0000;
+  --hm-button-state-surface: 0 0 #0000;
+  border: var(--hm-button-border-width) solid transparent;
+  border-radius: var(--hm-button-radius);
+  font-family: var(--hm-button-font-family);
+  font-weight: var(--hm-button-weight-standard);
+  box-shadow: var(--hm-button-state-surface), var(--hm-button-bevel), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
+}
+
+/* Size: min-height with vertical padding; explicit wrapping labels can still grow. */
+[data-slot="button"][data-appearance]:is([data-size="default"], [data-size="sm"], [data-size="lg"]) {
+  --hm-button-height: var(--hm-button-height-md);
+  --hm-button-padding-x: var(--hm-button-padding-x-md);
+  --hm-button-font-size: var(--hm-button-font-size-md);
+  --hm-button-line-height: var(--hm-button-line-height-md);
+  height: auto;
+  min-height: var(--hm-button-height);
+  max-width: 100%;
+  padding: calc((var(--hm-button-height) - var(--hm-button-line-height)) / 2 - var(--hm-button-border-width)) var(--hm-button-padding-x);
+  font-size: var(--hm-button-font-size);
+  line-height: var(--hm-button-line-height);
+  text-align: center;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+/* Keep the existing shadcn nowrap default. Normal labels retain their intrinsic
+   width when a parent is narrower; consumers can opt into the existing long-label
+   behavior with className="whitespace-normal", without a new prop.
+   Utilities remain able to override these layout defaults. */
+@layer components {
+  [data-slot="button"][data-appearance]:is([data-size="default"], [data-size="sm"], [data-size="lg"]) {
+    min-width: max-content;
+  }
+  [data-slot="button"][data-appearance].whitespace-normal:is([data-size="default"], [data-size="sm"], [data-size="lg"]) {
+    min-width: 0;
+  }
+}
+[data-slot="button"][data-appearance][data-size="sm"] {
+  --hm-button-height: var(--hm-button-height-sm);
+  --hm-button-padding-x: var(--hm-button-padding-x-sm);
+  --hm-button-font-size: var(--hm-button-font-size-sm);
+  --hm-button-line-height: var(--hm-button-line-height-sm);
+}
+[data-slot="button"][data-appearance][data-size="lg"] {
+  --hm-button-height: var(--hm-button-height-lg);
+  --hm-button-padding-x: var(--hm-button-padding-x-lg);
+  --hm-button-font-size: var(--hm-button-font-size-lg);
+  --hm-button-line-height: var(--hm-button-line-height-lg);
+}
+
+/* Brand: two-layer gradient (face on padding-box, border on border-box), white label, weight 700. */
+[data-slot="button"][data-appearance="brand"] {
+  --hm-button-border-width: 1.5px;
+  border-color: transparent;
+  background: var(--hm-button-brand-background) padding-box, var(--hm-button-brand-border) border-box;
+  color: var(--hm-button-text);
+  font-weight: var(--hm-button-weight-brand);
+}
+[data-slot="button"][data-appearance="brand"]:is([data-variant="primary"], [data-variant="secondary"]) {
+  --hm-button-bevel: var(--hm-button-brand-bevel);
+}
+
+/* Solid: flat face, 1px border, white label. */
+[data-slot="button"][data-appearance="solid"] {
+  border-color: var(--hm-button-solid-border);
+  background: var(--hm-button-solid-background);
+  color: var(--hm-button-text);
+}
+
+/* Brand and Solid: Hover and Pressed are the same Black 20% over the face. */
+[data-slot="button"]:is([data-appearance="brand"], [data-appearance="solid"]):is(:hover, :active):not(:disabled) {
+  --hm-button-state-surface: inset 0 0 0 999px var(--hm-button-state-overlay);
+}
+
+/* Outline: white face, 1px role ink. Hover fills with the role ink; Pressed is white with Black 20%. */
+[data-slot="button"][data-appearance="outline"] {
+  border-color: var(--hm-button-outline-ink);
+  background: var(--hm-button-outline-surface);
+  color: var(--hm-button-outline-ink);
+}
+[data-slot="button"][data-appearance="outline"]:hover:not(:disabled) {
+  background: var(--hm-button-outline-ink);
+  color: var(--hm-button-text);
+}
+[data-slot="button"][data-appearance="outline"]:active:not(:disabled) {
+  background: var(--hm-button-outline-surface);
+  color: var(--hm-button-outline-ink);
+  --hm-button-state-surface: inset 0 0 0 999px var(--hm-button-state-overlay);
+}
+/* Red Outline exception: Hover and Pressed are a Red 8% face, no Black overlay. */
+[data-slot="button"][data-appearance="outline"][data-variant="destructive"]:is(:hover, :active):not(:disabled) {
+  background: var(--hm-button-outline-red-surface);
+  color: var(--hm-button-outline-ink);
+  --hm-button-state-surface: 0 0 #0000;
+}
+
+/* Disabled keeps the Default paint, dims the whole button, and shows the forbidden cursor. */
+[data-slot="button"][data-appearance]:disabled {
+  opacity: var(--hm-button-disabled-opacity);
+  cursor: not-allowed;
+}
diff --git a/packages/ui/src/theme/calendar.css b/packages/ui/src/theme/calendar.css
new file mode 100644
index 0000000..004505b
--- /dev/null
+++ b/packages/ui/src/theme/calendar.css
@@ -0,0 +1,208 @@
+/* Calendar mapping. ui-viz has no Calendar spec (inventory lists Date Picker by name only), so these are current HM values built
+   from the HM Semantic / Primitive tokens. react-day-picker keeps its default class names (rdp-*) and puts the state attributes
+   on the day cell (data-selected, data-today, data-outside, data-disabled, data-focused); the range states are its classes
+   (rdp-range_start / _middle / _end). Everything is scoped under [data-slot="calendar"]. The Calendar draws no surface of its own
+   (the container, e.g. Popover or Card, owns it). Nothing here references Button / Input / Popover tokens. */
+:root, [data-hm-theme] {
+  --hm-calendar-padding: 12px;
+  --hm-calendar-text: var(--hm-sem-fg-primary);
+  --hm-calendar-month-gap: 16px;
+
+  --hm-calendar-caption-height: 32px;
+  --hm-calendar-caption-font-size: 14px;
+  --hm-calendar-caption-line-height: 20px;
+  --hm-calendar-caption-font-weight: 700;
+
+  --hm-calendar-nav-size: 28px;
+  --hm-calendar-nav-radius: var(--hm-radius-control-md);
+  --hm-calendar-nav-icon-size: 16px;
+  --hm-calendar-nav-hover-background: var(--hm-sem-surface-highlight);
+
+  --hm-calendar-weekday-color: var(--hm-sem-fg-secondary);
+  --hm-calendar-weekday-font-size: 12px;
+  --hm-calendar-weekday-line-height: 18px;
+  --hm-calendar-weekday-font-weight: 500;
+
+  --hm-calendar-day-size: 36px;
+  --hm-calendar-day-radius: var(--hm-radius-control-md);
+  --hm-calendar-day-font-size: 14px;
+  --hm-calendar-day-line-height: 20px;
+  --hm-calendar-day-hover-background: var(--hm-sem-surface-highlight);
+  --hm-calendar-today-background: var(--hm-sem-bg-subtle);
+  --hm-calendar-today-font-weight: 700;
+  /* Single selected and range start / end use the Active Semantic fill; the range middle keeps the soft selection surface
+     (--accent 45%, text --accent-foreground). */
+  --hm-calendar-selected-background: var(--hm-sem-state-active);
+  --hm-calendar-selected-text: var(--hm-sem-on-state-active);
+  --hm-calendar-range-edge-background: var(--hm-sem-state-active);
+  --hm-calendar-range-edge-text: var(--hm-sem-on-state-active);
+  --hm-calendar-range-middle-background: var(--hm-sem-surface-highlight);
+  --hm-calendar-range-middle-text: var(--accent-foreground);
+  --hm-calendar-outside-color: var(--hm-sem-fg-secondary);
+  --hm-calendar-outside-opacity: 0.6;
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-calendar-disabled-opacity: 0.4;
+}
+
+[data-slot="calendar"] {
+  position: relative;
+  width: fit-content;
+  padding: var(--hm-calendar-padding);
+  color: var(--hm-calendar-text);
+}
+
+[data-slot="calendar"] .rdp-months {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hm-calendar-month-gap);
+}
+[data-slot="calendar"] .rdp-month {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Caption: centered label; the nav buttons sit on both sides of the first caption row. */
+[data-slot="calendar"] .rdp-month_caption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--hm-calendar-caption-height);
+  font-size: var(--hm-calendar-caption-font-size);
+  line-height: var(--hm-calendar-caption-line-height);
+  font-weight: var(--hm-calendar-caption-font-weight);
+}
+[data-slot="calendar"] .rdp-nav {
+  position: absolute;
+  top: var(--hm-calendar-padding);
+  left: var(--hm-calendar-padding);
+  right: var(--hm-calendar-padding);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--hm-calendar-caption-height);
+  pointer-events: none;
+}
+[data-slot="calendar"] .rdp-button_previous,
+[data-slot="calendar"] .rdp-button_next {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--hm-calendar-nav-size);
+  height: var(--hm-calendar-nav-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--hm-calendar-nav-radius);
+  background: transparent;
+  color: var(--hm-calendar-text);
+  cursor: pointer;
+  outline: none;
+}
+[data-slot="calendar"] .rdp-button_previous:hover:not(:disabled),
+[data-slot="calendar"] .rdp-button_next:hover:not(:disabled) {
+  background: var(--hm-calendar-nav-hover-background);
+}
+[data-slot="calendar"] .rdp-button_previous:focus-visible,
+[data-slot="calendar"] .rdp-button_next:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+[data-slot="calendar"] .rdp-button_previous:disabled,
+[data-slot="calendar"] .rdp-button_next:disabled {
+  opacity: var(--hm-calendar-disabled-opacity);
+  cursor: not-allowed;
+}
+[data-slot="calendar"] .rdp-button_previous svg,
+[data-slot="calendar"] .rdp-button_next svg {
+  width: var(--hm-calendar-nav-icon-size);
+  height: var(--hm-calendar-nav-icon-size);
+}
+
+/* Grid */
+[data-slot="calendar"] .rdp-month_grid {
+  border-collapse: collapse;
+}
+[data-slot="calendar"] .rdp-weekday {
+  width: var(--hm-calendar-day-size);
+  padding: 4px 0;
+  color: var(--hm-calendar-weekday-color);
+  font-size: var(--hm-calendar-weekday-font-size);
+  line-height: var(--hm-calendar-weekday-line-height);
+  font-weight: var(--hm-calendar-weekday-font-weight);
+  text-align: center;
+}
+[data-slot="calendar"] .rdp-day {
+  width: var(--hm-calendar-day-size);
+  height: var(--hm-calendar-day-size);
+  padding: 0;
+  text-align: center;
+}
+[data-slot="calendar"] .rdp-day_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--hm-calendar-day-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: var(--hm-calendar-day-font-size);
+  line-height: var(--hm-calendar-day-line-height);
+  cursor: pointer;
+  outline: none;
+}
+[data-slot="calendar"] .rdp-day_button:hover:not(:disabled) {
+  background: var(--hm-calendar-day-hover-background);
+}
+[data-slot="calendar"] .rdp-day_button:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+  position: relative;
+  z-index: 1;
+}
+
+/* Today / outside / disabled / selected, from the day cell attributes. */
+[data-slot="calendar"] .rdp-day[data-today] .rdp-day_button {
+  background: var(--hm-calendar-today-background);
+  font-weight: var(--hm-calendar-today-font-weight);
+}
+[data-slot="calendar"] .rdp-day[data-outside] .rdp-day_button {
+  color: var(--hm-calendar-outside-color);
+  opacity: var(--hm-calendar-outside-opacity);
+}
+[data-slot="calendar"] .rdp-day[data-disabled] .rdp-day_button {
+  opacity: var(--hm-calendar-disabled-opacity);
+  cursor: not-allowed;
+}
+[data-slot="calendar"] .rdp-day[data-selected] .rdp-day_button,
+[data-slot="calendar"] .rdp-day[data-selected] .rdp-day_button:hover:not(:disabled) {
+  background: var(--hm-calendar-selected-background);
+  color: var(--hm-calendar-selected-text);
+  opacity: 1;
+}
+
+/* Range: start and end keep the Active fill (inner corners square); the middle uses the soft surface with square corners. */
+[data-slot="calendar"] .rdp-day.rdp-range_middle[data-selected] .rdp-day_button,
+[data-slot="calendar"] .rdp-day.rdp-range_middle[data-selected] .rdp-day_button:hover:not(:disabled) {
+  background: var(--hm-calendar-range-middle-background);
+  color: var(--hm-calendar-range-middle-text);
+  border-radius: 0;
+}
+[data-slot="calendar"] .rdp-day.rdp-range_start[data-selected] .rdp-day_button,
+[data-slot="calendar"] .rdp-day.rdp-range_start[data-selected] .rdp-day_button:hover:not(:disabled),
+[data-slot="calendar"] .rdp-day.rdp-range_end[data-selected] .rdp-day_button,
+[data-slot="calendar"] .rdp-day.rdp-range_end[data-selected] .rdp-day_button:hover:not(:disabled) {
+  background: var(--hm-calendar-range-edge-background);
+  color: var(--hm-calendar-range-edge-text);
+}
+[data-slot="calendar"] .rdp-range_start .rdp-day_button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+[data-slot="calendar"] .rdp-range_end .rdp-day_button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/packages/ui/src/theme/card.css b/packages/ui/src/theme/card.css
new file mode 100644
index 0000000..eba9a9c
--- /dev/null
+++ b/packages/ui/src/theme/card.css
@@ -0,0 +1,61 @@
+/* Card mapping: ui_viz Content Card (Type B). HM spec: docs/components/card.md.
+   Source refs below (content-container.md §7, §10 and content-header.md §7, §9) are external ui_viz docs/patterns/ files, not in this repo.
+   ui_viz defines no Hover / Focus / Selected / Disabled, no shadow and no footer: those stay shadcn defaults or are absent. */
+:root, [data-hm-theme] {
+  /* ui_viz: content-container.md §7.2 — container-radius 4px = radius.container.default — Confirmed. Not aliased to Input or Button. */
+  --hm-card-radius: var(--hm-radius-container);
+  /* ui_viz: content-container.md §7.2 — border 1px, body-padding 24px all sides — SOURCE_ADOPTED (Canonical pattern, Q6) */
+  --hm-card-border-width: 1px;
+  --hm-card-padding: 24px;
+  /* ui_viz: content-container.md §7.2, §10.2 — border colors were LOCAL_EXCEPTION component values (#DEDBD2 / #ECD4A2).
+     HM maps them to shared Semantic tokens: color.stroke.input.default and color.palette.brown-light-4 (see docs/components/card.md §6.1). */
+  --hm-card-border-color: var(--hm-sem-stroke-input-default);
+  --hm-card-border-color-on-content: var(--hm-sem-palette-brown-light-4);
+  /* ui_viz: content-container.md §7.2 — surface: color.bg.surface (White) or color.bg.content (Beige) — Confirmed */
+  --hm-card-surface: var(--hm-sem-bg-surface);
+  --hm-card-surface-content: var(--hm-sem-bg-content);
+  --hm-card-text: var(--hm-sem-fg-primary);
+
+  /* ui_viz: content-header.md §7.1, §9 — content profile: title <-> meta gap 20px, title heading-md 20/28/600 (CANONICAL_OVERRIDE of Source 19px) */
+  --hm-card-header-gap: 20px;
+  --hm-card-title-font-size: 20px;
+  --hm-card-title-line-height: 28px;
+  --hm-card-title-font-weight: 600;
+  --hm-card-title-color: var(--hm-sem-fg-primary);
+}
+
+/* Default size. size="sm" is a shadcn size that ui_viz does not define, so it keeps the shadcn spacing (12px) from the TSX classes. */
+:where([data-slot="card"]:not([data-size="sm"])) {
+  --card-spacing: var(--hm-card-padding);
+}
+[data-slot="card"] {
+  border: var(--hm-card-border-width) solid var(--hm-card-border-color);
+  border-radius: var(--hm-card-radius);
+  background: var(--hm-card-surface);
+  color: var(--hm-card-text);
+  box-shadow: none;
+}
+[data-slot="card"][data-surface="content"] {
+  border-color: var(--hm-card-border-color-on-content);
+  background: var(--hm-card-surface-content);
+}
+
+/* Header: title group at the start, Action (Meta) at the end, centered on the cross axis. */
+[data-slot="card-header"] {
+  column-gap: var(--hm-card-header-gap);
+}
+[data-slot="card-action"] {
+  align-self: center;
+}
+:where([data-slot="card"]:not([data-size="sm"])) [data-slot="card-title"] {
+  font-size: var(--hm-card-title-font-size);
+  line-height: var(--hm-card-title-line-height);
+  font-weight: var(--hm-card-title-font-weight);
+  color: var(--hm-card-title-color);
+}
+
+/* Footer is not defined by ui_viz (shadcn default). Its bottom corners follow the container radius inside the border. */
+[data-slot="card-footer"] {
+  border-bottom-left-radius: calc(var(--hm-card-radius) - var(--hm-card-border-width));
+  border-bottom-right-radius: calc(var(--hm-card-radius) - var(--hm-card-border-width));
+}
diff --git a/packages/ui/src/theme/carousel.css b/packages/ui/src/theme/carousel.css
new file mode 100644
index 0000000..b5c5419
--- /dev/null
+++ b/packages/ui/src/theme/carousel.css
@@ -0,0 +1,88 @@
+/* Carousel mapping. ui-viz has no Carousel spec (it is not in the earlier inventory), so these are current HM values built from the HM
+   Semantic / Primitive tokens. Embla owns the scrolling; here only the slide gap and the previous / next controls are styled.
+   The controls are Carousel's own buttons (they do not use the Button component or its tokens) and sit inside the carousel edge
+   (8px inset) so they are never clipped by a narrow parent. The slide width is the consumer's (`basis-*` on CarouselItem).
+   Everything is in `@layer components`, so a consumer's utility classes (gap, control position, size) still win.
+   Nothing here references Button / Scroll Area tokens. */
+:root, [data-hm-theme] {
+  --hm-carousel-gap: 16px;
+
+  --hm-carousel-control-size: 32px;
+  --hm-carousel-control-inset: 8px;
+  --hm-carousel-control-icon-size: 16px;
+  --hm-carousel-control-background: var(--hm-sem-bg-surface);
+  --hm-carousel-control-text: var(--hm-sem-fg-primary);
+  --hm-carousel-control-border-width: 1px;
+  --hm-carousel-control-border-color: var(--hm-sem-stroke-input-default);
+  --hm-carousel-control-hover-background: var(--accent);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-carousel-disabled-opacity: 0.6;
+}
+
+@layer components {
+  /* Gap: the track pulls back by one gap and every slide pads it (the shadcn approach), so slides keep equal widths. */
+  [data-slot="carousel"][data-orientation="horizontal"] [data-slot="carousel-track"] {
+    margin-left: calc(-1 * var(--hm-carousel-gap));
+  }
+  [data-slot="carousel"][data-orientation="horizontal"] [data-slot="carousel-item"] {
+    padding-left: var(--hm-carousel-gap);
+  }
+  [data-slot="carousel"][data-orientation="vertical"] [data-slot="carousel-track"] {
+    margin-top: calc(-1 * var(--hm-carousel-gap));
+  }
+  [data-slot="carousel"][data-orientation="vertical"] [data-slot="carousel-item"] {
+    padding-top: var(--hm-carousel-gap);
+  }
+  [data-slot="carousel-content"] {
+    cursor: grab;
+  }
+  [data-slot="carousel-content"]:active {
+    cursor: grabbing;
+  }
+
+  [data-slot="carousel-previous"],
+  [data-slot="carousel-next"] {
+    box-sizing: border-box;
+    width: var(--hm-carousel-control-size);
+    height: var(--hm-carousel-control-size);
+    padding: 0;
+    border: var(--hm-carousel-control-border-width) solid var(--hm-carousel-control-border-color);
+    border-radius: 9999px;
+    background: var(--hm-carousel-control-background);
+    color: var(--hm-carousel-control-text);
+    cursor: pointer;
+  }
+  [data-slot="carousel-previous"] svg,
+  [data-slot="carousel-next"] svg {
+    width: var(--hm-carousel-control-icon-size);
+    height: var(--hm-carousel-control-icon-size);
+  }
+  [data-slot="carousel-previous"]:hover:not(:disabled),
+  [data-slot="carousel-next"]:hover:not(:disabled) {
+    background: var(--hm-carousel-control-hover-background);
+  }
+  [data-slot="carousel-previous"]:focus-visible,
+  [data-slot="carousel-next"]:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+  }
+  [data-slot="carousel-previous"]:disabled,
+  [data-slot="carousel-next"]:disabled {
+    opacity: var(--hm-carousel-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  /* Position: inside the edge, centered on the cross axis (the vertical carousel turns the arrows 90 degrees). */
+  [data-slot="carousel"][data-orientation="horizontal"] [data-slot="carousel-previous"] {
+    left: var(--hm-carousel-control-inset);
+  }
+  [data-slot="carousel"][data-orientation="horizontal"] [data-slot="carousel-next"] {
+    right: var(--hm-carousel-control-inset);
+  }
+  [data-slot="carousel"][data-orientation="vertical"] [data-slot="carousel-previous"] {
+    top: var(--hm-carousel-control-inset);
+  }
+  [data-slot="carousel"][data-orientation="vertical"] [data-slot="carousel-next"] {
+    bottom: var(--hm-carousel-control-inset);
+  }
+}
diff --git a/packages/ui/src/theme/checkbox.css b/packages/ui/src/theme/checkbox.css
new file mode 100644
index 0000000..12998f9
--- /dev/null
+++ b/packages/ui/src/theme/checkbox.css
@@ -0,0 +1,54 @@
+/* Checkbox mapping: current HM values built from the shared Semantic tokens (ui-viz has no Checkbox spec; reference only).
+   States use Radix attributes: [data-state="checked"|"indeterminate"], :hover, :focus-visible, :disabled, [aria-invalid="true"]. */
+:root, [data-hm-theme] {
+  --hm-checkbox-size: 18px;
+  --hm-checkbox-radius: var(--hm-radius-control-md);
+  --hm-checkbox-border-width: 1px;
+  --hm-checkbox-icon-size: 14px;
+  --hm-checkbox-background: var(--hm-sem-bg-surface);
+  --hm-checkbox-border-color: var(--hm-sem-stroke-default);
+  --hm-checkbox-hover-border-color: var(--hm-sem-action-primary);
+  --hm-checkbox-checked-background: var(--hm-sem-state-active);
+  --hm-checkbox-checked-border-color: var(--hm-sem-state-active);
+  --hm-checkbox-checked-hover-overlay: var(--hm-color-action-overlay-hover);
+  --hm-checkbox-indicator-color: var(--hm-sem-on-state-active);
+  --hm-checkbox-error-border-color: var(--hm-sem-action-destructive);
+}
+
+[data-slot="checkbox"] {
+  box-sizing: border-box;
+  width: var(--hm-checkbox-size);
+  height: var(--hm-checkbox-size);
+  padding: 0;
+  border: var(--hm-checkbox-border-width) solid var(--hm-checkbox-border-color);
+  border-radius: var(--hm-checkbox-radius);
+  background-color: var(--hm-checkbox-background);
+  background-image: none;
+  color: var(--hm-checkbox-indicator-color);
+  box-shadow: none;
+  cursor: pointer;
+}
+[data-slot="checkbox"] svg { width: var(--hm-checkbox-icon-size); height: var(--hm-checkbox-icon-size); }
+
+[data-slot="checkbox"]:hover:not(:disabled):not([data-state="checked"]):not([data-state="indeterminate"]) {
+  border-color: var(--hm-checkbox-hover-border-color);
+}
+[data-slot="checkbox"][data-state="checked"],
+[data-slot="checkbox"][data-state="indeterminate"] {
+  border-color: var(--hm-checkbox-checked-border-color);
+  background-color: var(--hm-checkbox-checked-background);
+}
+[data-slot="checkbox"][data-state="checked"]:hover:not(:disabled),
+[data-slot="checkbox"][data-state="indeterminate"]:hover:not(:disabled) {
+  background-image: linear-gradient(var(--hm-checkbox-checked-hover-overlay), var(--hm-checkbox-checked-hover-overlay));
+}
+/* Focus level is the shadcn ring (ui_viz global focus is TBD); keep the ring variables because the theme sets box-shadow: none. */
+[data-slot="checkbox"]:focus-visible {
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
+}
+[data-slot="checkbox"][aria-invalid="true"] {
+  border-color: var(--hm-checkbox-error-border-color);
+}
+[data-slot="checkbox"]:disabled {
+  cursor: not-allowed;
+}
diff --git a/packages/ui/src/theme/collapsible.css b/packages/ui/src/theme/collapsible.css
new file mode 100644
index 0000000..5835d21
--- /dev/null
+++ b/packages/ui/src/theme/collapsible.css
@@ -0,0 +1,66 @@
+/* Collapsible mapping. ui-viz has no Collapsible spec, so these are current HM values built from the HM Semantic tokens.
+   Collapsible is one independent disclosure: a trigger and its content, with no divider system. A plain trigger (no asChild) gets
+   a text-button look; with asChild the child (for example an HM Button) keeps its own style. Radix attributes drive the states.
+   No --hm-accordion-* token is referenced. */
+:root, [data-hm-theme] {
+  --hm-collapsible-trigger-text: var(--hm-sem-fg-primary);
+  --hm-collapsible-trigger-gap: 8px;
+  --hm-collapsible-trigger-font-size: 14px;
+  --hm-collapsible-trigger-line-height: 20px;
+  --hm-collapsible-trigger-font-weight: 500;
+  --hm-collapsible-icon-size: 16px;
+  --hm-collapsible-icon-color: var(--hm-sem-fg-secondary);
+
+  --hm-collapsible-content-gap: 8px;
+  --hm-collapsible-content-text: var(--hm-sem-fg-primary);
+  --hm-collapsible-content-font-size: 14px;
+  --hm-collapsible-content-line-height: 20px;
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-collapsible-disabled-opacity: 0.6;
+}
+
+[data-slot="collapsible-trigger"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hm-collapsible-trigger-gap);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--hm-collapsible-trigger-text);
+  font-size: var(--hm-collapsible-trigger-font-size);
+  line-height: var(--hm-collapsible-trigger-line-height);
+  font-weight: var(--hm-collapsible-trigger-font-weight);
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+}
+[data-slot="collapsible-trigger"]:hover:not(:disabled) {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+[data-slot="collapsible-trigger"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+[data-slot="collapsible-trigger"]:disabled {
+  opacity: var(--hm-collapsible-disabled-opacity);
+  cursor: not-allowed;
+}
+/* An icon placed directly in a plain trigger follows the open state. */
+[data-slot="collapsible-trigger"] > svg {
+  width: var(--hm-collapsible-icon-size);
+  height: var(--hm-collapsible-icon-size);
+  color: var(--hm-collapsible-icon-color);
+  flex-shrink: 0;
+}
+[data-slot="collapsible-trigger"][data-state="open"] > svg {
+  transform: rotate(180deg);
+}
+
+[data-slot="collapsible-content"] {
+  padding-top: var(--hm-collapsible-content-gap);
+  color: var(--hm-collapsible-content-text);
+  font-size: var(--hm-collapsible-content-font-size);
+  line-height: var(--hm-collapsible-content-line-height);
+  overflow-wrap: anywhere;
+}
diff --git a/packages/ui/src/theme/combobox.css b/packages/ui/src/theme/combobox.css
new file mode 100644
index 0000000..7a914ad
--- /dev/null
+++ b/packages/ui/src/theme/combobox.css
@@ -0,0 +1,144 @@
+/* Combobox mapping. ui-viz has no Combobox spec (it has a Select and a Search Field, both different components), so these are current
+   HM values built from the HM Semantic / Primitive tokens. Combobox is a composition (Popover + Command): the popup surface comes
+   from Popover, the search input and list from Command. Scoped popup overrides align the selection language with Select without
+   changing either shared component. The popup is as wide as the trigger (an inline style sets its width / padding).
+   The trigger look is in `@layer components` so a consumer's utility classes (width, height) still win. Nothing here references
+   Button / Input / Select / Popover / Command tokens. */
+:root, [data-hm-theme] {
+  /* Inner heights; the 1px border is added around them (outer 34 / 44), like the Select trigger. */
+  --hm-combobox-height-md: 32px;
+  --hm-combobox-height-lg: 42px;
+  --hm-combobox-border-width: 1px;
+  --hm-combobox-padding-x: 12px;
+  --hm-combobox-gap: 12px;
+  --hm-combobox-radius: var(--hm-radius-control-md);
+  --hm-combobox-font-size-md: 14px;
+  --hm-combobox-line-height-md: 20px;
+  --hm-combobox-font-size-lg: 16px;
+  --hm-combobox-line-height-lg: 24px;
+
+  --hm-combobox-background: var(--hm-sem-bg-surface);
+  --hm-combobox-text: var(--hm-sem-fg-primary);
+  --hm-combobox-placeholder: var(--hm-sem-fg-placeholder);
+  --hm-combobox-border-color: var(--hm-sem-stroke-input-default);
+  --hm-combobox-focus-border-color: var(--hm-sem-stroke-input-focus);
+  --hm-combobox-seam-color: var(--hm-sem-stroke-input-default);
+  --hm-combobox-icon-size: 18px;
+  --hm-combobox-icon-color: var(--hm-sem-fg-secondary);
+  --hm-combobox-check-size: 16px;
+
+  --hm-combobox-popup-radius: var(--hm-radius-input);
+  --hm-combobox-popup-shadow: 0 2px 24px color-mix(in srgb, var(--hm-sem-palette-black) 12%, transparent);
+  --hm-combobox-option-state-background: var(--hm-sem-surface-highlight);
+  --hm-combobox-option-state-text: var(--accent-foreground);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-combobox-disabled-opacity: 0.6;
+}
+
+/* Share the connecting border via sideOffset=-1; only the seam uses the neutral stroke. */
+[data-slot="popover-content"][data-combobox-popup] {
+  border-color: var(--hm-combobox-focus-border-color);
+  border-radius: var(--hm-combobox-popup-radius);
+  box-shadow: var(--hm-combobox-popup-shadow);
+  --hm-combobox-option-font-size: var(--hm-combobox-font-size-lg);
+  --hm-combobox-option-line-height: var(--hm-combobox-line-height-lg);
+}
+[data-slot="popover-content"][data-combobox-popup][data-side="bottom"] {
+  border-radius: 0 0 var(--hm-combobox-popup-radius) var(--hm-combobox-popup-radius);
+  border-top-color: var(--hm-combobox-seam-color);
+}
+[data-slot="popover-content"][data-combobox-popup][data-side="top"] {
+  border-radius: var(--hm-combobox-popup-radius) var(--hm-combobox-popup-radius) 0 0;
+  border-bottom-color: var(--hm-combobox-seam-color);
+}
+[data-combobox-popup][data-size="medium"] {
+  --hm-combobox-option-font-size: var(--hm-combobox-font-size-md);
+  --hm-combobox-option-line-height: var(--hm-combobox-line-height-md);
+}
+[data-combobox-popup] [data-slot="command"] {
+  border-radius: inherit;
+}
+[data-combobox-popup] [data-slot="command-item"] {
+  /* Retain Command's 36px height, 12px horizontal padding and search layout. */
+  border-radius: 0;
+  font-size: var(--hm-combobox-option-font-size);
+  line-height: var(--hm-combobox-option-line-height);
+  font-weight: 400;
+}
+[data-combobox-popup] [data-slot="command-item"][data-selected="true"],
+[data-combobox-popup] [data-slot="command-item"][data-checked] {
+  background: var(--hm-combobox-option-state-background);
+  color: var(--hm-combobox-option-state-text);
+}
+
+@layer components {
+  [data-slot="combobox-trigger"] {
+    --hm-combobox-height: var(--hm-combobox-height-lg);
+    --hm-combobox-font-size: var(--hm-combobox-font-size-lg);
+    --hm-combobox-line-height: var(--hm-combobox-line-height-lg);
+    box-sizing: border-box;
+    min-width: 0; /* lets a long value truncate instead of widening a grid / flex parent */
+    max-width: 100%;
+    min-height: calc(var(--hm-combobox-height) + 2 * var(--hm-combobox-border-width));
+    gap: var(--hm-combobox-gap);
+    padding: 0 var(--hm-combobox-padding-x);
+    border: var(--hm-combobox-border-width) solid var(--hm-combobox-border-color);
+    border-radius: var(--hm-combobox-radius);
+    background: var(--hm-combobox-background);
+    color: var(--hm-combobox-text);
+    font-size: var(--hm-combobox-font-size);
+    line-height: var(--hm-combobox-line-height);
+    font-weight: 400;
+    cursor: pointer;
+  }
+  [data-slot="combobox-trigger"][data-size="medium"] {
+    --hm-combobox-height: var(--hm-combobox-height-md);
+    --hm-combobox-font-size: var(--hm-combobox-font-size-md);
+    --hm-combobox-line-height: var(--hm-combobox-line-height-md);
+  }
+  [data-slot="combobox-trigger"][data-empty] [data-slot="combobox-value"] {
+    color: var(--hm-combobox-placeholder);
+  }
+  [data-slot="combobox-value"] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-slot="combobox-icon"] {
+    flex-shrink: 0;
+    width: var(--hm-combobox-icon-size);
+    height: var(--hm-combobox-icon-size);
+    color: var(--hm-combobox-icon-color);
+  }
+  [data-slot="combobox-trigger"]:focus-visible,
+  [data-slot="combobox-trigger"][data-state="open"] {
+    border-color: var(--hm-combobox-focus-border-color);
+  }
+  [data-slot="combobox-trigger"][data-state="open"][data-side="bottom"] {
+    border-radius: var(--hm-combobox-radius) var(--hm-combobox-radius) 0 0;
+    border-bottom-color: var(--hm-combobox-seam-color);
+  }
+  [data-slot="combobox-trigger"][data-state="open"][data-side="top"] {
+    border-radius: 0 0 var(--hm-combobox-radius) var(--hm-combobox-radius);
+    border-top-color: var(--hm-combobox-seam-color);
+  }
+  [data-slot="combobox-trigger"]:disabled {
+    opacity: var(--hm-combobox-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  /* Items inside the popup: a long label is truncated and the check stays at the end. */
+  [data-slot="combobox-item-label"] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-slot="combobox-item-check"] {
+    margin-left: auto;
+    width: var(--hm-combobox-check-size);
+    height: var(--hm-combobox-check-size);
+  }
+}
diff --git a/packages/ui/src/theme/command.css b/packages/ui/src/theme/command.css
new file mode 100644
index 0000000..3a38578
--- /dev/null
+++ b/packages/ui/src/theme/command.css
@@ -0,0 +1,127 @@
+/* Command mapping. ui-viz has no Command spec (it has a Search Field / candidate list, a different component), so these are current
+   HM values built from the HM Semantic / Primitive tokens. cmdk keeps filtering, keyboard and ARIA; the highlighted item is
+   [data-selected="true"], a disabled one [data-disabled="true"]. The Command draws its own surface (white, radius) but no border or
+   shadow: it is meant to sit inside a container (Popover, Dialog) or a bordered box. Nothing references Input / Popover /
+   Dropdown Menu tokens. */
+:root, [data-hm-theme] {
+  --hm-command-background: var(--hm-sem-bg-surface);
+  --hm-command-text: var(--hm-sem-fg-primary);
+  --hm-command-radius: var(--hm-radius-container);
+
+  --hm-command-input-height: 40px;
+  --hm-command-input-padding-x: 12px;
+  --hm-command-input-gap: 8px;
+  --hm-command-input-font-size: 14px;
+  --hm-command-input-line-height: 20px;
+  --hm-command-input-placeholder: var(--hm-sem-fg-placeholder);
+  --hm-command-input-icon-size: 16px;
+  --hm-command-input-icon-color: var(--hm-sem-fg-secondary);
+  --hm-command-divider-color: var(--hm-sem-stroke-input-default);
+
+  --hm-command-list-max-height: 280px;
+  --hm-command-list-padding: 4px;
+
+  --hm-command-item-height: 36px;
+  --hm-command-item-padding-x: 12px;
+  --hm-command-item-gap: 8px;
+  --hm-command-item-radius: 2px;
+  --hm-command-item-font-size: 14px;
+  --hm-command-item-line-height: 20px;
+  --hm-command-highlight-background: var(--hm-sem-surface-highlight);
+  --hm-command-highlight-text: var(--accent-foreground);
+
+  --hm-command-group-label-color: var(--hm-sem-fg-secondary);
+  --hm-command-group-label-font-size: 12px;
+  --hm-command-group-label-line-height: 18px;
+  --hm-command-group-label-font-weight: 500;
+  --hm-command-shortcut-color: var(--hm-sem-fg-secondary);
+  --hm-command-shortcut-font-size: 12px;
+
+  --hm-command-empty-padding-y: 24px;
+  --hm-command-empty-color: var(--hm-sem-fg-secondary);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-command-disabled-opacity: 0.6;
+}
+
+[data-slot="command"] {
+  box-sizing: border-box;
+  border-radius: var(--hm-command-radius);
+  background: var(--hm-command-background);
+  color: var(--hm-command-text);
+}
+
+[data-slot="command-input-wrapper"] {
+  box-sizing: border-box;
+  height: var(--hm-command-input-height);
+  gap: var(--hm-command-input-gap);
+  padding: 0 var(--hm-command-input-padding-x);
+  border-bottom: 1px solid var(--hm-command-divider-color);
+}
+[data-slot="command-input-wrapper"] > svg {
+  width: var(--hm-command-input-icon-size);
+  height: var(--hm-command-input-icon-size);
+  color: var(--hm-command-input-icon-color);
+}
+[data-slot="command-input"] {
+  height: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: var(--hm-command-input-font-size);
+  line-height: var(--hm-command-input-line-height);
+}
+[data-slot="command-input"]::placeholder {
+  color: var(--hm-command-input-placeholder);
+}
+
+[data-slot="command-list"] {
+  max-height: var(--hm-command-list-max-height);
+  padding: var(--hm-command-list-padding);
+}
+[data-slot="command-empty"] {
+  padding: var(--hm-command-empty-padding-y) 12px;
+  color: var(--hm-command-empty-color);
+  font-size: var(--hm-command-item-font-size);
+  line-height: var(--hm-command-item-line-height);
+  text-align: center;
+}
+[data-slot="command-separator"] {
+  margin: var(--hm-command-list-padding) calc(-1 * var(--hm-command-list-padding));
+  background: var(--hm-command-divider-color);
+}
+
+[data-slot="command-group"] [cmdk-group-heading] {
+  padding: 6px var(--hm-command-item-padding-x);
+  color: var(--hm-command-group-label-color);
+  font-size: var(--hm-command-group-label-font-size);
+  line-height: var(--hm-command-group-label-line-height);
+  font-weight: var(--hm-command-group-label-font-weight);
+}
+
+[data-slot="command-item"] {
+  box-sizing: border-box;
+  min-height: var(--hm-command-item-height);
+  gap: var(--hm-command-item-gap);
+  padding: 0 var(--hm-command-item-padding-x);
+  border-radius: var(--hm-command-item-radius);
+  font-size: var(--hm-command-item-font-size);
+  line-height: var(--hm-command-item-line-height);
+}
+/* Highlighted: pointer hover and keyboard focus share cmdk's data-selected. */
+[data-slot="command-item"][data-selected="true"] {
+  background: var(--hm-command-highlight-background);
+  color: var(--hm-command-highlight-text);
+}
+[data-slot="command-item"][data-disabled="true"] {
+  opacity: var(--hm-command-disabled-opacity);
+  cursor: not-allowed;
+}
+[data-slot="command-shortcut"] {
+  color: var(--hm-command-shortcut-color);
+  font-size: var(--hm-command-shortcut-font-size);
+  letter-spacing: 0.05em;
+}
+[data-slot="command-item"][data-selected="true"] [data-slot="command-shortcut"] {
+  color: inherit;
+}
diff --git a/packages/ui/src/theme/context-menu.css b/packages/ui/src/theme/context-menu.css
new file mode 100644
index 0000000..5b5ac03
--- /dev/null
+++ b/packages/ui/src/theme/context-menu.css
@@ -0,0 +1,121 @@
+/* Context Menu mapping. Same anchored floating menu family as Dropdown Menu, opened by pointer context (right click / context key / long press).
+   Surface values come from the Floating Semantic (--hm-sem-floating-*); item and text values are current HM values. Radix state attributes
+   (data-highlighted, data-disabled, data-state) drive the states. Tokens are this component's own and never reference --hm-dropdown-menu-*. */
+:root, [data-hm-theme] {
+  --hm-context-menu-background: var(--hm-sem-floating-background);
+  --hm-context-menu-text: var(--hm-sem-fg-primary);
+  --hm-context-menu-border-width: var(--hm-sem-floating-border-width);
+  --hm-context-menu-border-color: var(--hm-sem-floating-border-color);
+  --hm-context-menu-radius: var(--hm-sem-floating-radius);
+  --hm-context-menu-shadow: var(--hm-sem-floating-shadow);
+  --hm-context-menu-padding: 4px;
+
+  --hm-context-menu-item-height: 36px;
+  --hm-context-menu-item-padding-x: 12px;
+  --hm-context-menu-item-gap: 8px;
+  --hm-context-menu-item-radius: 2px;
+  --hm-context-menu-font-size: 14px;
+  --hm-context-menu-line-height: 20px;
+  --hm-context-menu-font-weight: 400;
+
+  /* Highlighted (hover and keyboard) uses the same face as the Select option: the shadcn accent. */
+  --hm-context-menu-highlight-background: var(--hm-sem-surface-highlight);
+  --hm-context-menu-highlight-text: var(--accent-foreground);
+  --hm-context-menu-destructive-text: var(--hm-sem-action-destructive);
+  --hm-context-menu-destructive-highlight-background: var(--hm-color-action-destructive-hover);
+
+  --hm-context-menu-label-color: var(--hm-sem-fg-secondary);
+  --hm-context-menu-label-font-size: 12px;
+  --hm-context-menu-label-line-height: 18px;
+  --hm-context-menu-label-font-weight: 500;
+  --hm-context-menu-shortcut-color: var(--hm-sem-fg-secondary);
+  --hm-context-menu-shortcut-font-size: 12px;
+  --hm-context-menu-separator-color: var(--hm-sem-stroke-input-default);
+
+  /* Check / radio indicator column at the start of the item. */
+  --hm-context-menu-indicator-size: 16px;
+  --hm-context-menu-radio-dot-size: 8px;
+}
+
+[data-slot="context-menu-content"],
+[data-slot="context-menu-sub-content"] {
+  box-sizing: border-box;
+  padding: var(--hm-context-menu-padding);
+  border: var(--hm-context-menu-border-width) solid var(--hm-context-menu-border-color);
+  border-radius: var(--hm-context-menu-radius);
+  background: var(--hm-context-menu-background);
+  color: var(--hm-context-menu-text);
+  box-shadow: var(--hm-context-menu-shadow);
+  font-size: var(--hm-context-menu-font-size);
+  line-height: var(--hm-context-menu-line-height);
+  font-weight: var(--hm-context-menu-font-weight);
+}
+
+[data-slot="context-menu-item"],
+[data-slot="context-menu-checkbox-item"],
+[data-slot="context-menu-radio-item"],
+[data-slot="context-menu-sub-trigger"] {
+  box-sizing: border-box;
+  min-height: var(--hm-context-menu-item-height);
+  gap: var(--hm-context-menu-item-gap);
+  padding: 0 var(--hm-context-menu-item-padding-x);
+  border-radius: var(--hm-context-menu-item-radius);
+}
+/* Checkbox / radio items reserve the indicator column; `inset` aligns plain items to the same text start. */
+[data-slot="context-menu-checkbox-item"],
+[data-slot="context-menu-radio-item"],
+[data-slot="context-menu-item"][data-inset],
+[data-slot="context-menu-sub-trigger"][data-inset] {
+  padding-left: calc(var(--hm-context-menu-item-padding-x) + var(--hm-context-menu-indicator-size) + var(--hm-context-menu-item-gap));
+}
+[data-slot="context-menu-item-indicator"] {
+  left: var(--hm-context-menu-item-padding-x);
+  width: var(--hm-context-menu-indicator-size);
+  height: var(--hm-context-menu-indicator-size);
+}
+[data-slot="context-menu-radio-dot"] {
+  width: var(--hm-context-menu-radio-dot-size);
+  height: var(--hm-context-menu-radio-dot-size);
+}
+
+/* Highlighted: Radix sets data-highlighted for pointer hover and keyboard focus alike. An open sub menu keeps its trigger highlighted. */
+[data-slot="context-menu-item"][data-highlighted],
+[data-slot="context-menu-checkbox-item"][data-highlighted],
+[data-slot="context-menu-radio-item"][data-highlighted],
+[data-slot="context-menu-sub-trigger"][data-highlighted],
+[data-slot="context-menu-sub-trigger"][data-state="open"] {
+  background: var(--hm-context-menu-highlight-background);
+  color: var(--hm-context-menu-highlight-text);
+}
+[data-slot="context-menu-item"][data-variant="destructive"] {
+  color: var(--hm-context-menu-destructive-text);
+}
+[data-slot="context-menu-item"][data-variant="destructive"][data-highlighted] {
+  background: var(--hm-context-menu-destructive-highlight-background);
+  color: var(--hm-context-menu-destructive-text);
+}
+
+[data-slot="context-menu-label"] {
+  padding: 6px var(--hm-context-menu-item-padding-x);
+  color: var(--hm-context-menu-label-color);
+  font-size: var(--hm-context-menu-label-font-size);
+  line-height: var(--hm-context-menu-label-line-height);
+  font-weight: var(--hm-context-menu-label-font-weight);
+}
+[data-slot="context-menu-label"][data-inset] {
+  padding-left: calc(var(--hm-context-menu-item-padding-x) + var(--hm-context-menu-indicator-size) + var(--hm-context-menu-item-gap));
+}
+[data-slot="context-menu-separator"] {
+  margin: var(--hm-context-menu-padding) calc(-1 * var(--hm-context-menu-padding));
+  background: var(--hm-context-menu-separator-color);
+}
+[data-slot="context-menu-shortcut"] {
+  color: var(--hm-context-menu-shortcut-color);
+  font-size: var(--hm-context-menu-shortcut-font-size);
+  letter-spacing: 0.05em;
+}
+[data-slot="context-menu-item"][data-highlighted] [data-slot="context-menu-shortcut"],
+[data-slot="context-menu-checkbox-item"][data-highlighted] [data-slot="context-menu-shortcut"],
+[data-slot="context-menu-radio-item"][data-highlighted] [data-slot="context-menu-shortcut"] {
+  color: inherit;
+}
diff --git a/packages/ui/src/theme/contract.ts b/packages/ui/src/theme/contract.ts
new file mode 100644
index 0000000..22a7c89
--- /dev/null
+++ b/packages/ui/src/theme/contract.ts
@@ -0,0 +1,106 @@
+import { runtimeThemeDefaults } from "./default-values.generated"
+
+/** Public Runtime Theme contract v1. Component mappings and derived CSS are private. */
+export const runtimeThemeContract = {
+  "color.bg.content": { property: "--hm-sem-bg-content", defaultValue: runtimeThemeDefaults["--hm-sem-bg-content"], type: "color" },
+  "color.bg.surface": { property: "--hm-sem-bg-surface", defaultValue: runtimeThemeDefaults["--hm-sem-bg-surface"], type: "color" },
+  "color.fg.primary": { property: "--hm-sem-fg-primary", defaultValue: runtimeThemeDefaults["--hm-sem-fg-primary"], type: "color" },
+  "color.fg.secondary": { property: "--hm-sem-fg-secondary", defaultValue: runtimeThemeDefaults["--hm-sem-fg-secondary"], type: "color" },
+  "color.fg.placeholder": { property: "--hm-sem-fg-placeholder", defaultValue: runtimeThemeDefaults["--hm-sem-fg-placeholder"], type: "color" },
+  "color.action.primary": { property: "--hm-sem-action-primary", defaultValue: runtimeThemeDefaults["--hm-sem-action-primary"], type: "color" },
+  "color.action.cancel": { property: "--hm-sem-action-cancel", defaultValue: runtimeThemeDefaults["--hm-sem-action-cancel"], type: "color" },
+  "color.action.destructive": { property: "--hm-sem-action-destructive", defaultValue: runtimeThemeDefaults["--hm-sem-action-destructive"], type: "color" },
+  "color.stroke.default": { property: "--hm-sem-stroke-default", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-default"], type: "color" },
+  "color.stroke.input.default": { property: "--hm-sem-stroke-input-default", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-input-default"], type: "color" },
+  "color.stroke.input.focus": { property: "--hm-sem-stroke-input-focus", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-input-focus"], type: "color" },
+  "color.bg.brand.stop.0": { property: "--hm-sem-brand-bg-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-0"], type: "color" },
+  "color.bg.brand.stop.12": { property: "--hm-sem-brand-bg-stop-12", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-12"], type: "color" },
+  "color.bg.brand.stop.42": { property: "--hm-sem-brand-bg-stop-42", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-42"], type: "color" },
+  "color.bg.brand.stop.78": { property: "--hm-sem-brand-bg-stop-78", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-78"], type: "color" },
+  "color.bg.brand.stop.100": { property: "--hm-sem-brand-bg-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-brand-bg-stop-100"], type: "color" },
+  "surface.action.primary.stop.0": { property: "--hm-sem-action-surface-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-0"], type: "color" },
+  "surface.action.primary.stop.30": { property: "--hm-sem-action-surface-stop-30", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-30"], type: "color" },
+  "surface.action.primary.stop.65": { property: "--hm-sem-action-surface-stop-65", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-65"], type: "color" },
+  "surface.action.primary.stop.100": { property: "--hm-sem-action-surface-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-action-surface-stop-100"], type: "color" },
+  "surface.action.primary.border.stop.0": { property: "--hm-sem-action-border-stop-0", defaultValue: runtimeThemeDefaults["--hm-sem-action-border-stop-0"], type: "color" },
+  "surface.action.primary.border.stop.50": { property: "--hm-sem-action-border-stop-50", defaultValue: runtimeThemeDefaults["--hm-sem-action-border-stop-50"], type: "color" },
+  "surface.action.primary.border.stop.100": { property: "--hm-sem-action-border-stop-100", defaultValue: runtimeThemeDefaults["--hm-sem-action-border-stop-100"], type: "color" },
+  "radius.input.default": { property: "--hm-radius-input", defaultValue: runtimeThemeDefaults["--hm-radius-input"], type: "radius" },
+  "radius.container.default": { property: "--hm-radius-container", defaultValue: runtimeThemeDefaults["--hm-radius-container"], type: "radius" },
+  "color.state.active": { property: "--hm-sem-state-active", defaultValue: runtimeThemeDefaults["--hm-sem-state-active"], type: "color" },
+  "color.on.state.active": { property: "--hm-sem-on-state-active", defaultValue: runtimeThemeDefaults["--hm-sem-on-state-active"], type: "color" },
+  "color.fg.inverse": { property: "--hm-sem-on-action-primary", defaultValue: runtimeThemeDefaults["--hm-sem-on-action-primary"], type: "color" },
+  "color.bg.subtle": { property: "--hm-sem-bg-subtle", defaultValue: runtimeThemeDefaults["--hm-sem-bg-subtle"], type: "color" },
+  "color.accent": { property: "--hm-sem-accent", defaultValue: runtimeThemeDefaults["--hm-sem-accent"], type: "color" },
+  "color.on.accent": { property: "--hm-sem-on-accent", defaultValue: runtimeThemeDefaults["--hm-sem-on-accent"], type: "color" },
+  "color.palette.green-light-4": { property: "--hm-sem-palette-green-light-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-4"], type: "color" },
+  "color.palette.green-light-3": { property: "--hm-sem-palette-green-light-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-3"], type: "color" },
+  "color.palette.green-light-2": { property: "--hm-sem-palette-green-light-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-2"], type: "color" },
+  "color.palette.green-light-1": { property: "--hm-sem-palette-green-light-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-light-1"], type: "color" },
+  "color.palette.green-default": { property: "--hm-sem-palette-green-default", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-default"], type: "color" },
+  "color.palette.green-dark-1": { property: "--hm-sem-palette-green-dark-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-dark-1"], type: "color" },
+  "color.palette.green-dark-2": { property: "--hm-sem-palette-green-dark-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-dark-2"], type: "color" },
+  "color.palette.brown-light-2": { property: "--hm-sem-palette-brown-light-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-light-2"], type: "color" },
+  "color.palette.brown-light-1": { property: "--hm-sem-palette-brown-light-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-light-1"], type: "color" },
+  "color.palette.brown-default": { property: "--hm-sem-palette-brown-default", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-default"], type: "color" },
+  "color.palette.brown-dark-1": { property: "--hm-sem-palette-brown-dark-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-dark-1"], type: "color" },
+  "color.palette.brown-light-4": { property: "--hm-sem-palette-brown-light-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-light-4"], type: "color" },
+  "color.palette.orange-light-4": { property: "--hm-sem-palette-orange-light-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-4"], type: "color" },
+  "color.palette.orange-default": { property: "--hm-sem-palette-orange-default", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-default"], type: "color" },
+  "color.palette.warm-neutral-light": { property: "--hm-sem-palette-warm-neutral-light", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-light"], type: "color" },
+  "color.palette.warm-neutral-mid": { property: "--hm-sem-palette-warm-neutral-mid", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-mid"], type: "color" },
+  "color.palette.warm-neutral-dark": { property: "--hm-sem-palette-warm-neutral-dark", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-dark"], type: "color" },
+  "color.palette.beige-light": { property: "--hm-sem-palette-beige-light", defaultValue: runtimeThemeDefaults["--hm-sem-palette-beige-light"], type: "color" },
+  "color.palette.red-danger": { property: "--hm-sem-palette-red-danger", defaultValue: runtimeThemeDefaults["--hm-sem-palette-red-danger"], type: "color" },
+  "color.palette.white": { property: "--hm-sem-palette-white", defaultValue: runtimeThemeDefaults["--hm-sem-palette-white"], type: "color" },
+  "color.palette.black": { property: "--hm-sem-palette-black", defaultValue: runtimeThemeDefaults["--hm-sem-palette-black"], type: "color" },
+  "color.palette.neutral-gray-500": { property: "--hm-sem-palette-neutral-gray-500", defaultValue: runtimeThemeDefaults["--hm-sem-palette-neutral-gray-500"], type: "color" },
+  "color.palette.green-tone-1": { property: "--hm-sem-palette-green-tone-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-1"], type: "color" },
+  "color.palette.green-tone-2": { property: "--hm-sem-palette-green-tone-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-2"], type: "color" },
+  "color.palette.green-tone-3": { property: "--hm-sem-palette-green-tone-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-3"], type: "color" },
+  "color.palette.green-tone-4": { property: "--hm-sem-palette-green-tone-4", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tone-4"], type: "color" },
+  "color.palette.warm-neutral-pale": { property: "--hm-sem-palette-warm-neutral-pale", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-pale"], type: "color" },
+  "color.palette.warm-neutral-secondary": { property: "--hm-sem-palette-warm-neutral-secondary", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-secondary"], type: "color" },
+  "color.palette.warm-neutral-muted": { property: "--hm-sem-palette-warm-neutral-muted", defaultValue: runtimeThemeDefaults["--hm-sem-palette-warm-neutral-muted"], type: "color" },
+  "color.palette.green-tint": { property: "--hm-sem-palette-green-tint", defaultValue: runtimeThemeDefaults["--hm-sem-palette-green-tint"], type: "color" },
+  "color.palette.yellow-accent": { property: "--hm-sem-palette-yellow-accent", defaultValue: runtimeThemeDefaults["--hm-sem-palette-yellow-accent"], type: "color" },
+  "color.palette.brown-deep": { property: "--hm-sem-palette-brown-deep", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-deep"], type: "color" },
+  "color.palette.brown-highlight": { property: "--hm-sem-palette-brown-highlight", defaultValue: runtimeThemeDefaults["--hm-sem-palette-brown-highlight"], type: "color" },
+  "color.palette.orange-light": { property: "--hm-sem-palette-orange-light", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light"], type: "color" },
+  "color.palette.orange-mid": { property: "--hm-sem-palette-orange-mid", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-mid"], type: "color" },
+  "color.palette.orange-dark": { property: "--hm-sem-palette-orange-dark", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark"], type: "color" },
+  "color.palette.orange-deep": { property: "--hm-sem-palette-orange-deep", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-deep"], type: "color" },
+  "color.palette.orange-border": { property: "--hm-sem-palette-orange-border", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-border"], type: "color" },
+  "color.palette.orange-border-deep": { property: "--hm-sem-palette-orange-border-deep", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-border-deep"], type: "color" },
+  "color.palette.gray": { property: "--hm-sem-palette-gray", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray"], type: "color" },
+  "color.palette.gray-dark": { property: "--hm-sem-palette-gray-dark", defaultValue: runtimeThemeDefaults["--hm-sem-palette-gray-dark"], type: "color" },
+  "color.palette.indicator": { property: "--hm-sem-palette-indicator", defaultValue: runtimeThemeDefaults["--hm-sem-palette-indicator"], type: "color" },
+} as const
+
+export type RuntimeThemeToken = keyof typeof runtimeThemeContract
+export type RuntimeTheme = { schemaVersion: 1; tokens: Partial<Record<RuntimeThemeToken, string>> }
+export const defaultRuntimeTheme: RuntimeTheme = {
+  schemaVersion: 1,
+  tokens: Object.fromEntries(Object.entries(runtimeThemeContract).map(([key, value]) => [key, value.defaultValue])),
+}
+
+export const runtimeGradientGroups = [
+  [
+    "color.bg.brand.stop.0",
+    "color.bg.brand.stop.12",
+    "color.bg.brand.stop.42",
+    "color.bg.brand.stop.78",
+    "color.bg.brand.stop.100"
+  ],
+  [
+    "surface.action.primary.stop.0",
+    "surface.action.primary.stop.30",
+    "surface.action.primary.stop.65",
+    "surface.action.primary.stop.100"
+  ],
+  [
+    "surface.action.primary.border.stop.0",
+    "surface.action.primary.border.stop.50",
+    "surface.action.primary.border.stop.100"
+  ]
+] as const
diff --git a/packages/ui/src/theme/dashboard-layout.css b/packages/ui/src/theme/dashboard-layout.css
new file mode 100644
index 0000000..2424a7d
--- /dev/null
+++ b/packages/ui/src/theme/dashboard-layout.css
@@ -0,0 +1,149 @@
+/* Dashboard Mode owns its internal navigation and scroll frame. No GNB/LNB CSS variable or responsive dependency. */
+:root, [data-hm-theme] {
+  --hm-dashboard-height: 100dvh;
+  --hm-dashboard-background: var(--hm-sem-palette-green-light-2);
+  --hm-dashboard-content-background: var(--hm-sem-bg-content);
+  --hm-dashboard-content-top-radius: 12px;
+  --hm-dashboard-content-side-radius: 18px;
+  --hm-dashboard-sidebar-width: 272px;
+  --hm-dashboard-min-width: 960px;
+  --hm-dashboard-header-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
+  --hm-dashboard-nav-text: var(--hm-sem-on-action-primary);
+  --hm-dashboard-nav-text-secondary: var(--hm-sem-palette-green-tint);
+  --hm-dashboard-nav-text-stroke-width: 1px;
+  --hm-dashboard-nav-text-stroke-color: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
+  --hm-dashboard-nav-focus-outline: 2px solid var(--hm-sem-on-action-primary);
+  --hm-dashboard-padding: 34px;
+  --hm-dashboard-gap: 24px;
+  --hm-dashboard-content-shadow-top: 0 -8px 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
+  --hm-dashboard-content-shadow-side: -8px 0 18px color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 18%, transparent);
+}
+
+[data-slot="dashboard-scroll"] {
+  box-sizing: border-box;
+  height: var(--hm-dashboard-height);
+  min-width: 0;
+  max-width: 100%;
+  overflow: auto;
+}
+[data-slot="dashboard-layout"] {
+  box-sizing: border-box;
+  height: 100%;
+  /* 4 × 200px KPI cards + 3 × 24px gaps + 2 × 34px padding + 20px scrollbar allowance.
+     Also fits the measured 549px compact status bar, its wings and the 125px brand without overlap. */
+  min-width: var(--hm-dashboard-min-width, 960px);
+}
+[data-slot="dashboard-layout"][data-sidebar] {
+  min-width: calc(var(--hm-dashboard-min-width) + var(--hm-dashboard-sidebar-width));
+}
+[data-slot="dashboard-body"] {
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  background: var(--hm-dashboard-background);
+}
+[data-slot="dashboard-header"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  height: 48px;
+  padding: 0 20px;
+  background: var(--hm-dashboard-header-background);
+  color: var(--hm-dashboard-nav-text);
+}
+[data-slot="dashboard-body"] > [data-slot="dashboard-sidebar"] {
+  flex: none;
+  width: var(--hm-dashboard-sidebar-width);
+  min-height: 0;
+  padding: 28px 20px 22px;
+  gap: 22px;
+  background: linear-gradient(90deg, var(--hm-sem-action-primary) 0%, var(--hm-sem-palette-green-light-1) 30%, var(--hm-sem-palette-green-light-2) 50%, var(--hm-sem-palette-green-light-3) 90%, var(--hm-sem-palette-green-light-2) 100%);
+  color: var(--hm-dashboard-nav-text);
+}
+[data-slot="dashboard-sidebar"] > nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+[data-slot="dashboard-sidebar"] [data-slot="button"] {
+  justify-content: flex-start;
+  width: 100%;
+  min-height: 44px;
+  height: auto;
+  white-space: normal;
+  color: var(--hm-dashboard-nav-text);
+}
+[data-slot="dashboard-sidebar"] [data-slot="button"]:hover {
+  background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
+}
+[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] {
+  background: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+}
+[data-slot="dashboard-sidebar"] [data-slot="collapsible"][data-current] > [data-slot="button"] {
+  color: var(--hm-sem-palette-yellow-accent);
+}
+[data-slot="dashboard-sidebar"] [data-slot="button"][aria-expanded="true"] > svg {
+  transform: rotate(90deg);
+}
+[data-slot="dashboard-sidebar"] [aria-current="page"],
+[data-slot="dashboard-sidebar"] [aria-current="page"]:hover {
+  background: var(--hm-dashboard-content-background);
+  color: var(--hm-sem-action-primary);
+}
+[data-slot="dashboard-sidebar"] [data-slot="button"]:focus-visible {
+  outline: var(--hm-dashboard-nav-focus-outline);
+}
+[data-slot="dashboard-sidebar"] [aria-current="page"]:focus-visible {
+  outline-color: var(--hm-sem-action-primary);
+}
+
+/* Content surface and vertical scroll container, positioned after Dashboard's internal navigation. */
+[data-slot="dashboard-main"] {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+  padding: var(--hm-dashboard-padding);
+  overflow-x: auto;
+  overflow-y: auto;
+  /* Let horizontal wheel/touch gestures chain to the outer Dashboard frame. */
+  overscroll-behavior-y: contain;
+  background: var(--hm-dashboard-content-background);
+}
+/* Dashboard header and sidebar use Dashboard-owned radii. */
+[data-slot="dashboard-layout"][data-header] [data-slot="dashboard-main"] {
+  border-radius: var(--hm-dashboard-content-top-radius) var(--hm-dashboard-content-top-radius) 0 0;
+  box-shadow: var(--hm-dashboard-content-shadow-top);
+}
+
+[data-slot="dashboard-content"] {
+  gap: var(--hm-dashboard-gap);
+  min-width: 0;
+}
+[data-slot="dashboard-content"] > * {
+  min-width: 0;
+}
+
+/* Preserve the desktop filter row inside the minimum-width frame, independent of the viewport's mobile Filter Bar rules. */
+[data-slot="dashboard-layout"] [data-slot="filter-bar"] {
+  flex-wrap: nowrap;
+}
+[data-slot="dashboard-layout"] [data-slot="filter-bar-search"] {
+  flex: 0 0 var(--hm-filter-bar-search-width);
+}
+[data-slot="dashboard-layout"] [data-slot="filter-bar"] > :is([data-slot="select-trigger"], [data-slot="combobox-trigger"], [data-slot="date-picker-trigger"], [data-slot="input"]) {
+  flex: 0 0 var(--hm-filter-bar-control-width);
+  width: var(--hm-filter-bar-control-width);
+}
+[data-slot="dashboard-layout"] [data-slot="filter-bar-actions"] {
+  flex: 0 0 auto;
+}
+
+/* The sidebar remains inside the Dashboard minimum-width frame at every viewport width. */
+[data-slot="dashboard-layout"][data-sidebar] [data-slot="dashboard-main"] {
+  border-radius: var(--hm-dashboard-content-side-radius) 0 0 var(--hm-dashboard-content-side-radius);
+  box-shadow: var(--hm-dashboard-content-shadow-side);
+}
diff --git a/packages/ui/src/theme/data-table.css b/packages/ui/src/theme/data-table.css
new file mode 100644
index 0000000..a319c9a
--- /dev/null
+++ b/packages/ui/src/theme/data-table.css
@@ -0,0 +1,76 @@
+/* Data Table pattern: wrappers around the Table primitive. Header / cell / row looks are src/theme/table.css; Checkbox, Pagination, Select,
+   Dropdown Menu, Button and Skeleton keep their own tokens. Only the footer layout, summary text, sort button, empty and loading cells are here. */
+:root, [data-hm-theme] {
+  --hm-data-table-footer-gap: 12px;
+  --hm-data-table-footer-padding-top: 12px;
+  --hm-data-table-summary-color: var(--hm-sem-fg-secondary);
+  --hm-data-table-summary-font-size: 13px;
+  --hm-data-table-sort-gap: 4px;
+  --hm-data-table-sort-icon-size: 14px;
+  --hm-data-table-sort-active-color: var(--hm-sem-palette-green-light-3);
+  --hm-data-table-empty-padding-y: 48px;
+  --hm-data-table-empty-color: var(--hm-sem-fg-secondary);
+  --hm-data-table-skeleton-height: 16px;
+}
+
+/* min-width 0 lets the Table container scroll sideways inside a grid / flex parent instead of widening the page. */
+[data-slot="data-table"] {
+  min-width: 0;
+}
+
+[data-slot="data-table-footer"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--hm-data-table-footer-gap);
+  padding-top: var(--hm-data-table-footer-padding-top);
+}
+[data-slot="data-table-summary"] {
+  margin: 0;
+  margin-right: auto;
+  color: var(--hm-data-table-summary-color);
+  font-size: var(--hm-data-table-summary-font-size);
+}
+[data-slot="data-table-page-size"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--hm-data-table-summary-color);
+  font-size: var(--hm-data-table-summary-font-size);
+}
+[data-slot="data-table-footer"] [data-slot="data-table-pagination"] {
+  width: auto;
+  margin: 0;
+}
+
+[data-slot="data-table-sort"] {
+  gap: var(--hm-data-table-sort-gap);
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+[data-slot="data-table-sort"] svg {
+  width: var(--hm-data-table-sort-icon-size);
+  height: var(--hm-data-table-sort-icon-size);
+  opacity: 0.6;
+}
+[data-slot="data-table-sort"][data-sorted] svg {
+  opacity: 1;
+  color: var(--hm-data-table-sort-active-color);
+}
+[data-slot="data-table-sort"]:focus-visible {
+  outline: 2px solid var(--hm-sem-stroke-input-focus);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+[data-slot="data-table-empty"] {
+  padding-top: var(--hm-data-table-empty-padding-y);
+  padding-bottom: var(--hm-data-table-empty-padding-y);
+  text-align: center;
+  color: var(--hm-data-table-empty-color);
+}
+[data-slot="data-table-skeleton"] {
+  height: var(--hm-data-table-skeleton-height);
+  width: 100%;
+}
diff --git a/packages/ui/src/theme/date-picker.css b/packages/ui/src/theme/date-picker.css
new file mode 100644
index 0000000..a08260d
--- /dev/null
+++ b/packages/ui/src/theme/date-picker.css
@@ -0,0 +1,89 @@
+/* Date Picker mapping. ui-viz lists Date Picker by name only (no spec), so these are current HM values built from the HM Semantic /
+   Primitive tokens. Date Picker is a composition (Popover + Calendar): the popup surface comes from Popover and the calendar from
+   Calendar, so only the trigger (a field, in the two Select sizes) is styled here. The Popover padding / width are overridden per
+   instance through an inline style in the component (the popup hugs the Calendar, which has its own padding).
+   The trigger look is in `@layer components` so a consumer's utility classes (width, height) still win. Nothing here references
+   Button / Input / Select / Popover tokens. */
+:root, [data-hm-theme] {
+  /* Inner heights; the 1px border is added around them (outer 34 / 44), like the Select trigger. */
+  --hm-date-picker-height-md: 32px;
+  --hm-date-picker-height-lg: 42px;
+  --hm-date-picker-border-width: 1px;
+  --hm-date-picker-padding-x: 12px;
+  --hm-date-picker-gap: 12px;
+  --hm-date-picker-radius: var(--hm-radius-control-md);
+  --hm-date-picker-font-size-md: 14px;
+  --hm-date-picker-line-height-md: 20px;
+  --hm-date-picker-font-size-lg: 16px;
+  --hm-date-picker-line-height-lg: 24px;
+
+  --hm-date-picker-background: var(--hm-sem-bg-surface);
+  --hm-date-picker-text: var(--hm-sem-fg-primary);
+  --hm-date-picker-placeholder: var(--hm-sem-fg-placeholder);
+  --hm-date-picker-border-color: var(--hm-sem-stroke-input-default);
+  --hm-date-picker-focus-border-color: var(--hm-sem-stroke-input-focus);
+  --hm-date-picker-icon-size: 18px;
+  --hm-date-picker-icon-color: var(--hm-sem-fg-secondary);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-date-picker-disabled-opacity: 0.6;
+}
+
+@layer components {
+  [data-slot="date-picker-trigger"] {
+    --hm-date-picker-height: var(--hm-date-picker-height-lg);
+    --hm-date-picker-font-size: var(--hm-date-picker-font-size-lg);
+    --hm-date-picker-line-height: var(--hm-date-picker-line-height-lg);
+    box-sizing: border-box;
+    min-width: 0; /* lets a long value truncate instead of widening a grid / flex parent */
+    max-width: 100%;
+    min-height: calc(var(--hm-date-picker-height) + 2 * var(--hm-date-picker-border-width));
+    gap: var(--hm-date-picker-gap);
+    padding: 0 var(--hm-date-picker-padding-x);
+    border: var(--hm-date-picker-border-width) solid var(--hm-date-picker-border-color);
+    border-radius: var(--hm-date-picker-radius);
+    background: var(--hm-date-picker-background);
+    color: var(--hm-date-picker-text);
+    font-size: var(--hm-date-picker-font-size);
+    line-height: var(--hm-date-picker-line-height);
+    font-weight: 400;
+    cursor: pointer;
+  }
+  [data-slot="date-picker-trigger"][data-size="medium"] {
+    --hm-date-picker-height: var(--hm-date-picker-height-md);
+    --hm-date-picker-font-size: var(--hm-date-picker-font-size-md);
+    --hm-date-picker-line-height: var(--hm-date-picker-line-height-md);
+  }
+  [data-slot="date-picker-trigger"][data-empty] [data-slot="date-picker-value"] {
+    color: var(--hm-date-picker-placeholder);
+  }
+  [data-slot="date-picker-value"] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-slot="date-picker-icon"] {
+    flex-shrink: 0;
+    width: var(--hm-date-picker-icon-size);
+    height: var(--hm-date-picker-icon-size);
+    color: var(--hm-date-picker-icon-color);
+  }
+  /* Focus and open: the whole outline turns to the focus color (no ring, like the Input / Select focus). */
+  [data-slot="date-picker-trigger"]:focus-visible,
+  [data-slot="date-picker-trigger"][data-state="open"] {
+    border-color: var(--hm-date-picker-focus-border-color);
+  }
+  /* Existing native aria-invalid is the source; Calendar selection/focus remains independent. */
+  [data-slot="date-picker-trigger"][aria-invalid="true"] {
+    border-color: var(--hm-sem-action-destructive);
+  }
+  [data-slot="date-picker-trigger"][aria-invalid="true"]:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+  }
+  [data-slot="date-picker-trigger"]:disabled {
+    opacity: var(--hm-date-picker-disabled-opacity);
+    cursor: not-allowed;
+  }
+}
diff --git a/packages/ui/src/theme/default-values.generated.ts b/packages/ui/src/theme/default-values.generated.ts
new file mode 100644
index 0000000..c36e9a8
--- /dev/null
+++ b/packages/ui/src/theme/default-values.generated.ts
@@ -0,0 +1,77 @@
+// Generated by npm run generate:theme-defaults. Do not edit.
+// Colors: themes/default.json; geometry/aliases: scripts/theme-templates.
+export const runtimeThemeDefaults = {
+  "--hm-sem-bg-content": "#f5f0e5",
+  "--hm-sem-bg-surface": "#ffffff",
+  "--hm-sem-fg-primary": "#0a221d",
+  "--hm-sem-fg-secondary": "#6e6759",
+  "--hm-sem-fg-placeholder": "#999999",
+  "--hm-sem-action-primary": "#123328",
+  "--hm-sem-action-cancel": "#6e6759",
+  "--hm-sem-action-destructive": "#d32f2f",
+  "--hm-sem-stroke-default": "#9a9284",
+  "--hm-sem-stroke-input-default": "#dedbd2",
+  "--hm-sem-stroke-input-focus": "#266651",
+  "--hm-sem-brand-bg-stop-0": "#0a221d",
+  "--hm-sem-brand-bg-stop-12": "#071e18",
+  "--hm-sem-brand-bg-stop-42": "#123328",
+  "--hm-sem-brand-bg-stop-78": "#266651",
+  "--hm-sem-brand-bg-stop-100": "#205241",
+  "--hm-sem-action-surface-stop-0": "#1f8265",
+  "--hm-sem-action-surface-stop-30": "#165c47",
+  "--hm-sem-action-surface-stop-65": "#114838",
+  "--hm-sem-action-surface-stop-100": "#08241c",
+  "--hm-sem-action-border-stop-0": "#0a221d",
+  "--hm-sem-action-border-stop-50": "#34daaa",
+  "--hm-sem-action-border-stop-100": "#08241c",
+  "--hm-radius-input": "4px",
+  "--hm-radius-container": "4px",
+  "--hm-sem-state-active": "#266651",
+  "--hm-sem-on-state-active": "#ffffff",
+  "--hm-sem-on-action-primary": "#ffffff",
+  "--hm-sem-bg-subtle": "#f4f1ea",
+  "--hm-sem-accent": "#bddfd4",
+  "--hm-sem-on-accent": "#123328",
+  "--hm-sem-palette-green-light-4": "#34daaa",
+  "--hm-sem-palette-green-light-3": "#249473",
+  "--hm-sem-palette-green-light-2": "#266651",
+  "--hm-sem-palette-green-light-1": "#205241",
+  "--hm-sem-palette-green-default": "#123328",
+  "--hm-sem-palette-green-dark-1": "#0a221d",
+  "--hm-sem-palette-green-dark-2": "#071e18",
+  "--hm-sem-palette-brown-light-2": "#897445",
+  "--hm-sem-palette-brown-light-1": "#604f32",
+  "--hm-sem-palette-brown-default": "#3e3523",
+  "--hm-sem-palette-brown-dark-1": "#352d1d",
+  "--hm-sem-palette-brown-light-4": "#ecd4a2",
+  "--hm-sem-palette-orange-light-4": "#feba88",
+  "--hm-sem-palette-orange-default": "#cc5200",
+  "--hm-sem-palette-warm-neutral-light": "#e0dace",
+  "--hm-sem-palette-warm-neutral-mid": "#9a9284",
+  "--hm-sem-palette-warm-neutral-dark": "#6e6759",
+  "--hm-sem-palette-beige-light": "#f5f0e5",
+  "--hm-sem-palette-red-danger": "#d32f2f",
+  "--hm-sem-palette-white": "#ffffff",
+  "--hm-sem-palette-black": "#000000",
+  "--hm-sem-palette-neutral-gray-500": "#999999",
+  "--hm-sem-palette-green-tone-1": "#1f8265",
+  "--hm-sem-palette-green-tone-2": "#165c47",
+  "--hm-sem-palette-green-tone-3": "#114838",
+  "--hm-sem-palette-green-tone-4": "#08241c",
+  "--hm-sem-palette-warm-neutral-pale": "#dedbd2",
+  "--hm-sem-palette-warm-neutral-secondary": "#ede8db",
+  "--hm-sem-palette-warm-neutral-muted": "#f4f1ea",
+  "--hm-sem-palette-green-tint": "#bddfd4",
+  "--hm-sem-palette-yellow-accent": "#ffc600",
+  "--hm-sem-palette-brown-deep": "#221d13",
+  "--hm-sem-palette-brown-highlight": "#a98d53",
+  "--hm-sem-palette-orange-light": "#d35a00",
+  "--hm-sem-palette-orange-mid": "#ce5600",
+  "--hm-sem-palette-orange-dark": "#b44b00",
+  "--hm-sem-palette-orange-deep": "#783402",
+  "--hm-sem-palette-orange-border": "#bc4c00",
+  "--hm-sem-palette-orange-border-deep": "#5e2902",
+  "--hm-sem-palette-gray": "#767676",
+  "--hm-sem-palette-gray-dark": "#5a5a5a",
+  "--hm-sem-palette-indicator": "#2d2d2d"
+} as const
diff --git a/packages/ui/src/theme/default.css b/packages/ui/src/theme/default.css
new file mode 100644
index 0000000..5193dc1
--- /dev/null
+++ b/packages/ui/src/theme/default.css
@@ -0,0 +1,203 @@
+/* Generated from themes/default.json + scripts/theme-templates/default.css. Do not edit. */
+@import "./primitives.css";
+
+/* Derived aliases and geometry. Values are generated from themes/default.json. */
+:root, [data-hm-theme] {
+  --hm-color-primary: var(--hm-sem-palette-green-default);
+  --hm-color-primary-hover: color-mix(in srgb, var(--hm-sem-action-primary) 85%, var(--hm-sem-palette-black));
+  --hm-color-primary-active: color-mix(in srgb, var(--hm-sem-action-primary) 70%, var(--hm-sem-palette-black));
+  --hm-color-surface-default: var(--hm-sem-palette-white);
+  --hm-color-surface-content: var(--hm-sem-palette-beige-light);
+  --hm-color-surface-subtle: var(--hm-sem-palette-warm-neutral-muted);
+  --hm-color-text-primary: var(--hm-sem-palette-green-dark-1);
+  --hm-color-text-secondary: var(--hm-sem-palette-warm-neutral-dark);
+  --hm-color-text-inverse: var(--hm-sem-palette-white);
+  --hm-color-text-placeholder: var(--hm-sem-palette-neutral-gray-500);
+  --hm-color-border-default: var(--hm-sem-palette-warm-neutral-mid);
+  --hm-color-border-control: var(--hm-sem-palette-warm-neutral-pale);
+  /* Common Focus color. Trial value: Light 2 (#266651), pending user confirmation. Was --hm-color-primary. */
+  --hm-color-border-focus: var(--hm-sem-palette-green-light-2);
+  --hm-color-action-cancel: var(--hm-sem-palette-warm-neutral-dark);
+  --hm-color-action-destructive: var(--hm-sem-palette-red-danger);
+  --hm-color-action-destructive-hover: color-mix(in srgb, var(--hm-sem-action-destructive) 8%, var(--hm-sem-bg-surface));
+  --hm-color-action-overlay-hover: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+  --hm-color-action-overlay-active: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
+  --hm-color-action-shadow-light: color-mix(in srgb, var(--hm-sem-palette-white) 10%, transparent);
+  --hm-color-action-shadow-dark: color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent);
+
+  --hm-radius-control-md: 4px;
+  --hm-control-height-md: 34px;
+  --hm-font-family-base: "Noto Sans KR", "Malgun Gothic", sans-serif;
+  --hm-font-size-button-md: 13px;
+  --hm-font-weight-medium: 500;
+  --hm-font-weight-bold: 700;
+
+  /* Existing semantic names remain the shadcn and preview adapter. */
+  --hm-sem-bg-content: var(--hm-color-surface-content);
+  --hm-sem-bg-surface: var(--hm-color-surface-default);
+  --hm-sem-fg-primary: var(--hm-color-text-primary);
+  --hm-sem-fg-secondary: var(--hm-color-text-secondary);
+  --hm-sem-fg-placeholder: var(--hm-color-text-placeholder);
+  --hm-sem-action-primary: var(--hm-color-primary);
+  --hm-sem-action-cancel: var(--hm-color-action-cancel);
+  --hm-sem-action-destructive: var(--hm-color-action-destructive);
+  --hm-sem-stroke-default: var(--hm-color-border-default);
+  --hm-sem-stroke-input-default: var(--hm-color-border-control);
+  --hm-sem-stroke-input-focus: var(--hm-color-border-focus);
+  --hm-sem-on-action-primary: var(--hm-color-text-inverse);
+  /* Active state fill: checked / selected / on (Checkbox, Radio, Switch, Slider, Progress, Calendar).
+     Sibling of the Focus chain (--hm-color-border-focus): same Light 2 today, but neither references the other. */
+  --hm-sem-state-active: var(--hm-sem-palette-green-light-2);
+  --hm-sem-on-state-active: var(--hm-color-text-inverse);
+  /* Public gradient stop groups; geometry remains internal. */
+  --hm-sem-brand-bg-stop-0: var(--hm-sem-palette-green-dark-1);
+  --hm-sem-brand-bg-stop-12: var(--hm-sem-palette-green-dark-2);
+  --hm-sem-brand-bg-stop-42: var(--hm-sem-palette-green-default);
+  --hm-sem-brand-bg-stop-78: var(--hm-sem-palette-green-light-2);
+  --hm-sem-brand-bg-stop-100: var(--hm-sem-palette-green-light-1);
+  --hm-sem-bg-brand: linear-gradient(to bottom,
+    var(--hm-sem-brand-bg-stop-0) 0%, var(--hm-sem-brand-bg-stop-12) 12%,
+    var(--hm-sem-brand-bg-stop-42) 42%, var(--hm-sem-brand-bg-stop-78) 78%,
+    var(--hm-sem-brand-bg-stop-100) 100%);
+
+  --hm-sem-action-surface-stop-0: var(--hm-sem-palette-green-tone-1);
+  --hm-sem-action-surface-stop-30: var(--hm-sem-palette-green-tone-2);
+  --hm-sem-action-surface-stop-65: var(--hm-sem-palette-green-tone-3);
+  --hm-sem-action-surface-stop-100: var(--hm-sem-palette-green-tone-4);
+  --hm-sem-surface-action-primary: linear-gradient(180deg,
+    var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%,
+    var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
+  --hm-sem-action-border-stop-0: var(--hm-sem-palette-green-dark-1);
+  --hm-sem-action-border-stop-50: var(--hm-sem-palette-green-light-4);
+  --hm-sem-action-border-stop-100: var(--hm-sem-palette-green-tone-4);
+  --hm-sem-border-action-primary: linear-gradient(180deg,
+    var(--hm-sem-action-border-stop-0) 0%, var(--hm-sem-action-border-stop-50) 50%,
+    var(--hm-sem-action-border-stop-100) 100%);
+
+  --hm-radius-button: var(--hm-radius-control-md);
+  --hm-radius-input: var(--hm-radius-control-md);
+  --hm-radius-select: var(--hm-radius-control-md);
+  --hm-radius-container: var(--hm-radius-control-md);
+
+  /* Floating surface: anchored panels (Dropdown Menu, Context Menu, Popover, Hover Card, Menubar content, Navigation Menu panel).
+     Not Tooltip (inverse face), Select, Card or the modal surfaces. Component tokens keep their own names and point here. */
+  --hm-sem-floating-background: var(--hm-sem-bg-surface);
+  --hm-sem-floating-border-width: 1px;
+  --hm-sem-floating-border-color: var(--hm-sem-stroke-input-default);
+  --hm-sem-floating-radius: var(--hm-radius-container);
+  --hm-sem-floating-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+
+  --hm-sem-bg-subtle: var(--hm-color-surface-subtle);
+
+  --hm-sem-accent: var(--hm-sem-palette-green-tint);
+
+  --hm-sem-on-accent: #123328;
+
+  --hm-sem-palette-green-light-4: var(--hm-green-light-4);
+
+  --hm-sem-palette-green-light-3: var(--hm-green-light-3);
+
+  --hm-sem-palette-green-light-2: var(--hm-green-light-2);
+
+  --hm-sem-palette-green-light-1: var(--hm-green-light-1);
+
+  --hm-sem-palette-green-default: var(--hm-green-default);
+
+  --hm-sem-palette-green-dark-1: var(--hm-green-dark-1);
+
+  --hm-sem-palette-green-dark-2: var(--hm-green-dark-2);
+
+  --hm-sem-palette-brown-light-2: var(--hm-brown-light-2);
+
+  --hm-sem-palette-brown-light-1: var(--hm-brown-light-1);
+
+  --hm-sem-palette-brown-default: var(--hm-brown-default);
+
+  --hm-sem-palette-brown-dark-1: var(--hm-brown-dark-1);
+
+  --hm-sem-palette-brown-light-4: var(--hm-brown-light-4);
+
+  --hm-sem-palette-orange-light-4: var(--hm-orange-light-4);
+
+  --hm-sem-palette-orange-default: var(--hm-orange-default);
+
+  --hm-sem-palette-warm-neutral-light: var(--hm-warm-neutral-light);
+
+  --hm-sem-palette-warm-neutral-mid: var(--hm-warm-neutral-mid);
+
+  --hm-sem-palette-warm-neutral-dark: var(--hm-warm-neutral-dark);
+
+  --hm-sem-palette-beige-light: var(--hm-beige-light);
+
+  --hm-sem-palette-red-danger: var(--hm-red-danger);
+
+  --hm-sem-palette-white: var(--hm-white);
+
+  --hm-sem-palette-black: var(--hm-black);
+
+  --hm-sem-palette-neutral-gray-500: var(--hm-neutral-gray-500);
+
+  --hm-sem-palette-green-tone-1: var(--hm-green-tone-1);
+
+  --hm-sem-palette-green-tone-2: var(--hm-green-tone-2);
+
+  --hm-sem-palette-green-tone-3: var(--hm-green-tone-3);
+
+  --hm-sem-palette-green-tone-4: var(--hm-green-tone-4);
+
+  --hm-sem-palette-warm-neutral-pale: var(--hm-warm-neutral-pale);
+
+  --hm-sem-palette-warm-neutral-secondary: var(--hm-warm-neutral-secondary);
+
+  --hm-sem-palette-warm-neutral-muted: var(--hm-warm-neutral-muted);
+
+  --hm-sem-palette-green-tint: var(--hm-green-tint);
+
+  --hm-sem-palette-yellow-accent: var(--hm-yellow-accent);
+
+  --hm-sem-palette-brown-deep: #221d13;
+
+  --hm-sem-palette-brown-highlight: #a98d53;
+
+  --hm-sem-palette-orange-light: #d35a00;
+
+  --hm-sem-palette-orange-mid: #ce5600;
+
+  --hm-sem-palette-orange-dark: #b44b00;
+
+  --hm-sem-palette-orange-deep: #783402;
+
+  --hm-sem-palette-orange-border: #bc4c00;
+
+  --hm-sem-palette-orange-border-deep: #5e2902;
+
+  --hm-sem-palette-gray: #767676;
+
+  --hm-sem-palette-gray-dark: #5a5a5a;
+
+  --hm-sem-palette-indicator: #2d2d2d;
+
+  --hm-sem-overlay-background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
+  --hm-sem-surface-highlight: color-mix(in srgb, var(--hm-sem-accent) 45%, transparent);
+
+  /* Adapter for shadcn/Tailwind. The public contract.ts allowlist limits runtime overrides. */
+  --background: var(--hm-sem-bg-content);
+  --foreground: var(--hm-sem-fg-primary);
+  --card: var(--hm-sem-bg-surface);
+  --card-foreground: var(--hm-sem-fg-primary);
+  --popover: var(--hm-sem-bg-surface);
+  --popover-foreground: var(--hm-sem-fg-primary);
+  --primary: var(--hm-sem-action-primary);
+  --primary-foreground: var(--hm-sem-on-action-primary);
+  --secondary: var(--hm-sem-palette-warm-neutral-secondary);
+  --secondary-foreground: var(--hm-sem-palette-brown-default);
+  --muted: var(--hm-sem-bg-subtle);
+  --muted-foreground: var(--hm-sem-fg-secondary);
+  --accent: var(--hm-sem-accent);
+  --accent-foreground: var(--hm-sem-on-accent);
+  --destructive: var(--hm-sem-action-destructive);
+  --border: var(--hm-sem-stroke-default);
+  --input: var(--hm-sem-stroke-input-default);
+  --ring: var(--hm-sem-stroke-input-focus);
+  --radius: var(--hm-radius-container);
+}
diff --git a/packages/ui/src/theme/dialog.css b/packages/ui/src/theme/dialog.css
new file mode 100644
index 0000000..70e7bac
--- /dev/null
+++ b/packages/ui/src/theme/dialog.css
@@ -0,0 +1,104 @@
+/* Dialog mapping. ui_viz: docs/components/dialog.md (Dialog / Modal), §1.1, §2, §4, §9. Radix keeps Portal, focus trap, ARIA, Escape, focus return and scroll lock.
+   Only the look is set here: container, regions (Header / Body / Footer) and text. The Overlay, motion and Close button keep the shadcn defaults. */
+:root, [data-hm-theme] {
+  /* ui_viz: dialog.md §2, §8.1 — Radius 8px (Dialog-local, USER_DECISION) and shadow 0 0 12px rgba(0,0,0,.2) (D-093 D-088) — Confirmed. Dialog-local, not Foundation tokens. */
+  --hm-dialog-radius: 8px;
+  --hm-dialog-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+  /* ui_viz: dialog.md §2 — Surface color.bg.surface / foreground color.fg.primary — Confirmed reuse */
+  --hm-dialog-background: var(--hm-sem-bg-surface);
+  --hm-dialog-text: var(--hm-sem-fg-primary);
+  /* ui_viz: dialog.md §2 — outer 1px; color #DEDBD2 is Temporary (Token relation TBD, DIALOG-10 FOLLOW_UP). Same value as the Header divider. */
+  --hm-dialog-border-width: 1px;
+  --hm-dialog-border-color: var(--hm-sem-stroke-input-default);
+  --hm-dialog-divider-color: var(--hm-sem-stroke-input-default);
+
+  /* ui_viz: dialog.md §9 — Header 24/24/16, Title<->Description 8, Body 24 all sides, Actions 0/24/24, Action gap 8 — Confirmed (D-093, COMPONENT_SCOPED) */
+  --hm-dialog-padding: 24px;
+  --hm-dialog-header-padding-bottom: 16px;
+  --hm-dialog-header-gap: 8px;
+  --hm-dialog-actions-gap: 8px;
+  --hm-dialog-footer-padding-top: 16px;
+
+  /* ui_viz: dialog.md §1.1 — Title heading-md 20/28/700 (Dialog-local), Description body-sm 14/20/400, Body body-md 16/24/400 */
+  --hm-dialog-title-font-size: 20px;
+  --hm-dialog-title-line-height: 28px;
+  --hm-dialog-title-font-weight: 700;
+  --hm-dialog-description-font-size: 14px;
+  --hm-dialog-description-line-height: 20px;
+  --hm-dialog-body-font-size: 16px;
+  --hm-dialog-body-line-height: 24px;
+  /* ui_viz: dialog.md §1.2 — Description foreground color.fg.secondary is REFERENCE_ONLY / PARTIAL (current style kept, not a Confirmed value) */
+  --hm-dialog-description-color: var(--hm-sem-fg-secondary);
+
+  /* ui_viz: dialog.md §2, §9 — size is fit-content; max width = viewport - 2 x edge; max height also subtracts the app common header / footer.
+     edge 16px is REVIEW (existing reference value, not a global spacing token). The two app heights are Web Mapping names the consuming screen may set (default 0). */
+  --hm-dialog-edge: 16px;
+  --hm-dialog-app-header-height: 0px;
+  --hm-dialog-app-footer-height: 0px;
+}
+
+[data-slot="dialog-content"] {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  /* Content size up to the max width. Not fit-content: with the shadcn `left: 50%` placement, fit-content only gets half the viewport
+     as available width, so a text Dialog stopped at 50vw (195px at 390px) instead of 100vw - 2 x edge. max-content + max-width gives the same min(content, max). */
+  width: max-content;
+  max-width: calc(100vw - 2 * var(--hm-dialog-edge));
+  max-height: calc(100dvh - var(--hm-dialog-app-header-height) - var(--hm-dialog-app-footer-height) - 2 * var(--hm-dialog-edge));
+  /* Centered in the area left by the app header / footer. */
+  top: calc(var(--hm-dialog-app-header-height) + (100dvh - var(--hm-dialog-app-header-height) - var(--hm-dialog-app-footer-height)) / 2);
+  padding: 0;
+  border: var(--hm-dialog-border-width) solid var(--hm-dialog-border-color);
+  border-radius: var(--hm-dialog-radius);
+  background: var(--hm-dialog-background);
+  color: var(--hm-dialog-text);
+  box-shadow: var(--hm-dialog-shadow);
+  overflow-wrap: anywhere;
+}
+
+/* Header: Title (and optional Description) with the inset divider below it (24px each side, not edge to edge).
+   The divider is the last pixel of the 16px bottom inset (ui_viz draws it inside the padding), so the border width comes out of the padding. */
+[data-slot="dialog-header"] {
+  flex: none;
+  gap: var(--hm-dialog-header-gap);
+  margin-inline: var(--hm-dialog-padding);
+  padding: var(--hm-dialog-padding) 0 calc(var(--hm-dialog-header-padding-bottom) - var(--hm-dialog-border-width));
+  border-bottom: var(--hm-dialog-border-width) solid var(--hm-dialog-divider-color);
+}
+[data-slot="dialog-title"] {
+  font-size: var(--hm-dialog-title-font-size);
+  line-height: var(--hm-dialog-title-line-height);
+  font-weight: var(--hm-dialog-title-font-weight);
+  color: var(--hm-dialog-text);
+}
+[data-slot="dialog-description"] {
+  font-size: var(--hm-dialog-description-font-size);
+  line-height: var(--hm-dialog-description-line-height);
+  font-weight: 400;
+  color: var(--hm-dialog-description-color);
+}
+
+/* Body: the only region that scrolls. Wide content (tables) scrolls sideways inside it, never the page. */
+[data-slot="dialog-body"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--hm-dialog-padding);
+  font-size: var(--hm-dialog-body-font-size);
+  line-height: var(--hm-dialog-body-line-height);
+  font-weight: 400;
+}
+[data-slot="dialog-body"] > :first-child { margin-top: 0; }
+[data-slot="dialog-body"] > :last-child { margin-bottom: 0; }
+
+/* Footer (Actions): trailing edge, cancel first and the action last, no divider above. Stacking on a narrow screen is TBD in ui_viz (shadcn stacking kept). */
+[data-slot="dialog-footer"] {
+  flex: none;
+  gap: var(--hm-dialog-actions-gap);
+  margin: 0;
+  padding: var(--hm-dialog-footer-padding-top) var(--hm-dialog-padding) var(--hm-dialog-padding);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
diff --git a/packages/ui/src/theme/drawer.css b/packages/ui/src/theme/drawer.css
new file mode 100644
index 0000000..10756c6
--- /dev/null
+++ b/packages/ui/src/theme/drawer.css
@@ -0,0 +1,109 @@
+/* Drawer mapping. ui-viz has no Drawer spec, so these are current HM values built from the HM Semantic tokens.
+   vaul keeps drag-to-dismiss, snap points, scroll / drag arbitration and body scroll lock; Radix keeps Portal, focus trap,
+   Escape and ARIA. The handle is vaul's drag affordance (bottom direction); only its look is set here. The Overlay keeps the
+   shadcn default. No --hm-sheet-* or --hm-dialog-* token is referenced. */
+:root, [data-hm-theme] {
+  --hm-drawer-background: var(--hm-sem-bg-surface);
+  --hm-drawer-text: var(--hm-sem-fg-primary);
+  --hm-drawer-border-width: 1px;
+  --hm-drawer-border-color: var(--hm-sem-stroke-input-default);
+  --hm-drawer-radius: 8px;
+  --hm-drawer-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+
+  /* Bottom / top: full width, height by content up to max-height. Left / right: fixed width. */
+  --hm-drawer-max-height: 85dvh;
+  --hm-drawer-width: 400px;
+  --hm-drawer-edge-gap: 48px;
+
+  --hm-drawer-padding: 24px;
+  --hm-drawer-header-gap: 8px;
+  --hm-drawer-footer-gap: 8px;
+
+  --hm-drawer-handle-width: 48px;
+  --hm-drawer-handle-height: 4px;
+  --hm-drawer-handle-color: var(--hm-sem-stroke-default);
+  --hm-drawer-handle-margin-top: 12px;
+
+  --hm-drawer-title-font-size: 18px;
+  --hm-drawer-title-line-height: 28px;
+  --hm-drawer-title-font-weight: 700;
+  --hm-drawer-description-font-size: 14px;
+  --hm-drawer-description-line-height: 20px;
+  --hm-drawer-description-color: var(--hm-sem-fg-secondary);
+  --hm-drawer-body-font-size: 14px;
+  --hm-drawer-body-line-height: 20px;
+}
+
+[data-slot="drawer-content"] {
+  box-sizing: border-box;
+  background: var(--hm-drawer-background);
+  color: var(--hm-drawer-text);
+  box-shadow: var(--hm-drawer-shadow);
+  font-size: var(--hm-drawer-body-font-size);
+  line-height: var(--hm-drawer-body-line-height);
+  overflow-wrap: anywhere;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="bottom"] {
+  max-height: var(--hm-drawer-max-height);
+  border-top: var(--hm-drawer-border-width) solid var(--hm-drawer-border-color);
+  border-radius: var(--hm-drawer-radius) var(--hm-drawer-radius) 0 0;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="top"] {
+  max-height: var(--hm-drawer-max-height);
+  border-bottom: var(--hm-drawer-border-width) solid var(--hm-drawer-border-color);
+  border-radius: 0 0 var(--hm-drawer-radius) var(--hm-drawer-radius);
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="left"],
+[data-slot="drawer-content"][data-vaul-drawer-direction="right"] {
+  height: 100%;
+  width: min(var(--hm-drawer-width), calc(100vw - var(--hm-drawer-edge-gap)));
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="left"] {
+  border-right: var(--hm-drawer-border-width) solid var(--hm-drawer-border-color);
+  border-radius: 0 var(--hm-drawer-radius) var(--hm-drawer-radius) 0;
+}
+[data-slot="drawer-content"][data-vaul-drawer-direction="right"] {
+  border-left: var(--hm-drawer-border-width) solid var(--hm-drawer-border-color);
+  border-radius: var(--hm-drawer-radius) 0 0 var(--hm-drawer-radius);
+}
+
+[data-slot="drawer-handle"] {
+  width: var(--hm-drawer-handle-width);
+  height: var(--hm-drawer-handle-height);
+  margin-top: var(--hm-drawer-handle-margin-top);
+  border-radius: 9999px;
+  background: var(--hm-drawer-handle-color);
+}
+
+[data-slot="drawer-header"] {
+  flex: none;
+  gap: var(--hm-drawer-header-gap);
+  padding: var(--hm-drawer-padding) var(--hm-drawer-padding) 16px;
+}
+[data-slot="drawer-title"] {
+  font-size: var(--hm-drawer-title-font-size);
+  line-height: var(--hm-drawer-title-line-height);
+  font-weight: var(--hm-drawer-title-font-weight);
+  color: var(--hm-drawer-text);
+}
+[data-slot="drawer-description"] {
+  font-size: var(--hm-drawer-description-font-size);
+  line-height: var(--hm-drawer-description-line-height);
+  font-weight: 400;
+  color: var(--hm-drawer-description-color);
+}
+
+/* Body: the only region that scrolls; Header and Footer stay in view. */
+[data-slot="drawer-body"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 var(--hm-drawer-padding);
+}
+
+/* Footer: actions stack full width (touch targets on a narrow screen), the primary action first as in shadcn. */
+[data-slot="drawer-footer"] {
+  flex: none;
+  gap: var(--hm-drawer-footer-gap);
+  padding: 16px var(--hm-drawer-padding) var(--hm-drawer-padding);
+}
diff --git a/packages/ui/src/theme/dropdown-menu.css b/packages/ui/src/theme/dropdown-menu.css
new file mode 100644
index 0000000..bac649e
--- /dev/null
+++ b/packages/ui/src/theme/dropdown-menu.css
@@ -0,0 +1,121 @@
+/* Dropdown Menu mapping. ui-viz has no Dropdown Menu spec (inventory: design pending), so these are current HM values built from
+   the HM Semantic tokens. Radix state attributes (data-highlighted, data-disabled, data-state) drive the states; no HM state attributes.
+   Floating surface values repeat in Popover / Tooltip / Hover Card, but each component keeps its own tokens. */
+:root, [data-hm-theme] {
+  --hm-dropdown-menu-background: var(--hm-sem-floating-background);
+  --hm-dropdown-menu-text: var(--hm-sem-fg-primary);
+  --hm-dropdown-menu-border-width: var(--hm-sem-floating-border-width);
+  --hm-dropdown-menu-border-color: var(--hm-sem-floating-border-color);
+  --hm-dropdown-menu-radius: var(--hm-sem-floating-radius);
+  --hm-dropdown-menu-shadow: var(--hm-sem-floating-shadow);
+  --hm-dropdown-menu-padding: 4px;
+
+  --hm-dropdown-menu-item-height: 36px;
+  --hm-dropdown-menu-item-padding-x: 12px;
+  --hm-dropdown-menu-item-gap: 8px;
+  --hm-dropdown-menu-item-radius: 2px;
+  --hm-dropdown-menu-font-size: 14px;
+  --hm-dropdown-menu-line-height: 20px;
+  --hm-dropdown-menu-font-weight: 400;
+
+  /* Highlighted (hover and keyboard) uses the same face as the Select option: the shadcn accent. */
+  --hm-dropdown-menu-highlight-background: var(--hm-sem-surface-highlight);
+  --hm-dropdown-menu-highlight-text: var(--accent-foreground);
+  --hm-dropdown-menu-destructive-text: var(--hm-sem-action-destructive);
+  --hm-dropdown-menu-destructive-highlight-background: var(--hm-color-action-destructive-hover);
+
+  --hm-dropdown-menu-label-color: var(--hm-sem-fg-secondary);
+  --hm-dropdown-menu-label-font-size: 12px;
+  --hm-dropdown-menu-label-line-height: 18px;
+  --hm-dropdown-menu-label-font-weight: 500;
+  --hm-dropdown-menu-shortcut-color: var(--hm-sem-fg-secondary);
+  --hm-dropdown-menu-shortcut-font-size: 12px;
+  --hm-dropdown-menu-separator-color: var(--hm-sem-stroke-input-default);
+
+  /* Check / radio indicator column at the start of the item. */
+  --hm-dropdown-menu-indicator-size: 16px;
+  --hm-dropdown-menu-radio-dot-size: 8px;
+}
+
+[data-slot="dropdown-menu-content"],
+[data-slot="dropdown-menu-sub-content"] {
+  box-sizing: border-box;
+  padding: var(--hm-dropdown-menu-padding);
+  border: var(--hm-dropdown-menu-border-width) solid var(--hm-dropdown-menu-border-color);
+  border-radius: var(--hm-dropdown-menu-radius);
+  background: var(--hm-dropdown-menu-background);
+  color: var(--hm-dropdown-menu-text);
+  box-shadow: var(--hm-dropdown-menu-shadow);
+  font-size: var(--hm-dropdown-menu-font-size);
+  line-height: var(--hm-dropdown-menu-line-height);
+  font-weight: var(--hm-dropdown-menu-font-weight);
+}
+
+[data-slot="dropdown-menu-item"],
+[data-slot="dropdown-menu-checkbox-item"],
+[data-slot="dropdown-menu-radio-item"],
+[data-slot="dropdown-menu-sub-trigger"] {
+  box-sizing: border-box;
+  min-height: var(--hm-dropdown-menu-item-height);
+  gap: var(--hm-dropdown-menu-item-gap);
+  padding: 0 var(--hm-dropdown-menu-item-padding-x);
+  border-radius: var(--hm-dropdown-menu-item-radius);
+}
+/* Checkbox / radio items reserve the indicator column; `inset` aligns plain items to the same text start. */
+[data-slot="dropdown-menu-checkbox-item"],
+[data-slot="dropdown-menu-radio-item"],
+[data-slot="dropdown-menu-item"][data-inset],
+[data-slot="dropdown-menu-sub-trigger"][data-inset] {
+  padding-left: calc(var(--hm-dropdown-menu-item-padding-x) + var(--hm-dropdown-menu-indicator-size) + var(--hm-dropdown-menu-item-gap));
+}
+[data-slot="dropdown-menu-item-indicator"] {
+  left: var(--hm-dropdown-menu-item-padding-x);
+  width: var(--hm-dropdown-menu-indicator-size);
+  height: var(--hm-dropdown-menu-indicator-size);
+}
+[data-slot="dropdown-menu-radio-dot"] {
+  width: var(--hm-dropdown-menu-radio-dot-size);
+  height: var(--hm-dropdown-menu-radio-dot-size);
+}
+
+/* Highlighted: Radix sets data-highlighted for pointer hover and keyboard focus alike. An open sub menu keeps its trigger highlighted. */
+[data-slot="dropdown-menu-item"][data-highlighted],
+[data-slot="dropdown-menu-checkbox-item"][data-highlighted],
+[data-slot="dropdown-menu-radio-item"][data-highlighted],
+[data-slot="dropdown-menu-sub-trigger"][data-highlighted],
+[data-slot="dropdown-menu-sub-trigger"][data-state="open"] {
+  background: var(--hm-dropdown-menu-highlight-background);
+  color: var(--hm-dropdown-menu-highlight-text);
+}
+[data-slot="dropdown-menu-item"][data-variant="destructive"] {
+  color: var(--hm-dropdown-menu-destructive-text);
+}
+[data-slot="dropdown-menu-item"][data-variant="destructive"][data-highlighted] {
+  background: var(--hm-dropdown-menu-destructive-highlight-background);
+  color: var(--hm-dropdown-menu-destructive-text);
+}
+
+[data-slot="dropdown-menu-label"] {
+  padding: 6px var(--hm-dropdown-menu-item-padding-x);
+  color: var(--hm-dropdown-menu-label-color);
+  font-size: var(--hm-dropdown-menu-label-font-size);
+  line-height: var(--hm-dropdown-menu-label-line-height);
+  font-weight: var(--hm-dropdown-menu-label-font-weight);
+}
+[data-slot="dropdown-menu-label"][data-inset] {
+  padding-left: calc(var(--hm-dropdown-menu-item-padding-x) + var(--hm-dropdown-menu-indicator-size) + var(--hm-dropdown-menu-item-gap));
+}
+[data-slot="dropdown-menu-separator"] {
+  margin: var(--hm-dropdown-menu-padding) calc(-1 * var(--hm-dropdown-menu-padding));
+  background: var(--hm-dropdown-menu-separator-color);
+}
+[data-slot="dropdown-menu-shortcut"] {
+  color: var(--hm-dropdown-menu-shortcut-color);
+  font-size: var(--hm-dropdown-menu-shortcut-font-size);
+  letter-spacing: 0.05em;
+}
+[data-slot="dropdown-menu-item"][data-highlighted] [data-slot="dropdown-menu-shortcut"],
+[data-slot="dropdown-menu-checkbox-item"][data-highlighted] [data-slot="dropdown-menu-shortcut"],
+[data-slot="dropdown-menu-radio-item"][data-highlighted] [data-slot="dropdown-menu-shortcut"] {
+  color: inherit;
+}
diff --git a/packages/ui/src/theme/filter-bar.css b/packages/ui/src/theme/filter-bar.css
new file mode 100644
index 0000000..5c225be
--- /dev/null
+++ b/packages/ui/src/theme/filter-bar.css
@@ -0,0 +1,93 @@
+/* Filter Bar pattern: layout only. The controls inside (Input, Select, Combobox, Date Picker, Button) keep their own component tokens.
+   Spacing values are pattern-local (no global spacing scale exists yet). */
+:root, [data-hm-theme] {
+  --hm-filter-bar-gap: 8px;
+  --hm-filter-bar-control-width: 180px;
+  --hm-filter-bar-search-width: 280px;
+  --hm-filter-bar-search-icon-size: 16px;
+  --hm-filter-bar-search-icon-inset: 12px;
+  --hm-filter-bar-search-icon-gap: 8px;
+  --hm-filter-bar-search-text-end: 32px; /* clear button 24px + its 6px right inset + 2px */
+  --hm-filter-bar-search-icon-color: var(--hm-sem-fg-placeholder);
+  --hm-filter-bar-search-clear-color: var(--hm-sem-fg-secondary);
+  --hm-filter-bar-narrow-breakpoint: 640px;
+}
+
+[data-slot="filter-bar"] {
+  gap: var(--hm-filter-bar-gap);
+}
+/* Select / Combobox / Date Picker triggers and a bare Input are w-fit or w-full by themselves; in the bar they get one control width. */
+[data-slot="filter-bar"] > :is([data-slot="select-trigger"], [data-slot="combobox-trigger"], [data-slot="date-picker-trigger"], [data-slot="input"]) {
+  box-sizing: border-box;
+  width: var(--hm-filter-bar-control-width);
+  max-width: 100%;
+}
+[data-slot="filter-bar-search"] {
+  flex: 0 1 var(--hm-filter-bar-search-width);
+  min-width: 0;
+}
+[data-slot="filter-bar-search-icon"] {
+  top: 50%;
+  left: var(--hm-filter-bar-search-icon-inset);
+  width: var(--hm-filter-bar-search-icon-size);
+  height: var(--hm-filter-bar-search-icon-size);
+  transform: translateY(-50%);
+  color: var(--hm-filter-bar-search-icon-color);
+}
+/* The text starts after the icon (inset + size + gap) and ends before the clear button. Input's Focus / Error / Readonly rules reset
+   padding-inline at the same specificity and load later, so the search re-applies its insets for those states: Focus / Error give
+   back the extra 0.5px border exactly as input.css does (the text does not move), and Readonly (no border) keeps the icon clear. */
+[data-slot="filter-bar-search"] {
+  --hm-filter-bar-search-text-start: calc(var(--hm-filter-bar-search-icon-inset) + var(--hm-filter-bar-search-icon-size) + var(--hm-filter-bar-search-icon-gap));
+}
+[data-slot="filter-bar-search"] [data-slot="input"] {
+  padding-left: var(--hm-filter-bar-search-text-start);
+  padding-right: var(--hm-filter-bar-search-text-end);
+}
+[data-slot="filter-bar-search"] [data-slot="input"]:is(:focus-visible, [aria-invalid="true"]) {
+  padding-left: calc(var(--hm-filter-bar-search-text-start) - (var(--hm-input-state-border-width) - var(--hm-input-border-width)));
+  padding-right: calc(var(--hm-filter-bar-search-text-end) - (var(--hm-input-state-border-width) - var(--hm-input-border-width)));
+}
+[data-slot="filter-bar-search"] [data-slot="input"][readonly],
+[data-slot="filter-bar-search"] [data-slot="input"][readonly]:focus-visible {
+  padding-left: var(--hm-filter-bar-search-text-start);
+  padding-right: var(--hm-filter-bar-search-text-end);
+}
+[data-slot="filter-bar-search"] [data-slot="input"]::-webkit-search-cancel-button {
+  display: none;
+}
+[data-slot="filter-bar-search-clear"] {
+  top: 50%;
+  right: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  transform: translateY(-50%);
+  color: var(--hm-filter-bar-search-clear-color);
+}
+[data-slot="filter-bar-search-clear"] svg {
+  width: 14px;
+  height: 14px;
+}
+[data-slot="filter-bar-actions"] {
+  gap: var(--hm-filter-bar-gap);
+  margin-left: auto;
+}
+
+/* Narrow screen: search takes a full row, the controls share rows, the actions take their own row. */
+@media (max-width: 640px) {
+  [data-slot="filter-bar-search"] {
+    flex: 1 1 100%;
+  }
+  [data-slot="filter-bar"] > :is([data-slot="select-trigger"], [data-slot="combobox-trigger"], [data-slot="date-picker-trigger"], [data-slot="input"]) {
+    flex: 1 1 calc(50% - var(--hm-filter-bar-gap));
+    width: auto;
+    min-width: 0;
+  }
+  [data-slot="filter-bar-actions"] {
+    flex: 1 1 100%;
+    justify-content: flex-end;
+  }
+}
diff --git a/packages/ui/src/theme/gnb.css b/packages/ui/src/theme/gnb.css
new file mode 100644
index 0000000..e66d528
--- /dev/null
+++ b/packages/ui/src/theme/gnb.css
@@ -0,0 +1,573 @@
+/* GNB pattern (layout visual reference: D:\컴포넌트\ui-viz Patterns/GNB, implementation: current @hm-design/ui primitives).
+   The bar is the ui-viz green top header: 70px, vertical brand gradient, brand left, menu centered on the whole bar, text-only profile
+   right, Beige "current" item joined to the content by two concave corners, White 2-depth panel. The Navigation Menu, Dropdown Menu,
+   Sheet, Button and Avatar keep their own markup, Radix behavior and tokens; here they are only re-colored INSIDE the GNB scope
+   (`[data-slot="gnb"] …`), so their own Stories do not change. Spacing values are pattern-local (no global spacing scale exists).
+   Navigation must use `<NavigationMenu viewport={false}>` so each panel opens under its own trigger at the trigger's width. */
+:root, [data-hm-theme] {
+  /* Exposed for GNB Mode content layouts: the bar height and the content join below it. Mobile uses a shorter bar. */
+  --hm-gnb-height: 70px;
+  --hm-gnb-join: 12px;
+  /* Same stops as the shared Semantic action surface gradient family (tone 1-4); painted over bar + join as one gradient. */
+  --hm-gnb-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
+  --hm-gnb-padding-x: 28px;
+  --hm-gnb-column-gap: 24px;
+  /* Below the z-50 of Popover / Dropdown / Sheet / Dialog (portaled). Applies when `sticky`. */
+  --hm-gnb-z-index: 40;
+
+  --hm-gnb-text: var(--hm-sem-on-action-primary);
+  --hm-gnb-text-secondary: var(--hm-sem-palette-green-tint);
+  --hm-gnb-text-stroke-color: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
+  --hm-gnb-text-stroke-width: 1px;
+  --hm-gnb-hover-background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
+  --hm-gnb-focus-outline: 2px solid var(--hm-sem-on-action-primary);
+
+  --hm-gnb-brand-gap: 12px;
+  --hm-gnb-brand-padding-end: 28px;
+  --hm-gnb-brand-eyebrow-size: 11px;
+  --hm-gnb-brand-eyebrow-spacing: 0.12em;
+  --hm-gnb-brand-name-size: 16px;
+  --hm-gnb-brand-text-gap: 5px;
+  --hm-gnb-logo-max-height: 100%;
+
+  /* Primary menu: 4px above the item, item face 66px = bar 70; first/last item keeps room for the current join curves. */
+  --hm-gnb-menu-inset-top: 4px;
+  --hm-gnb-menu-join: 12px;
+  --hm-gnb-menu-min-width: 112px;
+  --hm-gnb-menu-padding-x: 16px;
+  --hm-gnb-menu-gap: 12px;
+  --hm-gnb-menu-radius: 4px 4px 0 0;
+  --hm-gnb-menu-font-size: 16px;
+  --hm-gnb-menu-font-weight: 700;
+  --hm-gnb-current-background: var(--hm-sem-bg-content);
+  --hm-gnb-current-text: var(--hm-sem-action-primary);
+  --hm-gnb-open-background: var(--hm-sem-bg-surface);
+  --hm-gnb-open-text: var(--hm-sem-action-primary);
+
+  /* 2-depth panel: parent width, White, items centered. Radius and shadow are review values in ui-viz. */
+  --hm-gnb-panel-background: var(--hm-sem-bg-surface);
+  --hm-gnb-panel-radius: 0 0 8px 8px;
+  --hm-gnb-panel-shadow: 0 6px 16px color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
+  --hm-gnb-panel-item-min-height: 56px;
+  --hm-gnb-panel-item-padding: 16px;
+  --hm-gnb-panel-item-font-size: 16px;
+  --hm-gnb-panel-item-line-height: 24px;
+  --hm-gnb-panel-item-text: var(--hm-sem-fg-primary);
+  --hm-gnb-panel-item-hover-background: var(--hm-sem-bg-content);
+  --hm-gnb-panel-item-hover-text: var(--hm-sem-action-primary);
+
+  /* Profile (Avatar default size + name and role; the text is hidden on the mobile bar, the Avatar stays). */
+  --hm-gnb-user-gap: 3px;
+  --hm-gnb-user-radius: var(--hm-radius-control-md);
+  --hm-gnb-user-name-size: 16px;
+  --hm-gnb-user-description-size: 12px;
+  --hm-gnb-user-text-max-width: 220px;
+
+  /* Mobile menu content (inside the HM Sheet, white face). */
+  --hm-gnb-mobile-link-height: 44px;
+  --hm-gnb-mobile-link-padding-x: 12px;
+  --hm-gnb-mobile-link-radius: var(--hm-radius-control-md);
+  --hm-gnb-mobile-link-font-size: 14px;
+  --hm-gnb-mobile-link-line-height: 20px;
+  --hm-gnb-mobile-link-font-weight: 500;
+  --hm-gnb-mobile-link-text: var(--hm-sem-fg-primary);
+  --hm-gnb-mobile-link-hover-background: var(--accent);
+  --hm-gnb-mobile-link-hover-text: var(--accent-foreground);
+  --hm-gnb-mobile-link-current-background: var(--hm-sem-bg-content);
+  --hm-gnb-mobile-link-current-text: var(--hm-sem-action-primary);
+  --hm-gnb-mobile-link-current-font-weight: 700;
+  --hm-gnb-mobile-group-label-color: var(--hm-sem-fg-secondary);
+  --hm-gnb-mobile-group-gap: 16px;
+  --hm-gnb-mobile-nested-gap: 8px;
+  --hm-gnb-mobile-nested-indent: var(--hm-gnb-mobile-link-padding-x);
+  --hm-gnb-mobile-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+
+/* ── Bar ─────────────────────────────────────────────────────────────────────────────────────── */
+[data-slot="gnb"] {
+  position: relative;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
+  column-gap: var(--hm-gnb-column-gap);
+  align-items: start;
+  width: 100%;
+  height: var(--hm-gnb-height);
+  padding: 0 var(--hm-gnb-padding-x);
+  background: var(--hm-gnb-background) left top / 100% calc(var(--hm-gnb-height) + var(--hm-gnb-join)) no-repeat;
+  color: var(--hm-gnb-text);
+  font-size: 16px;
+}
+/* Continue the gradient only outside the content's rounded top corners. A full strip would cover the content when the sticky
+   header creates a higher stacking context. Static and sticky share this geometry (Dashboard Layout contract). */
+[data-slot="gnb"]::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: var(--hm-gnb-join);
+  background: var(--hm-gnb-background) 0 calc(-1 * var(--hm-gnb-height)) / 100% calc(var(--hm-gnb-height) + var(--hm-gnb-join)) no-repeat;
+  mask:
+    radial-gradient(circle at bottom right, transparent var(--hm-gnb-join), #000 var(--hm-gnb-join)) left top / var(--hm-gnb-join) 100% no-repeat,
+    radial-gradient(circle at bottom left, transparent var(--hm-gnb-join), #000 var(--hm-gnb-join)) right top / var(--hm-gnb-join) 100% no-repeat;
+  pointer-events: none;
+}
+[data-slot="gnb"][data-sticky] {
+  position: sticky;
+  top: 0;
+  z-index: var(--hm-gnb-z-index);
+}
+
+/* ── Brand: horizontal; logo (img / svg) only when supplied, then the name. Eyebrow + name are optional. ───────── */
+[data-slot="gnb-brand"] {
+  grid-column: 1;
+  justify-self: start;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  height: calc(var(--hm-gnb-height) - 2px);
+  padding-right: var(--hm-gnb-brand-padding-end);
+  gap: var(--hm-gnb-brand-gap);
+  color: var(--hm-gnb-text);
+  text-decoration: none;
+  outline: none;
+}
+[data-slot="gnb-brand"]:focus-visible {
+  outline: var(--hm-gnb-focus-outline);
+  outline-offset: -2px;
+}
+[data-slot="gnb-brand"] > :is(img, svg) {
+  flex: 0 1 auto;
+  min-width: 0;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: var(--hm-gnb-logo-max-height);
+}
+[data-slot="gnb-brand"] > span {
+  display: grid;
+  gap: var(--hm-gnb-brand-text-gap);
+  flex: 0 1 auto;
+  min-width: 0;
+  -webkit-text-stroke: var(--hm-gnb-text-stroke-width) var(--hm-gnb-text-stroke-color);
+  paint-order: stroke fill;
+}
+[data-slot="gnb-brand"] :is(small, strong) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-slot="gnb-brand"] small {
+  color: var(--hm-gnb-text-secondary);
+  font-size: var(--hm-gnb-brand-eyebrow-size);
+  font-weight: 700;
+  letter-spacing: var(--hm-gnb-brand-eyebrow-spacing);
+  line-height: 1.2;
+}
+[data-slot="gnb-brand"] strong {
+  font-size: var(--hm-gnb-brand-name-size);
+  font-weight: 700;
+}
+
+/* ── Primary navigation: centered on the whole bar by the equal side columns ────────────────────────────────── */
+[data-slot="gnb"] [data-slot="gnb-nav"] {
+  grid-column: 2;
+  align-items: flex-start;
+  min-width: 0;
+  height: var(--hm-gnb-height);
+  /* `clip` (unlike `hidden`) leaves the vertical axis visible so the open panel below the bar is not cut; too-long labels are cut here. */
+  overflow-x: clip;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu"] {
+  flex: 0 1 auto;
+  align-items: flex-start;
+  height: 100%;
+  justify-content: center;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-list"] {
+  align-items: flex-start;
+  justify-content: center;
+  gap: 0;
+  height: 100%;
+  padding-inline: var(--hm-gnb-menu-join);
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-item"] {
+  height: 100%;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]) {
+  position: relative;
+  justify-content: center;
+  gap: var(--hm-gnb-menu-gap);
+  min-width: var(--hm-gnb-menu-min-width);
+  height: calc(var(--hm-gnb-height) - var(--hm-gnb-menu-inset-top));
+  margin-top: var(--hm-gnb-menu-inset-top);
+  padding: 0 var(--hm-gnb-menu-padding-x);
+  border-radius: var(--hm-gnb-menu-radius);
+  background: transparent;
+  color: var(--hm-gnb-text);
+  font-size: var(--hm-gnb-menu-font-size);
+  font-weight: var(--hm-gnb-menu-font-weight);
+  white-space: nowrap;
+  box-shadow: none;
+}
+/* Arrow optical correction: (12px SVG box - 7px painted width) / 4 = 1.25px.
+   Keep the total padding, intrinsic trigger width, gap and icon margin unchanged. */
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-trigger"]:has(> [data-slot="navigation-menu-trigger-icon"]) {
+  padding-left: calc(var(--hm-gnb-menu-padding-x) + 1.25px);
+  padding-right: calc(var(--hm-gnb-menu-padding-x) - 1.25px);
+}
+/* Hover / focus (not the current item, not an open parent): Black 10% over the green. */
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):is(:hover, :focus-visible):not([data-active], [aria-current="page"], [data-state="open"]) {
+  background: var(--hm-gnb-hover-background);
+  color: var(--hm-gnb-text);
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):focus-visible {
+  outline: var(--hm-gnb-focus-outline);
+  outline-offset: -2px;
+}
+/* Current location: Beige face joined to the content below by two concave corners. Hover does not repaint it. Radix `active` on a
+   Link (`data-active`, `aria-current="page"`); a Trigger carries `aria-current="page"` from the consumer. */
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):is([data-active], [aria-current="page"]) {
+  z-index: 1;
+  background: var(--hm-gnb-current-background);
+  color: var(--hm-gnb-current-text);
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):is([data-active], [aria-current="page"]):focus-visible {
+  outline-color: var(--hm-gnb-current-text);
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):is([data-active], [aria-current="page"])::before,
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):is([data-active], [aria-current="page"])::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: var(--hm-gnb-menu-join);
+  height: var(--hm-gnb-menu-join);
+  pointer-events: none;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):is([data-active], [aria-current="page"])::before {
+  right: 100%;
+  background: radial-gradient(circle at top left, transparent calc(var(--hm-gnb-menu-join) - 0.5px), var(--hm-gnb-current-background) var(--hm-gnb-menu-join));
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] :is([data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]):is([data-active], [aria-current="page"])::after {
+  left: 100%;
+  background: radial-gradient(circle at top right, transparent calc(var(--hm-gnb-menu-join) - 0.5px), var(--hm-gnb-current-background) var(--hm-gnb-menu-join));
+}
+/* Open parent: reuse the current concave joins with the panel's surface.
+   alignPanels supplies each side independently after viewport clamping. */
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-trigger"][data-state="open"] {
+  z-index: 3;
+  background: var(--hm-gnb-open-background);
+  color: var(--hm-gnb-open-text);
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-trigger"][data-state="open"]::before,
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-trigger"][data-state="open"]::after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  height: var(--hm-gnb-menu-join);
+  pointer-events: none;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-trigger"][data-state="open"]::before {
+  right: 100%;
+  width: min(var(--hm-gnb-panel-left-extension, 0px), var(--hm-gnb-menu-join));
+  background: radial-gradient(circle at top left, transparent calc(var(--hm-gnb-menu-join) - 0.5px), var(--hm-gnb-panel-background) var(--hm-gnb-menu-join)) right bottom / var(--hm-gnb-menu-join) var(--hm-gnb-menu-join) no-repeat;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-trigger"][data-state="open"]::after {
+  left: 100%;
+  width: min(var(--hm-gnb-panel-right-extension, 0px), var(--hm-gnb-menu-join));
+  background: radial-gradient(circle at top right, transparent calc(var(--hm-gnb-menu-join) - 0.5px), var(--hm-gnb-panel-background) var(--hm-gnb-menu-join)) left bottom / var(--hm-gnb-menu-join) var(--hm-gnb-menu-join) no-repeat;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-trigger"][data-state="open"]:focus-visible {
+  outline-color: var(--hm-gnb-open-text);
+}
+
+/* ── 2-depth panel (viewport={false}): under its own trigger, same width, White, centered items ─────────────── */
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] {
+  position: absolute;
+  z-index: 2;
+  top: 100%;
+  left: 0;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--hm-gnb-panel-radius);
+  background: var(--hm-gnb-panel-background);
+  color: var(--hm-gnb-panel-item-text);
+  box-shadow: var(--hm-gnb-panel-shadow);
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] > ul {
+  display: grid;
+  width: auto;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  list-style: none;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"] {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: auto;
+  min-height: var(--hm-gnb-panel-item-min-height);
+  margin: 0;
+  padding: var(--hm-gnb-panel-item-padding);
+  border-radius: 0;
+  background: transparent;
+  color: var(--hm-gnb-panel-item-text);
+  font-size: var(--hm-gnb-panel-item-font-size);
+  line-height: var(--hm-gnb-panel-item-line-height);
+  font-weight: 700;
+  text-align: center;
+  white-space: normal;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"]:is(:hover, :focus-visible, [data-active]) {
+  background: var(--hm-gnb-panel-item-hover-background);
+  color: var(--hm-gnb-panel-item-hover-text);
+  outline: none;
+}
+[data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"]:focus-visible {
+  outline: 2px solid var(--hm-gnb-panel-item-hover-text);
+  outline-offset: -2px;
+}
+
+/* ── Utilities and profile ──────────────────────────────────────────────────────────────────────────────── */
+[data-slot="gnb-utilities"] {
+  grid-column: 3;
+  justify-self: end;
+  min-width: 0;
+  height: calc(var(--hm-gnb-height) - 2px);
+  gap: 4px;
+}
+/* Optional icon actions (search, notification...) are HM ghost Buttons; on the green bar they are white with the Black 10% hover. */
+[data-slot="gnb-utilities"] [data-slot="button"][data-variant="ghost"] {
+  color: var(--hm-gnb-text);
+}
+[data-slot="gnb-utilities"] [data-slot="button"][data-variant="ghost"]:is(:hover, [aria-expanded="true"]) {
+  background: var(--hm-gnb-hover-background);
+  color: var(--hm-gnb-text);
+}
+[data-slot="gnb-utilities"] [data-slot="button"][data-variant="ghost"]:focus-visible {
+  border-color: transparent;
+  outline: var(--hm-gnb-focus-outline);
+  outline-offset: -2px;
+  box-shadow: none;
+}
+
+[data-slot="gnb-user"] {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0 8px;
+  gap: 10px;
+  border: 0;
+  border-radius: var(--hm-gnb-user-radius);
+  background: transparent;
+  color: var(--hm-gnb-text);
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+}
+[data-slot="gnb-user"]:is(:hover, [data-state="open"]) {
+  background: var(--hm-gnb-hover-background);
+}
+[data-slot="gnb-user"]:focus-visible {
+  outline: var(--hm-gnb-focus-outline);
+  outline-offset: -2px;
+}
+[data-slot="gnb-user-text"] {
+  display: grid;
+  gap: var(--hm-gnb-user-gap);
+  min-width: 0;
+  max-width: var(--hm-gnb-user-text-max-width);
+  padding-block: 4px;
+}
+[data-slot="gnb-user-name"],
+[data-slot="gnb-user-description"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-text-stroke: var(--hm-gnb-text-stroke-width) var(--hm-gnb-text-stroke-color);
+  paint-order: stroke fill;
+}
+[data-slot="gnb-user-name"] {
+  font-size: var(--hm-gnb-user-name-size);
+  font-weight: 700;
+}
+[data-slot="gnb-user-description"] {
+  color: var(--hm-gnb-text-secondary);
+  font-size: var(--hm-gnb-user-description-size);
+}
+
+/* ── Mobile menu content (inside the HM Sheet): destinations as a plain link list ─────────────────────────── */
+[data-slot="gnb-mobile-nav"] {
+  display: grid;
+  gap: var(--hm-gnb-mobile-group-gap);
+  padding-bottom: 16px;
+}
+[data-slot="gnb-mobile-group-label"] {
+  margin: 0;
+  padding: 0 var(--hm-gnb-mobile-link-padding-x) 4px;
+  color: var(--hm-gnb-mobile-group-label-color);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+/* A group inside a group (a deeper local level, e.g. the LNB 3-depth): one link padding further in, with room above its title. */
+[data-slot="gnb-mobile-group"] [data-slot="gnb-mobile-group"] {
+  margin-top: var(--hm-gnb-mobile-nested-gap);
+  padding-left: var(--hm-gnb-mobile-nested-indent);
+}
+[data-slot="gnb-mobile-link"] {
+  box-sizing: border-box;
+  min-height: var(--hm-gnb-mobile-link-height);
+  padding: 0 var(--hm-gnb-mobile-link-padding-x);
+  border-radius: var(--hm-gnb-mobile-link-radius);
+  color: var(--hm-gnb-mobile-link-text);
+  font-size: var(--hm-gnb-mobile-link-font-size);
+  line-height: var(--hm-gnb-mobile-link-line-height);
+  font-weight: var(--hm-gnb-mobile-link-font-weight);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  outline: none;
+}
+[data-slot="gnb-mobile-link"]:is(:hover, :focus-visible) {
+  background: var(--hm-gnb-mobile-link-hover-background);
+  color: var(--hm-gnb-mobile-link-hover-text);
+}
+[data-slot="gnb-mobile-link"]:focus-visible {
+  box-shadow: var(--hm-gnb-mobile-focus-ring);
+}
+[data-slot="gnb-mobile-link"][aria-current="page"] {
+  background: var(--hm-gnb-mobile-link-current-background);
+  color: var(--hm-gnb-mobile-link-current-text);
+  font-weight: var(--hm-gnb-mobile-link-current-font-weight);
+}
+
+/* Desktop panels grow to their longest label. The GNB region measures only the
+   viewport-edge correction; extreme labels scroll within the bounded panel. */
+@media (min-width: 1024px) {
+  [data-slot="gnb"] [data-slot="gnb-nav"] {
+    overflow-x: visible;
+  }
+  [data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] {
+    left: var(--hm-gnb-panel-offset-x, 0px);
+    width: max-content;
+    min-width: 100%;
+    max-width: calc(100vw - 2 * var(--hm-gnb-padding-x));
+    overflow-x: auto;
+  }
+  [data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] > ul {
+    min-width: max-content;
+  }
+  [data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"] {
+    white-space: nowrap;
+    overflow-wrap: normal;
+  }
+  /* The concave current-page joins belong to 1Depth only, not panel rows. */
+  [data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"]::before,
+  [data-slot="gnb"] [data-slot="gnb-nav"] [data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"]::after {
+    display: none;
+  }
+}
+
+/* ── Mobile bar: below 1024px (Tailwind `lg`). Menu → hamburger + Sheet; profile → Avatar only. Keep this block last. ──────── */
+@media (max-width: 1023px) {
+  :root, [data-hm-theme] {
+    --hm-gnb-height: 56px;
+    --hm-gnb-padding-x: 16px;
+  }
+  [data-slot="gnb"] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  [data-slot="gnb"] [data-slot="gnb-nav"] {
+    display: none;
+  }
+  [data-slot="gnb-brand"] {
+    flex: 0 1 auto;
+    height: auto;
+    padding-right: 0;
+  }
+  [data-slot="gnb-brand"] small {
+    display: none;
+  }
+  [data-slot="gnb-utilities"] {
+    flex: none;
+    height: auto;
+    margin-left: auto;
+  }
+  [data-slot="gnb-user"] {
+    padding: 0 4px;
+  }
+  [data-slot="gnb-user-text"] {
+    display: none;
+  }
+  /* The hamburger is a ghost Button: white on the green bar. */
+  [data-slot="gnb"] > [data-slot="button"][data-variant="ghost"] {
+    color: var(--hm-gnb-text);
+  }
+  [data-slot="gnb"] > [data-slot="button"][data-variant="ghost"]:is(:hover, [aria-expanded="true"]) {
+    background: var(--hm-gnb-hover-background);
+    color: var(--hm-gnb-text);
+  }
+  [data-slot="gnb"] > [data-slot="button"][data-variant="ghost"]:focus-visible {
+    border-color: transparent;
+    outline: var(--hm-gnb-focus-outline);
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+}
+
+/* Opt-in GNB ONLY composition. Reuse LNB's DOM, tokens and responsive menu unchanged.
+   These layout hooks ship with @hm-design/ui/theme.css; no Story-only stylesheet is required.
+   The consumer provides the frame height and content padding. */
+[data-hm-gnb-layout="sidebar"] {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+}
+[data-hm-gnb-layout="sidebar"] > [data-slot="gnb"] {
+  z-index: var(--hm-gnb-z-index);
+}
+[data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--hm-lnb-width) minmax(0, 1fr);
+  min-width: 0;
+  min-height: 0;
+  background: var(--hm-sem-palette-green-light-2);
+  border-radius: var(--hm-gnb-join) var(--hm-gnb-join) 0 0;
+}
+[data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] > [data-slot="lnb"][data-hm-gnb-sidebar] {
+  --hm-lnb-background: var(--hm-sem-palette-green-light-2);
+}
+[data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] > [data-hm-gnb-main] {
+  position: relative;
+  grid-column: 2;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--hm-sem-bg-content);
+  border-radius: var(--hm-lnb-join) var(--hm-gnb-join) 0 var(--hm-lnb-join);
+}
+@media (max-width: 1023px) {
+  [data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  [data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] > [data-hm-gnb-main] {
+    grid-column: 1;
+    border-radius: var(--hm-gnb-join) var(--hm-gnb-join) 0 0;
+  }
+}
diff --git a/packages/ui/src/theme/hover-card.css b/packages/ui/src/theme/hover-card.css
new file mode 100644
index 0000000..154e7ba
--- /dev/null
+++ b/packages/ui/src/theme/hover-card.css
@@ -0,0 +1,31 @@
+/* Hover Card mapping. ui-viz has no Hover Card spec, so these are current HM values from the HM Semantic tokens.
+   A richer preview than Tooltip (title / description / metadata); it is wider than Popover so a preview reads in one block. */
+:root, [data-hm-theme] {
+  --hm-hover-card-background: var(--hm-sem-floating-background);
+  --hm-hover-card-text: var(--hm-sem-fg-primary);
+  --hm-hover-card-border-width: var(--hm-sem-floating-border-width);
+  --hm-hover-card-border-color: var(--hm-sem-floating-border-color);
+  --hm-hover-card-radius: var(--hm-sem-floating-radius);
+  --hm-hover-card-shadow: var(--hm-sem-floating-shadow);
+  --hm-hover-card-padding: 16px;
+  --hm-hover-card-width: 320px;
+  --hm-hover-card-font-size: 14px;
+  --hm-hover-card-line-height: 20px;
+  --hm-hover-card-font-weight: 400;
+}
+
+[data-slot="hover-card-content"] {
+  box-sizing: border-box;
+  width: var(--hm-hover-card-width);
+  max-width: calc(100vw - 16px);
+  padding: var(--hm-hover-card-padding);
+  border: var(--hm-hover-card-border-width) solid var(--hm-hover-card-border-color);
+  border-radius: var(--hm-hover-card-radius);
+  background: var(--hm-hover-card-background);
+  color: var(--hm-hover-card-text);
+  box-shadow: var(--hm-hover-card-shadow);
+  font-size: var(--hm-hover-card-font-size);
+  line-height: var(--hm-hover-card-line-height);
+  font-weight: var(--hm-hover-card-font-weight);
+  overflow-wrap: anywhere;
+}
diff --git a/packages/ui/src/theme/index.ts b/packages/ui/src/theme/index.ts
new file mode 100644
index 0000000..3597f66
--- /dev/null
+++ b/packages/ui/src/theme/index.ts
@@ -0,0 +1,5 @@
+export { runtimeThemeContract, defaultRuntimeTheme } from "./contract"
+export type { RuntimeTheme, RuntimeThemeToken } from "./contract"
+export { applyRuntimeTheme, resetRuntimeTheme, isRuntimeTheme } from "./runtime"
+export { fetchRuntimeTheme, resolveRuntimeTheme, loadRuntimeTheme } from "./loader"
+export type { RuntimeThemeLoadOptions } from "./loader"
diff --git a/packages/ui/src/theme/input.css b/packages/ui/src/theme/input.css
new file mode 100644
index 0000000..0436992
--- /dev/null
+++ b/packages/ui/src/theme/input.css
@@ -0,0 +1,107 @@
+/* Input mapping: the control only. Label, Required star and Helper/Error message are consumer composition, not part of Input.
+   States use native selectors (:focus-visible, [aria-invalid="true"], :disabled, [readonly]); size uses data-size. */
+:root, [data-hm-theme] {
+  /* ui_viz: docs/components/input.md §24, §16 — Confirmed (size, padding-x). Not aliased to Button or the global control height. */
+  --hm-input-height-sm: 28px;
+  --hm-input-height-md: 34px;
+  --hm-input-height-lg: 42px;
+  --hm-input-padding-x-sm: 10px;
+  --hm-input-padding-x-md: 12px;
+  --hm-input-padding-x-lg: 12px;
+
+  /* ui_viz: docs/components/input.md §9, §21 INPUT_VALUE_ROLE_FOLLOWS_SIZE — owner decision (value and placeholder per size) */
+  --hm-input-font-size-sm: 12px;
+  --hm-input-line-height-sm: 18px;
+  --hm-input-font-size-md: 14px;
+  --hm-input-line-height-md: 20px;
+  --hm-input-font-size-lg: 16px;
+  --hm-input-line-height-lg: 24px;
+  --hm-input-font-weight: 400;
+
+  /* ui_viz: docs/components/input.md §10, §11, §1.1 D-005 — Confirmed */
+  --hm-input-radius: var(--hm-radius-input);
+  --hm-input-border-width: 1px;
+  --hm-input-state-border-width: 1.5px;
+  --hm-input-background: var(--hm-sem-bg-surface);
+  --hm-input-text: var(--hm-sem-fg-primary);
+  --hm-input-placeholder: var(--hm-sem-fg-placeholder);
+  --hm-input-border-color: var(--hm-sem-stroke-input-default);
+  --hm-input-focus-border-color: var(--hm-sem-stroke-input-focus);
+  --hm-input-error-border-color: var(--hm-sem-action-destructive);
+}
+
+/* Large is the default when size is omitted. Height is a min-height, so the control keeps one line of text centered. */
+[data-slot="input"] {
+  --hm-input-height: var(--hm-input-height-lg);
+  --hm-input-padding-x: var(--hm-input-padding-x-lg);
+  --hm-input-font-size: var(--hm-input-font-size-lg);
+  --hm-input-line-height: var(--hm-input-line-height-lg);
+  box-sizing: border-box;
+  height: auto;
+  min-height: var(--hm-input-height);
+  padding: 0 var(--hm-input-padding-x);
+  border: var(--hm-input-border-width) solid var(--hm-input-border-color);
+  border-radius: var(--hm-input-radius);
+  background: var(--hm-input-background);
+  color: var(--hm-input-text);
+  font-size: var(--hm-input-font-size);
+  line-height: var(--hm-input-line-height);
+  font-weight: var(--hm-input-font-weight);
+  box-shadow: none;
+}
+[data-slot="input"][data-size="medium"] {
+  --hm-input-height: var(--hm-input-height-md);
+  --hm-input-padding-x: var(--hm-input-padding-x-md);
+  --hm-input-font-size: var(--hm-input-font-size-md);
+  --hm-input-line-height: var(--hm-input-line-height-md);
+}
+[data-slot="input"][data-size="small"] {
+  --hm-input-height: var(--hm-input-height-sm);
+  --hm-input-padding-x: var(--hm-input-padding-x-sm);
+  --hm-input-font-size: var(--hm-input-font-size-sm);
+  --hm-input-line-height: var(--hm-input-line-height-sm);
+}
+[data-slot="input"]::placeholder {
+  color: var(--hm-input-placeholder);
+  opacity: 1;
+}
+
+/* Focus: the border alone marks it (1.5px, no shadow or glow). Padding gives back the extra 0.5px so the value does not move. */
+[data-slot="input"]:focus-visible {
+  outline: none;
+  border-width: var(--hm-input-state-border-width);
+  border-color: var(--hm-input-focus-border-color);
+  padding-inline: calc(var(--hm-input-padding-x) - (var(--hm-input-state-border-width) - var(--hm-input-border-width)));
+}
+
+/* Invalid owns the border; keyboard focus adds the HM 3px / 50% semantic ring independently. */
+[data-slot="input"][aria-invalid="true"] {
+  border-width: var(--hm-input-state-border-width);
+  border-color: var(--hm-input-error-border-color);
+  padding-inline: calc(var(--hm-input-padding-x) - (var(--hm-input-state-border-width) - var(--hm-input-border-width)));
+}
+[data-slot="input"][aria-invalid="true"]:focus-visible {
+  border-color: var(--hm-input-error-border-color);
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+
+/* Disabled keeps the white face. Dimming (opacity 0.6) is set in ui/input.tsx: 2026-10-02 user decision, Input and Select only, not a global Disabled token. */
+[data-slot="input"]:disabled {
+  background: var(--hm-input-background);
+}
+
+/* Readonly: no box, text only, not dimmed. Always Large metrics, whatever the size. */
+[data-slot="input"][readonly] {
+  --hm-input-height: var(--hm-input-height-lg);
+  --hm-input-font-size: var(--hm-input-font-size-lg);
+  --hm-input-line-height: var(--hm-input-line-height-lg);
+  border-width: 0;
+  padding-inline: 0;
+  background: transparent;
+}
+[data-slot="input"][readonly]:focus-visible {
+  border-width: 0;
+  padding-inline: 0;
+  outline: revert;
+}
diff --git a/packages/ui/src/theme/label.css b/packages/ui/src/theme/label.css
new file mode 100644
index 0000000..5689d88
--- /dev/null
+++ b/packages/ui/src/theme/label.css
@@ -0,0 +1,17 @@
+/* Label mapping: typography and color only. Required star, Helper and Error message are consumer composition, not part of Label.
+   ui_viz has no standalone Label spec; the Field Label role is owned by Input / Textarea (docs/components/input.md §9, §10). */
+:root, [data-hm-theme] {
+  /* ui_viz: docs/components/input.md §9 Field Label → label-md 14/20/500 (CANONICAL_OVERRIDE of the 13/700 Source); textarea.md §2 */
+  --hm-label-font-size: 14px;
+  --hm-label-line-height: 20px;
+  --hm-label-font-weight: 500;
+  /* ui_viz: docs/components/input.md §10, §16 — color.fg.secondary, Confirmed */
+  --hm-label-text: var(--hm-sem-fg-secondary);
+}
+
+[data-slot="label"] {
+  color: var(--hm-label-text);
+  font-size: var(--hm-label-font-size);
+  line-height: var(--hm-label-line-height);
+  font-weight: var(--hm-label-font-weight);
+}
diff --git a/packages/ui/src/theme/lnb.css b/packages/ui/src/theme/lnb.css
new file mode 100644
index 0000000..a2c8e54
--- /dev/null
+++ b/packages/ui/src/theme/lnb.css
@@ -0,0 +1,531 @@
+/* LNB pattern (layout visual reference: D:\컴포넌트\ui-viz Patterns/LNB, implementation: HM Collapsible + plain elements).
+   A 272px green column: horizontal 5-stop surface, brand on top, menu in the middle, text-only profile at the bottom. The current
+   item is a Beige face (left corners rounded) that runs to the content edge and joins it through two concave corners; hover is
+   Black 10% to the same edge; an open group is a Black 20% face with a 1px green line. Spacing values are pattern-local. */
+:root, [data-hm-theme] {
+  /* Exposed for the layout: grid column width and the surface that continues behind the content's rounded corners. */
+  --hm-lnb-width: 272px;
+  --hm-lnb-join: 18px;
+  --hm-lnb-background: linear-gradient(90deg, var(--hm-sem-action-primary) 0%, var(--hm-sem-palette-green-light-1) 30%, var(--hm-sem-palette-green-light-2) 50%, var(--hm-sem-palette-green-light-3) 90%, var(--hm-sem-palette-green-light-2) 100%);
+  --hm-lnb-background-end: var(--hm-sem-palette-green-light-2);
+  --hm-lnb-padding-top: 28px;
+  --hm-lnb-padding-bottom: 22px;
+  --hm-lnb-inset-start: 20px;
+  --hm-lnb-inset-end: 20px;
+  /* Menu top (ui-viz 20 under the brand). Padding inside the scroll region, so the scroll starts right under the brand; keep it at
+     least `--hm-lnb-join` so the curve above a current first item is not clipped (the bottom padding is the join for the same reason). */
+  --hm-lnb-nav-padding-top: 20px;
+
+  --hm-lnb-text: var(--hm-sem-on-action-primary);
+  --hm-lnb-text-secondary: var(--hm-sem-palette-green-tint);
+  --hm-lnb-text-stroke-color: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
+  --hm-lnb-focus-outline: 2px solid var(--hm-sem-on-action-primary);
+
+  --hm-lnb-brand-padding-x: 30px;
+  --hm-lnb-brand-padding-bottom: 22px;
+  --hm-lnb-brand-gap: 12px;
+  --hm-lnb-brand-eyebrow-size: 11px;
+  --hm-lnb-brand-eyebrow-spacing: 0.12em;
+  --hm-lnb-brand-name-size: 17px;
+  --hm-lnb-brand-text-gap: 5px;
+
+  --hm-lnb-item-min-height: 56px;
+  --hm-lnb-item-padding-start: 18px;
+  --hm-lnb-item-gap: 12px;
+  --hm-lnb-item-font-size: 18px;
+  --hm-lnb-item-line-height: 28px;
+  --hm-lnb-item-font-weight: 700;
+  --hm-lnb-item-radius: 4px 0 0 4px;
+  --hm-lnb-item-icon-size: 20px;
+  --hm-lnb-item-icon-opacity: 0.5;
+  --hm-lnb-item-icon-stroke: 1.7;
+  --hm-lnb-item-text-stroke-width: 1.5px;
+  --hm-lnb-item-text-shadow: 1px 2px 1px var(--hm-lnb-text-stroke-color);
+  --hm-lnb-hover-background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
+
+  --hm-lnb-current-background: var(--hm-sem-bg-content);
+  --hm-lnb-current-text: var(--hm-sem-action-primary);
+  --hm-lnb-current-radius: 8px 0 0 8px;
+  /* Inset depth of the current face: left edge, top, bottom; the last quarter fades so the content side stays open. */
+  --hm-lnb-current-depth:
+    linear-gradient(to right, color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent), transparent 6px) 0 0 / 75% 100% no-repeat,
+    linear-gradient(to bottom, color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat,
+    linear-gradient(to top, color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat;
+
+  --hm-lnb-group-open-background: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+  --hm-lnb-group-open-line: 1px solid var(--hm-sem-palette-green-light-2);
+  --hm-lnb-group-radius: 8px 0 0 8px;
+  --hm-lnb-group-current-text: var(--hm-sem-palette-yellow-accent);
+  --hm-lnb-group-arrow-size: 18px;
+  --hm-lnb-subitem-padding-start: 68px;
+  /* Align the 2-depth link surface with the 1-depth group text; retain its existing text inset. */
+  --hm-lnb-subitem-surface-inset: calc(var(--hm-lnb-item-padding-start) + var(--hm-lnb-group-arrow-size) + var(--hm-lnb-item-gap));
+  --hm-lnb-group-padding-bottom: 8px;
+
+  /* 3-depth: the items of an `LNBGroup` nested in a group. Same 18px; the hierarchy is the extra 20px indent and the connector
+     (a vertical line at the 2-depth text start, a 12px branch to each row's middle, 8px to the text; it ends at the last row). */
+  --hm-lnb-third-min-height: 48px;
+  --hm-lnb-third-padding-block: 12px;
+  --hm-lnb-third-padding-start: 88px;
+  --hm-lnb-third-line-height: 24px;
+  --hm-lnb-third-font-weight: 500;
+  --hm-lnb-third-current-font-weight: 700;
+  --hm-lnb-third-connector-x: var(--hm-lnb-subitem-padding-start);
+  --hm-lnb-third-connector-length: 12px;
+  --hm-lnb-third-connector-width: 1px;
+  --hm-lnb-third-connector-color: color-mix(in srgb, var(--hm-sem-palette-green-tint) 40%, transparent);
+  --hm-lnb-third-connector-current-color: color-mix(in srgb, var(--hm-sem-palette-green-light-2) 40%, transparent);
+
+  --hm-lnb-profile-padding-x: 30px;
+  --hm-lnb-profile-padding-top: 22px;
+  --hm-lnb-profile-gap: 12px;
+  --hm-lnb-profile-name-size: 16px;
+  --hm-lnb-profile-description-size: 12px;
+}
+
+[data-slot="lnb"] {
+  position: relative;
+  box-sizing: border-box;
+  width: var(--hm-lnb-width);
+  min-height: 100%;
+  padding: var(--hm-lnb-padding-top) 0 var(--hm-lnb-padding-bottom);
+  background: var(--hm-lnb-background);
+  color: var(--hm-lnb-text);
+}
+/* The surface keeps going for `--hm-lnb-join` behind the rounded left corners of the content next to the column. */
+[data-slot="lnb"]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 100%;
+  width: var(--hm-lnb-join);
+  background: var(--hm-lnb-background-end);
+  pointer-events: none;
+}
+
+/* Brand (vertical) and profile: text with the dark text border. */
+[data-slot="lnb-brand"] {
+  flex: none;
+  gap: var(--hm-lnb-brand-gap);
+  align-items: flex-start;
+  padding: 0 var(--hm-lnb-brand-padding-x) var(--hm-lnb-brand-padding-bottom);
+}
+[data-slot="lnb-brand"] > :is(img, svg) {
+  flex: 0 0 auto;
+  max-width: 100%;
+  height: auto;
+}
+[data-slot="lnb-brand"] > span {
+  display: grid;
+  gap: var(--hm-lnb-brand-text-gap);
+  min-width: 0;
+  max-width: 100%;
+}
+[data-slot="lnb-brand"] :is(small, strong),
+[data-slot="lnb-profile"] :is(strong, p) {
+  -webkit-text-stroke: 1px var(--hm-lnb-text-stroke-color);
+  paint-order: stroke fill;
+}
+[data-slot="lnb-brand"] small {
+  color: var(--hm-lnb-text-secondary);
+  font-size: var(--hm-lnb-brand-eyebrow-size);
+  font-weight: 700;
+  letter-spacing: var(--hm-lnb-brand-eyebrow-spacing);
+  line-height: 1.2;
+}
+[data-slot="lnb-brand"] strong {
+  font-size: var(--hm-lnb-brand-name-size);
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+[data-slot="lnb"] > [data-slot="lnb-profile"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--hm-lnb-profile-gap);
+  align-self: flex-start;
+  width: fit-content;
+  /* GNB profile's 8px inner hit padding; the existing 30px inset still places the Avatar. */
+  max-width: calc(100% - 2 * (var(--hm-lnb-profile-padding-x) - 8px));
+  margin-top: auto;
+  margin-inline: calc(var(--hm-lnb-profile-padding-x) - 8px);
+  min-height: var(--hm-lnb-third-min-height);
+  padding: 0 8px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+[data-slot="lnb"] > [data-slot="lnb-profile"]:is(:hover, [data-state="open"]) {
+  background: var(--hm-lnb-hover-background);
+}
+[data-slot="lnb"] > [data-slot="lnb-profile"]:focus-visible {
+  outline: var(--hm-lnb-focus-outline);
+  outline-offset: -2px;
+}
+[data-slot="lnb-profile-text"] {
+  min-width: 0;
+}
+[data-slot="lnb-profile"] strong {
+  display: block;
+  font-size: var(--hm-lnb-profile-name-size);
+  overflow-wrap: anywhere;
+}
+[data-slot="lnb-profile"] p {
+  margin: 4px 0 0;
+  color: var(--hm-lnb-text-secondary);
+  font-size: var(--hm-lnb-profile-description-size);
+  overflow-wrap: anywhere;
+}
+
+/* Menu region and the only scroll container of the column (brand and profile are `flex: none`; the column itself never scrolls). In a
+   column of fixed height it fills the space between them (`min-height: 0` lets it shrink below the menu height), so it starts at the
+   brand bottom and ends at the profile top. It is `inset-end + 1px` wider than the column's inner area so a current item can overlap
+   the content by 1px; vertical padding keeps the join curves of the first / last item from being clipped. `direction: rtl` only moves
+   the native scrollbar to the left edge, so it never takes width from the right side where the current item joins the content; the
+   menu itself is LTR again (direct children, see "Menu rows" below). */
+[data-slot="lnb-nav"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  direction: rtl;
+  margin: 0 -1px 0 0;
+  padding: var(--hm-lnb-nav-padding-top) 0 var(--hm-lnb-join) var(--hm-lnb-inset-start);
+  overflow-x: clip;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--hm-sem-palette-white) 35%, transparent) transparent;
+}
+/* Layout owns the old top spacing only when this column owns a Profile. */
+[data-slot="lnb"]:has(> [data-slot="lnb-profile"]) > [data-slot="lnb-nav"] {
+  margin-bottom: var(--hm-lnb-profile-padding-top);
+}
+
+/* ── Item ───────────────────────────────────────────────────────────────────────────────────────────── */
+[data-slot="lnb-item"],
+[data-slot="lnb-group-trigger"] {
+  position: relative;
+  box-sizing: border-box;
+  gap: var(--hm-lnb-item-gap);
+  width: calc(100% - 1px);
+  min-height: var(--hm-lnb-item-min-height);
+  padding: 14px calc(var(--hm-lnb-inset-end) + 12px) 14px var(--hm-lnb-item-padding-start);
+  border: 0;
+  border-radius: var(--hm-lnb-item-radius);
+  background: transparent;
+  color: var(--hm-lnb-text);
+  font-family: inherit;
+  font-size: var(--hm-lnb-item-font-size);
+  line-height: var(--hm-lnb-item-line-height);
+  font-weight: var(--hm-lnb-item-font-weight);
+  text-align: left;
+  text-decoration: none;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  outline: none;
+  -webkit-text-stroke: var(--hm-lnb-item-text-stroke-width) var(--hm-lnb-text-stroke-color);
+  paint-order: stroke fill;
+  text-shadow: var(--hm-lnb-item-text-shadow);
+}
+[data-slot="lnb-item"] > svg:not([data-slot]) {
+  flex: 0 0 auto;
+  width: var(--hm-lnb-item-icon-size);
+  height: var(--hm-lnb-item-icon-size);
+  opacity: var(--hm-lnb-item-icon-opacity);
+  stroke-width: var(--hm-lnb-item-icon-stroke);
+}
+[data-slot="lnb-item"]:not([aria-current="page"]):hover,
+[data-slot="lnb-group-trigger"]:hover {
+  background: var(--hm-lnb-hover-background);
+}
+[data-slot="lnb-item"]:focus-visible,
+[data-slot="lnb-group-trigger"]:focus-visible {
+  outline: var(--hm-lnb-focus-outline);
+  outline-offset: -2px;
+}
+
+/* Current: Beige face, left corners 8, runs 1px into the content, concave corners above and below, inset depth. No text effects. */
+[data-slot="lnb-item"][aria-current="page"] {
+  z-index: 1;
+  width: 100%;
+  background: var(--hm-lnb-current-depth), var(--hm-lnb-current-background);
+  border-radius: var(--hm-lnb-current-radius);
+  color: var(--hm-lnb-current-text);
+  -webkit-text-stroke: 0;
+  text-shadow: none;
+}
+[data-slot="lnb-item"][aria-current="page"]:focus-visible {
+  outline-color: var(--hm-lnb-current-text);
+}
+[data-slot="lnb-item"][aria-current="page"]::before,
+[data-slot="lnb-item"][aria-current="page"]::after {
+  content: "";
+  position: absolute;
+  right: 1px;
+  width: var(--hm-lnb-join);
+  height: var(--hm-lnb-join);
+  pointer-events: none;
+}
+[data-slot="lnb-item"][aria-current="page"]::before {
+  bottom: 100%;
+  background: radial-gradient(circle at top left, transparent calc(var(--hm-lnb-join) - 0.5px), var(--hm-lnb-current-background) var(--hm-lnb-join));
+}
+[data-slot="lnb-item"][aria-current="page"]::after {
+  top: 100%;
+  background: radial-gradient(circle at bottom left, transparent calc(var(--hm-lnb-join) - 0.5px), var(--hm-lnb-current-background) var(--hm-lnb-join));
+}
+
+/* ── Group (HM Collapsible) ─────────────────────────────────────────────────────────────────────────── */
+[data-slot="lnb-group"] {
+  position: relative;
+  width: calc(100% - 1px);
+  border-radius: var(--hm-lnb-group-radius);
+}
+[data-slot="lnb-group"][data-state="open"] {
+  background: var(--hm-lnb-group-open-background);
+}
+[data-slot="lnb-group"][data-state="open"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--hm-lnb-group-open-line);
+  border-right: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+[data-slot="lnb-group-trigger"] {
+  width: 100%;
+  border-radius: var(--hm-lnb-group-radius);
+}
+[data-slot="lnb-group"][data-state="open"] > [data-slot="lnb-group-trigger"]:hover {
+  border-radius: 8px 0 0 0;
+}
+[data-slot="lnb-group"][data-current] > [data-slot="lnb-group-trigger"] {
+  color: var(--hm-lnb-group-current-text);
+}
+[data-slot="lnb-group-arrow"] {
+  flex: 0 0 auto;
+  width: var(--hm-lnb-group-arrow-size);
+  height: var(--hm-lnb-group-arrow-size);
+  stroke-width: 2;
+  filter: drop-shadow(var(--hm-lnb-item-text-shadow));
+  transition: transform 0.15s ease;
+}
+[data-slot="lnb-group-trigger"][data-state="open"] > [data-slot="lnb-group-arrow"] {
+  transform: rotate(90deg);
+}
+[data-slot="lnb-group-content"][data-state="open"] {
+  display: grid;
+  padding-bottom: var(--hm-lnb-group-padding-bottom);
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-item"] {
+  width: 100%;
+  padding-left: var(--hm-lnb-subitem-padding-start);
+  border-radius: 0;
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-item"]:not([aria-current="page"]):hover {
+  border-radius: var(--hm-lnb-item-radius);
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-item"][aria-current="page"] {
+  width: calc(100% + 1px);
+  margin-right: -1px;
+  border-radius: var(--hm-lnb-current-radius);
+}
+/* Only 2-depth destination links: the group keeps its full layout width, while hover, current, focus and click belong to the
+   inset link. Subtract the same inset from text padding and width to preserve text wrapping and the right content join. */
+[data-slot="lnb-nav"] > [data-slot="lnb-group"] > [data-slot="lnb-group-content"] > [data-slot="lnb-item"] {
+  width: calc(100% - var(--hm-lnb-subitem-surface-inset));
+  margin-left: var(--hm-lnb-subitem-surface-inset);
+  padding-left: calc(var(--hm-lnb-subitem-padding-start) - var(--hm-lnb-subitem-surface-inset));
+}
+[data-slot="lnb-nav"] > [data-slot="lnb-group"] > [data-slot="lnb-group-content"] > [data-slot="lnb-item"][aria-current="page"] {
+  width: calc(100% + 1px - var(--hm-lnb-subitem-surface-inset));
+}
+
+/* ── Menu rows (direct children of the menu region) ─────────────────────────────────────────────────── */
+/* Back to LTR. A left scrollbar narrows the content box from the left, so each row starts that much (the scrollbar width, 0 without
+   one) to the left again: `100%` is the content box, the region is `--hm-lnb-width + 1px` wide with `--hm-lnb-inset-start` padding. The
+   scrollbar sits in that padding and the rows keep x 20 → 272 (current 273) with or without it. */
+[data-slot="lnb-nav"] > * {
+  direction: ltr;
+  margin-left: calc(100% + var(--hm-lnb-inset-start) - var(--hm-lnb-width) - 1px);
+}
+[data-slot="lnb-nav"] > :is([data-slot="lnb-item"], [data-slot="lnb-group"]) {
+  width: auto;
+  margin-right: 1px;
+}
+[data-slot="lnb-nav"] > [data-slot="lnb-item"][aria-current="page"] {
+  margin-right: 0;
+}
+
+/* ── Nested group (2-depth group inside a group) ────────────────────────────────────────────────────── */
+/* The outer group already draws the open face and line, so a nested group adds no face, line, padding or width loss; its name
+   lines up with the 2-depth item text. */
+[data-slot="lnb-group-content"] [data-slot="lnb-group"] {
+  width: 100%;
+  border-radius: 0;
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-group"][data-state="open"] {
+  background: none;
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-group"][data-state="open"]::before {
+  content: none;
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-group-trigger"] {
+  padding-left: calc(var(--hm-lnb-subitem-padding-start) - var(--hm-lnb-group-arrow-size) - var(--hm-lnb-item-gap));
+  border-radius: 0;
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-group"] > [data-slot="lnb-group-trigger"]:hover {
+  border-radius: var(--hm-lnb-item-radius);
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-group-content"][data-state="open"] {
+  padding-bottom: 0;
+}
+
+/* 3-depth only: the row owns the existing connector gradients; the link begins at the branch end.
+   Decoration follows the row's real middle when text wraps and never owns pointer interaction. */
+[data-slot="lnb-third-row"] {
+  --hm-lnb-third-line: var(--hm-lnb-third-connector-color);
+  --hm-lnb-third-line-end: 100%;
+  --hm-lnb-third-connector:
+    linear-gradient(var(--hm-lnb-third-line), var(--hm-lnb-third-line)) var(--hm-lnb-third-connector-x) 0 / var(--hm-lnb-third-connector-width) var(--hm-lnb-third-line-end) no-repeat,
+    linear-gradient(var(--hm-lnb-third-line), var(--hm-lnb-third-line)) var(--hm-lnb-third-connector-x) calc(50% - var(--hm-lnb-third-connector-width) / 2) / var(--hm-lnb-third-connector-length) var(--hm-lnb-third-connector-width) no-repeat;
+  position: relative;
+  padding-left: calc(var(--hm-lnb-third-connector-x) + var(--hm-lnb-third-connector-length));
+}
+[data-slot="lnb-third-row"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--hm-lnb-third-connector);
+  pointer-events: none;
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-third-row"] > [data-slot="lnb-item"] {
+  min-height: var(--hm-lnb-third-min-height);
+  padding-top: var(--hm-lnb-third-padding-block);
+  padding-bottom: var(--hm-lnb-third-padding-block);
+  padding-left: calc(var(--hm-lnb-third-padding-start) - var(--hm-lnb-third-connector-x) - var(--hm-lnb-third-connector-length));
+  line-height: var(--hm-lnb-third-line-height);
+  font-weight: var(--hm-lnb-third-font-weight);
+  -webkit-text-stroke: 0;
+  text-shadow: none;
+}
+/* The vertical line ends at the middle of the last row. */
+[data-slot="lnb-third-row"]:last-child {
+  --hm-lnb-third-line-end: 50%;
+}
+[data-slot="lnb-group-content"] [data-slot="lnb-third-row"] > [data-slot="lnb-item"][aria-current="page"] {
+  font-weight: var(--hm-lnb-third-current-font-weight);
+}
+
+/* Desktop only: below 1024px the column is gone and the layout column collapses with it. */
+@media (max-width: 1023px) {
+  :root, [data-hm-theme] {
+    --hm-lnb-width: 0px;
+  }
+  [data-slot="lnb"] {
+    display: none;
+  }
+}
+
+/* LNB Mobile Header is the mobile representation of LNB Mode, independent of GNB/Dashboard. */
+:root, [data-hm-theme] {
+  --hm-lnb-mobile-height: 56px;
+  --hm-lnb-mobile-join: 12px;
+  --hm-lnb-mobile-background: linear-gradient(180deg, var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%, var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
+  /* Mobile menu content (inside the HM Sheet, white face). */
+  --hm-lnb-mobile-link-height: 44px;
+  --hm-lnb-mobile-link-padding-x: 12px;
+  --hm-lnb-mobile-link-radius: var(--hm-radius-control-md);
+  --hm-lnb-mobile-link-font-size: 14px;
+  --hm-lnb-mobile-link-line-height: 20px;
+  --hm-lnb-mobile-link-font-weight: 500;
+  --hm-lnb-mobile-link-text: var(--hm-sem-fg-primary);
+  --hm-lnb-mobile-link-hover-background: var(--accent);
+  --hm-lnb-mobile-link-hover-text: var(--accent-foreground);
+  --hm-lnb-mobile-link-current-background: var(--hm-sem-bg-content);
+  --hm-lnb-mobile-link-current-text: var(--hm-sem-action-primary);
+  --hm-lnb-mobile-link-current-font-weight: 700;
+  --hm-lnb-mobile-group-label-color: var(--hm-sem-fg-secondary);
+  --hm-lnb-mobile-group-gap: 16px;
+  --hm-lnb-mobile-nested-gap: 8px;
+  --hm-lnb-mobile-nested-indent: var(--hm-lnb-mobile-link-padding-x);
+  --hm-lnb-mobile-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+[data-slot="lnb-mobile-header"] { display: none; }
+[data-slot="lnb-mobile-nav"] {
+  display: grid;
+  gap: var(--hm-lnb-mobile-group-gap);
+  padding-bottom: 16px;
+}
+[data-slot="lnb-mobile-group-label"] {
+  margin: 0;
+  padding: 0 var(--hm-lnb-mobile-link-padding-x) 4px;
+  color: var(--hm-lnb-mobile-group-label-color);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+/* A group inside a group (a deeper local level, e.g. the LNB 3-depth): one link padding further in, with room above its title. */
+[data-slot="lnb-mobile-group"] [data-slot="lnb-mobile-group"] {
+  margin-top: var(--hm-lnb-mobile-nested-gap);
+  padding-left: var(--hm-lnb-mobile-nested-indent);
+}
+[data-slot="lnb-mobile-link"] {
+  box-sizing: border-box;
+  min-height: var(--hm-lnb-mobile-link-height);
+  padding: 0 var(--hm-lnb-mobile-link-padding-x);
+  border-radius: var(--hm-lnb-mobile-link-radius);
+  color: var(--hm-lnb-mobile-link-text);
+  font-size: var(--hm-lnb-mobile-link-font-size);
+  line-height: var(--hm-lnb-mobile-link-line-height);
+  font-weight: var(--hm-lnb-mobile-link-font-weight);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  outline: none;
+}
+[data-slot="lnb-mobile-link"]:is(:hover, :focus-visible) {
+  background: var(--hm-lnb-mobile-link-hover-background);
+  color: var(--hm-lnb-mobile-link-hover-text);
+}
+[data-slot="lnb-mobile-link"]:focus-visible {
+  box-shadow: var(--hm-lnb-mobile-focus-ring);
+}
+[data-slot="lnb-mobile-link"][aria-current="page"] {
+  background: var(--hm-lnb-mobile-link-current-background);
+  color: var(--hm-lnb-mobile-link-current-text);
+  font-weight: var(--hm-lnb-mobile-link-current-font-weight);
+}
+
+
+[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"] {
+  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px;
+  border-radius: var(--hm-radius-control-md); color: var(--hm-sem-fg-primary); text-align: left; cursor: pointer;
+}
+[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"]:hover { background: var(--accent); }
+[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"]:focus-visible { outline: 2px solid var(--ring); }
+[data-slot="lnb-mobile-nav"] [data-slot="lnb-profile"] p { color: var(--hm-sem-fg-secondary); }
+@media (max-width: 1023px) {
+  [data-slot="lnb-mobile-header"] {
+    position: relative; display: flex; flex: none; align-items: center; gap: 8px;
+    height: var(--hm-lnb-mobile-height); padding: 0 16px;
+    background: var(--hm-lnb-mobile-background) left top / 100% calc(var(--hm-lnb-mobile-height) + var(--hm-lnb-mobile-join)) no-repeat;
+    color: var(--hm-sem-on-action-primary);
+  }
+  [data-slot="lnb-mobile-header"]::after {
+    content: ""; position: absolute; inset: 100% 0 auto; height: var(--hm-lnb-mobile-join);
+    background: var(--hm-lnb-mobile-background) left bottom / 100% calc(var(--hm-lnb-mobile-height) + var(--hm-lnb-mobile-join)) no-repeat;
+    pointer-events: none;
+  }
+  [data-slot="lnb-mobile-brand"] { min-width: 0; gap: 12px; text-decoration: none; }
+  [data-slot="lnb-mobile-brand"] :is(span, strong) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  [data-slot="lnb-mobile-brand"] strong { font-size: 16px; font-weight: 700; }
+  [data-slot="lnb-mobile-brand"] small { display: none; }
+  [data-slot="lnb-mobile-brand"] > :is(img, svg) { max-height: 32px; width: auto; }
+  [data-slot="lnb-mobile-header"] > [data-slot="button"] { color: var(--hm-sem-on-action-primary); }
+  [data-slot="lnb-mobile-header"] > [data-slot="button"]:hover { background: var(--hm-lnb-hover-background); }
+  [data-slot="lnb-mobile-header"] > [data-slot="button"]:focus-visible { outline: var(--hm-lnb-focus-outline); outline-offset: -2px; box-shadow: none; }
+}
diff --git a/packages/ui/src/theme/loader.ts b/packages/ui/src/theme/loader.ts
new file mode 100644
index 0000000..c8fa7f6
--- /dev/null
+++ b/packages/ui/src/theme/loader.ts
@@ -0,0 +1,36 @@
+import { defaultRuntimeTheme, type RuntimeTheme } from "./contract"
+import { applyRuntimeTheme, isRuntimeTheme, resetRuntimeTheme } from "./runtime"
+import { beginThemeRequest, isCurrentThemeRequest } from "./requests"
+
+/** Fetch/validate only. No DOM access, fixed URL, storage or framework dependency. */
+export async function fetchRuntimeTheme(url: string | URL, request?: RequestInit): Promise<RuntimeTheme> {
+  const response = await fetch(url, request)
+  if (!response.ok) throw new Error(`Theme request failed: HTTP ${response.status}`)
+  const theme: unknown = await response.json()
+  if (!isRuntimeTheme(theme)) throw new Error("Invalid Runtime Theme v1 document")
+  return { schemaVersion: 1, tokens: { ...theme.tokens } }
+}
+
+/** Resolve a supplied default + partial override using the existing v1 contract. */
+export function resolveRuntimeTheme(theme: unknown, defaults: unknown = defaultRuntimeTheme): RuntimeTheme {
+  if (!isRuntimeTheme(defaults) || !isRuntimeTheme(theme)) throw new Error("Invalid Runtime Theme v1 document")
+  return { schemaVersion: 1, tokens: { ...defaultRuntimeTheme.tokens, ...defaults.tokens, ...theme.tokens } }
+}
+
+export type RuntimeThemeLoadOptions = { request?: RequestInit; defaults?: RuntimeTheme }
+
+/** Convenience path: CDN/settings URL -> validate -> optional merge -> apply.
+ * Failure releases this API's override to the host/HM CSS fallback.
+ * Superseded requests never apply or reset the newer owner's theme.
+ */
+export async function loadRuntimeTheme(root: HTMLElement, url: string | URL, options: RuntimeThemeLoadOptions = {}): Promise<boolean> {
+  const request = beginThemeRequest(root)
+  try {
+    const theme = await fetchRuntimeTheme(url, options.request)
+    if (!isCurrentThemeRequest(root, request)) return false
+    return applyRuntimeTheme(root, options.defaults ? resolveRuntimeTheme(theme, options.defaults) : theme)
+  } catch {
+    if (isCurrentThemeRequest(root, request)) resetRuntimeTheme(root)
+    return false
+  }
+}
diff --git a/packages/ui/src/theme/loading-screen.css b/packages/ui/src/theme/loading-screen.css
new file mode 100644
index 0000000..1cb1f54
--- /dev/null
+++ b/packages/ui/src/theme/loading-screen.css
@@ -0,0 +1,97 @@
+/* Loading Screen pattern (visual reference: ui-viz Dashboard LoadingScreen, dashboard-composition.md §18). Pattern-local values.
+   The surface uses the HM brand Green (ui-viz local #0a3322 is not an HM Primitive). The spinner never rotates: each of the 24 bars fades
+   1 → .08 over 1.2s linear, started 0.05s apart clockwise. */
+:root, [data-hm-theme] {
+  --hm-loading-screen-background: var(--hm-sem-action-primary);
+  --hm-loading-screen-foreground: var(--hm-sem-on-action-primary);
+  --hm-loading-screen-inline-padding-block: 36px;
+  --hm-loading-screen-inline-padding-inline: 24px;
+  --hm-loading-screen-inline-radius: 6px;
+  --hm-loading-screen-inline-shadow: inset 0 0 24px color-mix(in srgb, var(--hm-sem-palette-black) 45%, transparent);
+  --hm-loading-screen-gap: 12px;
+  --hm-loading-screen-z-index: 9999;
+  --hm-loading-spinner-size: 44px;
+  --hm-loading-spinner-bar-width: 2.5px;
+  --hm-loading-spinner-bar-height: 10px;
+  --hm-loading-spinner-bar-count: 24;
+  --hm-loading-spinner-bar-color: var(--hm-loading-screen-foreground);
+  --hm-loading-spinner-bar-min-opacity: 0.08;
+  --hm-loading-spinner-duration: 1.2s;
+  --hm-loading-spinner-stagger: 0.05s;
+  --hm-loading-text-font-size: 14px;
+  --hm-loading-text-font-weight: 500;
+  --hm-loading-text-letter-spacing: -0.02em;
+  --hm-loading-text-color: color-mix(in srgb, var(--hm-loading-screen-foreground) 60%, transparent);
+}
+
+[data-slot="loading-screen"] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hm-loading-screen-background);
+  color: var(--hm-loading-screen-foreground);
+  text-align: center;
+}
+[data-slot="loading-screen"][data-variant="inline"] {
+  padding: var(--hm-loading-screen-inline-padding-block) var(--hm-loading-screen-inline-padding-inline);
+  border-radius: var(--hm-loading-screen-inline-radius);
+  box-shadow: var(--hm-loading-screen-inline-shadow);
+  overflow: hidden;
+}
+/* Fullscreen: the spinner + text group is centered in the viewport, same column / gap as inline (spinner and text share one center axis;
+   ui-viz's block assembly put the spinner at the group's leading edge, which read as misaligned). */
+[data-slot="loading-screen"][data-variant="fullscreen"] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--hm-loading-screen-z-index);
+}
+[data-slot="loading-screen-content"] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--hm-loading-screen-gap);
+}
+
+[data-slot="loading-spinner"] {
+  position: relative;
+  width: var(--hm-loading-spinner-size);
+  height: var(--hm-loading-spinner-size);
+}
+[data-slot="loading-spinner"] > span {
+  position: absolute;
+  top: 0;
+  left: calc(50% - var(--hm-loading-spinner-bar-width) / 2);
+  width: var(--hm-loading-spinner-bar-width);
+  height: var(--hm-loading-spinner-bar-height);
+  border-radius: 9999px;
+  background: var(--hm-loading-spinner-bar-color);
+  transform-origin: center calc(var(--hm-loading-spinner-size) / 2);
+  transform: rotate(calc(var(--hm-loading-index) * 360deg / var(--hm-loading-spinner-bar-count)));
+  opacity: var(--hm-loading-spinner-bar-min-opacity);
+  animation: hm-loading-fade var(--hm-loading-spinner-duration) linear infinite;
+  animation-delay: calc(var(--hm-loading-index) * var(--hm-loading-spinner-stagger));
+}
+@keyframes hm-loading-fade {
+  from { opacity: 1; }
+  to { opacity: var(--hm-loading-spinner-bar-min-opacity); }
+}
+/* Reduced motion: no animation; the bars stay as a static comet (bright start fading clockwise). */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="loading-spinner"] > span {
+    animation: none;
+    opacity: calc(1 - var(--hm-loading-index) / (var(--hm-loading-spinner-bar-count) - 1) * (1 - var(--hm-loading-spinner-bar-min-opacity)));
+  }
+}
+
+[data-slot="loading-text"] {
+  margin: 0;
+  font-family: var(--hm-font-family-base);
+  font-size: var(--hm-loading-text-font-size);
+  font-weight: var(--hm-loading-text-font-weight);
+  letter-spacing: var(--hm-loading-text-letter-spacing);
+  color: var(--hm-loading-text-color);
+}
+[data-slot="loading-text"]::after {
+  content: "...";
+}
diff --git a/packages/ui/src/theme/menubar.css b/packages/ui/src/theme/menubar.css
new file mode 100644
index 0000000..0c41b73
--- /dev/null
+++ b/packages/ui/src/theme/menubar.css
@@ -0,0 +1,169 @@
+/* Menubar mapping. ui-viz has no Menubar spec, so these are current HM values built from the HM Semantic tokens. A desktop menu bar:
+   a bordered bar of text triggers whose open / focused trigger is highlighted, and menu content with the same item states as
+   other Radix menus. Radix state attributes (data-highlighted, data-disabled, data-state) drive the states; no HM state attributes.
+   No --hm-dropdown-menu-* token is referenced. */
+:root, [data-hm-theme] {
+  /* Bar */
+  --hm-menubar-background: var(--hm-sem-bg-surface);
+  --hm-menubar-text: var(--hm-sem-fg-primary);
+  --hm-menubar-border-width: 1px;
+  --hm-menubar-border-color: var(--hm-sem-stroke-input-default);
+  --hm-menubar-radius: var(--hm-radius-container);
+  --hm-menubar-height: 38px;
+  --hm-menubar-padding: 2px;
+  --hm-menubar-gap: 2px;
+
+  /* Top-level trigger */
+  --hm-menubar-trigger-padding-x: 12px;
+  --hm-menubar-trigger-radius: 2px;
+  --hm-menubar-trigger-font-size: 14px;
+  --hm-menubar-trigger-line-height: 20px;
+  --hm-menubar-trigger-font-weight: 500;
+
+  /* Content */
+  --hm-menubar-content-background: var(--hm-sem-floating-background);
+  --hm-menubar-content-border-width: var(--hm-sem-floating-border-width);
+  --hm-menubar-content-border-color: var(--hm-sem-floating-border-color);
+  --hm-menubar-content-radius: var(--hm-sem-floating-radius);
+  --hm-menubar-content-shadow: var(--hm-sem-floating-shadow);
+  --hm-menubar-content-padding: 4px;
+
+  --hm-menubar-item-height: 36px;
+  --hm-menubar-item-padding-x: 12px;
+  --hm-menubar-item-gap: 8px;
+  --hm-menubar-item-radius: 2px;
+  --hm-menubar-font-size: 14px;
+  --hm-menubar-line-height: 20px;
+
+  --hm-menubar-highlight-background: var(--hm-sem-surface-highlight);
+  /* Top-level trigger highlight/open keeps the full accent; keyboard focus adds a separate ring. */
+  --hm-menubar-trigger-highlight-background: var(--accent);
+  --hm-menubar-highlight-text: var(--accent-foreground);
+  --hm-menubar-destructive-text: var(--hm-sem-action-destructive);
+  --hm-menubar-destructive-highlight-background: var(--hm-color-action-destructive-hover);
+
+  --hm-menubar-label-color: var(--hm-sem-fg-secondary);
+  --hm-menubar-label-font-size: 12px;
+  --hm-menubar-label-line-height: 18px;
+  --hm-menubar-label-font-weight: 500;
+  --hm-menubar-shortcut-color: var(--hm-sem-fg-secondary);
+  --hm-menubar-shortcut-font-size: 12px;
+  --hm-menubar-separator-color: var(--hm-sem-stroke-input-default);
+  --hm-menubar-indicator-size: 16px;
+  --hm-menubar-radio-dot-size: 8px;
+}
+
+[data-slot="menubar"] {
+  box-sizing: border-box;
+  width: fit-content;
+  height: var(--hm-menubar-height);
+  gap: var(--hm-menubar-gap);
+  padding: var(--hm-menubar-padding);
+  border: var(--hm-menubar-border-width) solid var(--hm-menubar-border-color);
+  border-radius: var(--hm-menubar-radius);
+  background: var(--hm-menubar-background);
+  color: var(--hm-menubar-text);
+}
+[data-slot="menubar-trigger"] {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0 var(--hm-menubar-trigger-padding-x);
+  border-radius: var(--hm-menubar-trigger-radius);
+  font-size: var(--hm-menubar-trigger-font-size);
+  line-height: var(--hm-menubar-trigger-line-height);
+  font-weight: var(--hm-menubar-trigger-font-weight);
+  cursor: default;
+}
+/* Radix sets data-highlighted on the focused top-level trigger and data-state="open" on the open one. */
+[data-slot="menubar-trigger"][data-highlighted],
+[data-slot="menubar-trigger"][data-state="open"] {
+  background: var(--hm-menubar-trigger-highlight-background);
+  color: var(--hm-menubar-highlight-text);
+}
+[data-slot="menubar-trigger"]:focus-visible:not([data-disabled]) {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+[data-slot="menubar-trigger"][data-disabled] {
+  opacity: 0.6;
+}
+
+[data-slot="menubar-content"],
+[data-slot="menubar-sub-content"] {
+  box-sizing: border-box;
+  padding: var(--hm-menubar-content-padding);
+  border: var(--hm-menubar-content-border-width) solid var(--hm-menubar-content-border-color);
+  border-radius: var(--hm-menubar-content-radius);
+  background: var(--hm-menubar-content-background);
+  color: var(--hm-menubar-text);
+  box-shadow: var(--hm-menubar-content-shadow);
+  font-size: var(--hm-menubar-font-size);
+  line-height: var(--hm-menubar-line-height);
+  font-weight: 400;
+}
+
+[data-slot="menubar-item"],
+[data-slot="menubar-checkbox-item"],
+[data-slot="menubar-radio-item"],
+[data-slot="menubar-sub-trigger"] {
+  box-sizing: border-box;
+  min-height: var(--hm-menubar-item-height);
+  gap: var(--hm-menubar-item-gap);
+  padding: 0 var(--hm-menubar-item-padding-x);
+  border-radius: var(--hm-menubar-item-radius);
+}
+[data-slot="menubar-checkbox-item"],
+[data-slot="menubar-radio-item"],
+[data-slot="menubar-item"][data-inset],
+[data-slot="menubar-sub-trigger"][data-inset] {
+  padding-left: calc(var(--hm-menubar-item-padding-x) + var(--hm-menubar-indicator-size) + var(--hm-menubar-item-gap));
+}
+[data-slot="menubar-item-indicator"] {
+  left: var(--hm-menubar-item-padding-x);
+  width: var(--hm-menubar-indicator-size);
+  height: var(--hm-menubar-indicator-size);
+}
+[data-slot="menubar-radio-dot"] {
+  width: var(--hm-menubar-radio-dot-size);
+  height: var(--hm-menubar-radio-dot-size);
+}
+
+[data-slot="menubar-item"][data-highlighted],
+[data-slot="menubar-checkbox-item"][data-highlighted],
+[data-slot="menubar-radio-item"][data-highlighted],
+[data-slot="menubar-sub-trigger"][data-highlighted],
+[data-slot="menubar-sub-trigger"][data-state="open"] {
+  background: var(--hm-menubar-highlight-background);
+  color: var(--hm-menubar-highlight-text);
+}
+[data-slot="menubar-item"][data-variant="destructive"] {
+  color: var(--hm-menubar-destructive-text);
+}
+[data-slot="menubar-item"][data-variant="destructive"][data-highlighted] {
+  background: var(--hm-menubar-destructive-highlight-background);
+  color: var(--hm-menubar-destructive-text);
+}
+
+[data-slot="menubar-label"] {
+  padding: 6px var(--hm-menubar-item-padding-x);
+  color: var(--hm-menubar-label-color);
+  font-size: var(--hm-menubar-label-font-size);
+  line-height: var(--hm-menubar-label-line-height);
+  font-weight: var(--hm-menubar-label-font-weight);
+}
+[data-slot="menubar-label"][data-inset] {
+  padding-left: calc(var(--hm-menubar-item-padding-x) + var(--hm-menubar-indicator-size) + var(--hm-menubar-item-gap));
+}
+[data-slot="menubar-separator"] {
+  margin: var(--hm-menubar-content-padding) calc(-1 * var(--hm-menubar-content-padding));
+  background: var(--hm-menubar-separator-color);
+}
+[data-slot="menubar-shortcut"] {
+  color: var(--hm-menubar-shortcut-color);
+  font-size: var(--hm-menubar-shortcut-font-size);
+  letter-spacing: 0.05em;
+}
+[data-slot="menubar-item"][data-highlighted] [data-slot="menubar-shortcut"],
+[data-slot="menubar-checkbox-item"][data-highlighted] [data-slot="menubar-shortcut"],
+[data-slot="menubar-radio-item"][data-highlighted] [data-slot="menubar-shortcut"] {
+  color: inherit;
+}
diff --git a/packages/ui/src/theme/navigation-menu.css b/packages/ui/src/theme/navigation-menu.css
new file mode 100644
index 0000000..e3a5e04
--- /dev/null
+++ b/packages/ui/src/theme/navigation-menu.css
@@ -0,0 +1,130 @@
+/* Navigation Menu mapping. ui-viz has no Navigation Menu spec, so these are current HM values built from the HM Semantic tokens.
+   It is for navigation destinations: top-level triggers and links share one text-button look, the current location (Radix
+   `data-active`) is bold and tinted, and the content / viewport is a floating panel that can hold links with descriptions.
+   Radix attributes drive the states (data-state, data-active, data-motion). No --hm-dropdown-menu-* token is referenced. */
+:root, [data-hm-theme] {
+  --hm-navigation-menu-height: 34px;
+  --hm-navigation-menu-padding-x: 12px;
+  --hm-navigation-menu-gap: 4px;
+  --hm-navigation-menu-radius: var(--hm-radius-control-md);
+  --hm-navigation-menu-font-size: 14px;
+  --hm-navigation-menu-line-height: 20px;
+  --hm-navigation-menu-font-weight: 500;
+  --hm-navigation-menu-text: var(--hm-sem-fg-primary);
+  --hm-navigation-menu-icon-size: 12px;
+
+  --hm-navigation-menu-hover-background: var(--accent);
+  --hm-navigation-menu-hover-text: var(--accent-foreground);
+  /* Current location: same family as the Tabs / Select highlight (green tint), softer than hover. */
+  --hm-navigation-menu-active-background: var(--hm-sem-surface-highlight);
+  --hm-navigation-menu-active-text: var(--hm-sem-action-primary);
+  --hm-navigation-menu-active-font-weight: 700;
+
+  /* Content / viewport surface */
+  --hm-navigation-menu-background: var(--hm-sem-floating-background);
+  --hm-navigation-menu-border-width: var(--hm-sem-floating-border-width);
+  --hm-navigation-menu-border-color: var(--hm-sem-floating-border-color);
+  --hm-navigation-menu-surface-radius: var(--hm-sem-floating-radius);
+  --hm-navigation-menu-shadow: var(--hm-sem-floating-shadow);
+  --hm-navigation-menu-content-padding: 8px;
+  --hm-navigation-menu-content-min-width: 240px;
+
+  /* Link inside the content (destination with an optional description) */
+  --hm-navigation-menu-item-padding: 8px 12px;
+  --hm-navigation-menu-item-gap: 2px;
+  --hm-navigation-menu-item-radius: 2px;
+  --hm-navigation-menu-description-color: var(--hm-sem-fg-secondary);
+  --hm-navigation-menu-description-font-size: 12px;
+  --hm-navigation-menu-description-line-height: 18px;
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-navigation-menu-disabled-opacity: 0.6;
+}
+
+[data-slot="navigation-menu-list"] {
+  gap: var(--hm-navigation-menu-gap);
+}
+
+/* Top-level trigger and link: the same text-button look. */
+[data-slot="navigation-menu-trigger"],
+[data-slot="navigation-menu-link"] {
+  box-sizing: border-box;
+  align-items: center;
+  height: var(--hm-navigation-menu-height);
+  padding: 0 var(--hm-navigation-menu-padding-x);
+  border-radius: var(--hm-navigation-menu-radius);
+  background: transparent;
+  color: var(--hm-navigation-menu-text);
+  font-size: var(--hm-navigation-menu-font-size);
+  line-height: var(--hm-navigation-menu-line-height);
+  font-weight: var(--hm-navigation-menu-font-weight);
+  text-decoration: none;
+  cursor: pointer;
+}
+[data-slot="navigation-menu-trigger"]:hover,
+[data-slot="navigation-menu-trigger"]:focus-visible,
+[data-slot="navigation-menu-trigger"][data-state="open"],
+[data-slot="navigation-menu-link"]:hover,
+[data-slot="navigation-menu-link"]:focus-visible {
+  background: var(--hm-navigation-menu-hover-background);
+  color: var(--hm-navigation-menu-hover-text);
+}
+[data-slot="navigation-menu-trigger"]:focus-visible,
+[data-slot="navigation-menu-link"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+[data-slot="navigation-menu-link"][data-active] {
+  background: var(--hm-navigation-menu-active-background);
+  color: var(--hm-navigation-menu-active-text);
+  font-weight: var(--hm-navigation-menu-active-font-weight);
+}
+[data-slot="navigation-menu-link"][data-active]:hover,
+[data-slot="navigation-menu-link"][data-active]:focus-visible {
+  background: var(--hm-navigation-menu-hover-background);
+}
+[data-slot="navigation-menu-trigger"]:disabled {
+  opacity: var(--hm-navigation-menu-disabled-opacity);
+  cursor: not-allowed;
+}
+[data-slot="navigation-menu-trigger-icon"] {
+  width: var(--hm-navigation-menu-icon-size);
+  height: var(--hm-navigation-menu-icon-size);
+}
+
+/* Floating panel: the viewport carries the surface (viewport mode) or the content does (viewport={false}). */
+[data-slot="navigation-menu-viewport"],
+[data-viewport="false"] [data-slot="navigation-menu-content"] {
+  border: var(--hm-navigation-menu-border-width) solid var(--hm-navigation-menu-border-color);
+  border-radius: var(--hm-navigation-menu-surface-radius);
+  background: var(--hm-navigation-menu-background);
+  color: var(--hm-navigation-menu-text);
+  box-shadow: var(--hm-navigation-menu-shadow);
+}
+[data-slot="navigation-menu-content"] {
+  box-sizing: border-box;
+  min-width: var(--hm-navigation-menu-content-min-width);
+  padding: var(--hm-navigation-menu-content-padding);
+}
+[data-slot="navigation-menu-indicator-arrow"] {
+  background: var(--hm-navigation-menu-border-color);
+}
+
+/* Links inside the content are destinations: block items, optional title + description children. */
+[data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"] {
+  height: auto;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--hm-navigation-menu-item-gap);
+  padding: var(--hm-navigation-menu-item-padding);
+  border-radius: var(--hm-navigation-menu-item-radius);
+}
+[data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"] [data-description] {
+  color: var(--hm-navigation-menu-description-color);
+  font-size: var(--hm-navigation-menu-description-font-size);
+  line-height: var(--hm-navigation-menu-description-line-height);
+  font-weight: 400;
+}
+[data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"]:hover [data-description],
+[data-slot="navigation-menu-content"] [data-slot="navigation-menu-link"]:focus-visible [data-description] {
+  color: inherit;
+}
diff --git a/packages/ui/src/theme/overlay.css b/packages/ui/src/theme/overlay.css
new file mode 100644
index 0000000..2ea31c3
--- /dev/null
+++ b/packages/ui/src/theme/overlay.css
@@ -0,0 +1,5 @@
+/* The existing shadcn 10% overlay, now theme-derived. */
+[data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"],
+[data-slot="sheet-overlay"], [data-slot="drawer-overlay"] {
+  background-color: var(--hm-sem-overlay-background);
+}
diff --git a/packages/ui/src/theme/page-header.css b/packages/ui/src/theme/page-header.css
new file mode 100644
index 0000000..4078640
--- /dev/null
+++ b/packages/ui/src/theme/page-header.css
@@ -0,0 +1,52 @@
+/* Page Header pattern (layout visual reference: ui-viz page heading, dashboard-composition.md §8): space-between row, aligned to the
+   bottom, 24px gap, 20px to the first card. The Breadcrumb is the HM Breadcrumb (its own 14px look, ui-viz had static 12px text).
+   Spacing values are pattern-local. */
+:root, [data-hm-theme] {
+  --hm-page-header-gap: 24px;
+  --hm-page-header-margin-bottom: 20px;
+  --hm-page-header-breadcrumb-gap: 10px;
+  --hm-page-header-title-font-size: 28px;
+  --hm-page-header-title-line-height: 36px;
+  --hm-page-header-title-font-weight: 700;
+  --hm-page-header-title-color: var(--hm-sem-fg-primary);
+  --hm-page-header-description-gap: 8px;
+  --hm-page-header-description-font-size: 14px;
+  --hm-page-header-description-line-height: 20px;
+  --hm-page-header-description-color: var(--hm-sem-fg-secondary);
+  --hm-page-header-actions-gap: 8px;
+}
+
+[data-slot="page-header"] {
+  align-items: flex-end;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--hm-page-header-gap);
+  min-width: 0;
+  margin-bottom: var(--hm-page-header-margin-bottom);
+}
+[data-slot="page-header-content"] {
+  flex: 1 1 320px;
+  min-width: 0;
+}
+[data-slot="page-header-content"] > [data-slot="breadcrumb"] {
+  margin-bottom: var(--hm-page-header-breadcrumb-gap);
+}
+[data-slot="page-header-title"] {
+  margin: 0;
+  color: var(--hm-page-header-title-color);
+  font-size: var(--hm-page-header-title-font-size);
+  line-height: var(--hm-page-header-title-line-height);
+  font-weight: var(--hm-page-header-title-font-weight);
+  overflow-wrap: anywhere;
+}
+[data-slot="page-header-description"] {
+  margin: var(--hm-page-header-description-gap) 0 0;
+  color: var(--hm-page-header-description-color);
+  font-size: var(--hm-page-header-description-font-size);
+  line-height: var(--hm-page-header-description-line-height);
+  overflow-wrap: anywhere;
+}
+[data-slot="page-header-actions"] {
+  gap: var(--hm-page-header-actions-gap);
+  margin-left: auto;
+}
diff --git a/packages/ui/src/theme/pagination.css b/packages/ui/src/theme/pagination.css
new file mode 100644
index 0000000..7d865e8
--- /dev/null
+++ b/packages/ui/src/theme/pagination.css
@@ -0,0 +1,80 @@
+/* Pagination mapping. ui-viz lists Pagination only as a component name (no spec), so these are current HM values built from the HM
+   Semantic tokens. Links are independent anchor styles (not the Button tokens): a square page link, a padded Previous / Next link,
+   a filled current page, and a dimmed aria-disabled link. */
+:root, [data-hm-theme] {
+  --hm-pagination-gap: 4px;
+  --hm-pagination-height: 34px;
+  --hm-pagination-min-width: 34px;
+  --hm-pagination-padding-x: 12px;
+  --hm-pagination-radius: var(--hm-radius-control-md);
+  --hm-pagination-font-size: 14px;
+  --hm-pagination-line-height: 20px;
+  --hm-pagination-font-weight: 500;
+  --hm-pagination-icon-size: 16px;
+
+  --hm-pagination-text: var(--hm-sem-fg-primary);
+  --hm-pagination-hover-background: var(--hm-sem-surface-highlight);
+  --hm-pagination-hover-text: var(--accent-foreground);
+  --hm-pagination-active-background: var(--hm-sem-action-primary);
+  --hm-pagination-active-text: var(--hm-sem-on-action-primary);
+  --hm-pagination-active-font-weight: 700;
+  --hm-pagination-ellipsis-color: var(--hm-sem-fg-secondary);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-pagination-disabled-opacity: 0.6;
+}
+
+[data-slot="pagination-content"] {
+  gap: var(--hm-pagination-gap);
+}
+[data-slot="pagination-link"] {
+  box-sizing: border-box;
+  height: var(--hm-pagination-height);
+  min-width: var(--hm-pagination-min-width);
+  padding: 0;
+  border-radius: var(--hm-pagination-radius);
+  color: var(--hm-pagination-text);
+  font-size: var(--hm-pagination-font-size);
+  line-height: var(--hm-pagination-line-height);
+  font-weight: var(--hm-pagination-font-weight);
+  text-decoration: none;
+  outline: none;
+}
+[data-slot="pagination-link"][data-size="default"] {
+  padding: 0 var(--hm-pagination-padding-x);
+}
+[data-slot="pagination-link"] > svg {
+  width: var(--hm-pagination-icon-size);
+  height: var(--hm-pagination-icon-size);
+  flex-shrink: 0;
+}
+[data-slot="pagination-link"]:hover {
+  background: var(--hm-pagination-hover-background);
+  color: var(--hm-pagination-hover-text);
+}
+[data-slot="pagination-link"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+/* Current page: filled, stays filled on hover. */
+[data-slot="pagination-link"][aria-current="page"] {
+  background: var(--hm-pagination-active-background);
+  color: var(--hm-pagination-active-text);
+  font-weight: var(--hm-pagination-active-font-weight);
+}
+[data-slot="pagination-link"][aria-disabled="true"] {
+  opacity: var(--hm-pagination-disabled-opacity);
+  cursor: not-allowed;
+}
+[data-slot="pagination-link"][aria-disabled="true"]:hover {
+  background: transparent;
+  color: var(--hm-pagination-text);
+}
+[data-slot="pagination-ellipsis"] {
+  width: var(--hm-pagination-min-width);
+  height: var(--hm-pagination-height);
+  color: var(--hm-pagination-ellipsis-color);
+}
+[data-slot="pagination-ellipsis"] > svg {
+  width: var(--hm-pagination-icon-size);
+  height: var(--hm-pagination-icon-size);
+}
diff --git a/packages/ui/src/theme/popover.css b/packages/ui/src/theme/popover.css
new file mode 100644
index 0000000..d9a9d05
--- /dev/null
+++ b/packages/ui/src/theme/popover.css
@@ -0,0 +1,30 @@
+/* Popover mapping. ui-viz has no Popover spec (inventory: design pending), so these are current HM values from the HM Semantic tokens.
+   Popover is a non-modal floating panel: no overlay, no focus trap. Radix owns Escape / outside close and focus return. */
+:root, [data-hm-theme] {
+  --hm-popover-background: var(--hm-sem-floating-background);
+  --hm-popover-text: var(--hm-sem-fg-primary);
+  --hm-popover-border-width: var(--hm-sem-floating-border-width);
+  --hm-popover-border-color: var(--hm-sem-floating-border-color);
+  --hm-popover-radius: var(--hm-sem-floating-radius);
+  --hm-popover-shadow: var(--hm-sem-floating-shadow);
+  --hm-popover-padding: 16px;
+  --hm-popover-width: 288px;
+  --hm-popover-font-size: 14px;
+  --hm-popover-line-height: 20px;
+  --hm-popover-font-weight: 400;
+}
+
+[data-slot="popover-content"] {
+  box-sizing: border-box;
+  width: var(--hm-popover-width);
+  max-width: calc(100vw - 16px);
+  padding: var(--hm-popover-padding);
+  border: var(--hm-popover-border-width) solid var(--hm-popover-border-color);
+  border-radius: var(--hm-popover-radius);
+  background: var(--hm-popover-background);
+  color: var(--hm-popover-text);
+  box-shadow: var(--hm-popover-shadow);
+  font-size: var(--hm-popover-font-size);
+  line-height: var(--hm-popover-line-height);
+  font-weight: var(--hm-popover-font-weight);
+}
diff --git a/packages/ui/src/theme/primitives.css b/packages/ui/src/theme/primitives.css
new file mode 100644
index 0000000..605db94
--- /dev/null
+++ b/packages/ui/src/theme/primitives.css
@@ -0,0 +1,46 @@
+/* Generated from themes/default.json + scripts/theme-templates/primitives.css. Do not edit. */
+/* HM color palette. Primitive names describe colors, not UI roles. */
+:root {
+  --hm-green-light-4: #34daaa;
+  --hm-green-light-3: #249473;
+  --hm-green-light-2: #266651;
+  --hm-green-light-1: #205241;
+  --hm-green-default: #123328;
+  --hm-green-dark-1: #0a221d;
+  --hm-green-dark-2: #071e18;
+
+  --hm-brown-light-2: #897445;
+  --hm-brown-light-1: #604f32;
+  --hm-brown-default: #3e3523;
+  --hm-brown-dark-1: #352d1d;
+
+  --hm-brown-light-4: #ecd4a2;
+
+  --hm-orange-light-4: #feba88;
+  --hm-orange-default: #cc5200;
+
+  --hm-warm-neutral-light: #e0dace;
+  --hm-warm-neutral-mid: #9a9284;
+  --hm-warm-neutral-dark: #6e6759;
+  --hm-beige-light: #f5f0e5;
+
+  --hm-red-danger: #d32f2f;
+  --hm-white: #ffffff;
+  --hm-black: #000000;
+  --hm-neutral-gray-500: #999999;
+
+  /* Existing preview values without an approved palette alias. */
+  --hm-green-tone-1: #1f8265;
+  --hm-green-tone-2: #165c47;
+  --hm-green-tone-3: #114838;
+  --hm-green-tone-4: #08241c;
+  --hm-warm-neutral-pale: #dedbd2;
+  --hm-warm-neutral-secondary: #ede8db;
+  --hm-warm-neutral-muted: #f4f1ea;
+  --hm-green-tint: #bddfd4;
+}
+
+/* Accent for the current parent group on the green LNB surface (ui-viz color.action.accent-on-green). */
+:root {
+  --hm-yellow-accent: #ffc600;
+}
diff --git a/packages/ui/src/theme/progress.css b/packages/ui/src/theme/progress.css
new file mode 100644
index 0000000..0b6fa61
--- /dev/null
+++ b/packages/ui/src/theme/progress.css
@@ -0,0 +1,19 @@
+/* Progress mapping. ui-viz has no Progress spec (inventory name only), so these are current HM values from the HM Semantic /
+   Primitive tokens. One default look: a pale track and a primary indicator. Status colors (success / warning / error) are not defined
+   and are not created here. */
+:root, [data-hm-theme] {
+  --hm-progress-height: 8px;
+  --hm-progress-radius: 9999px;
+  --hm-progress-track-background: var(--hm-sem-palette-warm-neutral-light);
+  /* Shares the Active Semantic while the Progress and Active color policies are the same; split later if they diverge. */
+  --hm-progress-indicator-background: var(--hm-sem-state-active);
+}
+
+[data-slot="progress"] {
+  height: var(--hm-progress-height);
+  border-radius: var(--hm-progress-radius);
+  background: var(--hm-progress-track-background);
+}
+[data-slot="progress-indicator"] {
+  background: var(--hm-progress-indicator-background);
+}
diff --git a/packages/ui/src/theme/radio-group.css b/packages/ui/src/theme/radio-group.css
new file mode 100644
index 0000000..9a5fb1c
--- /dev/null
+++ b/packages/ui/src/theme/radio-group.css
@@ -0,0 +1,57 @@
+/* Radio Group mapping: current HM values built from the shared Semantic tokens (ui-viz has no Radio spec; reference only).
+   States use Radix attributes: [data-state="checked"|"unchecked"], :hover, :focus-visible, :disabled, [aria-invalid="true"]; layout uses data-orientation. */
+:root, [data-hm-theme] {
+  --hm-radio-size: 18px;
+  --hm-radio-border-width: 1px;
+  --hm-radio-dot-size: 8px;
+  --hm-radio-background: var(--hm-sem-bg-surface);
+  --hm-radio-border-color: var(--hm-sem-stroke-default);
+  --hm-radio-hover-border-color: var(--hm-sem-action-primary);
+  --hm-radio-checked-border-color: var(--hm-sem-state-active);
+  --hm-radio-dot-color: var(--hm-sem-state-active);
+  --hm-radio-error-border-color: var(--hm-sem-action-destructive);
+  --hm-radio-group-gap: 12px;
+  --hm-radio-group-gap-horizontal: 16px;
+}
+
+[data-slot="radio-group"] {
+  gap: var(--hm-radio-group-gap);
+}
+[data-slot="radio-group"][data-orientation="horizontal"] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--hm-radio-group-gap-horizontal);
+}
+
+[data-slot="radio-group-item"] {
+  box-sizing: border-box;
+  width: var(--hm-radio-size);
+  height: var(--hm-radio-size);
+  padding: 0;
+  border: var(--hm-radio-border-width) solid var(--hm-radio-border-color);
+  border-radius: 50%;
+  background: var(--hm-radio-background);
+  color: var(--hm-radio-dot-color);
+  box-shadow: none;
+  cursor: pointer;
+}
+[data-slot="radio-group-item"] svg {
+  width: var(--hm-radio-dot-size);
+  height: var(--hm-radio-dot-size);
+}
+[data-slot="radio-group-item"]:hover:not(:disabled) {
+  border-color: var(--hm-radio-hover-border-color);
+}
+[data-slot="radio-group-item"][data-state="checked"] {
+  border-color: var(--hm-radio-checked-border-color);
+}
+/* Focus level is the shadcn ring (ui_viz global focus is TBD); keep the ring variables because the theme sets box-shadow: none. */
+[data-slot="radio-group-item"]:focus-visible {
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
+}
+[data-slot="radio-group-item"][aria-invalid="true"] {
+  border-color: var(--hm-radio-error-border-color);
+}
+[data-slot="radio-group-item"]:disabled {
+  cursor: not-allowed;
+}
diff --git a/packages/ui/src/theme/requests.ts b/packages/ui/src/theme/requests.ts
new file mode 100644
index 0000000..267ba61
--- /dev/null
+++ b/packages/ui/src/theme/requests.ts
@@ -0,0 +1,5 @@
+// One owner per root. A newer load/apply/reset supersedes an in-flight load.
+const requests = new WeakMap<HTMLElement, object>()
+export function beginThemeRequest(root: HTMLElement) { const request = {}; requests.set(root, request); return request }
+export function isCurrentThemeRequest(root: HTMLElement, request: object) { return requests.get(root) === request }
+export function invalidateThemeRequest(root: HTMLElement) { requests.delete(root) }
diff --git a/packages/ui/src/theme/resizable.css b/packages/ui/src/theme/resizable.css
new file mode 100644
index 0000000..d0a68b4
--- /dev/null
+++ b/packages/ui/src/theme/resizable.css
@@ -0,0 +1,74 @@
+/* Resizable mapping. ui-viz has no Resizable spec, so these are current HM values built from the HM Semantic / Primitive tokens.
+   react-resizable-panels v4 owns the drag, constraints, keyboard and the pointer target (it expands the target around the thin
+   separator); here only the divider and the optional grip are styled. The separator state is the library's `data-separator`
+   ("inactive" | "hover" | "active") and `:focus-visible`. Panels and Group keep the library's inline sizing.
+   The divider look is in `@layer components` so a consumer's utility classes still win. Nothing here references Separator tokens. */
+:root, [data-hm-theme] {
+  --hm-resizable-divider-width: 1px;
+  --hm-resizable-divider-color: var(--hm-sem-stroke-input-default);
+  /* Hover: a stronger neutral; dragging and keyboard focus: the primary color. The divider widens by a halo, not by layout. */
+  --hm-resizable-hover-color: var(--hm-sem-stroke-default);
+  --hm-resizable-active-color: var(--hm-sem-action-primary);
+  --hm-resizable-focus-color: var(--hm-sem-stroke-input-focus);
+  --hm-resizable-halo-width: 1px;
+
+  --hm-resizable-grip-width: 12px;
+  --hm-resizable-grip-height: 16px;
+  --hm-resizable-grip-radius: 2px;
+  --hm-resizable-grip-background: var(--hm-sem-bg-surface);
+  --hm-resizable-grip-border-color: var(--hm-sem-stroke-input-default);
+  --hm-resizable-grip-icon-size: 10px;
+  --hm-resizable-grip-icon-color: var(--hm-sem-fg-secondary);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-resizable-disabled-opacity: 0.6;
+}
+
+@layer components {
+  [data-slot="resizable-handle"] {
+    flex-shrink: 0;
+    background: var(--hm-resizable-divider-color);
+  }
+  /* A separator between side-by-side panels is vertical; between stacked panels it is horizontal. */
+  [data-slot="resizable-handle"][aria-orientation="vertical"] {
+    width: var(--hm-resizable-divider-width);
+  }
+  [data-slot="resizable-handle"][aria-orientation="horizontal"] {
+    height: var(--hm-resizable-divider-width);
+  }
+
+  [data-slot="resizable-handle"][data-separator="hover"] {
+    background: var(--hm-resizable-hover-color);
+    box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-hover-color);
+  }
+  [data-slot="resizable-handle"][data-separator="active"] {
+    background: var(--hm-resizable-active-color);
+    box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-active-color);
+  }
+  [data-slot="resizable-handle"]:focus-visible {
+    background: var(--hm-resizable-focus-color);
+    box-shadow: 0 0 0 var(--hm-resizable-halo-width) var(--hm-resizable-focus-color);
+  }
+  [data-slot="resizable-handle"][data-disabled],
+  [data-slot="resizable-handle"][aria-disabled="true"] {
+    opacity: var(--hm-resizable-disabled-opacity);
+  }
+
+  [data-slot="resizable-handle-grip"] {
+    box-sizing: border-box;
+    width: var(--hm-resizable-grip-width);
+    height: var(--hm-resizable-grip-height);
+    border: 1px solid var(--hm-resizable-grip-border-color);
+    border-radius: var(--hm-resizable-grip-radius);
+    background: var(--hm-resizable-grip-background);
+    color: var(--hm-resizable-grip-icon-color);
+  }
+  [data-slot="resizable-handle-grip"] > svg {
+    width: var(--hm-resizable-grip-icon-size);
+    height: var(--hm-resizable-grip-icon-size);
+  }
+  /* Between stacked panels the grip lies down. */
+  [data-slot="resizable-handle"][aria-orientation="horizontal"] [data-slot="resizable-handle-grip"] {
+    transform: rotate(90deg);
+  }
+}
diff --git a/packages/ui/src/theme/runtime.ts b/packages/ui/src/theme/runtime.ts
new file mode 100644
index 0000000..22a6cdc
--- /dev/null
+++ b/packages/ui/src/theme/runtime.ts
@@ -0,0 +1,56 @@
+import { runtimeThemeContract, runtimeGradientGroups, type RuntimeThemeToken } from "./contract"
+import { invalidateThemeRequest } from "./requests"
+
+type SavedProperty = { property: string; value: string; priority: string }
+const applied = new WeakMap<HTMLElement, { properties: SavedProperty[]; scope: string | null }>()
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value)
+
+/** Restore the host's previous inline values and scope. */
+export function resetRuntimeTheme(root: HTMLElement) {
+  invalidateThemeRequest(root)
+  const previous = applied.get(root)
+  if (!previous) return
+  for (const { property, value, priority } of previous.properties) {
+    if (value) root.style.setProperty(property, value, priority)
+    else root.style.removeProperty(property)
+  }
+  if (previous.scope === null) root.removeAttribute("data-hm-theme")
+  else root.setAttribute("data-hm-theme", previous.scope)
+  applied.delete(root)
+}
+
+/** Validate without touching the DOM (editors/loaders can preserve their last valid value). */
+export function isRuntimeTheme(theme: unknown): theme is import("./contract").RuntimeTheme {
+  if (!isRecord(theme) || theme.schemaVersion !== 1 || !isRecord(theme.tokens)) return false
+  const tokens = theme.tokens
+  for (const group of runtimeGradientGroups) {
+    const count = group.filter(key => Object.hasOwn(tokens, key)).length
+    if (count !== 0 && count !== group.length) return false
+  }
+  for (const [key, value] of Object.entries(tokens)) {
+    if (!Object.hasOwn(runtimeThemeContract, key) || typeof value !== "string") return false
+    const definition = runtimeThemeContract[key as RuntimeThemeToken]
+    const valid = definition.type === "radius"
+      ? /^(?:[2-9]|1[0-2])px$/.test(value)
+      : /^#[0-9a-fA-F]{6}$/.test(value)
+    if (!valid) return false
+  }
+  return true
+}
+
+/** Atomic validation. Invalid documents release the previous override to host/default. */
+export function applyRuntimeTheme(root: HTMLElement, theme: unknown): boolean {
+  if (!isRuntimeTheme(theme)) { resetRuntimeTheme(root); return false }
+  const values = Object.entries(theme.tokens).map(([key, value]) =>
+    [runtimeThemeContract[key as RuntimeThemeToken].property, value!] as const)
+  resetRuntimeTheme(root)
+  const scope = root.getAttribute("data-hm-theme")
+  const properties = values.map(([property]) => ({
+    property, value: root.style.getPropertyValue(property), priority: root.style.getPropertyPriority(property),
+  }))
+  root.setAttribute("data-hm-theme", "runtime")
+  for (const [property, value] of values) root.style.setProperty(property, value)
+  applied.set(root, { properties, scope })
+  return true
+}
diff --git a/packages/ui/src/theme/scroll-area.css b/packages/ui/src/theme/scroll-area.css
new file mode 100644
index 0000000..fb88b12
--- /dev/null
+++ b/packages/ui/src/theme/scroll-area.css
@@ -0,0 +1,23 @@
+/* Scroll Area mapping. ui-viz has no Scroll Area spec, so these are current HM values. Radix keeps the scroll behavior and the
+   default scrollbar `type="hover"` (the bar appears while hovering or scrolling); only the scrollbar chrome is styled. */
+:root, [data-hm-theme] {
+  --hm-scroll-area-scrollbar-size: 10px;
+  --hm-scroll-area-thumb-background: var(--hm-sem-stroke-default);
+  --hm-scroll-area-thumb-hover-background: var(--hm-sem-fg-secondary);
+  --hm-scroll-area-thumb-radius: 9999px;
+}
+
+[data-slot="scroll-area-scrollbar"][data-orientation="vertical"] {
+  width: var(--hm-scroll-area-scrollbar-size);
+}
+[data-slot="scroll-area-scrollbar"][data-orientation="horizontal"] {
+  height: var(--hm-scroll-area-scrollbar-size);
+}
+[data-slot="scroll-area-thumb"] {
+  border-radius: var(--hm-scroll-area-thumb-radius);
+  background: var(--hm-scroll-area-thumb-background);
+}
+[data-slot="scroll-area-thumb"]:hover,
+[data-slot="scroll-area-scrollbar"][data-state="visible"]:active [data-slot="scroll-area-thumb"] {
+  background: var(--hm-scroll-area-thumb-hover-background);
+}
diff --git a/packages/ui/src/theme/select.css b/packages/ui/src/theme/select.css
new file mode 100644
index 0000000..16f85f9
--- /dev/null
+++ b/packages/ui/src/theme/select.css
@@ -0,0 +1,203 @@
+/* Select mapping: the trigger and its connected list. Label and Helper/Error text are consumer composition.
+   States use the Radix attributes (data-state, data-placeholder, data-highlighted, data-side) and :disabled; size uses data-size. */
+:root, [data-hm-theme] {
+  /* ui_viz: docs/components/select.md §1.1 D-004, §8 — Confirmed. Control height is the inner height: the 1px border is added
+     around it (outer 34 / 44). Not aliased to Input or Button. */
+  --hm-select-control-height-md: 32px;
+  --hm-select-control-height-lg: 42px;
+  --hm-select-border-width: 1px;
+  /* ui_viz: docs/components/select.md §8, §17 — BASELINE_VALUE (current applied contract) */
+  --hm-select-padding-x: 12px;
+  --hm-select-gap: 12px;
+  /* ui_viz select.md §8: Option min-height 42 for both sizes (no medium value defined). Kept as one token per size so a
+     later Medium decision changes only this line. */
+  --hm-select-option-height-md: 42px;
+  --hm-select-option-height-lg: 42px;
+  --hm-select-radius: var(--hm-radius-input);
+
+  /* ui_viz: docs/components/select.md §9 — large body-md 16/24/400, medium trigger body-sm 14/20/400, option body-md in both sizes */
+  --hm-select-font-size-md: 14px;
+  --hm-select-line-height-md: 20px;
+  --hm-select-font-size-lg: 16px;
+  --hm-select-line-height-lg: 24px;
+  /* Option typography follows the Select size (Trigger and list share one size). ui_viz left the Medium Option Role open
+     (TBD, medium Trigger body-sm vs Option body-md); the Medium Option takes the Medium Trigger value 14/20/400. */
+  --hm-select-option-font-size-md: var(--hm-select-font-size-md);
+  --hm-select-option-line-height-md: var(--hm-select-line-height-md);
+  --hm-select-option-font-size-lg: var(--hm-select-font-size-lg);
+  --hm-select-option-line-height-lg: var(--hm-select-line-height-lg);
+  --hm-select-font-weight: 400;
+
+  /* ui_viz: docs/components/select.md §10, §1.3 — Confirmed (D-005, M06) */
+  --hm-select-background: var(--hm-sem-bg-surface);
+  --hm-select-text: var(--hm-sem-fg-primary);
+  --hm-select-placeholder: var(--hm-sem-fg-placeholder);
+  --hm-select-border-color: var(--hm-sem-stroke-input-default);
+  --hm-select-focus-border-color: var(--hm-sem-stroke-input-focus);
+  --hm-select-seam-color: var(--hm-sem-stroke-input-default);
+  /* Open list face measured from the target Open screen: #e1f1ec on the white list = 45% of --accent (#bddfd4).
+     Same mix the Toggle/Calendar hover faces use. The list shadow is the target's soft, downward-offset one (not the floating-surface shadow). */
+  --hm-select-option-state-background: var(--hm-sem-surface-highlight);
+  --hm-select-option-state-text: var(--accent-foreground);
+  --hm-select-content-shadow: 0 2px 24px color-mix(in srgb, var(--hm-sem-palette-black) 12%, transparent);
+
+  /* ui_viz: docs/components/select.md §1.2 — user-confirmed Disabled: opacity .6, same white face and #DEDBD2 border */
+  --hm-select-disabled-opacity: 0.6;
+  /* ui_viz: docs/components/select.md §7 — indicator glyph stroke (user-provided Source) */
+  --hm-select-indicator-color: var(--hm-sem-palette-indicator);
+}
+
+/* Trigger. Large is the default when size is omitted. */
+[data-slot="select-trigger"] {
+  --hm-select-control-height: var(--hm-select-control-height-lg);
+  --hm-select-font-size: var(--hm-select-font-size-lg);
+  --hm-select-line-height: var(--hm-select-line-height-lg);
+  box-sizing: border-box;
+  min-width: 0;
+  height: auto;
+  min-height: calc(var(--hm-select-control-height) + 2 * var(--hm-select-border-width));
+  gap: var(--hm-select-gap);
+  padding: 0 var(--hm-select-padding-x);
+  border: var(--hm-select-border-width) solid var(--hm-select-border-color);
+  border-radius: var(--hm-select-radius);
+  background: var(--hm-select-background);
+  color: var(--hm-select-text);
+  font-size: var(--hm-select-font-size);
+  line-height: var(--hm-select-line-height);
+  font-weight: var(--hm-select-font-weight);
+}
+[data-slot="select-trigger"] > [data-slot="select-value"] {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+[data-slot="select-trigger"][data-size="medium"] {
+  --hm-select-control-height: var(--hm-select-control-height-md);
+  --hm-select-font-size: var(--hm-select-font-size-md);
+  --hm-select-line-height: var(--hm-select-line-height-md);
+}
+[data-slot="select-trigger"][data-placeholder] {
+  color: var(--hm-select-placeholder);
+}
+[data-slot="select-icon"] {
+  width: 18px;
+  height: 18px;
+  color: var(--hm-select-indicator-color);
+}
+
+/* Focus and Open retain the focus-colored outer outline. The connected edge follows Content's actual side. */
+[data-slot="select-trigger"]:focus {
+  border-color: var(--hm-select-focus-border-color);
+}
+[data-slot="select-trigger"][data-state="open"] {
+  border-color: var(--hm-select-focus-border-color);
+}
+
+/* Direction is mirrored from the actual Radix Content through its ARIA relationship. */
+[data-slot="select-trigger"][data-state="open"][data-side="bottom"] {
+  border-radius: var(--hm-select-radius) var(--hm-select-radius) 0 0;
+  border-bottom-color: var(--hm-select-seam-color);
+}
+[data-slot="select-trigger"][data-state="open"][data-side="top"] {
+  border-radius: 0 0 var(--hm-select-radius) var(--hm-select-radius);
+  border-top-color: var(--hm-select-seam-color);
+}
+
+/* Disabled keeps the Default paint and dims the whole control. */
+[data-slot="select-trigger"]:disabled {
+  border-color: var(--hm-select-border-color);
+  background: var(--hm-select-background);
+  opacity: var(--hm-select-disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Invalid belongs to the trigger border, never the popup surface or its neutral seam. */
+[data-slot="select-trigger"][aria-invalid="true"] {
+  border-color: var(--hm-sem-action-destructive);
+}
+[data-slot="select-trigger"][aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+[data-slot="select-trigger"][aria-invalid="true"][data-state="open"][data-side="bottom"] {
+  border-bottom-color: var(--hm-select-seam-color);
+}
+[data-slot="select-trigger"][aria-invalid="true"][data-state="open"][data-side="top"] {
+  border-top-color: var(--hm-select-seam-color);
+}
+
+/* List: same outer width as the trigger, border in the focus color, rounded only at the bottom (connected outline). */
+[data-slot="select-content"] {
+  box-sizing: border-box;
+  border: var(--hm-select-border-width) solid var(--hm-select-focus-border-color);
+  border-radius: var(--hm-select-radius);
+  background: var(--hm-select-background);
+  color: var(--hm-select-text);
+  box-shadow: var(--hm-select-content-shadow);
+}
+[data-slot="select-content"]:not([data-align-trigger="true"]) {
+  width: var(--radix-select-trigger-width);
+  min-width: var(--radix-select-trigger-width);
+}
+[data-slot="select-content"][data-side="bottom"] {
+  border-radius: 0 0 var(--hm-select-radius) var(--hm-select-radius);
+  /* sideOffset=-1 puts this top border on the trigger's bottom border, so it is the one seam line between the two.
+     Only the seam is the quiet control border; the outer outline stays the focus color. */
+  border-top-color: var(--hm-select-seam-color);
+}
+
+[data-slot="select-content"][data-side="top"] {
+  border-radius: var(--hm-select-radius) var(--hm-select-radius) 0 0;
+  border-bottom-color: var(--hm-select-seam-color);
+}
+
+/* Content uses the trigger's outer width. Its Viewport lives inside that bordered box, so it must fill the
+   available inner width instead of applying the trigger's outer width as another minimum. */
+[data-slot="select-content"] [data-position="popper"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Option profile follows the Select size: SelectContent carries data-size (from the Trigger, through context), the Portal
+   keeps it out of the Trigger subtree. Width is not size-dependent (Content = Trigger outer width).
+   Hover, Selected and Keyboard Active use the same face (set by the shadcn state classes). */
+[data-slot="select-content"] {
+  --hm-select-option-height: var(--hm-select-option-height-lg);
+  --hm-select-option-font-size: var(--hm-select-option-font-size-lg);
+  --hm-select-option-line-height: var(--hm-select-option-line-height-lg);
+}
+[data-slot="select-content"][data-size="medium"] {
+  --hm-select-option-height: var(--hm-select-option-height-md);
+  --hm-select-option-font-size: var(--hm-select-option-font-size-md);
+  --hm-select-option-line-height: var(--hm-select-option-line-height-md);
+}
+[data-slot="select-item"] {
+  box-sizing: border-box;
+  min-height: var(--hm-select-option-height);
+  padding: 0 var(--hm-select-padding-x);
+  border-radius: 0;
+  font-size: var(--hm-select-option-font-size);
+  line-height: var(--hm-select-option-line-height);
+  font-weight: var(--hm-select-font-weight);
+}
+
+/* ItemText: a flex item defaults to min-width:auto, so an unbreakable label kept its full width and pushed the row past the
+   list (Item scrollWidth > Viewport clientWidth). Let it shrink to the row and truncate, like the trigger value. */
+[data-slot="select-item"] > span {
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Radix keeps selection and the current pointer/keyboard highlight as separate states. ui_viz gives both
+   the same option face, so use the actual Radix attributes rather than DOM position or focus alone. */
+[data-slot="select-item"][data-state="checked"],
+[data-slot="select-item"][data-highlighted] {
+  background: var(--hm-select-option-state-background);
+  color: var(--hm-select-option-state-text);
+}
diff --git a/packages/ui/src/theme/separator.css b/packages/ui/src/theme/separator.css
new file mode 100644
index 0000000..1c451f8
--- /dev/null
+++ b/packages/ui/src/theme/separator.css
@@ -0,0 +1,17 @@
+/* Separator mapping — current HM values. ui-viz has no standalone Separator (only per-component divider values), so this is a plain 1px line.
+   The color is a divider tone (the same pale warm neutral the HM input / Dialog outlines use) referenced from the Primitive; no Semantic exists for it yet. */
+:root, [data-hm-theme] {
+  --hm-separator-thickness: 1px;
+  --hm-separator-color: var(--hm-sem-stroke-input-default);
+}
+
+[data-slot="separator"] {
+  background: var(--hm-separator-color);
+}
+[data-slot="separator"][data-orientation="horizontal"] {
+  height: var(--hm-separator-thickness);
+}
+[data-slot="separator"][data-orientation="vertical"] {
+  width: var(--hm-separator-thickness);
+  min-height: 1em;
+}
diff --git a/packages/ui/src/theme/sheet.css b/packages/ui/src/theme/sheet.css
new file mode 100644
index 0000000..a32ced4
--- /dev/null
+++ b/packages/ui/src/theme/sheet.css
@@ -0,0 +1,87 @@
+/* Sheet mapping. ui-viz has no Sheet spec (the Dialog doc lists "side sheet" as out of scope), so these are current HM values built
+   from the HM Semantic tokens. Modal panel attached to a viewport edge; Radix keeps Portal, focus trap, Escape and focus return.
+   Position and slide animation stay the shadcn classes; the Overlay keeps the shadcn default. Values repeat Dialog's look in
+   meaning only: no --hm-dialog-* token is referenced. */
+:root, [data-hm-theme] {
+  --hm-sheet-background: var(--hm-sem-bg-surface);
+  --hm-sheet-text: var(--hm-sem-fg-primary);
+  --hm-sheet-border-width: 1px;
+  --hm-sheet-border-color: var(--hm-sem-stroke-input-default);
+  --hm-sheet-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+
+  /* Left / right: fixed width, never wider than the viewport minus a strip of Overlay. Top / bottom: full width, height by content. */
+  --hm-sheet-width: 400px;
+  --hm-sheet-edge-gap: 48px;
+
+  --hm-sheet-padding: 24px;
+  --hm-sheet-header-gap: 8px;
+  --hm-sheet-footer-gap: 8px;
+  /* Space reserved at the Header end for the Close button (28px button + 8px gap). */
+  --hm-sheet-close-clearance: 36px;
+
+  --hm-sheet-title-font-size: 20px;
+  --hm-sheet-title-line-height: 28px;
+  --hm-sheet-title-font-weight: 700;
+  --hm-sheet-description-font-size: 14px;
+  --hm-sheet-description-line-height: 20px;
+  --hm-sheet-description-color: var(--hm-sem-fg-secondary);
+  --hm-sheet-body-font-size: 14px;
+  --hm-sheet-body-line-height: 20px;
+}
+
+[data-slot="sheet-content"] {
+  box-sizing: border-box;
+  background: var(--hm-sheet-background);
+  color: var(--hm-sheet-text);
+  box-shadow: var(--hm-sheet-shadow);
+  font-size: var(--hm-sheet-body-font-size);
+  line-height: var(--hm-sheet-body-line-height);
+  overflow-wrap: anywhere;
+}
+[data-slot="sheet-content"][data-side="right"],
+[data-slot="sheet-content"][data-side="left"] {
+  height: 100%;
+  width: min(var(--hm-sheet-width), calc(100vw - var(--hm-sheet-edge-gap)));
+}
+[data-slot="sheet-content"][data-side="top"],
+[data-slot="sheet-content"][data-side="bottom"] {
+  width: 100%;
+  max-height: calc(100dvh - var(--hm-sheet-edge-gap));
+}
+/* Border only on the edge that faces the page. */
+[data-slot="sheet-content"][data-side="right"] { border-left: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+[data-slot="sheet-content"][data-side="left"] { border-right: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+[data-slot="sheet-content"][data-side="top"] { border-bottom: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+[data-slot="sheet-content"][data-side="bottom"] { border-top: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
+
+[data-slot="sheet-header"] {
+  flex: none;
+  gap: var(--hm-sheet-header-gap);
+  padding: var(--hm-sheet-padding) calc(var(--hm-sheet-padding) + var(--hm-sheet-close-clearance)) 16px var(--hm-sheet-padding);
+}
+[data-slot="sheet-title"] {
+  font-size: var(--hm-sheet-title-font-size);
+  line-height: var(--hm-sheet-title-line-height);
+  font-weight: var(--hm-sheet-title-font-weight);
+  color: var(--hm-sheet-text);
+}
+[data-slot="sheet-description"] {
+  font-size: var(--hm-sheet-description-font-size);
+  line-height: var(--hm-sheet-description-line-height);
+  font-weight: 400;
+  color: var(--hm-sheet-description-color);
+}
+
+/* Body: the only region that scrolls; Header and Footer stay in view. */
+[data-slot="sheet-body"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 var(--hm-sheet-padding);
+}
+
+[data-slot="sheet-footer"] {
+  flex: none;
+  gap: var(--hm-sheet-footer-gap);
+  padding: 16px var(--hm-sheet-padding) var(--hm-sheet-padding);
+}
diff --git a/packages/ui/src/theme/skeleton.css b/packages/ui/src/theme/skeleton.css
new file mode 100644
index 0000000..6093072
--- /dev/null
+++ b/packages/ui/src/theme/skeleton.css
@@ -0,0 +1,20 @@
+/* Skeleton mapping. ui-viz has no Skeleton spec (inventory name only), so these are current HM values. The pulse is the shadcn
+   `animate-pulse` (no HM Motion rule exists); reduced-motion users get a still placeholder.
+   The default look lives in `@layer components` so a consumer's utility classes (`rounded-full`, `bg-*`) still override it:
+   Skeleton shape is meant to be set through `className`. */
+:root, [data-hm-theme] {
+  --hm-skeleton-background: var(--hm-sem-palette-warm-neutral-light);
+  --hm-skeleton-radius: var(--hm-radius-control-md);
+}
+
+@layer components {
+  [data-slot="skeleton"] {
+    background: var(--hm-skeleton-background);
+    border-radius: var(--hm-skeleton-radius);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="skeleton"] {
+    animation: none;
+  }
+}
diff --git a/packages/ui/src/theme/slider.css b/packages/ui/src/theme/slider.css
new file mode 100644
index 0000000..926cced
--- /dev/null
+++ b/packages/ui/src/theme/slider.css
@@ -0,0 +1,75 @@
+/* Slider mapping. ui-viz has no Slider spec, so these are current HM values built from the HM Semantic / Primitive tokens.
+   Track, Range and Thumb are internal parts, so they are styled here; the Slider's own width / height stay `className` territory.
+   States: Radix attributes ([data-disabled], [data-orientation]) and :hover / :active / :focus-visible on the thumb. */
+:root, [data-hm-theme] {
+  --hm-slider-track-size: 6px;
+  --hm-slider-track-background: var(--hm-sem-palette-warm-neutral-light);
+  --hm-slider-range-background: var(--hm-sem-state-active);
+
+  --hm-slider-thumb-size: 18px;
+  --hm-slider-thumb-background: var(--hm-sem-bg-surface);
+  --hm-slider-thumb-border-width: 2px;
+  --hm-slider-thumb-border-color: var(--hm-sem-state-active);
+  /* Interaction halo: hover shows it, dragging widens it. Keyboard focus has its own semantic color. */
+  --hm-slider-thumb-halo-color: color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent);
+  --hm-slider-thumb-focus-halo-color: color-mix(in srgb, var(--hm-sem-stroke-input-focus) 20%, transparent);
+  --hm-slider-thumb-halo-size: 4px;
+  --hm-slider-thumb-halo-size-active: 6px;
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-slider-disabled-opacity: 0.6;
+}
+
+[data-slot="slider-track"] {
+  border-radius: 9999px;
+  background: var(--hm-slider-track-background);
+}
+[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-track"] {
+  height: var(--hm-slider-track-size);
+  width: 100%;
+}
+[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-track"] {
+  width: var(--hm-slider-track-size);
+  height: 100%;
+}
+[data-slot="slider-range"] {
+  background: var(--hm-slider-range-background);
+}
+[data-slot="slider"][data-orientation="horizontal"] [data-slot="slider-range"] {
+  height: 100%;
+}
+[data-slot="slider"][data-orientation="vertical"] [data-slot="slider-range"] {
+  width: 100%;
+}
+
+[data-slot="slider-thumb"] {
+  box-sizing: border-box;
+  width: var(--hm-slider-thumb-size);
+  height: var(--hm-slider-thumb-size);
+  border: var(--hm-slider-thumb-border-width) solid var(--hm-slider-thumb-border-color);
+  border-radius: 9999px;
+  background: var(--hm-slider-thumb-background);
+  cursor: grab;
+}
+[data-slot="slider-thumb"]:hover {
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-halo-color);
+}
+[data-slot="slider-thumb"]:active {
+  cursor: grabbing;
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-halo-color);
+}
+/* Focus wins the color when states overlap; drag keeps its 6px size and grabbing cursor. */
+[data-slot="slider-thumb"]:focus-visible {
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size) var(--hm-slider-thumb-focus-halo-color);
+}
+[data-slot="slider-thumb"]:focus-visible:active {
+  box-shadow: 0 0 0 var(--hm-slider-thumb-halo-size-active) var(--hm-slider-thumb-focus-halo-color);
+}
+
+[data-slot="slider"][data-disabled] {
+  opacity: var(--hm-slider-disabled-opacity);
+}
+[data-slot="slider"][data-disabled] [data-slot="slider-thumb"] {
+  cursor: not-allowed;
+  box-shadow: none;
+}
diff --git a/packages/ui/src/theme/sonner.css b/packages/ui/src/theme/sonner.css
new file mode 100644
index 0000000..d1f85ae
--- /dev/null
+++ b/packages/ui/src/theme/sonner.css
@@ -0,0 +1,107 @@
+/* Toast (Sonner) mapping. Notification surface, not an anchored floating panel, so it does NOT use --hm-sem-floating-*; its values are
+   its own (the visual values currently equal the floating surface and are a Notification Semantic candidate, see docs/components/sonner.md).
+   ui-viz has no Toast spec and its success / warning / information status colors are TBD, so no status palette is invented:
+   Default, Success, Info, Warning and Loading share the neutral surface (the icon tells the type) and only Error uses the destructive color,
+   the same stance as Alert. Sonner's own data attributes ([data-sonner-toast], [data-type], [data-button] ...) are the state hooks. */
+:root, [data-hm-theme] {
+  --hm-toast-width: 356px;
+  --hm-toast-background: var(--hm-sem-bg-surface);
+  --hm-toast-text: var(--hm-sem-fg-primary);
+  --hm-toast-border-width: 1px;
+  --hm-toast-border-color: var(--hm-sem-stroke-input-default);
+  --hm-toast-radius: var(--hm-radius-container);
+  --hm-toast-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+  --hm-toast-padding: 16px;
+  --hm-toast-gap: 12px;
+  --hm-toast-font-family: var(--hm-font-family-base);
+  --hm-toast-title-font-size: 14px;
+  --hm-toast-title-line-height: 20px;
+  --hm-toast-title-font-weight: 500;
+  --hm-toast-description-color: var(--hm-sem-fg-secondary);
+  --hm-toast-description-font-size: 13px;
+  --hm-toast-description-line-height: 18px;
+  --hm-toast-description-font-weight: 400;
+  --hm-toast-icon-size: 16px;
+  --hm-toast-icon-color: var(--hm-sem-fg-primary);
+
+  --hm-toast-error-border-color: var(--hm-sem-action-destructive);
+  --hm-toast-error-text: var(--hm-sem-action-destructive);
+
+  --hm-toast-action-height: 28px;
+  --hm-toast-action-padding-x: 12px;
+  --hm-toast-action-radius: var(--hm-radius-control-md);
+  --hm-toast-action-font-size: 12px;
+  --hm-toast-action-font-weight: 500;
+  --hm-toast-action-background: var(--hm-sem-action-primary);
+  --hm-toast-action-text: var(--hm-sem-on-action-primary);
+  --hm-toast-cancel-background: var(--hm-sem-bg-subtle);
+  --hm-toast-cancel-text: var(--hm-sem-fg-secondary);
+
+  --hm-toast-close-background: var(--hm-toast-background);
+  --hm-toast-close-text: var(--hm-sem-fg-secondary);
+  --hm-toast-close-border-color: var(--hm-toast-border-color);
+}
+
+/* Sonner's own rules use up to three attributes, so the Toaster root repeats [dir] (always set) to win regardless of injection order. */
+[data-sonner-toaster][data-sonner-theme][dir] {
+  --width: var(--hm-toast-width);
+  --border-radius: var(--hm-toast-radius);
+  --normal-bg: var(--hm-toast-background);
+  --normal-border: var(--hm-toast-border-color);
+  --normal-text: var(--hm-toast-text);
+  font-family: var(--hm-toast-font-family);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
+  box-sizing: border-box;
+  gap: var(--hm-toast-gap);
+  padding: var(--hm-toast-padding);
+  border-width: var(--hm-toast-border-width);
+  box-shadow: var(--hm-toast-shadow);
+  font-size: var(--hm-toast-description-font-size);
+  line-height: var(--hm-toast-description-line-height);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-title] {
+  font-size: var(--hm-toast-title-font-size);
+  line-height: var(--hm-toast-title-line-height);
+  font-weight: var(--hm-toast-title-font-weight);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-description] {
+  color: var(--hm-toast-description-color);
+  font-size: var(--hm-toast-description-font-size);
+  line-height: var(--hm-toast-description-line-height);
+  font-weight: var(--hm-toast-description-font-weight);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-icon] {
+  width: var(--hm-toast-icon-size);
+  height: var(--hm-toast-icon-size);
+  color: var(--hm-toast-icon-color);
+}
+
+/* Error is the only status with its own color (destructive); other types stay neutral. */
+[data-sonner-toaster] [data-sonner-toast][data-type="error"] {
+  border-color: var(--hm-toast-error-border-color);
+}
+[data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-icon],
+[data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-title] {
+  color: var(--hm-toast-error-text);
+}
+
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-button] {
+  height: var(--hm-toast-action-height);
+  padding: 0 var(--hm-toast-action-padding-x);
+  border-radius: var(--hm-toast-action-radius);
+  background: var(--hm-toast-action-background);
+  color: var(--hm-toast-action-text);
+  font-size: var(--hm-toast-action-font-size);
+  font-weight: var(--hm-toast-action-font-weight);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-cancel] {
+  background: var(--hm-toast-cancel-background);
+  color: var(--hm-toast-cancel-text);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-close-button] {
+  background: var(--hm-toast-close-background);
+  color: var(--hm-toast-close-text);
+  border-color: var(--hm-toast-close-border-color);
+}
diff --git a/packages/ui/src/theme/switch.css b/packages/ui/src/theme/switch.css
new file mode 100644
index 0000000..874d53e
--- /dev/null
+++ b/packages/ui/src/theme/switch.css
@@ -0,0 +1,47 @@
+/* Switch mapping — current HM values built from the shared Semantic tokens (ui-viz has no Switch spec; it was only a candidate there).
+   States use Radix attributes: [data-state="checked"|"unchecked"], :hover, :focus-visible, :disabled. Motion is the shadcn default. */
+:root, [data-hm-theme] {
+  --hm-switch-width: 36px;
+  --hm-switch-height: 20px;
+  --hm-switch-thumb-size: 16px;
+  --hm-switch-thumb-offset: 2px;
+  --hm-switch-off-background: var(--hm-sem-stroke-default);
+  --hm-switch-on-background: var(--hm-sem-state-active);
+  --hm-switch-thumb-color: var(--hm-sem-bg-surface);
+  --hm-switch-hover-overlay: var(--hm-color-action-overlay-hover);
+}
+
+[data-slot="switch"] {
+  box-sizing: border-box;
+  width: var(--hm-switch-width);
+  height: var(--hm-switch-height);
+  padding: 0;
+  border: 0;
+  border-radius: 9999px;
+  background-color: var(--hm-switch-off-background);
+  background-image: none;
+  box-shadow: none;
+  cursor: pointer;
+}
+[data-slot="switch"][data-state="checked"] {
+  background-color: var(--hm-switch-on-background);
+}
+[data-slot="switch"]:hover:not(:disabled) {
+  background-image: linear-gradient(var(--hm-switch-hover-overlay), var(--hm-switch-hover-overlay));
+}
+[data-slot="switch"]:focus-visible {
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
+}
+[data-slot="switch"]:disabled {
+  cursor: not-allowed;
+}
+[data-slot="switch-thumb"] {
+  width: var(--hm-switch-thumb-size);
+  height: var(--hm-switch-thumb-size);
+  border-radius: 9999px;
+  background: var(--hm-switch-thumb-color);
+  transform: translateX(var(--hm-switch-thumb-offset));
+}
+[data-slot="switch-thumb"][data-state="checked"] {
+  transform: translateX(calc(var(--hm-switch-width) - var(--hm-switch-thumb-size) - var(--hm-switch-thumb-offset)));
+}
diff --git a/packages/ui/src/theme/table.css b/packages/ui/src/theme/table.css
new file mode 100644
index 0000000..4e9dddb
--- /dev/null
+++ b/packages/ui/src/theme/table.css
@@ -0,0 +1,93 @@
+/* Table mapping. Reference: ui-viz docs/components/table.md (an earlier test spec: green header strip, 1px row divider, 14px/12px cell
+   padding, 520px default minimum width, no radius, hover face only). Current HM values built from the HM Semantic / Primitive tokens;
+   the selected row and the footer are not defined there, so they are new here. Static display only: no sorting / filtering / paging. */
+:root, [data-hm-theme] {
+  --hm-table-min-width: 520px;
+  --hm-table-background: var(--hm-sem-bg-surface);
+  --hm-table-text: var(--hm-sem-fg-primary);
+  --hm-table-font-size: 14px;
+  --hm-table-line-height: 20px;
+  --hm-table-font-weight: 400;
+
+  --hm-table-cell-padding-y: 14px;
+  --hm-table-cell-padding-x: 12px;
+  --hm-table-divider-width: 1px;
+  --hm-table-divider-color: var(--hm-sem-stroke-input-default);
+
+  /* Header strip: a pale green face with a green top edge and a soft bottom edge. */
+  --hm-table-header-background: color-mix(in srgb, var(--hm-sem-palette-green-tint) 30%, var(--hm-sem-palette-white));
+  --hm-table-header-text: var(--hm-sem-palette-green-light-1);
+  --hm-table-header-font-size: 13px;
+  --hm-table-header-font-weight: 700;
+  --hm-table-header-border-top: var(--hm-sem-palette-green-light-2);
+  --hm-table-header-border-bottom: color-mix(in srgb, var(--hm-sem-palette-green-light-2) 20%, transparent);
+
+  /* Rows are a wide soft surface: hover, selected and selected + hover all use Accent 45% (not the Active State Semantic). */
+  --hm-table-row-hover-background: var(--hm-sem-surface-highlight);
+  --hm-table-row-selected-background: var(--hm-sem-surface-highlight);
+
+  --hm-table-footer-background: var(--hm-sem-bg-subtle);
+  --hm-table-footer-font-weight: 500;
+
+  --hm-table-caption-color: var(--hm-sem-fg-secondary);
+  --hm-table-caption-font-size: 12px;
+  --hm-table-caption-line-height: 18px;
+  --hm-table-caption-gap: 12px;
+}
+
+[data-slot="table"] {
+  min-width: var(--hm-table-min-width);
+  border-collapse: collapse;
+  background: var(--hm-table-background);
+  color: var(--hm-table-text);
+  font-size: var(--hm-table-font-size);
+  line-height: var(--hm-table-line-height);
+  font-weight: var(--hm-table-font-weight);
+}
+
+[data-slot="table-head"],
+[data-slot="table-cell"] {
+  padding: var(--hm-table-cell-padding-y) var(--hm-table-cell-padding-x);
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+}
+[data-slot="table-head"] {
+  background: var(--hm-table-header-background);
+  color: var(--hm-table-header-text);
+  font-size: var(--hm-table-header-font-size);
+  font-weight: var(--hm-table-header-font-weight);
+  border-top: var(--hm-table-divider-width) solid var(--hm-table-header-border-top);
+  border-bottom: var(--hm-table-divider-width) solid var(--hm-table-header-border-bottom);
+}
+[data-slot="table-cell"] {
+  border-top: var(--hm-table-divider-width) solid var(--hm-table-divider-color);
+}
+/* The header edge replaces the divider of the first body row. */
+[data-slot="table-header"] + [data-slot="table-body"] > [data-slot="table-row"]:first-child > [data-slot="table-cell"] {
+  border-top: 0;
+}
+
+/* Rows: hover colors the face only (body rows, not the header). */
+[data-slot="table-body"] > [data-slot="table-row"]:hover {
+  background: var(--hm-table-row-hover-background);
+}
+[data-slot="table-row"][data-state="selected"],
+[data-slot="table-body"] > [data-slot="table-row"][data-state="selected"]:hover {
+  background: var(--hm-table-row-selected-background);
+}
+
+[data-slot="table-footer"] {
+  background: var(--hm-table-footer-background);
+  font-weight: var(--hm-table-footer-font-weight);
+}
+[data-slot="table-footer"] [data-slot="table-cell"] {
+  border-top: var(--hm-table-divider-width) solid var(--hm-table-divider-color);
+}
+
+[data-slot="table-caption"] {
+  margin-top: var(--hm-table-caption-gap);
+  text-align: left;
+  color: var(--hm-table-caption-color);
+  font-size: var(--hm-table-caption-font-size);
+  line-height: var(--hm-table-caption-line-height);
+}
diff --git a/packages/ui/src/theme/tabs.css b/packages/ui/src/theme/tabs.css
new file mode 100644
index 0000000..073b718
--- /dev/null
+++ b/packages/ui/src/theme/tabs.css
@@ -0,0 +1,200 @@
+/* Tabs mapping: default Primary Fill (content), Secondary Fill (surface), Legacy non-fill and overflow move buttons (D-090). Horizontal, text-only, no size/variant.
+   States use Radix attributes: [data-state="active"|"inactive"], :hover, :focus-visible. */
+:root, [data-hm-theme] {
+  /* ui_viz: docs/components/tabs.md §8, §16 — SOURCE_ADOPTED / COMPONENT_SCOPED (owner 2026-09-18). Not aliased to Button or radius/border tokens. */
+  --hm-tab-height: 34px;
+  --hm-tab-padding-x: 16px;
+  --hm-tab-radius-top: 4px;
+  --hm-tab-border-width: 1px;
+
+  /* ui_viz: docs/components/tabs.md §9 — Navigation Label 16/24/700, same weight for Selected */
+  --hm-tab-font-size: 16px;
+  --hm-tab-line-height: 24px;
+  --hm-tab-font-weight: 700;
+
+  /* ui_viz: docs/components/tabs.md §10 — SOURCE_ADOPTED. Default face and border are also marked TEMPORARY there (alpha composites of
+     Green tint / Green Light 2). Selected border is #DEDBD2 (color.stroke.tab.selected); no Semantic exists in HM, so the Primitive is used here. */
+  --hm-tab-background: color-mix(in srgb, var(--hm-sem-palette-green-tint) 45%, transparent);
+  --hm-tab-border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-2) 35%, transparent);
+  --hm-tab-text: var(--hm-sem-palette-green-light-2);
+  --hm-tab-selected-background: var(--hm-sem-bg-surface);
+  --hm-tab-selected-border-color: var(--hm-sem-stroke-input-default);
+  --hm-tab-selected-text: var(--hm-sem-action-primary);
+  /* Hover (inactive only): Black 20% overlay — value Confirmed (tab.md 6, 8); foreground SOURCE_ADOPTED */
+  --hm-tab-hover-overlay: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+  --hm-tab-hover-text: var(--hm-sem-action-primary);
+  --hm-tab-transition-duration: 0.15s;
+}
+
+/* Frame holds the Bar (and the move buttons when the tabs overflow). The whole Bar overlaps the content boundary by 1px; Selected paints its bottom stroke in the surface color. */
+[data-slot="tabs-frame"] {
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  margin-bottom: -1px;
+}
+/* Bar: no surface of its own, gap 0, scrolls horizontally with the native scrollbar hidden. */
+[data-slot="tabs-list"] {
+  display: flex;
+  align-items: flex-end;
+  flex: 0 1 auto;
+  gap: 0;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+[data-slot="tabs-trigger"] {
+  box-sizing: border-box;
+  height: var(--hm-tab-height);
+  min-height: var(--hm-tab-height);
+  padding: 0 var(--hm-tab-padding-x);
+  border: var(--hm-tab-border-width) solid var(--hm-tab-border-color);
+  border-bottom-color: var(--hm-tab-selected-border-color);
+  border-radius: var(--hm-tab-radius-top) var(--hm-tab-radius-top) 0 0;
+  background-color: var(--hm-tab-background);
+  background-image: none;
+  color: var(--hm-tab-text);
+  font-size: var(--hm-tab-font-size);
+  line-height: var(--hm-tab-line-height);
+  font-weight: var(--hm-tab-font-weight);
+  box-shadow: none;
+  transition: color var(--hm-tab-transition-duration) ease, background-color var(--hm-tab-transition-duration) ease;
+}
+/* One shared border between neighbours. Must come before the Selected rule. */
+[data-slot="tabs-trigger"] + [data-slot="tabs-trigger"] {
+  border-left-width: 0;
+}
+[data-slot="tabs-trigger"][data-state="active"] {
+  z-index: 2;
+  border-color: var(--hm-tab-selected-border-color);
+  border-bottom-color: var(--hm-tab-selected-background);
+  background-color: var(--hm-tab-selected-background);
+  color: var(--hm-tab-selected-text);
+}
+[data-slot="tabs-trigger"][data-state="inactive"]:hover:not(:disabled) {
+  background-image: linear-gradient(var(--hm-tab-hover-overlay), var(--hm-tab-hover-overlay));
+  color: var(--hm-tab-hover-text);
+}
+/* Focus is a global TBD in ui_viz: the shadcn focus ring from ui/tabs.tsx stays. The theme box-shadow is none, so keep the ring variables. */
+[data-slot="tabs-trigger"]:focus-visible {
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
+}
+
+/* ---- Overflow move buttons (ui_viz tabs.md §24 D-090, CURRENT 2026-10-01). Outside the tablist, shown only when the tabs overflow. ---- */
+:root, [data-hm-theme] {
+  --hm-tab-arrow-size: 34px;
+  --hm-tab-arrow-icon-size: 18px;
+  --hm-tab-arrow-background: var(--hm-sem-palette-green-light-1);
+  --hm-tab-arrow-border-color: var(--hm-sem-palette-green-dark-1);
+  --hm-tab-arrow-icon-color: var(--hm-sem-on-action-primary);
+  --hm-tab-arrow-disabled-opacity: 0.6;
+}
+[data-slot="tabs-frame"][data-overflow="true"] > [data-slot="tabs-list"] {
+  flex: 1 1 0;
+}
+[data-slot="tabs-arrow"] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--hm-tab-arrow-size);
+  height: var(--hm-tab-arrow-size);
+  padding: 0;
+  border: var(--hm-tab-border-width) solid var(--hm-tab-arrow-border-color);
+  background-color: var(--hm-tab-arrow-background);
+  background-image: none;
+  color: var(--hm-tab-arrow-icon-color);
+  cursor: pointer;
+  outline: none;
+}
+[data-slot="tabs-arrow"][data-direction="previous"] { border-radius: var(--hm-tab-radius-top) 0 0 0; }
+[data-slot="tabs-arrow"][data-direction="next"] { border-radius: 0 var(--hm-tab-radius-top) 0 0; }
+[data-slot="tabs-arrow"] svg { width: var(--hm-tab-arrow-icon-size); height: var(--hm-tab-arrow-icon-size); }
+[data-slot="tabs-arrow"]:hover:not(:disabled) {
+  background-image: linear-gradient(var(--hm-tab-hover-overlay), var(--hm-tab-hover-overlay));
+}
+[data-slot="tabs-arrow"]:disabled {
+  opacity: var(--hm-tab-arrow-disabled-opacity);
+  cursor: default;
+  pointer-events: none;
+}
+/* Focus value is global TBD: shadcn ring level kept (ring variables come from the tailwind focus-visible utilities). */
+[data-slot="tabs-arrow"]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+/* In the overflow state every item keeps its own label width (no equal split). */
+[data-slot="tabs-frame"][data-overflow="true"] [data-slot="tabs-trigger"] {
+  flex: 0 0 auto;
+}
+
+/* ---- Fill profile (ui_viz tabs.md §24 D-071~075): default Primary content; explicit surface is Secondary. ---- */
+:root, [data-hm-theme] {
+  --hm-tab-fill-line-color: var(--hm-sem-palette-green-light-3);
+  /* REVIEW VALUE (ui_viz tabs.md §24: curve radius 8px, BORDER FOLLOW-UP). The curve itself is Confirmed, the radius is not. */
+  --hm-tab-fill-curve-radius: 8px;
+}
+[data-slot="tabs-frame"][data-fill="true"] {
+  --hm-tab-fill-panel: var(--hm-sem-bg-surface);
+  --hm-tab-fill-face: linear-gradient(var(--hm-sem-bg-surface), var(--hm-sem-bg-surface));
+}
+[data-slot="tabs-frame"][data-fill="true"][data-panel-surface="content"] {
+  --hm-tab-fill-panel: var(--hm-sem-bg-content);
+  /* Non-white panel: the Selected face runs from White (top) to the panel color (bottom); the panel itself gets no gradient. */
+  --hm-tab-fill-face: linear-gradient(to bottom, var(--hm-sem-palette-white) 0%, var(--hm-sem-bg-content) 100%);
+}
+[data-slot="tabs-frame"][data-fill="true"] > [data-slot="tabs-list"] {
+  flex: 1 1 auto;
+  width: 100%;
+}
+[data-slot="tabs-frame"][data-fill="true"][data-overflow="false"] [data-slot="tabs-trigger"] {
+  flex: 1 1 0;
+  min-width: auto;
+}
+/* Inactive: only the bottom line is Green Light 3; face and top / vertical borders keep the basic profile values. */
+[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"] {
+  border-bottom-color: var(--hm-tab-fill-line-color);
+}
+/* Every fill neighbour restores its left border and overlaps it by 1px, matching the tested ui-viz geometry.
+   The active tab's z-index keeps its Green edge above the inactive border without producing a double-width line. */
+[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"] + [data-slot="tabs-trigger"] {
+  margin-left: calc(-1 * var(--hm-tab-border-width));
+  border-left-width: var(--hm-tab-border-width);
+}
+/* Selected: Green Light 3 top / left / right, bottom open in the panel color. */
+[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"] {
+  border-color: var(--hm-tab-fill-line-color);
+  border-bottom-color: var(--hm-tab-fill-panel);
+  background-color: transparent;
+  background-image: var(--hm-tab-fill-face);
+}
+/* Curves: a quarter arc of the vertical Green line toward each neighbour, 1px Green. Inside the arc is transparent (the neighbour shows),
+   outside is the panel color. Decoration only: no pointer input. */
+[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:last-child)::after,
+[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  bottom: calc(-1 * var(--hm-tab-border-width));
+  width: var(--hm-tab-fill-curve-radius);
+  height: var(--hm-tab-fill-curve-radius);
+  pointer-events: none;
+}
+[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:last-child)::after {
+  right: calc(-1 * var(--hm-tab-fill-curve-radius));
+  background: radial-gradient(circle at 100% 0, transparent calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
+    var(--hm-tab-fill-line-color) calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
+    var(--hm-tab-fill-line-color) var(--hm-tab-fill-curve-radius), var(--hm-tab-fill-panel) var(--hm-tab-fill-curve-radius));
+}
+[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:first-child)::before {
+  left: calc(-1 * var(--hm-tab-fill-curve-radius));
+  background: radial-gradient(circle at 0 0, transparent calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
+    var(--hm-tab-fill-line-color) calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
+    var(--hm-tab-fill-line-color) var(--hm-tab-fill-curve-radius), var(--hm-tab-fill-panel) var(--hm-tab-fill-curve-radius));
+}
diff --git a/packages/ui/src/theme/textarea.css b/packages/ui/src/theme/textarea.css
new file mode 100644
index 0000000..441e0dc
--- /dev/null
+++ b/packages/ui/src/theme/textarea.css
@@ -0,0 +1,82 @@
+/* Textarea mapping: the control only. Label, Required star and Helper/Error message are consumer composition, not part of Textarea.
+   States use native selectors (:focus-visible, [aria-invalid="true"], :disabled, [readonly]); resize uses data-resize.
+   Input and Textarea values are separate Tokens even where the numbers match (ui_viz keeps them as separate component owners). */
+:root, [data-hm-theme] {
+  /* ui_viz: docs/components/textarea.md §8.1 TEXTAREA-01/02 — SCOPED_DESIGN_APPROVAL (2026-09-17 owner, Textarea component-local).
+     Not D-093 Confirmed; Canonical min-height and inset stay TBD in ui_viz. Not promoted to size.* or space.* scale. */
+  --hm-textarea-min-height: 112px;
+  --hm-textarea-padding-block: 8px;
+  --hm-textarea-padding-inline: 12px;
+
+  /* ui_viz: docs/components/textarea.md §2 Typography — Value 16/24/400 (existing role) */
+  --hm-textarea-font-size: 16px;
+  --hm-textarea-line-height: 24px;
+  --hm-textarea-font-weight: 400;
+
+  /* ui_viz: docs/components/textarea.md §2, §2.2, §3.3 — Confirmed (border 1px, radius 4px, surface, colors, Focus/Error 1.5px) */
+  --hm-textarea-radius: var(--hm-radius-input);
+  --hm-textarea-border-width: 1px;
+  --hm-textarea-state-border-width: 1.5px;
+  --hm-textarea-background: var(--hm-sem-bg-surface);
+  --hm-textarea-text: var(--hm-sem-fg-primary);
+  --hm-textarea-placeholder: var(--hm-sem-fg-placeholder);
+  --hm-textarea-border-color: var(--hm-sem-stroke-input-default);
+  --hm-textarea-focus-border-color: var(--hm-sem-stroke-input-focus);
+  --hm-textarea-error-border-color: var(--hm-sem-action-destructive);
+}
+
+[data-slot="textarea"] {
+  box-sizing: border-box;
+  min-height: var(--hm-textarea-min-height);
+  padding: var(--hm-textarea-padding-block) var(--hm-textarea-padding-inline);
+  border: var(--hm-textarea-border-width) solid var(--hm-textarea-border-color);
+  border-radius: var(--hm-textarea-radius);
+  background: var(--hm-textarea-background);
+  color: var(--hm-textarea-text);
+  font-size: var(--hm-textarea-font-size);
+  line-height: var(--hm-textarea-line-height);
+  font-weight: var(--hm-textarea-font-weight);
+  box-shadow: none;
+  resize: vertical;
+}
+[data-slot="textarea"][data-resize="none"] { resize: none; }
+[data-slot="textarea"][data-resize="both"] { resize: both; }
+[data-slot="textarea"]::placeholder {
+  color: var(--hm-textarea-placeholder);
+  opacity: 1;
+}
+
+/* Hover is identical to Default (textarea.md §3.3, TEXTAREA-05 user decision): no hover rule. */
+
+/* Focus: the border alone marks it (1.5px, no shadow or glow). Padding gives back the extra 0.5px so the value does not move. */
+[data-slot="textarea"]:focus-visible {
+  outline: none;
+  border-width: var(--hm-textarea-state-border-width);
+  border-color: var(--hm-textarea-focus-border-color);
+  padding: calc(var(--hm-textarea-padding-block) - (var(--hm-textarea-state-border-width) - var(--hm-textarea-border-width)))
+    calc(var(--hm-textarea-padding-inline) - (var(--hm-textarea-state-border-width) - var(--hm-textarea-border-width)));
+}
+
+/* Invalid owns the border; keyboard focus adds the same HM 3px / 50% semantic ring as Input. */
+[data-slot="textarea"][aria-invalid="true"] {
+  border-width: var(--hm-textarea-state-border-width);
+  border-color: var(--hm-textarea-error-border-color);
+  padding: calc(var(--hm-textarea-padding-block) - (var(--hm-textarea-state-border-width) - var(--hm-textarea-border-width)))
+    calc(var(--hm-textarea-padding-inline) - (var(--hm-textarea-state-border-width) - var(--hm-textarea-border-width)));
+}
+[data-slot="textarea"][aria-invalid="true"]:focus-visible {
+  border-color: var(--hm-textarea-error-border-color);
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
+}
+
+/* Disabled keeps the surface face. Opacity 0.6 is set in ui/textarea.tsx: ui_viz `.6` is Temporary; 2026-10-02 user decision extends it to Textarea. */
+[data-slot="textarea"]:disabled {
+  background: var(--hm-textarea-background);
+}
+
+/* Readonly (textarea.md §3.1): keeps the Default surface, border and typography, not dimmed, no resize affordance whatever `resize` says. */
+[data-slot="textarea"][readonly] {
+  resize: none;
+  opacity: 1;
+}
diff --git a/packages/ui/src/theme/toggle-group.css b/packages/ui/src/theme/toggle-group.css
new file mode 100644
index 0000000..1ba5c01
--- /dev/null
+++ b/packages/ui/src/theme/toggle-group.css
@@ -0,0 +1,111 @@
+/* Toggle Group mapping. ui-viz has no Toggle Group spec, so these are current HM values built from the HM Semantic / Primitive
+   tokens. The items share the same selection language as Toggle (full Accent face when on) but use their own --hm-toggle-group-* tokens
+   and do not depend on Toggle's CSS. spacing={0} (default) connects the items into a segmented bar; spacing > 0 separates them
+   with a gap. Radix sets data-orientation only when `orientation` is given, so "horizontal" is selected as :not([data-orientation="vertical"]).
+   States use Radix attributes ([data-state="on"|"off"], :disabled) and :hover.
+   The look is in `@layer components` so a consumer's utility classes still win. */
+:root, [data-hm-theme] {
+  --hm-toggle-group-height-sm: 28px;
+  --hm-toggle-group-height-md: 34px;
+  --hm-toggle-group-height-lg: 42px;
+  --hm-toggle-group-padding-x-sm: 8px;
+  --hm-toggle-group-padding-x-md: 12px;
+  --hm-toggle-group-padding-x-lg: 16px;
+  --hm-toggle-group-radius: var(--hm-radius-control-md);
+  --hm-toggle-group-gap: 8px;
+  --hm-toggle-group-font-size: 14px;
+  --hm-toggle-group-line-height: 20px;
+  --hm-toggle-group-font-weight: 500;
+
+  --hm-toggle-group-off-background: transparent;
+  --hm-toggle-group-off-text: var(--hm-sem-fg-primary);
+  --hm-toggle-group-hover-background: var(--hm-sem-surface-highlight);
+  --hm-toggle-group-on-background: var(--accent);
+  --hm-toggle-group-on-text: var(--accent-foreground);
+
+  --hm-toggle-group-border-width: 1px;
+  --hm-toggle-group-border-color: var(--hm-sem-stroke-input-default);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-toggle-group-disabled-opacity: 0.6;
+}
+
+@layer components {
+  [data-slot="toggle-group-item"] {
+    --hm-toggle-group-item-height: var(--hm-toggle-group-height-md);
+    --hm-toggle-group-item-padding-x: var(--hm-toggle-group-padding-x-md);
+    box-sizing: border-box;
+    gap: 8px;
+    height: var(--hm-toggle-group-item-height);
+    min-width: var(--hm-toggle-group-item-height);
+    padding: 0 var(--hm-toggle-group-item-padding-x);
+    border: var(--hm-toggle-group-border-width) solid transparent;
+    border-radius: var(--hm-toggle-group-radius);
+    background: var(--hm-toggle-group-off-background);
+    color: var(--hm-toggle-group-off-text);
+    font-size: var(--hm-toggle-group-font-size);
+    line-height: var(--hm-toggle-group-line-height);
+    font-weight: var(--hm-toggle-group-font-weight);
+    cursor: pointer;
+  }
+  [data-slot="toggle-group-item"][data-size="sm"] {
+    --hm-toggle-group-item-height: var(--hm-toggle-group-height-sm);
+    --hm-toggle-group-item-padding-x: var(--hm-toggle-group-padding-x-sm);
+  }
+  [data-slot="toggle-group-item"][data-size="lg"] {
+    --hm-toggle-group-item-height: var(--hm-toggle-group-height-lg);
+    --hm-toggle-group-item-padding-x: var(--hm-toggle-group-padding-x-lg);
+  }
+  [data-slot="toggle-group-item"][data-icon-only]:has(> svg:only-child) {
+    padding: 0;
+  }
+  [data-slot="toggle-group-item"][data-variant="outline"] {
+    border-color: var(--hm-toggle-group-border-color);
+  }
+  [data-slot="toggle-group-item"]:hover:not(:disabled) {
+    background: var(--hm-toggle-group-hover-background);
+  }
+  [data-slot="toggle-group-item"][data-state="on"],
+  [data-slot="toggle-group-item"][data-state="on"]:hover:not(:disabled) {
+    background: var(--hm-toggle-group-on-background);
+    color: var(--hm-toggle-group-on-text);
+    position: relative;
+    z-index: 1;
+  }
+  [data-slot="toggle-group-item"]:disabled {
+    opacity: var(--hm-toggle-group-disabled-opacity);
+    cursor: not-allowed;
+  }
+
+  /* Gap between separated items (spacing > 0). */
+  [data-slot="toggle-group"] {
+    gap: var(--hm-toggle-group-gap);
+  }
+
+  /* Connected (spacing 0): square inner corners, round outer corners, outline borders overlap by one border width. */
+  [data-slot="toggle-group"][data-spacing="0"] [data-slot="toggle-group-item"] {
+    border-radius: 0;
+  }
+  [data-slot="toggle-group"][data-spacing="0"]:not([data-orientation="vertical"]) [data-slot="toggle-group-item"]:first-child {
+    border-top-left-radius: var(--hm-toggle-group-radius);
+    border-bottom-left-radius: var(--hm-toggle-group-radius);
+  }
+  [data-slot="toggle-group"][data-spacing="0"]:not([data-orientation="vertical"]) [data-slot="toggle-group-item"]:last-child {
+    border-top-right-radius: var(--hm-toggle-group-radius);
+    border-bottom-right-radius: var(--hm-toggle-group-radius);
+  }
+  [data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] [data-slot="toggle-group-item"]:first-child {
+    border-top-left-radius: var(--hm-toggle-group-radius);
+    border-top-right-radius: var(--hm-toggle-group-radius);
+  }
+  [data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] [data-slot="toggle-group-item"]:last-child {
+    border-bottom-left-radius: var(--hm-toggle-group-radius);
+    border-bottom-right-radius: var(--hm-toggle-group-radius);
+  }
+  [data-slot="toggle-group"][data-spacing="0"]:not([data-orientation="vertical"]) [data-slot="toggle-group-item"][data-variant="outline"]:not(:first-child) {
+    margin-left: calc(-1 * var(--hm-toggle-group-border-width));
+  }
+  [data-slot="toggle-group"][data-spacing="0"][data-orientation="vertical"] [data-slot="toggle-group-item"][data-variant="outline"]:not(:first-child) {
+    margin-top: calc(-1 * var(--hm-toggle-group-border-width));
+  }
+}
diff --git a/packages/ui/src/theme/toggle.css b/packages/ui/src/theme/toggle.css
new file mode 100644
index 0000000..0bfb203
--- /dev/null
+++ b/packages/ui/src/theme/toggle.css
@@ -0,0 +1,77 @@
+/* Toggle mapping. ui-viz has no Toggle spec, so these are current HM values built from the HM Semantic / Primitive tokens.
+   Toggle is a persistent pressed-state control, not an action button: it has its own look and does not reference any
+   --hm-button-* token or the Button roles. States use the Radix attributes ([data-state="on"|"off"], :disabled) and :hover.
+   The default look is in `@layer components` so a consumer's utility classes (width, height, rounded, layout) still win. */
+:root, [data-hm-theme] {
+  --hm-toggle-height-sm: 28px;
+  --hm-toggle-height-md: 34px;
+  --hm-toggle-height-lg: 42px;
+  --hm-toggle-padding-x-sm: 8px;
+  --hm-toggle-padding-x-md: 12px;
+  --hm-toggle-padding-x-lg: 16px;
+  --hm-toggle-radius: var(--hm-radius-control-md);
+  --hm-toggle-gap: 8px;
+  --hm-toggle-font-size: 14px;
+  --hm-toggle-line-height: 20px;
+  --hm-toggle-font-weight: 500;
+
+  --hm-toggle-off-background: transparent;
+  --hm-toggle-off-text: var(--hm-sem-fg-primary);
+  --hm-toggle-hover-background: var(--hm-sem-surface-highlight);
+  /* On = the persistent selected surface (full Accent), independent of Active and Focus. */
+  --hm-toggle-on-background: var(--accent);
+  --hm-toggle-on-text: var(--accent-foreground);
+
+  --hm-toggle-outline-border-width: 1px;
+  --hm-toggle-outline-border-color: var(--hm-sem-stroke-input-default);
+
+  /* Current HM value for this component only; not a global Disabled rule. */
+  --hm-toggle-disabled-opacity: 0.6;
+}
+
+@layer components {
+  [data-slot="toggle"] {
+    --hm-toggle-height: var(--hm-toggle-height-md);
+    --hm-toggle-padding-x: var(--hm-toggle-padding-x-md);
+    box-sizing: border-box;
+    gap: var(--hm-toggle-gap);
+    height: var(--hm-toggle-height);
+    min-width: var(--hm-toggle-height);
+    padding: 0 var(--hm-toggle-padding-x);
+    border: var(--hm-toggle-outline-border-width) solid transparent;
+    border-radius: var(--hm-toggle-radius);
+    background: var(--hm-toggle-off-background);
+    color: var(--hm-toggle-off-text);
+    font-size: var(--hm-toggle-font-size);
+    line-height: var(--hm-toggle-line-height);
+    font-weight: var(--hm-toggle-font-weight);
+    cursor: pointer;
+  }
+  [data-slot="toggle"][data-size="sm"] {
+    --hm-toggle-height: var(--hm-toggle-height-sm);
+    --hm-toggle-padding-x: var(--hm-toggle-padding-x-sm);
+  }
+  [data-slot="toggle"][data-size="lg"] {
+    --hm-toggle-height: var(--hm-toggle-height-lg);
+    --hm-toggle-padding-x: var(--hm-toggle-padding-x-lg);
+  }
+  /* Icon-only: a square of the control height. */
+  [data-slot="toggle"][data-icon-only]:has(> svg:only-child) {
+    padding: 0;
+  }
+  [data-slot="toggle"][data-variant="outline"] {
+    border-color: var(--hm-toggle-outline-border-color);
+  }
+  [data-slot="toggle"]:hover:not(:disabled) {
+    background: var(--hm-toggle-hover-background);
+  }
+  [data-slot="toggle"][data-state="on"],
+  [data-slot="toggle"][data-state="on"]:hover:not(:disabled) {
+    background: var(--hm-toggle-on-background);
+    color: var(--hm-toggle-on-text);
+  }
+  [data-slot="toggle"]:disabled {
+    opacity: var(--hm-toggle-disabled-opacity);
+    cursor: not-allowed;
+  }
+}
diff --git a/packages/ui/src/theme/tooltip.css b/packages/ui/src/theme/tooltip.css
new file mode 100644
index 0000000..665796f
--- /dev/null
+++ b/packages/ui/src/theme/tooltip.css
@@ -0,0 +1,30 @@
+/* Tooltip mapping. ui-viz has no Tooltip spec (inventory: behavior and design pending), so these are current HM values from the HM
+   Semantic tokens. Short, non-interactive text on the inverse (dark) face; the arrow shares the face color. */
+:root, [data-hm-theme] {
+  --hm-tooltip-background: var(--hm-sem-fg-primary);
+  --hm-tooltip-text: var(--hm-sem-on-action-primary);
+  --hm-tooltip-radius: var(--hm-radius-container);
+  --hm-tooltip-padding-x: 10px;
+  --hm-tooltip-padding-y: 6px;
+  --hm-tooltip-max-width: 240px;
+  --hm-tooltip-font-size: 12px;
+  --hm-tooltip-line-height: 18px;
+  --hm-tooltip-font-weight: 400;
+}
+
+[data-slot="tooltip-content"] {
+  box-sizing: border-box;
+  max-width: var(--hm-tooltip-max-width);
+  padding: var(--hm-tooltip-padding-y) var(--hm-tooltip-padding-x);
+  border-radius: var(--hm-tooltip-radius);
+  background: var(--hm-tooltip-background);
+  color: var(--hm-tooltip-text);
+  font-size: var(--hm-tooltip-font-size);
+  line-height: var(--hm-tooltip-line-height);
+  font-weight: var(--hm-tooltip-font-weight);
+  overflow-wrap: anywhere;
+}
+[data-slot="tooltip-arrow"] {
+  background: var(--hm-tooltip-background);
+  fill: var(--hm-tooltip-background);
+}
diff --git a/packages/ui/tsconfig.build.json b/packages/ui/tsconfig.build.json
new file mode 100644
index 0000000..eaa1d3a
--- /dev/null
+++ b/packages/ui/tsconfig.build.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "types": ["react", "react-dom"]
+  },
+  "include": ["src"]
+}
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..f2c2b80
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.app.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo",
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"]
+}
diff --git a/public/fonts/NotoSansKR-OFL.txt b/public/fonts/NotoSansKR-OFL.txt
new file mode 100644
index 0000000..1c9f432
--- /dev/null
+++ b/public/fonts/NotoSansKR-OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/public/fonts/NotoSansKR-variable.ttf b/public/fonts/NotoSansKR-variable.ttf
new file mode 100644
index 0000000..b386890
Binary files /dev/null and b/public/fonts/NotoSansKR-variable.ttf differ
diff --git a/scripts/build-package.mjs b/scripts/build-package.mjs
new file mode 100644
index 0000000..4d7e4e5
--- /dev/null
+++ b/scripts/build-package.mjs
@@ -0,0 +1,96 @@
+import { cp, mkdir, readFile, readdir, rm, writeFile } from "node:fs/promises"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import { execFileSync } from "node:child_process"
+import { existsSync } from "node:fs"
+import { build } from "vite"
+
+const root = fileURLToPath(new URL("../", import.meta.url))
+const name = process.argv[2]
+if (!["ui", "center-graphic"].includes(name)) throw new Error("Expected ui or center-graphic")
+const packageRoot = path.join(root, "packages", name)
+const output = path.join(packageRoot, "dist")
+const manifest = JSON.parse(await readFile(path.join(packageRoot, "package.json"), "utf8"))
+const externals = Object.keys({ ...manifest.dependencies, ...manifest.peerDependencies })
+
+// Only this package's generated output is removed. Library builds never copy root public assets.
+await rm(output, { recursive: true, force: true })
+await build({
+  configFile: false,
+  root: packageRoot,
+  publicDir: false,
+  build: {
+    target: "es2022",
+    outDir: output,
+    minify: false,
+    lib: {
+      entry: name === "ui"
+        ? { index: path.join(packageRoot, "src/index.ts"), "theme/index": path.join(packageRoot, "src/theme/index.ts") }
+        : { index: path.join(packageRoot, "src/index.ts"), reference: path.join(packageRoot, "src/reference.ts") },
+      formats: ["es"],
+      fileName: (_format, entry) => `${entry}.js`,
+      cssFileName: "style",
+    },
+    rolldownOptions: {
+      external: id => externals.some(dep => id === dep || id.startsWith(`${dep}/`)),
+      onwarn(warning, warn) {
+        // The UI component entrypoint retains the directive below; source directives are redundant.
+        if (name === "ui" && warning.code === "MODULE_LEVEL_DIRECTIVE") return
+        warn(warning)
+      },
+    },
+  },
+})
+
+execFileSync(process.execPath, [path.join(root, "node_modules/typescript/bin/tsc"), "-p", path.join(packageRoot, "tsconfig.build.json")], { stdio: "inherit" })
+
+// Declarations describe APIs, not stylesheet loading; explicit .js specifiers also support NodeNext.
+async function finishDeclarations(directory) {
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const file = path.join(directory, entry.name)
+    if (entry.isDirectory()) await finishDeclarations(file)
+    else if (entry.name.endsWith(".d.ts")) {
+      const text = (await readFile(file, "utf8"))
+        .replace(/^import\s+["'][^"']+\.css["'];?\s*$/gm, "")
+        .replace(/(from\s+["']|import\(["'])(\.\.?\/[^"']+)(["'])/g, (_match, before, specifier, after) => {
+          const target = path.resolve(directory, specifier)
+          const resolved = existsSync(`${target}.d.ts`) ? specifier
+            : existsSync(path.join(target, "index.d.ts")) ? `${specifier}/index` : specifier
+          return `${before}${resolved.endsWith(".js") ? resolved : `${resolved}.js`}${after}`
+        })
+      await writeFile(file, text)
+    }
+  }
+}
+await finishDeclarations(output)
+
+if (name === "ui") {
+  const entry = path.join(output, "index.js")
+  await writeFile(entry, `"use client";\n${await readFile(entry, "utf8")}`)
+  await mkdir(path.join(output, "theme"), { recursive: true })
+  for (const entry of await readdir(path.join(packageRoot, "src/theme"))) {
+    if (entry.endsWith(".css")) await cp(path.join(packageRoot, "src/theme", entry), path.join(output, "theme", entry))
+  }
+  await mkdir(path.join(output, "vendor"), { recursive: true })
+  // Preserve the exact upstream CSS rather than shipping its CLI dependency graph to consumers.
+  await cp(path.join(root, "node_modules/shadcn/dist/tailwind.css"), path.join(output, "vendor/shadcn-tailwind.css"))
+  await cp(path.join(root, "node_modules/shadcn/LICENSE.md"), path.join(output, "vendor/shadcn-LICENSE.md"))
+  const tailwind = (await readFile(path.join(packageRoot, "src/tailwind.css"), "utf8"))
+    .replace('"shadcn/tailwind.css"', '"./vendor/shadcn-tailwind.css"')
+    .replace(/@source "\.\/components";\r?\n@source "\.\/patterns";/, '@source "./index.js";')
+  await writeFile(path.join(output, "tailwind.css"), tailwind)
+  await mkdir(path.join(output, "fonts"), { recursive: true })
+  for (const file of ["NotoSansKR-variable.ttf", "NotoSansKR-OFL.txt"]) {
+    await cp(path.join(root, "public/fonts", file), path.join(output, "fonts", file))
+  }
+  const theme = (await readFile(path.join(packageRoot, "src/theme.css"), "utf8"))
+    .replace('/fonts/NotoSansKR-variable.ttf', './fonts/NotoSansKR-variable.ttf')
+  await writeFile(path.join(output, "theme.css"), theme)
+  await cp(path.join(packageRoot, "src/patterns/dashboard-status/dashboard-status.css"), path.join(output, "dashboard-status.css"))
+} else {
+  // Preserve CENTER's existing automatic component CSS behavior for both public entrypoints.
+  for (const entry of ["index.js", "reference.js"]) {
+    const file = path.join(output, entry)
+    await writeFile(file, `import "./style.css";\n${await readFile(file, "utf8")}`)
+  }
+}
diff --git a/scripts/create-ai-reference-package.mjs b/scripts/create-ai-reference-package.mjs
new file mode 100644
index 0000000..1c622f6
--- /dev/null
+++ b/scripts/create-ai-reference-package.mjs
@@ -0,0 +1,115 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { execFileSync } from 'node:child_process';
+
+const root = process.cwd();
+const out = path.join(root, 'HMDesignSystem-AI-Reference-Test');
+const zip = path.join(root, 'HMDesignSystem-AI-Reference-Test.zip');
+
+fs.rmSync(out, { recursive: true, force: true });
+fs.rmSync(zip, { force: true });
+fs.mkdirSync(out, { recursive: true });
+
+const copy = (from, to, options = {}) => {
+  const src = path.join(root, from);
+  if (!fs.existsSync(src)) return false;
+  const dest = path.join(out, to);
+  fs.mkdirSync(path.dirname(dest), { recursive: true });
+  fs.cpSync(src, dest, { recursive: true, force: true, ...options });
+  return true;
+};
+
+// Preserve repository-relative paths for source references and imports.
+copy('packages/ui/src', 'source/packages/ui/src');
+copy('packages/ui/package.json', 'source/packages/ui/package.json');
+copy('packages/ui/tsconfig.json', 'source/packages/ui/tsconfig.json');
+copy('packages/ui/tsconfig.build.json', 'source/packages/ui/tsconfig.build.json');
+copy('packages/ui/components.json', 'source/packages/ui/components.json');
+copy('packages/center-graphic/src', 'source/packages/center-graphic/src');
+copy('packages/center-graphic/package.json', 'source/packages/center-graphic/package.json');
+copy('packages/center-graphic/tsconfig.json', 'source/packages/center-graphic/tsconfig.json');
+copy('packages/center-graphic/tsconfig.build.json', 'source/packages/center-graphic/tsconfig.build.json');
+
+copy('.storybook', 'storybook/config');
+copy('src', 'storybook/source');
+copy('storybook-static', 'storybook/static');
+
+copy('dist', 'packages/app-build');
+copy('dist-dashboard', 'packages/dashboard-export-build');
+copy('packages/ui/dist', 'packages/ui-dist');
+copy('packages/center-graphic/dist', 'packages/center-graphic-dist');
+copy('theme-dist', 'theme/generated');
+copy('themes', 'theme/source');
+copy('packages/ui/src/theme.css', 'theme/source/packages-ui-theme.css');
+copy('packages/ui/src/theme', 'theme/source/packages-ui-theme');
+
+copy('docs', 'docs/source');
+copy('AGENTS.md', 'docs/AGENTS.md');
+copy('CLAUDE.md', 'docs/CLAUDE.md');
+copy('README.md', 'docs/README.md');
+copy('package.json', 'docs/root-package.json');
+copy('package-lock.json', 'docs/package-lock.json');
+
+copy('src/exports', 'examples/react-and-html/src/exports');
+copy('src/exports/dashboard', 'examples/react-and-html/src/exports/dashboard');
+copy('index.html', 'examples/react-and-html/index.html');
+copy('vite.dashboard-export.config.ts', 'examples/react-and-html/vite.dashboard-export.config.ts');
+copy('scripts/finalize-dashboard-export.mjs', 'examples/react-and-html/finalize-dashboard-export.mjs');
+copy('public/fonts', 'assets/fonts');
+copy('packages/center-graphic/src/assets', 'assets/center-graphic');
+
+const files = (dir) => fs.existsSync(dir) ? fs.readdirSync(dir, { recursive: true }).filter((p) => fs.statSync(path.join(dir, p)).isFile()).length : 0;
+const countFiles = (rel, suffix) => {
+  const dir = path.join(root, rel);
+  if (!fs.existsSync(dir)) return 0;
+  return fs.readdirSync(dir, { recursive: true }).filter((p) => String(p).endsWith(suffix)).length;
+};
+const publicComponentFiles = countFiles('packages/ui/src/components', '.tsx');
+const patternFiles = countFiles('packages/ui/src/patterns', '.tsx');
+const storyFiles = ['.stories.tsx', '.stories.ts', '.stories.jsx', '.stories.js'].reduce((n, s) => n + countFiles('src', s), 0);
+const generatedAt = new Date().toISOString();
+
+const startHere = `# HM Design System AI Reference
+
+이 ZIP은 빌드 패키지만이 아니라 HM Design System의 실제 구현·Storybook·Theme·문서를 함께 참조하기 위한 테스트 배포본입니다.
+
+## AI 참조 순서
+
+1. \`docs/AGENTS.md\`와 \`docs/README.md\`를 읽습니다.
+2. \`docs/source/components\`, \`docs/source/patterns\`, \`docs/source/guidelines\`에서 사용 규칙을 확인합니다.
+3. \`source/packages/ui/src\`와 \`source/packages/center-graphic/src\`의 실제 TSX 구현을 재사용합니다.
+4. \`storybook/source\`의 Story에서 상태·조합·레이아웃을 확인합니다.
+5. \`theme/source\` 및 \`theme/generated\`의 Token/CSS Custom Properties를 사용합니다.
+6. \`packages/ui-dist\`와 declarations는 소비자 Export 형태를 확인할 때 사용합니다.
+
+임의의 색상·spacing·radius·Typography 값을 추가하거나 디자인을 재해석하지 않습니다. 신규 화면은 기존 공개 Component/Pattern과 Theme 계약을 우선 재사용합니다.
+
+## 구조
+
+- \`source/\`: 원본 공개 패키지 구현 및 내부 의존 코드
+- \`storybook/\`: Storybook 설정, Story/Pattern/Foundation 소스, 정적 Storybook
+- \`packages/\`: 기존 빌드 산출물 및 TypeScript declarations
+- \`theme/\`: Token 원본, Generated CSS, Runtime Theme 자료
+- \`docs/\`: 원본 사용 규칙, AI 공통 가이드, 컴포넌트·패턴 문서
+- \`examples/\`: React/HTML export 관련 예제 및 계약
+- \`assets/\`: Font와 Center Graphic asset
+
+## 재현 범위
+
+React는 기존 공개 패키지를 직접 import하는 방식을 우선합니다. HTML은 \`examples/react-and-html\`의 기존 export와 Runtime 계약을 먼저 확인합니다. 이 배포본 자체에서 무료 AI에 의한 신규 화면 생성이나 브라우저 시각 검증은 수행하지 않았습니다.
+`;
+fs.writeFileSync(path.join(out, 'AI_START_HERE.md'), startHere, 'utf8');
+
+const manifest = {
+  package: 'HMDesignSystem-AI-Reference-Test', generatedAt,
+  source: { publicComponentSourceFiles: publicComponentFiles, centerGraphicSourceFiles: files(path.join(out, 'source/packages/center-graphic/src')) },
+  storybook: { storyFiles, sourceFiles: files(path.join(out, 'storybook/source')), staticIncluded: fs.existsSync(path.join(out, 'storybook/static')) },
+  patterns: { patternSourceFiles: patternFiles },
+  theme: { sourceIncluded: fs.existsSync(path.join(out, 'theme/source')), generatedIncluded: fs.existsSync(path.join(out, 'theme/generated')) },
+  assets: { fontFiles: files(path.join(out, 'assets/fonts')), centerGraphicAssetFiles: files(path.join(out, 'assets/center-graphic')) },
+  verification: { aiReproduction: 'NOT_RUN', browserVisualVerification: 'NOT_RUN', sourceMutation: 'NOT_RUN (packaging-only)' }
+};
+fs.writeFileSync(path.join(out, 'MANIFEST.json'), JSON.stringify(manifest, null, 2) + '\n', 'utf8');
+
+execFileSync('tar', ['-a', '-c', '-f', zip, '-C', root, path.basename(out)], { stdio: 'inherit' });
+console.log(JSON.stringify({ out, zip, manifest }, null, 2));
diff --git a/scripts/finalize-dashboard-export.mjs b/scripts/finalize-dashboard-export.mjs
new file mode 100644
index 0000000..9d7bd25
--- /dev/null
+++ b/scripts/finalize-dashboard-export.mjs
@@ -0,0 +1,17 @@
+import { readFile, writeFile } from "node:fs/promises"
+
+const path = "dist-dashboard/index.html"
+const html = await readFile(path, "utf8")
+const finalized = html.replace(
+  '<script type="module" crossorigin src="./assets/dashboard-export.js"></script>',
+  '<script defer src="./assets/dashboard-export.js"></script>',
+).replace(
+  /(<link\s+rel="stylesheet")\s+crossorigin(\s+href="\.\/assets\/[^\"]+\.css")/,
+  "$1$2",
+)
+
+if (finalized === html) {
+  throw new Error(`Dashboard export script tag was not found in ${path}`)
+}
+
+await writeFile(path, finalized)
diff --git a/scripts/h2-preview.mjs b/scripts/h2-preview.mjs
new file mode 100644
index 0000000..2bc3432
--- /dev/null
+++ b/scripts/h2-preview.mjs
@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import crypto from 'node:crypto';
+import { execFileSync } from 'node:child_process';
+import { build } from 'esbuild';
+
+const args = new Map();
+for (let i = 2; i < process.argv.length; i += 1) {
+  const value = process.argv[i];
+  if (value.startsWith('--')) args.set(value.slice(2), process.argv[i + 1]?.startsWith('--') ? true : process.argv[++i]);
+}
+const input = args.get('input');
+const output = args.get('output');
+const screens = Number(args.get('screens') || 1);
+const root = process.cwd();
+const runId = `${new Date().toISOString().replace(/[:.]/g, '-')}-${crypto.randomBytes(4).toString('hex')}`;
+const reportDir = output ? path.resolve(output) : path.resolve(root, '_local', 'h2-preview', runId);
+const failurePath = path.join(reportDir, 'verification-failure.json');
+const rel = (p) => path.relative(root, p) || '.';
+const fail = (code, message, details = {}) => {
+  fs.mkdirSync(reportDir, { recursive: true });
+  const report = { h2: 'H-2', status: 'FAIL', code, message, details, createdAt: new Date().toISOString(), input: input ? path.resolve(input) : null };
+  fs.writeFileSync(failurePath, JSON.stringify(report, null, 2) + '\n');
+  console.error(JSON.stringify(report, null, 2));
+  process.exitCode = 1;
+};
+if (!input) fail('INPUT_REQUIRED', 'Use --input with a .tsx/.jsx entry file or a directory containing one.');
+else {
+  const inputPath = path.resolve(input);
+  const stat = fs.existsSync(inputPath) && fs.statSync(inputPath);
+  if (!stat) fail('INPUT_NOT_FOUND', `Input does not exist: ${inputPath}`);
+  else {
+    const entry = stat.isDirectory() ? ['App.tsx', 'index.tsx', 'main.tsx', 'App.jsx', 'index.jsx', 'main.jsx'].map((x) => path.join(inputPath, x)).find(fs.existsSync) : inputPath;
+    if (!entry || !/\.(tsx|jsx)$/.test(entry)) fail('INVALID_INPUT', 'Input must resolve to an independent React TSX/JSX entry.');
+    else if (path.resolve(reportDir) === path.resolve(root, 'dist') || path.resolve(reportDir) === path.resolve(root, 'storybook-static')) fail('PROTECTED_OUTPUT', 'Shared dist and Storybook output are not valid H-2 output paths.');
+    else if (fs.existsSync(path.join(reportDir, 'preview.html')) || fs.existsSync(path.join(reportDir, 'verification.json'))) fail('OUTPUT_EXISTS', 'Refusing to overwrite an existing H-2 output. Choose a new --output directory.');
+    else {
+      const before = requireGitStatus();
+      const outputBefore = fs.existsSync(reportDir) ? fs.readdirSync(reportDir) : [];
+      try {
+        fs.mkdirSync(reportDir, { recursive: true });
+        const temp = path.join(reportDir, '.bundle.js');
+        await build({ entryPoints: [entry], outfile: temp, bundle: true, format: 'iife', platform: 'browser', target: 'es2020', sourcemap: false, logLevel: 'silent', absWorkingDir: path.dirname(entry) });
+        const js = fs.readFileSync(temp, 'utf8');
+        fs.rmSync(temp, { force: true });
+        const source = fs.readFileSync(entry, 'utf8');
+        const urls = [...source.matchAll(/(?:src|href)\s*=\s*["']([^"']+)["']/gi)].map((m) => m[1]);
+        const external = urls.filter((u) => /^(https?:|\/\/)/i.test(u));
+        const unresolved = urls.filter((u) => !/^(data:|#|https?:|\/\/|\/)/i.test(u) && !fs.existsSync(path.resolve(path.dirname(entry), u.split('#')[0])));
+        if (external.length || unresolved.length) throw new Error(`External or unresolved asset references: ${JSON.stringify({ external, unresolved })}`);
+        const html = `<!doctype html><html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>H-2 Preview</title><style>html,body,#root{margin:0;min-height:100%;width:100%;}body{background:#fff;} </style></head><body><div id="root"></div><script>${js}\n//# sourceURL=h2-preview.js</script></body></html>`;
+        fs.writeFileSync(path.join(reportDir, 'preview.html'), html);
+        const verification = { h2: 'H-2', status: 'PASS', input: path.resolve(entry), output: path.join(reportDir, 'preview.html'), runtime: 'REACT_TSX', screens, checks: { isolatedBuild: true, singlePreviewHtml: true, fileUrlReady: true, externalUrls: external, unresolvedRelativePaths: unresolved, console: 'NOT_RUN', runtime: 'NOT_RUN', network: 'NOT_RUN', captures: 'NOT_RUN', protectedOutputsUnchanged: true, preexistingChanges: before, postRunChanges: requireGitStatus(), outputBefore, outputAfter: fs.readdirSync(reportDir) }, note: 'Browser/runtime/capture checks remain NOT_RUN until a browser runner executes them; NOT_RUN is not PASS.' };
+        fs.writeFileSync(path.join(reportDir, 'verification.json'), JSON.stringify(verification, null, 2) + '\n');
+        console.log(JSON.stringify({ status: 'PASS', preview: path.join(reportDir, 'preview.html'), verification: path.join(reportDir, 'verification.json') }, null, 2));
+      } catch (error) { fail('BUILD_OR_ASSET_CHECK_FAILED', error.message, { entry: rel(entry), output: reportDir }); }
+    }
+  }
+}
+function requireGitStatus() { try { return execFileSync('git', ['status', '--short'], { encoding: 'utf8' }).split(/\r?\n/).filter(Boolean); } catch { return ['UNAVAILABLE']; } }
diff --git a/scripts/portable-preview/preview-server.cjs b/scripts/portable-preview/preview-server.cjs
new file mode 100644
index 0000000..b497f3e
--- /dev/null
+++ b/scripts/portable-preview/preview-server.cjs
@@ -0,0 +1,66 @@
+// Portable test launcher: built-in modules only; never invokes npm or a global Node.
+const http = require('node:http');
+const fs = require('node:fs');
+const path = require('node:path');
+const { spawn } = require('node:child_process');
+const root = __dirname;
+const types = { '.html':'text/html; charset=utf-8', '.js':'text/javascript; charset=utf-8', '.mjs':'text/javascript; charset=utf-8', '.css':'text/css; charset=utf-8', '.json':'application/json; charset=utf-8', '.svg':'image/svg+xml', '.png':'image/png', '.jpg':'image/jpeg', '.jpeg':'image/jpeg', '.gif':'image/gif', '.webp':'image/webp', '.ico':'image/x-icon', '.ttf':'font/ttf', '.woff':'font/woff', '.woff2':'font/woff2', '.txt':'text/plain; charset=utf-8' };
+const server = http.createServer((req, res) => {
+  if (!['GET','HEAD'].includes(req.method)) { res.writeHead(405); res.end(); return; }
+  let pathname;
+  try { pathname = decodeURIComponent(new URL(req.url, 'http://127.0.0.1').pathname); }
+  catch { res.writeHead(400); res.end(); return; }
+  // Dashboard is a production export and must be served from its own URL root.
+  const dashboard = pathname === '/dashboard' || pathname.startsWith('/dashboard/');
+  const dashboardPath = dashboard ? (pathname === '/dashboard' ? '/dashboard/' : pathname) : pathname;
+  // Source Reference/static example paths keep their repository-relative imports.
+  const reference = ['/docs/','/packages/','/src/','/public/'].some(prefix => pathname.startsWith(prefix));
+  const base = dashboard ? path.join(root, 'dist-dashboard') : (reference ? root : path.join(root, 'storybook-static'));
+  const relativePath = dashboard ? dashboardPath.slice('/dashboard'.length) || '/' : (pathname === '/favicon.ico' ? '/favicon.svg' : pathname);
+  let file = path.resolve(base, '.' + relativePath);
+  const relative = path.relative(base, file);
+  if (relative.startsWith('..') || path.isAbsolute(relative) || pathname.includes('\\')) { res.writeHead(403); res.end(); return; }
+  fs.stat(file, (error, stat) => {
+    if (!error && stat.isDirectory()) file = path.join(file, 'index.html');
+    fs.stat(file, (error, stat) => {
+      if (error || !stat.isFile()) { res.writeHead(404); res.end('Not found'); return; }
+      res.writeHead(200, { 'Content-Type': types[path.extname(file).toLowerCase()] || 'application/octet-stream', 'Content-Length':stat.size, 'Cache-Control':'no-store', 'X-Content-Type-Options':'nosniff' });
+      if (req.method === 'HEAD') { res.end(); return; }
+      const stream = fs.createReadStream(file);
+      stream.on('error', () => res.destroy());
+      stream.pipe(res);
+    });
+  });
+});
+let port = 6007;
+let browserOpened = false;
+function openDefaultBrowser(url) {
+  if (browserOpened) return;
+  browserOpened = true;
+  const command = process.env.ComSpec || 'cmd.exe';
+  const browser = spawn(command, ['/c', 'start', '', url], {
+    detached: true,
+    stdio: 'ignore',
+    windowsHide: true
+  });
+  browser.on('error', error => {
+    console.error(`Browser auto-open failed: ${error.message}`);
+    console.error(`Open this address manually: ${url}`);
+  });
+  browser.unref();
+}
+server.on('error', error => {
+  if (error.code === 'EADDRINUSE' || error.code === 'EACCES') {
+    if (port === 0) { console.error(error.message); process.exitCode = 1; return; }
+    port = port < 6023 ? port + 1 : 0;
+    server.listen(port, '127.0.0.1');
+  } else { console.error(error.message); process.exitCode = 1; }
+});
+server.on('listening', () => {
+  const url = `http://127.0.0.1:${server.address().port}/`;
+  console.log(`HM Design System Portable Test\nNode ${process.version} (${process.arch})\nStorybook: ${url}\nDashboard: ${url}dashboard/\nStatic status example: ${url}docs/patterns/dashboard-status-static.html\nPress Ctrl+C to stop this preview.\n`);
+  openDefaultBrowser(url);
+});
+process.on('SIGINT', () => server.close(() => process.exit(0)));
+process.on('SIGTERM', () => server.close(() => process.exit(0)));
+server.listen(port, '127.0.0.1');
diff --git a/scripts/portable-preview/start-preview.bat b/scripts/portable-preview/start-preview.bat
new file mode 100644
index 0000000..00046da
--- /dev/null
+++ b/scripts/portable-preview/start-preview.bat
@@ -0,0 +1,15 @@
+@echo off
+setlocal
+chcp 65001 >nul
+title HM Design System - Portable Test Preview
+if not exist "%~dp0runtime\node\node.exe" (
+  echo ERROR: Bundled runtime is missing. Extract the complete ZIP first.
+  pause
+  exit /b 1
+)
+echo.
+echo The actual Storybook and Dashboard addresses will be printed by the server below.
+echo.
+"%~dp0runtime\node\node.exe" "%~dp0preview-server.cjs"
+if errorlevel 1 pause
+endlocal
diff --git a/scripts/theme-artifacts.mjs b/scripts/theme-artifacts.mjs
new file mode 100644
index 0000000..c9e3c51
--- /dev/null
+++ b/scripts/theme-artifacts.mjs
@@ -0,0 +1,17 @@
+import { mkdirSync, readdirSync, writeFileSync, unlinkSync } from "node:fs"
+import { read, repositoryRoot, validateDocument } from "./theme-contract.mjs"
+
+// Independent Theme artifact. Does not build UI/Graphic or generate package CSS.
+// Only top-level themes/*.json are published; historic drafts stay out.
+const directory = new URL("../themes/", import.meta.url)
+const themes = readdirSync(directory).filter(file => file.endsWith(".json")).sort()
+if (!themes.includes("default.json")) throw Error("Missing themes/default.json")
+const documents = themes.map(file => [file, validateDocument(JSON.parse(read(`themes/${file}`)), file === "default.json")])
+const output = new URL("theme-dist/themes/", repositoryRoot)
+mkdirSync(output, { recursive: true })
+// Only generated top-level JSON artifacts in this explicit workspace output.
+for (const file of readdirSync(output).filter(file => file.endsWith(".json") && !themes.includes(file))) unlinkSync(new URL(file, output))
+for (const [file, theme] of documents) {
+  writeFileSync(new URL(file, output), JSON.stringify(theme, null, 2) + "\n")
+}
+console.log(`Validated/exported ${themes.length} independent Theme artifacts to theme-dist/themes/`)
diff --git a/scripts/theme-contract.mjs b/scripts/theme-contract.mjs
new file mode 100644
index 0000000..ed82f0b
--- /dev/null
+++ b/scripts/theme-contract.mjs
@@ -0,0 +1,25 @@
+import { readFileSync } from "node:fs"
+export const repositoryRoot = new URL("../", import.meta.url)
+export const read = path => readFileSync(new URL(path, repositoryRoot), "utf8").replace(/\r\n/g, "\n")
+const source = read("packages/ui/src/theme/contract.ts")
+export const definitions = [...source.matchAll(/"([^"]+)": \{ property: "([^"]+)", defaultValue: [^\n]+?, type: "(color|radius)" \}/g)]
+  .map(([, key, property, type]) => ({ key, property, type }))
+if (!definitions.length || new Set(definitions.map(def => def.key)).size !== definitions.length || new Set(definitions.map(def => def.property)).size !== definitions.length) throw Error("Missing or duplicate contract entries")
+const groupsSource = source.slice(source.indexOf("export const runtimeGradientGroups"))
+export const gradientGroups = [...groupsSource.matchAll(/\[([^\[\]]+)\]/g)].map(([, body]) => [...body.matchAll(/"([^"]+)"/g)].map(([, key]) => key))
+if (!gradientGroups.length || gradientGroups.some(group => !group.length || group.some(key => !definitions.some(def => def.key === key)))) throw Error("Unrecognized production gradient groups")
+// Build-time check derived from the production allowlist. Runtime uses isRuntimeTheme.
+export function validateDocument(theme, fullDefault = false) {
+  if (!theme || theme.schemaVersion !== 1 || !theme.tokens || typeof theme.tokens !== "object" || Array.isArray(theme.tokens)) throw Error("Expected v1 RuntimeTheme document")
+  for (const [key, value] of Object.entries(theme.tokens)) {
+    const definition = definitions.find(def => def.key === key)
+    if (!definition || typeof value !== "string" || !(definition.type === "color" ? /^#[\da-f]{6}$/i : /^(?:[2-9]|1[0-2])px$/).test(value)) throw Error(`Invalid Theme token: ${key}`)
+  }
+  for (const group of gradientGroups) {
+    const count = group.filter(key => Object.hasOwn(theme.tokens, key)).length
+    if (count && count !== group.length) throw Error(`Incomplete gradient group: ${group[0]}`)
+  }
+  if (fullDefault && definitions.some(def => def.type === "color" && !Object.hasOwn(theme.tokens, def.key))) throw Error("default.json must contain every public color role/palette/gradient value")
+  if (Object.keys(theme.tokens).some(key => definitions.find(def => def.key === key).type !== "color")) throw Error("Theme artifacts are color-only; geometry belongs to package CSS")
+  return theme
+}
diff --git a/scripts/theme-defaults.mjs b/scripts/theme-defaults.mjs
new file mode 100644
index 0000000..37cf88a
--- /dev/null
+++ b/scripts/theme-defaults.mjs
@@ -0,0 +1,38 @@
+import { writeFileSync } from "node:fs"
+import { definitions, read, repositoryRoot, validateDocument } from "./theme-contract.mjs"
+
+// themes/default.json is the authored COLOR source. Templates own aliases/geometry.
+const theme = validateDocument(JSON.parse(read("themes/default.json")), true)
+const templates = ["primitives", "default"].map(name => ({ name, source: read(`scripts/theme-templates/${name}.css`) }))
+const graph = new Map(templates.flatMap(({ source }) => [...source.replace(/\/\*[\s\S]*?\*\//g, "").matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)].map(([, key, value]) => [key, value.trim()])))
+const publicProperties = new Map(definitions.filter(def => def.type === "color").map(def => [def.property, theme.tokens[def.key].toLowerCase()]))
+function resolve(value, stack = []) {
+  const placeholder = /^\{\{([^|}]+)(?:\|([^}]+))?\}\}$/.exec(value)
+  if (placeholder) return theme.tokens[placeholder[1]].toLowerCase()
+  const alias = /^var\((--[\w-]+)\)$/.exec(value)
+  if (!alias) return value
+  const property = alias[1]
+  if (stack.includes(property)) throw Error(`Circular fallback alias: ${property}`)
+  if (publicProperties.has(property)) return publicProperties.get(property)
+  if (!graph.has(property)) throw Error(`Missing fallback alias: ${property}`)
+  return resolve(graph.get(property), [...stack, property])
+}
+function render(source) {
+  return source.replace(/\{\{([^|}]+)(?:\|([^}]+))?\}\}/g, (_, key, alias) => {
+    if (!Object.hasOwn(theme.tokens, key)) throw Error(`Missing template color: ${key}`)
+    const value = theme.tokens[key].toLowerCase()
+    // Preserve existing palette aliases when they match the canonical Default.
+    // A separately configured role always wins if its JSON value differs.
+    return alias && resolve(alias) === value ? alias : value
+  })
+}
+const defaults = Object.fromEntries(definitions.map(def => [def.property, def.type === "color" ? theme.tokens[def.key].toLowerCase() : resolve(graph.get(def.property))]))
+for (const def of definitions) if (!(def.type === "color" ? /^#[\da-f]{6}$/i : /^(?:[2-9]|1[0-2])px$/).test(defaults[def.property])) throw Error(`Unresolved fallback: ${def.property}`)
+const outputs = templates.map(({name,source}) => [`packages/ui/src/theme/${name}.css`, `/* Generated from themes/default.json + scripts/theme-templates/${name}.css. Do not edit. */\n${render(source)}`])
+outputs.push(["packages/ui/src/theme/default-values.generated.ts", `// Generated by npm run generate:theme-defaults. Do not edit.\n// Colors: themes/default.json; geometry/aliases: scripts/theme-templates.\nexport const runtimeThemeDefaults = ${JSON.stringify(defaults, null, 2)} as const\n`])
+for (const [path, content] of outputs) {
+  if (process.argv.includes("--check")) {
+    if (read(path) !== content) throw Error(`Stale ${path}. Run npm run generate:theme-defaults.`)
+  } else writeFileSync(new URL(path, repositoryRoot), content)
+}
+console.log(`Theme defaults: ${Object.keys(theme.tokens).length} JSON colors / ${definitions.length} contract defaults; ${process.argv.includes("--check") ? "generated outputs match" : "generated CSS + data"}`)
diff --git a/scripts/theme-templates/default.css b/scripts/theme-templates/default.css
new file mode 100644
index 0000000..95f82c1
--- /dev/null
+++ b/scripts/theme-templates/default.css
@@ -0,0 +1,202 @@
+@import "./primitives.css";
+
+/* Derived aliases and geometry. Values are generated from themes/default.json. */
+:root, [data-hm-theme] {
+  --hm-color-primary: var(--hm-sem-palette-green-default);
+  --hm-color-primary-hover: color-mix(in srgb, var(--hm-sem-action-primary) 85%, var(--hm-sem-palette-black));
+  --hm-color-primary-active: color-mix(in srgb, var(--hm-sem-action-primary) 70%, var(--hm-sem-palette-black));
+  --hm-color-surface-default: var(--hm-sem-palette-white);
+  --hm-color-surface-content: var(--hm-sem-palette-beige-light);
+  --hm-color-surface-subtle: var(--hm-sem-palette-warm-neutral-muted);
+  --hm-color-text-primary: var(--hm-sem-palette-green-dark-1);
+  --hm-color-text-secondary: var(--hm-sem-palette-warm-neutral-dark);
+  --hm-color-text-inverse: var(--hm-sem-palette-white);
+  --hm-color-text-placeholder: var(--hm-sem-palette-neutral-gray-500);
+  --hm-color-border-default: var(--hm-sem-palette-warm-neutral-mid);
+  --hm-color-border-control: var(--hm-sem-palette-warm-neutral-pale);
+  /* Common Focus color. Trial value: Light 2 (#266651), pending user confirmation. Was --hm-color-primary. */
+  --hm-color-border-focus: var(--hm-sem-palette-green-light-2);
+  --hm-color-action-cancel: var(--hm-sem-palette-warm-neutral-dark);
+  --hm-color-action-destructive: var(--hm-sem-palette-red-danger);
+  --hm-color-action-destructive-hover: color-mix(in srgb, var(--hm-sem-action-destructive) 8%, var(--hm-sem-bg-surface));
+  --hm-color-action-overlay-hover: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+  --hm-color-action-overlay-active: color-mix(in srgb, var(--hm-sem-palette-black) 30%, transparent);
+  --hm-color-action-shadow-light: color-mix(in srgb, var(--hm-sem-palette-white) 10%, transparent);
+  --hm-color-action-shadow-dark: color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent);
+
+  --hm-radius-control-md: 4px;
+  --hm-control-height-md: 34px;
+  --hm-font-family-base: "Noto Sans KR", "Malgun Gothic", sans-serif;
+  --hm-font-size-button-md: 13px;
+  --hm-font-weight-medium: 500;
+  --hm-font-weight-bold: 700;
+
+  /* Existing semantic names remain the shadcn and preview adapter. */
+  --hm-sem-bg-content: {{color.bg.content|var(--hm-color-surface-content)}};
+  --hm-sem-bg-surface: {{color.bg.surface|var(--hm-color-surface-default)}};
+  --hm-sem-fg-primary: {{color.fg.primary|var(--hm-color-text-primary)}};
+  --hm-sem-fg-secondary: {{color.fg.secondary|var(--hm-color-text-secondary)}};
+  --hm-sem-fg-placeholder: {{color.fg.placeholder|var(--hm-color-text-placeholder)}};
+  --hm-sem-action-primary: {{color.action.primary|var(--hm-color-primary)}};
+  --hm-sem-action-cancel: {{color.action.cancel|var(--hm-color-action-cancel)}};
+  --hm-sem-action-destructive: {{color.action.destructive|var(--hm-color-action-destructive)}};
+  --hm-sem-stroke-default: {{color.stroke.default|var(--hm-color-border-default)}};
+  --hm-sem-stroke-input-default: {{color.stroke.input.default|var(--hm-color-border-control)}};
+  --hm-sem-stroke-input-focus: {{color.stroke.input.focus|var(--hm-color-border-focus)}};
+  --hm-sem-on-action-primary: {{color.fg.inverse|var(--hm-color-text-inverse)}};
+  /* Active state fill: checked / selected / on (Checkbox, Radio, Switch, Slider, Progress, Calendar).
+     Sibling of the Focus chain (--hm-color-border-focus): same Light 2 today, but neither references the other. */
+  --hm-sem-state-active: {{color.state.active|var(--hm-sem-palette-green-light-2)}};
+  --hm-sem-on-state-active: {{color.on.state.active|var(--hm-color-text-inverse)}};
+  /* Public gradient stop groups; geometry remains internal. */
+  --hm-sem-brand-bg-stop-0: {{color.bg.brand.stop.0|var(--hm-sem-palette-green-dark-1)}};
+  --hm-sem-brand-bg-stop-12: {{color.bg.brand.stop.12|var(--hm-sem-palette-green-dark-2)}};
+  --hm-sem-brand-bg-stop-42: {{color.bg.brand.stop.42|var(--hm-sem-palette-green-default)}};
+  --hm-sem-brand-bg-stop-78: {{color.bg.brand.stop.78|var(--hm-sem-palette-green-light-2)}};
+  --hm-sem-brand-bg-stop-100: {{color.bg.brand.stop.100|var(--hm-sem-palette-green-light-1)}};
+  --hm-sem-bg-brand: linear-gradient(to bottom,
+    var(--hm-sem-brand-bg-stop-0) 0%, var(--hm-sem-brand-bg-stop-12) 12%,
+    var(--hm-sem-brand-bg-stop-42) 42%, var(--hm-sem-brand-bg-stop-78) 78%,
+    var(--hm-sem-brand-bg-stop-100) 100%);
+
+  --hm-sem-action-surface-stop-0: {{surface.action.primary.stop.0|var(--hm-sem-palette-green-tone-1)}};
+  --hm-sem-action-surface-stop-30: {{surface.action.primary.stop.30|var(--hm-sem-palette-green-tone-2)}};
+  --hm-sem-action-surface-stop-65: {{surface.action.primary.stop.65|var(--hm-sem-palette-green-tone-3)}};
+  --hm-sem-action-surface-stop-100: {{surface.action.primary.stop.100|var(--hm-sem-palette-green-tone-4)}};
+  --hm-sem-surface-action-primary: linear-gradient(180deg,
+    var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%,
+    var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%);
+  --hm-sem-action-border-stop-0: {{surface.action.primary.border.stop.0|var(--hm-sem-palette-green-dark-1)}};
+  --hm-sem-action-border-stop-50: {{surface.action.primary.border.stop.50|var(--hm-sem-palette-green-light-4)}};
+  --hm-sem-action-border-stop-100: {{surface.action.primary.border.stop.100|var(--hm-sem-palette-green-tone-4)}};
+  --hm-sem-border-action-primary: linear-gradient(180deg,
+    var(--hm-sem-action-border-stop-0) 0%, var(--hm-sem-action-border-stop-50) 50%,
+    var(--hm-sem-action-border-stop-100) 100%);
+
+  --hm-radius-button: var(--hm-radius-control-md);
+  --hm-radius-input: var(--hm-radius-control-md);
+  --hm-radius-select: var(--hm-radius-control-md);
+  --hm-radius-container: var(--hm-radius-control-md);
+
+  /* Floating surface: anchored panels (Dropdown Menu, Context Menu, Popover, Hover Card, Menubar content, Navigation Menu panel).
+     Not Tooltip (inverse face), Select, Card or the modal surfaces. Component tokens keep their own names and point here. */
+  --hm-sem-floating-background: var(--hm-sem-bg-surface);
+  --hm-sem-floating-border-width: 1px;
+  --hm-sem-floating-border-color: var(--hm-sem-stroke-input-default);
+  --hm-sem-floating-radius: var(--hm-radius-container);
+  --hm-sem-floating-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
+
+  --hm-sem-bg-subtle: {{color.bg.subtle|var(--hm-color-surface-subtle)}};
+
+  --hm-sem-accent: {{color.accent|var(--hm-sem-palette-green-tint)}};
+
+  --hm-sem-on-accent: {{color.on.accent}};
+
+  --hm-sem-palette-green-light-4: {{color.palette.green-light-4|var(--hm-green-light-4)}};
+
+  --hm-sem-palette-green-light-3: {{color.palette.green-light-3|var(--hm-green-light-3)}};
+
+  --hm-sem-palette-green-light-2: {{color.palette.green-light-2|var(--hm-green-light-2)}};
+
+  --hm-sem-palette-green-light-1: {{color.palette.green-light-1|var(--hm-green-light-1)}};
+
+  --hm-sem-palette-green-default: {{color.palette.green-default|var(--hm-green-default)}};
+
+  --hm-sem-palette-green-dark-1: {{color.palette.green-dark-1|var(--hm-green-dark-1)}};
+
+  --hm-sem-palette-green-dark-2: {{color.palette.green-dark-2|var(--hm-green-dark-2)}};
+
+  --hm-sem-palette-brown-light-2: {{color.palette.brown-light-2|var(--hm-brown-light-2)}};
+
+  --hm-sem-palette-brown-light-1: {{color.palette.brown-light-1|var(--hm-brown-light-1)}};
+
+  --hm-sem-palette-brown-default: {{color.palette.brown-default|var(--hm-brown-default)}};
+
+  --hm-sem-palette-brown-dark-1: {{color.palette.brown-dark-1|var(--hm-brown-dark-1)}};
+
+  --hm-sem-palette-brown-light-4: {{color.palette.brown-light-4|var(--hm-brown-light-4)}};
+
+  --hm-sem-palette-orange-light-4: {{color.palette.orange-light-4|var(--hm-orange-light-4)}};
+
+  --hm-sem-palette-orange-default: {{color.palette.orange-default|var(--hm-orange-default)}};
+
+  --hm-sem-palette-warm-neutral-light: {{color.palette.warm-neutral-light|var(--hm-warm-neutral-light)}};
+
+  --hm-sem-palette-warm-neutral-mid: {{color.palette.warm-neutral-mid|var(--hm-warm-neutral-mid)}};
+
+  --hm-sem-palette-warm-neutral-dark: {{color.palette.warm-neutral-dark|var(--hm-warm-neutral-dark)}};
+
+  --hm-sem-palette-beige-light: {{color.palette.beige-light|var(--hm-beige-light)}};
+
+  --hm-sem-palette-red-danger: {{color.palette.red-danger|var(--hm-red-danger)}};
+
+  --hm-sem-palette-white: {{color.palette.white|var(--hm-white)}};
+
+  --hm-sem-palette-black: {{color.palette.black|var(--hm-black)}};
+
+  --hm-sem-palette-neutral-gray-500: {{color.palette.neutral-gray-500|var(--hm-neutral-gray-500)}};
+
+  --hm-sem-palette-green-tone-1: {{color.palette.green-tone-1|var(--hm-green-tone-1)}};
+
+  --hm-sem-palette-green-tone-2: {{color.palette.green-tone-2|var(--hm-green-tone-2)}};
+
+  --hm-sem-palette-green-tone-3: {{color.palette.green-tone-3|var(--hm-green-tone-3)}};
+
+  --hm-sem-palette-green-tone-4: {{color.palette.green-tone-4|var(--hm-green-tone-4)}};
+
+  --hm-sem-palette-warm-neutral-pale: {{color.palette.warm-neutral-pale|var(--hm-warm-neutral-pale)}};
+
+  --hm-sem-palette-warm-neutral-secondary: {{color.palette.warm-neutral-secondary|var(--hm-warm-neutral-secondary)}};
+
+  --hm-sem-palette-warm-neutral-muted: {{color.palette.warm-neutral-muted|var(--hm-warm-neutral-muted)}};
+
+  --hm-sem-palette-green-tint: {{color.palette.green-tint|var(--hm-green-tint)}};
+
+  --hm-sem-palette-yellow-accent: {{color.palette.yellow-accent|var(--hm-yellow-accent)}};
+
+  --hm-sem-palette-brown-deep: {{color.palette.brown-deep}};
+
+  --hm-sem-palette-brown-highlight: {{color.palette.brown-highlight}};
+
+  --hm-sem-palette-orange-light: {{color.palette.orange-light}};
+
+  --hm-sem-palette-orange-mid: {{color.palette.orange-mid}};
+
+  --hm-sem-palette-orange-dark: {{color.palette.orange-dark}};
+
+  --hm-sem-palette-orange-deep: {{color.palette.orange-deep}};
+
+  --hm-sem-palette-orange-border: {{color.palette.orange-border}};
+
+  --hm-sem-palette-orange-border-deep: {{color.palette.orange-border-deep}};
+
+  --hm-sem-palette-gray: {{color.palette.gray}};
+
+  --hm-sem-palette-gray-dark: {{color.palette.gray-dark}};
+
+  --hm-sem-palette-indicator: {{color.palette.indicator}};
+
+  --hm-sem-overlay-background: color-mix(in srgb, var(--hm-sem-palette-black) 10%, transparent);
+  --hm-sem-surface-highlight: color-mix(in srgb, var(--hm-sem-accent) 45%, transparent);
+
+  /* Adapter for shadcn/Tailwind. The public contract.ts allowlist limits runtime overrides. */
+  --background: var(--hm-sem-bg-content);
+  --foreground: var(--hm-sem-fg-primary);
+  --card: var(--hm-sem-bg-surface);
+  --card-foreground: var(--hm-sem-fg-primary);
+  --popover: var(--hm-sem-bg-surface);
+  --popover-foreground: var(--hm-sem-fg-primary);
+  --primary: var(--hm-sem-action-primary);
+  --primary-foreground: var(--hm-sem-on-action-primary);
+  --secondary: var(--hm-sem-palette-warm-neutral-secondary);
+  --secondary-foreground: var(--hm-sem-palette-brown-default);
+  --muted: var(--hm-sem-bg-subtle);
+  --muted-foreground: var(--hm-sem-fg-secondary);
+  --accent: var(--hm-sem-accent);
+  --accent-foreground: var(--hm-sem-on-accent);
+  --destructive: var(--hm-sem-action-destructive);
+  --border: var(--hm-sem-stroke-default);
+  --input: var(--hm-sem-stroke-input-default);
+  --ring: var(--hm-sem-stroke-input-focus);
+  --radius: var(--hm-radius-container);
+}
diff --git a/scripts/theme-templates/primitives.css b/scripts/theme-templates/primitives.css
new file mode 100644
index 0000000..3ef8bd0
--- /dev/null
+++ b/scripts/theme-templates/primitives.css
@@ -0,0 +1,45 @@
+/* HM color palette. Primitive names describe colors, not UI roles. */
+:root {
+  --hm-green-light-4: {{color.palette.green-light-4}};
+  --hm-green-light-3: {{color.palette.green-light-3}};
+  --hm-green-light-2: {{color.palette.green-light-2}};
+  --hm-green-light-1: {{color.palette.green-light-1}};
+  --hm-green-default: {{color.palette.green-default}};
+  --hm-green-dark-1: {{color.palette.green-dark-1}};
+  --hm-green-dark-2: {{color.palette.green-dark-2}};
+
+  --hm-brown-light-2: {{color.palette.brown-light-2}};
+  --hm-brown-light-1: {{color.palette.brown-light-1}};
+  --hm-brown-default: {{color.palette.brown-default}};
+  --hm-brown-dark-1: {{color.palette.brown-dark-1}};
+
+  --hm-brown-light-4: {{color.palette.brown-light-4}};
+
+  --hm-orange-light-4: {{color.palette.orange-light-4}};
+  --hm-orange-default: {{color.palette.orange-default}};
+
+  --hm-warm-neutral-light: {{color.palette.warm-neutral-light}};
+  --hm-warm-neutral-mid: {{color.palette.warm-neutral-mid}};
+  --hm-warm-neutral-dark: {{color.palette.warm-neutral-dark}};
+  --hm-beige-light: {{color.palette.beige-light}};
+
+  --hm-red-danger: {{color.palette.red-danger}};
+  --hm-white: {{color.palette.white}};
+  --hm-black: {{color.palette.black}};
+  --hm-neutral-gray-500: {{color.palette.neutral-gray-500}};
+
+  /* Existing preview values without an approved palette alias. */
+  --hm-green-tone-1: {{color.palette.green-tone-1}};
+  --hm-green-tone-2: {{color.palette.green-tone-2}};
+  --hm-green-tone-3: {{color.palette.green-tone-3}};
+  --hm-green-tone-4: {{color.palette.green-tone-4}};
+  --hm-warm-neutral-pale: {{color.palette.warm-neutral-pale}};
+  --hm-warm-neutral-secondary: {{color.palette.warm-neutral-secondary}};
+  --hm-warm-neutral-muted: {{color.palette.warm-neutral-muted}};
+  --hm-green-tint: {{color.palette.green-tint}};
+}
+
+/* Accent for the current parent group on the green LNB surface (ui-viz color.action.accent-on-green). */
+:root {
+  --hm-yellow-accent: {{color.palette.yellow-accent}};
+}
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..24d1263
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,102 @@
+import { useState } from "react"
+import { ArrowRight, Check, ChevronRight, Layers3, LayoutGrid, Palette, Sparkles } from "lucide-react"
+import { Button } from "@hm-design/ui"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hm-design/ui"
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@hm-design/ui"
+import { Input } from "@hm-design/ui"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hm-design/ui"
+
+const colors = [
+  { name: "HM Green", value: "#123328", tone: "dark" },
+  { name: "HM Brown", value: "#3E3523", tone: "dark" },
+  { name: "Content Beige", value: "#F5F0E5", tone: "light" },
+  { name: "Surface White", value: "#FFFFFF", tone: "light" },
+] as const
+
+export default function App() {
+  const [projectName, setProjectName] = useState("")
+  const [category, setCategory] = useState("")
+  const [saved, setSaved] = useState(false)
+
+  return (
+    <div className="hm-app min-h-screen bg-background text-foreground">
+      <header className="hm-topbar">
+        <div className="hm-container flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3">
+            <span className="hm-mark" aria-hidden="true">HM</span>
+            <div><p className="hm-brand-name">HM Design System</p><p className="hm-brand-caption">한맥 디자인 시스템 · UI Preview</p></div>
+          </div>
+          <span className="hm-topbar-status"><span aria-hidden="true" /> Prototype 01</span>
+        </div>
+      </header>
+
+      <main className="hm-container pb-16 pt-10 md:pt-14">
+        <div className="hm-breadcrumb mb-7 flex items-center gap-2 text-sm"><span>Design System</span><ChevronRight size={14} aria-hidden="true" /><strong>Overview</strong></div>
+
+        <section className="hm-hero grid gap-8 p-7 md:grid-cols-[minmax(0,1fr)_255px] md:p-10">
+          <div className="relative z-10">
+            <div className="hm-eyebrow"><Sparkles size={14} aria-hidden="true" /> FIRST LOOK · HM UI</div>
+            <h1>한맥의 기본 UI를<br /><span>한 화면에서 확인하세요.</span></h1>
+            <p className="hm-hero-copy">기존 디자인 자료의 색상과 형태를 바탕으로 shadcn 컴포넌트를 구성한 초기 미리보기입니다. 실제 화면에서 조작하며 다음 단계를 결정할 수 있습니다.</p>
+            <a className="hm-hero-link" href="#components">컴포넌트 살펴보기 <ArrowRight size={17} aria-hidden="true" /></a>
+          </div>
+          <div className="hm-hero-art" aria-hidden="true"><div className="hm-hero-art-line" /><div className="hm-hero-art-square"><LayoutGrid size={45} strokeWidth={1.2} /></div><div className="hm-hero-art-pill"><span /><span /><span /></div></div>
+        </section>
+
+        <section id="components" className="mt-12 scroll-mt-8">
+          <div className="hm-section-heading mb-5 flex flex-wrap items-end justify-between gap-3">
+            <div><p className="hm-section-kicker">COMPONENTS</p><h2>기본 컴포넌트</h2><p>버튼과 입력 컨트롤의 형태, 상태, 조합을 빠르게 살펴봅니다.</p></div>
+            <span className="hm-count">5 components</span>
+          </div>
+
+          <div className="grid gap-5 lg:grid-cols-[1.05fr_.95fr]">
+            <Card className="hm-panel">
+              <CardHeader className="hm-panel-header"><div className="hm-panel-icon"><Layers3 size={18} aria-hidden="true" /></div><CardTitle>Button</CardTitle><CardDescription>주요 행동부터 보조 행동까지</CardDescription></CardHeader>
+              <CardContent className="hm-panel-content">
+                <div className="hm-control-row">
+                  <Button onClick={() => setSaved(true)}>주요 버튼</Button>
+                  <Button variant="primary" appearance="solid" onClick={() => setSaved(true)}>일반 실행</Button>
+                  <Button variant="primary" appearance="outline">보조 버튼</Button>
+                </div>
+                <div className="hm-control-row mt-4">
+                  <Button variant="cancel" appearance="solid" onClick={() => setSaved(false)}>취소</Button>
+                  <Button variant="destructive" appearance="outline">삭제</Button>
+                  <Button disabled>비활성</Button>
+                </div>
+                <p className="hm-component-note">기존 버튼 규격의 Green 실행, Gray 취소, Red Outline 삭제 표현을 참고했습니다.</p>
+              </CardContent>
+            </Card>
+
+            <Card className="hm-panel">
+              <CardHeader className="hm-panel-header"><div className="hm-panel-icon"><Palette size={18} aria-hidden="true" /></div><CardTitle>Color & surface</CardTitle><CardDescription>초기 화면에 사용한 HM 컬러</CardDescription></CardHeader>
+              <CardContent className="hm-panel-content"><div className="hm-swatch-grid">{colors.map((color) => <div className="hm-swatch" key={color.name}><span className={`hm-swatch-color hm-swatch-color--${color.tone}`} style={{ backgroundColor: color.value }} /><span className="hm-swatch-name">{color.name}</span><span className="hm-swatch-value">{color.value}</span></div>)}</div></CardContent>
+            </Card>
+          </div>
+
+          <div className="mt-5 grid gap-5 lg:grid-cols-[1.05fr_.95fr]">
+            <Card className="hm-panel">
+              <CardHeader className="hm-panel-header"><div className="hm-panel-icon"><LayoutGrid size={18} aria-hidden="true" /></div><CardTitle>Input & Select</CardTitle><CardDescription>업무 화면의 기본 입력 조합</CardDescription></CardHeader>
+              <CardContent className="hm-panel-content">
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="hm-field"><label htmlFor="project-name">프로젝트명</label><Input id="project-name" size="medium" placeholder="프로젝트명을 입력하세요" value={projectName} onChange={(event) => { setProjectName(event.target.value); setSaved(false) }} /></div>
+                  <div className="hm-field"><label htmlFor="project-category">분류</label><Select value={category} onValueChange={(value) => { setCategory(value); setSaved(false) }}><SelectTrigger id="project-category" size="medium" className="w-full"><SelectValue placeholder="분류 선택" /></SelectTrigger><SelectContent><SelectItem value="design">디자인 검토</SelectItem><SelectItem value="development">개발 적용</SelectItem><SelectItem value="operation">운영 관리</SelectItem></SelectContent></Select></div>
+                </div>
+                <div className="hm-form-footer mt-6 flex flex-wrap items-center justify-between gap-3"><p aria-live="polite">{saved ? <><Check size={15} aria-hidden="true" /> 입력 상태를 확인했습니다.</> : "값을 입력하고 버튼을 눌러 상태를 확인해 보세요."}</p><Button variant="primary" appearance="solid" onClick={() => setSaved(true)}>상태 확인</Button></div>
+              </CardContent>
+            </Card>
+
+            <Card className="hm-panel hm-panel--showcase">
+              <CardHeader className="hm-panel-header"><div className="hm-panel-icon"><LayoutGrid size={18} aria-hidden="true" /></div><CardTitle>Card & Dialog</CardTitle><CardDescription>콘텐츠 영역과 팝업 동작</CardDescription></CardHeader>
+              <CardContent className="hm-panel-content"><div className="hm-inner-card"><span className="hm-inner-card-label">PREVIEW CARD</span><h3>하나의 작업을 명확하게</h3><p>카드 안에서 정보를 정리하고 필요한 행동으로 이어지는 구성을 확인합니다.</p>
+                <Dialog><DialogTrigger asChild><Button variant="primary" appearance="outline">Dialog 열기</Button></DialogTrigger><DialogContent><DialogHeader><DialogTitle>작업 확인</DialogTitle><DialogDescription>현재 입력한 내용을 확인한 뒤 계속 진행할 수 있습니다.</DialogDescription></DialogHeader><DialogBody><div className="hm-dialog-summary"><span>프로젝트명</span><strong>{projectName || "입력 전"}</strong><span>분류</span><strong>{category === "design" ? "디자인 검토" : category === "development" ? "개발 적용" : category === "operation" ? "운영 관리" : "선택 전"}</strong></div></DialogBody><DialogFooter><DialogClose asChild><Button variant="cancel" appearance="solid">닫기</Button></DialogClose><DialogClose asChild><Button variant="primary" appearance="solid" onClick={() => setSaved(true)}>확인</Button></DialogClose></DialogFooter></DialogContent></Dialog>
+              </div></CardContent>
+            </Card>
+          </div>
+        </section>
+
+        <footer className="hm-footer mt-12 flex flex-wrap items-center justify-between gap-3 text-sm"><span>HM Design System · 초기 UI Preview</span><span>React · Tailwind CSS v4 · shadcn/ui · Storybook</span></footer>
+      </main>
+    </div>
+  )
+}
+
diff --git a/src/center/center-facility.stories.tsx b/src/center/center-facility.stories.tsx
new file mode 100644
index 0000000..5d6e5ba
--- /dev/null
+++ b/src/center/center-facility.stories.tsx
@@ -0,0 +1,78 @@
+import type { ComponentType } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { TunnelFacility } from "@hm-design/center-graphic"
+import {
+  BridgeReferenceDemo,
+  IntersectionReferenceDemo,
+  InterchangeReferenceDemo,
+  JunctionReferenceDemo,
+  LinkedFacilityReferenceDemo,
+  RoadsideReferenceDemo,
+  TunnelReferenceDemo,
+} from "@hm-design/center-graphic/reference"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { CENTER_BOUNDARY, withRepresentation } from "./center-shared"
+
+// Owners: ui-viz docs/visualization/facility.md and facility-assets.md (128 approved SVG references, shipped unchanged).
+// The display scale (Q2b) is HOLD and Facility has no Selected / Hover state.
+const meta = {
+  title: "Center Graphic/Facility",
+  component: TunnelFacility,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof TunnelFacility>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
+const page = (name: string, Demo: ComponentType): Story => ({
+  name,
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title={name}
+        description="CENTER 시설물 그래픽입니다. 승인 SVG Reference를 위치도(Position Map)와 실사화(Actual / Detail)로 표시합니다."
+      />
+      <StorySection title="Overview" description={CENTER_BOUNDARY}>
+        {withRepresentation(() => <Demo />)}
+      </StorySection>
+    </StoryPage>
+  ),
+})
+
+export const Tunnel: Story = page("터널", TunnelReferenceDemo)
+export const Bridge: Story = page("교량", BridgeReferenceDemo)
+export const Intersection: Story = page("교차로", IntersectionReferenceDemo)
+export const Junction: Story = page("분기점", JunctionReferenceDemo)
+export const Interchange: Story = page("나들목", InterchangeReferenceDemo)
+export const Roadside: Story = page("휴게소 · 졸음쉼터", RoadsideReferenceDemo)
+// Linked facilities are a standalone section heading followed by item cards.
+// Keep the reference data/artwork and road-class grouping owned by the package.
+export const Linked: Story = {
+  ...page("연계 시설물", LinkedFacilityReferenceDemo),
+  render: () => (
+    <StoryPage className="sb-center-linked-page">
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title="연계 시설물"
+        description={
+          <>
+            CENTER 시설물 그래픽입니다. 승인 SVG Reference를 위치도(Position Map)와 실사화(Actual / Detail)로 표시합니다.
+            <br />
+            {CENTER_BOUNDARY}
+          </>
+        }
+      />
+      {withRepresentation(() => <LinkedFacilityReferenceDemo />)}
+    </StoryPage>
+  ),
+}
+
+export const TunnelPlayground: Story = {
+  tags: ["verification"],
+  name: "직접 테스트 (터널)",
+  decorators: [withRepresentation],
+  args: { name: "대산2터널", secondaryText: "L=750m", variant: "positionMap", separated: false },
+  argTypes: { variant: { control: "inline-radio", options: ["positionMap", "actualDetail"] } },
+}
diff --git a/src/center/center-information.stories.tsx b/src/center/center-information.stories.tsx
new file mode 100644
index 0000000..3b1c179
--- /dev/null
+++ b/src/center/center-information.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { CenterInformationDisplayReferenceDemo } from "@hm-design/center-graphic/reference"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { CENTER_BOUNDARY, withRepresentation } from "./center-shared"
+
+// Owner: ui-viz docs/patterns/center-information-presentation.md and center-information-{box,table,emphasis}.md.
+// Single-line ellipsis is resolved; multi-line overflow, exact placement and the presentation scale (Q3) are not.
+const meta = {
+  title: "Center Graphic/Information",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+} satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
+export const Information: Story = {
+  name: "Information",
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title="Information"
+        description="CENTER 정보 표시(Box · Table · Emphasis) Reference입니다. 단일행 말줄임만 해결된 상태이며 배율(Q3)은 정해지지 않았습니다."
+      />
+      <StorySection title="Overview" description={CENTER_BOUNDARY}>
+        {withRepresentation(() => (
+          <div className="sb-center-information">
+            <CenterInformationDisplayReferenceDemo />
+          </div>
+        ))}
+      </StorySection>
+    </StoryPage>
+  ),
+}
diff --git a/src/center/center-overview.stories.tsx b/src/center/center-overview.stories.tsx
new file mode 100644
index 0000000..3894a3b
--- /dev/null
+++ b/src/center/center-overview.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { CENTER_BOUNDARY, CenterFrame, SCALE_NOTE, StatusTable } from "./center-shared"
+
+// Mirrors the ui-viz docs/governance/center-domain.md §5 registry rows. The values stay in the owner documents.
+const STATUS: [string, string, string, string][] = [
+  ["Representation Scale (7680×2160 = 1.00 / 3840×2160 = 0.75)", "CONFIRMED_BY_DESIGN", "foundation/center-scale.md §3.5", "CenterRepresentation. 다른 viewport는 PREVIEW_ONLY 1.00"],
+  ["FACILITY_PRESENTATION_SCALE (Q2b)", "HOLD — OWNER_DECISION_REQUIRED", "visualization/facility.md §14.1", "구현하지 않음. scale 값·preset을 만들지 않음"],
+  ["INFORMATION_PRESENTATION_SCALE (Q3)", "HOLD — OWNER_DECISION_REQUIRED", "patterns/center-information-presentation.md §5.7", "구현하지 않음"],
+  ["Title Resolution B 수치 / per-Type palette", "TBD / SCOPED_DESIGN_APPROVAL", "components/center-title.md §6.7 · §8.1", "Reference 그대로"],
+  ["Information body-kind · padding · multi-line · KD-1/KD-4", "TBD", "patterns/center-information-presentation.md §5.3 · §8", "단일행 말줄임(해결)만 표시"],
+  ["Information Box badge anchor · §5.2.2 ink-position", "OWNER_DECISION_REQUIRED / Candidate (authored)", "components/center-information-box.md §5.2", "Reference 그대로. 승격 없음"],
+  ["Facility §12.24 rules (ink basis · LABEL_REGION …)", "OWNER_REVIEW (Q2c)", "visualization/facility.md §12.24", "Reference 동작 표시. 검증 완료로 표현하지 않음"],
+  ["Facility asset manifest (128 references)", "Confirmed current mapping · stable-ID/alias policy PARTIAL", "visualization/facility-assets.md", "승인 SVG를 바이트 그대로 사용"],
+  ["Spatial · Title · Information source SVG 65종", "CANONICAL_ASSET_CANDIDATE (64 RECHECK · 1 ADOPTED)", "visualization/spatial-title-information-assets.md", "runtime 미사용 · 규칙 기반 재구성"],
+  ["Route layer order Shadow → Outline → Primary Stroke", "CONFIRMED", "visualization/composition.md §5.1 · route.md §7.10", "Spatial 노선"],
+  ["전체 Visualization layer stack · collision algorithm", "Observed Candidate / TBD", "visualization/composition.md §6 · §7.5", "구현하지 않음"],
+  ["Railway outline width · line join", "TBD", "visualization/route.md §4.1 · §6.4", "Reference 값 표시, 확정 아님"],
+  ["Spatial §6.2 tile layer · 읍·면·동 radius · §8.1 paint order", "Candidate (authored) · OWNER_REVIEW (R2)", "visualization/spatial-map.md", "Reference 그대로"],
+  ["Color Candidate application", "TBD", "foundation/center-color.md §6–7", "Reference 그대로"],
+]
+
+const meta = { title: "Center Graphic/Overview", parameters: { layout: "fullscreen", controls: { disable: true } } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Overview: Story = {
+  name: "Overview",
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader kicker={STORY_KICKER.center} title="Overview" description={CENTER_BOUNDARY} />
+      <CenterFrame>
+        <div className="sb-center-overview">
+          <StorySection title="Representation Scale" description="제작 해상도별 CENTER 그래픽 표시 배율입니다.">
+            <p className="sb-center-note">{SCALE_NOTE}</p>
+          </StorySection>
+          <StorySection title="Status" description="ui-viz center-domain.md §5 registry의 항목별 상태와 이 Storybook에서의 표현입니다.">
+            <div className="sb-center-scroll">
+              <StatusTable rows={STATUS} />
+            </div>
+          </StorySection>
+        </div>
+      </CenterFrame>
+    </StoryPage>
+  ),
+}
diff --git a/src/center/center-shared.tsx b/src/center/center-shared.tsx
new file mode 100644
index 0000000..3e823c5
--- /dev/null
+++ b/src/center/center-shared.tsx
@@ -0,0 +1,52 @@
+import type { ReactNode } from "react"
+import { CenterRepresentation, type CenterTargetResolution } from "@hm-design/center-graphic"
+import "./center-stories.css"
+
+// CENTER is a separate domain from the UI Component System. These stories present the packaged CENTER components and the
+// reference demo pages; they do not own, create or promote CENTER contract values (see docs/center-graphic/README.md).
+export const CENTER_BOUNDARY =
+  "CENTER Web Reference 렌더링입니다. Canonical 값·상태는 ui-viz CENTER owner 문서가 소유하며 HOLD / TBD / Candidate / OWNER_DECISION_REQUIRED를 이 화면이 확정하지 않습니다."
+
+export const SCALE_NOTE =
+  "제작 대상이 7680 × 2160이면 CENTER 그래픽을 100%, 3840 × 2160이면 75%로 표시합니다. Storybook 화면 크기는 배율을 정하지 않으며, 다른 제작 해상도의 배율은 정해지지 않았습니다. 제작 대상은 주소에 centerResolution=3840x2160 을 붙여 바꿉니다."
+
+export const CenterFrame = ({ children }: { children: ReactNode }) => (
+  <div className="sb-center" lang="ko">
+    {children}
+  </div>
+)
+
+// A shareable Storybook URL states the production target explicitly; the default is the 7680 reference.
+export const centerTargetResolution = (): CenterTargetResolution => {
+  const search = window.parent !== window ? window.parent.location.search : window.location.search
+  return new URLSearchParams(search).get("centerResolution") === "3840x2160" ? "3840x2160" : "7680x2160"
+}
+
+export const withRepresentation = (Story: () => ReactNode) => (
+  <CenterFrame>
+    <CenterRepresentation targetResolution={centerTargetResolution()}>
+      <Story />
+    </CenterRepresentation>
+  </CenterFrame>
+)
+
+export function BoundaryNote({ children }: { children?: ReactNode }) {
+  return <p className="sb-center-note">{children ?? CENTER_BOUNDARY}</p>
+}
+
+export function StatusTable({ rows, label = "CENTER 상태" }: { rows: [string, string, string, string][]; label?: string }) {
+  return (
+    <table className="sb-center-status" aria-label={label}>
+      <thead>
+        <tr><th>항목</th><th>상태</th><th>Owner (ui-viz)</th><th>이 Storybook에서의 표현</th></tr>
+      </thead>
+      <tbody>
+        {rows.map(([item, status, owner, presentation]) => (
+          <tr key={item} data-center-status={status}>
+            <td>{item}</td><td><code>{status}</code></td><td>{owner}</td><td>{presentation}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}
diff --git a/src/center/center-spatial.stories.tsx b/src/center/center-spatial.stories.tsx
new file mode 100644
index 0000000..82459af
--- /dev/null
+++ b/src/center/center-spatial.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { RouteLine } from "@hm-design/center-graphic"
+import { CenterSpatialInformationReferenceDemo } from "@hm-design/center-graphic/reference"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { CENTER_BOUNDARY, withRepresentation } from "./center-shared"
+
+// Owners: ui-viz docs/visualization/route.md, spatial-map.md, spatial-section.md, composition.md.
+// Route layer order Shadow -> Outline -> Primary Stroke is CONFIRMED; the whole-map layer order is Candidate and line join is TBD.
+const meta = {
+  title: "Center Graphic/Spatial",
+  component: RouteLine,
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+} satisfies Meta<typeof RouteLine>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
+export const Spatial: Story = {
+  name: "Spatial",
+  render: () => (
+    <StoryPage className="sb-center-spatial-page">
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title="Spatial"
+        description="CENTER 노선·공간 정보 Reference입니다. 노선 레이어 순서(Shadow → Outline → Primary Stroke)는 확정이며, 전체 지도 레이어 순서는 Candidate, line join은 TBD입니다."
+      />
+      <StorySection title="Overview" description={CENTER_BOUNDARY}>
+        {withRepresentation(() => <CenterSpatialInformationReferenceDemo />)}
+      </StorySection>
+    </StoryPage>
+  ),
+}
diff --git a/src/center/center-stories.css b/src/center/center-stories.css
new file mode 100644
index 0000000..b5fa2a4
--- /dev/null
+++ b/src/center/center-stories.css
@@ -0,0 +1,251 @@
+/* Storybook review chrome only; never select the CENTER artwork itself.
+   Existing package demo classes are adapters to this common card frame, so
+   @hm-design/center-graphic and its /reference API remain unchanged. */
+.sb-center {
+  --color-fg-secondary: #6e6759;
+  --color-stroke-subtle: #e0dace;
+  --color-bg-content: #f5f0e5;
+  --color-action-primary: #123328;
+  /* Measured from TunnelReferenceDemo at 1280px before consolidation.
+     Local presentation values, not new Foundation / runtime theme tokens. */
+  --sb-center-card-background: rgba(217, 217, 217, .48);
+  --sb-center-card-border: 1px solid rgba(64, 5, 0, .14);
+  --sb-center-card-radius: 8px;
+  --sb-center-header-background: rgba(255, 255, 255, .62);
+  --sb-center-header-border: 1px solid rgba(64, 5, 0, .12);
+  --sb-center-header-padding: 8px 14px;
+  --sb-center-header-gap: 12px;
+  --sb-center-content-padding: 24px;
+  --sb-center-section-gap: 18px;
+  --sb-center-column-gap: 14px;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: 8px 0;
+}
+.sb-center-note { max-width: 880px; margin: 0; color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); overflow-wrap: anywhere; }
+.sb-center-status { width: 100%; border-collapse: collapse; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
+.sb-center-status th, .sb-center-status td { border: 1px solid #e0dace; padding: 6px 10px; text-align: left; vertical-align: top; }
+.sb-center-status th { background: #f4f1ea; font-weight: 600; }
+.sb-center-status code { font-size: inherit; }
+.sb-center-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
+.sb-center-information { min-width: 0; width: 100%; }
+
+/* One frame for all ordinary reference cards, including Linked item cards.
+   Overview reuses StorySection rather than introducing another React helper. */
+.sb-center :is(.tunnel-reference__sample, .facility-reference__sample,
+  .center-title-reference__sample, .cid-demo__block, .linked-facility__card,
+  .sb-page-section, .csi-panel) {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background: var(--sb-center-card-background);
+  border: var(--sb-center-card-border);
+  border-radius: var(--sb-center-card-radius);
+}
+
+.sb-center :is(.tunnel-reference, .facility-reference, .center-title-reference,
+  .cid-demo, .linked-facility, .csi-demo, .sb-center-overview) {
+  display: grid;
+  min-width: 0;
+  gap: var(--sb-center-section-gap);
+}
+.sb-center-overview { margin-top: 32px; }
+.sb-center :is(.tunnel-reference__variant-grid, .facility-reference__variant-grid) {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sb-center-column-gap);
+}
+
+.sb-center :is(.tunnel-reference__sample, .facility-reference__sample,
+  .center-title-reference__sample, .cid-demo__block,
+  .linked-facility__card, .sb-page-section) > header {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 42px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--sb-center-header-gap);
+  margin: 0;
+  padding: var(--sb-center-header-padding);
+  background: var(--sb-center-header-background);
+  border-bottom: var(--sb-center-header-border);
+  overflow-wrap: anywhere;
+}
+.sb-center .center-title-reference__sample > header > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sb-center-header-gap);
+}
+.sb-center :is(.tunnel-reference__sample, .facility-reference__sample,
+  .center-title-reference__sample, .cid-demo__block, .linked-facility__group,
+  .linked-facility__card, .sb-page-section) > header :is(strong, h2, h3, .sb-page-section-title) {
+  margin: 0;
+  color: var(--hm-sem-fg-primary);
+  font-size: var(--hm-label-font-size);
+  line-height: var(--hm-label-line-height);
+  font-weight: var(--hm-font-weight-bold);
+}
+.sb-center :is(.tunnel-reference__sample, .facility-reference__sample,
+  .center-title-reference__sample, .cid-demo__block, .linked-facility__group,
+  .linked-facility__card, .sb-page-section) > header :is(span, small, p, .sb-page-section-description) {
+  min-width: 0;
+  margin: 0;
+  color: var(--hm-sem-fg-secondary);
+  font-size: var(--hm-button-font-size-sm);
+  line-height: var(--hm-button-line-height-sm);
+  font-weight: var(--hm-input-font-weight);
+  text-align: left;
+}
+
+/* No common height: keep each demo's content-driven height / existing minimum.
+   Safe centering keeps the start of wide specimens reachable by local scroll. */
+.sb-center :is(.tunnel-reference__stage, .facility-reference__stage,
+  .center-title-reference__stage, .cid-demo__stage,
+  .sb-center-overview .sb-page-section-body, .linked-facility__variant) {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  padding: var(--sb-center-content-padding);
+  overflow-x: auto;
+}
+.sb-center :is(.tunnel-reference__stage, .facility-reference__stage) {
+  grid-template-columns: minmax(0, 1fr);
+  justify-content: normal;
+  justify-items: safe center;
+}
+.sb-center :is(.center-title-reference__stage, .cid-demo__stage) {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  justify-content: safe center;
+}
+.sb-center .cid-demo__stage > * { flex: 0 0 auto; }
+.sb-center .linked-facility__grid {
+  min-width: 0;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
+  gap: var(--sb-center-column-gap);
+  padding: 0;
+  align-items: start;
+}
+/* Linked is Section Header + Common Card List. Road-class groups and context
+   are plain sections, so an item card never sits inside another visual card. */
+.sb-center-linked-page .sb-center {
+  padding-top: var(--sb-center-section-gap);
+}
+.sb-center .linked-facility :is(.linked-facility__group, .linked-facility__context, .linked-facility__pending) {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.sb-center .linked-facility__group {
+  display: grid;
+  gap: var(--sb-center-section-gap);
+}
+.sb-center .linked-facility__group > header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sb-center-header-gap);
+  min-height: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.sb-center .linked-facility__context {
+  gap: var(--sb-center-section-gap);
+  overflow-wrap: anywhere;
+}
+.sb-center .linked-facility__card {
+  container: sb-linked-card / inline-size;
+}
+/* 56px label + 10px gap + measured 251px artwork + 48px common padding.
+   Stack the label when that row cannot fit; preserve artwork size and local scroll. */
+@container sb-linked-card (max-width: 365px) {
+  .sb-center .linked-facility__variant {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto;
+    justify-items: safe center;
+    gap: var(--sb-center-header-gap);
+  }
+  .sb-center .linked-facility__variant > small {
+    grid-row: auto;
+  }
+}
+.sb-center .sb-center-status { min-width: 720px; }
+
+/* Spatial cards reuse the common frame above. Contrast belongs to the inner
+   specimen canvas, never the card, heading, description or controls. */
+.sb-center-spatial-page .csi-panel {
+  grid-template-columns: minmax(0, 1fr);
+  padding: var(--sb-center-content-padding);
+  gap: var(--sb-center-header-gap);
+  overflow: hidden;
+}
+.sb-center-spatial-page .csi-panel > h4 {
+  margin: calc(-1 * var(--sb-center-content-padding)) calc(-1 * var(--sb-center-content-padding)) 0;
+  padding: var(--sb-center-header-padding);
+  background: var(--sb-center-header-background);
+  border-bottom: var(--sb-center-header-border);
+  color: var(--hm-sem-fg-primary);
+  font-size: var(--hm-label-font-size);
+  line-height: var(--hm-label-line-height);
+  font-weight: var(--hm-font-weight-bold);
+  overflow-wrap: anywhere;
+}
+.sb-center-spatial-page .csi-panel > :is(.csi-legend, .csi-note) {
+  color: var(--hm-sem-fg-primary);
+  font-size: var(--hm-button-font-size-sm);
+  line-height: var(--hm-button-line-height-sm);
+  overflow-wrap: anywhere;
+}
+
+/* Direct demo divs are canvas/control groups, not nested cards. Keep wide
+   swatches, compass rows and the fixed 840px extent fixture locally scrollable;
+   headings and explanatory text stay within the card at every viewport. */
+.sb-center-spatial-page .csi-panel > div {
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.sb-center-spatial-page .csi-panel :is(.csi-row-label, .csi-controls label) {
+  color: var(--hm-sem-fg-primary);
+}
+/* These fluid-width route canvases already fit the card. Their marker/shadow
+   overhang must not create a subpixel scrollbar or change the content height. */
+.sb-center-spatial-page :is(#csi-area-project-route, #csi-area-direction) > div {
+  overflow: visible;
+}
+/* District and boundary canvases stay transparent on the common surface.
+   Only their review labels use Foundation black; artwork colours stay intact. */
+.sb-center-spatial-page :is(#csi-area-administrative, #csi-area-zone-boundary) .csi-row-label {
+  color: var(--hm-sem-palette-black);
+}
+/* Preserve the extent fixture's white terminal lines and translucent washes
+   on its original light canvas. The compass needs no separate light backing. */
+.sb-center-spatial-page #csi-area-spatial-section > .csi-spatial-specimens {
+  background: #efefef;
+}
+/* The reference demo authors white state captions inline for its dark canvas.
+   This exact caption selector changes review text only, never semantic artwork. */
+.sb-center-spatial-page #csi-area-route .csi-swatchgrid > div > div > div:last-child {
+  color: var(--hm-sem-fg-primary) !important;
+}
+
+@media (max-width: 760px) {
+  .sb-center :is(.tunnel-reference__variant-grid, .facility-reference__variant-grid) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
diff --git a/src/center/center-title.stories.tsx b/src/center/center-title.stories.tsx
new file mode 100644
index 0000000..84c4ac9
--- /dev/null
+++ b/src/center/center-title.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { CenterTitle, CENTER_TITLE_COMPOSITIONS, type CenterTitleComposition } from "@hm-design/center-graphic"
+import { CenterTitleReferenceDemo } from "@hm-design/center-graphic/reference"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { CENTER_BOUNDARY, withRepresentation } from "./center-shared"
+
+// Owner: ui-viz docs/components/center-title.md. Title Resolution B numeric output is TBD; the per-Type palette is SCOPED_DESIGN_APPROVAL.
+const meta = {
+  title: "Center Graphic/Title",
+  component: CenterTitle,
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof CenterTitle>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the four title types. Named after the area so Storybook shows it as a single sidebar item.
+// Common Story page. The CENTER representation wraps only the specimen, so the page title is never scaled with the graphic.
+export const Compositions: Story = {
+  name: "Title",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.center}
+        title="Title"
+        description="CENTER 제목 그래픽의 네 가지 Type Reference입니다. Resolution B 수치는 TBD, Type별 palette는 SCOPED_DESIGN_APPROVAL입니다."
+      />
+      <StorySection title="Overview" description={CENTER_BOUNDARY}>
+        {withRepresentation(() => <CenterTitleReferenceDemo />)}
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Playground: Story = {
+  tags: ["verification"],
+  decorators: [withRepresentation],
+  args: { composition: "routeProjectNameRoute", context: "서산영덕선", projectName: "대산~당진 건설공사", routeClassification: "고속국도 제30호", projectRoute: "L=25.36km" },
+  argTypes: {
+    composition: {
+      control: { type: "select", labels: Object.fromEntries(Object.entries(CENTER_TITLE_COMPOSITIONS).map(([key, { type, label }]) => [key, `${type} · ${label}`])) },
+      options: Object.keys(CENTER_TITLE_COMPOSITIONS) as CenterTitleComposition[],
+    },
+  },
+  render: (args) => <CenterTitle {...args} />,
+}
diff --git a/src/components/accordion.stories.tsx b/src/components/accordion.stories.tsx
new file mode 100644
index 0000000..4cc1110
--- /dev/null
+++ b/src/components/accordion.stories.tsx
@@ -0,0 +1,147 @@
+import type { ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative "Accordion" Story puts each Radix mode on one page with real, clickable items. The same sections also exist
+// as Stories tagged `verification`, which the sidebar hides by default (see .storybook/main.ts). Modes use the Radix API
+// (type, collapsible, defaultValue, disabled); there are no HM variant props.
+
+const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(6)
+
+const narrow = (children: ReactNode) => <div className="w-full max-w-md">{children}</div>
+
+function SingleSpecimen() {
+  return narrow(
+    <Accordion type="single" defaultValue="a">
+      <AccordionItem value="a">
+        <AccordionTrigger>배송은 얼마나 걸리나요?</AccordionTrigger>
+        <AccordionContent>주문 후 2~3일 안에 도착합니다.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>반품은 어떻게 하나요?</AccordionTrigger>
+        <AccordionContent>수령 후 7일 이내에 마이페이지에서 신청합니다.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="c">
+        <AccordionTrigger>결제 수단은 무엇이 있나요?</AccordionTrigger>
+        <AccordionContent>카드와 계좌이체를 지원합니다.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+function CollapsibleSingleSpecimen() {
+  return narrow(
+    <Accordion type="single" collapsible>
+      <AccordionItem value="a">
+        <AccordionTrigger>열린 항목을 다시 눌러 닫을 수 있습니다</AccordionTrigger>
+        <AccordionContent>collapsible 속성이 있어 모두 닫힌 상태가 가능합니다.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>다른 항목</AccordionTrigger>
+        <AccordionContent>한 번에 하나만 열립니다.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+function MultipleSpecimen() {
+  return narrow(
+    <Accordion type="multiple" defaultValue={["a", "b"]}>
+      <AccordionItem value="a">
+        <AccordionTrigger>기본 정보</AccordionTrigger>
+        <AccordionContent>여러 항목을 동시에 열 수 있습니다.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>상세 정보</AccordionTrigger>
+        <AccordionContent>처음부터 열린 항목입니다.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="c">
+        <AccordionTrigger>기타</AccordionTrigger>
+        <AccordionContent>접힌 항목입니다.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+function DisabledSpecimen() {
+  return narrow(
+    <Accordion type="single" collapsible>
+      <AccordionItem value="a">
+        <AccordionTrigger>사용 가능한 항목</AccordionTrigger>
+        <AccordionContent>키보드 이동은 비활성 항목을 건너뜁니다.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b" disabled>
+        <AccordionTrigger>비활성 항목</AccordionTrigger>
+        <AccordionContent>열 수 없습니다.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="c">
+        <AccordionTrigger>다음 항목</AccordionTrigger>
+        <AccordionContent>비활성 항목 다음입니다.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+function LongSpecimen() {
+  return narrow(
+    <Accordion type="single" defaultValue="a">
+      <AccordionItem value="a">
+        <AccordionTrigger>{`여러 줄로 이어지는 긴 Trigger 문구입니다. ${longText.slice(0, 60)}`}</AccordionTrigger>
+        <AccordionContent>
+          <p>{longText}</p>
+          <p className="mt-2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>두 번째 항목</AccordionTrigger>
+        <AccordionContent>짧은 내용</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+const sections = [
+  { id: "single", label: "Single", note: "type=\"single\": 한 번에 하나, 기본으로 첫 항목이 열림", node: <SingleSpecimen /> },
+  { id: "collapsible-single", label: "Collapsible Single", note: "type=\"single\" collapsible", node: <CollapsibleSingleSpecimen /> },
+  { id: "multiple", label: "Multiple", note: "type=\"multiple\": 동시에 여러 항목", node: <MultipleSpecimen /> },
+  { id: "disabled", label: "Disabled Item", note: "disabled 항목은 열리지 않고 키보드 이동에서 제외", node: <DisabledSpecimen /> },
+  { id: "long", label: "Long Content", note: "여러 줄 Trigger와 긴 콘텐츠", node: <LongSpecimen /> },
+]
+
+// No `component` here: Accordion props are a union (single | multiple), so Stories without args would not type-check.
+const meta = { title: "Components/Disclosure/Accordion", parameters: { layout: "padded" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Accordion",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Accordion"
+        description="제목을 눌러 관련 내용을 펼치고 접는 목록입니다. 동작은 Radix API(type, collapsible, defaultValue, disabled)로 정하며 HM variant prop은 없습니다."
+      />
+      <StorySection title="Overview" description="기본 Accordion입니다.">{board("single")}</StorySection>
+      <StorySection title="Variants" description="모두 접을 수 있는 single과, 여러 항목을 동시에 여는 multiple입니다.">
+        {board("collapsible-single", "multiple")}
+      </StorySection>
+      <StorySection title="States">{board("disabled")}</StorySection>
+      <StorySection title="Usage">{board("long")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Stories: the same specimens, hidden from the sidebar (tag `verification`).
+export const Single: Story = { tags: ["verification"], render: () => <SingleSpecimen /> }
+export const Multiple: Story = { tags: ["verification"], render: () => <MultipleSpecimen /> }
+export const Disabled: Story = { tags: ["verification"], render: () => <DisabledSpecimen /> }
+export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongSpecimen /> }
diff --git a/src/components/alert-dialog.stories.tsx b/src/components/alert-dialog.stories.tsx
new file mode 100644
index 0000000..d9826e4
--- /dev/null
+++ b/src/components/alert-dialog.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Alert Dialog is a modal Radix overlay (Portal) for a decision that must be confirmed or cancelled: no Close (X), no outside
+// dismiss. The representative Story opens the real dialogs; the same cases start open in the verification Stories.
+// Action / Cancel are the HM Button: ordinary confirmation uses a Solid pair; deletion uses an Outline pair.
+
+function Confirmation({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <AlertDialog defaultOpen={defaultOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          로그아웃
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>로그아웃하시겠습니까?</AlertDialogTitle>
+          <AlertDialogDescription>저장하지 않은 변경 사항은 사라집니다.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel appearance="solid">취소</AlertDialogCancel>
+          <AlertDialogAction variant="primary" appearance="solid">로그아웃</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+function Destructive({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <AlertDialog defaultOpen={defaultOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" appearance="outline">
+          삭제
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>프로젝트를 삭제하시겠습니까?</AlertDialogTitle>
+          <AlertDialogDescription>삭제하면 되돌릴 수 없습니다. 프로젝트의 모든 데이터가 함께 삭제됩니다.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel appearance="outline">취소</AlertDialogCancel>
+          <AlertDialogAction variant="destructive" appearance="outline">
+            삭제
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+const meta = { title: "Components/Overlay/Alert Dialog", component: AlertDialog, parameters: { layout: "centered" } } satisfies Meta<typeof AlertDialog>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the common Story page; each trigger opens the real dialog.
+export const All: Story = {
+  name: "Alert Dialog",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Alert Dialog"
+        description="반드시 확인하거나 취소해야 하는 결정을 묻는 모달입니다. 닫기(X)와 바깥 클릭 닫기가 없습니다."
+      />
+      <StorySection title="Overview" description="일반 확인창은 같은 크기의 Solid 버튼 세트입니다. 버튼을 눌러 엽니다.">
+        <Confirmation />
+      </StorySection>
+      <StorySection title="Variants" description="삭제 확인창은 취소와 삭제 모두 같은 크기의 Outline 세트입니다.">
+        <Destructive />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const ConfirmationOpen: Story = { tags: ["verification"], name: "Confirmation", render: () => <Confirmation defaultOpen /> }
+export const DestructiveOpen: Story = { tags: ["verification"], name: "Destructive", render: () => <Destructive defaultOpen /> }
diff --git a/src/components/alert.stories.tsx b/src/components/alert.stories.tsx
new file mode 100644
index 0000000..9a0f9aa
--- /dev/null
+++ b/src/components/alert.stories.tsx
@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { InfoIcon, TriangleAlertIcon } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const meta = {
+  title: "Components/Feedback/Alert",
+  component: Alert,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 인라인 메시지(Toast 아님). padding 12/16, radius 4, border 1px, Title 14/20/500, Description 14/20/400. variant는 default(neutral)와 destructive만 둡니다. success·warning·information은 HM 상태 색이 정해지지 않아 만들지 않았습니다. 닫기 동작은 없습니다.",
+      },
+    },
+  },
+  argTypes: { variant: { control: "inline-radio", options: ["default", "destructive"] } },
+} satisfies Meta<typeof Alert>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Alert",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Alert"
+        description="화면 안에 놓이는 인라인 메시지입니다(Toast 아님). variant는 default(neutral)와 destructive만 두며 닫기 동작은 없습니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          min={320}
+          states={[
+            {
+              id: "default",
+              label: "Default",
+              children: (
+                <Alert>
+                  <InfoIcon aria-hidden="true" />
+                  <AlertTitle>Heads up</AlertTitle>
+                  <AlertDescription>You can update your project settings at any time.</AlertDescription>
+                </Alert>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Variants">
+        <StateBoard
+          min={320}
+          states={[
+            {
+              id: "destructive",
+              label: "Destructive",
+              children: (
+                <Alert variant="destructive">
+                  <TriangleAlertIcon aria-hidden="true" />
+                  <AlertTitle>Unable to save</AlertTitle>
+                  <AlertDescription>Check the project name and try again.</AlertDescription>
+                </Alert>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="아이콘 없음, 제목만, 긴 내용 구성입니다.">
+        <StateBoard
+          min={320}
+          states={[
+            {
+              id: "no-icon",
+              label: "No icon",
+              children: (
+                <Alert>
+                  <AlertTitle>Title only layout</AlertTitle>
+                  <AlertDescription>Without an icon the text starts at the left edge.</AlertDescription>
+                </Alert>
+              ),
+            },
+            {
+              id: "title-only",
+              label: "Title only",
+              children: (
+                <Alert>
+                  <InfoIcon aria-hidden="true" />
+                  <AlertTitle>Saved</AlertTitle>
+                </Alert>
+              ),
+            },
+            {
+              id: "long",
+              label: "Long content",
+              children: (
+                <div className="max-w-xs">
+                  <Alert>
+                    <InfoIcon aria-hidden="true" />
+                    <AlertTitle>Scheduled maintenance</AlertTitle>
+                    <AlertDescription>The service will be unavailable for a short time during the maintenance window. Please save your work before it starts.</AlertDescription>
+                  </Alert>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Default: Story = {
+  tags: ["verification"],
+  render: () => (
+    <Alert>
+      <InfoIcon aria-hidden="true" />
+      <AlertTitle>Heads up</AlertTitle>
+      <AlertDescription>You can update your project settings at any time.</AlertDescription>
+    </Alert>
+  ),
+}
+export const Destructive: Story = {
+  tags: ["verification"],
+  render: () => (
+    <Alert variant="destructive">
+      <TriangleAlertIcon aria-hidden="true" />
+      <AlertTitle>Unable to save</AlertTitle>
+      <AlertDescription>Check the project name and try again.</AlertDescription>
+    </Alert>
+  ),
+}
diff --git a/src/components/aspect-ratio.stories.tsx b/src/components/aspect-ratio.stories.tsx
new file mode 100644
index 0000000..a74ed96
--- /dev/null
+++ b/src/components/aspect-ratio.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { AspectRatio, Card, CardContent } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// AspectRatio is a layout primitive: it keeps the ratio and nothing else. The image styling (object-fit, radius) in these Stories is
+// the consumer's composition on the child, not part of AspectRatio. Images are inline data URIs (no network). The Card example only
+// shows how a consumer can compose it; AspectRatio does not depend on Card.
+
+const svg = (label: string, fill: string) =>
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="320" viewBox="0 0 480 320"><rect width="480" height="320" fill="${fill}"/><circle cx="360" cy="90" r="40" fill="#bddfd4"/><path d="M0 320 L150 150 L260 260 L340 190 L480 320 Z" fill="#205241"/><text x="24" y="44" font-family="sans-serif" font-size="26" fill="#ffffff">${label}</text></svg>`
+  )
+
+function Image({ ratio, label }: { ratio: number; label: string }) {
+  return (
+    <div style={{ width: "100%", maxWidth: 320 }}>
+      <AspectRatio ratio={ratio} data-testid={`ratio-${label}`}>
+        <img src={svg(label, "#266651")} alt={`${label} 예시 이미지`} className="size-full rounded-md object-cover" />
+      </AspectRatio>
+    </div>
+  )
+}
+
+function Placeholder() {
+  return (
+    <div style={{ width: "100%", maxWidth: 320 }}>
+      <AspectRatio ratio={16 / 9} data-testid="ratio-video">
+        <div className="grid size-full place-items-center rounded-md border bg-muted text-sm text-muted-foreground">영상 영역 16:9</div>
+      </AspectRatio>
+    </div>
+  )
+}
+
+function InCard() {
+  return (
+    <Card style={{ width: "100%", maxWidth: 320 }}>
+      <CardContent>
+        <AspectRatio ratio={4 / 3} data-testid="ratio-card">
+          <img src={svg("Card 4:3", "#3e3523")} alt="카드 안 4:3 이미지" className="size-full rounded-md object-cover" />
+        </AspectRatio>
+      </CardContent>
+    </Card>
+  )
+}
+
+const sections = [
+  { id: "r169", label: "16:9", node: <Image ratio={16 / 9} label="16:9" /> },
+  { id: "r43", label: "4:3", node: <Image ratio={4 / 3} label="4:3" /> },
+  { id: "r11", label: "1:1", node: <Image ratio={1} label="1:1" /> },
+  { id: "video", label: "Video-like placeholder", node: <Placeholder /> },
+  { id: "card", label: "Composed in a Card (consumer composition)", node: <InCard /> },
+]
+
+const meta = { title: "Components/Data & Display/Aspect Ratio", component: AspectRatio, parameters: { layout: "padded" } } satisfies Meta<typeof AspectRatio>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={340} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Aspect Ratio",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Aspect Ratio"
+        description="콘텐츠를 지정한 가로세로 비율로 유지하는 컨테이너입니다. 폭이 바뀌어도 비율대로 높이가 정해집니다."
+      />
+      <StorySection title="Overview" description="ratio = 16 / 9.">{board("r169")}</StorySection>
+      <StorySection title="Variants" description="ratio = 4 / 3, 1과 영상 자리 표시입니다.">{board("r43", "r11", "video")}</StorySection>
+      <StorySection title="Usage" description="Card 안의 이미지 비율 조합입니다.">{board("card")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Wide: Story = { tags: ["verification"], name: "16:9", render: () => <Image ratio={16 / 9} label="16:9" /> }
+export const Square: Story = { tags: ["verification"], name: "1:1", render: () => <Image ratio={1} label="1:1" /> }
diff --git a/src/components/avatar.stories.tsx b/src/components/avatar.stories.tsx
new file mode 100644
index 0000000..900079b
--- /dev/null
+++ b/src/components/avatar.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Avatar, AvatarFallback, AvatarImage } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Images are inline data URIs so the Story does not depend on the network. "Broken" uses an address that cannot load so the
+// Radix fallback shows. Radix renders the image only after it loads.
+
+const photo =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="#266651"/><circle cx="40" cy="31" r="14" fill="#bddfd4"/><rect x="14" y="50" width="52" height="40" rx="22" fill="#bddfd4"/></svg>'
+  )
+
+function Sizes() {
+  return (
+    <div className="flex items-end gap-4">
+      {(["sm", "default", "lg"] as const).map((size) => (
+        <div key={size} className="grid justify-items-center gap-2">
+          <Avatar size={size}>
+            <AvatarImage src={photo} alt="" />
+            <AvatarFallback>한맥</AvatarFallback>
+          </Avatar>
+          <span className="text-xs text-muted-foreground">{size}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function Fallbacks() {
+  const items = [
+    { label: "한글 두 글자", text: "김한" },
+    { label: "영문 두 글자", text: "HM" },
+    { label: "한 글자", text: "한" },
+    { label: "긴 fallback", text: "ABCDEFGHIJ" },
+  ]
+  return (
+    <div className="flex flex-wrap items-end gap-4">
+      {items.map((i) => (
+        <div key={i.label} className="grid justify-items-center gap-2">
+          <Avatar>
+            <AvatarImage src="/broken-avatar-image.png" alt="" />
+            <AvatarFallback>{i.text}</AvatarFallback>
+          </Avatar>
+          <span className="text-xs text-muted-foreground">{i.label}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function Group() {
+  return (
+    <div className="flex items-center gap-3">
+      <Avatar>
+        <AvatarImage src={photo} alt="김한맥" />
+        <AvatarFallback>김한</AvatarFallback>
+      </Avatar>
+      <div className="grid text-sm">
+        <span className="font-medium">김한맥</span>
+        <span className="text-muted-foreground">노선 설계팀</span>
+      </div>
+    </div>
+  )
+}
+
+const sections = [
+  { id: "image", label: "Image", note: "이미지가 로드되면 fallback은 나타나지 않습니다", node: <Sizes /> },
+  { id: "fallback", label: "Fallback (image error)", note: "이미지 로드 실패 시 initials", node: <Fallbacks /> },
+  { id: "composition", label: "Composition", node: <Group /> },
+]
+
+const meta = { title: "Components/Data & Display/Avatar", component: Avatar, parameters: { layout: "padded" } } satisfies Meta<typeof Avatar>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Avatar",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Avatar"
+        description="사용자를 나타내는 원형 이미지입니다. 이미지를 불러오지 못하면 fallback 글자를 표시합니다."
+      />
+      <StorySection title="Overview">{board("image")}</StorySection>
+      <StorySection title="States">{board("fallback")}</StorySection>
+      <StorySection title="Usage" description="이름·소속과 함께 쓰는 소비 조합입니다.">{board("composition")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Image: Story = { tags: ["verification"], render: () => <Sizes /> }
+export const FallbackError: Story = { tags: ["verification"], name: "Fallback", render: () => <Fallbacks /> }
diff --git a/src/components/badge.stories.tsx b/src/components/badge.stories.tsx
new file mode 100644
index 0000000..0959bb0
--- /dev/null
+++ b/src/components/badge.stories.tsx
@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { CheckIcon } from "lucide-react"
+import { Badge } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const variants = ["default", "secondary", "destructive", "outline"] as const
+
+const meta = {
+  title: "Components/Data & Display/Badge",
+  component: Badge,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 12/18/500, padding 2/8, radius 4, border 1px. variant는 현재 HM Theme에 의미가 있는 default(primary), secondary(neutral), destructive, outline만 둡니다. success·warning·information은 상태 색이 정해지지 않아 만들지 않았습니다. Button variant를 재사용하지 않는 별도 컴포넌트입니다.",
+      },
+    },
+  },
+  argTypes: { variant: { control: "inline-radio", options: variants } },
+} satisfies Meta<typeof Badge>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Badge",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Badge"
+        description="상태나 분류를 짧게 표시하는 라벨입니다. Button variant를 재사용하지 않는 별도 컴포넌트입니다."
+      />
+      <StorySection title="Overview" description="variant를 생략한 기본 Badge(primary)입니다.">
+        <Badge>Badge</Badge>
+      </StorySection>
+      <StorySection title="Variants" description="default(primary) / secondary(neutral) / destructive / outline.">
+        <StateBoard
+          min={280}
+          states={[
+            {
+              id: "variants",
+              label: "Text",
+              children: (
+                <div className="flex flex-wrap items-center gap-3">
+                  {variants.map((v) => (
+                    <Badge key={v} variant={v}>
+                      {v}
+                    </Badge>
+                  ))}
+                </div>
+              ),
+            },
+            {
+              id: "icon",
+              label: "With icon",
+              children: (
+                <div className="flex flex-wrap items-center gap-3">
+                  {variants.map((v) => (
+                    <Badge key={v} variant={v}>
+                      <CheckIcon aria-hidden="true" />
+                      {v}
+                    </Badge>
+                  ))}
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="긴 텍스트와 링크(asChild)입니다.">
+        <StateBoard
+          min={280}
+          states={[
+            { id: "long", label: "Long text", children: <div className="max-w-[160px]"><Badge>A very long badge label</Badge></div> },
+            {
+              id: "link",
+              label: "asChild (link)",
+              children: (
+                <Badge asChild variant="outline">
+                  <a href="#badge">Link badge</a>
+                </Badge>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Variants: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      {variants.map((v) => (
+        <Badge key={v} variant={v}>
+          {v}
+        </Badge>
+      ))}
+    </div>
+  ),
+}
+export const Playground: Story = { tags: ["verification"], args: { variant: "default", children: "Badge" } }
diff --git a/src/components/breadcrumb.stories.tsx b/src/components/breadcrumb.stories.tsx
new file mode 100644
index 0000000..77ba5ef
--- /dev/null
+++ b/src/components/breadcrumb.stories.tsx
@@ -0,0 +1,149 @@
+import { Fragment, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative "Breadcrumb" Story shows each case on one page (real links with sample hrefs); the same specimens also exist
+// as Stories tagged `verification` (hidden from the sidebar). BreadcrumbEllipsis is presentational: the Dropdown Menu example is
+// a consumer composition, not part of Breadcrumb.
+
+const narrow = (children: ReactNode) => <div className="w-full max-w-xl">{children}</div>
+
+function Basic() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#home">홈</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#users">사용자</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>상세</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+function Ellipsis() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#home">홈</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger aria-label="중간 경로 보기">
+              <BreadcrumbEllipsis />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>문서</DropdownMenuItem>
+              <DropdownMenuItem>설정</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#project">프로젝트</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>상세</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+function Long() {
+  const labels = ["홈", "프로젝트", "한맥 프로젝트 관리 시스템", "노선 정보", "시설물 목록", "교량", "상세 정보 및 점검 이력"]
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {labels.map((label, i) => (
+          <Fragment key={label}>
+            <BreadcrumbItem>
+              {i === labels.length - 1 ? <BreadcrumbPage>{label}</BreadcrumbPage> : <BreadcrumbLink href={`#${i}`}>{label}</BreadcrumbLink>}
+            </BreadcrumbItem>
+            {i < labels.length - 1 ? <BreadcrumbSeparator /> : null}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+// asChild: the link is any element (here a plain <a> standing in for a router Link) and keeps the Breadcrumb look.
+function CustomLink() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <a href="#router-home">홈 (custom link)</a>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>/</BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>현재 페이지</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+const sections = [
+  { id: "basic", label: "Basic (3 depth)", node: <Basic /> },
+  { id: "ellipsis", label: "Ellipsis", note: "BreadcrumbEllipsis는 표시용입니다. 메뉴 연결은 소비 조합(Dropdown Menu)", node: <Ellipsis /> },
+  { id: "long", label: "Long path", note: "좁은 폭에서 줄바꿈", node: <Long /> },
+  { id: "custom", label: "Custom link (asChild) and separator", node: <CustomLink /> },
+]
+
+const meta = { title: "Components/Navigation/Breadcrumb", component: Breadcrumb, parameters: { layout: "padded" } } satisfies Meta<typeof Breadcrumb>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={420} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, children: narrow(s.node) }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Breadcrumb",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Breadcrumb"
+        description="현재 페이지까지의 상위 경로를 보여주는 내비게이션입니다. 마지막 항목은 현재 페이지입니다."
+      />
+      <StorySection title="Overview">{board("basic")}</StorySection>
+      <StorySection title="Variants" description="중간 경로 생략(Ellipsis)과 사용자 링크 · 구분자입니다.">{board("ellipsis", "custom")}</StorySection>
+      <StorySection title="Usage">{board("long")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Basic3: Story = { tags: ["verification"], name: "Basic", render: () => <Basic /> }
+export const WithEllipsis: Story = { tags: ["verification"], name: "Ellipsis", render: () => <Ellipsis /> }
+export const LongPath: Story = { tags: ["verification"], name: "Long Path", render: () => narrow(<Long />) }
diff --git a/src/components/button.stories.tsx b/src/components/button.stories.tsx
new file mode 100644
index 0000000..af8df3c
--- /dev/null
+++ b/src/components/button.stories.tsx
@@ -0,0 +1,320 @@
+import { useState } from "react"
+import { DownloadIcon } from "lucide-react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, type ButtonAppearance } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Story structure follows ui_viz (implementations/web/storybook/Button.stories.jsx):
+// one representative "Button" Story shows kinds, sizes and states on a single screen; the same sections also exist
+// as separate Stories tagged `verification`, which the sidebar hides by default (see .storybook/main.ts).
+// Playground and Compatibility are HM-only and come after the ui_viz Stories.
+
+type Role = "primary" | "secondary" | "modify" | "destructive" | "cancel"
+
+// [role, label]. The gallery shows supported role/treatment combinations; usage sets are documented separately.
+const roles: [Role, string][] = [
+  ["primary", "Green"],
+  ["secondary", "Brown"],
+  ["modify", "Orange"],
+  ["cancel", "Gray"],
+  ["destructive", "Red"],
+]
+const rolesFor = (appearance: ButtonAppearance) =>
+  roles.filter(([role]) =>
+    appearance === "brand"
+      ? ["primary", "secondary", "modify"].includes(role)
+      : appearance === "solid"
+        ? role !== "destructive"
+        : ["primary", "secondary", "destructive", "cancel"].includes(role),
+  )
+
+const meta = {
+  title: "Components/Form/Button",
+  component: Button,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "ui_viz docs/components/button.md D-087: Brand Gradient와 Standard Solid/Outline. 크기 28/34/42, 글자 12/18 · 13/20 · 15/22, Brand 700 · Standard 500. Focus 시각 값은 ui_viz에서 전역 TBD이므로 shadcn 기본 focus 동작을 그대로 사용하며, Tab 키로 확인합니다.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: roles.map(([role]) => role),
+      description: "역할(Role): primary Green, secondary Brown, modify Orange, destructive Red, cancel Gray. destructive는 outline만, modify는 brand/solid만, cancel은 solid/outline만 지원합니다. docs/components/button.md §6.1 참조.",
+    },
+    appearance: {
+      control: "inline-radio",
+      options: ["brand", "solid", "outline"],
+      description: "Treatment 기본값은 brand. Controls는 Role별 허용 조합을 제한하지 않습니다. destructive/cancel은 허용 appearance를 명시합니다. docs/components/button.md §6.1~6.2 참조.",
+    },
+    size: {
+      control: "inline-radio",
+      options: ["sm", "default", "lg"],
+      description: "sm은 Small 28px, default는 Medium 34px, lg는 Large 42px.",
+    },
+    disabled: { control: "boolean" },
+    children: { control: "text" },
+    asChild: { table: { disable: true } },
+    className: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Button>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const row = "flex flex-wrap items-center gap-4"
+const stack = "grid gap-6"
+const heading = "text-base font-semibold"
+const note = "text-sm text-muted-foreground"
+
+function RolesBoard() {
+  return (
+    <div className={stack}>
+      {(
+        [
+          ["brand", "Brand"],
+          ["solid", "Standard Solid"],
+          ["outline", "Standard Outline"],
+        ] as const
+      ).map(([appearance, title]) => (
+        <section key={appearance}>
+          <h3 className={heading}>{title}</h3>
+          <div className={`${row} mt-3`}>
+            {rolesFor(appearance).map(([variant, label]) => (
+              <Button key={variant} variant={variant} appearance={appearance}>
+                {label}
+              </Button>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}
+
+const sizes = [
+  ["sm", "Small"],
+  ["default", "Medium"],
+  ["lg", "Large"],
+] as const
+
+function SizesBoard() {
+  return (
+    <div className={stack}>
+      {(["brand", "solid"] as const).map((appearance) => (
+        <div className={row} key={appearance}>
+          {sizes.map(([size, label]) => (
+            <Button key={size} appearance={appearance} size={size}>
+              {label}
+            </Button>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function BrandStates() {
+  const [count, setCount] = useState(0)
+  return (
+    <div className={stack}>
+      <div className={row}>
+        <Button>Default</Button>
+        <Button data-sb-hover="">Hover</Button>
+        <Button data-sb-active="">Pressed</Button>
+        <Button onClick={() => setCount((n) => n + 1)}>Interact</Button>
+        <Button disabled onClick={() => setCount((n) => n + 1)}>
+          Disabled
+        </Button>
+      </div>
+      <output aria-live="polite">Activated: {count}</output>
+      <p className={note}>
+        Hover와 Pressed는 Storybook이 고정한 상태입니다. Interact 위에서 실제 Hover·Pressed·포인터 이탈을 확인합니다. Disabled는 실행되지 않습니다.
+      </p>
+    </div>
+  )
+}
+
+const standardStates = [
+  ["Default", {}],
+  ["Hover", { "data-sb-hover": "" }],
+  ["Pressed", { "data-sb-active": "" }],
+  ["Disabled", { disabled: true }],
+] as const
+
+function StandardStateTable({ appearance, title }: { appearance: "solid" | "outline"; title: string }) {
+  return (
+    <section className="min-w-0">
+      <h3 className={heading}>{title}</h3>
+      <div className="mt-3 min-w-0 max-w-full overflow-x-auto">
+        <table className="w-full border-collapse [&_td]:p-3 [&_th]:p-3 [&_th]:text-left">
+          <thead>
+            <tr>
+              <th scope="col">Role</th>
+              {standardStates.map(([state]) => (
+                <th scope="col" key={state}>
+                  {state}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rolesFor(appearance).map(([variant, label]) => (
+              <tr key={variant}>
+                <th scope="row">{label}</th>
+                {standardStates.map(([state, props]) => (
+                  <td key={state}>
+                    <Button variant={variant} appearance={appearance} {...props}>
+                      {label}
+                    </Button>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}
+
+function StandardStatesBoard() {
+  return (
+    <div className={stack}>
+      <StandardStateTable appearance="solid" title="Standard Solid" />
+      <StandardStateTable appearance="outline" title="Standard Outline" />
+      <p className={note}>
+        Standard Solid의 Hover·Pressed는 역할 면 위에 Black 20%를 합성합니다(Pressed = Hover). Green·Brown Outline은 Hover에서 역할색 면 + White 라벨, Pressed에서 White 면 + Black 20%입니다. Red Outline은 Hover·Pressed 모두 Red 8% 면이며 Red 라벨·보더를 유지합니다. Disabled는 Default 모양 그대로 opacity 60%이고 상태 면을 적용하지 않습니다. Default 열의 버튼으로 실제 포인터 상태도 확인할 수 있습니다. Brand 상태는 Brand States에서 확인합니다.
+      </p>
+    </div>
+  )
+}
+
+function LongLabelBoard() {
+  return (
+    <div className="w-[180px]">
+      <Button className="whitespace-normal">Apply changes to all selected project records</Button>
+    </div>
+  )
+}
+
+function DestructiveBoard() {
+  return (
+    <div className={row}>
+      <Button variant="cancel" appearance="outline">
+        Cancel
+      </Button>
+      <Button variant="destructive" appearance="outline">
+        Delete
+      </Button>
+    </div>
+  )
+}
+
+// Representative Story: the common Story page (Overview → Sizes → Variants → States) with the ui_viz Button "All" boards.
+// Named after the component, as in ui_viz. It is the only Button entry in the default sidebar, so Storybook shows Button as a single 1-depth item.
+export const All: Story = {
+  name: "Button",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Button"
+        description="사용자가 동작을 실행하는 기본 컨트롤입니다. variant는 역할(색), appearance는 Brand / Standard Solid / Standard Outline, size는 높이를 정합니다."
+      />
+      <StorySection title="Overview" description="props를 생략한 기본 Button: Brand · Primary(Green) · Medium 34px.">
+        <Button>Button</Button>
+      </StorySection>
+      <StorySection title="Sizes" description="Small 28 / Medium 34 / Large 42px · 글자 12/18 · 13/20 · 15/22. 위는 Brand, 아래는 Standard Solid입니다.">
+        <SizesBoard />
+      </StorySection>
+      <StorySection title="Variants" description="appearance별로 허용된 역할 조합입니다.">
+        <RolesBoard />
+      </StorySection>
+      <StorySection title="States" description="Default / Hover / Pressed / Disabled. Hover·Pressed는 Storybook이 고정한 상태입니다.">
+        <StateBoard
+          min={1200}
+          states={[
+            { id: "brand-states", label: "Brand", children: <BrandStates /> },
+            { id: "standard-states", label: "Standard Solid · Standard Outline", children: <StandardStatesBoard /> },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Stories: the same sections as separate Stories, hidden from the sidebar (tag `verification`), reachable by URL or the sidebar tag filter.
+export const Roles: Story = { tags: ["verification"], render: () => <RolesBoard /> }
+export const Sizes: Story = { tags: ["verification"], render: () => <SizesBoard /> }
+export const States: Story = { tags: ["verification"], name: "Brand States", render: () => <BrandStates /> }
+export const StandardStates: Story = { tags: ["verification"], name: "Standard States", render: () => <StandardStatesBoard /> }
+export const LongLabel: Story = {
+  tags: ["verification"],
+  render: () => <LongLabelBoard />,
+  parameters: {
+    docs: { description: { story: "일반 Label은 한 줄입니다. 긴 Label은 기존 className API의 whitespace-normal로 줄바꿈을 명시하며, 폭이 부족하면 높이가 늘어나고 각 줄은 가운데 정렬됩니다." } },
+  },
+}
+
+export const KoreanLabels: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div style={{ display: "grid", gap: 16, width: 88 }}>
+      {["저장", "변경사항 적용", "설정 저장", "파일 다운로드"].map((label) => <div key={label}><Button>{label}</Button></div>)}
+    </div>
+  ),
+}
+export const IconTextNarrow: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div style={{ display: "grid", gap: 16, width: 88 }}>
+      {(["sm", "default", "lg"] as const).map((size) => <div key={size}><Button size={size}><DownloadIcon />파일 다운로드</Button></div>)}
+    </div>
+  ),
+}
+export const Destructive: Story = {
+  tags: ["verification"],
+  render: () => <DestructiveBoard />,
+  parameters: {
+    docs: { description: { story: "검증 전용 삭제·취소 세트: Cancel은 Gray Outline, Delete는 Red Outline이며 appearance와 size를 통일합니다. Red Hover/Pressed 면은 Red 8%입니다." } },
+  },
+}
+
+// HM only: not part of the ui_viz Button Stories. Tagged verification so the default sidebar keeps only the representative Story.
+export const Playground: Story = {
+  tags: ["verification"],
+  args: { children: "저장", variant: "primary", appearance: "brand", size: "default", disabled: false },
+  parameters: {
+    docs: { description: { story: "검증 전용 Controls는 역할과 Treatment를 독립적으로 선택하므로 미지원 조합도 선택할 수 있습니다. 대표 Button의 Variants와 docs/components/button.md §6.1의 허용 조합만 사용하세요. Focus는 ui_viz에서 TBD이므로 Tab 키로 shadcn 기본 focus 동작을 확인합니다." } },
+  },
+}
+
+export const Compatibility: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className={stack}>
+      <section>
+        <h2 className={heading}>shadcn compatibility</h2>
+        <p className={`${note} mt-1`}>ui_viz 공식 Button 규격이 아닙니다. shadcn 기본 스타일을 그대로 씁니다.</p>
+        <div className={`${row} mt-3`}>
+          <Button variant="ghost">ghost</Button>
+          <Button variant="link">link</Button>
+        </div>
+      </section>
+      <section>
+        <h2 className={heading}>alias</h2>
+        <p className={`${note} mt-1`}>기존 shadcn 사용 코드를 위한 별칭입니다. default는 primary, outline은 primary + outline과 같습니다.</p>
+        <div className={`${row} mt-3`}>
+          <Button variant="default">default</Button>
+          <Button variant="outline">outline</Button>
+        </div>
+      </section>
+    </div>
+  ),
+}
diff --git a/src/components/calendar.stories.tsx b/src/components/calendar.stories.tsx
new file mode 100644
index 0000000..3591529
--- /dev/null
+++ b/src/components/calendar.stories.tsx
@@ -0,0 +1,86 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import type { DateRange } from "react-day-picker"
+import { Calendar } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative "Calendar" Story shows each mode with real, clickable calendars; the same specimens also exist as Stories
+// tagged `verification` (hidden from the sidebar). `today` is pinned to 2026-10-02 so the Story looks the same on any day; this
+// uses react-day-picker's own `today` prop, not an HM state. Korean is the Calendar default locale.
+
+const today = new Date(2026, 9, 2)
+const month = new Date(2026, 9, 1)
+
+const box = (node: ReactNode) => <div className="rounded-md border bg-card w-fit">{node}</div>
+
+function Single() {
+  const [date, setDate] = useState<Date | undefined>(new Date(2026, 9, 15))
+  return (
+    <div className="grid gap-2">
+      {box(<Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={month} today={today} />)}
+      <span className="text-sm text-muted-foreground" data-testid="single">{`선택: ${date ? date.toLocaleDateString("ko-KR") : "없음"}`}</span>
+    </div>
+  )
+}
+
+function DisabledDates() {
+  const [date, setDate] = useState<Date | undefined>()
+  return box(
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      defaultMonth={month}
+      today={today}
+      disabled={[{ before: new Date(2026, 9, 5) }, { dayOfWeek: [0] }]}
+    />
+  )
+}
+
+function Range() {
+  const [range, setRange] = useState<DateRange | undefined>({ from: new Date(2026, 9, 8), to: new Date(2026, 9, 14) })
+  return box(<Calendar mode="range" selected={range} onSelect={setRange} defaultMonth={month} today={today} />)
+}
+
+function TwoMonths() {
+  return box(<Calendar mode="single" numberOfMonths={2} defaultMonth={month} today={today} />)
+}
+
+const sections = [
+  { id: "single", label: "Single (today = 10/2, selected = 10/15)", node: <Single /> },
+  { id: "disabled", label: "Disabled dates (before 10/5, Sundays)", node: <DisabledDates /> },
+  { id: "range", label: "Range", node: <Range /> },
+  { id: "months", label: "Two months", node: <TwoMonths /> },
+]
+
+// No `component`: Calendar props are a union of selection modes, so Stories without args would not type-check.
+const meta = { title: "Components/Search & Date/Calendar", parameters: { layout: "padded" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={300} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, wide: s.id === "months", children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Calendar",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Calendar"
+        description="날짜를 고르는 달력입니다. 기본 locale은 한국어이며, 이 화면의 오늘은 2026-10-02로 고정되어 있습니다."
+      />
+      <StorySection title="Overview" description='mode="single"'>{board("single")}</StorySection>
+      <StorySection title="Variants" description='mode="range"와 여러 달 표시(numberOfMonths=2)입니다.'>{board("range", "months")}</StorySection>
+      <StorySection title="States" description="선택할 수 없는 날짜(disabled)입니다.">{board("disabled")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const SingleSelection: Story = { tags: ["verification"], name: "Single", render: () => <Single /> }
+export const DisabledSelection: Story = { tags: ["verification"], name: "Disabled Dates", render: () => <DisabledDates /> }
+export const RangeSelection: Story = { tags: ["verification"], name: "Range", render: () => <Range /> }
diff --git a/src/components/card.stories.tsx b/src/components/card.stories.tsx
new file mode 100644
index 0000000..04b7d84
--- /dev/null
+++ b/src/components/card.stories.tsx
@@ -0,0 +1,138 @@
+import type { ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button } from "@hm-design/ui"
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardSurface } from "@hm-design/ui"
+import { Input } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Story structure follows Button / Input / Select: one representative "Card" Story shows the ui_viz cases on one page,
+// the same specimens also exist as separate Stories tagged `verification` (hidden from the sidebar, see .storybook/main.ts).
+// ui_viz (content-container.md Type B Content Card) defines only the Default state, two surfaces, a Title with an optional
+// Meta / Action, and a body. Hover / Selected / Clickable, Footer and media are not defined, so they are not shown here
+// except in the Compatibility Story.
+
+function Body({ children }: { children?: ReactNode }) {
+  return <p className="text-sm">{children ?? "본문은 카드 안쪽 여백 24px 안에 놓입니다. 내용물의 모양은 각 컴포넌트가 정합니다."}</p>
+}
+
+function Specimen({ surface = "surface", action, title = "프로젝트 정보", children }: { surface?: CardSurface; action?: boolean; title?: string; children?: ReactNode }) {
+  return (
+    <Card surface={surface}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {action ? (
+          <CardAction>
+            <Button variant="primary" appearance="solid" size="sm">
+              자세히 보기
+            </Button>
+          </CardAction>
+        ) : null}
+      </CardHeader>
+      <CardContent>{children ?? <Body />}</CardContent>
+    </Card>
+  )
+}
+
+function FormSpecimen() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>입력 폼</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-2">
+          <label htmlFor="card-form-name" className="text-sm font-medium text-muted-foreground">
+            프로젝트명
+          </label>
+          <Input id="card-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+const meta = {
+  title: "Components/Data & Display/Card",
+  component: Card,
+  parameters: { layout: "padded" },
+  argTypes: {
+    surface: { control: "inline-radio", options: ["surface", "content"], description: "ui_viz surface 축: White(기본) / Beige." },
+  },
+} satisfies Meta<typeof Card>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the common Story page (Overview → Variants → Usage) with every ui_viz case. Named after the component, as in ui_viz.
+// It is the only Card entry in the default sidebar, so Storybook shows Card as a single 1-depth item.
+export const All: Story = {
+  name: "Card",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Card"
+        description="제목과 본문을 하나의 면으로 묶는 콘텐츠 컨테이너입니다(ui_viz Content Card). Default 상태만 정의되어 있습니다."
+      />
+      <StorySection title="Overview" description="surface를 생략한 기본 Card(White)입니다.">
+        <StateBoard min={360} states={[{ id: "surface", label: "Surface · White (기본)", children: <Specimen /> }]} />
+      </StorySection>
+      <StorySection title="Variants" description="surface: content(Beige)와 제목 옆 Action입니다.">
+        <StateBoard
+          min={360}
+          states={[
+            { id: "content", label: "Surface · Content (Beige)", children: <Specimen surface="content" /> },
+            { id: "action", label: "Title + Action", noteAfter: true, note: "Action은 Title 반대쪽 끝, 교차축 중앙 정렬. Title과 20px 이상 간격.", children: <Specimen action /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage">
+        <StateBoard min={360} states={[{ id: "form", label: "본문 조합 · Input", children: <FormSpecimen /> }]} />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Stories: the same specimens as separate Stories, hidden from the sidebar (tag `verification`).
+export const Surfaces: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="grid max-w-md gap-6">
+      <Specimen />
+      <Specimen surface="content" />
+    </div>
+  ),
+}
+export const Action: Story = { tags: ["verification"], render: () => <div className="max-w-md"><Specimen action /></div> }
+
+// HM only: not part of the ui_viz Card spec. Footer, Description and size="sm" are shadcn defaults that ui_viz does not define.
+export const Compatibility: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="grid max-w-md gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>shadcn 호환</CardTitle>
+          <CardDescription>ui_viz에 없는 Description 입니다. shadcn 기본 스타일을 씁니다.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Body>Footer도 ui_viz 규격이 없어 shadcn 기본 표면을 씁니다.</Body>
+        </CardContent>
+        <CardFooter>
+          <Button variant="cancel" appearance="solid" size="sm">
+            닫기
+          </Button>
+        </CardFooter>
+      </Card>
+      <Card size="sm">
+        <CardHeader>
+          <CardTitle>size="sm"</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Body>shadcn 작은 크기(여백 12px)입니다. ui_viz에 없습니다.</Body>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+}
diff --git a/src/components/carousel.stories.tsx b/src/components/carousel.stories.tsx
new file mode 100644
index 0000000..f4583d8
--- /dev/null
+++ b/src/components/carousel.stories.tsx
@@ -0,0 +1,169 @@
+import { useEffect, useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { AspectRatio, Card, CardContent, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative Story shows real, draggable carousels; the same specimens also exist as Stories tagged `verification`
+// (hidden from the sidebar). Slide widths (`basis-*`) are the consumer's `className` on CarouselItem; Card and AspectRatio are
+// Story composition (Carousel imports neither). `setApi` feeds the "slide n / total" readout.
+
+const frame = (node: ReactNode) => <div style={{ width: "100%", maxWidth: 420, minWidth: 0 }}>{node}</div>
+
+const svg = (n: number) =>
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="270"><rect width="480" height="270" fill="${["#266651", "#3e3523", "#205241", "#604f32", "#123328"][n % 5]}"/><text x="24" y="52" font-family="sans-serif" font-size="34" fill="#ffffff">Slide ${n + 1}</text></svg>`
+  )
+
+function SlideCard({ n }: { n: number }) {
+  return (
+    <Card>
+      <CardContent className="grid h-24 place-items-center text-2xl font-semibold">{n + 1}</CardContent>
+    </Card>
+  )
+}
+
+function useReadout() {
+  const [api, setApi] = useState<CarouselApi>()
+  const [current, setCurrent] = useState(0)
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    if (!api) return
+    setCount(api.scrollSnapList().length)
+    setCurrent(api.selectedScrollSnap() + 1)
+    api.on("select", () => setCurrent(api.selectedScrollSnap() + 1))
+  }, [api])
+  return { setApi, current, count }
+}
+
+function Basic() {
+  const { setApi, current, count } = useReadout()
+  return frame(
+    <div className="grid gap-2">
+      <Carousel setApi={setApi} aria-label="기본 carousel">
+        <CarouselContent>
+          {Array.from({ length: 5 }, (_, i) => (
+            <CarouselItem key={i}>
+              <SlideCard n={i} />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <span className="text-center text-sm text-muted-foreground" data-testid="readout">{`slide ${current} / ${count}`}</span>
+    </div>
+  )
+}
+
+function Multiple() {
+  return frame(
+    <Carousel opts={{ align: "start" }} aria-label="여러 항목 carousel">
+      <CarouselContent>
+        {Array.from({ length: 8 }, (_, i) => (
+          <CarouselItem key={i} className="basis-1/2">
+            <SlideCard n={i} />
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
+
+function Loop() {
+  const { setApi, current, count } = useReadout()
+  return frame(
+    <div className="grid gap-2">
+      <Carousel opts={{ loop: true }} setApi={setApi} aria-label="loop carousel">
+        <CarouselContent>
+          {Array.from({ length: 3 }, (_, i) => (
+            <CarouselItem key={i}>
+              <SlideCard n={i} />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <span className="text-center text-sm text-muted-foreground" data-testid="loop-readout">{`slide ${current} / ${count}`}</span>
+    </div>
+  )
+}
+
+function Vertical() {
+  return (
+    <div style={{ width: 220, height: 260 }}>
+      <Carousel orientation="vertical" opts={{ align: "start" }} aria-label="세로 carousel" className="h-full">
+        <CarouselContent style={{ height: 260 }}>
+          {Array.from({ length: 4 }, (_, i) => (
+            <CarouselItem key={i} className="basis-1/2">
+              <SlideCard n={i} />
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  )
+}
+
+function Media() {
+  return frame(
+    <Carousel aria-label="미디어 carousel">
+      <CarouselContent>
+        {Array.from({ length: 4 }, (_, i) => (
+          <CarouselItem key={i}>
+            <AspectRatio ratio={16 / 9}>
+              <img src={svg(i)} alt={`슬라이드 ${i + 1}`} className="size-full rounded-md object-cover" />
+            </AspectRatio>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
+
+const sections = [
+  { id: "basic", label: "Basic (single item) + setApi readout", node: <Basic /> },
+  { id: "multiple", label: "Multiple items (basis-1/2)", node: <Multiple /> },
+  { id: "loop", label: "Loop (controls never disable)", node: <Loop /> },
+  { id: "vertical", label: "Vertical", node: <Vertical /> },
+  { id: "media", label: "Media (AspectRatio composition)", node: <Media /> },
+]
+
+const meta = { title: "Components/Data & Display/Carousel", component: Carousel, parameters: { layout: "padded" } } satisfies Meta<typeof Carousel>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={460} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Carousel",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Carousel"
+        description="여러 슬라이드를 끌기·버튼으로 넘겨 보는 영역입니다. 슬라이드 폭(basis-*)은 CarouselItem의 className으로 정합니다."
+      />
+      <StorySection title="Overview">{board("basic")}</StorySection>
+      <StorySection title="Variants" description="여러 항목 표시, 반복(loop), 세로 방향입니다.">{board("multiple", "loop", "vertical")}</StorySection>
+      <StorySection title="Usage" description="AspectRatio와 조합한 이미지 슬라이드입니다.">{board("media")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const BasicCarousel: Story = { tags: ["verification"], name: "Basic", render: () => <Basic /> }
+export const MultipleItems: Story = { tags: ["verification"], name: "Multiple Items", render: () => <Multiple /> }
+export const LoopCarousel: Story = { tags: ["verification"], name: "Loop", render: () => <Loop /> }
+export const VerticalCarousel: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
diff --git a/src/components/checkbox.stories.tsx b/src/components/checkbox.stories.tsx
new file mode 100644
index 0000000..19dfbe5
--- /dev/null
+++ b/src/components/checkbox.stories.tsx
@@ -0,0 +1,124 @@
+import { useId, useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Checkbox, Label } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Current HM Checkbox. ui-viz has no Checkbox spec, so it was reference only.
+// The option label is the HM Label; its foreground role for Checkbox options is still TBD in ui_viz.
+
+function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) {
+  const id = useId()
+  return (
+    <div className="flex items-center gap-2">
+      {children(id)}
+      <Label htmlFor={id}>{label}</Label>
+    </div>
+  )
+}
+
+function Controlled() {
+  const [checked, setChecked] = useState<boolean | "indeterminate">("indeterminate")
+  return (
+    <Option label={`Select all (${String(checked)})`}>
+      {(id) => <Checkbox id={id} checked={checked} onCheckedChange={setChecked} />}
+    </Option>
+  )
+}
+
+const meta = {
+  title: "Components/Form/Checkbox",
+  component: Checkbox,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 18px 박스, radius 4, border 1px(stroke), Checked/Indeterminate는 state-active 테두리·면 + on-state-active 아이콘. Radix Checkbox의 data-state, indeterminate, 키보드(Space)와 접근성을 유지합니다. ui-viz에는 Checkbox 규격이 없어 참고만 했습니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof Checkbox>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Checkbox",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Checkbox"
+        description="항목을 선택하거나 해제하는 컨트롤입니다. 18px 박스이며 Checked·Indeterminate는 state-active 색입니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          min={240}
+          states={[
+            { id: "unchecked", label: "Unchecked", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
+            { id: "checked", label: "Checked", children: <Option label="Option">{(id) => <Checkbox id={id} defaultChecked />}</Option> },
+            { id: "indeterminate", label: "Indeterminate", children: <Option label="Option">{(id) => <Checkbox id={id} checked="indeterminate" />}</Option> },
+            { id: "interactive", label: "Controlled · click toggles", noteAfter: true, note: "Indeterminate에서 클릭하면 checked가 됩니다(Radix).", children: <Controlled /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="States">
+        <StateBoard
+          min={240}
+          states={[
+            { id: "hover", label: "Hover", noteAfter: true, note: "Unchecked는 테두리가 primary 색, Checked는 Black 20% overlay. 포인터를 올려 확인합니다.", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
+            { id: "focus", label: "Focus", children: <Option label="Option">{(id) => <Checkbox id={id} />}</Option> },
+            {
+              id: "disabled",
+              label: "Disabled",
+              children: (
+                <div className="grid gap-3">
+                  <Option label="Unchecked">{(id) => <Checkbox id={id} disabled />}</Option>
+                  <Option label="Checked">{(id) => <Checkbox id={id} disabled defaultChecked />}</Option>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Validation" description="aria-invalid로 Error 테두리를 표시합니다.">
+        <StateBoard min={240} states={[{ id: "error", label: "Error", children: <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }]} />
+      </StorySection>
+      <StorySection title="Usage">
+        <StateBoard
+          min={240}
+          states={[
+            {
+              id: "long",
+              label: "Long Label",
+              children: (
+                <div className="max-w-[220px]">
+                  <div className="flex items-start gap-2">
+                    <Checkbox id="cb-long" className="mt-0.5" />
+                    <Label htmlFor="cb-long">A very long checkbox label that wraps onto multiple lines</Label>
+                  </div>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+  play: async ({ canvasElement }) => {
+    // preventScroll: the page opens at its header, not at the States section.
+    canvasElement.querySelector<HTMLButtonElement>('[data-overview-state="focus"] [role="checkbox"]')?.focus({ preventScroll: true })
+  },
+}
+
+export const Unchecked: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} />}</Option> }
+export const Checked: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} defaultChecked />}</Option> }
+export const Indeterminate: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} checked="indeterminate" />}</Option> }
+export const Disabled: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} disabled defaultChecked />}</Option> }
+export const Error: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Checkbox id={id} aria-invalid />}</Option> }
+export const Playground: Story = {
+  tags: ["verification"],
+  args: { disabled: false, defaultChecked: false },
+  render: (args) => <Option label="Option">{(id) => <Checkbox id={id} {...args} />}</Option>,
+}
diff --git a/src/components/collapsible.stories.tsx b/src/components/collapsible.stories.tsx
new file mode 100644
index 0000000..2da9cf9
--- /dev/null
+++ b/src/components/collapsible.stories.tsx
@@ -0,0 +1,98 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ChevronDownIcon } from "lucide-react"
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative "Collapsible" Story shows one independent disclosure per state with real, clickable triggers. The same
+// sections also exist as Stories tagged `verification` (hidden from the sidebar). Collapsible is a single disclosure: no divider
+// system and no animation.
+
+const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(6)
+
+const narrow = (children: ReactNode) => <div className="w-full max-w-md">{children}</div>
+
+function Frame({ label, defaultOpen, disabled, children }: { label: string; defaultOpen?: boolean; disabled?: boolean; children: ReactNode }) {
+  return narrow(
+    <Collapsible defaultOpen={defaultOpen} disabled={disabled}>
+      <CollapsibleTrigger>
+        {label}
+        <ChevronDownIcon aria-hidden />
+      </CollapsibleTrigger>
+      <CollapsibleContent>{children}</CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+const ClosedSpecimen = () => <Frame label="고급 설정 보기">추가 옵션이 여기에 표시됩니다.</Frame>
+const OpenSpecimen = () => (
+  <Frame label="고급 설정 보기" defaultOpen>
+    처음부터 열려 있는 영역입니다.
+  </Frame>
+)
+const DisabledSpecimen = () => (
+  <Frame label="비활성 영역" disabled>
+    열 수 없습니다.
+  </Frame>
+)
+const LongSpecimen = () => (
+  <Frame label="긴 콘텐츠" defaultOpen>
+    <p>{longText}</p>
+    <p className="mt-2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
+  </Frame>
+)
+
+// Controlled: the parent owns `open`; an HM Button is the trigger through asChild and keeps its style.
+function ControlledSpecimen() {
+  const [open, setOpen] = useState(false)
+  return narrow(
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          {open ? "접기" : "펼치기"}
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent>{`controlled: open = ${String(open)}`}</CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+const sections = [
+  { id: "closed", label: "Closed", node: <ClosedSpecimen /> },
+  { id: "open", label: "Open", node: <OpenSpecimen /> },
+  { id: "disabled", label: "Disabled", node: <DisabledSpecimen /> },
+  { id: "long", label: "Long Content", node: <LongSpecimen /> },
+  { id: "controlled", label: "Controlled + Button trigger", note: "asChild: Button이 trigger이며 HM Button 스타일 유지", node: <ControlledSpecimen /> },
+]
+
+const meta = { title: "Components/Disclosure/Collapsible", component: Collapsible, parameters: { layout: "padded" } } satisfies Meta<typeof Collapsible>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Collapsible",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Collapsible"
+        description="하나의 영역을 펼치고 접는 단일 disclosure입니다. 구분선 체계와 애니메이션은 없습니다."
+      />
+      <StorySection title="Overview">{board("closed")}</StorySection>
+      <StorySection title="States">{board("open", "disabled")}</StorySection>
+      <StorySection title="Usage" description="긴 콘텐츠와, Button을 trigger로 쓰는 제어형 조합입니다.">{board("long", "controlled")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Closed: Story = { tags: ["verification"], render: () => <ClosedSpecimen /> }
+export const Open: Story = { tags: ["verification"], render: () => <OpenSpecimen /> }
+export const Disabled: Story = { tags: ["verification"], render: () => <DisabledSpecimen /> }
+export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongSpecimen /> }
diff --git a/src/components/combobox.stories.tsx b/src/components/combobox.stories.tsx
new file mode 100644
index 0000000..0dc62e6
--- /dev/null
+++ b/src/components/combobox.stories.tsx
@@ -0,0 +1,156 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Combobox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, type ComboboxOption } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Combobox is a Popover + Command composition (search + single choice); Select stays for short lists without search.
+// The representative Story shows real comboboxes; the same specimens also exist as Stories tagged `verification` (hidden from the
+// sidebar). The Label is Story composition.
+
+const frameworks: ComboboxOption[] = [
+  { value: "next", label: "Next.js" },
+  { value: "sveltekit", label: "SvelteKit" },
+  { value: "nuxt", label: "Nuxt" },
+  { value: "remix", label: "Remix", disabled: true },
+  { value: "astro", label: "Astro" },
+]
+
+const longOptions: ComboboxOption[] = [
+  { value: "a", label: "긴 옵션 이름은 한 줄에서 말줄임으로 잘리고 trigger 폭을 넘지 않습니다. 끝까지 읽을 수 있어야 하면 폭을 넓히세요" },
+  { value: "b", label: "짧은 옵션" },
+]
+
+function Field({ label, id, children }: { label: string; id: string; children: ReactNode }) {
+  return (
+    <div className="grid max-w-xs gap-2">
+      <label htmlFor={id} className="justify-self-start text-sm font-medium text-muted-foreground">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}
+
+function Empty() {
+  return (
+    <Field label="프레임워크" id="cb-empty">
+      <Combobox id="cb-empty" options={frameworks} placeholder="프레임워크 선택" searchPlaceholder="프레임워크 검색..." />
+    </Field>
+  )
+}
+
+function Controlled() {
+  const [value, setValue] = useState("nuxt")
+  return (
+    <div className="grid gap-2">
+      <Field label="선택됨 (controlled)" id="cb-controlled">
+        <Combobox id="cb-controlled" controlled options={frameworks} value={value} onValueChange={setValue} />
+      </Field>
+      <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${value}`}</span>
+    </div>
+  )
+}
+
+function Medium() {
+  return (
+    <Field label="Medium" id="cb-medium">
+      <Combobox id="cb-medium" size="medium" options={frameworks} defaultValue="astro" />
+    </Field>
+  )
+}
+
+function LongLabel() {
+  return (
+    <Field label="긴 옵션" id="cb-long">
+      <Combobox id="cb-long" options={longOptions} defaultValue="a" />
+    </Field>
+  )
+}
+
+function Disabled() {
+  return (
+    <Field label="비활성" id="cb-disabled">
+      <Combobox id="cb-disabled" options={frameworks} defaultValue="next" disabled />
+    </Field>
+  )
+}
+
+function SelectComparison() {
+  return (
+    <div className="grid gap-6 sm:grid-cols-2">
+      {(["medium", "large"] as const).map((size) => (
+        <div key={size} className="grid content-start gap-3" data-comparison-size={size}>
+          <Field label={`Select · ${size}`} id={`compare-select-${size}`}>
+            <Select defaultValue="nuxt">
+              <SelectTrigger id={`compare-select-${size}`} size={size} className="w-full"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {frameworks.map((option) => <SelectItem key={option.value} value={option.value} disabled={option.disabled}>{option.label}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </Field>
+          <Field label={`Combobox · ${size}`} id={`compare-combobox-${size}`}>
+            <Combobox id={`compare-combobox-${size}`} size={size} options={frameworks} defaultValue="nuxt" />
+          </Field>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+const sections = [
+  { id: "empty", label: "Empty placeholder + search (Remix is a disabled option)", node: <Empty /> },
+  { id: "controlled", label: "Selected, controlled", node: <Controlled /> },
+  { id: "medium", label: "Medium size", node: <Medium /> },
+  { id: "long", label: "Long option", node: <LongLabel /> },
+  { id: "disabled", label: "Disabled", node: <Disabled /> },
+]
+
+// No `component`: Combobox has a required `options` prop, so Stories without args would not type-check.
+const meta = { title: "Components/Search & Date/Combobox", parameters: { layout: "padded" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Combobox",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Combobox"
+        description="검색해서 하나를 고르는 Popover + Command 조합입니다. 검색이 필요 없는 짧은 목록은 Select를 씁니다."
+      />
+      <StorySection title="Overview">{board("empty")}</StorySection>
+      <StorySection title="Sizes" description="size를 생략하면 Large입니다. 같은 size의 Select와 나란히 비교합니다.">
+        <StateBoard
+          min={320}
+          states={[
+            ...sections.filter((s) => s.id === "medium").map((s) => ({ id: s.id, label: s.label, children: s.node })),
+            { id: "select-comparison", label: "Select / Combobox visual comparison", wide: true, children: <SelectComparison /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="States">{board("controlled", "disabled")}</StorySection>
+      <StorySection title="Usage">{board("long")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const EmptyCombobox: Story = { tags: ["verification"], name: "Empty", render: () => <Empty /> }
+export const ControlledCombobox: Story = { tags: ["verification"], name: "Controlled", render: () => <Controlled /> }
+export const LongOption: Story = { tags: ["verification"], name: "Long Option", render: () => <LongLabel /> }
+
+export const OpenBottom: Story = {
+  tags: ["verification"],
+  render: () => <div style={{ width: 280, maxWidth: "100%", minHeight: "calc(100dvh - 32px)" }}><Controlled /></div>,
+}
+export const OpenTop: Story = {
+  tags: ["verification"],
+  render: () => <div style={{ width: 280, maxWidth: "100%", minHeight: "calc(100dvh - 32px)", display: "grid", alignItems: "end" }}><Controlled /></div>,
+}
diff --git a/src/components/command.stories.tsx b/src/components/command.stories.tsx
new file mode 100644
index 0000000..4d25fd5
--- /dev/null
+++ b/src/components/command.stories.tsx
@@ -0,0 +1,115 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { CalendarIcon, SettingsIcon, UserIcon } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative "Command" Story shows real, typeable lists; the same specimens also exist as Stories tagged `verification`
+// (hidden from the sidebar). Filtering is cmdk's. The bordered box is Story composition (Command draws no border of its own).
+// A selection log shows that Enter / click reach `onSelect`.
+
+const box = (node: ReactNode) => <div className="w-full max-w-sm rounded-md border">{node}</div>
+
+function Basic() {
+  const [last, setLast] = useState("-")
+  return (
+    <div className="grid gap-2">
+      {box(
+        <Command>
+          <CommandInput placeholder="검색..." />
+          <CommandList>
+            <CommandEmpty>결과가 없습니다.</CommandEmpty>
+            <CommandItem onSelect={setLast}>사과</CommandItem>
+            <CommandItem onSelect={setLast}>바나나</CommandItem>
+            <CommandItem onSelect={setLast} disabled>
+              체리 (품절)
+            </CommandItem>
+            <CommandItem onSelect={setLast}>포도</CommandItem>
+          </CommandList>
+        </Command>
+      )}
+      <span className="text-sm text-muted-foreground" data-testid="last">{`선택: ${last}`}</span>
+    </div>
+  )
+}
+
+function Grouped() {
+  return box(
+    <Command>
+      <CommandInput placeholder="명령 검색..." />
+      <CommandList>
+        <CommandEmpty>결과가 없습니다.</CommandEmpty>
+        <CommandGroup heading="제안">
+          <CommandItem>
+            <CalendarIcon />
+            일정 보기
+          </CommandItem>
+          <CommandItem>
+            <UserIcon />
+            프로필
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="설정">
+          <CommandItem>
+            <SettingsIcon />
+            환경설정
+            <CommandShortcut>⌘,</CommandShortcut>
+          </CommandItem>
+          <CommandItem disabled>결제 (사용 불가)</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+function Long() {
+  return box(
+    <Command>
+      <CommandInput placeholder="항목 검색..." />
+      <CommandList>
+        <CommandEmpty>결과가 없습니다.</CommandEmpty>
+        {Array.from({ length: 30 }, (_, i) => (
+          <CommandItem key={i}>{`항목 ${i + 1} — 긴 항목 이름도 줄바꿈 없이 한 줄로 이어질 수 있습니다`}</CommandItem>
+        ))}
+      </CommandList>
+    </Command>
+  )
+}
+
+const sections = [
+  { id: "basic", label: "Search + disabled item", node: <Basic /> },
+  { id: "grouped", label: "Groups, icons, shortcut", node: <Grouped /> },
+  { id: "long", label: "Long list (list scrolls)", node: <Long /> },
+]
+
+const meta = { title: "Components/Search & Date/Command", component: Command, parameters: { layout: "padded" } } satisfies Meta<typeof Command>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Command",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Command"
+        description="입력한 검색어로 항목을 걸러 고르는 목록입니다. Combobox와 명령 팔레트의 기반입니다."
+      />
+      <StorySection title="Overview">{board("basic")}</StorySection>
+      <StorySection title="Variants">{board("grouped")}</StorySection>
+      <StorySection title="Usage">{board("long")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Search: Story = { tags: ["verification"], render: () => <Basic /> }
+export const GroupedList: Story = { tags: ["verification"], name: "Grouped", render: () => <Grouped /> }
diff --git a/src/components/context-menu.stories.tsx b/src/components/context-menu.stories.tsx
new file mode 100644
index 0000000..3ea7574
--- /dev/null
+++ b/src/components/context-menu.stories.tsx
@@ -0,0 +1,114 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Context Menu opens from pointer context (right click, the context-menu key / Shift+F10, long press) on its trigger area.
+// The representative Story is a target area: right click it. Radix owns keyboard navigation, focus return and Escape.
+
+function Full() {
+  const [showStatus, setShowStatus] = useState(true)
+  const [showPanel, setShowPanel] = useState(false)
+  const [position, setPosition] = useState("bottom")
+  return (
+    <ContextMenu>
+      {/* tabIndex lets keyboard users focus the area and open the menu with Shift+F10 / the context-menu key; Radix Trigger is a plain span. */}
+      <ContextMenuTrigger tabIndex={0} className="flex h-40 w-80 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
+        이 영역에서 오른쪽 클릭
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuLabel>파일</ContextMenuLabel>
+        <ContextMenuGroup>
+          <ContextMenuItem>
+            열기 <ContextMenuShortcut>⌘O</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem>
+            이름 바꾸기 <ContextMenuShortcut>F2</ContextMenuShortcut>
+          </ContextMenuItem>
+          <ContextMenuItem disabled>붙여넣기 (사용 불가)</ContextMenuItem>
+        </ContextMenuGroup>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>보기</ContextMenuLabel>
+        <ContextMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
+          상태 표시줄
+        </ContextMenuCheckboxItem>
+        <ContextMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+          패널
+        </ContextMenuCheckboxItem>
+        <ContextMenuSeparator />
+        <ContextMenuLabel>위치</ContextMenuLabel>
+        <ContextMenuRadioGroup value={position} onValueChange={setPosition}>
+          <ContextMenuRadioItem value="top">상단</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="bottom">하단</ContextMenuRadioItem>
+          <ContextMenuRadioItem value="right">오른쪽</ContextMenuRadioItem>
+        </ContextMenuRadioGroup>
+        <ContextMenuSeparator />
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>더 보기</ContextMenuSubTrigger>
+          <ContextMenuSubContent>
+            <ContextMenuItem>이메일로 공유</ContextMenuItem>
+            <ContextMenuItem>링크 복사</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive">삭제</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+
+const meta = { title: "Components/Overlay/Context Menu", component: ContextMenu, parameters: { layout: "centered" } } satisfies Meta<typeof ContextMenu>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: right click the area to open the full menu (item, disabled, separator, shortcut, checkbox, radio group, sub menu, destructive).
+export const All: Story = {
+  name: "Context Menu",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Context Menu"
+        description="영역에서 오른쪽 클릭, 컨텍스트 메뉴 키 / Shift+F10, 길게 누르기로 여는 메뉴입니다."
+      />
+      <StorySection title="Overview" description="항목 · Disabled · 단축키 · Checkbox · Radio Group · 하위 메뉴 · 위험 항목을 한 메뉴에서 확인합니다. 점선 영역에서 오른쪽 클릭합니다.">
+        <Full />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Story: opens the menu at the area center on load (synthetic contextmenu event), hidden from the sidebar (tag `verification`).
+export const Open: Story = {
+  tags: ["verification"],
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="flex min-h-[560px] justify-center p-8">
+      <Full />
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const area = canvasElement.querySelector<HTMLElement>("[data-slot='context-menu-trigger']")
+    if (!area) return
+    const r = area.getBoundingClientRect()
+    area.dispatchEvent(
+      new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: r.left + r.width / 2, clientY: r.top + r.height / 2, button: 2 }),
+    )
+  },
+}
diff --git a/src/components/date-picker.stories.tsx b/src/components/date-picker.stories.tsx
new file mode 100644
index 0000000..c12b79b
--- /dev/null
+++ b/src/components/date-picker.stories.tsx
@@ -0,0 +1,145 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { DatePicker } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// DatePicker is a Popover + Calendar composition packaged as a component (value handling, trigger text, close on select).
+// The representative Story shows real pickers; the same specimens also exist as Stories tagged `verification` (hidden from the
+// sidebar). The Label is Story composition (the way a consumer would); `today` is pinned through Calendar's own prop so the
+// Story looks the same on any day.
+
+const today = new Date(2026, 9, 2)
+const calendarProps = { today, startMonth: new Date(2026, 0), endMonth: new Date(2027, 11) }
+
+function Field({ label, id, children }: { label: string; id: string; children: ReactNode }) {
+  return (
+    <div className="grid max-w-xs gap-2">
+      <label htmlFor={id} className="justify-self-start text-sm font-medium text-muted-foreground">
+        {label}
+      </label>
+      {children}
+    </div>
+  )
+}
+
+function Empty() {
+  return (
+    <Field label="시작일" id="dp-empty">
+      <DatePicker id="dp-empty" calendarProps={calendarProps} />
+    </Field>
+  )
+}
+
+function Selected() {
+  return (
+    <Field label="시작일" id="dp-selected">
+      <DatePicker id="dp-selected" defaultValue={new Date(2026, 9, 6)} calendarProps={calendarProps} />
+    </Field>
+  )
+}
+
+function FormatExamples() {
+  return (
+    <div className="grid gap-3">
+      <Field label="기본 형식 · YYYY.MM.DD" id="dp-padded">
+        <DatePicker id="dp-padded" defaultValue={new Date(2026, 0, 9)} calendarProps={calendarProps} />
+      </Field>
+      <Field label="Custom format override" id="dp-custom">
+        <DatePicker id="dp-custom" defaultValue={new Date(2026, 9, 6)} format={(date) => date.toLocaleDateString("ko-KR")} calendarProps={calendarProps} />
+      </Field>
+    </div>
+  )
+}
+
+function Controlled() {
+  const [date, setDate] = useState<Date | undefined>()
+  return (
+    <div className="grid gap-2">
+      <Field label="마감일 (controlled)" id="dp-controlled">
+        <DatePicker id="dp-controlled" controlled value={date} onValueChange={setDate} calendarProps={calendarProps} />
+      </Field>
+      <span className="text-sm text-muted-foreground" data-testid="controlled">{`value = ${date ? date.toLocaleDateString("ko-KR") : "undefined"}`}</span>
+    </div>
+  )
+}
+
+function Medium() {
+  return (
+    <Field label="Medium" id="dp-medium">
+      <DatePicker id="dp-medium" size="medium" defaultValue={new Date(2026, 9, 15)} calendarProps={calendarProps} />
+    </Field>
+  )
+}
+
+function DisabledDates() {
+  return (
+    <Field label="5일 이전과 일요일은 선택 불가" id="dp-disabled-dates">
+      <DatePicker
+        id="dp-disabled-dates"
+        calendarProps={{ ...calendarProps, disabled: [{ before: new Date(2026, 9, 5) }, { dayOfWeek: [0] }] }}
+      />
+    </Field>
+  )
+}
+
+function Disabled() {
+  return (
+    <Field label="비활성" id="dp-disabled">
+      <DatePicker id="dp-disabled" disabled defaultValue={new Date(2026, 9, 15)} />
+    </Field>
+  )
+}
+
+const sections = [
+  { id: "empty", label: "Empty (placeholder)", node: <Empty /> },
+  { id: "selected", label: "Selected", node: <Selected /> },
+  { id: "format", label: "Default format / custom override", node: <FormatExamples /> },
+  { id: "controlled", label: "Controlled", node: <Controlled /> },
+  { id: "medium", label: "Medium size", node: <Medium /> },
+  { id: "disabled-dates", label: "Disabled dates", node: <DisabledDates /> },
+  { id: "disabled", label: "Disabled", node: <Disabled /> },
+]
+
+const meta = { title: "Components/Search & Date/Date Picker", component: DatePicker, parameters: { layout: "padded" } } satisfies Meta<typeof DatePicker>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Date Picker",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Date Picker"
+        description="Trigger를 눌러 달력에서 날짜를 고르는 Popover + Calendar 조합 컴포넌트입니다. 날짜를 고르면 닫힙니다."
+      />
+      <StorySection title="Overview">{board("empty")}</StorySection>
+      <StorySection title="Sizes" description="size를 생략하면 Large입니다.">{board("medium")}</StorySection>
+      <StorySection title="States">{board("selected", "controlled", "disabled-dates", "disabled")}</StorySection>
+      <StorySection title="Usage" description="기본 표시 형식과 사용자 형식 지정입니다.">{board("format")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const EmptyPicker: Story = { tags: ["verification"], name: "Empty", render: () => <Empty /> }
+export const InvalidFocus: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="grid max-w-xs gap-6">
+      <button type="button">Before field</button>
+      <Field label="Invalid Date Picker" id="dp-invalid">
+        <DatePicker id="dp-invalid" aria-invalid defaultValue={new Date(2026, 9, 6)} calendarProps={calendarProps} />
+      </Field>
+      <button type="button">After field</button>
+    </div>
+  ),
+}
+export const SelectedPicker: Story = { tags: ["verification"], name: "Selected", render: () => <Selected /> }
+export const ControlledPicker: Story = { tags: ["verification"], name: "Controlled", render: () => <Controlled /> }
diff --git a/src/components/dialog.stories.tsx b/src/components/dialog.stories.tsx
new file mode 100644
index 0000000..d14d0ee
--- /dev/null
+++ b/src/components/dialog.stories.tsx
@@ -0,0 +1,212 @@
+import type { CSSProperties, ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button } from "@hm-design/ui"
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@hm-design/ui"
+import { Input } from "@hm-design/ui"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Dialog is an overlay (Radix Portal), so it does not fit the StateBoard. The representative Story is a row of triggers that open
+// the real Dialog for each ui_viz case (dialog.md §9 Reference Viewer examples); the same cases also exist as separate Stories tagged
+// `verification` that start open. Pseudo-state helpers are not used to fake an open Dialog.
+
+const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 Dialog 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(8)
+
+function Frame({
+  trigger,
+  defaultOpen,
+  title,
+  description,
+  children,
+  actions,
+  contentStyle,
+}: {
+  trigger: string
+  defaultOpen?: boolean
+  title: string
+  description?: string
+  children: ReactNode
+  actions?: ReactNode
+  contentStyle?: CSSProperties
+}) {
+  return (
+    <Dialog defaultOpen={defaultOpen}>
+      <DialogTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          {trigger}
+        </Button>
+      </DialogTrigger>
+      <DialogContent style={contentStyle}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+        <DialogBody>{children}</DialogBody>
+        <DialogFooter>{actions}</DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const confirmActions = (
+  <>
+    <DialogClose asChild>
+      <Button variant="cancel" appearance="solid">
+        취소
+      </Button>
+    </DialogClose>
+    <DialogClose asChild>
+      <Button variant="primary" appearance="solid">
+        확인
+      </Button>
+    </DialogClose>
+  </>
+)
+
+const deleteActions = (
+  <>
+    <DialogClose asChild>
+      <Button variant="cancel" appearance="outline">
+        취소
+      </Button>
+    </DialogClose>
+    <DialogClose asChild>
+      <Button variant="destructive" appearance="outline">
+        삭제
+      </Button>
+    </DialogClose>
+  </>
+)
+
+function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="기본" defaultOpen={defaultOpen} title="작업 확인" description="현재 작업을 계속 진행하시겠습니까?" actions={confirmActions}>
+      <p>짧은 내용의 Dialog는 내용 기준 크기입니다.</p>
+    </Frame>
+  )
+}
+
+function LongContent({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="긴 내용" defaultOpen={defaultOpen} title="긴 내용" description="Body만 세로로 scroll 합니다." actions={confirmActions}>
+      {Array.from({ length: 6 }, (_, i) => (
+        <p key={i} className="mb-4">
+          {longText}
+        </p>
+      ))}
+    </Frame>
+  )
+}
+
+// ui_viz "세로 스크롤 · 본문만": the max height also leaves out the app common Header 70px / Footer 48px. The Dialog renders in a Portal,
+// so the app heights are passed on DialogContent as Dialog Tokens, not on a wrapper around the trigger.
+const appBars = { "--hm-dialog-app-header-height": "70px", "--hm-dialog-app-footer-height": "48px" } as CSSProperties
+
+function BodyScroll({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame
+      trigger="본문 스크롤"
+      defaultOpen={defaultOpen}
+      title="본문 스크롤"
+      description="공통 Header 70px / Footer 48px를 뺀 높이 안에서 Body만 세로로 scroll 합니다."
+      actions={confirmActions}
+      contentStyle={appBars}
+    >
+      {Array.from({ length: 60 }, (_, i) => (
+        <p key={i}>검토 기록 {i + 1}. 현장 조사와 부재별 검토 내용을 확인하고 후속 조치를 기록합니다.</p>
+      ))}
+    </Frame>
+  )
+}
+
+// The wide case composes the HM Table primitive (same as the Table Story), so it carries the Table look inside the Dialog Portal.
+const wideColumns = Array.from({ length: 10 }, (_, i) => `컬럼 ${i + 1}`)
+
+function WideContent({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="넓은 표" defaultOpen={defaultOpen} title="넓은 내용" description="표처럼 줄이기 어려운 내용은 Body 안에서 가로 scroll 합니다." actions={confirmActions}>
+      <Table style={{ minWidth: 1600 }}>
+        <TableHeader>
+          <TableRow>
+            {wideColumns.map((c) => (
+              <TableHead key={c}>{c}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 4 }, (_, r) => (
+            <TableRow key={r}>
+              {wideColumns.map((_, c) => (
+                <TableCell key={c}>{`행 ${r + 1} · 열 ${c + 1}`}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Frame>
+  )
+}
+
+function DeleteConfirmation({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="삭제 확인" defaultOpen={defaultOpen} title="항목 삭제" description="삭제하면 되돌릴 수 없습니다." actions={deleteActions}>
+      <p>선택한 항목을 삭제합니다. 취소와 삭제 실행은 같은 크기의 Outline 세트입니다.</p>
+    </Frame>
+  )
+}
+
+function FormContent({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보" actions={confirmActions}>
+      <div className="grid gap-2">
+        <label htmlFor="dialog-form-name" className="text-sm font-medium text-muted-foreground">
+          프로젝트명
+        </label>
+        <Input id="dialog-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
+      </div>
+    </Frame>
+  )
+}
+
+const meta = { title: "Components/Overlay/Dialog", component: Dialog, parameters: { layout: "centered" } } satisfies Meta<typeof Dialog>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the common Story page; every case opens from its trigger. Named after the component, as in ui_viz.
+// It is the only Dialog entry in the default sidebar, so Storybook shows Dialog as a single 1-depth item.
+export const All: Story = {
+  name: "Dialog",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Dialog"
+        description="현재 화면 위에 내용을 띄워 확인·입력을 받는 모달입니다. 각 버튼을 눌러 실제 Dialog를 엽니다."
+      />
+      <StorySection title="Overview" description="짧은 내용의 Dialog는 내용 기준 크기입니다.">
+        <Basic />
+      </StorySection>
+      <StorySection title="Variants" description="내용이 길거나 넓으면 Body 안에서만 scroll 합니다. 본문 스크롤은 공통 Header 70px / Footer 48px를 뺀 높이를 씁니다.">
+        <div className="flex flex-wrap gap-3">
+          <LongContent />
+          <WideContent />
+          <BodyScroll />
+        </div>
+      </StorySection>
+      <StorySection title="Usage" description="일반 확인은 Solid 세트, 삭제 확인은 취소·삭제 모두 Outline 세트입니다.">
+        <div className="flex flex-wrap gap-3">
+          <DeleteConfirmation />
+          <FormContent />
+        </div>
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Stories: the same cases starting open, hidden from the sidebar (tag `verification`).
+export const Open: Story = { tags: ["verification"], render: () => <Basic defaultOpen /> }
+export const LongContentOpen: Story = { tags: ["verification"], name: "Long Content", render: () => <LongContent defaultOpen /> }
+export const WideContentOpen: Story = { tags: ["verification"], name: "Wide Content", render: () => <WideContent defaultOpen /> }
+export const BodyScrollOpen: Story = { tags: ["verification"], name: "Body Scroll", render: () => <BodyScroll defaultOpen /> }
+export const DeleteConfirmationOpen: Story = { tags: ["verification"], name: "Delete Confirmation", render: () => <DeleteConfirmation defaultOpen /> }
diff --git a/src/components/drawer.stories.tsx b/src/components/drawer.stories.tsx
new file mode 100644
index 0000000..052b785
--- /dev/null
+++ b/src/components/drawer.stories.tsx
@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Input } from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Drawer is a modal vaul overlay (Portal). The representative Story opens the real Drawer from its triggers; drag the handle or
+// the panel down to dismiss. The same cases start open in the verification Stories. vaul owns the drag, Radix the focus and ARIA.
+
+const longText = "긴 내용은 Body 영역만 세로로 scroll 하고 Header와 Footer는 그대로 보입니다. "
+
+function Frame({
+  trigger,
+  defaultOpen,
+  title,
+  description,
+  children,
+  actions,
+}: {
+  trigger: string
+  defaultOpen?: boolean
+  title: string
+  description?: string
+  children: React.ReactNode
+  actions?: React.ReactNode
+}) {
+  return (
+    <Drawer defaultOpen={defaultOpen}>
+      <DrawerTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          {trigger}
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+          {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+        </DrawerHeader>
+        <DrawerBody>{children}</DrawerBody>
+        <DrawerFooter>{actions}</DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+const actions = (
+  <>
+    <DrawerClose asChild>
+      <Button variant="primary" appearance="solid">
+        확인
+      </Button>
+    </DrawerClose>
+    <DrawerClose asChild>
+      <Button variant="cancel" appearance="solid">
+        취소
+      </Button>
+    </DrawerClose>
+  </>
+)
+
+function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="기본" defaultOpen={defaultOpen} title="작업 선택" description="아래에서 올라오는 패널입니다. 핸들을 아래로 끌어 닫을 수 있습니다." actions={actions}>
+      <p>짧은 내용은 내용 높이만큼만 차지합니다.</p>
+    </Frame>
+  )
+}
+
+function FormCase({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보" actions={actions}>
+      <div className="grid gap-2">
+        <label htmlFor="drawer-form-name" className="text-sm font-medium text-muted-foreground">
+          프로젝트명
+        </label>
+        <Input id="drawer-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
+      </div>
+    </Frame>
+  )
+}
+
+function LongCase({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="긴 내용" defaultOpen={defaultOpen} title="긴 내용" description="Body만 scroll 합니다." actions={actions}>
+      {Array.from({ length: 30 }, (_, i) => (
+        <p key={i} className="mb-3">
+          {longText}
+        </p>
+      ))}
+    </Frame>
+  )
+}
+
+const meta = { title: "Components/Overlay/Drawer", component: Drawer, parameters: { layout: "centered" } } satisfies Meta<typeof Drawer>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Drawer",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Drawer"
+        description="화면 아래에서 올라오는 모달 패널입니다. 핸들이나 패널을 아래로 끌어 닫습니다."
+      />
+      <StorySection title="Overview" description="기본 Drawer입니다. 버튼을 눌러 엽니다.">
+        <Basic />
+      </StorySection>
+      <StorySection title="Usage" description="폼 입력 조합과, 내용이 길 때 Body만 scroll 하는 경우입니다.">
+        <div className="flex flex-wrap gap-3">
+          <FormCase />
+          <LongCase />
+        </div>
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Open: Story = { tags: ["verification"], render: () => <Basic defaultOpen /> }
+export const Form: Story = { tags: ["verification"], render: () => <FormCase defaultOpen /> }
+export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongCase defaultOpen /> }
diff --git a/src/components/dropdown-menu.stories.tsx b/src/components/dropdown-menu.stories.tsx
new file mode 100644
index 0000000..b8f5229
--- /dev/null
+++ b/src/components/dropdown-menu.stories.tsx
@@ -0,0 +1,108 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Dropdown Menu is a Radix overlay (Portal), so the representative Story is a trigger that opens the real menu, the same way as
+// Dialog. The verification Story starts open. Radix owns keyboard navigation, focus return and Escape.
+
+function Full({ defaultOpen }: { defaultOpen?: boolean }) {
+  const [showStatus, setShowStatus] = useState(true)
+  const [showPanel, setShowPanel] = useState(false)
+  const [position, setPosition] = useState("bottom")
+  return (
+    <DropdownMenu defaultOpen={defaultOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          메뉴 열기
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuLabel>내 계정</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            프로필 <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            설정 <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem disabled>결제 (사용 불가)</DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>보기</DropdownMenuLabel>
+        <DropdownMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
+          상태 표시줄
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+          패널
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel>위치</DropdownMenuLabel>
+        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+          <DropdownMenuRadioItem value="top">상단</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="bottom">하단</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="right">오른쪽</DropdownMenuRadioItem>
+        </DropdownMenuRadioGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>더 보기</DropdownMenuSubTrigger>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem>이메일로 공유</DropdownMenuItem>
+            <DropdownMenuItem>링크 복사</DropdownMenuItem>
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">로그아웃</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const meta = { title: "Components/Overlay/Dropdown Menu", component: DropdownMenu, parameters: { layout: "centered" } } satisfies Meta<typeof DropdownMenu>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the trigger opens the full menu (item, disabled, separator, checkbox, radio group, sub menu, destructive).
+export const All: Story = {
+  name: "Dropdown Menu",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Dropdown Menu"
+        description="버튼으로 여는 작업 메뉴입니다. 키보드 이동, Esc 닫기, 포커스 복귀는 Radix가 담당합니다."
+      />
+      <StorySection title="Overview" description="항목 · Disabled · 구분선 · Checkbox · Radio Group · 하위 메뉴 · 위험 항목을 한 메뉴에서 확인합니다. 버튼을 눌러 엽니다.">
+        <Full />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Story: the same menu starting open, hidden from the sidebar (tag `verification`).
+export const Open: Story = {
+  tags: ["verification"],
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="flex min-h-[560px] justify-center p-8">
+      <Full defaultOpen />
+    </div>
+  ),
+}
diff --git a/src/components/hover-card.stories.tsx b/src/components/hover-card.stories.tsx
new file mode 100644
index 0000000..a4e729b
--- /dev/null
+++ b/src/components/hover-card.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Hover Card is a Radix overlay (Portal) for a richer preview than Tooltip. The representative Story shows real triggers
+// (hover or focus to open); the verification Story starts one open. Radix owns the open / close delay and the hover bridge.
+
+const longText = "긴 콘텐츠는 카드 폭에서 줄바꿈되고 카드 높이만 늘어납니다. 공백 없는 긴 문자열도 폭을 밀어내지 않습니다. ".repeat(4)
+
+function Preview({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <HoverCard defaultOpen={defaultOpen}>
+      <HoverCardTrigger asChild>
+        <a href="#preview" className="text-sm font-medium text-primary underline underline-offset-4">
+          한맥 프로젝트
+        </a>
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <div className="grid gap-1">
+          <p className="font-bold">한맥 프로젝트</p>
+          <p>노선과 시설물 정보를 관리하는 프로젝트입니다.</p>
+          <p className="pt-1 text-xs text-muted-foreground">담당 김한맥 · 최근 수정 2026-10-02</p>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+function LongContent() {
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <a href="#long" className="text-sm font-medium text-primary underline underline-offset-4">
+          긴 콘텐츠
+        </a>
+      </HoverCardTrigger>
+      <HoverCardContent>
+        <div className="grid gap-1">
+          <p className="font-bold">긴 콘텐츠</p>
+          <p>{longText}</p>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}
+
+const meta = { title: "Components/Overlay/Hover Card", component: HoverCard, parameters: { layout: "centered" } } satisfies Meta<typeof HoverCard>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Hover Card",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Hover Card"
+        description="링크에 포인터를 올리거나 포커스하면 Tooltip보다 풍부한 미리보기를 띄우는 overlay입니다."
+      />
+      <StorySection title="Overview" description="링크 위에 포인터를 올려 미리보기를 엽니다.">
+        <Preview />
+      </StorySection>
+      <StorySection title="Usage" description="긴 콘텐츠는 카드 폭에서 줄바꿈되고 높이만 늘어납니다.">
+        <LongContent />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Open: Story = {
+  tags: ["verification"],
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="flex min-h-[260px] justify-center p-8">
+      <Preview defaultOpen />
+    </div>
+  ),
+}
diff --git a/src/components/input.stories.tsx b/src/components/input.stories.tsx
new file mode 100644
index 0000000..df3aaf7
--- /dev/null
+++ b/src/components/input.stories.tsx
@@ -0,0 +1,221 @@
+import { useId, type ComponentProps, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Input, type InputSize } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Story structure follows ui_viz (implementations/web/storybook/Input.stories.jsx and InputSizes.stories.jsx):
+// one representative "Input" Story shows the sizes and every state on one page; the same specimens also exist as
+// separate Stories tagged `verification`, which the sidebar hides by default (see .storybook/main.ts).
+//
+// Label, Required star and Helper/Error message are not part of the Input component. Specimen below composes them with
+// plain elements and shadcn Token utilities, the way a consumer would: Label 14/20/500 and Helper 12/18/400 in the
+// secondary text color, Error message 11/18 in the destructive color, field gap 8.
+
+function Specimen({
+  label = "Project name",
+  message,
+  error,
+  required,
+  id,
+  ...input
+}: ComponentProps<typeof Input> & { label?: string; message?: string; error?: boolean }) {
+  const uid = useId()
+  const fieldId = id ?? `input-${uid}`
+  const messageId = `${fieldId}-message`
+  return (
+    <div className="grid gap-2">
+      <label htmlFor={fieldId} className="justify-self-start text-sm font-medium text-muted-foreground">
+        {label}
+        {required ? (
+          <span aria-hidden="true" className="text-destructive">
+            {" *"}
+          </span>
+        ) : null}
+      </label>
+      <Input
+        id={fieldId}
+        required={required}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={message ? messageId : undefined}
+        {...input}
+      />
+      {message ? (
+        <p id={messageId} className={error ? "text-[11px] leading-[18px] text-destructive" : "text-xs leading-[18px] text-muted-foreground"}>
+          {message}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+const narrow = (children: ReactNode) => <div className="max-w-sm">{children}</div>
+const placeholder = "Enter a project name"
+
+// ui_viz docs/components/input.md §9, §24: display metadata only, never sets control geometry.
+const sizes: { size: InputSize; name: string; height: number; padding: number; typography: string; usage: string }[] = [
+  { size: "small", name: "Small", height: 28, padding: 10, typography: "12 / 18 / 400", usage: "Small control" },
+  { size: "medium", name: "Medium", height: 34, padding: 12, typography: "14 / 20 / 400", usage: "Business forms / Search" },
+  { size: "large", name: "Large", height: 42, padding: 12, typography: "16 / 24 / 400", usage: "Component default" },
+]
+
+function SizeCard({ spec }: { spec: (typeof sizes)[number] }) {
+  return (
+    <section className="grid content-start gap-4" data-input-size={spec.size}>
+      <Specimen size={spec.size} label={spec.name} defaultValue={`${spec.name} ${spec.height}px`} />
+      <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+        <dt className="text-muted-foreground">Height</dt>
+        <dd className="m-0">{spec.height}px</dd>
+        <dt className="text-muted-foreground">Padding</dt>
+        <dd className="m-0">0 / {spec.padding}px</dd>
+        <dt className="text-muted-foreground">Typography</dt>
+        <dd className="m-0">{spec.typography}</dd>
+        <dt className="text-muted-foreground">Usage</dt>
+        <dd className="m-0">{spec.usage}</dd>
+      </dl>
+    </section>
+  )
+}
+
+function SizeComparison() {
+  return (
+    <div className="grid max-w-[1120px] gap-6">
+      <div className="grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(240px,1fr))]">
+        {sizes.map((spec) => (
+          <SizeCard key={spec.size} spec={spec} />
+        ))}
+      </div>
+      <p className="text-sm text-muted-foreground">
+        높이는 입력 컨트롤의 외곽 높이입니다. 값·Placeholder 글자는 size를 따르고 Label 14/20/500은 공통입니다. 업무 폼·조회 조합은 Medium을 쓰며, size를 생략하면 Large입니다.
+      </p>
+    </div>
+  )
+}
+
+const readonlyNote =
+  "Readonly는 입력 상자 없이 확정된 텍스트만 표시합니다. size와 무관하게 Large 기준 typography와 42px 정렬 높이를 유지하며, Disabled처럼 흐리게 표시하지 않습니다."
+
+const meta = {
+  title: "Components/Form/Input",
+  component: Input,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "ui_viz docs/components/input.md: Small 28 / Medium 34 / Large 42px, size를 생략하면 Large. Focus와 Error는 1.5px 테두리로 구분하며 shadow·glow를 쓰지 않습니다. Hover는 없습니다. Label·Helper·Error 문구는 Input이 아니라 소비 조합입니다. Disabled는 흰 면을 유지하고 opacity 0.6으로 흐립니다(2026-10-02 사용자 결정, Input·Select 한정).",
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: "inline-radio",
+      options: ["small", "medium", "large"],
+      description: "무지정 기본값 Large. 업무 폼·조회 소비 역할은 Medium.",
+    },
+  },
+} satisfies Meta<typeof Input>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the common Story page (Overview → Sizes → States → Validation). Focus is placed by the play function.
+// Named after the component, as in ui_viz.
+export const All: Story = {
+  name: "Input",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Input"
+        description="한 줄 텍스트를 입력하는 컨트롤입니다. Label·Helper·Error 문구는 Input이 아니라 소비 조합입니다."
+      />
+      <StorySection title="Overview" description="size를 생략한 기본 Input: Large 42px.">
+        <StateBoard states={[{ id: "default", label: "Default · size 생략(Large)", children: <Specimen placeholder={placeholder} /> }]} />
+      </StorySection>
+      <StorySection title="Sizes" description="Small 28 / Medium 34 / Large 42px. 업무 폼·조회 조합은 Medium을 씁니다.">
+        <SizeComparison />
+      </StorySection>
+      <StorySection title="States" description="Focus와 Error는 1.5px 테두리로 구분하며 Hover는 없습니다. Disabled는 흰 면을 유지하고 흐리게 표시합니다.">
+        <StateBoard
+          states={[
+            { id: "focus", label: "Focus", children: <Specimen size="medium" placeholder={placeholder} /> },
+            { id: "disabled", label: "Disabled", children: <Specimen disabled defaultValue="Unavailable project" /> },
+            { id: "readonly", label: "Readonly", note: readonlyNote, noteAfter: true, children: <Specimen readOnly value="Confirmed project" /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Validation" description="aria-invalid로 Error 테두리를 표시하고, 오류 문구는 소비 조합으로 연결합니다.">
+        <StateBoard
+          states={[
+            { id: "error", label: "Error", children: <Specimen size="medium" error defaultValue="Invalid value" /> },
+            { id: "error-message", label: "Error Message", children: <Specimen size="medium" placeholder={placeholder} error message="프로젝트명을 입력하세요." /> },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+  play: async ({ canvasElement }) => {
+    // preventScroll: the page opens at its header, not at the States section.
+    canvasElement.querySelector<HTMLInputElement>('[data-overview-state="focus"] input')?.focus({ preventScroll: true })
+  },
+}
+
+// Verification Stories: the same specimens as separate Stories, hidden from the sidebar (tag `verification`), reachable by URL or the sidebar tag filter.
+export const Default: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen placeholder={placeholder} />),
+  parameters: { docs: { description: { story: "size를 생략한 실제 기본값(Large 42px)입니다. 업무 폼·조회 역할의 Medium 34px과 구분합니다." } } },
+}
+export const Focus: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen size="medium" placeholder={placeholder} />),
+  play: async ({ canvasElement }) => canvasElement.querySelector("input")?.focus(),
+  parameters: { docs: { description: { story: "Focus는 실제로 focus를 받은 컨트롤에서만 보입니다. play 함수가 focus를 줍니다. Tab 또는 클릭으로도 확인합니다." } } },
+}
+export const Error: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen size="medium" error defaultValue="Invalid value" />),
+}
+export const InvalidFocus: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen size="medium" error defaultValue="Invalid value" />),
+  play: async ({ canvasElement }) => canvasElement.querySelector("input")?.focus(),
+}
+export const ErrorMessage: Story = {
+  tags: ["verification"],
+  name: "Error Message",
+  render: () => narrow(<Specimen size="medium" placeholder={placeholder} error message="프로젝트명을 입력하세요." />),
+}
+export const Required: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen size="medium" placeholder={placeholder} required />),
+}
+export const Disabled: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen disabled defaultValue="Unavailable project" />),
+}
+export const Readonly: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen readOnly value="Confirmed project" />),
+  parameters: { docs: { description: { story: readonlyNote } } },
+}
+export const Sizes: Story = { tags: ["verification"], name: "Compare Sizes", render: () => <SizeComparison /> }
+export const Small: Story = { tags: ["verification"], render: () => narrow(<SizeCard spec={sizes[0]} />) }
+export const Medium: Story = { tags: ["verification"], render: () => narrow(<SizeCard spec={sizes[1]} />) }
+export const Large: Story = { tags: ["verification"], render: () => narrow(<SizeCard spec={sizes[2]} />) }
+
+// HM only: not part of the ui_viz Input Stories. Tagged verification so the default sidebar keeps only the representative Story.
+export const Playground: Story = {
+  tags: ["verification"],
+  args: { size: "medium", type: "text", placeholder, disabled: false, readOnly: false },
+  argTypes: {
+    type: { control: "select", options: ["text", "email", "password", "search", "number", "tel", "url"] },
+    placeholder: { control: "text" },
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    "aria-invalid": { control: "boolean" },
+    className: { table: { disable: true } },
+  },
+  render: (args) => narrow(<Specimen {...args} />),
+}
diff --git a/src/components/label.stories.tsx b/src/components/label.stories.tsx
new file mode 100644
index 0000000..3b41211
--- /dev/null
+++ b/src/components/label.stories.tsx
@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Input, Label } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Label has no standalone ui_viz spec. Its typography and color are the Field Label role owned by Input / Textarea
+// (14/20/500, color.fg.secondary). Required star and messages are composed here as a consumer would (not part of Label).
+
+const meta = {
+  title: "Components/Form/Label",
+  component: Label,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Field Label 14/20/500, 색 color.fg.secondary (ui_viz input.md §9, §10). Radix Label의 htmlFor·클릭 시 컨트롤 focus 동작을 유지합니다. Required 별표·문구는 Label이 아닌 소비 조합입니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof Label>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Label",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Label"
+        description="입력 컨트롤의 이름입니다. Field Label 14/20/500을 쓰며, htmlFor로 연결하면 라벨 클릭 시 컨트롤로 focus가 이동합니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          states={[
+            {
+              id: "default",
+              label: "Default · htmlFor",
+              noteAfter: true,
+              note: "라벨을 클릭하면 연결된 입력으로 focus가 이동합니다.",
+              children: (
+                <div className="grid max-w-sm gap-2">
+                  <Label htmlFor="label-default">Project name</Label>
+                  <Input id="label-default" size="medium" placeholder="Enter a project name" />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="States">
+        <StateBoard
+          states={[
+            {
+              id: "disabled",
+              label: "Disabled (peer-disabled, shadcn 기본)",
+              noteAfter: true,
+              note: "Disabled 연동은 ui_viz Label에 정의가 없어 shadcn 기본(peer-disabled)을 유지합니다.",
+              children: (
+                <div className="grid max-w-sm gap-2">
+                  <Input id="label-disabled" size="medium" disabled defaultValue="Unavailable" className="peer order-2" />
+                  <Label htmlFor="label-disabled" className="order-1">
+                    Project name
+                  </Label>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="Required 별표는 Label이 아닌 소비 조합입니다. 긴 라벨은 줄바꿈됩니다.">
+        <StateBoard
+          states={[
+            {
+              id: "required",
+              label: "Required (소비 조합)",
+              children: (
+                <div className="grid max-w-sm gap-2">
+                  <Label htmlFor="label-required">
+                    Project name
+                    <span aria-hidden="true" className="text-destructive">
+                      *
+                    </span>
+                  </Label>
+                  <Input id="label-required" size="medium" required />
+                </div>
+              ),
+            },
+            {
+              id: "long",
+              label: "Long Label",
+              children: (
+                <div className="grid max-w-[220px] gap-2">
+                  <Label htmlFor="label-long">A very long label text that wraps to multiple lines</Label>
+                  <Input id="label-long" size="medium" />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
diff --git a/src/components/menubar.stories.tsx b/src/components/menubar.stories.tsx
new file mode 100644
index 0000000..147cfa6
--- /dev/null
+++ b/src/components/menubar.stories.tsx
@@ -0,0 +1,148 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Menubar is a desktop menu bar (Left / Right between top menus). The representative Story is the real bar and opens the real
+// menus; Radix owns the keyboard model and focus. Hidden verification Stories isolate trigger focus and open + focus.
+
+function Specimen() {
+  const [grid, setGrid] = useState(true)
+  const [ruler, setRuler] = useState(false)
+  const [zoom, setZoom] = useState("100")
+  return (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>파일</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            새로 만들기 <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            열기 <MenubarShortcut>⌘O</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>저장 (사용 불가)</MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>내보내기</MenubarSubTrigger>
+            <MenubarSubContent>
+              <MenubarItem>PDF</MenubarItem>
+              <MenubarItem>이미지</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarSeparator />
+          <MenubarItem variant="destructive">종료</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>편집</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>
+            실행 취소 <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            다시 실행 <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>보기</MenubarTrigger>
+        <MenubarContent>
+          <MenubarGroup>
+            <MenubarLabel>표시</MenubarLabel>
+            <MenubarCheckboxItem checked={grid} onCheckedChange={setGrid}>
+              격자
+            </MenubarCheckboxItem>
+            <MenubarCheckboxItem checked={ruler} onCheckedChange={setRuler}>
+              눈금자
+            </MenubarCheckboxItem>
+          </MenubarGroup>
+          <MenubarSeparator />
+          <MenubarLabel>확대</MenubarLabel>
+          <MenubarRadioGroup value={zoom} onValueChange={setZoom}>
+            <MenubarRadioItem value="75">75%</MenubarRadioItem>
+            <MenubarRadioItem value="100">100%</MenubarRadioItem>
+            <MenubarRadioItem value="125">125%</MenubarRadioItem>
+          </MenubarRadioGroup>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  )
+}
+
+const meta = { title: "Components/Navigation/Menubar", component: Menubar, parameters: { layout: "padded" } } satisfies Meta<typeof Menubar>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: File (item, shortcut, disabled, separator, sub menu, destructive), Edit, View (label, checkbox, radio).
+export const All: Story = {
+  name: "Menubar",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Menubar"
+        description="데스크톱 앱 형태의 상단 메뉴 막대입니다. 메뉴가 열린 상태에서 좌우 방향키로 이웃 메뉴로 이동합니다."
+      />
+      <StorySection title="Overview" description="파일(단축키 · Disabled · 하위 메뉴 · 위험 항목), 편집, 보기(Label · Checkbox · Radio)입니다. 메뉴를 눌러 엽니다.">
+        <div style={{ minHeight: 384 }}>
+          <Specimen />
+        </div>
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+function FocusSpecimen({ open = false }: { open?: boolean }) {
+  return (
+    <div style={{ minHeight: 160 }}>
+      <Menubar defaultValue={open ? "file" : undefined}>
+        <MenubarMenu value="file">
+          <MenubarTrigger>파일</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>새로 만들기</MenubarItem>
+            <MenubarItem disabled>저장 (사용 불가)</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu value="disabled">
+          <MenubarTrigger disabled>사용 불가</MenubarTrigger>
+        </MenubarMenu>
+      </Menubar>
+    </div>
+  )
+}
+
+export const TriggerFocus: Story = {
+  tags: ["verification"],
+  render: () => <FocusSpecimen />,
+  play: async ({ canvasElement }) => {
+    canvasElement.querySelector<HTMLElement>('[data-slot="menubar-trigger"]')?.focus()
+  },
+}
+
+export const OpenFocus: Story = {
+  tags: ["verification"],
+  render: () => <FocusSpecimen open />,
+  play: async ({ canvasElement }) => {
+    // Verification only: actual trigger focus while its real menu is open.
+    // Production keyboard opening still moves focus into the menu (Radix default).
+    canvasElement.querySelector<HTMLElement>('[data-slot="menubar-trigger"]')?.focus()
+  },
+}
diff --git a/src/components/navigation-menu.stories.tsx b/src/components/navigation-menu.stories.tsx
new file mode 100644
index 0000000..0347c49
--- /dev/null
+++ b/src/components/navigation-menu.stories.tsx
@@ -0,0 +1,155 @@
+import type { ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Navigation Menu is for destinations (links), not commands. The representative Story opens the real menus with hover, click or
+// keyboard; the same specimens also exist as Stories tagged `verification` (hidden from the sidebar). Title + description children
+// inside a content link are marked with `data-description` for the secondary text.
+
+function Destination({ href, title, description, active }: { href: string; title: string; description?: string; active?: boolean }) {
+  return (
+    <NavigationMenuLink href={href} active={active}>
+      <span>{title}</span>
+      {description ? <span data-description="">{description}</span> : null}
+    </NavigationMenuLink>
+  )
+}
+
+function Specimen({ viewport = true }: { viewport?: boolean }) {
+  return (
+    <NavigationMenu viewport={viewport}>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>제품</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="sm:w-[min(360px,calc(100cqw-18px))]" style={{ display: "grid", gap: 4 }}>
+              <li>
+                <Destination href="#analytics" title="분석" description="노선과 시설물 데이터를 한눈에 확인합니다." />
+              </li>
+              <li>
+                <Destination href="#maps" title="지도" description="공간 정보를 지도 위에서 관리합니다." />
+              </li>
+              <li>
+                <Destination href="#reports" title="리포트" description="점검 결과를 보고서로 만듭니다." />
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>자료</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <ul className="sm:w-[min(300px,calc(100cqw-18px))]" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4 }}>
+              <li>
+                <Destination href="#docs" title="문서" />
+              </li>
+              <li>
+                <Destination href="#guides" title="가이드" />
+              </li>
+              <li>
+                <Destination href="#api" title="API" />
+              </li>
+              <li>
+                <Destination href="#blog" title="블로그" />
+              </li>
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#company" active>
+            회사
+          </NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="#contact">문의</NavigationMenuLink>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger disabled>준비 중</NavigationMenuTrigger>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+      {viewport ? <NavigationMenuIndicator /> : null}
+    </NavigationMenu>
+  )
+}
+
+// Size specimens to their review area (including the panel's 8px padding + 1px border on each side).
+// Mobile uses the content's natural minimum width instead of a fixed desktop specimen width.
+const frame = (node: ReactNode) => (
+  <div
+    style={{ minHeight: 256, width: "100%", containerType: "inline-size" }}
+    className="max-md:[&_[data-viewport=false]_[data-slot=navigation-menu-content]]:absolute"
+  >
+    {node}
+  </div>
+)
+
+const meta = { title: "Components/Navigation/Navigation Menu", component: NavigationMenu, parameters: { layout: "padded" } } satisfies Meta<typeof NavigationMenu>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Navigation Menu",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Navigation Menu"
+        description="목적지(링크)로 이동하는 메뉴입니다. 명령 실행에는 쓰지 않습니다. hover, 클릭 또는 키보드로 엽니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          min={520}
+          states={[
+            { id: "viewport", label: "Viewport (default)", note: "제품 / 자료는 content, 회사는 현재 위치(active), 문의는 일반 링크, 준비 중은 disabled trigger", children: frame(<Specimen />) },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Variants">
+        <StateBoard
+          min={520}
+          states={[
+            { id: "no-viewport", label: "viewport={false}", note: "각 content가 자기 trigger 아래에 열립니다", children: frame(<Specimen viewport={false} />) },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Default: Story = { tags: ["verification"], render: () => frame(<Specimen />) }
+export const NoViewport: Story = { tags: ["verification"], name: "No Viewport", render: () => frame(<Specimen viewport={false} />) }
+
+// Three enabled triggers with different widths exercise first / middle / last offsets in both positioning modes.
+export const IndicatorAlignment: Story = {
+  tags: ["verification"],
+  render: () => (
+    <StateBoard min={520} states={[true, false].map((viewport) => ({
+      id: viewport ? "viewport" : "no-viewport",
+      label: `Indicator alignment · viewport=${viewport}`,
+      children: frame(
+        <NavigationMenu viewport={viewport}>
+          <NavigationMenuList>
+            {["제품", "기술 자료", "지원 센터"].map((label) => (
+              <NavigationMenuItem key={label}>
+                <NavigationMenuTrigger>{label}</NavigationMenuTrigger>
+                <NavigationMenuContent><Destination href="#verification" title={`${label} 안내`} /></NavigationMenuContent>
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+          {viewport ? <NavigationMenuIndicator /> : null}
+        </NavigationMenu>
+      ),
+    }))} />
+  ),
+}
+
diff --git a/src/components/pagination.stories.tsx b/src/components/pagination.stories.tsx
new file mode 100644
index 0000000..76c7f5a
--- /dev/null
+++ b/src/components/pagination.stories.tsx
@@ -0,0 +1,105 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Pagination is presentational: the consumer owns the page and the hrefs. The Story keeps the page in local state and uses
+// `#page-N` hrefs with preventDefault. The representative Story shows each case on one page; the same specimens also exist as
+// Stories tagged `verification` (hidden from the sidebar).
+
+// Page list with ellipses: 1 … (p-1 p p+1) … total.
+function pageRange(page: number, total: number): (number | "start" | "end")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
+  const out: (number | "start" | "end")[] = [1]
+  const from = Math.max(2, Math.min(page - 1, total - 4))
+  const to = Math.min(total - 1, Math.max(page + 1, 5))
+  if (from > 2) out.push("start")
+  for (let p = from; p <= to; p++) out.push(p)
+  if (to < total - 1) out.push("end")
+  out.push(total)
+  return out
+}
+
+function Specimen({ total, initial }: { total: number; initial: number }) {
+  const [page, setPage] = useState(initial)
+  const go = (p: number) => (event: React.MouseEvent) => {
+    event.preventDefault()
+    setPage(p)
+  }
+  return (
+    <div className="grid gap-2">
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href={`#page-${page - 1}`} aria-disabled={page === 1} onClick={go(page - 1)} />
+          </PaginationItem>
+          {pageRange(page, total).map((p) =>
+            typeof p === "number" ? (
+              <PaginationItem key={p}>
+                <PaginationLink href={`#page-${p}`} isActive={p === page} onClick={go(p)}>
+                  {p}
+                </PaginationLink>
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={p}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            )
+          )}
+          <PaginationItem>
+            <PaginationNext href={`#page-${page + 1}`} aria-disabled={page === total} onClick={go(page + 1)} />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+      <p className="text-center text-sm text-muted-foreground" data-testid="page-state">{`현재 ${page} / ${total}`}</p>
+    </div>
+  )
+}
+
+const wrap = (node: ReactNode) => <div className="w-full max-w-xl">{node}</div>
+
+const sections = [
+  { id: "first", label: "First page", note: "Previous가 aria-disabled", node: <Specimen total={5} initial={1} /> },
+  { id: "middle", label: "Middle page", node: <Specimen total={5} initial={3} /> },
+  { id: "last", label: "Last page", note: "Next가 aria-disabled", node: <Specimen total={5} initial={5} /> },
+  { id: "ellipsis", label: "Long range with ellipsis", note: "클릭하면 실제로 현재 페이지가 바뀝니다", node: <Specimen total={20} initial={10} /> },
+]
+
+const meta = { title: "Components/Navigation/Pagination", component: Pagination, parameters: { layout: "padded" } } satisfies Meta<typeof Pagination>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={420} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, children: wrap(s.node) }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Pagination",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Pagination"
+        description="여러 페이지로 나뉜 목록을 이동하는 내비게이션입니다. 현재 페이지와 href는 소비 코드가 소유합니다."
+      />
+      <StorySection title="Overview">{board("middle")}</StorySection>
+      <StorySection title="States" description="첫 페이지와 마지막 페이지에서는 이전·다음이 aria-disabled입니다.">{board("first", "last")}</StorySection>
+      <StorySection title="Usage" description="페이지가 많으면 생략 부호로 줄입니다.">{board("ellipsis")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const FirstPage: Story = { tags: ["verification"], name: "First Page", render: () => wrap(<Specimen total={5} initial={1} />) }
+export const LastPage: Story = { tags: ["verification"], name: "Last Page", render: () => wrap(<Specimen total={5} initial={5} />) }
+export const LongRange: Story = { tags: ["verification"], name: "Long Range", render: () => wrap(<Specimen total={20} initial={10} />) }
diff --git a/src/components/popover.stories.tsx b/src/components/popover.stories.tsx
new file mode 100644
index 0000000..3e5a2ad
--- /dev/null
+++ b/src/components/popover.stories.tsx
@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, Input, Popover, PopoverClose, PopoverContent, PopoverTrigger } from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Popover is a non-modal Radix overlay (Portal). The representative Story opens the real panels from their triggers;
+// the verification Story starts one open. Radix owns outside click / Escape close and focus return.
+
+function Info({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Popover defaultOpen={defaultOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          정보 보기
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent aria-label="프로젝트 안내">
+        <div className="grid gap-1">
+          <p className="font-bold">프로젝트 안내</p>
+          <p>일정과 담당자 정보를 현재 화면 위에서 확인합니다. 바깥을 누르거나 Esc를 누르면 닫힙니다.</p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function FormPanel() {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          이름 변경
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" aria-label="프로젝트 이름 변경">
+        <div className="grid gap-3">
+          <label htmlFor="popover-name" className="text-sm font-medium text-muted-foreground">
+            프로젝트명
+          </label>
+          <Input id="popover-name" size="medium" placeholder="프로젝트명을 입력하세요" />
+          <div className="flex justify-end gap-2">
+            <PopoverClose asChild>
+              <Button variant="cancel" appearance="solid" size="sm">
+                취소
+              </Button>
+            </PopoverClose>
+            <PopoverClose asChild>
+              <Button variant="primary" appearance="solid" size="sm">
+                저장
+              </Button>
+            </PopoverClose>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function Aligned() {
+  return (
+    <div className="flex w-full max-w-md justify-between gap-3">
+      {(["start", "center", "end"] as const).map((align) => (
+        <Popover key={align}>
+          <PopoverTrigger asChild>
+            <Button variant="primary" appearance="outline" size="sm">
+              {`align ${align}`}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align={align} side="bottom" aria-label={`정렬 예제: ${align}`}>
+            <p>{`align="${align}"`}</p>
+          </PopoverContent>
+        </Popover>
+      ))}
+    </div>
+  )
+}
+
+const meta = { title: "Components/Overlay/Popover", component: Popover, parameters: { layout: "centered" } } satisfies Meta<typeof Popover>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Popover",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Popover"
+        description="Trigger 옆에 상호작용 가능한 패널을 띄우는 비모달 overlay입니다. 바깥 클릭이나 Esc로 닫힙니다."
+      />
+      <StorySection title="Overview" description="버튼을 눌러 안내 패널을 엽니다.">
+        <Info />
+      </StorySection>
+      <StorySection title="Variants" description="align: start / center / end.">
+        <Aligned />
+      </StorySection>
+      <StorySection title="Usage" description="패널 안의 입력 폼 조합입니다. 취소·저장은 PopoverClose로 닫습니다.">
+        <FormPanel />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Open: Story = {
+  tags: ["verification"],
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="flex min-h-[320px] justify-center p-8">
+      <Info defaultOpen />
+    </div>
+  ),
+}
diff --git a/src/components/progress.stories.tsx b/src/components/progress.stories.tsx
new file mode 100644
index 0000000..b127d14
--- /dev/null
+++ b/src/components/progress.stories.tsx
@@ -0,0 +1,93 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, Progress } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Progress follows `value` (0..max). The representative Story shows fixed values plus one interactive value; the same specimens
+// also exist as Stories tagged `verification` (hidden from the sidebar). No status colors are defined, so there is one look.
+
+function Interactive() {
+  const [value, setValue] = useState(30)
+  return (
+    <div className="grid gap-3">
+      <Progress value={value} aria-label="진행률" />
+      <p className="text-sm text-muted-foreground" data-testid="value">{`value = ${value}`}</p>
+      <div className="flex gap-2">
+        <Button variant="cancel" appearance="solid" size="sm" onClick={() => setValue((v) => Math.max(0, v - 25))}>
+          -25
+        </Button>
+        <Button variant="primary" appearance="solid" size="sm" onClick={() => setValue((v) => Math.min(100, v + 25))}>
+          +25
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function CustomMaximum() {
+  return (
+    <div className="grid gap-3">
+      <Progress value={0} max={200} aria-label="0 of 200" />
+      <Progress value={50} max={200} aria-label="50 of 200" />
+      <Progress value={200} max={200} aria-label="200 of 200" />
+      <Progress max={200} aria-label="Indeterminate" />
+    </div>
+  )
+}
+
+const sections = [
+  { id: "zero", label: "0%", node: <Progress value={0} aria-label="0%" /> },
+  { id: "middle", label: "50%", node: <Progress value={50} aria-label="50%" /> },
+  { id: "full", label: "100%", node: <Progress value={100} aria-label="100%" /> },
+  { id: "custom-maximum", label: "max = 200", note: "0 / 50 / 200과 값 없음: ARIA 범위와 실제 채움 비율 확인", node: <CustomMaximum /> },
+  { id: "interactive", label: "Interactive value", note: "버튼으로 value를 바꾸면 indicator 폭과 aria-valuenow가 함께 변합니다", node: <Interactive /> },
+]
+
+const meta = { title: "Components/Data & Display/Progress", component: Progress, parameters: { layout: "padded" } } satisfies Meta<typeof Progress>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, noteAfter: true, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Progress",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Progress"
+        description="작업 진행률을 막대로 표시합니다. value(0..max)를 따라 채워집니다."
+      />
+      <StorySection title="Overview">{board("middle")}</StorySection>
+      <StorySection title="States" description="value 0과 100입니다.">{board("zero", "full")}</StorySection>
+      <StorySection title="Usage" description="max를 바꾼 범위와, value를 바꾸는 실제 조작입니다.">{board("custom-maximum", "interactive")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Zero: Story = { tags: ["verification"], render: () => <Progress value={0} aria-label="0%" /> }
+export const Middle: Story = { tags: ["verification"], render: () => <Progress value={50} aria-label="50%" /> }
+export const Full: Story = { tags: ["verification"], render: () => <Progress value={100} aria-label="100%" /> }
+
+export const NonDefaultMax: Story = {
+  tags: ["verification"],
+  render: () => <CustomMaximum />,
+  play: async ({ canvasElement }) => {
+    const bars = canvasElement.querySelectorAll('[role="progressbar"]')
+    const expected = ["translateX(-100%)", "translateX(-75%)", "translateX(0%)", "translateX(-100%)"]
+    bars.forEach((bar, index) => {
+      const indicator = bar.querySelector<HTMLElement>('[data-slot="progress-indicator"]')
+      if (bar.getAttribute("aria-valuemax") !== "200" || indicator?.style.transform !== expected[index]) {
+        throw new Error(`Progress max=200: ARIA/fill mismatch in specimen ${index}`)
+      }
+    })
+    if (bars.length !== 4 || bars[1]?.getAttribute("aria-valuenow") !== "50" || bars[3]?.hasAttribute("aria-valuenow")) {
+      throw new Error("Progress max=200: incorrect determinate/indeterminate ARIA state")
+    }
+  },
+}
diff --git a/src/components/radio-group.stories.tsx b/src/components/radio-group.stories.tsx
new file mode 100644
index 0000000..73e8b41
--- /dev/null
+++ b/src/components/radio-group.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Label, RadioGroup, RadioGroupItem } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Current HM Radio Group. ui-viz has no Radio spec, so it was reference only.
+
+function Group({
+  prefix,
+  defaultValue = "a",
+  disabled,
+  disabledItem,
+  invalid,
+  orientation,
+}: {
+  prefix: string
+  defaultValue?: string
+  disabled?: boolean
+  disabledItem?: string
+  invalid?: boolean
+  orientation?: "horizontal" | "vertical"
+}) {
+  return (
+    <RadioGroup defaultValue={defaultValue} disabled={disabled} orientation={orientation} aria-label={prefix}>
+      {["a", "b", "c"].map((v) => (
+        <div key={v} className="flex items-center gap-2">
+          <RadioGroupItem value={v} id={`${prefix}-${v}`} disabled={disabledItem === v} aria-invalid={invalid ? true : undefined} />
+          <Label htmlFor={`${prefix}-${v}`}>Option {v.toUpperCase()}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  )
+}
+
+const meta = {
+  title: "Components/Form/Radio Group",
+  component: RadioGroup,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 18px 원, border 1px(stroke), Checked/Selected는 state-active 테두리 + 8px state-active dot, group gap 12(horizontal 16). Radix RadioGroup의 roving focus, 방향키 선택, ARIA를 유지합니다. ui-viz에는 Radio 규격이 없어 참고만 했습니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof RadioGroup>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Radio Group",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Radio Group"
+        description="여러 선택지 중 하나를 고르는 컨트롤입니다. 그룹 안에서는 방향키로 이동·선택합니다(Radix roving focus)."
+      />
+      <StorySection title="Overview">
+        <StateBoard min={240} states={[{ id: "vertical", label: "Vertical (default) · Checked / Unchecked", children: <Group prefix="v" defaultValue="b" /> }]} />
+      </StorySection>
+      <StorySection title="Variants">
+        <StateBoard min={240} states={[{ id: "horizontal", label: "Horizontal", children: <Group prefix="h" orientation="horizontal" /> }]} />
+      </StorySection>
+      <StorySection title="States">
+        <StateBoard
+          min={240}
+          states={[
+            { id: "hover", label: "Hover", noteAfter: true, note: "Hover한 항목의 테두리가 primary 색이 됩니다.", children: <Group prefix="hv" defaultValue="" /> },
+            { id: "focus", label: "Focus", noteAfter: true, note: "그룹에 Tab으로 들어가면 선택된 항목에 focus ring이 표시됩니다.", children: <Group prefix="f" /> },
+            { id: "disabled-item", label: "Disabled · 항목", children: <Group prefix="di" disabledItem="b" /> },
+            { id: "disabled-group", label: "Disabled · 그룹", children: <Group prefix="dg" disabled /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Validation" description="aria-invalid로 Error 테두리를 표시합니다.">
+        <StateBoard min={240} states={[{ id: "error", label: "Error", children: <Group prefix="e" invalid /> }]} />
+      </StorySection>
+    </StoryPage>
+  ),
+  play: async ({ canvasElement }) => {
+    // preventScroll: the page opens at its header, not at the States section.
+    canvasElement.querySelector<HTMLButtonElement>('[data-overview-state="focus"] [role="radio"][data-state="checked"]')?.focus({ preventScroll: true })
+  },
+}
+
+export const Vertical: Story = { tags: ["verification"], render: () => <Group prefix="sv" /> }
+export const Horizontal: Story = { tags: ["verification"], render: () => <Group prefix="sh" orientation="horizontal" /> }
+export const Disabled: Story = { tags: ["verification"], render: () => <Group prefix="sd" disabled /> }
+export const Error: Story = { tags: ["verification"], render: () => <Group prefix="se" invalid /> }
diff --git a/src/components/resizable.stories.tsx b/src/components/resizable.stories.tsx
new file mode 100644
index 0000000..a341572
--- /dev/null
+++ b/src/components/resizable.stories.tsx
@@ -0,0 +1,126 @@
+import type { ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative Story shows real, draggable layouts; the same specimens also exist as Stories tagged `verification` (hidden
+// from the sidebar). react-resizable-panels v4 sizes: a string without a unit ("30") or with "%" is a percentage, a number is
+// pixels. The frames (size, border) and panel content are Story layout. These are not Dashboard layouts.
+
+const frame = (node: ReactNode, height = 200) => (
+  <div className="rounded-md border" style={{ width: "100%", maxWidth: 560, height }}>
+    {node}
+  </div>
+)
+
+const Pane = ({ children }: { children: ReactNode }) => <div className="grid size-full place-items-center p-3 text-sm">{children}</div>
+
+function Horizontal() {
+  return frame(
+    <ResizablePanelGroup orientation="horizontal" aria-label="가로 분할" id="h">
+      <ResizablePanel defaultSize="30" minSize="15" id="h-list">
+        <Pane>목록 (min 15%)</Pane>
+      </ResizablePanel>
+      <ResizableHandle aria-label="목록 폭 조절" />
+      <ResizablePanel defaultSize="70" minSize="20" id="h-detail">
+        <Pane>상세</Pane>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+
+function Vertical() {
+  return frame(
+    <ResizablePanelGroup orientation="vertical" aria-label="세로 분할" id="v">
+      <ResizablePanel defaultSize="40" minSize="20" id="v-top">
+        <Pane>위</Pane>
+      </ResizablePanel>
+      <ResizableHandle withHandle aria-label="높이 조절" />
+      <ResizablePanel defaultSize="60" minSize="20" id="v-bottom">
+        <Pane>아래</Pane>
+      </ResizablePanel>
+    </ResizablePanelGroup>,
+    240
+  )
+}
+
+function WithHandle() {
+  return frame(
+    <ResizablePanelGroup orientation="horizontal" aria-label="handle 분할" id="g">
+      <ResizablePanel defaultSize="50" minSize="20" id="g-a">
+        <Pane>A</Pane>
+      </ResizablePanel>
+      <ResizableHandle withHandle aria-label="A와 B 사이 조절" />
+      <ResizablePanel defaultSize="50" minSize="20" id="g-b">
+        <Pane>B</Pane>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+
+function MinMax() {
+  return frame(
+    <ResizablePanelGroup orientation="horizontal" aria-label="min max 분할" id="m">
+      <ResizablePanel defaultSize="40" minSize="25" maxSize="60" id="m-a">
+        <Pane>25% – 60%</Pane>
+      </ResizablePanel>
+      <ResizableHandle withHandle aria-label="min max 조절" />
+      <ResizablePanel defaultSize="60" minSize="20" id="m-b">
+        <Pane>나머지</Pane>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+
+function Collapsible() {
+  return frame(
+    <ResizablePanelGroup orientation="horizontal" aria-label="접힘 분할" id="c">
+      <ResizablePanel defaultSize="30" minSize="15" collapsible collapsedSize="0" id="c-side">
+        <Pane>사이드 (끌면 접힘)</Pane>
+      </ResizablePanel>
+      <ResizableHandle withHandle aria-label="사이드 폭 조절" />
+      <ResizablePanel defaultSize="70" minSize="30" id="c-main">
+        <Pane>본문</Pane>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  )
+}
+
+const sections = [
+  { id: "horizontal", label: "Horizontal (list min 15%)", node: <Horizontal /> },
+  { id: "vertical", label: "Vertical with grip", node: <Vertical /> },
+  { id: "handle", label: "Horizontal with grip", node: <WithHandle /> },
+  { id: "minmax", label: "Min / max (25%–60%)", node: <MinMax /> },
+  { id: "collapsible", label: "Collapsible panel", node: <Collapsible /> },
+]
+
+const meta = { title: "Components/Disclosure/Resizable", component: ResizablePanelGroup, parameters: { layout: "padded" } } satisfies Meta<typeof ResizablePanelGroup>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={580} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Resizable",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Resizable"
+        description="경계선을 끌어 인접한 패널의 크기를 조절하는 레이아웃입니다."
+      />
+      <StorySection title="Overview">{board("horizontal")}</StorySection>
+      <StorySection title="Variants" description="세로 방향과 grip 표시입니다.">{board("vertical", "handle")}</StorySection>
+      <StorySection title="Usage" description="최소·최대 크기와 접을 수 있는 패널입니다.">{board("minmax", "collapsible")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const HorizontalLayout: Story = { tags: ["verification"], name: "Horizontal", render: () => <Horizontal /> }
+export const VerticalLayout: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
+export const MinMaxLayout: Story = { tags: ["verification"], name: "Min Max", render: () => <MinMax /> }
diff --git a/src/components/scroll-area.stories.tsx b/src/components/scroll-area.stories.tsx
new file mode 100644
index 0000000..e432859
--- /dev/null
+++ b/src/components/scroll-area.stories.tsx
@@ -0,0 +1,103 @@
+import type { ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ScrollArea, ScrollBar } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Scroll Area is Radix scrolling with a styled scrollbar (type "hover": the bar shows while hovering or scrolling). Sizes below
+// are Story layout. The representative Story shows vertical, horizontal, both axes and a table-like content.
+
+const items = Array.from({ length: 30 }, (_, i) => `항목 ${i + 1}`)
+
+function Vertical() {
+  return (
+    <ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
+      <div className="p-3 text-sm">
+        {items.map((t) => (
+          <div key={t} className="py-1.5">
+            {t}
+          </div>
+        ))}
+      </div>
+    </ScrollArea>
+  )
+}
+
+function Horizontal() {
+  return (
+    <ScrollArea style={{ width: 280 }} className="rounded-md border whitespace-nowrap">
+      <div className="flex w-max gap-3 p-3">
+        {Array.from({ length: 12 }, (_, i) => (
+          <div key={i} className="grid h-16 w-24 place-items-center rounded-md bg-muted text-sm">{`카드 ${i + 1}`}</div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
+
+function Both() {
+  return (
+    <ScrollArea style={{ height: 200, width: 280 }} className="rounded-md border">
+      <div className="p-3 text-sm" style={{ width: 600 }}>
+        {items.map((t) => (
+          <div key={t} className="py-1.5">{`${t} — 가로로도 길어지는 내용입니다. 가로 scroll로 끝까지 볼 수 있습니다.`}</div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
+
+function TableLike() {
+  return (
+    <ScrollArea style={{ height: 180, width: 300 }} className="rounded-md border">
+      <div className="grid text-sm" style={{ width: 520 }}>
+        {Array.from({ length: 12 }, (_, r) => (
+          <div key={r} className="grid grid-cols-4 border-b p-2">
+            {["번호", "이름", "상태", "금액"].map((c) => (
+              <span key={c}>{`${c} ${r + 1}`}</span>
+            ))}
+          </div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
+
+const sections: { id: string; label: string; node: ReactNode }[] = [
+  { id: "vertical", label: "Vertical", node: <Vertical /> },
+  { id: "horizontal", label: "Horizontal", node: <Horizontal /> },
+  { id: "both", label: "Both axes", node: <Both /> },
+  { id: "table-like", label: "Table-like content", node: <TableLike /> },
+]
+
+const meta = { title: "Components/Data & Display/Scroll Area", component: ScrollArea, parameters: { layout: "padded" } } satisfies Meta<typeof ScrollArea>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Scroll Area",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Scroll Area"
+        description="정해진 크기 안에서 내용을 스크롤하는 영역입니다. 스크롤바는 포인터를 올리거나 스크롤할 때 나타납니다."
+      />
+      <StorySection title="Overview">{board("vertical")}</StorySection>
+      <StorySection title="Variants" description="가로와 양방향 스크롤입니다.">{board("horizontal", "both")}</StorySection>
+      <StorySection title="Usage">{board("table-like")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const VerticalScroll: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
+export const HorizontalScroll: Story = { tags: ["verification"], name: "Horizontal", render: () => <Horizontal /> }
diff --git a/src/components/select.stories.tsx b/src/components/select.stories.tsx
new file mode 100644
index 0000000..fd48aeb
--- /dev/null
+++ b/src/components/select.stories.tsx
@@ -0,0 +1,312 @@
+import { useId, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, type SelectSize } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Story structure follows ui_viz (implementations/web/storybook/Select.stories.jsx and SelectSizes.stories.jsx):
+// one representative "Select" Story shows the default, selected, disabled and open states on one page; the same specimens
+// also exist as separate Stories tagged `verification`, which the sidebar hides by default (see .storybook/main.ts).
+//
+// The Label is not part of the Select component. SelectSpecimen composes it with a plain element and shadcn Token
+// utilities, the way a consumer would: Label 14/20/500 in the secondary text color, field gap 8.
+
+const statusOptions = [
+  { value: "all", label: "All statuses" },
+  { value: "active", label: "Active" },
+  { value: "planned", label: "Planned" },
+  { value: "completed", label: "Completed" },
+]
+
+const longOptions = [
+  { value: "short", label: "Short option" },
+  { value: "long", label: "A very long selected value that must truncate without moving the chevron" },
+]
+
+const scrollOptions = Array.from({ length: 32 }, (_, index) => ({
+  value: `option-${index + 1}`,
+  label: `Option ${index + 1}`,
+}))
+
+type SpecimenProps = {
+  listSize?: SelectSize
+  label?: string
+  placeholder?: string
+  size?: SelectSize
+  defaultValue?: string
+  defaultOpen?: boolean
+  disabled?: boolean
+  "aria-invalid"?: boolean
+  options?: ReadonlyArray<{ value: string; label: string }>
+}
+
+function SelectSpecimen({ listSize, label = "Select", placeholder = "Choose a status", size, defaultValue, defaultOpen, disabled, "aria-invalid": ariaInvalid, options = statusOptions }: SpecimenProps) {
+  const id = useId()
+  return (
+    <div className="grid gap-2">
+      <label htmlFor={id} className={`justify-self-start text-sm font-medium text-muted-foreground${disabled ? " opacity-60" : ""}`}>
+        {label}
+      </label>
+      <Select defaultValue={defaultValue} defaultOpen={defaultOpen} disabled={disabled}>
+        <SelectTrigger id={id} size={size} aria-invalid={ariaInvalid} className="w-full">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent {...(listSize ? { "data-size": listSize } : {})}>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+const narrow = (children: ReactNode) => <div className="max-w-sm">{children}</div>
+
+// ui_viz docs/components/select.md §1.1, §9: display metadata only, never sets control geometry.
+const sizes = [
+  { size: "medium" as const, name: "Medium", outer: "34px / 32px", typography: "14 / 20 / 400", option: "42px minimum · 14 / 20 / 400", usage: "Business forms / Search" },
+  { size: "large" as const, name: "Large", outer: "44px / 42px", typography: "16 / 24 / 400", option: "42px minimum · 16 / 24 / 400", usage: "Component default" },
+]
+
+function SizeCard({ spec }: { spec: (typeof sizes)[number] }) {
+  return (
+    <section className="grid content-start gap-4" data-select-size={spec.size}>
+      <SelectSpecimen size={spec.size} label={spec.name} placeholder="Choose a status" />
+      <dl className="m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+        <dt className="text-muted-foreground">Outer Height / Trigger</dt>
+        <dd className="m-0">{spec.outer}</dd>
+        <dt className="text-muted-foreground">Trigger Typography</dt>
+        <dd className="m-0">{spec.typography}</dd>
+        <dt className="text-muted-foreground">Option</dt>
+        <dd className="m-0">{spec.option}</dd>
+        <dt className="text-muted-foreground">Usage</dt>
+        <dd className="m-0">{spec.usage}</dd>
+      </dl>
+    </section>
+  )
+}
+
+function SizeComparison() {
+  return (
+    <div className="grid max-w-[1120px] gap-6">
+      <div className="grid gap-6 [grid-template-columns:repeat(auto-fit,minmax(240px,1fr))]">
+        {sizes.map((spec) => (
+          <SizeCard key={spec.size} spec={spec} />
+        ))}
+      </div>
+      <p className="text-sm text-muted-foreground">
+        Select는 Input과 독립된 두 크기(Medium 34 / Large 44)입니다. 각 Trigger를 클릭해 연결된 목록과 선택 상태를 확인하세요. 목록의 Option은 Trigger의 size를 그대로 따르며(최소 높이 42px, Medium 14/20/400, Large 16/24/400) 폭은 항상 Trigger와 같습니다.
+      </p>
+    </div>
+  )
+}
+
+function DisabledStates() {
+  return (
+    <div className="grid max-w-[480px] gap-6">
+      <section className="grid gap-2">
+        <h3 className="text-base font-semibold">Selected Value</h3>
+        <SelectSpecimen size="medium" label="Status" defaultValue="active" disabled />
+      </section>
+      <section className="grid gap-2">
+        <h3 className="text-base font-semibold">Placeholder</h3>
+        <SelectSpecimen size="medium" label="Status" placeholder="Choose a status" disabled />
+      </section>
+    </div>
+  )
+}
+
+const meta = {
+  title: "Components/Form/Select",
+  component: SelectSpecimen,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "ui_viz docs/components/select.md: Medium 외곽 34px(Trigger 32), Large 외곽 44px(Trigger 42, 기본값). Trigger는 Medium 14/20/400, Large 16/24/400이고 화살표는 18×18입니다. 목록은 Trigger 폭에 연결되는 Overlay이며 Option은 Trigger의 size를 따릅니다(최소 42px, Medium 14/20/400, Large 16/24/400). Option 상태 면(.45)·글자색과 열린 구분선, 그림자는 ui_viz에서 Temporary/EXPERIMENTAL이라 shadcn 기본값을 유지합니다. Error는 ui_viz에 정의가 없습니다.",
+      },
+    },
+  },
+  argTypes: {
+    size: { control: "inline-radio", options: ["medium", "large"], description: "무지정 기본값 Large. 업무 폼·조회 소비 역할은 Medium." },
+    disabled: { control: "boolean" },
+    defaultOpen: { control: "boolean" },
+    defaultValue: { control: "select", options: [undefined, ...statusOptions.map((option) => option.value)] },
+    placeholder: { control: "text" },
+    label: { control: "text" },
+  },
+} satisfies Meta<typeof SelectSpecimen>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: every state on one page. Named after the component, as in ui_viz.
+// The open list is a Radix popover: press Escape or click outside to close it, click the trigger to reopen.
+export const All: Story = {
+  name: "Select",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Select"
+        description="목록에서 하나의 값을 고르는 컨트롤입니다. Option은 Trigger의 size를 따르고 목록 폭은 Trigger와 같습니다."
+      />
+      {/* Open stays in the first section: the list opens on load, so its trigger must be on the first screen. */}
+      <StorySection title="Overview" description="size를 생략한 기본 Select(Large 44px)와 열린 목록입니다. 목록은 Escape 또는 바깥 클릭으로 닫히고, Trigger를 클릭하면 다시 열립니다.">
+        <StateBoard
+          fixed
+          states={[
+            { id: "default", label: "Default · Large (size 생략)", children: <SelectSpecimen /> },
+            {
+              id: "open",
+              label: "Open",
+              children: (
+                <div className="min-h-64">
+                  <SelectSpecimen size="medium" defaultOpen />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Sizes" description="Medium 34 / Large 44px. Input과 독립된 두 크기입니다.">
+        <SizeComparison />
+      </StorySection>
+      <StorySection title="States" description="값이 선택된 상태와 Disabled입니다.">
+        <StateBoard
+          fixed
+          states={[
+            { id: "selected", label: "Selected", children: <SelectSpecimen size="medium" defaultValue="active" /> },
+            { id: "disabled", label: "Disabled", children: <DisabledStates /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Invalid / Focus" description="aria-invalid는 Error 테두리로 표시합니다. Tab으로 Trigger에 포커스해 Invalid + Focus를 확인합니다.">
+        <StateBoard
+          fixed
+          states={[
+            { id: "invalid", label: "Invalid", children: <SelectSpecimen size="medium" aria-invalid label="Invalid Select" defaultValue="active" /> },
+            { id: "invalid-disabled", label: "Invalid · Disabled", children: <SelectSpecimen size="medium" aria-invalid disabled label="Disabled Invalid Select" /> },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Stories: the same specimens as separate Stories, hidden from the sidebar (tag `verification`), reachable by URL or the sidebar tag filter.
+export const Default: Story = { tags: ["verification"], render: () => narrow(<SelectSpecimen />) }
+export const InvalidFocus: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="grid max-w-sm gap-6">
+      <button type="button">Before field</button>
+      <SelectSpecimen size="medium" aria-invalid label="Invalid Select" defaultValue="active" />
+      <SelectSpecimen size="medium" aria-invalid disabled label="Disabled Invalid Select" />
+      <button type="button">After field</button>
+    </div>
+  ),
+}
+export const Open: Story = {
+  tags: ["verification"],
+  render: () => narrow(<div className="min-h-64"><SelectSpecimen size="medium" defaultOpen /></div>),
+}
+export const Selected: Story = { tags: ["verification"], render: () => narrow(<SelectSpecimen size="medium" defaultValue="active" />) }
+export const Disabled: Story = { tags: ["verification"], render: () => <DisabledStates /> }
+export const Sizes: Story = { tags: ["verification"], name: "Compare Sizes", render: () => <SizeComparison /> }
+export const Medium: Story = { tags: ["verification"], render: () => narrow(<SizeCard spec={sizes[0]} />) }
+export const Large: Story = { tags: ["verification"], render: () => narrow(<SizeCard spec={sizes[1]} />) }
+
+// HM resilience checks only: ui_viz had no public long-content or scroll Story, so these are not parity evidence.
+export const LongContent: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div style={{ display: "grid", gap: 24, maxWidth: 280 }}>
+      <SelectSpecimen
+        size="medium"
+        label="Long placeholder"
+        placeholder="A very long placeholder that must truncate without moving the chevron"
+        options={longOptions}
+      />
+      <SelectSpecimen size="medium" label="Long selected value" defaultValue="long" options={longOptions} />
+    </div>
+  ),
+}
+
+// Open list with an option longer than the list: checks Viewport → Item → ItemText sizing (Trigger 14px vs Option 16px for Medium).
+const longOpenOptions = [
+  { value: "short", label: "Short option" },
+  { value: "long", label: "A very long option label that is wider than the open list and must truncate inside it" },
+]
+export const OpenLargeShort: Story = {
+  tags: ["verification"],
+  render: () => narrow(<div className="min-h-64"><SelectSpecimen size="large" defaultOpen /></div>),
+}
+export const OpenMediumLong: Story = {
+  tags: ["verification"],
+  render: () => <div className="min-h-64" style={{ maxWidth: 280 }}><SelectSpecimen size="medium" defaultOpen defaultValue="long" options={longOpenOptions} /></div>,
+}
+export const OpenLargeLong: Story = {
+  tags: ["verification"],
+  render: () => <div className="min-h-64" style={{ maxWidth: 280 }}><SelectSpecimen size="large" defaultOpen defaultValue="long" options={longOpenOptions} /></div>,
+}
+
+// Place the real Trigger near the viewport bottom so Radix collision detection flips it.
+const atBottom = (children: ReactNode) => (
+  <div style={{ minHeight: "calc(100dvh - 32px)", display: "grid", alignItems: "end", width: 280, maxWidth: "100%" }}>{children}</div>
+)
+export const OpenTop: Story = {
+  tags: ["verification"],
+  render: () => atBottom(<SelectSpecimen size="large" defaultOpen />),
+}
+export const OpenTopLong: Story = {
+  tags: ["verification"],
+  render: () => atBottom(<SelectSpecimen size="medium" defaultOpen defaultValue="long" options={longOpenOptions} />),
+}
+
+// Comparison only: pins the list profile independently of the Trigger to check whether a Medium Trigger + Large list
+// breaks the open list. Production derives the list size from the Trigger; this Story overrides the data-size attribute
+// that SelectContent already forwards, so no Select API exists for it. Both columns share options, selected value and width.
+function ListSizeColumn({ title, listSize, width }: { title: string; listSize: SelectSize; width: number }) {
+  return (
+    <section className="grid content-start gap-2" style={{ width }} data-list-size={listSize}>
+      <h3 className="m-0 text-sm font-semibold">{title}</h3>
+      <div className="min-h-56">
+        <SelectSpecimen size="medium" listSize={listSize} defaultOpen defaultValue="long" options={longOpenOptions} label={"Trigger medium · " + width + "px"} />
+      </div>
+    </section>
+  )
+}
+export const ListSizeComparison: Story = {
+  tags: ["verification"],
+  name: "Medium Trigger / List Size Comparison",
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="grid gap-8 [grid-template-columns:repeat(auto-fit,minmax(280px,max-content))]">
+      <ListSizeColumn title="A · Medium Trigger + Large List" listSize="large" width={280} />
+      <ListSizeColumn title="B · Medium Trigger + Medium List" listSize="medium" width={280} />
+      <ListSizeColumn title="A · Medium Trigger + Large List" listSize="large" width={384} />
+      <ListSizeColumn title="B · Medium Trigger + Medium List" listSize="medium" width={384} />
+    </div>
+  ),
+}
+
+export const Scroll: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div style={{ minHeight: 360, maxWidth: 280 }}>
+      <SelectSpecimen size="medium" label="Scrollable options" defaultOpen options={scrollOptions} />
+    </div>
+  ),
+}
+
+// HM only: not part of the ui_viz Select Stories. Tagged verification so the default sidebar keeps only the representative Story.
+export const Playground: Story = {
+  tags: ["verification"],
+  args: { label: "Select", placeholder: "Choose a status", size: "medium", disabled: false, defaultOpen: false },
+  render: (args) => narrow(<SelectSpecimen key={String(args.defaultOpen)} {...args} />),
+}
diff --git a/src/components/separator.stories.tsx b/src/components/separator.stories.tsx
new file mode 100644
index 0000000..0e276d7
--- /dev/null
+++ b/src/components/separator.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Separator } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const meta = {
+  title: "Components/Data & Display/Separator",
+  component: Separator,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 1px 선, 색은 pale warm neutral(Primitive 참조). Radix Separator의 orientation과 decorative(기본 true) API를 유지합니다. decorative=false이면 role=separator가 노출됩니다.",
+      },
+    },
+  },
+  argTypes: { orientation: { control: "inline-radio", options: ["horizontal", "vertical"] }, decorative: { control: "boolean" } },
+} satisfies Meta<typeof Separator>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Separator",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Separator"
+        description="콘텐츠 사이를 나누는 선입니다. 기본은 장식용(decorative)이며 접근성 트리에 노출되지 않습니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          min={280}
+          states={[
+            {
+              id: "horizontal",
+              label: "Horizontal",
+              children: (
+                <div className="grid gap-3 text-sm">
+                  <span>Above</span>
+                  <Separator />
+                  <span>Below</span>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Variants">
+        <StateBoard
+          min={280}
+          states={[
+            {
+              id: "vertical",
+              label: "Vertical (flex row)",
+              children: (
+                <div className="flex h-6 items-center gap-3 text-sm">
+                  <span>Left</span>
+                  <Separator orientation="vertical" />
+                  <span>Middle</span>
+                  <Separator orientation="vertical" />
+                  <span>Right</span>
+                </div>
+              ),
+            },
+            {
+              id: "semantic",
+              label: "Semantic (decorative=false)",
+              noteAfter: true,
+              note: "decorative=false는 role=separator와 aria-orientation을 노출합니다.",
+              children: (
+                <div className="grid gap-3 text-sm">
+                  <span>Section A</span>
+                  <Separator decorative={false} />
+                  <span>Section B</span>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Horizontal: Story = { tags: ["verification"], render: () => <div className="max-w-xs"><Separator /></div> }
+export const Vertical: Story = { tags: ["verification"], render: () => <div className="flex h-8 items-center"><Separator orientation="vertical" /></div> }
diff --git a/src/components/sheet.stories.tsx b/src/components/sheet.stories.tsx
new file mode 100644
index 0000000..41b8724
--- /dev/null
+++ b/src/components/sheet.stories.tsx
@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, Input, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Sheet is a modal Radix overlay (Portal), so the representative Story is a row of triggers that open the real Sheet for each
+// side and content case. The same cases start open in the verification Stories. Radix owns focus trap, Escape and focus return.
+
+type Side = "top" | "right" | "bottom" | "left"
+
+const longText = "긴 내용은 Body 영역만 세로로 scroll 하고 Header와 Footer는 그대로 보입니다. "
+
+function Frame({
+  trigger,
+  side,
+  defaultOpen,
+  title,
+  description,
+  children,
+}: {
+  trigger: string
+  side?: Side
+  defaultOpen?: boolean
+  title: string
+  description?: string
+  children: React.ReactNode
+}) {
+  return (
+    <Sheet defaultOpen={defaultOpen}>
+      <SheetTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          {trigger}
+        </Button>
+      </SheetTrigger>
+      <SheetContent side={side}>
+        <SheetHeader>
+          <SheetTitle>{title}</SheetTitle>
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
+        </SheetHeader>
+        <SheetBody>{children}</SheetBody>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button variant="cancel" appearance="solid">
+              취소
+            </Button>
+          </SheetClose>
+          <SheetClose asChild>
+            <Button variant="primary" appearance="solid">
+              저장
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function SideCase({ side, defaultOpen }: { side: Side; defaultOpen?: boolean }) {
+  return (
+    <Frame trigger={side} side={side} defaultOpen={defaultOpen} title="설정" description="화면 가장자리에서 열리는 보조 패널입니다.">
+      <p>{`side="${side}"`}</p>
+    </Frame>
+  )
+}
+
+function FormCase({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="폼" defaultOpen={defaultOpen} title="프로젝트 정보">
+      <div className="grid gap-2">
+        <label htmlFor="sheet-form-name" className="text-sm font-medium text-muted-foreground">
+          프로젝트명
+        </label>
+        <Input id="sheet-form-name" size="medium" placeholder="프로젝트명을 입력하세요" />
+      </div>
+    </Frame>
+  )
+}
+
+function LongCase({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Frame trigger="긴 내용" defaultOpen={defaultOpen} title="긴 내용" description="Body만 scroll 합니다.">
+      {Array.from({ length: 30 }, (_, i) => (
+        <p key={i} className="mb-3">
+          {longText}
+        </p>
+      ))}
+    </Frame>
+  )
+}
+
+const meta = { title: "Components/Overlay/Sheet", component: Sheet, parameters: { layout: "centered" } } satisfies Meta<typeof Sheet>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Sheet",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Sheet"
+        description="화면 가장자리에서 열리는 보조 모달 패널입니다. 각 버튼을 눌러 실제 Sheet를 엽니다."
+      />
+      <StorySection title="Overview" description="side를 생략한 기본 방향(right)입니다.">
+        <SideCase side="right" />
+      </StorySection>
+      <StorySection title="Variants" description="side: left / top / bottom.">
+        <div className="flex flex-wrap gap-3">
+          <SideCase side="left" />
+          <SideCase side="top" />
+          <SideCase side="bottom" />
+        </div>
+      </StorySection>
+      <StorySection title="Usage" description="폼 입력 조합과, 내용이 길 때 Body만 scroll 하는 경우입니다.">
+        <div className="flex flex-wrap gap-3">
+          <FormCase />
+          <LongCase />
+        </div>
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification Stories: the same cases starting open, hidden from the sidebar (tag `verification`).
+export const Right: Story = { tags: ["verification"], render: () => <SideCase side="right" defaultOpen /> }
+export const Left: Story = { tags: ["verification"], render: () => <SideCase side="left" defaultOpen /> }
+export const Top: Story = { tags: ["verification"], render: () => <SideCase side="top" defaultOpen /> }
+export const Bottom: Story = { tags: ["verification"], render: () => <SideCase side="bottom" defaultOpen /> }
+export const Form: Story = { tags: ["verification"], render: () => <FormCase defaultOpen /> }
+export const LongContent: Story = { tags: ["verification"], name: "Long Content", render: () => <LongCase defaultOpen /> }
diff --git a/src/components/skeleton.stories.tsx b/src/components/skeleton.stories.tsx
new file mode 100644
index 0000000..55180de
--- /dev/null
+++ b/src/components/skeleton.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Card, CardContent, CardHeader, Skeleton } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Skeleton is a visual placeholder; size and shape come from `className` (layout classes here are Story composition).
+// There is no data fetching. The representative Story shows text lines, an avatar, and a card / list loading composition.
+
+function TextLines() {
+  return (
+    <div className="grid gap-2">
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  )
+}
+
+function AvatarRow() {
+  return (
+    <div className="flex items-center gap-3">
+      <Skeleton className="size-10 rounded-full" />
+      <div className="grid flex-1 gap-2">
+        <Skeleton className="h-4 w-1/3" />
+        <Skeleton className="h-3 w-2/3" />
+      </div>
+    </div>
+  )
+}
+
+function CardLoading() {
+  return (
+    <Card>
+      <CardHeader>
+        <Skeleton className="h-5 w-1/2" />
+      </CardHeader>
+      <CardContent className="grid gap-3">
+        <Skeleton className="h-24 w-full" />
+        <AvatarRow />
+        <AvatarRow />
+      </CardContent>
+    </Card>
+  )
+}
+
+const sections = [
+  { id: "text", label: "Text", node: <TextLines /> },
+  { id: "avatar", label: "Avatar + text", node: <AvatarRow /> },
+  { id: "card", label: "Card / list loading", node: <CardLoading /> },
+]
+
+const meta = { title: "Components/Data & Display/Skeleton", component: Skeleton, parameters: { layout: "padded" } } satisfies Meta<typeof Skeleton>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Skeleton",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Skeleton"
+        description="콘텐츠를 불러오는 동안 자리를 표시하는 placeholder입니다. 크기와 모양은 className으로 정합니다."
+      />
+      <StorySection title="Overview">{board("text")}</StorySection>
+      <StorySection title="Usage" description="Avatar 행과 카드·목록 로딩 조합입니다.">{board("avatar", "card")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Text: Story = { tags: ["verification"], render: () => <TextLines /> }
+export const CardList: Story = { tags: ["verification"], name: "Card List", render: () => <CardLoading /> }
diff --git a/src/components/slider.stories.tsx b/src/components/slider.stories.tsx
new file mode 100644
index 0000000..d415a1e
--- /dev/null
+++ b/src/components/slider.stories.tsx
@@ -0,0 +1,148 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Slider } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// The representative Story shows each Slider mode with real, draggable controls; the same specimens also exist as Stories tagged
+// `verification` (hidden from the sidebar). The value label is the Story's composition (Slider has no built-in label).
+// Names (`aria-label`) are provided by the consumer.
+
+function Labeled({ label, children, valueText }: { label: string; children: ReactNode; valueText: string }) {
+  return (
+    <div className="grid gap-3">
+      <div className="flex justify-between text-sm">
+        <span className="font-medium">{label}</span>
+        <span className="text-muted-foreground" data-testid="value">{valueText}</span>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+function Single() {
+  const [value, setValue] = useState([40])
+  return (
+    <Labeled label="볼륨" valueText={`${value[0]}`}>
+      <Slider aria-label="볼륨" value={value} onValueChange={setValue} max={100} step={1} />
+    </Labeled>
+  )
+}
+
+function Range() {
+  const [value, setValue] = useState([25, 75])
+  return (
+    <Labeled label="가격 범위" valueText={`${value[0]} – ${value[1]}`}>
+      <Slider aria-label="가격 범위" value={value} onValueChange={setValue} max={100} step={1} minStepsBetweenThumbs={5} />
+    </Labeled>
+  )
+}
+
+function Step() {
+  const [value, setValue] = useState([50])
+  return (
+    <Labeled label="단계 (step 25)" valueText={`${value[0]}`}>
+      <Slider aria-label="단계" value={value} onValueChange={setValue} max={100} step={25} />
+    </Labeled>
+  )
+}
+
+function Disabled() {
+  return <Slider aria-label="비활성" defaultValue={[60]} disabled />
+}
+
+function Vertical() {
+  return (
+    <div style={{ height: 180 }} className="flex justify-center">
+      <Slider aria-label="세로" defaultValue={[30]} orientation="vertical" />
+    </div>
+  )
+}
+
+const sections = [
+  { id: "single", label: "Single", node: <Single /> },
+  { id: "range", label: "Range (two thumbs)", node: <Range /> },
+  { id: "step", label: "Step", node: <Step /> },
+  { id: "disabled", label: "Disabled", node: <Disabled /> },
+  { id: "vertical", label: "Vertical", node: <Vertical /> },
+]
+
+const meta = { title: "Components/Form/Slider", component: Slider, parameters: { layout: "padded" } } satisfies Meta<typeof Slider>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={320} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Slider",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Slider"
+        description="막대 위의 thumb을 끌어 범위 안의 값을 고르는 컨트롤입니다. 화살표 키로도 값을 바꿉니다."
+      />
+      <StorySection title="Overview">{board("single")}</StorySection>
+      <StorySection title="Variants" description="두 thumb의 범위, step, 세로 방향입니다.">{board("range", "step", "vertical")}</StorySection>
+      <StorySection title="States">{board("disabled")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const SingleValue: Story = { tags: ["verification"], name: "Single", render: () => <Single /> }
+export const RangeValue: Story = { tags: ["verification"], name: "Range", render: () => <Range /> }
+export const DisabledSlider: Story = { tags: ["verification"], name: "Disabled", render: () => <Disabled /> }
+
+export const Focus: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="grid gap-8">
+      <Single />
+      <Labeled label="비활성" valueText="60"><Disabled /></Labeled>
+      <output data-testid="slider-focus-result" hidden>Ready</output>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const thumb = canvasElement.querySelector<HTMLElement>('[data-slot="slider-thumb"]')!
+    const disabled = canvasElement.querySelector<HTMLElement>('[data-disabled] [data-slot="slider-thumb"]')!
+    const result = canvasElement.querySelector<HTMLOutputElement>('[data-testid="slider-focus-result"]')!
+    const states: Record<string, string> = {}
+    const read = (name: string, element = thumb) => { states[name] = getComputedStyle(element).boxShadow }
+    const assert = (condition: boolean, message: string) => { if (!condition) throw Error(message) }
+    thumb.blur()
+    read("Default")
+    // Existing Storybook pseudo-state mirroring preserves production selector order/specificity.
+    thumb.setAttribute("data-sb-hover", "")
+    read("Hover")
+    thumb.setAttribute("data-sb-active", "")
+    read("Drag")
+    thumb.removeAttribute("data-sb-hover")
+    thumb.removeAttribute("data-sb-active")
+    thumb.focus()
+    assert(thumb.matches(":focus-visible"), "Keyboard focus must be visible")
+    read("Focus")
+    thumb.setAttribute("data-sb-hover", "")
+    read("Focus + Hover")
+    thumb.setAttribute("data-sb-active", "")
+    read("Focus + Drag")
+    disabled.setAttribute("data-sb-hover", "")
+    disabled.setAttribute("data-sb-active", "")
+    disabled.focus()
+    read("Disabled", disabled)
+    assert(document.activeElement !== disabled, "Disabled thumb cannot receive focus")
+    assert(states.Default === "none" && states.Disabled === "none", "Default/Disabled have no halo")
+    assert(states.Hover.includes("4px") && states.Drag === states.Hover.replace("4px", "6px"), "Interaction keeps 4/6px and its color")
+    assert(states.Focus.includes("4px") && states["Focus + Hover"] === states.Focus, "Hover cannot mask Focus")
+    assert(states["Focus + Drag"] === states.Focus.replace("4px", "6px"), "Drag keeps 6px without masking Focus color")
+    for (const element of [thumb, disabled]) {
+      element.removeAttribute("data-sb-hover")
+      element.removeAttribute("data-sb-active")
+    }
+    thumb.focus()
+    result.textContent = JSON.stringify(states)
+  },
+}
diff --git a/src/components/sonner.stories.tsx b/src/components/sonner.stories.tsx
new file mode 100644
index 0000000..2743e26
--- /dev/null
+++ b/src/components/sonner.stories.tsx
@@ -0,0 +1,140 @@
+import type { ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, toast, Toaster } from "@hm-design/ui"
+import { StateBoard } from "./story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "./story-page"
+
+// Toast is created with the real Sonner API (`toast`, re-exported by @hm-design/ui); nothing is a static specimen.
+// One <Toaster /> is mounted in .storybook/preview.tsx for every Story (an app mounts it once at its root).
+
+const wait = (ms: number, fail?: boolean) =>
+  new Promise<string>((resolve, reject) => setTimeout(() => (fail ? reject(new Error("fail")) : resolve("완료")), ms))
+
+function Trigger({ onClick, children }: { onClick: () => void; children: ReactNode }) {
+  return (
+    <Button variant="primary" appearance="outline" onClick={onClick}>
+      {children}
+    </Button>
+  )
+}
+
+// `ids` picks the specimens for one section of the common Story page.
+function Board({ ids }: { ids: string[] }) {
+  return (
+    <StateBoard
+      min={220}
+      states={[
+        {
+          id: "types",
+          label: "Types",
+          noteAfter: true,
+          note: "Default / Success / Error / Warning / Info / Loading. Only Error has its own color; the other types are neutral (status colors are undecided).",
+          children: (
+            <div className="flex flex-wrap gap-2">
+              <Trigger onClick={() => toast("알림이 도착했습니다", { description: "기본 알림입니다." })}>Default</Trigger>
+              <Trigger onClick={() => toast.success("저장했습니다", { description: "변경 사항이 저장되었습니다." })}>Success</Trigger>
+              <Trigger onClick={() => toast.error("저장하지 못했습니다", { description: "잠시 후 다시 시도하세요." })}>Error</Trigger>
+              <Trigger onClick={() => toast.warning("저장 공간이 부족합니다", { description: "불필요한 파일을 정리하세요." })}>Warning</Trigger>
+              <Trigger onClick={() => toast.info("새 버전이 있습니다")}>Info</Trigger>
+              <Trigger onClick={() => toast.loading("처리 중입니다", { duration: 4000 })}>Loading</Trigger>
+            </div>
+          ),
+        },
+        {
+          id: "action",
+          label: "Action / Close",
+          children: (
+            <div className="flex flex-wrap gap-2">
+              <Trigger onClick={() => toast("파일을 삭제했습니다", { action: { label: "실행 취소", onClick: () => toast.success("복원했습니다") } })}>
+                Action
+              </Trigger>
+              <Trigger
+                onClick={() =>
+                  toast("변경 사항을 적용할까요?", {
+                    description: "취소하면 이전 상태가 유지됩니다.",
+                    duration: Infinity,
+                    action: { label: "적용", onClick: () => undefined },
+                    cancel: { label: "취소", onClick: () => undefined },
+                  })
+                }
+              >
+                Action + Cancel
+              </Trigger>
+              <Trigger onClick={() => toast("닫기 버튼이 있는 알림", { closeButton: true, duration: Infinity })}>Close button</Trigger>
+            </div>
+          ),
+        },
+        {
+          id: "promise",
+          label: "Promise",
+          noteAfter: true,
+          note: "Loading, then Success or Error (local timeout, no network).",
+          children: (
+            <div className="flex flex-wrap gap-2">
+              <Trigger onClick={() => toast.promise(wait(1500), { loading: "저장 중...", success: "저장했습니다", error: "저장하지 못했습니다" })}>
+                Promise → Success
+              </Trigger>
+              <Trigger onClick={() => toast.promise(wait(1500, true), { loading: "저장 중...", success: "저장했습니다", error: "저장하지 못했습니다" })}>
+                Promise → Error
+              </Trigger>
+            </div>
+          ),
+        },
+        {
+          id: "stack",
+          label: "Stack / Long",
+          children: (
+            <div className="flex flex-wrap gap-2">
+              <Trigger
+                onClick={() => {
+                  toast("첫 번째 알림")
+                  toast.success("두 번째 알림")
+                  toast.error("세 번째 알림")
+                }}
+              >
+                Stack ×3
+              </Trigger>
+              <Trigger
+                onClick={() =>
+                  toast.info("긴 메시지 확인용 제목입니다. 좁은 화면에서도 줄바꿈되어야 합니다.", {
+                    description: "설명도 길게 작성하면 여러 줄로 나뉘고 토스트 폭을 넘치지 않아야 합니다. 이 문장은 줄바꿈을 확인하기 위한 예시입니다.",
+                    action: { label: "자세히 보기", onClick: () => undefined },
+                    closeButton: true,
+                  })
+                }
+              >
+                Long message
+              </Trigger>
+              <Trigger onClick={() => toast.dismiss()}>Dismiss all</Trigger>
+            </div>
+          ),
+        },
+      ].filter((s) => ids.includes(s.id))}
+    />
+  )
+}
+
+const meta = { title: "Components/Feedback/Sonner", component: Toaster, parameters: { layout: "padded" } } satisfies Meta<typeof Toaster>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: buttons create real toasts through Sonner (types, action / cancel, close, promise, stack, long message).
+export const All: Story = {
+  name: "Sonner",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Sonner"
+        description="작업 결과를 잠시 띄우는 Toast 알림입니다. 실제 Sonner API(toast)로 만들며, Toaster는 앱 루트에 한 번 둡니다."
+      />
+      <StorySection title="Variants" description="버튼을 눌러 각 유형의 Toast를 띄웁니다.">
+        <Board ids={["types"]} />
+      </StorySection>
+      <StorySection title="Usage" description="Action / Cancel / Close, Promise, 여러 개 쌓기와 긴 메시지입니다.">
+        <Board ids={["action", "promise", "stack"]} />
+      </StorySection>
+    </StoryPage>
+  ),
+}
diff --git a/src/components/story-board.tsx b/src/components/story-board.tsx
new file mode 100644
index 0000000..33fc5ce
--- /dev/null
+++ b/src/components/story-board.tsx
@@ -0,0 +1,36 @@
+import { useContext, type CSSProperties, type ReactNode } from "react"
+import { StorySectionContext } from "./story-page"
+
+// Representative-Story layout used by component review pages (ui_viz StateBoard): labeled sections on one page.
+// It only arranges examples; it never styles the component being reviewed.
+// `note` is a Story note, not Product UI. It sits under the title by default; `noteAfter` places it below the specimen
+// (Title → actual UI → Story note) for specimens whose Label/Control must stay directly under the title.
+export type BoardState = { id: string; label: string; note?: string; noteAfter?: boolean; wide?: boolean; children: ReactNode }
+
+// `fixed` uses columns of exactly `min` px instead of stretching them (1fr). Specimens whose popup is anchored to a Radix
+// trigger need whole-pixel columns: a fractional column (e.g. 358.4px) puts the trigger edge between device pixels while the
+// popper rounds the popup to whole pixels, so the two outlines end up 1px apart.
+export function StateBoard({ states, min = 320, fixed = false }: { states: BoardState[]; min?: number; fixed?: boolean }) {
+  // Inside a StorySection the labels sit one heading level below the section title.
+  const Label = useContext(StorySectionContext) ? "h3" : "h2"
+  return (
+    <div
+      className={`grid items-start gap-x-6 gap-y-10 ${fixed ? "[grid-template-columns:repeat(auto-fill,min(100%,var(--sb-state-min,320px)))]" : "[grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sb-state-min,320px)),1fr))]"}`}
+      style={{ "--sb-state-min": `${min}px` } as CSSProperties}
+    >
+      {states.map(({ id, label, note, noteAfter, wide, children }) => (
+        <section
+          className={`grid min-w-0 content-start gap-3${wide ? " col-span-full" : ""}`}
+          key={id}
+          data-overview-state={id}
+          aria-label={label}
+        >
+          <Label className="border-b border-black/10 pb-2 text-sm font-medium text-muted-foreground">{label}</Label>
+          {note && !noteAfter ? <p className="text-sm text-muted-foreground">{note}</p> : null}
+          {children}
+          {note && noteAfter ? <p className="text-sm text-muted-foreground">{note}</p> : null}
+        </section>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/story-page.css b/src/components/story-page.css
new file mode 100644
index 0000000..3765eef
--- /dev/null
+++ b/src/components/story-page.css
@@ -0,0 +1,63 @@
+/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
+   Inner (max 1280, gutter 16–40) and title (kicker 12 / title 28·36·700 / description, underlined) reuse Foundation / Color.
+   Section reuses the Center Graphic / 교량 split: heading + description, a divider, then the specimen. */
+.sb-page {
+  --sb-page-max-width: 1280px;
+  --sb-page-gutter: clamp(16px, 3vw, 40px);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding-block: var(--sb-page-gutter);
+  font-family: var(--hm-font-family-base);
+  color: var(--hm-sem-fg-primary);
+}
+.sb-page > .sb-page-inner {
+  box-sizing: border-box;
+  /* Keep the established content width: the 1280px envelope includes both gutters. */
+  width: calc(min(100%, var(--sb-page-max-width)) - 2 * var(--sb-page-gutter));
+  min-width: 0;
+  margin-inline: auto;
+}
+
+.sb-page .sb-page-header {
+  padding-bottom: 24px;
+  border-bottom: 1px solid var(--hm-sem-stroke-input-default);
+  font-size: var(--hm-label-font-size);
+  line-height: var(--hm-label-line-height);
+  overflow-wrap: anywhere;
+}
+.sb-page .sb-page-header .sb-page-kicker {
+  margin: 0 0 12px;
+  color: var(--hm-sem-fg-secondary);
+  font-size: var(--hm-button-font-size-sm);
+  font-weight: var(--hm-font-weight-bold);
+}
+.sb-page .sb-page-header .sb-page-title {
+  margin: 8px 0 12px;
+  font-size: var(--hm-page-header-title-font-size);
+  line-height: var(--hm-page-header-title-line-height);
+  font-weight: var(--hm-page-header-title-font-weight);
+}
+.sb-page .sb-page-header .sb-page-description { margin: 0 0 12px; font-weight: var(--hm-input-font-weight); }
+
+.sb-page .sb-page-section { margin-top: 32px; scroll-margin-top: 16px; }
+.sb-page .sb-page-section-header {
+  padding-bottom: 12px;
+  margin-bottom: 16px;
+  border-bottom: 1px solid var(--hm-sem-stroke-input-default);
+  overflow-wrap: anywhere;
+}
+.sb-page .sb-page-section-header .sb-page-section-title {
+  margin: 0;
+  font-size: var(--hm-card-title-font-size);
+  line-height: var(--hm-card-title-line-height);
+  font-weight: var(--hm-card-title-font-weight);
+}
+.sb-page .sb-page-section-header .sb-page-section-description {
+  margin: 4px 0 0;
+  color: var(--hm-sem-fg-secondary);
+  font-size: var(--hm-label-font-size);
+  line-height: var(--hm-label-line-height);
+  font-weight: var(--hm-input-font-weight);
+}
+.sb-page .sb-page-section-body { min-width: 0; }
diff --git a/src/components/story-page.tsx b/src/components/story-page.tsx
new file mode 100644
index 0000000..c933ba4
--- /dev/null
+++ b/src/components/story-page.tsx
@@ -0,0 +1,56 @@
+import { createContext, type ReactNode } from "react"
+import "./story-page.css"
+
+// Storybook presentation only (not part of @hm-design/ui): the common frame of a representative Story page.
+// Page → Header (title, description) → Sections (title, description, specimen). It never styles the component being reviewed.
+// Inner and title follow Foundation / Color; the section header → content split follows Center Graphic / 교량.
+// A Story using it sets `parameters.layout: "fullscreen"` so the page owns its inner padding.
+
+// Lets StateBoard render its specimen labels one level below the section heading.
+export const StorySectionContext = createContext(false)
+
+export function StoryPage({ className, children }: { className?: string; children: ReactNode }) {
+  return <div className={className ? `sb-page ${className}` : "sb-page"}><div className="sb-page-inner">{children}</div></div>
+}
+
+export function StoryPageHeader({ kicker, title, description }: { kicker: string; title: string; description?: ReactNode }) {
+  return (
+    <header className="sb-page-header">
+      <p className="sb-page-kicker">{kicker}</p>
+      <h1 className="sb-page-title">{title}</h1>
+      {description ? <p className="sb-page-description">{description}</p> : null}
+    </header>
+  )
+}
+
+// Headings and specimens share StoryPage's single Inner. Wide specimens own their local scroll frame.
+export function StorySection({
+  title,
+  description,
+  id,
+  children,
+}: {
+  title: string
+  description?: ReactNode
+  id?: string
+  children: ReactNode
+}) {
+  return (
+    <section className="sb-page-section" id={id} aria-label={title}>
+      <header className="sb-page-section-header">
+        <h2 className="sb-page-section-title">{title}</h2>
+        {description ? <p className="sb-page-section-description">{description}</p> : null}
+      </header>
+      <StorySectionContext.Provider value>
+        <div className="sb-page-section-body">{children}</div>
+      </StorySectionContext.Provider>
+    </section>
+  )
+}
+
+export const STORY_KICKER = {
+  foundation: "HM DESIGN SYSTEM / FOUNDATION",
+  components: "HM DESIGN SYSTEM / COMPONENTS",
+  patterns: "HM DESIGN SYSTEM / PATTERNS",
+  center: "HM DESIGN SYSTEM / CENTER GRAPHIC",
+} as const
diff --git a/src/components/switch.stories.tsx b/src/components/switch.stories.tsx
new file mode 100644
index 0000000..c5bcbc5
--- /dev/null
+++ b/src/components/switch.stories.tsx
@@ -0,0 +1,87 @@
+import { useId, useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Label, Switch } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) {
+  const id = useId()
+  return (
+    <div className="flex items-center gap-2">
+      {children(id)}
+      <Label htmlFor={id}>{label}</Label>
+    </div>
+  )
+}
+
+function Controlled() {
+  const [on, setOn] = useState(false)
+  return <Option label={`Notifications (${on ? "on" : "off"})`}>{(id) => <Switch id={id} checked={on} onCheckedChange={setOn} />}</Option>
+}
+
+const meta = {
+  title: "Components/Form/Switch",
+  component: Switch,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 트랙 36×20, 썸 16, On은 state-active, Off는 stroke 색. ui-viz에는 Switch 규격이 없어 참고만 했습니다. Radix Switch의 role=switch, 키보드, 접근성과 shadcn 기본 transition을 유지합니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof Switch>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Switch",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Switch"
+        description="설정을 즉시 켜고 끄는 컨트롤입니다. 트랙 36×20, 썸 16이며 On은 state-active 색입니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          min={240}
+          states={[
+            { id: "off", label: "Off", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
+            { id: "on", label: "On", children: <Option label="Option">{(id) => <Switch id={id} defaultChecked />}</Option> },
+            { id: "interactive", label: "Controlled · click toggles", children: <Controlled /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="States">
+        <StateBoard
+          min={240}
+          states={[
+            { id: "hover", label: "Hover", noteAfter: true, note: "Black 20% overlay. 포인터를 올려 확인합니다.", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
+            { id: "focus", label: "Focus", children: <Option label="Option">{(id) => <Switch id={id} />}</Option> },
+            {
+              id: "disabled",
+              label: "Disabled",
+              children: (
+                <div className="grid gap-3">
+                  <Option label="Off">{(id) => <Switch id={id} disabled />}</Option>
+                  <Option label="On">{(id) => <Switch id={id} disabled defaultChecked />}</Option>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+  play: async ({ canvasElement }) => {
+    // preventScroll: the page opens at its header, not at the States section.
+    canvasElement.querySelector<HTMLButtonElement>('[data-overview-state="focus"] [role="switch"]')?.focus({ preventScroll: true })
+  },
+}
+
+export const Off: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Switch id={id} />}</Option> }
+export const On: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Switch id={id} defaultChecked />}</Option> }
+export const Disabled: Story = { tags: ["verification"], render: () => <Option label="Option">{(id) => <Switch id={id} disabled defaultChecked />}</Option> }
diff --git a/src/components/table.stories.tsx b/src/components/table.stories.tsx
new file mode 100644
index 0000000..59e4d1c
--- /dev/null
+++ b/src/components/table.stories.tsx
@@ -0,0 +1,170 @@
+import { useState, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Badge, Checkbox, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Table is a static display primitive, so the representative Story is a board of specimens. Checkbox and Badge appear only as
+// cell content (Story composition); Table has no dependency on them and no selection, sorting or paging behavior.
+// The Story keeps the selected rows in local state and passes `data-state="selected"` itself.
+
+const projects = [
+  { id: "P-001", name: "한맥 노선 정비", status: "진행", amount: 1280000 },
+  { id: "P-002", name: "시설물 점검 리포트", status: "완료", amount: 450000 },
+  { id: "P-003", name: "교량 안전 진단", status: "대기", amount: 9800000 },
+]
+const won = (n: number) => n.toLocaleString("ko-KR")
+
+function BasicTable() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>번호</TableHead>
+          <TableHead>프로젝트</TableHead>
+          <TableHead>상태</TableHead>
+          <TableHead className="text-right">금액</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {projects.map((p) => (
+          <TableRow key={p.id}>
+            <TableCell>{p.id}</TableCell>
+            <TableCell>{p.name}</TableCell>
+            <TableCell>
+              <Badge>{p.status}</Badge>
+            </TableCell>
+            <TableCell className="text-right">{won(p.amount)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>합계</TableCell>
+          <TableCell className="text-right">{won(projects.reduce((s, p) => s + p.amount, 0))}</TableCell>
+        </TableRow>
+      </TableFooter>
+      <TableCaption>프로젝트별 계약 금액(원)</TableCaption>
+    </Table>
+  )
+}
+
+function SelectableTable() {
+  const [selected, setSelected] = useState<string[]>(["P-002"])
+  const toggle = (id: string) => setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]))
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-10">
+            <Checkbox
+              aria-label="전체 선택"
+              checked={selected.length === projects.length ? true : selected.length ? "indeterminate" : false}
+              onCheckedChange={(v) => setSelected(v ? projects.map((p) => p.id) : [])}
+            />
+          </TableHead>
+          <TableHead>프로젝트</TableHead>
+          <TableHead className="text-right">금액</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {projects.map((p) => (
+          <TableRow key={p.id} data-state={selected.includes(p.id) ? "selected" : undefined}>
+            <TableCell>
+              <Checkbox aria-label={`${p.name} 선택`} checked={selected.includes(p.id)} onCheckedChange={() => toggle(p.id)} />
+            </TableCell>
+            <TableCell>{p.name}</TableCell>
+            <TableCell className="text-right">{won(p.amount)}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+
+function LongTextTable() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>제목</TableHead>
+          <TableHead>비고</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>긴 텍스트는 셀 안에서 줄바꿈되고 행 높이만 늘어납니다. 공백 없는 문자열도 열 폭을 밀어내지 않습니다.</TableCell>
+          <TableCell>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>짧은 행</TableCell>
+          <TableCell>-</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
+
+function WideTable() {
+  const cols = Array.from({ length: 10 }, (_, i) => `컬럼 ${i + 1}`)
+  return (
+    <Table style={{ minWidth: 1100 }}>
+      <TableHeader>
+        <TableRow>
+          {cols.map((c) => (
+            <TableHead key={c}>{c}</TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: 3 }, (_, r) => (
+          <TableRow key={r}>
+            {cols.map((c) => (
+              <TableCell key={c}>{`값 ${r + 1}-${c.slice(3)}`}</TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+
+const box = (node: ReactNode) => <div style={{ width: "100%", maxWidth: 720, minWidth: 0 }}>{node}</div>
+
+const sections = [
+  { id: "basic", label: "Basic + Badge + numeric + footer + caption", node: <BasicTable /> },
+  { id: "selected", label: "Selected row", note: "Checkbox와 data-state=\"selected\"는 Story가 조합합니다(Table에는 선택 로직이 없음)", node: <SelectableTable /> },
+  { id: "long", label: "Long text", node: <LongTextTable /> },
+  { id: "wide", label: "Horizontal overflow", note: "container가 가로로 scroll 하고 페이지는 밀리지 않습니다", node: <WideTable /> },
+]
+
+const meta = { title: "Components/Data & Display/Table", component: Table, parameters: { layout: "padded" } } satisfies Meta<typeof Table>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={460} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, note: s.note, wide: true, children: box(s.node) }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Table",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Table"
+        description="행과 열로 데이터를 보여주는 정적 표시 primitive입니다. 정렬·선택·페이지 로직은 Data Table Pattern이 담당합니다."
+      />
+      <StorySection title="Overview">{board("basic")}</StorySection>
+      <StorySection title="States">{board("selected")}</StorySection>
+      <StorySection title="Usage" description="긴 텍스트와 가로 넘침입니다.">{board("long", "wide")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Basic: Story = { tags: ["verification"], render: () => box(<BasicTable />) }
+export const Selected: Story = { tags: ["verification"], render: () => box(<SelectableTable />) }
+export const LongText: Story = { tags: ["verification"], name: "Long Text", render: () => box(<LongTextTable />) }
+export const Overflow: Story = { tags: ["verification"], name: "Horizontal Overflow", render: () => box(<WideTable />) }
diff --git a/src/components/tabs.stories.tsx b/src/components/tabs.stories.tsx
new file mode 100644
index 0000000..ab15eab
--- /dev/null
+++ b/src/components/tabs.stories.tsx
@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import type { ComponentProps } from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Representative "Tabs" Story shows default Primary, explicit API comparisons and Secondary; Legacy stays verification-only.
+// Selected connects to the content surface, so every specimen puts the Tabs on a plain bordered panel supplied by the consumer
+// (TabsContent here). The panel is layout, not part of Tabs.
+
+type Variant = "primary" | "secondary"
+type ListProps = Pick<ComponentProps<typeof TabsList>, "fill" | "panelSurface">
+
+// Primary = Fill + panelSurface="content", Secondary = Fill + panelSurface="surface" (2026-10-06 사용자 결정).
+const variantProps = {
+  primary: { listProps: {}, panel: "border bg-background" },
+  secondary: { listProps: { fill: true, panelSurface: "surface" }, panel: "border bg-card" },
+} as const
+
+function Specimen({
+  variant = "primary",
+  defaultValue = "menu2",
+  disabledSecond,
+  count = 3,
+  labels,
+  listProps,
+}: {
+  variant?: Variant
+  defaultValue?: string
+  disabledSecond?: boolean
+  count?: number
+  labels?: string[]
+  listProps?: ListProps
+}) {
+  const { listProps: defaults, panel } = variantProps[variant]
+  const items = labels?.map((label, i) => ({ value: `menu${i + 1}`, label }))
+    ?? Array.from({ length: count }, (_, i) => ({ value: `menu${i + 1}`, label: `메뉴 ${i + 1}` }))
+  return (
+    <Tabs defaultValue={defaultValue}>
+      <TabsList aria-label="업무 필터" {...(listProps ?? defaults)}>
+        {items.map(({ value, label }, i) => (
+          <TabsTrigger key={value} value={value} disabled={disabledSecond && i === 1}>
+            {label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {items.map(({ value }, i) => (
+        <TabsContent key={value} value={value} className={`rounded-b p-4 text-sm ${panel}`}>
+          메뉴 {i + 1} 콘텐츠
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}
+
+const longLabels = ["기본 정보", "보상 협의 및 계약 진행 현황", "토지 및 지장물 조사 내역"]
+
+function LongLabelSpecimens() {
+  return (
+    <div className="grid min-w-0 max-w-full gap-5">
+      <div className="min-w-0">
+        <p className="mb-2 text-xs text-muted-foreground">짧은 label</p>
+        <div className="w-full min-w-0 max-w-sm"><Specimen defaultValue="menu1" /></div>
+      </div>
+      <div className="min-w-0">
+        <p className="mb-2 text-xs text-muted-foreground">긴 label 1개</p>
+        <div className="w-full min-w-0 max-w-lg"><Specimen labels={["기본 정보", longLabels[1], "조사 내역"]} /></div>
+      </div>
+      <div className="min-w-0">
+        <p className="mb-2 text-xs text-muted-foreground">긴 label 여러 개</p>
+        <div className="w-full min-w-0 max-w-2xl"><Specimen labels={longLabels} /></div>
+      </div>
+      <div className="min-w-0">
+        <p className="mb-2 text-xs text-muted-foreground">좁은 container · nowrap · overflow controls</p>
+        <div className="w-full min-w-0 max-w-[260px]"><Specimen labels={longLabels} /></div>
+      </div>
+    </div>
+  )
+}
+
+const meta = {
+  title: "Components/Navigation/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "기본 TabsList는 Primary(fill=true, panelSurface=\"content\")입니다. 대표 Story는 기본 API와 명시적 Primary, Secondary(fill + panelSurface=\"surface\"), Primary Overflow를 비교합니다. Legacy non-fill은 fill={false}로 유지하며 숨김 Compatibility에서 확인합니다. 높이 34, 좌우 16, 상단 radius 4, 16/24/700과 8px 곡선 연결은 기존 값 그대로입니다. Selected는 패널 배경과 이어지고 Hover는 비선택에만 Black 20%입니다. 넘칠 때만 이전/다음 이동 버튼이 나타납니다. 곡선 반경 8px과 비선택 합성색의 과거 REVIEW / TEMPORARY 이력은 유지합니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof Tabs>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Tabs",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Tabs"
+        description="같은 영역의 콘텐츠를 전환하는 탭입니다. 선택된 탭은 하단으로 콘텐츠 면과 이어지며, 넘칠 때만 이전/다음 이동 버튼이 나타납니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          states={[
+            { id: "primary", label: "Primary · 기본 TabsList", noteAfter: true, note: "fill / panelSurface 생략 → Primary. 선택 면이 위 White → 아래 content panel색 gradient로 콘텐츠와 이어집니다. 비선택 탭에 hover하면 Black 20% overlay가 적용됩니다.", children: <Specimen /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Default API">
+        <StateBoard
+          states={[
+            { id: "primary-fill", label: "Primary · TabsList fill", noteAfter: true, note: "panelSurface 생략 → content. 기본 TabsList와 같은 Primary입니다.", children: <Specimen listProps={{ fill: true }} /> },
+            { id: "primary-explicit", label: "Primary · fill + panelSurface content", noteAfter: true, note: "두 Props를 명시해도 기본 API와 같은 Primary입니다.", children: <Specimen listProps={{ fill: true, panelSurface: "content" }} /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Variants">
+        <StateBoard
+          states={[
+            { id: "secondary", label: "Secondary · Fill + panelSurface surface", noteAfter: true, note: "서브형. Surface(White) 위에서 사용하며 선택 면이 White로 이어집니다.", children: <Specimen variant="secondary" /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="States">
+        <StateBoard
+          states={[
+            { id: "overflow", label: "Overflow · Primary + 이동 버튼", noteAfter: true, note: "Primary Tabs에 탭이 많거나 가용 폭이 좁으면 이전/다음 이동 버튼이 나타납니다. 버튼은 선택을 바꾸지 않고 목록만 한 항목씩 이동합니다. 260px 폭은 Story wrapper의 검증 폭이며 Tabs 자체 폭이 아닙니다.", children: <div className="max-w-[260px]"><Specimen count={8} /></div> },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Verification: Primary 기준 상태와 Secondary 비교. Secondary도 같은 CSS 경로를 쓴다.
+export const Secondary: Story = { tags: ["verification"], render: () => <div className="max-w-md"><Specimen variant="secondary" /></div> }
+export const SelectedFirst: Story = { tags: ["verification"], name: "Selected First", render: () => <div className="max-w-md"><Specimen defaultValue="menu1" /></div> }
+export const SelectedLast: Story = { tags: ["verification"], name: "Selected Last", render: () => <div className="max-w-md"><Specimen defaultValue="menu3" /></div> }
+export const Focus: Story = {
+  tags: ["verification"],
+  render: () => <div className="max-w-md"><Specimen /></div>,
+  play: async ({ canvasElement }) => canvasElement.querySelector<HTMLButtonElement>('[role="tab"][data-state="active"]')?.focus(),
+}
+export const Disabled: Story = { tags: ["verification"], render: () => <div className="max-w-md"><Specimen disabledSecond /></div> }
+export const Overflow: Story = { tags: ["verification"], render: () => <div className="max-w-[260px]"><Specimen count={8} /></div> }
+export const SecondaryOverflow: Story = { tags: ["verification"], name: "Secondary Overflow", render: () => <div className="max-w-[260px]"><Specimen variant="secondary" count={8} /></div> }
+export const LongLabel: Story = { tags: ["verification"], name: "Long Label", render: () => <LongLabelSpecimens /> }
+
+export const Compatibility: Story = {
+  tags: ["verification"],
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader kicker="VERIFICATION ONLY" title="Tabs Compatibility" description="Legacy non-fill은 OLD_TEST_ONLY / REMOVE_CANDIDATE 이력을 보존하며 명시적으로 사용할 수 있습니다. 사용자 별도 승인 없이 삭제하지 않습니다." />
+      <StorySection title="Legacy non-fill">
+        <StateBoard states={[
+          { id: "legacy", label: "TabsList fill={false}", noteAfter: true, note: "panelSurface 기본 content는 non-fill 시각에 영향을 주지 않습니다. 패널은 기존 White surface를 유지합니다.", children: <Specimen variant="secondary" listProps={{ fill: false }} /> },
+          { id: "legacy-surface", label: "TabsList fill={false} panelSurface surface", noteAfter: true, note: "이전 기본값을 모두 명시한 경우에도 같은 Legacy 디자인입니다.", children: <Specimen variant="secondary" listProps={{ fill: false, panelSurface: "surface" }} /> },
+        ]} />
+      </StorySection>
+      <StorySection title="Explicit panelSurface">
+        <StateBoard states={[
+          { id: "surface-only", label: "TabsList panelSurface surface", noteAfter: true, note: "fill 생략 → true이므로 Secondary가 됩니다.", children: <Specimen variant="secondary" listProps={{ panelSurface: "surface" }} /> },
+        ]} />
+      </StorySection>
+    </StoryPage>
+  ),
+}
diff --git a/src/components/textarea.stories.tsx b/src/components/textarea.stories.tsx
new file mode 100644
index 0000000..5448f38
--- /dev/null
+++ b/src/components/textarea.stories.tsx
@@ -0,0 +1,192 @@
+import { useId, type ComponentProps, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Textarea } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Story structure follows Input: one representative "Textarea" Story shows every state on one page; the same specimens
+// also exist as separate Stories tagged `verification`, hidden from the sidebar by default (see .storybook/main.ts).
+// ui_viz docs/components/textarea.md §6 Reference Viewer: Default, Hover, Focus, Error, Error + Focus, Readonly, Disabled and Multiline.
+//
+// Label, Required star and Helper/Error message are not part of the Textarea component. Specimen composes them with plain
+// elements and shadcn Token utilities, the way a consumer would: Label 14/20/500 and Helper 12/18/400 in the secondary
+// text color, Error message 11/18 in the destructive color, field gap 8.
+
+function Specimen({
+  label = "Description",
+  message,
+  error,
+  required,
+  id,
+  ...textarea
+}: ComponentProps<typeof Textarea> & { label?: string; message?: string; error?: boolean }) {
+  const uid = useId()
+  const fieldId = id ?? `textarea-${uid}`
+  const messageId = `${fieldId}-message`
+  return (
+    <div className="grid gap-2">
+      <label htmlFor={fieldId} className="justify-self-start text-sm font-medium text-muted-foreground">
+        {label}
+        {required ? (
+          <span aria-hidden="true" className="text-destructive">
+            {" *"}
+          </span>
+        ) : null}
+      </label>
+      <Textarea
+        id={fieldId}
+        required={required}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={message ? messageId : undefined}
+        {...textarea}
+      />
+      {message ? (
+        <p id={messageId} className={error ? "text-[11px] leading-[18px] text-destructive" : "text-xs leading-[18px] text-muted-foreground"}>
+          {message}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+const narrow = (children: ReactNode) => <div className="max-w-sm">{children}</div>
+const placeholder = "Enter a description"
+const multiline = "First line\nSecond line keeps its line break.\nThird line."
+
+const hoverNote = "Hover는 Default와 같습니다(사용자 결정 TEXTAREA-05). 포인터를 올려도 면, 테두리, 글자색이 바뀌지 않습니다."
+const readonlyNote =
+  "Readonly는 Default의 면, 테두리, typography를 유지하고 흐리게 표시하지 않습니다. 값 변경은 막고 선택·복사는 허용하며 resize 표시가 없습니다."
+
+const meta = {
+  title: "Components/Form/Textarea",
+  component: Textarea,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "ui_viz docs/components/textarea.md: 최소 높이 112px, 안쪽 여백 8/12px(Textarea 한정 owner 승인, SCOPED_DESIGN_APPROVAL), 값 16/24/400, resize는 기본 vertical. Focus와 Error는 1.5px 테두리로 구분하며 shadow·glow를 쓰지 않습니다. Hover는 Default와 같습니다. Label·Helper·Error 문구는 Textarea가 아니라 소비 조합입니다. size 체계는 없습니다.",
+      },
+    },
+  },
+  argTypes: {
+    resize: {
+      control: "inline-radio",
+      options: ["vertical", "none", "both"],
+      description: "기본 vertical. Readonly에서는 항상 none.",
+    },
+  },
+} satisfies Meta<typeof Textarea>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: every state on one page. Focus is placed by the play function. Named after the component, as in ui_viz.
+export const All: Story = {
+  name: "Textarea",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Textarea"
+        description="여러 줄 텍스트를 입력하는 컨트롤입니다. 최소 높이 112px, resize 기본 vertical이며 size 체계는 없습니다. Label·Helper·Error 문구는 소비 조합입니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard states={[{ id: "default", label: "Default", children: <Specimen placeholder={placeholder} /> }]} />
+      </StorySection>
+      <StorySection title="States" description="Focus는 1.5px 테두리로 구분하며 shadow·glow를 쓰지 않습니다. Hover는 Default와 같습니다.">
+        <StateBoard
+          states={[
+            { id: "hover", label: "Hover (= Default)", note: hoverNote, noteAfter: true, children: <Specimen defaultValue="Hover over this field" /> },
+            { id: "focus", label: "Focus", children: <Specimen placeholder={placeholder} /> },
+            { id: "readonly", label: "Readonly", note: readonlyNote, noteAfter: true, children: <Specimen readOnly defaultValue="Confirmed description" /> },
+            { id: "disabled", label: "Disabled", children: <Specimen disabled defaultValue="Unavailable description" /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Validation" description="aria-invalid로 Error 테두리를 표시하고, 오류 문구는 소비 조합으로 연결합니다.">
+        <StateBoard
+          states={[
+            { id: "error", label: "Error", children: <Specimen error defaultValue="Invalid value" /> },
+            { id: "error-message", label: "Error Message", children: <Specimen error message="설명을 입력하세요." /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="줄바꿈 유지와 resize 해제입니다.">
+        <StateBoard
+          states={[
+            { id: "multiline", label: "Multiline · Wrap", children: <Specimen defaultValue={multiline} /> },
+            { id: "resize", label: "Resize · none", children: <Specimen resize="none" defaultValue="This field cannot be resized." /> },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+  play: async ({ canvasElement }) => {
+    // preventScroll: the page opens at its header, not at the States section.
+    canvasElement.querySelector<HTMLTextAreaElement>('[data-overview-state="focus"] textarea')?.focus({ preventScroll: true })
+  },
+}
+
+// Verification Stories: the same specimens as separate Stories, hidden from the sidebar (tag `verification`), reachable by URL or the sidebar tag filter.
+export const Default: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen placeholder={placeholder} />),
+}
+export const Focus: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen placeholder={placeholder} />),
+  play: async ({ canvasElement }) => canvasElement.querySelector("textarea")?.focus(),
+  parameters: { docs: { description: { story: "Focus는 실제로 focus를 받은 컨트롤에서만 보입니다. play 함수가 focus를 줍니다. Tab 또는 클릭으로도 확인합니다." } } },
+}
+export const Error: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen error defaultValue="Invalid value" />),
+}
+export const InvalidFocus: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen error defaultValue="Invalid value" />),
+  play: async ({ canvasElement }) => canvasElement.querySelector("textarea")?.focus(),
+}
+export const ErrorMessage: Story = {
+  tags: ["verification"],
+  name: "Error Message",
+  render: () => narrow(<Specimen error message="설명을 입력하세요." />),
+}
+export const Required: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen required />),
+}
+export const Readonly: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen readOnly defaultValue="Confirmed description" />),
+  parameters: { docs: { description: { story: readonlyNote } } },
+}
+export const Disabled: Story = {
+  tags: ["verification"],
+  render: () => narrow(<Specimen disabled defaultValue="Unavailable description" />),
+}
+export const LongContent: Story = {
+  tags: ["verification"],
+  name: "Long Content",
+  render: () =>
+    narrow(
+      <Specimen
+        defaultValue={Array.from({ length: 12 }, (_, i) => `Line ${i + 1}: a long value keeps its line order and scrolls inside the control.`).join("\n")}
+      />
+    ),
+}
+
+// HM only: not part of the ui_viz Textarea Stories. Tagged verification so the default sidebar keeps only the representative Story.
+export const Playground: Story = {
+  tags: ["verification"],
+  args: { resize: "vertical", placeholder, disabled: false, readOnly: false },
+  argTypes: {
+    placeholder: { control: "text" },
+    disabled: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    "aria-invalid": { control: "boolean" },
+    className: { table: { disable: true } },
+  },
+  render: (args) => narrow(<Specimen {...args} />),
+}
diff --git a/src/components/toggle-group.stories.tsx b/src/components/toggle-group.stories.tsx
new file mode 100644
index 0000000..9869655
--- /dev/null
+++ b/src/components/toggle-group.stories.tsx
@@ -0,0 +1,169 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"
+import { ToggleGroup, ToggleGroupItem } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Toggle Group is a group of pressed-state items (toolbar-style), not a content switcher (that is Tabs). The representative Story
+// shows single / multiple / icon-only / disabled / vertical / spaced groups with real controls; the same specimens also exist as
+// Stories tagged `verification` (hidden from the sidebar). Icon-only items carry an `aria-label`.
+
+function Single() {
+  const [value, setValue] = useState("left")
+  return (
+    <div className="grid gap-2">
+      <ToggleGroup type="single" variant="outline" value={value} onValueChange={(v) => v && setValue(v)} aria-label="정렬">
+        <ToggleGroupItem value="left">왼쪽</ToggleGroupItem>
+        <ToggleGroupItem value="center">가운데</ToggleGroupItem>
+        <ToggleGroupItem value="right">오른쪽</ToggleGroupItem>
+      </ToggleGroup>
+      <span className="text-sm text-muted-foreground" data-testid="single">{`value = ${value}`}</span>
+    </div>
+  )
+}
+
+function Multiple() {
+  const [value, setValue] = useState<string[]>(["bold"])
+  return (
+    <div className="grid gap-2">
+      <ToggleGroup type="multiple" variant="outline" value={value} onValueChange={setValue} aria-label="서식">
+        <ToggleGroupItem value="bold" aria-label="굵게">
+          <BoldIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="기울임">
+          <ItalicIcon />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="underline" aria-label="밑줄">
+          <UnderlineIcon />
+        </ToggleGroupItem>
+      </ToggleGroup>
+      <span className="text-sm text-muted-foreground" data-testid="multiple">{`value = [${value.join(", ")}]`}</span>
+    </div>
+  )
+}
+
+function Disabled() {
+  return (
+    <div className="grid gap-3">
+      <ToggleGroup type="single" variant="outline" defaultValue="a" disabled aria-label="비활성 그룹">
+        <ToggleGroupItem value="a">A</ToggleGroupItem>
+        <ToggleGroupItem value="b">B</ToggleGroupItem>
+      </ToggleGroup>
+      <ToggleGroup type="single" variant="outline" defaultValue="a" aria-label="비활성 항목">
+        <ToggleGroupItem value="a">A</ToggleGroupItem>
+        <ToggleGroupItem value="b" disabled>
+          B (비활성)
+        </ToggleGroupItem>
+        <ToggleGroupItem value="c">C</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  )
+}
+
+function Vertical() {
+  return (
+    <ToggleGroup type="single" variant="outline" orientation="vertical" defaultValue="left" aria-label="세로 정렬">
+      <ToggleGroupItem value="left" aria-label="왼쪽">
+        <AlignLeftIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="가운데">
+        <AlignCenterIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="오른쪽">
+        <AlignRightIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
+
+function Spaced() {
+  return (
+    <ToggleGroup type="multiple" variant="outline" spacing={2} aria-label="간격 있는 그룹">
+      <ToggleGroupItem value="a">첫째</ToggleGroupItem>
+      <ToggleGroupItem value="b">둘째</ToggleGroupItem>
+      <ToggleGroupItem value="c">셋째</ToggleGroupItem>
+    </ToggleGroup>
+  )
+}
+
+function Many() {
+  return (
+    <ToggleGroup type="multiple" variant="outline" spacing={1} className="flex-wrap" aria-label="많은 항목">
+      {Array.from({ length: 10 }, (_, i) => (
+        <ToggleGroupItem key={i} value={`${i}`}>{`옵션 ${i + 1}`}</ToggleGroupItem>
+      ))}
+    </ToggleGroup>
+  )
+}
+
+function Sizes() {
+  return (
+    <div className="grid gap-3">
+      {(["sm", "default", "lg"] as const).map((size) => (
+        <ToggleGroup key={size} type="multiple" size={size} variant="outline" aria-label={`${size} content kinds`}>
+          <ToggleGroupItem value="icon" aria-label={`${size} icon-only`}><BoldIcon /></ToggleGroupItem>
+          <ToggleGroupItem value="mixed"><BoldIcon />굵게</ToggleGroupItem>
+          <ToggleGroupItem value="text">{size}</ToggleGroupItem>
+        </ToggleGroup>
+      ))}
+    </div>
+  )
+}
+
+const sections = [
+  { id: "single", label: "Single selection", node: <Single /> },
+  { id: "multiple", label: "Multiple selection (icon-only)", node: <Multiple /> },
+  { id: "sizes", label: "Sizes · Icon-only / Icon + Text / Text-only", node: <Sizes /> },
+  { id: "disabled", label: "Disabled group / item", node: <Disabled /> },
+  { id: "vertical", label: "Vertical", node: <Vertical /> },
+  { id: "spaced", label: "spacing={2} (separated)", node: <Spaced /> },
+  { id: "many", label: "Many items (spacing + flex-wrap, consumer opts in)", node: <Many /> },
+]
+
+// No `component`: ToggleGroup props are a union (single | multiple), so Stories without args would not type-check.
+const meta = { title: "Components/Form/Toggle Group", parameters: { layout: "padded" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Toggle Group",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Toggle Group"
+        description="눌림 상태를 갖는 항목 묶음(툴바형)입니다. 내용을 전환하는 용도는 Tabs를 씁니다."
+      />
+      <StorySection title="Overview">{board("single")}</StorySection>
+      <StorySection title="Sizes" description="Icon-only / Icon + Text / Text-only.">
+        <Sizes />
+      </StorySection>
+      <StorySection title="Variants" description="다중 선택, 세로 방향, 항목 간격(spacing)입니다.">{board("multiple", "vertical", "spaced")}</StorySection>
+      <StorySection title="States">{board("disabled")}</StorySection>
+      <StorySection title="Usage">{board("many")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const SingleSelection: Story = { tags: ["verification"], name: "Single", render: () => <Single /> }
+export const MultipleSelection: Story = { tags: ["verification"], name: "Multiple", render: () => <Multiple /> }
+export const VerticalGroup: Story = { tags: ["verification"], name: "Vertical", render: () => <Vertical /> }
+
+export const ContentNodes: Story = {
+  tags: ["verification"],
+  render: () => (
+    <ToggleGroup type="multiple" variant="outline" aria-label="Content nodes">
+      <ToggleGroupItem value="array" aria-label="Array icon">{[<BoldIcon key="icon" />]}</ToggleGroupItem>
+      <ToggleGroupItem value="fragment" aria-label="Fragment icon"><><BoldIcon /></></ToggleGroupItem>
+      <ToggleGroupItem value="mixed"><><BoldIcon />굵게</></ToggleGroupItem>
+      <ToggleGroupItem value="span"><BoldIcon /><span>굵게</span></ToggleGroupItem>
+    </ToggleGroup>
+  ),
+}
diff --git a/src/components/toggle.stories.tsx b/src/components/toggle.stories.tsx
new file mode 100644
index 0000000..359f6c4
--- /dev/null
+++ b/src/components/toggle.stories.tsx
@@ -0,0 +1,140 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react"
+import { Toggle } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Toggle is a persistent pressed-state control. The representative Story shows each state with real, clickable toggles; the same
+// specimens also exist as Stories tagged `verification` (hidden from the sidebar). Icon-only toggles carry an `aria-label`.
+
+function OffOn() {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Toggle>Off</Toggle>
+      <Toggle defaultPressed>On</Toggle>
+      <Toggle variant="outline">Outline off</Toggle>
+      <Toggle variant="outline" defaultPressed>
+        Outline on
+      </Toggle>
+    </div>
+  )
+}
+
+function WithIcon() {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Toggle aria-label="굵게">
+        <BoldIcon />
+      </Toggle>
+      <Toggle aria-label="기울임" defaultPressed>
+        <ItalicIcon />
+      </Toggle>
+      <Toggle variant="outline">
+        <StarIcon />
+        즐겨찾기
+      </Toggle>
+    </div>
+  )
+}
+
+function Sizes() {
+  return (
+    <div className="grid gap-3">
+      {(["sm", "default", "lg"] as const).map((size) => (
+        <div key={size} data-toggle-size={size} className="flex flex-wrap items-center gap-3">
+          <Toggle size={size} variant="outline" aria-label={`${size} icon-only`}><StarIcon /></Toggle>
+          <Toggle size={size} variant="outline"><StarIcon />즐겨찾기</Toggle>
+          <Toggle size={size} variant="outline">{size}</Toggle>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function Disabled() {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <Toggle disabled>Disabled off</Toggle>
+      <Toggle disabled defaultPressed>
+        Disabled on
+      </Toggle>
+    </div>
+  )
+}
+
+function Controlled() {
+  const [pressed, setPressed] = useState(false)
+  return (
+    <div className="flex items-center gap-3">
+      <Toggle variant="outline" pressed={pressed} onPressedChange={setPressed}>
+        알림
+      </Toggle>
+      <span className="text-sm text-muted-foreground" data-testid="controlled">{`pressed = ${String(pressed)}`}</span>
+    </div>
+  )
+}
+
+// className extension: the consumer's width / rounded utilities win over the default look.
+function Extended() {
+  return (
+    <Toggle variant="outline" className="w-40 rounded-full">
+      w-40 rounded-full
+    </Toggle>
+  )
+}
+
+const sections = [
+  { id: "offon", label: "Off / On", node: <OffOn /> },
+  { id: "icon", label: "Icon-only and icon + text", node: <WithIcon /> },
+  { id: "sizes", label: "Sizes", node: <Sizes /> },
+  { id: "disabled", label: "Disabled", node: <Disabled /> },
+  { id: "controlled", label: "Controlled", node: <Controlled /> },
+  { id: "extended", label: "className extension", node: <Extended /> },
+]
+
+const meta = { title: "Components/Form/Toggle", component: Toggle, parameters: { layout: "padded" } } satisfies Meta<typeof Toggle>
+export default meta
+type Story = StoryObj<typeof meta>
+
+const board = (...ids: string[]) => (
+  <StateBoard min={360} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
+)
+
+// Representative Story: the common Story page; the sections group the same specimens.
+export const All: Story = {
+  name: "Toggle",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Toggle"
+        description="눌림(On) 상태를 유지하는 단일 버튼입니다."
+      />
+      <StorySection title="Overview">{board("offon")}</StorySection>
+      <StorySection title="Sizes">
+        <Sizes />
+      </StorySection>
+      <StorySection title="Variants" description="아이콘만, 아이콘 + 텍스트입니다.">{board("icon")}</StorySection>
+      <StorySection title="States">{board("disabled", "controlled")}</StorySection>
+      <StorySection title="Usage" description="className 확장입니다.">{board("extended")}</StorySection>
+    </StoryPage>
+  ),
+}
+
+export const States: Story = { tags: ["verification"], render: () => <OffOn /> }
+export const IconOnly: Story = { tags: ["verification"], name: "Icon Only", render: () => <WithIcon /> }
+export const DisabledToggle: Story = { tags: ["verification"], name: "Disabled", render: () => <Disabled /> }
+
+export const ContentNodes: Story = {
+  tags: ["verification"],
+  render: () => (
+    <div className="flex flex-wrap gap-3">
+      <Toggle aria-label="Array icon">{[<StarIcon key="icon" />]}</Toggle>
+      <Toggle aria-label="Fragment icon"><><StarIcon /></></Toggle>
+      <Toggle><><StarIcon />즐겨찾기</></Toggle>
+      <Toggle><StarIcon /><span>즐겨찾기</span></Toggle>
+    </div>
+  ),
+}
diff --git a/src/components/tooltip.stories.tsx b/src/components/tooltip.stories.tsx
new file mode 100644
index 0000000..6b52e96
--- /dev/null
+++ b/src/components/tooltip.stories.tsx
@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Tooltip is a Radix overlay (Portal) with short, non-interactive text. The representative Story shows real triggers
+// (hover or focus to open); the verification Story starts one open. Interactive content belongs in Popover / Hover Card.
+
+const longText = "긴 설명은 최대 폭에서 줄바꿈됩니다. 이 정도 길이가 Tooltip의 한계이며, 더 긴 내용은 Popover나 Hover Card를 사용합니다."
+
+function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Tooltip defaultOpen={defaultOpen}>
+      <TooltipTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          기본
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>저장하지 않은 변경 사항이 있습니다</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function Placements() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      {(["top", "right", "bottom", "left"] as const).map((side) => (
+        <Tooltip key={side}>
+          <TooltipTrigger asChild>
+            <Button variant="primary" appearance="outline" size="sm">
+              {side}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side={side}>{`side="${side}"`}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
+
+function LongText() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          긴 텍스트
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{longText}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function Disabled() {
+  // A disabled button gets no pointer events, so the trigger is a wrapper element.
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span tabIndex={0} className="inline-block">
+          <Button variant="primary" appearance="solid" disabled>
+            비활성
+          </Button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>권한이 없어 사용할 수 없습니다</TooltipContent>
+    </Tooltip>
+  )
+}
+
+const meta = { title: "Components/Overlay/Tooltip", component: Tooltip, parameters: { layout: "centered" } } satisfies Meta<typeof Tooltip>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Tooltip",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <TooltipProvider>
+      <StoryPage>
+        <StoryPageHeader
+          kicker={STORY_KICKER.components}
+          title="Tooltip"
+          description="짧고 상호작용 없는 설명을 띄우는 overlay입니다. Trigger에 포인터를 올리거나 포커스하면 열립니다."
+        />
+        <StorySection title="Overview" description="기본 Tooltip입니다.">
+          <Basic />
+        </StorySection>
+        <StorySection title="Variants" description="side: top / right / bottom / left.">
+          <Placements />
+        </StorySection>
+        <StorySection title="Usage" description="긴 문구는 줄바꿈됩니다. Disabled 버튼은 포인터 이벤트가 없으므로 감싼 요소를 Trigger로 씁니다.">
+          <div className="flex flex-wrap gap-3">
+            <LongText />
+            <Disabled />
+          </div>
+        </StorySection>
+      </StoryPage>
+    </TooltipProvider>
+  ),
+}
+
+export const Open: Story = {
+  tags: ["verification"],
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="flex min-h-[200px] items-end justify-center p-8">
+      <Basic defaultOpen />
+    </div>
+  ),
+}
diff --git a/src/exports/dashboard/dashboard-export.css b/src/exports/dashboard/dashboard-export.css
new file mode 100644
index 0000000..6c1c16c
--- /dev/null
+++ b/src/exports/dashboard/dashboard-export.css
@@ -0,0 +1,12 @@
+/* Export-only document defaults. Component and Story CSS are imported from the
+   existing React entry; this file must not recreate their visual language. */
+html,
+body,
+#root {
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  min-width: 320px;
+}
diff --git a/src/exports/dashboard/index.html b/src/exports/dashboard/index.html
new file mode 100644
index 0000000..025baed
--- /dev/null
+++ b/src/exports/dashboard/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>HM Design System · Dashboard Export</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/src/exports/dashboard/main.tsx b/src/exports/dashboard/main.tsx
new file mode 100644
index 0000000..917adc0
--- /dev/null
+++ b/src/exports/dashboard/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { DashboardScreen } from "@/patterns/dashboard-composition"
+import "@/index.css"
+import "@/hm-theme.css"
+import "@hm-design/ui/dashboard-status.css"
+import "./dashboard-export.css"
+
+const root = document.getElementById("root")
+
+if (!root) throw new Error("Dashboard export root was not found")
+
+createRoot(root).render(
+  <StrictMode>
+    <DashboardScreen mode="compact" />
+  </StrictMode>,
+)
diff --git a/src/foundation/color.stories.tsx b/src/foundation/color.stories.tsx
new file mode 100644
index 0000000..43400ed
--- /dev/null
+++ b/src/foundation/color.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { allColorProperties, componentColors, primitiveColors, semanticColors, type ColorReference } from "./reference-data"
+import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference"
+
+function ColorCards({ items, values }: { items: ColorReference[]; values: Record<string, string> }) {
+  return <div className="hm-foundation-grid">{items.map(item => <article className="hm-foundation-card" key={item.property} data-color-property={item.property}>
+    <div className="hm-foundation-swatch" data-color-swatch style={{ background: `var(${item.property})` }} />
+    <h3>{item.label}</h3><p>{item.usage}</p>
+    <dl><dt>CSS Variable</dt><dd><code>{item.property}</code></dd>
+      {item.runtimeKey && <><dt>Runtime Key</dt><dd><code>{item.runtimeKey}</code></dd></>}
+      <dt>Current Value</dt><dd data-current-value>{values[item.property] || "CSS 값을 읽는 중"}</dd>
+      <dt>{item.defaultValue ? "HM Default Value" : "Source Declaration"}</dt><dd><code>{item.defaultValue ?? item.declared}</code></dd>
+      {item.defaultValue && <><dt>Source Declaration</dt><dd><code>{item.declared}</code></dd></>}
+      <dt>Source</dt><dd>{item.source}</dd></dl>
+  </article>)}</div>
+}
+function ColorReferencePage() {
+  const values = useResolvedProperties(allColorProperties)
+  return <ReferencePage title="Color" intro="Primitive → Semantic → Component Mapping. 같은 색이라도 역할을 구분합니다. Swatch는 현재 CSS Variable을 사용하며 Theme Designer의 저장된 preview를 반영합니다.">
+    <nav className="hm-foundation-links" aria-label="Color sections"><a href="#primitive">Primitive</a><a href="#semantic">Semantic</a><a href="#component-mapping">Component Mapping</a></nav>
+    <ReferenceSection id="primitive" title="Primitive Palette" note="현재 primitives.css에 실제 정의된 색만 표시합니다. Primitive에는 공개 Runtime Key를 부여하지 않습니다."><ColorCards items={primitiveColors} values={values} /></ReferenceSection>
+    <ReferenceSection id="semantic" title="Semantic Role" note="공개 Runtime Key는 contract.ts에서 읽습니다. 내부 파생 CSS 값은 Runtime Key 없이 표시합니다. Gradient도 기존 HM CSS를 직접 사용합니다."><ColorCards items={semanticColors.filter(item => !item.runtimeKey?.startsWith("color.palette."))} values={values} /><details className="hm-foundation-details"><summary>Runtime Palette Aliases ({semanticColors.filter(item => item.runtimeKey?.startsWith("color.palette.")).length})</summary><ColorCards items={semanticColors.filter(item => item.runtimeKey?.startsWith("color.palette."))} values={values} /></details></ReferenceSection>
+    <ReferenceSection id="component-mapping" title="Component Mapping" note="대표 소비 관계입니다. 아래 변수는 내부 Component Mapping이며 공개 Runtime Key가 아닙니다. Source Declaration에서 연결된 Semantic 역할을 확인하세요."><ColorCards items={componentColors} values={values} /></ReferenceSection>
+  </ReferencePage>
+}
+const meta = { title: "Foundation/Color", parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+export const All: StoryObj<typeof meta> = { name: "Color", render: () => <ColorReferencePage /> }
diff --git a/src/foundation/foundation.css b/src/foundation/foundation.css
new file mode 100644
index 0000000..e4fd0cb
--- /dev/null
+++ b/src/foundation/foundation.css
@@ -0,0 +1,28 @@
+/* Storybook presentation only. All selectors stay inside the Foundation page.
+   Page inner, title and sections come from the common Story page (src/components/story-page.css); these rules style the reference content. */
+.hm-foundation {
+  font-size: var(--hm-label-font-size); line-height: var(--hm-label-line-height);
+  font-weight: var(--hm-input-font-weight); overflow-wrap: anywhere;
+}
+.hm-foundation *, .hm-foundation *::before, .hm-foundation *::after { box-sizing: border-box; }
+.hm-foundation h3 { margin: 0 0 8px; font-size: var(--hm-label-font-size); font-weight: var(--hm-font-weight-bold); }
+.hm-foundation p { margin: 0 0 12px; }
+.hm-foundation-note { color: var(--hm-sem-fg-secondary); }
+.hm-foundation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
+.hm-foundation-card, .hm-foundation-panel { min-width: 0; padding: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-container); background: var(--hm-sem-bg-surface); }
+.hm-foundation-swatch { height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-control-md); }
+.hm-foundation dl { margin: 16px 0 0; }
+.hm-foundation dt { margin-top: 8px; color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); }
+.hm-foundation dd { margin: 2px 0 0; min-width: 0; }
+.hm-foundation code { font-family: inherit; font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
+.hm-foundation-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; }
+.hm-foundation-links a { color: var(--hm-sem-action-primary); text-decoration: underline; }
+.hm-foundation-details { margin-top: 24px; }
+.hm-foundation-details summary { cursor: pointer; padding-block: 12px; font-weight: var(--hm-font-weight-bold); }
+.hm-foundation-specimens { display: grid; gap: 16px; }
+.hm-foundation-specimen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hm-sem-stroke-input-default); }
+.hm-foundation-specimen small { display: block; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); font-weight: var(--hm-input-font-weight); }
+.hm-foundation-spacing { max-width: 100%; height: 24px; margin-block: 12px; background: var(--hm-sem-state-active); }
+.hm-foundation-radius { width: 100%; height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-default); background: var(--hm-sem-bg-content); }
+.hm-foundation-layout-sample { display: grid; min-width: 0; background: var(--hm-sem-bg-content); border: 1px solid var(--hm-sem-stroke-input-default); }
+.hm-foundation-layout-card { min-width: 0; border: 1px solid var(--hm-card-border-color); border-radius: var(--hm-card-radius); background: var(--hm-card-surface); }
diff --git a/src/foundation/layout.stories.tsx b/src/foundation/layout.stories.tsx
new file mode 100644
index 0000000..0fa796a
--- /dev/null
+++ b/src/foundation/layout.stories.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { layoutProperties, radiusReferences, spacingReferences } from "./reference-data"
+import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference"
+
+function LayoutReferencePage() {
+  const values = useResolvedProperties(layoutProperties)
+  const [desktop, setDesktop] = useState(() => matchMedia("(min-width: 1024px)").matches)
+  useEffect(() => { const media = matchMedia("(min-width: 1024px)"); const update = () => setDesktop(media.matches); media.addEventListener("change", update); return () => media.removeEventListener("change", update) }, [])
+  return <ReferencePage title="Layout" intro="현재 HM의 responsive boundary와 컴포넌트별 layout geometry를 확인합니다. 전역 spacing scale이나 grid system을 새로 정의하지 않습니다.">
+    <ReferenceSection title="Responsive Boundary" note="CURRENT_STANDARD · gnb.css / lnb.css / dashboard-layout.css 및 GNB의 matchMedia 규칙에 근거합니다."><div className="hm-foundation-grid"><article className="hm-foundation-panel"><h3>≥ 1024px · Desktop</h3><p>Desktop Navigation · LNB 표시 · GNB desktop menu</p></article><article className="hm-foundation-panel"><h3>≤ 1023px · Mobile</h3><p>Mobile Navigation · LNB 숨김 · GNB mobile menu</p></article></div><p role="status">현재 preview: <strong>{desktop ? "Desktop" : "Mobile"}</strong> · GNB 높이 {values["--hm-gnb-height"]} · LNB track {values["--hm-lnb-width"]}</p><p className="hm-foundation-note">CSS는 min-width: 1024px / max-width: 1023px, GNB JS는 min-width: 1024px를 사용합니다. 표시는 기존 정수 QA 경계를 따릅니다.</p></ReferenceSection>
+    <ReferenceSection title="QA Reference Viewports" note="1280 / 390은 검증용 viewport이며 breakpoint token이 아닙니다."><div className="hm-foundation-grid"><div className="hm-foundation-panel"><h3>1280 × 900</h3><p>HM Desktop · QA reference</p></div><div className="hm-foundation-panel"><h3>390 × 844</h3><p>HM Mobile · QA reference</p></div></div><p className="hm-foundation-note">Boundary QA presets: 1024 × 900 / 1023 × 900</p></ReferenceSection>
+    <ReferenceSection title="Spacing · Current Usage Reference" note="전역 공식 spacing scale은 정의되어 있지 않습니다. 아래 변수는 각 pattern/component의 현재 사용값이며 동일한 숫자를 하나의 token으로 합치지 않습니다."><div className="hm-foundation-grid">{spacingReferences.map(([property, name, source]) => <article className="hm-foundation-card" key={property}><h3>{name}</h3><code>{property}</code><p data-layout-value>{values[property]}</p><div className="hm-foundation-spacing" style={{ width: `var(${property})` }} aria-hidden="true" /><p className="hm-foundation-note">packages/ui/src/theme/{source}</p></article>)}</div></ReferenceSection>
+    <ReferenceSection title="Radius" note="기존 default.css의 geometry variables입니다. 역할이 다른 같은 반경은 따로 표시합니다."><div className="hm-foundation-grid">{radiusReferences.map(property => <article className="hm-foundation-card" key={property}><div className="hm-foundation-radius" style={{ borderRadius: `var(${property})` }} /><code>{property}</code><p>{values[property]}</p></article>)}</div></ReferenceSection>
+    <ReferenceSection title="Layout / Container Reference" note="CURRENT_USAGE_REFERENCE · Dashboard의 가용 폭, 외곽 padding, 섹션 gap과 Card padding만 축소 specimen으로 보여줍니다."><div className="hm-foundation-layout-sample" style={{ padding: "var(--hm-dashboard-padding)", gap: "var(--hm-dashboard-gap)" }}><div className="hm-foundation-layout-card" style={{ padding: "var(--hm-card-padding)" }}><strong>Dashboard content</strong><p>가용 폭을 사용하며 긴 텍스트는 내부에서 줄바꿈합니다.</p></div><div className="hm-foundation-layout-card" style={{ padding: "var(--hm-card-padding)" }}>다음 섹션 · gap: {values["--hm-dashboard-gap"]}</div></div><p className="hm-foundation-note">Grid / Container: NOT_FORMALLY_DEFINED · 공용 column 수 / max-width token은 FOLLOW_UP. src/hm-theme.css의 .hm-container는 앱 데모의 로컬 사용 규칙입니다.</p></ReferenceSection>
+  </ReferencePage>
+}
+const meta = { title: "Foundation/Layout", parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+export const All: StoryObj<typeof meta> = { name: "Layout", render: () => <LayoutReferencePage /> }
diff --git a/src/foundation/reference-data.ts b/src/foundation/reference-data.ts
new file mode 100644
index 0000000..8af0126
--- /dev/null
+++ b/src/foundation/reference-data.ts
@@ -0,0 +1,65 @@
+import { runtimeThemeContract } from "@hm-design/ui/theme"
+import primitives from "../../packages/ui/src/theme/primitives.css?raw"
+import defaults from "../../packages/ui/src/theme/default.css?raw"
+import input from "../../packages/ui/src/theme/input.css?raw"
+import checkbox from "../../packages/ui/src/theme/checkbox.css?raw"
+import button from "../../packages/ui/src/theme/button.css?raw"
+import card from "../../packages/ui/src/theme/card.css?raw"
+
+// Read the existing source, rather than maintain a second palette in Storybook.
+export function declarations(source: string): Record<string, string> {
+  return Object.fromEntries([...source.matchAll(/^\s*(--[\w-]+):\s*([^;]+);/gm)].map(match => [match[1], match[2].trim()]))
+}
+export const defaultDeclarations = declarations(defaults)
+export type ColorReference = { property: string; label: string; source: string; declared: string; runtimeKey?: string; defaultValue?: string; usage: string }
+const label = (property: string) => property.replace(/^--hm-(sem-)?/, "").replaceAll("-", " ")
+const usages: Record<string, string> = {
+  "color.action.primary": "Primary 동작 · 현재 위치 · 내비게이션",
+  "color.state.active": "Checked / Selected / On 컨트롤의 면",
+  "color.on.state.active": "선택된 컨트롤의 글자와 아이콘",
+  "color.stroke.input.focus": "Input Focus · Select Open · 컨트롤 포커스 링",
+  "color.accent": "메뉴 · Calendar · Table 강조 면의 기준 색",
+  "color.bg.content": "콘텐츠 영역의 배경",
+  "color.bg.surface": "입력 · Card · Popup 표면",
+  "color.action.destructive": "오류 · Invalid · Destructive 동작",
+}
+export const primitiveColors: ColorReference[] = Object.entries(declarations(primitives)).map(([property, declared]) => ({ property, declared, label: label(property), source: "packages/ui/src/theme/primitives.css", usage: "색상 자체를 나타내는 내부 Primitive · Runtime Key 없음" }))
+const publicByProperty = new Map(Object.entries(runtimeThemeContract).map(([key, definition]) => [definition.property as string, { key, ...definition }]))
+export const semanticColors: ColorReference[] = Object.entries(defaultDeclarations).filter(([property]) => property.startsWith("--hm-sem-") && !/-(width|radius|shadow)$/.test(property)).map(([property, declared]) => {
+  const definition = publicByProperty.get(property)
+  return { property, declared, label: label(property), runtimeKey: definition?.key, defaultValue: definition?.defaultValue, source: "packages/ui/src/theme/default.css · contract.ts", usage: definition ? usages[definition.key] ?? (definition.key.startsWith("color.palette.") ? "Runtime에서 조정 가능한 palette alias · Primitive와 별도 계층" : definition.key.includes("stop.") ? "Gradient stop · 위치와 geometry는 기존 CSS가 소유" : "현재 Runtime Theme contract의 Semantic 역할") : "내부 Semantic / 파생 값 · 공개 Runtime Key 없음" }
+})
+const componentSources = { input, checkbox, button, card }
+const mappings = [
+  ["input", "--hm-input-background", "Input Background", "입력 표면"],
+  ["input", "--hm-input-focus-border-color", "Input Focus Border", "공통 Focus 역할을 사용하는 입력 테두리"],
+  ["input", "--hm-input-error-border-color", "Input Error Border", "Destructive 역할을 사용하는 오류 테두리"],
+  ["checkbox", "--hm-checkbox-checked-background", "Checkbox Checked Background", "Active 역할을 사용하는 선택 면"],
+  ["checkbox", "--hm-checkbox-indicator-color", "Checkbox Indicator", "On Active 역할을 사용하는 선택 아이콘"],
+  ["button", "--hm-button-outline-green-ink", "Button Primary Outline Ink", "Primary 역할을 사용하는 Outline 글자"],
+  ["button", "--hm-button-brand-green-background", "Button Brand Background", "기존 4-stop action surface gradient"],
+  ["card", "--hm-card-surface", "Card Surface", "Semantic Surface를 소비하는 Card 표면"],
+] as const
+export const componentColors: ColorReference[] = mappings.map(([component, property, name, usage]) => ({ property, label: name, usage, source: `packages/ui/src/theme/${component}.css`, declared: declarations(componentSources[component])[property] }))
+export const allColorProperties = [...primitiveColors, ...semanticColors, ...componentColors].map(item => item.property)
+
+// These are existing component-local metrics, not new Heading / Body tokens.
+export const typographyReferences = [
+  { label: "Page Header · title", source: "page-header.css", size: "--hm-page-header-title-font-size", line: "--hm-page-header-title-line-height", weight: "--hm-page-header-title-font-weight" },
+  { label: "Card · title", source: "card.css", size: "--hm-card-title-font-size", line: "--hm-card-title-line-height", weight: "--hm-card-title-font-weight" },
+  { label: "Page Header · description", source: "page-header.css", size: "--hm-page-header-description-font-size", line: "--hm-page-header-description-line-height" },
+  { label: "Label", source: "label.css", size: "--hm-label-font-size", line: "--hm-label-line-height", weight: "--hm-label-font-weight" },
+  ...["sm", "md", "lg"].map(size => ({ label: `Input · ${size}`, source: "input.css", size: `--hm-input-font-size-${size}`, line: `--hm-input-line-height-${size}`, weight: "--hm-input-font-weight" })),
+  ...["sm", "md", "lg"].map(size => ({ label: `Button Standard · ${size}`, source: "button.css", size: `--hm-button-font-size-${size}`, line: `--hm-button-line-height-${size}`, weight: "--hm-button-weight-standard" })),
+]
+export const typographyProperties = ["--hm-font-family-base", "--hm-font-weight-medium", "--hm-font-weight-bold", "--hm-card-title-font-weight", "--hm-input-font-weight", ...typographyReferences.flatMap(item => [item.size, item.line, ...(item.weight ? [item.weight] : [])])]
+export const spacingReferences = [
+  ["--hm-dashboard-padding", "Dashboard 외곽 여백", "dashboard-layout.css · Desktop 34px / Mobile 20px"],
+  ["--hm-dashboard-gap", "Dashboard 섹션 사이", "dashboard-layout.css"],
+  ["--hm-card-padding", "Card 안쪽 여백", "card.css"],
+  ["--hm-page-header-margin-bottom", "Page Header → 첫 콘텐츠", "page-header.css"],
+  ["--hm-gnb-join", "GNB → 콘텐츠 연결", "gnb.css"],
+  ["--hm-lnb-join", "LNB → 콘텐츠 연결", "lnb.css"],
+] as const
+export const radiusReferences = ["--hm-radius-control-md", "--hm-radius-button", "--hm-radius-input", "--hm-radius-select", "--hm-radius-container"]
+export const layoutProperties = [...spacingReferences.map(([property]) => property), ...radiusReferences, "--hm-gnb-height", "--hm-lnb-width"]
diff --git a/src/foundation/reference.tsx b/src/foundation/reference.tsx
new file mode 100644
index 0000000..14391c8
--- /dev/null
+++ b/src/foundation/reference.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState, type ReactNode } from "react"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import "./foundation.css"
+
+export function useResolvedProperties(properties: readonly string[]) {
+  const [values, setValues] = useState<Record<string, string>>({})
+  useEffect(() => {
+    let frame = 0
+    const read = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        const style = getComputedStyle(document.documentElement)
+        const next = Object.fromEntries(properties.map(property => [property, style.getPropertyValue(property).trim()]))
+        setValues(previous => properties.every(property => previous[property] === next[property]) ? previous : next)
+      })
+    }
+    read()
+    const observer = new MutationObserver(read)
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-hm-theme"] })
+    window.addEventListener("resize", read)
+    return () => { observer.disconnect(); window.removeEventListener("resize", read); cancelAnimationFrame(frame) }
+  }, [properties])
+  return values
+}
+
+// The page frame, title and sections are the common Story page (src/components/story-page.tsx); .hm-foundation styles the reference content.
+export function ReferencePage({ title, intro, children }: { title: string; intro: string; children: ReactNode }) {
+  return <StoryPage className="hm-foundation"><StoryPageHeader kicker={STORY_KICKER.foundation} title={title} description={intro} />{children}</StoryPage>
+}
+export function ReferenceSection({ title, note, children, id }: { title: string; note: string; children: ReactNode; id?: string }) {
+  return <StorySection id={id} title={title} description={note}>{children}</StorySection>
+}
+export function Specimen({ label, size, line, weight }: { label: string; size: string; line: string; weight?: string }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [metrics, setMetrics] = useState("")
+  useEffect(() => {
+    let mounted = true
+    void document.fonts.ready.then(() => {
+      if (!mounted || !ref.current) return
+      const style = getComputedStyle(ref.current)
+      setMetrics(`${style.fontSize} / ${style.lineHeight} / ${style.fontWeight} · letter-spacing: ${style.letterSpacing}`)
+    })
+    return () => { mounted = false }
+  }, [])
+  return <div className="hm-foundation-specimen" ref={ref} data-typography-sample={label} style={{ fontSize: `var(${size})`, lineHeight: `var(${line})`, fontWeight: weight ? `var(${weight})` : "normal" }}><p lang="ko">가나다라마바사 아자차카타파하 · 한맥 프로젝트</p><p lang="en">ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz</p><p>0123456789</p><small className="hm-foundation-note" data-typography-metrics>{metrics}</small></div>
+}
diff --git a/src/foundation/typography.stories.tsx b/src/foundation/typography.stories.tsx
new file mode 100644
index 0000000..84c5733
--- /dev/null
+++ b/src/foundation/typography.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { typographyProperties, typographyReferences } from "./reference-data"
+import { ReferencePage, ReferenceSection, Specimen, useResolvedProperties } from "./reference"
+
+const weights = ["--hm-input-font-weight", "--hm-font-weight-medium", "--hm-card-title-font-weight", "--hm-font-weight-bold"]
+function TypographyReferencePage() {
+  const values = useResolvedProperties(typographyProperties)
+  return <ReferencePage title="Typography" intro="Current Typography Reference · 기존 HM 컴포넌트의 실제 구현 규격입니다. 새로운 Heading / Body / Caption token 체계를 정의하지 않습니다.">
+    <ReferenceSection title="Font Family" note="default.css의 실제 Font stack과 theme.css의 로컬 Font asset을 사용합니다."><div className="hm-foundation-panel"><code>--hm-font-family-base</code><p>{values["--hm-font-family-base"]}</p><p>Noto Sans KR · /fonts/NotoSansKR-variable.ttf · font-weight 100–900 asset</p><p className="hm-foundation-note">Asset의 지원 범위와 아래 컴포넌트의 실제 사용 굵기는 별도로 표시합니다.</p></div></ReferenceSection>
+    <ReferenceSection title="Font Weight" note="400(Input) · 500(Medium / Standard Button) · 600(Card title) · 700(Bold). 같은 글자열로 현재 굵기를 비교합니다."><div className="hm-foundation-grid">{weights.map(property => <article className="hm-foundation-card" key={property}><code>{property}</code><p>{values[property]}</p><p style={{ fontWeight: `var(${property})` }}>한맥 프로젝트<br />Hanmac Project<br />0123456789</p></article>)}</div></ReferenceSection>
+    <ReferenceSection title="Component Specimens" note="크기 / 행높이 / 굵기 / 자간은 specimen에서 computed style로 읽습니다. 자간을 별도 지정하지 않은 컴포넌트는 현재 normal을 유지합니다."><div className="hm-foundation-specimens">{typographyReferences.map(item => <article className="hm-foundation-panel" key={item.label}><h3>{item.label}</h3><p className="hm-foundation-note">packages/ui/src/theme/{item.source}</p><dl><dt>Size</dt><dd><code>{item.size}</code> · {values[item.size]}</dd><dt>Line Height</dt><dd><code>{item.line}</code> · {values[item.line]}</dd><dt>Weight</dt><dd>{item.weight ? <><code>{item.weight}</code> · {values[item.weight]}</> : "normal · 컴포넌트에서 별도 weight 지정 없음"}</dd></dl><Specimen {...item} /></article>)}</div></ReferenceSection>
+  </ReferencePage>
+}
+const meta = { title: "Foundation/Typography", parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+export const All: StoryObj<typeof meta> = { name: "Typography", render: () => <TypographyReferencePage /> }
diff --git a/src/hm-theme.css b/src/hm-theme.css
new file mode 100644
index 0000000..ecbd6d3
--- /dev/null
+++ b/src/hm-theme.css
@@ -0,0 +1,83 @@
+@import "@hm-design/ui/theme.css";
+
+:root {
+  /* Existing preview artwork keeps its own fixed colors. Shared controls use Semantic values. */
+  --hm-green: var(--hm-sem-action-primary);
+  --hm-green-light: #205241;
+  --hm-green-deep: #0a221d;
+  --hm-brown: #3e3523;
+  --hm-beige: var(--hm-sem-bg-content);
+  --hm-ink: var(--hm-sem-fg-primary);
+  --hm-muted: var(--hm-sem-fg-secondary);
+  --hm-field-border: var(--hm-sem-stroke-input-default);
+  --hm-danger: var(--hm-sem-action-destructive);
+}
+
+html, body, button, input { font-family: var(--hm-font-family-base); }
+html { scroll-behavior: smooth; }
+body { margin: 0; }
+.hm-app { min-width: 320px; }
+.hm-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
+.hm-topbar { background: var(--hm-sem-bg-brand); color: #fff; border-bottom: 1px solid #31594c; padding: 15px 0; }
+.hm-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #80b6a3; border-radius: 4px; background: #174b3a; font-size: 16px; font-weight: 800; letter-spacing: -.08em; }
+.hm-brand-name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
+.hm-brand-caption { margin: 2px 0 0; color: #bddfd4; font-size: 11px; }
+.hm-topbar-status { display: inline-flex; align-items: center; gap: 7px; color: #c6d8d1; font-size: 12px; white-space: nowrap; }
+.hm-topbar-status span { width: 7px; height: 7px; border-radius: 50%; background: #67d6ac; box-shadow: 0 0 0 4px #67d6ac22; }
+.hm-breadcrumb { color: #827b70; }
+.hm-breadcrumb strong { color: var(--hm-green); font-weight: 600; }
+.hm-hero { position: relative; overflow: hidden; min-height: 330px; border: 1px solid #254d40; border-radius: 4px; background: var(--hm-sem-bg-brand); color: #fff; }
+.hm-hero::after { content: ""; position: absolute; width: 590px; height: 590px; right: -240px; top: -175px; border: 1px solid #ffffff24; border-radius: 50%; box-shadow: 0 0 0 72px #ffffff09,0 0 0 145px #ffffff06; }
+.hm-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #c3e6d7; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
+.hm-hero h1 { margin: 20px 0 17px; font-size: clamp(32px,4vw,49px); line-height: 1.27; letter-spacing: -.055em; font-weight: 700; }
+.hm-hero h1 span { color: #d9eac3; }
+.hm-hero-copy { max-width: 600px; margin: 0; color: #d5e4dd; font-size: 14px; line-height: 1.8; word-break: keep-all; }
+.hm-hero-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; border-bottom: 1px solid #b6d8c8; padding-bottom: 5px; color: #f7fff9; font-size: 13px; font-weight: 700; text-decoration: none; }
+.hm-hero-link:hover { color: #d9eac3; }
+.hm-hero-art { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 210px; }
+.hm-hero-art-line { position: absolute; width: 195px; height: 195px; border: 1px solid #a6d0bc80; transform: rotate(17deg); }
+.hm-hero-art-square { display: grid; place-items: center; width: 152px; height: 152px; border: 1px solid #c3e6d799; border-radius: 8px; background: var(--hm-sem-bg-brand); box-shadow: 16px 21px 0 #001a1255; color: #d8ecda; transform: rotate(-8deg); }
+.hm-hero-art-pill { position: absolute; bottom: 15px; right: 2px; display: flex; gap: 7px; border: 1px solid #8ab6a7; border-radius: 30px; background: #174335; padding: 10px 13px; }
+.hm-hero-art-pill span { width: 7px; height: 7px; border-radius: 50%; background: #c8e4d5; }
+.hm-hero-art-pill span:nth-child(2) { background: #74bd98; }
+.hm-hero-art-pill span:nth-child(3) { background: #477b5a; }
+.hm-section-kicker { margin: 0 0 6px; color: #6b715f; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
+.hm-section-heading h2 { margin: 0; color: var(--hm-ink); font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
+.hm-section-heading p:not(.hm-section-kicker) { margin: 7px 0 0; color: var(--hm-muted); font-size: 13px; }
+.hm-count { border: 1px solid #d4cfc2; border-radius: 20px; padding: 6px 10px; color: #6e6759; font-size: 11px; white-space: nowrap; }
+.hm-panel { gap: 0; --card-spacing: 16px; }
+.hm-panel-header { display: grid; grid-template-columns: 34px 1fr; column-gap: 11px; align-items: center; border-bottom: 1px solid #ede9df; padding: 22px 23px 17px; }
+.hm-panel-icon { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 4px; background: #e7f1ec; color: var(--hm-green); }
+.hm-panel-header [data-slot="card-title"] { font-size: 15px; line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
+.hm-panel-header [data-slot="card-description"] { margin-top: 2px; color: var(--hm-muted); font-size: 11px; }
+.hm-panel-content { padding: 23px; }
+.hm-control-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
+.hm-component-note { margin: 20px 0 0; color: #7b766e; font-size: 11px; line-height: 1.6; }
+.hm-swatch-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
+.hm-swatch { min-width: 0; }
+.hm-swatch-color { display: block; height: 65px; border: 1px solid #d5cfc3; border-radius: 4px; }
+.hm-swatch-color--dark { border-color: #1e3b31; }
+.hm-swatch-name { display: block; margin-top: 8px; color: var(--hm-ink); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
+.hm-swatch-value { color: #8b857a; font-size: 10px; }
+.hm-field { display: grid; gap: 8px; }
+.hm-field label { font-size: 12px; font-weight: 600; }
+.hm-form-footer { border-top: 1px solid #eee9e0; padding-top: 18px; }
+.hm-form-footer p { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--hm-muted); font-size: 11px; }
+.hm-form-footer p svg { color: #1a7551; }
+.hm-inner-card { border: 1px solid #d8d2c5; border-radius: 4px; background: #faf8f3; padding: 21px; }
+.hm-inner-card-label { color: #798f7c; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
+.hm-inner-card h3 { margin: 13px 0 7px; color: var(--hm-ink); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
+.hm-inner-card p { max-width: 340px; margin: 0 0 19px; color: var(--hm-muted); font-size: 12px; line-height: 1.7; word-break: keep-all; }
+.hm-dialog-summary { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin: 8px 0 14px; border-top: 1px solid #dedbd2; border-bottom: 1px solid #dedbd2; padding: 16px 0; font-size: 13px; }
+.hm-dialog-summary span { color: var(--hm-muted); }
+.hm-dialog-summary strong { font-weight: 600; }
+.hm-footer { border-top: 1px solid #d7d1c5; padding-top: 19px; color: #7b7468; }
+
+@media (max-width: 700px) {
+  .hm-container { width: min(100% - 30px,1180px); }
+  .hm-topbar-status,.hm-hero-art { display: none; }
+  .hm-hero { min-height: auto; }
+  .hm-swatch-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
+  .hm-panel-header,.hm-panel-content { padding-inline: 18px; }
+}
+
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..e94d415
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@hm-design/ui/tailwind.css";
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..4e2ffa0
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,11 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import App from "./App"
+import "./index.css"
+import "./hm-theme.css"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/src/patterns/dashboard-composition.css b/src/patterns/dashboard-composition.css
new file mode 100644
index 0000000..1a4c4d1
--- /dev/null
+++ b/src/patterns/dashboard-composition.css
@@ -0,0 +1,178 @@
+@import "./dashboard-status-contract.css";
+
+/* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
+.dashboard-production {
+  --dashboard-work-progress: var(--hm-dashboard-status-active);
+  --dashboard-work-hold: var(--hm-dashboard-status-hold);
+  --dashboard-work-issue: var(--hm-dashboard-status-issue);
+  --dashboard-work-badge-background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
+}
+
+/* Existing Badge outline variant, overridden through its component mappings only within Dashboard.
+   Variant C has plain table text, so use its dark selected surface to keep the white done ink legible on HM's light table. */
+.dashboard-production [data-slot="badge"][data-status] {
+  --hm-badge-outline-text: var(--dashboard-status-color);
+  --hm-badge-outline-background: var(--dashboard-work-badge-background);
+  --hm-badge-outline-border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
+}
+
+.dashboard-production [data-status="active"] { --dashboard-status-color: var(--dashboard-work-progress); }
+.dashboard-production [data-status="hold"] { --dashboard-status-color: var(--dashboard-work-hold); }
+.dashboard-production [data-status="done"] { --dashboard-status-color: var(--hm-dashboard-status-done); }
+.dashboard-production [data-status="issue"][data-issue="true"] { --dashboard-status-color: var(--dashboard-work-issue); }
+
+.dashboard-production [data-story-slot="work-badges"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+/* Story-only Variant C Compact Header (ui_viz patterns-variant-c--all). Geometry follows the reference: header 48 / padding-x 20,
+   title + 18 after it, status bar 40 high floating from the header top and centred at 50% + 18px, padding-x 36, gap 8, 28px controls,
+   1x16 dividers, bottom radius 16 with concave wings. Colours and type are HM tokens. Content join / padding stay Dashboard Layout's. */
+.dashboard-production-compact [data-story-slot="compact-header"] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: none;
+  align-items: center;
+  height: 48px;
+  padding: 0 20px;
+  background: var(--hm-dashboard-header-background);
+  color: var(--hm-dashboard-nav-text);
+}
+
+.dashboard-story-compact [data-story-slot="compact-brand"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  height: 48px;
+  padding-right: 18px;
+}
+
+.dashboard-story-compact [data-story-slot="compact-brand"] strong,
+.dashboard-story-compact [data-story-slot="compact-context"] {
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
+  -webkit-text-stroke: var(--hm-dashboard-nav-text-stroke-width) var(--hm-dashboard-nav-text-stroke-color);
+  paint-order: stroke fill;
+}
+
+.dashboard-story-compact [data-story-slot="compact-context"] {
+  font-size: 13px;
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] {
+  --compact-wing: var(--hm-sem-palette-green-default);
+  position: absolute;
+  top: 0;
+  left: calc(50% + 18px);
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 36px;
+  border-radius: 0 0 16px 16px;
+  background: linear-gradient(90deg, var(--hm-sem-palette-green-default) 20%, var(--hm-sem-palette-green-light-1) 50%, var(--hm-sem-palette-green-default) 80%);
+  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent));
+  white-space: nowrap;
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"]::before,
+.dashboard-story-compact [data-story-slot="compact-status"]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 36px;
+  height: 30px;
+  pointer-events: none;
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"]::before {
+  left: -35px;
+  border-radius: 0 20px 0 0;
+  box-shadow: 18px 0 0 var(--compact-wing);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"]::after {
+  right: -35px;
+  border-radius: 20px 0 0 0;
+  box-shadow: -18px 0 0 var(--compact-wing);
+}
+
+.dashboard-story-compact [data-story-slot="compact-divider"] {
+  flex: none;
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: color-mix(in srgb, var(--hm-dashboard-nav-text-secondary) 30%, transparent);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status-group"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Filter states follow the reference values (black 35/55%, selected Green Dark 2 90% with a Green Light 4 ring). No HM Semantic matches
+   them (state.active / accent differ), so the exact HM palette primitives are used. Selected wins over hover, as in the reference. */
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"] {
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
+  background: color-mix(in srgb, var(--hm-sem-palette-black) 35%, transparent);
+  color: color-mix(in srgb, var(--hm-sem-palette-white) 95%, transparent);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:hover {
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 40%, transparent);
+  background: color-mix(in srgb, var(--hm-sem-palette-black) 55%, transparent);
+  color: var(--hm-sem-palette-white);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"][aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
+  background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-palette-green-light-4) 35%, transparent);
+  color: var(--hm-sem-palette-white);
+}
+
+/* Count ink shares dashboardWorkStatus with the table Badge; labels retain Reference white ink. */
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status] strong {
+  color: var(--dashboard-status-color);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  -webkit-text-stroke: 1px color-mix(in srgb, var(--hm-sem-palette-black) 22%, transparent);
+  paint-order: stroke fill;
+}
+
+/* Issue is separately divided and has its own Default/Hover/Selected surface in Variant C. */
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"] {
+  background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 28%, transparent);
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 45%, transparent);
+  color: var(--hm-sem-palette-white);
+}
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"]:hover {
+  background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 45%, transparent);
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
+}
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"][aria-pressed="true"] {
+  background: color-mix(in srgb, var(--hm-sem-action-destructive) 25%, transparent);
+  border-color: color-mix(in srgb, var(--hm-sem-action-destructive) 70%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-action-destructive) 40%, transparent);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:focus-visible {
+  outline: var(--hm-dashboard-nav-focus-outline);
+}
+
+/* Compact geometry is shared by all viewports. Dashboard's native scroll frame preserves its minimum width. */
diff --git a/src/patterns/dashboard-composition.tsx b/src/patterns/dashboard-composition.tsx
new file mode 100644
index 0000000..5ce91a9
--- /dev/null
+++ b/src/patterns/dashboard-composition.tsx
@@ -0,0 +1,422 @@
+import { Fragment, useState, type MouseEvent, type ReactNode } from "react"
+import { ChartColumnIcon, ChevronRightIcon, LayoutGridIcon, MoreHorizontalIcon, SettingsIcon, type LucideIcon } from "lucide-react"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DashboardContent,
+  DashboardLayout,
+  DashboardHeader,
+  DashboardSidebar,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  DashboardMain,
+  DataTable,
+  DataTableColumnHeader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  FilterBar,
+  FilterBarActions,
+  FilterBarSearch,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageHeaderDescription,
+  PageHeaderTitle,
+  Progress,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  dataTableSelectColumn,
+  useDataTable,
+  type DataTableColumnDef,
+} from "@hm-design/ui"
+import { formatDate } from "./sample-users"
+import { countDashboardWorkFilter, dashboardWorks, dashboardWorkFilters, dashboardWorkStatus, dashboardWorkStyle, matchesDashboardWorkStatus, type DashboardWork, type DashboardWorkFilter } from "./dashboard-work-status"
+import "./dashboard-composition.css"
+
+// Dashboard Mode: internal navigation, Page Header, KPI cards, Filter Bar and Data Table.
+// Menu and profile data are local to this Story. See docs/patterns/dashboard-layout.md.
+
+const photo =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="#266651"/><circle cx="40" cy="31" r="14" fill="#bddfd4"/><rect x="14" y="50" width="52" height="40" rx="22" fill="#bddfd4"/></svg>')
+
+const profileData = {
+  name: "김한맥",
+  description: "프로젝트 관리자",
+  photo,
+  fallback: "김",
+}
+
+const profileActions: { label: string; destructive?: boolean }[] = [
+  { label: "프로필 설정" },
+  { label: "로그아웃", destructive: true },
+]
+
+function ProfileAvatar() {
+  return (
+    <Avatar>
+      <AvatarImage src={profileData.photo} alt="" />
+      <AvatarFallback>{profileData.fallback}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+function ProfileMenu({ trigger, side = "bottom", align = "start", modal, matchTrigger = false }: { trigger: ReactNode; side?: "top" | "right" | "bottom" | "left"; align?: "start" | "center" | "end"; modal?: boolean; matchTrigger?: boolean }) {
+  return (
+    <DropdownMenu modal={modal}>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent side={side} align={align} className={matchTrigger ? "min-w-(--radix-dropdown-menu-trigger-width)" : undefined}>
+        <DropdownMenuLabel>{profileData.name}</DropdownMenuLabel>
+        {profileActions.map((action) => (
+          <Fragment key={action.label}>
+            {action.destructive ? <DropdownMenuSeparator /> : null}
+            <DropdownMenuItem variant={action.destructive ? "destructive" : "default"}>{action.label}</DropdownMenuItem>
+          </Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+type Mode = "compact" | "sidebar" | "header-sidebar"
+type StatusFilter = DashboardWorkFilter
+const statusFilters = dashboardWorkFilters.map((id) => ({ id, ...dashboardWorkStatus[id] }))
+
+// Variant C (ui_viz patterns-variant-c--all) composition: a 48px Compact Header with the title on the left and a floating 40px status
+// filter bar centred on the header, followed immediately by the content surface. No GNB, LNB or profile. The structure mirrors the
+// reference (header > brand + status bar [context | 전체 | group]); colours, type and controls are HM.
+function CompactHeader({ data, status, onStatusChange }: { data: DashboardWork[]; status: StatusFilter; onStatusChange: (status: StatusFilter) => void }) {
+  const count = (id: StatusFilter) => countDashboardWorkFilter(data, id)
+  const filterButton = (filter: (typeof statusFilters)[number]) => (
+    <Button key={filter.id} type="button" variant="ghost" size="sm" data-filter={filter.id} data-status={filter.id} data-issue={filter.id === "issue" ? "true" : undefined} style={dashboardWorkStyle(filter.id)} aria-pressed={status === filter.id} aria-controls="dashboard-compact-results" onClick={() => onStatusChange(filter.id)}>
+      {filter.label} <strong>{count(filter.id)}</strong>건
+    </Button>
+  )
+  const [all, ...rest] = statusFilters
+  const workStates = rest.filter((filter) => filter.id !== "issue")
+  const issue = rest.find((filter) => filter.id === "issue")!
+  return (
+    <DashboardHeader data-story-slot="compact-header">
+      <div data-story-slot="compact-brand">
+        <strong>프로젝트 대시보드</strong>
+      </div>
+      <div data-story-slot="compact-status" role="group" aria-label="업무 상태 필터">
+        <span data-story-slot="compact-context">업무</span>
+        <span data-story-slot="compact-divider" aria-hidden="true" />
+        {filterButton(all)}
+        <span data-story-slot="compact-divider" aria-hidden="true" />
+        <div data-story-slot="compact-status-group">{workStates.map(filterButton)}</div>
+        <span data-story-slot="compact-divider" aria-hidden="true" />
+        {filterButton(issue)}
+      </div>
+    </DashboardHeader>
+  )
+}
+
+// Dashboard internal menu; kept at every viewport width.
+type LocalNode = { id: string; label: string; icon?: LucideIcon; children?: LocalNode[] }
+
+const localNav = (thirdLevel?: boolean): LocalNode[] => [
+  { id: "overview", label: "개요", icon: LayoutGridIcon },
+  {
+    id: "projects",
+    label: "업무 관리",
+    children: [
+      thirdLevel
+        ? {
+            id: "projects/tasks",
+            label: "업무 현황",
+            children: [
+              { id: "projects/tasks/all", label: "전체 업무" },
+              { id: "projects/tasks/mine", label: "담당 업무" },
+              { id: "projects/tasks/delayed", label: "지연 업무" },
+            ],
+          }
+        : { id: "projects/tasks", label: "업무 현황" },
+      { id: "projects/schedule", label: "일정" },
+    ],
+  },
+  { id: "reports", label: "리포트", icon: ChartColumnIcon },
+  { id: "settings", label: "설정", icon: SettingsIcon },
+]
+
+const statusBadge = (status: Exclude<StatusFilter, "all">) => (
+  <Badge variant="outline" data-status={status} data-issue={status === "issue" ? "true" : undefined} data-work-status={status} style={dashboardWorkStyle(status)}>{dashboardWorkStatus[status].label}</Badge>
+)
+
+const columns: DataTableColumnDef<DashboardWork>[] = [
+  dataTableSelectColumn<DashboardWork>(),
+  { accessorKey: "name", header: ({ column }) => <DataTableColumnHeader column={column} title="업무명" /> },
+  { accessorKey: "department", header: "부서" },
+  { accessorKey: "status", header: "상태", cell: ({ row }) => <span data-story-slot="work-badges">{statusBadge(row.original.status)}{row.original.issue ? statusBadge("issue") : null}</span>, filterFn: (row, _columnId, value: StatusFilter) => matchesDashboardWorkStatus(row.original, value), enableSorting: false },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="등록일" />,
+    cell: ({ row }) => formatDate(row.original.createdAt),
+  },
+]
+
+function TaskList({ data, loading, compact, selectedStatus = "all", onReset }: { data: DashboardWork[]; loading?: boolean; compact?: boolean; selectedStatus?: StatusFilter; onReset?: () => void }) {
+  const table = useDataTable({ columns, data, getRowId: (row) => row.id })
+  const [search, setSearch] = useState("")
+  const [status, setStatus] = useState("all")
+  const total = table.getFilteredRowModel().rows.length
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>업무 목록</CardTitle>
+        <CardDescription role="status">{dashboardWorkStatus[compact ? selectedStatus : status as StatusFilter].label} 업무 {total}건</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          <FilterBar>
+            <FilterBarSearch
+              value={search}
+              onValueChange={(value) => {
+                setSearch(value)
+                table.setGlobalFilter(value || undefined)
+              }}
+              placeholder="업무명·부서 검색"
+            />
+            {compact ? null : <Select
+              value={status}
+              onValueChange={(value) => {
+                setStatus(value)
+                table.getColumn("status")?.setFilterValue(value === "all" ? undefined : value)
+              }}
+            >
+              <SelectTrigger size="medium" aria-label="상태">
+                <SelectValue placeholder="상태" />
+              </SelectTrigger>
+              <SelectContent>
+                {statusFilters.map((filter) => <SelectItem key={filter.id} value={filter.id}>{filter.label}</SelectItem>)}
+              </SelectContent>
+            </Select>}
+            <FilterBarActions>
+              <Button
+                type="button"
+                variant="cancel"
+                appearance="solid"
+                onClick={() => {
+                  setSearch("")
+                  setStatus("all")
+                  table.resetGlobalFilter(true)
+                  table.resetColumnFilters(true)
+                  onReset?.()
+                }}
+              >
+                초기화
+              </Button>
+            </FilterBarActions>
+          </FilterBar>
+          <DataTable table={table} loading={loading} emptyMessage="조건에 맞는 업무가 없습니다." />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function Kpis({ data, loading }: { data: DashboardWork[]; loading?: boolean }) {
+  const kpis = statusFilters.map(({ id, label }) => {
+    const value = countDashboardWorkFilter(data, id)
+    const progress = data.length ? Math.round(value / data.length * 100) : 0
+    return { id, label, value, progress }
+  })
+  return (
+    <div className="grid gap-6" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 200px), 1fr))" }}>
+      {kpis.map((kpi) => (
+        <Card key={kpi.label}>
+          <CardHeader>
+            <CardDescription>{kpi.label}</CardDescription>
+            {loading ? null : (
+              <CardAction>
+                {kpi.id === "all" ? <Badge variant="secondary">전체</Badge> : statusBadge(kpi.id)}
+              </CardAction>
+            )}
+          </CardHeader>
+          <CardContent>
+            {loading ? (
+              <div className="grid gap-3">
+                <Skeleton style={{ height: 36, width: 80 }} />
+                <Skeleton style={{ height: 8 }} />
+              </div>
+            ) : (
+              <div className="grid gap-3">
+                <p style={{ margin: 0, fontSize: 28, lineHeight: "36px", fontWeight: 700 }}>{kpi.value}</p>
+                <Progress value={kpi.progress} aria-label={`${kpi.label} 비율`} />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export function DashboardScreen({
+  mode = "compact",
+  data = dashboardWorks,
+  loading,
+  longTitle,
+  wide,
+  thirdLevel,
+}: {
+  mode?: Mode
+  data?: DashboardWork[]
+  loading?: boolean
+  longTitle?: boolean
+  wide?: boolean
+  thirdLevel?: boolean
+}) {
+  const [current, setCurrent] = useState(thirdLevel ? "projects/tasks/all" : "projects/tasks")
+  const [compactStatus, setCompactStatus] = useState<StatusFilter>("all")
+  const compact = mode === "compact"
+  const resultData = compact ? data.filter((row) => matchesDashboardWorkStatus(row, compactStatus)) : data
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setCurrent(id)
+  }
+  const isCurrent = (id: string) => current === id || current.startsWith(`${id}/`)
+  const nav = localNav(thirdLevel)
+  const dashboardMenu = (nodes: LocalNode[]): ReactNode =>
+    nodes.map((node) =>
+      node.children ? (
+        <Collapsible
+          key={node.id}
+          data-current={isCurrent(node.id) ? "" : undefined}
+          open={openGroups[node.id] ?? true}
+          onOpenChange={(value) => setOpenGroups((state) => ({ ...state, [node.id]: value }))}
+        >
+          <CollapsibleTrigger asChild><Button variant="ghost" type="button"><ChevronRightIcon aria-hidden="true" />{node.label}</Button></CollapsibleTrigger>
+          <CollapsibleContent className="pl-3">{dashboardMenu(node.children)}</CollapsibleContent>
+        </Collapsible>
+      ) : (
+        <Button key={node.id} variant="ghost" asChild><a href={`#${node.id}`} aria-current={current === node.id ? "page" : undefined} onClick={go(node.id)}>
+          {node.icon ? <node.icon aria-hidden="true" /> : null}
+          {node.label}
+        </a></Button>
+      )
+    )
+  const title = longTitle ? "전사 프로젝트 포트폴리오의 진행 현황과 담당 부서별 업무 상세 현황" : "업무 현황"
+  const sidebar = (
+    <DashboardSidebar>
+      <strong>프로젝트 대시보드</strong>
+      <nav aria-label="Dashboard 업무 메뉴">{dashboardMenu(nav)}</nav>
+      <ProfileMenu side="right" align="end" trigger={
+        <Button type="button" variant="ghost" aria-label={`${profileData.name} 사용자 메뉴`}>
+          <ProfileAvatar />{profileData.name}
+        </Button>
+      } />
+    </DashboardSidebar>
+  )
+
+  // Variant C content: heading, then the result card (Page Header's own 20px bottom spacing; no breadcrumb, actions or KPI cards in the reference).
+  const compactMain = (
+    <DashboardMain id="dashboard-compact-results">
+      <PageHeader>
+        <PageHeaderContent>
+          <PageHeaderTitle>업무 현황을 한눈에 확인하세요</PageHeaderTitle>
+        </PageHeaderContent>
+      </PageHeader>
+      <TaskList data={resultData} loading={loading} compact selectedStatus={compactStatus} onReset={() => setCompactStatus("all")} />
+    </DashboardMain>
+  )
+
+  const main = compact ? compactMain : (
+    <DashboardMain>
+        <PageHeader>
+          <PageHeaderContent>
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#dashboard">홈</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#projects">프로젝트</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>업무 현황</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <PageHeaderTitle>{title}</PageHeaderTitle>
+            <PageHeaderDescription>프로젝트별 업무 진행 상황을 확인하고 조회합니다.</PageHeaderDescription>
+          </PageHeaderContent>
+          <PageHeaderActions>
+            <Button type="button" variant="cancel" appearance="solid">
+              다운로드
+            </Button>
+            <Button type="button" variant="primary">
+              신규 등록
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button type="button" variant="primary" appearance="outline" size="icon" aria-label="더보기">
+                  <MoreHorizontalIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>일괄 수정</DropdownMenuItem>
+                <DropdownMenuItem>보관</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </PageHeaderActions>
+        </PageHeader>
+        <DashboardContent>
+          <Kpis data={data} loading={loading} />
+          <TaskList data={resultData} loading={loading} />
+          {wide ? (
+            <Card>
+              <CardHeader>
+                <CardTitle>넓은 내용</CardTitle>
+                <CardDescription>페이지를 밀지 않고 카드 안에서 가로 스크롤합니다.</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div style={{ overflowX: "auto" }}>
+                  <div style={{ width: 1600, height: 80, background: "var(--hm-sem-bg-content)" }} />
+                </div>
+              </CardContent>
+            </Card>
+          ) : null}
+        </DashboardContent>
+    </DashboardMain>
+  )
+
+  return (
+    <DashboardLayout
+      className={compact ? "dashboard-production dashboard-story-compact" : "dashboard-production"}
+      header={compact ? <CompactHeader data={data} status={compactStatus} onStatusChange={setCompactStatus} /> : mode === "header-sidebar" ? <DashboardHeader><strong>업무 현황</strong></DashboardHeader> : undefined}
+      sidebar={compact ? undefined : sidebar}
+    >
+      {main}
+    </DashboardLayout>
+  )
+}
+
diff --git a/src/patterns/dashboard-layout.stories.css b/src/patterns/dashboard-layout.stories.css
new file mode 100644
index 0000000..1662e3f
--- /dev/null
+++ b/src/patterns/dashboard-layout.stories.css
@@ -0,0 +1,178 @@
+@import "./dashboard-status-contract.css";
+
+/* Runtime-neutral status contract → Story mapping. HM has no exact public status semantics for these three inks. */
+.dashboard-story {
+  --dashboard-work-progress: var(--hm-dashboard-status-active);
+  --dashboard-work-hold: var(--hm-dashboard-status-hold);
+  --dashboard-work-issue: var(--hm-dashboard-status-issue);
+  --dashboard-work-badge-background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
+}
+
+/* Existing Badge outline variant, overridden through its component mappings only within Dashboard.
+   Variant C has plain table text, so use its dark selected surface to keep the white done ink legible on HM's light table. */
+.dashboard-story [data-slot="badge"][data-status] {
+  --hm-badge-outline-text: var(--dashboard-status-color);
+  --hm-badge-outline-background: var(--dashboard-work-badge-background);
+  --hm-badge-outline-border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
+}
+
+.dashboard-story [data-status="active"] { --dashboard-status-color: var(--dashboard-work-progress); }
+.dashboard-story [data-status="hold"] { --dashboard-status-color: var(--dashboard-work-hold); }
+.dashboard-story [data-status="done"] { --dashboard-status-color: var(--hm-dashboard-status-done); }
+.dashboard-story [data-status="issue"][data-issue="true"] { --dashboard-status-color: var(--dashboard-work-issue); }
+
+.dashboard-story [data-story-slot="work-badges"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+/* Story-only Variant C Compact Header (ui_viz patterns-variant-c--all). Geometry follows the reference: header 48 / padding-x 20,
+   title + 18 after it, status bar 40 high floating from the header top and centred at 50% + 18px, padding-x 36, gap 8, 28px controls,
+   1x16 dividers, bottom radius 16 with concave wings. Colours and type are HM tokens. Content join / padding stay Dashboard Layout's. */
+.dashboard-story-compact [data-story-slot="compact-header"] {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: none;
+  align-items: center;
+  height: 48px;
+  padding: 0 20px;
+  background: var(--hm-dashboard-header-background);
+  color: var(--hm-dashboard-nav-text);
+}
+
+.dashboard-story-compact [data-story-slot="compact-brand"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  height: 48px;
+  padding-right: 18px;
+}
+
+.dashboard-story-compact [data-story-slot="compact-brand"] strong,
+.dashboard-story-compact [data-story-slot="compact-context"] {
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
+  -webkit-text-stroke: var(--hm-dashboard-nav-text-stroke-width) var(--hm-dashboard-nav-text-stroke-color);
+  paint-order: stroke fill;
+}
+
+.dashboard-story-compact [data-story-slot="compact-context"] {
+  font-size: 13px;
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] {
+  --compact-wing: var(--hm-sem-palette-green-default);
+  position: absolute;
+  top: 0;
+  left: calc(50% + 18px);
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 40px;
+  padding: 0 36px;
+  border-radius: 0 0 16px 16px;
+  background: linear-gradient(90deg, var(--hm-sem-palette-green-default) 20%, var(--hm-sem-palette-green-light-1) 50%, var(--hm-sem-palette-green-default) 80%);
+  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--hm-sem-palette-black) 25%, transparent));
+  white-space: nowrap;
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"]::before,
+.dashboard-story-compact [data-story-slot="compact-status"]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 36px;
+  height: 30px;
+  pointer-events: none;
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"]::before {
+  left: -35px;
+  border-radius: 0 20px 0 0;
+  box-shadow: 18px 0 0 var(--compact-wing);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"]::after {
+  right: -35px;
+  border-radius: 20px 0 0 0;
+  box-shadow: -18px 0 0 var(--compact-wing);
+}
+
+.dashboard-story-compact [data-story-slot="compact-divider"] {
+  flex: none;
+  width: 1px;
+  height: 16px;
+  margin: 0 4px;
+  background: color-mix(in srgb, var(--hm-dashboard-nav-text-secondary) 30%, transparent);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status-group"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Filter states follow the reference values (black 35/55%, selected Green Dark 2 90% with a Green Light 4 ring). No HM Semantic matches
+   them (state.active / accent differ), so the exact HM palette primitives are used. Selected wins over hover, as in the reference. */
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"] {
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  border-color: color-mix(in srgb, var(--hm-sem-palette-black) 50%, transparent);
+  background: color-mix(in srgb, var(--hm-sem-palette-black) 35%, transparent);
+  color: color-mix(in srgb, var(--hm-sem-palette-white) 95%, transparent);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:hover {
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 40%, transparent);
+  background: color-mix(in srgb, var(--hm-sem-palette-black) 55%, transparent);
+  color: var(--hm-sem-palette-white);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"][aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
+  background: color-mix(in srgb, var(--hm-sem-palette-green-dark-2) 90%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-palette-green-light-4) 35%, transparent);
+  color: var(--hm-sem-palette-white);
+}
+
+/* Count ink shares dashboardWorkStatus with the table Badge; labels retain Reference white ink. */
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status] strong {
+  color: var(--dashboard-status-color);
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+  -webkit-text-stroke: 1px color-mix(in srgb, var(--hm-sem-palette-black) 22%, transparent);
+  paint-order: stroke fill;
+}
+
+/* Issue is separately divided and has its own Default/Hover/Selected surface in Variant C. */
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"] {
+  background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 28%, transparent);
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 45%, transparent);
+  color: var(--hm-sem-palette-white);
+}
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"]:hover {
+  background: color-mix(in srgb, var(--hm-sem-palette-green-light-3) 45%, transparent);
+  border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-4) 65%, transparent);
+}
+.dashboard-story-compact [data-story-slot="compact-status"] [data-status="issue"][aria-pressed="true"] {
+  background: color-mix(in srgb, var(--hm-sem-action-destructive) 25%, transparent);
+  border-color: color-mix(in srgb, var(--hm-sem-action-destructive) 70%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--hm-sem-action-destructive) 40%, transparent);
+}
+
+.dashboard-story-compact [data-story-slot="compact-status"] [data-slot="button"]:focus-visible {
+  outline: var(--hm-dashboard-nav-focus-outline);
+}
+
+/* Compact geometry is shared by all viewports. Dashboard's native scroll frame preserves its minimum width. */
diff --git a/src/patterns/dashboard-layout.stories.tsx b/src/patterns/dashboard-layout.stories.tsx
new file mode 100644
index 0000000..2a4ec10
--- /dev/null
+++ b/src/patterns/dashboard-layout.stories.tsx
@@ -0,0 +1,473 @@
+import { Fragment, useState, type CSSProperties, type MouseEvent, type ReactNode } from "react"
+import { DashboardScreen } from "./dashboard-composition"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ChartColumnIcon, ChevronRightIcon, LayoutGridIcon, MoreHorizontalIcon, SettingsIcon, type LucideIcon } from "lucide-react"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DashboardContent,
+  DashboardLayout,
+  DashboardHeader,
+  DashboardSidebar,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  DashboardMain,
+  DataTable,
+  DataTableColumnHeader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  FilterBar,
+  FilterBarActions,
+  FilterBarSearch,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageHeaderDescription,
+  PageHeaderTitle,
+  Progress,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Skeleton,
+  dataTableSelectColumn,
+  useDataTable,
+  type DataTableColumnDef,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { formatDate } from "./sample-users"
+import { countDashboardWorkFilter, dashboardWorks, dashboardWorkFilters, dashboardWorkStatus, dashboardWorkStyle, matchesDashboardWorkStatus, type DashboardWork, type DashboardWorkFilter } from "./dashboard-work-status"
+import "./dashboard-layout.stories.css"
+
+// Dashboard Mode: internal navigation, Page Header, KPI cards, Filter Bar and Data Table.
+// Menu and profile data are local to this Story. See docs/patterns/dashboard-layout.md.
+
+const photo =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="#266651"/><circle cx="40" cy="31" r="14" fill="#bddfd4"/><rect x="14" y="50" width="52" height="40" rx="22" fill="#bddfd4"/></svg>')
+
+const profileData = {
+  name: "김한맥",
+  description: "프로젝트 관리자",
+  photo,
+  fallback: "김",
+}
+
+const profileActions: { label: string; destructive?: boolean }[] = [
+  { label: "프로필 설정" },
+  { label: "로그아웃", destructive: true },
+]
+
+function ProfileAvatar() {
+  return (
+    <Avatar>
+      <AvatarImage src={profileData.photo} alt="" />
+      <AvatarFallback>{profileData.fallback}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+function ProfileMenu({ trigger, side = "bottom", align = "start", modal, matchTrigger = false }: { trigger: ReactNode; side?: "top" | "right" | "bottom" | "left"; align?: "start" | "center" | "end"; modal?: boolean; matchTrigger?: boolean }) {
+  return (
+    <DropdownMenu modal={modal}>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent side={side} align={align} className={matchTrigger ? "min-w-(--radix-dropdown-menu-trigger-width)" : undefined}>
+        <DropdownMenuLabel>{profileData.name}</DropdownMenuLabel>
+        {profileActions.map((action) => (
+          <Fragment key={action.label}>
+            {action.destructive ? <DropdownMenuSeparator /> : null}
+            <DropdownMenuItem variant={action.destructive ? "destructive" : "default"}>{action.label}</DropdownMenuItem>
+          </Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+type Mode = "compact" | "sidebar" | "header-sidebar"
+type StatusFilter = DashboardWorkFilter
+const statusFilters = dashboardWorkFilters.map((id) => ({ id, ...dashboardWorkStatus[id] }))
+
+// Variant C (ui_viz patterns-variant-c--all) composition: a 48px Compact Header with the title on the left and a floating 40px status
+// filter bar centred on the header, followed immediately by the content surface. No GNB, LNB or profile. The structure mirrors the
+// reference (header > brand + status bar [context | 전체 | group]); colours, type and controls are HM.
+function CompactHeader({ data, status, onStatusChange }: { data: DashboardWork[]; status: StatusFilter; onStatusChange: (status: StatusFilter) => void }) {
+  const count = (id: StatusFilter) => countDashboardWorkFilter(data, id)
+  const filterButton = (filter: (typeof statusFilters)[number]) => (
+    <Button key={filter.id} type="button" variant="ghost" size="sm" data-filter={filter.id} data-status={filter.id} data-issue={filter.id === "issue" ? "true" : undefined} style={dashboardWorkStyle(filter.id)} aria-pressed={status === filter.id} aria-controls="dashboard-compact-results" onClick={() => onStatusChange(filter.id)}>
+      {filter.label} <strong>{count(filter.id)}</strong>건
+    </Button>
+  )
+  const [all, ...rest] = statusFilters
+  const workStates = rest.filter((filter) => filter.id !== "issue")
+  const issue = rest.find((filter) => filter.id === "issue")!
+  return (
+    <DashboardHeader data-story-slot="compact-header">
+      <div data-story-slot="compact-brand">
+        <strong>프로젝트 대시보드</strong>
+      </div>
+      <div data-story-slot="compact-status" role="group" aria-label="업무 상태 필터">
+        <span data-story-slot="compact-context">업무</span>
+        <span data-story-slot="compact-divider" aria-hidden="true" />
+        {filterButton(all)}
+        <span data-story-slot="compact-divider" aria-hidden="true" />
+        <div data-story-slot="compact-status-group">{workStates.map(filterButton)}</div>
+        <span data-story-slot="compact-divider" aria-hidden="true" />
+        {filterButton(issue)}
+      </div>
+    </DashboardHeader>
+  )
+}
+
+// Dashboard internal menu; kept at every viewport width.
+type LocalNode = { id: string; label: string; icon?: LucideIcon; children?: LocalNode[] }
+
+const localNav = (thirdLevel?: boolean): LocalNode[] => [
+  { id: "overview", label: "개요", icon: LayoutGridIcon },
+  {
+    id: "projects",
+    label: "업무 관리",
+    children: [
+      thirdLevel
+        ? {
+            id: "projects/tasks",
+            label: "업무 현황",
+            children: [
+              { id: "projects/tasks/all", label: "전체 업무" },
+              { id: "projects/tasks/mine", label: "담당 업무" },
+              { id: "projects/tasks/delayed", label: "지연 업무" },
+            ],
+          }
+        : { id: "projects/tasks", label: "업무 현황" },
+      { id: "projects/schedule", label: "일정" },
+    ],
+  },
+  { id: "reports", label: "리포트", icon: ChartColumnIcon },
+  { id: "settings", label: "설정", icon: SettingsIcon },
+]
+
+const statusBadge = (status: Exclude<StatusFilter, "all">) => (
+  <Badge variant="outline" data-status={status} data-issue={status === "issue" ? "true" : undefined} data-work-status={status} style={dashboardWorkStyle(status)}>{dashboardWorkStatus[status].label}</Badge>
+)
+
+const columns: DataTableColumnDef<DashboardWork>[] = [
+  dataTableSelectColumn<DashboardWork>(),
+  { accessorKey: "name", header: ({ column }) => <DataTableColumnHeader column={column} title="업무명" /> },
+  { accessorKey: "department", header: "부서" },
+  { accessorKey: "status", header: "상태", cell: ({ row }) => <span data-story-slot="work-badges">{statusBadge(row.original.status)}{row.original.issue ? statusBadge("issue") : null}</span>, filterFn: (row, _columnId, value: StatusFilter) => matchesDashboardWorkStatus(row.original, value), enableSorting: false },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="등록일" />,
+    cell: ({ row }) => formatDate(row.original.createdAt),
+  },
+]
+
+function TaskList({ data, loading, compact, selectedStatus = "all", onReset }: { data: DashboardWork[]; loading?: boolean; compact?: boolean; selectedStatus?: StatusFilter; onReset?: () => void }) {
+  const table = useDataTable({ columns, data, getRowId: (row) => row.id })
+  const [search, setSearch] = useState("")
+  const [status, setStatus] = useState("all")
+  const total = table.getFilteredRowModel().rows.length
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>업무 목록</CardTitle>
+        <CardDescription role="status">{dashboardWorkStatus[compact ? selectedStatus : status as StatusFilter].label} 업무 {total}건</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-4">
+          <FilterBar>
+            <FilterBarSearch
+              value={search}
+              onValueChange={(value) => {
+                setSearch(value)
+                table.setGlobalFilter(value || undefined)
+              }}
+              placeholder="업무명·부서 검색"
+            />
+            {compact ? null : <Select
+              value={status}
+              onValueChange={(value) => {
+                setStatus(value)
+                table.getColumn("status")?.setFilterValue(value === "all" ? undefined : value)
+              }}
+            >
+              <SelectTrigger size="medium" aria-label="상태">
+                <SelectValue placeholder="상태" />
+              </SelectTrigger>
+              <SelectContent>
+                {statusFilters.map((filter) => <SelectItem key={filter.id} value={filter.id}>{filter.label}</SelectItem>)}
+              </SelectContent>
+            </Select>}
+            <FilterBarActions>
+              <Button
+                type="button"
+                variant="cancel"
+                appearance="solid"
+                onClick={() => {
+                  setSearch("")
+                  setStatus("all")
+                  table.resetGlobalFilter(true)
+                  table.resetColumnFilters(true)
+                  onReset?.()
+                }}
+              >
+                초기화
+              </Button>
+            </FilterBarActions>
+          </FilterBar>
+          <DataTable table={table} loading={loading} emptyMessage="조건에 맞는 업무가 없습니다." />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+function Kpis({ data, loading }: { data: DashboardWork[]; loading?: boolean }) {
+  const kpis = statusFilters.map(({ id, label }) => {
+    const value = countDashboardWorkFilter(data, id)
+    const progress = data.length ? Math.round(value / data.length * 100) : 0
+    return { id, label, value, progress }
+  })
+  return (
+    <div className="grid gap-6" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 200px), 1fr))" }}>
+      {kpis.map((kpi) => (
+        <Card key={kpi.label}>
+          <CardHeader>
+            <CardDescription>{kpi.label}</CardDescription>
+            {loading ? null : (
+              <CardAction>
+                {kpi.id === "all" ? <Badge variant="secondary">전체</Badge> : statusBadge(kpi.id)}
+              </CardAction>
+            )}
+          </CardHeader>
+          <CardContent>
+            {loading ? (
+              <div className="grid gap-3">
+                <Skeleton style={{ height: 36, width: 80 }} />
+                <Skeleton style={{ height: 8 }} />
+              </div>
+            ) : (
+              <div className="grid gap-3">
+                <p style={{ margin: 0, fontSize: 28, lineHeight: "36px", fontWeight: 700 }}>{kpi.value}</p>
+                <Progress value={kpi.progress} aria-label={`${kpi.label} 비율`} />
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+function Screen({
+  mode = "compact",
+  data = dashboardWorks,
+  loading,
+  longTitle,
+  wide,
+  thirdLevel,
+}: {
+  mode?: Mode
+  data?: DashboardWork[]
+  loading?: boolean
+  longTitle?: boolean
+  wide?: boolean
+  thirdLevel?: boolean
+}) {
+  const [current, setCurrent] = useState(thirdLevel ? "projects/tasks/all" : "projects/tasks")
+  const [compactStatus, setCompactStatus] = useState<StatusFilter>("all")
+  const compact = mode === "compact"
+  const resultData = compact ? data.filter((row) => matchesDashboardWorkStatus(row, compactStatus)) : data
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setCurrent(id)
+  }
+  const isCurrent = (id: string) => current === id || current.startsWith(`${id}/`)
+  const nav = localNav(thirdLevel)
+  const dashboardMenu = (nodes: LocalNode[]): ReactNode =>
+    nodes.map((node) =>
+      node.children ? (
+        <Collapsible
+          key={node.id}
+          data-current={isCurrent(node.id) ? "" : undefined}
+          open={openGroups[node.id] ?? true}
+          onOpenChange={(value) => setOpenGroups((state) => ({ ...state, [node.id]: value }))}
+        >
+          <CollapsibleTrigger asChild><Button variant="ghost" type="button"><ChevronRightIcon aria-hidden="true" />{node.label}</Button></CollapsibleTrigger>
+          <CollapsibleContent className="pl-3">{dashboardMenu(node.children)}</CollapsibleContent>
+        </Collapsible>
+      ) : (
+        <Button key={node.id} variant="ghost" asChild><a href={`#${node.id}`} aria-current={current === node.id ? "page" : undefined} onClick={go(node.id)}>
+          {node.icon ? <node.icon aria-hidden="true" /> : null}
+          {node.label}
+        </a></Button>
+      )
+    )
+  const title = longTitle ? "전사 프로젝트 포트폴리오의 진행 현황과 담당 부서별 업무 상세 현황" : "업무 현황"
+  const sidebar = (
+    <DashboardSidebar>
+      <strong>프로젝트 대시보드</strong>
+      <nav aria-label="Dashboard 업무 메뉴">{dashboardMenu(nav)}</nav>
+      <ProfileMenu side="right" align="end" trigger={
+        <Button type="button" variant="ghost" aria-label={`${profileData.name} 사용자 메뉴`}>
+          <ProfileAvatar />{profileData.name}
+        </Button>
+      } />
+    </DashboardSidebar>
+  )
+
+  // Variant C content: heading, then the result card (Page Header's own 20px bottom spacing; no breadcrumb, actions or KPI cards in the reference).
+  const compactMain = (
+    <DashboardMain id="dashboard-compact-results">
+      <PageHeader>
+        <PageHeaderContent>
+          <PageHeaderTitle>업무 현황을 한눈에 확인하세요</PageHeaderTitle>
+        </PageHeaderContent>
+      </PageHeader>
+      <TaskList data={resultData} loading={loading} compact selectedStatus={compactStatus} onReset={() => setCompactStatus("all")} />
+    </DashboardMain>
+  )
+
+  const main = compact ? compactMain : (
+    <DashboardMain>
+        <PageHeader>
+          <PageHeaderContent>
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#dashboard">홈</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#projects">프로젝트</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>업무 현황</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <PageHeaderTitle>{title}</PageHeaderTitle>
+            <PageHeaderDescription>프로젝트별 업무 진행 상황을 확인하고 조회합니다.</PageHeaderDescription>
+          </PageHeaderContent>
+          <PageHeaderActions>
+            <Button type="button" variant="cancel" appearance="solid">
+              다운로드
+            </Button>
+            <Button type="button" variant="primary">
+              신규 등록
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button type="button" variant="primary" appearance="outline" size="icon" aria-label="더보기">
+                  <MoreHorizontalIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>일괄 수정</DropdownMenuItem>
+                <DropdownMenuItem>보관</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </PageHeaderActions>
+        </PageHeader>
+        <DashboardContent>
+          <Kpis data={data} loading={loading} />
+          <TaskList data={resultData} loading={loading} />
+          {wide ? (
+            <Card>
+              <CardHeader>
+                <CardTitle>넓은 내용</CardTitle>
+                <CardDescription>페이지를 밀지 않고 카드 안에서 가로 스크롤합니다.</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div style={{ overflowX: "auto" }}>
+                  <div style={{ width: 1600, height: 80, background: "var(--hm-sem-bg-content)" }} />
+                </div>
+              </CardContent>
+            </Card>
+          ) : null}
+        </DashboardContent>
+    </DashboardMain>
+  )
+
+  return (
+    <DashboardLayout
+      className={compact ? "dashboard-story dashboard-story-compact" : "dashboard-story"}
+      header={compact ? <CompactHeader data={data} status={compactStatus} onStatusChange={setCompactStatus} /> : mode === "header-sidebar" ? <DashboardHeader><strong>업무 현황</strong></DashboardHeader> : undefined}
+      sidebar={compact ? undefined : sidebar}
+    >
+      {main}
+    </DashboardLayout>
+  )
+}
+
+const frame = (height?: number): CSSProperties | undefined => (height ? ({ "--hm-dashboard-height": `${height}px` } as CSSProperties) : undefined)
+
+// Shared by Storybook and the standalone Vite export. Keeping the representative
+// story composition here prevents the export from becoming a second hand-written UI.
+export function DashboardAll() {
+  return (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="Dashboard"
+        description="업무 화면의 전체 틀입니다. DASHBOARD 단일 모드로, 내부 48px Compact Header와 상태 필터 바 아래에 콘텐츠를 바로 잇습니다."
+      />
+      <StorySection
+        title="Overview"
+        description="Compact Header(48px) · 상태 필터 · 콘텐츠. 최소 폭 960px을 유지하며 좁은 화면에서는 Dashboard 전체를 가로 스크롤합니다."
+      >
+        <DashboardScreen mode="compact" />
+      </StorySection>
+    </StoryPage>
+  )
+}
+
+// Menu label is Dashboard; the fixed id keeps the existing story IDs (patterns-layout-dashboard-layout--*) used by links and QA inventory.
+const meta = { id: "patterns-layout-dashboard-layout", title: "Patterns/Layout/Dashboard", excludeStories: ["DashboardAll"], parameters: { layout: "fullscreen", controls: { disable: true } } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story reproduces the ui_viz Variant C layout (48px Compact Header, centred status bar, content) with HM parts.
+// Operating DASHBOARD Mode has no Sidebar; retained Sidebar examples are compatibility verification only.
+// The page heading and Dashboard's native minimum-width scroll frame share the common Inner.
+export const All: Story = {
+  name: "Dashboard",
+  render: () => <DashboardAll />,
+}
+// Keep existing Sidebar coverage and Story IDs; these are not operating references.
+function SidebarVerification({ children }: { children: ReactNode }) {
+  return <>
+    <p role="note">VERIFICATION ONLY — 운영 사용 금지</p>
+    {children}
+  </>
+}
+export const WithSidebar: Story = { tags: ["verification"], name: "VERIFICATION ONLY — 운영 사용 금지 · Dashboard Header + Sidebar", render: () => <SidebarVerification><Screen mode="header-sidebar" /></SidebarVerification> }
+export const ThirdLevel: Story = { tags: ["verification"], name: "VERIFICATION ONLY — 운영 사용 금지 · Third Level", render: () => <SidebarVerification><Screen mode="sidebar" thirdLevel /></SidebarVerification> }
+export const SidebarOnly: Story = { tags: ["verification"], name: "VERIFICATION ONLY — 운영 사용 금지 · Dashboard Sidebar", render: () => <SidebarVerification><Screen mode="sidebar" /></SidebarVerification> }
+export const LongContent: Story = { tags: ["verification"], name: "VERIFICATION ONLY — 운영 사용 금지 · Long Content", render: () => <SidebarVerification><Screen mode="sidebar" longTitle wide /></SidebarVerification> }
+export const Loading: Story = { tags: ["verification"], render: () => <Screen loading /> }
+export const Empty: Story = { tags: ["verification"], render: () => <Screen data={[]} /> }
+export const Framed: Story = { tags: ["verification"], name: "VERIFICATION ONLY — 운영 사용 금지 · Framed", render: () => <SidebarVerification><div style={frame(640)}><Screen mode="sidebar" /></div></SidebarVerification> }
diff --git a/src/patterns/dashboard-status-contract.css b/src/patterns/dashboard-status-contract.css
new file mode 100644
index 0000000..f15eb4b
--- /dev/null
+++ b/src/patterns/dashboard-status-contract.css
@@ -0,0 +1,2 @@
+/* Compatibility path for existing Storybook and repository-relative HTML imports. */
+@import "../../packages/ui/src/patterns/dashboard-status/dashboard-status.css";
diff --git a/src/patterns/dashboard-work-status.ts b/src/patterns/dashboard-work-status.ts
new file mode 100644
index 0000000..4a08aad
--- /dev/null
+++ b/src/patterns/dashboard-work-status.ts
@@ -0,0 +1,56 @@
+import type { CSSProperties } from "react"
+import {
+  countDashboardFilter,
+  dashboardFilterDefinitions,
+  dashboardFilterIds,
+  dashboardStatusDefinitions,
+  matchesDashboardFilter,
+  type DashboardFilterId,
+  type DashboardStatusId,
+} from "@hm-design/ui"
+
+// Story-local work data. User account states in sample-users.ts are a different domain.
+// Variant C treats issue as an independent flag: a held task can also have an issue.
+export type DashboardWorkStatus = DashboardStatusId
+export type DashboardWorkFilter = DashboardFilterId
+export type DashboardWork = {
+  id: string
+  name: string
+  department: string
+  status: DashboardWorkStatus
+  issue?: boolean
+  createdAt: string
+}
+
+export const dashboardWorkStatus = {
+  all: { label: dashboardFilterDefinitions.all.label, color: "var(--hm-sem-palette-yellow-accent)" },
+  active: { label: dashboardStatusDefinitions.active.label, color: "var(--dashboard-work-progress)" },
+  hold: { label: dashboardStatusDefinitions.hold.label, color: "var(--dashboard-work-hold)" },
+  done: { label: dashboardStatusDefinitions.done.label, color: "var(--hm-dashboard-status-done)" },
+  issue: { label: dashboardFilterDefinitions.issue.label, color: "var(--dashboard-work-issue)" },
+} satisfies Record<DashboardWorkFilter, { label: string; color: string }>
+
+export const dashboardWorkFilters = dashboardFilterIds
+
+// Both filter counts and the existing HM Badge consume this component mapping.
+export const dashboardWorkStyle = (status: DashboardWorkFilter): CSSProperties =>
+  ({ "--dashboard-status-color": dashboardWorkStatus[status].color } as CSSProperties)
+
+export const matchesDashboardWorkStatus = (work: DashboardWork, status: DashboardWorkFilter) =>
+  matchesDashboardFilter(work, status)
+
+export const countDashboardWorkFilter = (works: readonly DashboardWork[], filter: DashboardWorkFilter) => countDashboardFilter(works, filter)
+
+const names = ["대시보드 화면 검토", "업무 자료 정리", "현장 점검 보고", "설계 의견 반영", "품질 검토", "일정 확인", "도면 검수", "안전 점검", "회의록 작성", "최종 보고서 검토"]
+const departments = ["설계팀", "시공팀", "안전관리팀", "품질팀", "경영지원팀"]
+const statuses: DashboardWorkStatus[] = ["hold", "active", "done", "active"]
+
+// Keep pagination coverage without reinterpreting any shared user fixture or public enum.
+export const dashboardWorks: DashboardWork[] = Array.from({ length: 47 }, (_, i) => ({
+  id: `T-${String(i + 1).padStart(3, "0")}`,
+  name: `${names[i % names.length]}${i >= names.length ? ` ${Math.floor(i / names.length) + 1}` : ""}`,
+  department: departments[(i * 3) % departments.length],
+  status: statuses[i % statuses.length],
+  issue: i % 11 === 0,
+  createdAt: new Date(2026, 9, 1 + (i % 28)).toISOString(),
+}))
diff --git a/src/patterns/data-table.stories.tsx b/src/patterns/data-table.stories.tsx
new file mode 100644
index 0000000..2040d94
--- /dev/null
+++ b/src/patterns/data-table.stories.tsx
@@ -0,0 +1,207 @@
+import { useMemo, useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Badge,
+  Button,
+  Combobox,
+  DataTable,
+  DataTableColumnHeader,
+  DataTableViewOptions,
+  DatePicker,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  FilterBar,
+  FilterBarActions,
+  FilterBarSearch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  dataTableSelectColumn,
+  toast,
+  useDataTable,
+  type DataTableColumnDef,
+} from "@hm-design/ui"
+import { MoreHorizontalIcon } from "lucide-react"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+import { formatDate, sameDay, sampleUsers, statusLabel, type SampleUser } from "./sample-users"
+
+// Data Table is a pattern: the HM Table primitive driven by TanStack Table v9 (useDataTable). Columns and data stay referentially stable
+// (module scope / useMemo). Row actions use the HM Dropdown Menu and report through Sonner `toast` (Story composition only).
+
+const statusBadge = (status: SampleUser["status"]) => (
+  <Badge variant={status === "active" ? "default" : status === "pending" ? "secondary" : "outline"}>{statusLabel[status]}</Badge>
+)
+
+const columnLabels = { name: "이름", department: "부서", status: "상태", createdAt: "등록일" }
+
+const columns: DataTableColumnDef<SampleUser>[] = [
+  dataTableSelectColumn<SampleUser>(),
+  { accessorKey: "name", header: ({ column }) => <DataTableColumnHeader column={column} title="이름" /> },
+  { accessorKey: "department", header: "부서" },
+  {
+    accessorKey: "status",
+    header: "상태",
+    cell: ({ row }) => statusBadge(row.original.status),
+    filterFn: "equalsString",
+    enableSorting: false,
+  },
+  {
+    accessorKey: "createdAt",
+    header: ({ column }) => <DataTableColumnHeader column={column} title="등록일" />,
+    cell: ({ row }) => formatDate(row.original.createdAt),
+    filterFn: (row, columnId, value: Date) => sameDay(row.getValue<string>(columnId), value),
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button type="button" variant="primary" appearance="outline" size="icon-sm" aria-label={`${row.original.name} 작업`}>
+            <MoreHorizontalIcon />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onSelect={() => toast(`${row.original.name} 보기`)}>보기</DropdownMenuItem>
+          <DropdownMenuItem onSelect={() => toast(`${row.original.name} 수정`)}>수정</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive" onSelect={() => toast.error(`${row.original.name} 삭제 요청`)}>
+            삭제
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ),
+  },
+]
+
+function Basic({ data = sampleUsers, loading }: { data?: SampleUser[]; loading?: boolean }) {
+  const table = useDataTable({ columns, data, getRowId: (row) => row.id })
+  return (
+    <div className="grid w-full gap-3">
+      <div className="flex justify-end">
+        <DataTableViewOptions table={table} labels={columnLabels} />
+      </div>
+      <DataTable table={table} loading={loading} />
+    </div>
+  )
+}
+
+const statusOptions = [
+  { value: "active", label: "활성" },
+  { value: "pending", label: "대기" },
+  { value: "inactive", label: "비활성" },
+]
+const departmentOptions = [...new Set(sampleUsers.map((u) => u.department))].map((d) => ({ value: d, label: d }))
+
+// Filter Bar → filter state → Data Table: search is the TanStack global filter, status / date are column filters.
+function WithFilterBar() {
+  const data = useMemo(() => sampleUsers, [])
+  const table = useDataTable({ columns, data, getRowId: (row) => row.id })
+  const [search, setSearch] = useState("")
+  const [status, setStatus] = useState("all")
+  const [date, setDate] = useState<Date | undefined>()
+  const [department, setDepartment] = useState<string | undefined>()
+
+  const setSearchValue = (value: string) => {
+    setSearch(value)
+    table.setGlobalFilter(value || undefined)
+  }
+  const reset = () => {
+    setSearch("")
+    setStatus("all")
+    setDate(undefined)
+    setDepartment(undefined)
+    table.resetGlobalFilter(true)
+    table.resetColumnFilters(true)
+  }
+
+  return (
+    <div className="grid w-full gap-4">
+      <FilterBar>
+        <FilterBarSearch value={search} onValueChange={setSearchValue} placeholder="이름·부서 검색" />
+        <Select
+          value={status}
+          onValueChange={(value) => {
+            setStatus(value)
+            table.getColumn("status")?.setFilterValue(value === "all" ? undefined : value)
+          }}
+        >
+          <SelectTrigger size="medium" aria-label="상태">
+            <SelectValue placeholder="상태" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">전체 상태</SelectItem>
+            {statusOptions.map((o) => (
+              <SelectItem key={o.value} value={o.value}>
+                {o.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Combobox
+          controlled
+          size="medium"
+          aria-label="부서"
+          options={departmentOptions}
+          value={department}
+          placeholder="부서"
+          onValueChange={(value) => {
+            setDepartment(value)
+            setSearchValue(value)
+          }}
+        />
+        <DatePicker
+          controlled
+          size="medium"
+          aria-label="등록일"
+          placeholder="등록일"
+          value={date}
+          onValueChange={(value) => {
+            setDate(value)
+            table.getColumn("createdAt")?.setFilterValue(value)
+          }}
+        />
+        <FilterBarActions>
+          <Button type="button" variant="cancel" appearance="outline" onClick={reset}>
+            초기화
+          </Button>
+          <DataTableViewOptions table={table} labels={columnLabels} />
+        </FilterBarActions>
+      </FilterBar>
+      <DataTable table={table} emptyMessage="조건에 맞는 사용자가 없습니다." />
+    </div>
+  )
+}
+
+const meta = { title: "Patterns/Data/Data Table", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: selection (mixed header), sorting, column visibility, row actions and pagination with page size.
+export const All: Story = {
+  name: "Data Table",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="Data Table"
+        description="업무 목록을 표로 보여 주는 Pattern입니다. 선택·정렬·열 표시·페이지 이동을 하나의 표에서 다룹니다."
+      />
+      <StorySection title="Overview" description="행 선택(헤더 혼합 상태), 정렬, 열 표시, 행 작업, 페이지 크기와 페이지 이동을 실제로 조작합니다.">
+        <Basic />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+// Combination Story: Filter Bar (search, status, department, date, reset) filtering the Data Table rows.
+export const WithFilterBarStory: Story = { tags: ["verification"], name: "With Filter Bar", render: () => <WithFilterBar /> }
+
+export const Loading: Story = { tags: ["verification"], render: () => <Basic loading /> }
+export const Empty: Story = { tags: ["verification"], render: () => <Basic data={[]} /> }
diff --git a/src/patterns/filter-bar.stories.tsx b/src/patterns/filter-bar.stories.tsx
new file mode 100644
index 0000000..47f44b9
--- /dev/null
+++ b/src/patterns/filter-bar.stories.tsx
@@ -0,0 +1,94 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Button,
+  Combobox,
+  DatePicker,
+  FilterBar,
+  FilterBarActions,
+  FilterBarSearch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Filter Bar is a layout pattern: the consumer composes the HM controls as children and owns every value. It does not depend on Data Table.
+
+const categories = [
+  { value: "design", label: "설계" },
+  { value: "build", label: "시공" },
+  { value: "safety", label: "안전" },
+]
+
+function Full() {
+  const [search, setSearch] = useState("")
+  const [status, setStatus] = useState("all")
+  const [category, setCategory] = useState<string | undefined>()
+  const [date, setDate] = useState<Date | undefined>()
+  const active = [search, status !== "all" && status, category, date].filter(Boolean).length
+  return (
+    <div className="grid w-full gap-3">
+      <FilterBar>
+        <FilterBarSearch value={search} onValueChange={setSearch} placeholder="검색어 입력" />
+        <Select value={status} onValueChange={setStatus}>
+          <SelectTrigger size="medium" aria-label="상태">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">전체 상태</SelectItem>
+            <SelectItem value="active">활성</SelectItem>
+            <SelectItem value="inactive">비활성</SelectItem>
+          </SelectContent>
+        </Select>
+        <Combobox controlled size="medium" aria-label="분류" options={categories} value={category} onValueChange={setCategory} placeholder="분류" />
+        <DatePicker controlled size="medium" aria-label="날짜" value={date} onValueChange={setDate} placeholder="날짜" />
+        <FilterBarActions>
+          <Button
+            type="button"
+            variant="cancel"
+            appearance="outline"
+            onClick={() => {
+              setSearch("")
+              setStatus("all")
+              setCategory(undefined)
+              setDate(undefined)
+            }}
+          >
+            초기화
+          </Button>
+          <Button type="button" variant="primary" appearance="outline">
+            조회
+          </Button>
+        </FilterBarActions>
+      </FilterBar>
+      <p className="text-sm text-muted-foreground" role="status">
+        적용된 조건 {active}개
+      </p>
+    </div>
+  )
+}
+
+const meta = { title: "Patterns/Data/Filter Bar", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: search, Select, Combobox, Date Picker and the actions row. Narrow it to 390px to see the wrapping.
+export const All: Story = {
+  name: "Filter Bar",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="Filter Bar"
+        description="목록 위에서 조회 조건을 고르는 레이아웃 Pattern입니다. HM 컨트롤을 children으로 조합하며 모든 값은 소비 코드가 소유합니다. Data Table에 의존하지 않습니다."
+      />
+      <StorySection title="Overview" description="검색 · Select · Combobox · Date Picker와 초기화 / 조회 버튼입니다. 폭이 좁으면 줄바꿈됩니다.">
+        <Full />
+      </StorySection>
+    </StoryPage>
+  ),
+}
diff --git a/src/patterns/gnb.stories.tsx b/src/patterns/gnb.stories.tsx
new file mode 100644
index 0000000..718d4f5
--- /dev/null
+++ b/src/patterns/gnb.stories.tsx
@@ -0,0 +1,563 @@
+import { useEffect, useState, type CSSProperties, type MouseEvent, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { BellIcon, ChartColumnIcon, LayoutGridIcon, SearchIcon, SettingsIcon, type LucideIcon } from "lucide-react"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  GNB,
+  GNBBrand,
+  GNBMobileGroup,
+  GNBMobileLink,
+  GNBMobileMenu,
+  GNBNav,
+  GNBUser,
+  GNBUtilities,
+  LNB,
+  LNBGroup,
+  LNBItem,
+  LNBMobileGroup,
+  LNBMobileLink,
+  LNBNav,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// GNB is a composition pattern. Layout visual reference is the ui-viz GNB (green 70px bar, centered menu, Beige current item joined to
+// the content, White 2-depth panel, text-only profile); every part inside is an HM component. The menu data, the user and the current
+// location below are local sample data for this Story only (no network, no auth, no router). The desktop / mobile switch follows the
+// viewport (1024px): narrow the Story to 390px to see the hamburger and the Sheet menu.
+
+type Destination = { id: string; label: string }
+type NavItem = { id: string; label: string; children?: Destination[] }
+
+const navItems: NavItem[] = [
+  { id: "dashboard", label: "대시보드" },
+  {
+    id: "projects",
+    label: "프로젝트",
+    children: [
+      { id: "projects/active", label: "진행 중 프로젝트" },
+      { id: "projects/done", label: "완료 프로젝트" },
+      { id: "projects/templates", label: "프로젝트 템플릿 관리와 기준 설정을 위한 긴 하위 메뉴 이름" },
+    ],
+  },
+  { id: "reports", label: "리포트" },
+  {
+    id: "admin",
+    label: "관리",
+    children: [
+      { id: "admin/users", label: "사용자 관리" },
+      { id: "admin/org", label: "조직 관리" },
+    ],
+  },
+]
+
+const longNavItems: NavItem[] = [
+  { id: "dashboard", label: "통합 대시보드와 현황 요약" },
+  { id: "projects", label: "전사 프로젝트 포트폴리오 관리", children: [{ id: "projects/active", label: "진행 중 프로젝트" }] },
+  { id: "reports", label: "정기 점검 결과 리포트" },
+]
+
+const photo =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="#266651"/><circle cx="40" cy="31" r="14" fill="#bddfd4"/><rect x="14" y="50" width="52" height="40" rx="22" fill="#bddfd4"/></svg>')
+// An address that cannot load, so the Radix fallback shows.
+const brokenPhoto = "data:image/png;base64,broken"
+
+const user = { image: photo, name: "김한맥", description: "프로젝트 관리자" }
+const longUser = { image: brokenPhoto, name: "김한맥 (한맥기술 인프라사업본부 스마트시설팀)", description: "통합 시스템 관리자 · 인프라사업본부" }
+
+// A test logo (not a Hanmac asset), only to check the logo layout.
+const testLogo =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32"><rect width="120" height="32" rx="4" fill="#fff" fill-opacity=".9"/><text x="60" y="21" font-size="13" font-weight="700" text-anchor="middle" fill="#123328">TEST LOGO</text></svg>')
+
+// The content that follows the bar: positioned, later in the DOM, top corners rounded by the join, so the bar's green continues behind it.
+const contentStyle: CSSProperties = {
+  position: "relative",
+  minHeight: 220,
+  padding: 34,
+  borderRadius: "var(--hm-gnb-join) var(--hm-gnb-join) 0 0",
+  background: "var(--hm-sem-bg-content)",
+}
+
+function isCurrent(current: string, id: string) {
+  return current === id || current.startsWith(`${id}/`)
+}
+
+function SearchAction() {
+  return (
+    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button type="button" variant="ghost" size="icon" aria-label="검색">
+              <SearchIcon aria-hidden="true" />
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>검색</TooltipContent>
+      </Tooltip>
+      <PopoverContent align="end" style={{ "--hm-popover-padding": "0", "--hm-popover-width": "320px" } as CSSProperties}>
+        <Command>
+          <CommandInput placeholder="메뉴·프로젝트 검색" />
+          <CommandList>
+            <CommandEmpty>결과가 없습니다.</CommandEmpty>
+            <CommandGroup heading="바로가기">
+              <CommandItem>진행 중 프로젝트</CommandItem>
+              <CommandItem>월간 리포트</CommandItem>
+              <CommandItem>사용자 관리</CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function NotificationAction({ count = 3 }: { count?: number }) {
+  return (
+    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <PopoverTrigger asChild>
+            <Button type="button" variant="ghost" size="icon" aria-label={`알림 ${count}건`} style={{ position: "relative" }}>
+              <BellIcon aria-hidden="true" />
+              <Badge
+                variant="destructive"
+                aria-hidden="true"
+                className="size-6"
+                style={{ position: "absolute", top: -8, right: -8, padding: 0, borderRadius: "50%" }}
+              >
+                {count}
+              </Badge>
+            </Button>
+          </PopoverTrigger>
+        </TooltipTrigger>
+        <TooltipContent>알림</TooltipContent>
+      </Tooltip>
+      <PopoverContent align="end" style={{ "--hm-popover-width": "300px" } as CSSProperties}>
+        <div className="grid gap-2">
+          <p className="font-bold">새 알림</p>
+          <p>1호선 구간 점검 결과가 등록되었습니다.</p>
+          <p>월간 리포트 승인이 요청되었습니다.</p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function UserMenu({ person, defaultOpen }: { person: { name: string; description: string; image?: string }; defaultOpen?: boolean }) {
+  return (
+    <DropdownMenu defaultOpen={defaultOpen}>
+      <DropdownMenuTrigger asChild>
+        <GNBUser name={person.name} description={person.description}>
+          <Avatar>
+            {person.image ? <AvatarImage src={person.image} alt="" /> : null}
+            <AvatarFallback>{person.name.slice(0, 1)}</AvatarFallback>
+          </Avatar>
+        </GNBUser>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>{person.name}</DropdownMenuLabel>
+        <DropdownMenuItem>프로필</DropdownMenuItem>
+        <DropdownMenuItem>설정</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">로그아웃</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function Bar({
+  items = navItems,
+  person = user,
+  eyebrow = "한맥 업무 시스템",
+  brand = "프로젝트 대시보드",
+  logo,
+  initial = "dashboard",
+  openMenu,
+  userOpen,
+  mobileOpen,
+  sticky,
+  utilities,
+  onCurrent,
+  current: currentProp,
+  mobileChildren,
+  mobileMenuOpen,
+  onMobileMenuOpenChange,
+}: {
+  items?: NavItem[]
+  person?: { name: string; description: string }
+  eyebrow?: string
+  brand?: string
+  logo?: string
+  initial?: string
+  openMenu?: string
+  userOpen?: boolean
+  mobileOpen?: boolean
+  sticky?: boolean
+  utilities?: boolean
+  onCurrent?: (id: string) => void
+  current?: string
+  mobileChildren?: ReactNode
+  mobileMenuOpen?: boolean
+  onMobileMenuOpenChange?: (open: boolean) => void
+}) {
+  const [localCurrent, setCurrent] = useState(initial)
+  const current = currentProp ?? localCurrent
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    if (currentProp === undefined) setCurrent(id)
+    onCurrent?.(id)
+  }
+  return (
+    <GNB sticky={sticky}>
+      <GNBMobileMenu title="메뉴" defaultOpen={mobileOpen} open={mobileMenuOpen} onOpenChange={onMobileMenuOpenChange}>
+        {mobileChildren ?? items.map((item) =>
+          item.children ? (
+            <GNBMobileGroup key={item.id} label={item.label}>
+              {item.children.map((child) => (
+                <GNBMobileLink key={child.id} href={`#${child.id}`} active={current === child.id} onClick={go(child.id)}>
+                  {child.label}
+                </GNBMobileLink>
+              ))}
+            </GNBMobileGroup>
+          ) : (
+            <GNBMobileLink key={item.id} href={`#${item.id}`} active={current === item.id} onClick={go(item.id)}>
+              {item.label}
+            </GNBMobileLink>
+          )
+        )}
+      </GNBMobileMenu>
+      <GNBBrand href="#dashboard" onClick={go("dashboard")}>
+        {logo ? <img src={logo} alt="" /> : null}
+        <span>
+          {eyebrow ? <small>{eyebrow}</small> : null}
+          <strong>{brand}</strong>
+        </span>
+      </GNBBrand>
+      <GNBNav>
+        <NavigationMenu viewport={false} aria-label="주 메뉴" defaultValue={openMenu}>
+          <NavigationMenuList>
+            {items.map((item) =>
+              item.children ? (
+                <NavigationMenuItem key={item.id} value={item.id}>
+                  <NavigationMenuTrigger aria-current={isCurrent(current, item.id) ? "page" : undefined}>{item.label}</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul>
+                      {item.children.map((child) => (
+                        <li key={child.id}>
+                          <NavigationMenuLink href={`#${child.id}`} active={current === child.id} onClick={go(child.id)}>
+                            {child.label}
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </NavigationMenuItem>
+              ) : (
+                <NavigationMenuItem key={item.id}>
+                  <NavigationMenuLink href={`#${item.id}`} active={current === item.id} onClick={go(item.id)}>
+                    {item.label}
+                  </NavigationMenuLink>
+                </NavigationMenuItem>
+              )
+            )}
+          </NavigationMenuList>
+        </NavigationMenu>
+      </GNBNav>
+      <GNBUtilities>
+        {utilities ? (
+          <>
+            <SearchAction />
+            <NotificationAction />
+          </>
+        ) : null}
+        <UserMenu person={person} defaultOpen={userOpen} />
+      </GNBUtilities>
+    </GNB>
+  )
+}
+
+// The bar with the content that follows it (the GNB Mode page owns this part; here it only shows the join).
+function Page({ children, label }: { children: ReactNode; label?: string }) {
+  return (
+    <div>
+      {children}
+      <div style={contentStyle}>
+        <p className="text-sm text-muted-foreground">{label ?? "연결된 콘텐츠 영역: GNB는 자기 높이와 12px 접점까지만 차지합니다."}</p>
+      </div>
+    </div>
+  )
+}
+
+function StickyPage() {
+  return (
+    <div
+      role="region"
+      aria-label="Sticky GNB 스크롤 예시"
+      tabIndex={0}
+      style={{ height: 360, overflow: "auto", scrollbarWidth: "none" }}
+    >
+      <Bar sticky />
+      <div style={{ ...contentStyle, minHeight: 900 }} className="grid content-start gap-3 text-sm text-muted-foreground">
+        {Array.from({ length: 24 }, (_, i) => (
+          <p key={i}>스크롤 본문 {i + 1}</p>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Consumer-owned data and route state; every menu face/disclosure is an existing public LNB part.
+type SidebarNode = { id: string; label: string; icon?: LucideIcon; children?: SidebarNode[] }
+const sidebarNodes: SidebarNode[] = [
+  { id: "dashboard", label: "대시보드", icon: LayoutGridIcon },
+  {
+    id: "projects", label: "프로젝트 관리", children: [
+      { id: "projects/design", label: "디자인 관리", children: [
+        { id: "projects/design/tokens", label: "토큰 관리" },
+        { id: "projects/design/components", label: "컴포넌트 설계와 사용 규칙을 검토하는 긴 메뉴 이름" },
+        { id: "projects/design/layout", label: "레이아웃 관리" },
+      ] },
+      { id: "projects/tasks", label: "업무 목록" },
+      { id: "projects/schedule", label: "일정 관리" },
+      ...Array.from({ length: 8 }, (_, i) => ({ id: `projects/extra-${i + 1}`, label: `프로젝트 점검 메뉴 ${i + 1}` })),
+    ],
+  },
+  { id: "reports", label: "현황 보고", icon: ChartColumnIcon },
+  { id: "admin", label: "관리", children: [
+    { id: "admin/users", label: "사용자 관리" },
+    { id: "admin/org", label: "조직 관리" },
+  ] },
+  { id: "settings", label: "설정", icon: SettingsIcon },
+]
+const sidebarGnbItems: NavItem[] = navItems.map(item => item.id === "projects" ? {
+  ...item, children: [
+    { id: "projects/design/tokens", label: "토큰 관리" },
+    { id: "projects/tasks", label: "업무 목록" },
+  ],
+} : item)
+
+function SidebarPage({ fullHeight = false }: { fullHeight?: boolean }) {
+  const [current, setCurrent] = useState("projects/design/tokens")
+  const [groups, setGroups] = useState<Record<string, boolean>>({ projects: true, "projects/design": true })
+  const [mobileOpen, setMobileOpen] = useState(false)
+  // Same 1024/1023 contract as LNBMobileMenu; the sole Sheet belongs to the GNB header.
+  useEffect(() => {
+    const desktop = window.matchMedia("(min-width: 1024px)")
+    const closeOnDesktop = () => { if (desktop.matches) setMobileOpen(false) }
+    desktop.addEventListener("change", closeOnDesktop)
+    return () => desktop.removeEventListener("change", closeOnDesktop)
+  }, [])
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setCurrent(id)
+    // LNBMobileLink has its own context: close this GNB-owned Sheet in the shared route handler.
+    setMobileOpen(false)
+  }
+  const desktopMenu = (nodes: SidebarNode[]): ReactNode => nodes.map(node => node.children ? (
+    <LNBGroup key={node.id} label={node.label} current={isCurrent(current, node.id)}
+      open={groups[node.id] ?? false} onOpenChange={open => setGroups(state => ({ ...state, [node.id]: open }))}>
+      {desktopMenu(node.children)}
+    </LNBGroup>
+  ) : (
+    <LNBItem key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
+      {node.icon ? <node.icon aria-hidden="true" /> : null}{node.label}
+    </LNBItem>
+  ))
+  // LNB's existing mobile view is an expanded link list, not a new disclosure menu.
+  const mobileMenu = (nodes: SidebarNode[]): ReactNode => nodes.map(node => node.children ? (
+    <LNBMobileGroup key={node.id} label={node.label}>{mobileMenu(node.children)}</LNBMobileGroup>
+  ) : (
+    <LNBMobileLink key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>{node.label}</LNBMobileLink>
+  ))
+  return (
+    <div data-hm-gnb-layout="sidebar" style={{ height: fullHeight ? "100dvh" : 560 }}>
+      <Bar items={sidebarGnbItems} current={current} onCurrent={setCurrent}
+        mobileMenuOpen={mobileOpen} onMobileMenuOpenChange={setMobileOpen}
+        mobileChildren={<div data-slot="lnb-mobile-nav">{mobileMenu(sidebarNodes)}</div>} />
+      <div data-hm-gnb-body>
+        <LNB data-hm-gnb-sidebar>
+          <LNBNav aria-label="서비스 메뉴">{desktopMenu(sidebarNodes)}</LNBNav>
+        </LNB>
+        <main data-hm-gnb-main>
+          <div style={{ padding: contentStyle.padding }}>
+            <h2 className="text-lg font-bold">프로젝트 업무 화면</h2>
+            <p className="mt-2 text-sm text-muted-foreground" data-current-menu>선택: {current}</p>
+            <p className="mt-4 text-sm">선택한 메뉴의 콘텐츠를 표시합니다.</p>
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+const meta = { title: "Patterns/Layout/GNB", component: GNB, parameters: { layout: "fullscreen", controls: { disable: true } } } satisfies Meta<typeof GNB>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the green bar with a current item, an open 2-depth panel, long labels, a logo, the optional utility icons and
+// sticky. Menus and the user menu open for real. Narrow the page to 390px for the mobile bar (hamburger → Sheet).
+// Each GNB fills its specimen parent inside the same Inner as the page and section headings.
+export const All: Story = {
+  name: "GNB",
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="GNB"
+        description="서비스 최상단의 전역 내비게이션입니다. 1024px 이상은 Desktop 메뉴, 1023px 이하는 햄버거 → Sheet 메뉴를 사용합니다."
+      />
+      <StorySection
+        title="Overview"
+        description="현재 위치(대시보드)는 Beige 면이 아래 콘텐츠와 오목하게 이어집니다. hover는 Black 10%. 프로젝트·관리는 hover/click으로 White 하위 패널이 열립니다."
+      >
+        <Page>
+          <Bar />
+        </Page>
+      </StorySection>
+      <StorySection
+        title="States · Navigation Menu Open"
+        description="프로젝트 메뉴가 열려 White 면으로 패널과 이어지고, 하위 현재 위치(진행 중 프로젝트)는 Beige로 표시됩니다. 긴 하위 이름은 Desktop 패널 폭을 확장하여 한 줄로 표시합니다."
+      >
+        <div style={{ minHeight: 360 }}>
+          <Page label="프로젝트 > 진행 중 프로젝트">
+            <Bar initial="projects/active" openMenu="projects" />
+          </Page>
+        </div>
+      </StorySection>
+      <StorySection
+        title="Variants · Long Labels"
+        description="긴 브랜드명·메뉴명·사용자명. 브랜드와 사용자 글자는 말줄임, 메뉴 항목은 줄바꿈 없이 유지되고 공간을 넘으면 메뉴 영역에서 잘립니다."
+      >
+        <Page>
+          <Bar items={longNavItems} person={longUser} eyebrow="한맥기술 인프라 통합 시스템" brand="스마트 시설물 통합 관리 시스템" />
+        </Page>
+      </StorySection>
+      <StorySection
+        title="Variants · With Logo"
+        description="로고 asset이 있을 때만 왼쪽에 원본 비율로 놓입니다. 없으면 영역·간격 없이 글자만 둡니다(Overview). 표시 이미지는 배치 확인용 테스트 이미지이며 한맥 로고가 아닙니다."
+      >
+        <Page>
+          <Bar logo={testLogo} />
+        </Page>
+      </StorySection>
+      <StorySection
+        title="Variants · Utilities"
+        description="선택 사항. ui-viz의 GNB 오른쪽은 이름·역할만 둡니다. 검색·알림이 필요한 서비스는 HM ghost Button 아이콘을 GNBUtilities에 조합합니다(Tooltip, Badge, Popover, Command)."
+      >
+        <Page>
+          <Bar utilities />
+        </Page>
+      </StorySection>
+      <StorySection
+        title="Usage · Sticky"
+        description="일반 GNB와 같은 외형으로 스크롤 영역 상단에 붙습니다. 본문 위에서 휠/터치로 스크롤하거나 영역에 포커스한 뒤 PageDown/End/Home 키로 확인합니다."
+      >
+        <StickyPage />
+      </StorySection>
+      <StorySection title="Usage · GNB Sidebar"
+        description="GNB ONLY 내부 Sidebar입니다. 기존 LNB 메뉴를 그대로 사용하고 외곽 배경만 Green Light 2로 바꿉니다. 모바일은 GNB의 단일 Sheet에 같은 메뉴를 표시합니다.">
+        <SidebarPage />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Default: Story = { tags: ["verification"], render: () => <Page><Bar /></Page> }
+export const Sticky: Story = { tags: ["verification"], render: () => <StickyPage /> }
+export const Sidebar: Story = { tags: ["verification"], name: "GNB Sidebar", render: () => <SidebarPage fullHeight /> }
+export const NavigationMenuOpen: Story = {
+  tags: ["verification"],
+  name: "Navigation Menu Open",
+  render: () => (
+    <div style={{ minHeight: 360 }}>
+      <Page label="프로젝트 > 진행 중 프로젝트">
+        <Bar initial="projects/active" openMenu="projects" />
+      </Page>
+    </div>
+  ),
+}
+export const ShortDepthOpen: Story = {
+  tags: ["verification"],
+  render: () => <Page><Bar openMenu="admin" /></Page>,
+}
+export const RightEdgeLongDepth: Story = {
+  tags: ["verification"],
+  render: () => <Page><Bar openMenu="admin" items={navItems.map((item) => item.id === "admin" ? { ...item, children: navItems[1].children } : item)} /></Page>,
+}
+
+// First / middle / last parents, each with the same short / long 2Depth labels.
+// Position and width remain Production GNB's; Stories only supply menu data.
+const depthAlignmentItems = (long: boolean): NavItem[] => ["first", "middle", "last"].map((id, index) => ({
+  id,
+  label: ["첫 메뉴", "중간 메뉴", "마지막 메뉴"][index],
+  children: long ? navItems[1].children : [{ id: `${id}/short`, label: "짧은 메뉴" }],
+}))
+const depthAlignmentRender = (openMenu: string, long: boolean) => () => <Page><Bar items={depthAlignmentItems(long)} openMenu={openMenu} /></Page>
+export const FirstDepthShort: Story = { tags: ["verification"], render: depthAlignmentRender("first", false) }
+export const FirstDepthLong: Story = { tags: ["verification"], render: depthAlignmentRender("first", true) }
+export const MiddleDepthShort: Story = { tags: ["verification"], render: depthAlignmentRender("middle", false) }
+export const MiddleDepthLong: Story = { tags: ["verification"], render: depthAlignmentRender("middle", true) }
+export const LastDepthShort: Story = { tags: ["verification"], render: depthAlignmentRender("last", false) }
+export const LastDepthLong: Story = { tags: ["verification"], render: depthAlignmentRender("last", true) }
+export const EdgeFirstLong: Story = {
+  tags: ["verification"],
+  render: () => <div style={{ width: 600, maxWidth: "100%" }}><Page><Bar items={depthAlignmentItems(true)} openMenu="first" /></Page></div>,
+}
+export const EdgeLastLong: Story = {
+  tags: ["verification"],
+  render: () => <div style={{ width: 600, maxWidth: "100%", marginLeft: "auto" }}><Page><Bar items={depthAlignmentItems(true)} openMenu="last" /></Page></div>,
+}
+export const UserMenuOpen: Story = { tags: ["verification"], name: "User Menu Open", render: () => <Page><Bar userOpen /></Page> }
+export const LongLabels: Story = {
+  tags: ["verification"],
+  name: "Long Labels",
+  render: () => (
+    <Page>
+      <Bar items={longNavItems} person={longUser} eyebrow="한맥기술 인프라 통합 시스템" brand="스마트 시설물 통합 관리 시스템" />
+    </Page>
+  ),
+}
+export const WithLogo: Story = { tags: ["verification"], name: "With Logo", render: () => <Page><Bar logo={testLogo} /></Page> }
+export const Utilities: Story = { tags: ["verification"], render: () => <Page><Bar utilities /></Page> }
+// Mobile verification: use a 390px viewport (the switch is a viewport media query, so it cannot be shown inside a narrow container).
+export const Mobile: Story = { tags: ["verification"], globals: { viewport: { value: "hmMobile390", isRotated: false } }, render: () => <Page><Bar initial="projects/active" utilities /></Page> }
+export const MobileMenuOpen: Story = {
+  tags: ["verification"],
+  name: "Mobile Menu Open",
+  globals: { viewport: { value: "hmMobile390", isRotated: false } },
+  render: () => (
+    <Page>
+      <Bar initial="projects/active" mobileOpen />
+    </Page>
+  ),
+}
diff --git a/src/patterns/lnb.stories.tsx b/src/patterns/lnb.stories.tsx
new file mode 100644
index 0000000..32351b5
--- /dev/null
+++ b/src/patterns/lnb.stories.tsx
@@ -0,0 +1,756 @@
+import { Fragment, useState, type CSSProperties, type MouseEvent, type ReactNode } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { ChartColumnIcon, LayoutGridIcon, ListChecksIcon, SettingsIcon, type LucideIcon } from "lucide-react"
+import {
+  GNB,
+  GNBBrand,
+  GNBMobileMenu,
+  GNBNav,
+  GNBUser,
+  GNBUtilities,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  LNB,
+  LNBBrand,
+  LNBGroup,
+  LNBItem,
+  LNBNav,
+  LNBProfile,
+  LNBMobileHeader,
+  LNBMobileBrand,
+  LNBMobileGroup,
+  LNBMobileLink,
+  LNBMobileMenu,
+} from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// LNB is a composition pattern. Layout visual reference is the ui-viz LNB (272px green column, 18/700 items, Beige current item joined
+// to the content, Black 10% hover, Black 20% open group). The menu data and the current location are local sample data for this Story
+// (no router). The content next to the column is a positioned surface with `--hm-lnb-join` rounded left corners: the LNB Mode page
+// owns it, here it only shows the connection. The column is desktop only (hidden below 1024px).
+
+const testLogo =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32"><rect width="120" height="32" rx="4" fill="#fff" fill-opacity=".9"/><text x="60" y="21" font-size="13" font-weight="700" text-anchor="middle" fill="#123328">TEST LOGO</text></svg>')
+
+const photo =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="#266651"/><circle cx="40" cy="31" r="14" fill="#bddfd4"/><rect x="14" y="50" width="52" height="40" rx="22" fill="#bddfd4"/></svg>')
+// An address that cannot load, so the Radix fallback shows.
+const brokenPhoto = "data:image/png;base64,broken"
+
+const profileData = {
+  name: "김한맥",
+  description: "프로젝트 관리자",
+  photo,
+  fallback: "김",
+}
+
+const profileActions: { label: string; destructive?: boolean }[] = [
+  { label: "프로필 설정" },
+  { label: "로그아웃", destructive: true },
+]
+
+function ProfileAvatar() {
+  return (
+    <Avatar>
+      <AvatarImage src={profileData.photo} alt="" />
+      <AvatarFallback>{profileData.fallback}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+function ProfileMenu({ trigger, side = "bottom", align = "start", modal, matchTrigger = false, defaultOpen = false }: { trigger: ReactNode; side?: "top" | "right" | "bottom" | "left"; align?: "start" | "center" | "end"; modal?: boolean; matchTrigger?: boolean; defaultOpen?: boolean }) {
+  return (
+    <DropdownMenu modal={modal} defaultOpen={defaultOpen}>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent side={side} align={align} className={matchTrigger ? "min-w-(--radix-dropdown-menu-trigger-width)" : undefined}>
+        <DropdownMenuLabel>{profileData.name}</DropdownMenuLabel>
+        {profileActions.map((action) => (
+          <Fragment key={action.label}>
+            {action.destructive ? <DropdownMenuSeparator /> : null}
+            <DropdownMenuItem variant={action.destructive ? "destructive" : "default"}>{action.label}</DropdownMenuItem>
+          </Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const shellStyle: CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "var(--hm-lnb-width) minmax(0, 1fr)",
+  minHeight: 460,
+  background: "var(--hm-lnb-background-end)",
+}
+const contentStyle: CSSProperties = {
+  position: "relative",
+  // Keep connected content in the second track when the first-track LNB becomes display:none at <=1023px.
+  // Without explicit placement, Grid auto-placement moves it into the now-empty 0px LNB track.
+  gridColumn: 2,
+  minWidth: 0,
+  padding: 34,
+  borderRadius: "var(--hm-lnb-join) 0 0 var(--hm-lnb-join)",
+  background: "var(--hm-sem-bg-content)",
+}
+
+type Child = { id: string; label: string }
+type LocalNode = { id: string; label: string; icon?: LucideIcon; children?: LocalNode[] }
+
+function Menu({
+  initial = "overview",
+  groupOpen = true,
+  logo,
+  eyebrow = "한맥 업무 시스템",
+  brand = "프로젝트 대시보드",
+  longLabels,
+  many,
+  height,
+  profile = true,
+}: {
+  initial?: string | null
+  groupOpen?: boolean
+  logo?: string
+  eyebrow?: string
+  /** `null`: no LNBBrand (a GNB above carries the service identity). */
+  brand?: string | null
+  longLabels?: boolean
+  many?: boolean
+  height?: number
+  /** Story composition only: GNB + LNB gives profile ownership to the GNB. */
+  profile?: boolean
+}) {
+  const [current, setCurrent] = useState<string | null>(initial)
+  const [open, setOpen] = useState(groupOpen)
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setCurrent(id)
+  }
+  const children: Child[] = longLabels
+    ? [
+        { id: "tasks/list", label: "전사 프로젝트 포트폴리오의 진행 현황 목록" },
+        { id: "tasks/board", label: "업무 보드" },
+      ]
+    : [
+        { id: "tasks/list", label: "메뉴 2-1" },
+        { id: "tasks/board", label: "메뉴 2-2" },
+      ]
+  const extra = many ? Array.from({ length: 8 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}` })) : []
+  return (
+    <div style={{ ...shellStyle, height }}>
+      <LNB>
+        {brand !== null ? (
+          <LNBBrand>
+            {logo ? <img src={logo} alt="" /> : null}
+            <span>
+              {eyebrow ? <small>{eyebrow}</small> : null}
+              <strong>{brand}</strong>
+            </span>
+          </LNBBrand>
+        ) : null}
+        <LNBNav aria-label="서비스 메뉴">
+          <LNBItem href="#overview" active={current === "overview"} onClick={go("overview")}>
+            <LayoutGridIcon aria-hidden="true" />
+            {longLabels ? "프로젝트 현황과 전체 일정을 한눈에 보는 개요" : "메뉴 1"}
+          </LNBItem>
+          <LNBGroup label={longLabels ? "업무 관리와 진행 상황 점검" : "메뉴 2"} current={Boolean(current?.startsWith("tasks/"))} open={open} onOpenChange={setOpen}>
+            {children.map((child) => (
+              <LNBItem key={child.id} href={`#${child.id}`} active={current === child.id} onClick={go(child.id)}>
+                {child.label}
+              </LNBItem>
+            ))}
+          </LNBGroup>
+          <LNBItem href="#reports" active={current === "reports"} onClick={go("reports")}>
+            <ChartColumnIcon aria-hidden="true" />
+            메뉴 3
+          </LNBItem>
+          <LNBItem href="#settings" active={current === "settings"} onClick={go("settings")}>
+            <SettingsIcon aria-hidden="true" />
+            메뉴 4
+          </LNBItem>
+          {extra.map((item) => (
+            <LNBItem key={item.id} href={`#${item.id}`} active={current === item.id} onClick={go(item.id)}>
+              <ListChecksIcon aria-hidden="true" />
+              {item.label}
+            </LNBItem>
+          ))}
+        </LNBNav>
+        {profile ? (
+          <ProfileMenu
+            side="right"
+            align="end"
+            matchTrigger
+            trigger={
+              <LNBProfile name={longLabels ? "김한맥 (한맥기술 인프라사업본부 스마트시설팀)" : profileData.name} description={longLabels ? "통합 시스템 관리자 · 인프라사업본부" : profileData.description}>
+                <Avatar>
+                  <AvatarImage src={longLabels ? brokenPhoto : profileData.photo} alt="" />
+                  <AvatarFallback>{profileData.fallback}</AvatarFallback>
+                </Avatar>
+              </LNBProfile>
+            }
+          />
+        ) : null}
+      </LNB>
+      <div style={contentStyle}>
+        <h2 className="text-lg font-bold">연결된 콘텐츠</h2>
+        <p className="text-sm text-muted-foreground" data-current-menu>
+          선택: {current ?? "없음"}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+// 3-depth: an `LNBGroup` nested in a group (no depth prop). The selected link is `active`, every group on its path is `current`, and
+// each group's `open` is kept here so the nested group stays open after the outer one is closed and reopened.
+const thirdLevelChildren = (long?: boolean): Child[] =>
+  long
+    ? [
+        { id: "projects/design/tokens", label: "컬러 토큰" },
+        { id: "projects/design/components", label: "컴포넌트 스타일 규칙" },
+        { id: "projects/design/layout", label: "레이아웃 규칙과 화면 폭별 여백 그리드 기준" },
+      ]
+    : [
+        { id: "projects/design/tokens", label: "컬러 토큰" },
+        { id: "projects/design/components", label: "컴포넌트 스타일" },
+        { id: "projects/design/layout", label: "레이아웃 규칙" },
+      ]
+
+function ThirdLevelMenu({
+  initial = "projects/design/tokens",
+  projectOpen = true,
+  designOpen = true,
+  longLabels,
+  many,
+  height,
+}: {
+  initial?: string | null
+  projectOpen?: boolean
+  designOpen?: boolean
+  longLabels?: boolean
+  many?: boolean
+  height?: number
+}) {
+  const [current, setCurrent] = useState<string | null>(initial)
+  const extra = many ? Array.from({ length: 6 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}` })) : []
+  const [open, setOpen] = useState({ projects: projectOpen, design: designOpen })
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setCurrent(id)
+  }
+  const onPath = (id: string) => Boolean(current?.startsWith(`${id}/`))
+  return (
+    <div style={{ ...shellStyle, height }}>
+      <LNB>
+        <LNBBrand>
+          <span>
+            <small>한맥 업무 시스템</small>
+            <strong>프로젝트 대시보드</strong>
+          </span>
+        </LNBBrand>
+        <LNBNav aria-label="서비스 메뉴">
+          <LNBItem href="#overview" active={current === "overview"} onClick={go("overview")}>
+            <LayoutGridIcon aria-hidden="true" />
+            대시보드
+          </LNBItem>
+          <LNBGroup label="프로젝트 관리" current={onPath("projects")} open={open.projects} onOpenChange={(value) => setOpen((state) => ({ ...state, projects: value }))}>
+            <LNBGroup label="디자인 관리" current={onPath("projects/design")} open={open.design} onOpenChange={(value) => setOpen((state) => ({ ...state, design: value }))}>
+              {thirdLevelChildren(longLabels).map((child) => (
+                <LNBItem key={child.id} href={`#${child.id}`} active={current === child.id} onClick={go(child.id)}>
+                  {child.label}
+                </LNBItem>
+              ))}
+            </LNBGroup>
+            <LNBItem href="#projects/tasks" active={current === "projects/tasks"} onClick={go("projects/tasks")}>
+              업무 목록
+            </LNBItem>
+            <LNBItem href="#projects/schedule" active={current === "projects/schedule"} onClick={go("projects/schedule")}>
+              일정 관리
+            </LNBItem>
+          </LNBGroup>
+          <LNBItem href="#reports" active={current === "reports"} onClick={go("reports")}>
+            <ChartColumnIcon aria-hidden="true" />
+            현황 보고
+          </LNBItem>
+          <LNBItem href="#settings" active={current === "settings"} onClick={go("settings")}>
+            <SettingsIcon aria-hidden="true" />
+            설정
+          </LNBItem>
+          {extra.map((item) => (
+            <LNBItem key={item.id} href={`#${item.id}`} active={current === item.id} onClick={go(item.id)}>
+              <ListChecksIcon aria-hidden="true" />
+              {item.label}
+            </LNBItem>
+          ))}
+        </LNBNav>
+        <ProfileMenu side="right" align="end" matchTrigger trigger={<LNBProfile name={profileData.name} description={profileData.description}><ProfileAvatar /></LNBProfile>} />
+      </LNB>
+      <div style={contentStyle}>
+        <h2 className="text-lg font-bold">연결된 콘텐츠</h2>
+        <p className="text-sm text-muted-foreground" data-current-menu>
+          선택: {current ?? "없음"}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function localProfile(longLabels?: boolean) {
+  return {
+    name: longLabels ? "김한맥 (한맥기술 인프라사업본부 스마트시설팀)" : profileData.name,
+    description: longLabels ? "통합 시스템 관리자 · 인프라사업본부" : profileData.description,
+    photo: longLabels ? brokenPhoto : profileData.photo,
+  }
+}
+
+function simpleNav(longLabels?: boolean, many?: boolean): LocalNode[] {
+  const children: LocalNode[] = longLabels
+    ? [
+        { id: "tasks/list", label: "전사 프로젝트 포트폴리오의 진행 현황 목록" },
+        { id: "tasks/board", label: "업무 보드" },
+      ]
+    : [
+        { id: "tasks/list", label: "메뉴 2-1" },
+        { id: "tasks/board", label: "메뉴 2-2" },
+      ]
+  const extra: LocalNode[] = many ? Array.from({ length: 8 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}`, icon: ListChecksIcon })) : []
+  return [
+    { id: "overview", label: longLabels ? "프로젝트 현황과 전체 일정을 한눈에 보는 개요" : "메뉴 1", icon: LayoutGridIcon },
+    { id: "tasks", label: longLabels ? "업무 관리와 진행 상황 점검" : "메뉴 2", children },
+    { id: "reports", label: "메뉴 3", icon: ChartColumnIcon },
+    { id: "settings", label: "메뉴 4", icon: SettingsIcon },
+    ...extra,
+  ]
+}
+
+function thirdLevelNav(longLabels?: boolean, many?: boolean): LocalNode[] {
+  const extra: LocalNode[] = many ? Array.from({ length: 6 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}`, icon: ListChecksIcon })) : []
+  return [
+    { id: "overview", label: "대시보드", icon: LayoutGridIcon },
+    {
+      id: "projects",
+      label: "프로젝트 관리",
+      children: [
+        { id: "projects/design", label: "디자인 관리", children: thirdLevelChildren(longLabels) },
+        { id: "projects/tasks", label: "업무 목록" },
+        { id: "projects/schedule", label: "일정 관리" },
+      ],
+    },
+    { id: "reports", label: "현황 보고", icon: ChartColumnIcon },
+    { id: "settings", label: "설정", icon: SettingsIcon },
+    ...extra,
+  ]
+}
+
+// Story-only responsive composition. Desktop LNB and mobile Sheet are two views over one tree and one state source.
+function ResponsiveSpecimen({
+  nodes,
+  initial,
+  initialOpen,
+  logo,
+  eyebrow = "한맥 업무 시스템",
+  brand = "프로젝트 대시보드",
+  longLabels,
+  height,
+}: {
+  nodes: LocalNode[]
+  initial: string | null
+  initialOpen: Record<string, boolean>
+  logo?: string
+  eyebrow?: string
+  brand?: string
+  longLabels?: boolean
+  height?: number
+}) {
+  const [current, setCurrent] = useState<string | null>(initial)
+  const [open, setOpen] = useState<Record<string, boolean>>(initialOpen)
+  const profile = localProfile(longLabels)
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setCurrent(id)
+  }
+  const onPath = (id: string) => Boolean(current?.startsWith(`${id}/`))
+  const isOpen = (id: string) => open[id] ?? true
+  const lnbMenu = (items: LocalNode[]): ReactNode =>
+    items.map((node) =>
+      node.children ? (
+        <LNBGroup
+          key={node.id}
+          label={node.label}
+          current={onPath(node.id)}
+          open={isOpen(node.id)}
+          onOpenChange={(value) => setOpen((state) => ({ ...state, [node.id]: value }))}
+        >
+          {lnbMenu(node.children)}
+        </LNBGroup>
+      ) : (
+        <LNBItem key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
+          {node.icon ? <node.icon aria-hidden="true" /> : null}
+          {node.label}
+        </LNBItem>
+      )
+    )
+  const sheetMenu = (items: LocalNode[]): ReactNode =>
+    items.map((node) =>
+      node.children ? (
+        <LNBMobileGroup key={node.id} label={node.label} data-open={isOpen(node.id) ? "" : undefined}>
+          {isOpen(node.id) ? sheetMenu(node.children) : null}
+        </LNBMobileGroup>
+      ) : (
+        <LNBMobileLink key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
+          {node.label}
+        </LNBMobileLink>
+      )
+    )
+  const brandContent = (
+    <>
+      {logo ? <img src={logo} alt="" /> : null}
+      <span>
+        {eyebrow ? <small>{eyebrow}</small> : null}
+        <strong>{brand}</strong>
+      </span>
+    </>
+  )
+  const profileTrigger = (
+    <LNBProfile name={profile.name} description={profile.description}>
+      <Avatar>
+        <AvatarImage src={profile.photo} alt="" />
+        <AvatarFallback>{profileData.fallback}</AvatarFallback>
+      </Avatar>
+    </LNBProfile>
+  )
+  return (
+    <div
+      className="grid min-w-0 grid-cols-1 bg-[var(--hm-lnb-background-end)] lg:grid-cols-[var(--hm-lnb-width)_minmax(0,1fr)]"
+      style={{ minHeight: height ?? 460, height }}
+      data-story-slot="responsive-lnb-specimen"
+    >
+      <LNB>
+        <LNBBrand>{brandContent}</LNBBrand>
+        <LNBNav aria-label="서비스 메뉴">{lnbMenu(nodes)}</LNBNav>
+        <ProfileMenu side="right" align="end" matchTrigger trigger={profileTrigger} />
+      </LNB>
+      <div className="flex min-w-0 flex-col lg:col-start-2" data-story-slot="lnb-content-stack">
+        <div className="lg:hidden" data-story-slot="local-mobile-menu">
+          <LNBMobileHeader>
+            <LNBMobileMenu title="서비스 메뉴">
+              {sheetMenu(nodes)}
+              <div className="mt-4 border-t border-border pt-4">
+                <ProfileMenu
+                  modal={false}
+                  trigger={
+                    <LNBProfile
+                      name={profile.name}
+                      description={profile.description}
+                    >
+                      <Avatar>
+                        <AvatarImage src={profile.photo} alt="" />
+                        <AvatarFallback>{profileData.fallback}</AvatarFallback>
+                      </Avatar>
+                    </LNBProfile>
+                  }
+                />
+              </div>
+            </LNBMobileMenu>
+            <LNBMobileBrand asChild>
+              <div>{brandContent}</div>
+            </LNBMobileBrand>
+          </LNBMobileHeader>
+        </div>
+        {/* Content paints above the navigation join strip, within the same LNB Mode. */}
+        <div className="relative min-w-0 flex-1 max-lg:rounded-t-[var(--hm-lnb-mobile-join)] bg-[var(--hm-sem-bg-content)] p-[34px] lg:rounded-l-[var(--hm-lnb-join)]" data-story-slot="connected-content">
+          <h2 className="text-lg font-bold">연결된 콘텐츠</h2>
+          <p className="text-sm text-muted-foreground" data-current-menu>
+            선택: {current ?? "없음"}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// LNB Mode: desktop column and LNB Mobile Header/Sheet share one local tree and state.
+// This responsive change stays within LNB Mode.
+const standaloneNav: LocalNode[] = [
+  { id: "overview", label: "대시보드", icon: LayoutGridIcon },
+  {
+    id: "projects",
+    label: "프로젝트 관리",
+    children: [
+      {
+        id: "projects/design",
+        label: "디자인 관리",
+        children: [
+          { id: "projects/design/tokens", label: "컬러 토큰" },
+          { id: "projects/design/components", label: "컴포넌트 스타일" },
+          { id: "projects/design/layout", label: "레이아웃 규칙" },
+        ],
+      },
+      { id: "projects/tasks", label: "업무 목록" },
+      { id: "projects/schedule", label: "일정 관리" },
+    ],
+  },
+  { id: "reports", label: "현황 보고", icon: ChartColumnIcon },
+  { id: "settings", label: "설정", icon: SettingsIcon },
+]
+
+function Standalone({ mobileOpen = false, profileOpen = false }: { mobileOpen?: boolean; profileOpen?: boolean }) {
+  const [current, setCurrent] = useState("projects/design/tokens")
+  const [open, setOpen] = useState<Record<string, boolean>>({})
+  const go = (id: string) => (event: MouseEvent) => {
+    event.preventDefault()
+    setCurrent(id)
+  }
+  const onPath = (id: string) => current.startsWith(`${id}/`)
+  const lnbMenu = (nodes: LocalNode[]): ReactNode =>
+    nodes.map((node) =>
+      node.children ? (
+        <LNBGroup
+          key={node.id}
+          label={node.label}
+          current={onPath(node.id)}
+          open={open[node.id] ?? true}
+          onOpenChange={(value) => setOpen((state) => ({ ...state, [node.id]: value }))}
+        >
+          {lnbMenu(node.children)}
+        </LNBGroup>
+      ) : (
+        <LNBItem key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
+          {node.icon ? <node.icon aria-hidden="true" /> : null}
+          {node.label}
+        </LNBItem>
+      )
+    )
+  const sheetMenu = (nodes: LocalNode[]): ReactNode =>
+    nodes.map((node) =>
+      node.children ? (
+        <LNBMobileGroup key={node.id} label={node.label}>
+          {sheetMenu(node.children)}
+        </LNBMobileGroup>
+      ) : (
+        <LNBMobileLink key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
+          {node.label}
+        </LNBMobileLink>
+      )
+    )
+  const brand = (
+    <span>
+      <small>한맥 업무 시스템</small>
+      <strong>프로젝트 대시보드</strong>
+    </span>
+  )
+  return (
+    // LNB Mode owns its height independently of Dashboard.
+    <div
+      className="grid min-h-0 min-w-0 grid-cols-1 bg-[var(--hm-lnb-background-end)] lg:grid-cols-[var(--hm-lnb-width)_minmax(0,1fr)]"
+      style={{ height: "100dvh" }}
+      data-story-slot="responsive-lnb-specimen"
+    >
+      <LNB>
+        <LNBBrand>{brand}</LNBBrand>
+        <LNBNav aria-label="서비스 메뉴">{lnbMenu(standaloneNav)}</LNBNav>
+        <ProfileMenu side="right" align="end" defaultOpen={profileOpen} matchTrigger trigger={<LNBProfile name={profileData.name} description={profileData.description}><ProfileAvatar /></LNBProfile>} />
+      </LNB>
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col" data-story-slot="lnb-content-stack">
+        <div className="lg:hidden" data-story-slot="local-mobile-menu">
+          <LNBMobileHeader>
+            <LNBMobileMenu title="서비스 메뉴" defaultOpen={mobileOpen}>
+              {sheetMenu(standaloneNav)}
+              <div className="mt-4 border-t border-border pt-4">
+                <ProfileMenu
+                  modal={false}
+                  trigger={
+                    <LNBProfile
+                      name={profileData.name}
+                      description={profileData.description}
+                    >
+                      <ProfileAvatar />
+                    </LNBProfile>
+                  }
+                />
+              </div>
+            </LNBMobileMenu>
+            <LNBMobileBrand asChild>
+              <div>{brand}</div>
+            </LNBMobileBrand>
+          </LNBMobileHeader>
+        </div>
+        <main className="relative min-h-0 min-w-0 flex-1 overflow-auto max-lg:rounded-t-[var(--hm-lnb-mobile-join)] bg-[var(--hm-sem-bg-content)] p-[34px] lg:rounded-l-[var(--hm-lnb-join)]" data-story-slot="connected-content">
+          <h2 className="text-lg font-bold">연결된 콘텐츠</h2>
+          <p className="text-sm text-muted-foreground" data-current-menu>
+            선택: {current}
+          </p>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+// A 390px viewport for the mobile Stories (the switch is a viewport media query, so a narrow container cannot show it).
+const mobileViewport = {
+  parameters: { viewport: { options: { hmMobile: { name: "Mobile 390", styles: { width: "390px", height: "844px" }, type: "mobile" } } } },
+  globals: { viewport: { value: "hmMobile", isRotated: false } },
+}
+
+// Representative-board preview of a Story at a fixed viewport. The LNB/bar switch is a viewport media query, so the board embeds the
+// verification Story (the same `Standalone` composition) in an iframe of that width instead of rebuilding it in a narrow container.
+// Each iframe is its own document, so the closed Sheets do not share a portal or focus with the board.
+function ViewportPreview({ story, label, width, height }: { story: string; label: string; width: number; height: number }) {
+  return (
+    <figure className="grid min-w-0 content-start gap-2">
+      <figcaption className="text-sm text-muted-foreground">
+        {label} · {width}px
+      </figcaption>
+      <div className="max-w-full overflow-x-auto">
+        <iframe
+          title={`${label} ${width}px`}
+          src={`iframe.html?id=patterns-layout-lnb--${story}&viewMode=story`}
+          width={width}
+          height={height}
+          className="box-content block border border-black/10"
+        />
+      </div>
+    </figure>
+  )
+}
+
+const meta = { title: "Patterns/Layout/LNB", component: LNB, parameters: { layout: "fullscreen", controls: { disable: true } } } satisfies Meta<typeof LNB>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Representative Story: the common Story page with the column in every state side by side. Hover and click work on the real items.
+// The specimens are bounded LNB columns (their own frame, not the viewport width), so they stay on the page inner.
+export const All: Story = {
+  name: "LNB",
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="LNB"
+        description="화면 왼쪽의 지역 내비게이션입니다. 1024px 이상에서 표시하고, 1023px 이하는 숨긴 뒤 모바일 메뉴로 대체합니다."
+      />
+      <StorySection title="Overview" description="모든 뎁스 18px. 선택은 Beige 면 + 초록 글자, 왼쪽 모서리 8로 콘텐츠와 오목하게 이어집니다.">
+        <StateBoard
+          min={560}
+          states={[
+            { id: "selected", label: "Selected", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} /> },
+            { id: "third-selected", label: "3뎁스 메뉴 · 선택", note: "3뎁스는 20px 들여쓰기와 1px 그린 연결선으로 구분하며, 선은 마지막 메뉴에서 끝납니다. 선택은 베이지, 상위 경로는 노란색입니다.", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": true }} /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="States" description="그룹 펼침·접힘과 하위 선택에 따른 표시입니다. 선택된 경로의 상위는 접혀도 노란색을 유지합니다.">
+        <StateBoard
+          min={560}
+          states={[
+            { id: "default", label: "Default · 기존 LNB", note: "선택 없음, 2뎁스 그룹 접힘. 항목에 마우스를 올리면 Black 10%가 콘텐츠 경계까지 닿습니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: false }} /> },
+            { id: "expanded", label: "Expanded · 2뎁스 펼침", note: "하위 선택 없이 펼친 그룹: Black 20% 면 + 1px 초록 선.", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: true }} /> },
+            { id: "selected-child", label: "Selected Child · 2뎁스 선택", note: "하위 선택: 상위 이름·화살표가 노란색, 하위는 Beige.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: true }} /> },
+            { id: "collapsed-with-selection", label: "Collapsed With Selection · 접힘", note: "하위가 선택된 채 접힌 그룹도 상위가 노란색을 유지합니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: false }} /> },
+            { id: "third-second-collapsed", label: "3뎁스 메뉴 · 2뎁스 접힘", note: "디자인 관리를 접어도 선택된 경로의 1·2뎁스 표시를 유지합니다. 하위 메뉴와 연결선이 함께 숨겨집니다.", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": false }} /> },
+            { id: "third-first-collapsed", label: "3뎁스 메뉴 · 1뎁스 접힘", note: "프로젝트 관리를 접어도 노란색을 유지합니다. 다시 펼치면 디자인 관리의 열림 상태가 그대로입니다(open은 화면이 관리).", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: false, "projects/design": true }} /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Variants" description="로고 유무와 긴 이름입니다.">
+        <StateBoard
+          min={560}
+          states={[
+            { id: "with-logo", label: "With Logo · 로고 있음(테스트 이미지)", note: "로고는 서비스명 위, 같은 시작선. 없으면 영역·간격 없이 서비스명만 둡니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} logo={testLogo} /> },
+            { id: "long", label: "Long labels", note: "긴 이름은 줄바꿈되며 항목 높이가 늘어납니다.", children: <ResponsiveSpecimen nodes={simpleNav(true)} initial="tasks/list" initialOpen={{ tasks: true }} longLabels /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage · Scroll" description="메뉴가 열보다 길면 메뉴 영역만 세로로 스크롤하고 브랜드·프로필은 그대로입니다(높이 460).">
+        <StateBoard
+          min={560}
+          states={[
+            { id: "scroll", label: "Scroll", children: <ResponsiveSpecimen nodes={simpleNav(false, true)} initial="overview" initialOpen={{ tasks: true }} height={460} /> },
+            { id: "third-scroll", label: "3뎁스 메뉴 · Scroll", note: "3뎁스·연결선·긴 이름도 메뉴 영역 안에서 함께 스크롤됩니다. 스크롤 영역은 브랜드 바로 아래에서 시작해 프로필 바로 위에서 끝납니다.", children: <ResponsiveSpecimen nodes={thirdLevelNav(true, true)} initial="projects/design/layout" initialOpen={{ projects: true, "projects/design": true }} longLabels height={460} /> },
+          ]}
+        />
+      </StorySection>
+      <StorySection
+        title="Usage · LNB Standalone 반응형 (GNB 없음)"
+        description="1024px 이상은 왼쪽 LNB의 브랜드·프로필을, 1023px 이하는 LNB를 숨긴 뒤 Local 모바일 바와 Sheet의 메뉴·프로필을 사용합니다. 열림·키보드·Escape는 LNB Standalone Mobile Menu Open에서 확인합니다."
+      >
+        <div className="flex flex-wrap items-start gap-6">
+          <ViewportPreview story="standalone-desktop" label="Desktop" width={1024} height={640} />
+          <ViewportPreview story="standalone-mobile" label="Mobile" width={390} height={640} />
+        </div>
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Default: Story = { tags: ["verification"], render: () => <Menu initial={null} groupOpen={false} /> }
+export const Selected: Story = { tags: ["verification"], render: () => <Menu /> }
+export const Expanded: Story = { tags: ["verification"], render: () => <Menu initial={null} /> }
+export const SelectedChild: Story = { tags: ["verification"], name: "Selected Child", render: () => <Menu initial="tasks/list" /> }
+export const CollapsedWithSelection: Story = { tags: ["verification"], name: "Collapsed With Selection", render: () => <Menu initial="tasks/list" groupOpen={false} /> }
+export const WithLogo: Story = { tags: ["verification"], name: "With Logo", render: () => <Menu logo={testLogo} /> }
+export const LongLabels: Story = { tags: ["verification"], name: "Long Labels", render: () => <Menu initial="tasks/list" longLabels /> }
+export const Scroll: Story = { tags: ["verification"], render: () => <Menu many height={460} /> }
+export const ThirdLevel: Story = { tags: ["verification"], name: "Third Level", render: () => <ThirdLevelMenu /> }
+export const ThirdLevelLongLabels: Story = { tags: ["verification"], name: "Third Level Long Labels", render: () => <ThirdLevelMenu initial="projects/design/components" longLabels /> }
+export const ThirdLevelScroll: Story = { tags: ["verification"], name: "Third Level Scroll", render: () => <ThirdLevelMenu initial="projects/design/layout" longLabels many height={460} /> }
+
+// VERIFICATION ONLY: legacy GNB + LNB technical check, forbidden in operating pages. The GNB owns the brand,
+// so the LNB below has no LNBBrand and the menu starts at the column top.
+export const WithGNB: Story = {
+  tags: ["verification"],
+  name: "VERIFICATION ONLY · GNB + LNB",
+  render: () => (
+    <div>
+      <p role="note">VERIFICATION ONLY — 기존 혼합 구조 기술 검증. 운영 사용 금지.</p>
+      <GNB>
+        <GNBMobileMenu title="메뉴">
+          <div className="mt-4 border-t border-border pt-4">
+            <ProfileMenu
+              modal={false}
+              trigger={
+                <GNBUser
+                  name={profileData.name}
+                  description={profileData.description}
+                  className="w-full justify-start !text-foreground [&_[data-slot=gnb-user-description]]:!text-muted-foreground [&_[data-slot=gnb-user-text]]:!grid"
+                >
+                  <ProfileAvatar />
+                </GNBUser>
+              }
+            />
+          </div>
+        </GNBMobileMenu>
+        <GNBBrand href="#overview">
+          <span>
+            <small>한맥 업무 시스템</small>
+            <strong>프로젝트 대시보드</strong>
+          </span>
+        </GNBBrand>
+        <GNBNav />
+        <GNBUtilities className="hidden lg:flex">
+          <ProfileMenu align="end" trigger={<GNBUser name={profileData.name} description={profileData.description}><ProfileAvatar /></GNBUser>} />
+        </GNBUtilities>
+      </GNB>
+      <Menu brand={null} profile={false} />
+    </div>
+  ),
+}
+
+// LNB without a GNB, responsive. Desktop (>= 1024px): the column. Mobile (<= 1023px): the column is hidden and the connected-content
+// column becomes a full-width stack whose first row opens a Sheet with the same tree, selected item and every depth.
+export const StandaloneDesktop: Story = { tags: ["verification"], name: "LNB Standalone Desktop", render: () => <Standalone /> }
+export const LNBProfileMenuOpen: Story = { tags: ["verification"], name: "LNB Profile Menu Open", render: () => <Standalone profileOpen /> }
+export const StandaloneMobile: Story = { tags: ["verification"], name: "LNB Standalone Mobile", ...mobileViewport, render: () => <Standalone /> }
+export const StandaloneMobileMenuOpen: Story = {
+  tags: ["verification"],
+  name: "LNB Standalone Mobile Menu Open",
+  ...mobileViewport,
+  render: () => <Standalone mobileOpen />,
+}
diff --git a/src/patterns/loading-screen.stories.tsx b/src/patterns/loading-screen.stories.tsx
new file mode 100644
index 0000000..dc24887
--- /dev/null
+++ b/src/patterns/loading-screen.stories.tsx
@@ -0,0 +1,57 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, LoadingScreen } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Loading Screen is a Dashboard-local pattern (ui-viz LoadingScreen). Inline fills its parent; fullscreen covers the viewport. The
+// fullscreen demo is mounted and removed by local state only; there is no async task, cancel or close control in the pattern.
+
+function Fullscreen() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button appearance="outline" onClick={() => setOpen(true)}>전체화면 미리보기</Button>
+      {open ? (
+        <>
+          <LoadingScreen fullscreen>데이터를 불러오는 중</LoadingScreen>
+          <Button className="fixed top-7 right-7 z-[10000]" onClick={() => setOpen(false)}>닫기</Button>
+        </>
+      ) : null}
+    </>
+  )
+}
+
+const meta = { title: "Patterns/Layout/Loading Screen", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+// The inline specimen fills its parent inside the common page Inner.
+export const All: Story = {
+  name: "Loading Screen",
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="Loading Screen"
+        description="Dashboard 안에서 데이터를 불러오는 동안 표시하는 화면입니다. Inline은 부모 영역을 채우고, fullscreen은 viewport 전체를 덮습니다."
+      />
+      <StorySection title="Overview" description="Inline: 부모 영역(여기서는 공통 Inner 폭)을 채웁니다.">
+        <LoadingScreen />
+      </StorySection>
+      <StorySection title="Variants" description="사용자 문구와 좁은 부모 영역입니다.">
+        <StateBoard
+          states={[
+            { id: "label", label: "Custom label", children: <LoadingScreen>데이터를 불러오는 중</LoadingScreen> },
+            { id: "narrow", label: "Narrow parent (240px)", children: <div style={{ width: 240 }}><LoadingScreen /></div> },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="fullscreen은 viewport 전체를 덮습니다. 버튼으로 열고 오른쪽 위 닫기로 닫습니다.">
+        <Fullscreen />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+export const Inline: Story = { tags: ["verification"], render: () => <LoadingScreen /> }
diff --git a/src/patterns/page-header.stories.tsx b/src/patterns/page-header.stories.tsx
new file mode 100644
index 0000000..137c402
--- /dev/null
+++ b/src/patterns/page-header.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageHeaderDescription,
+  PageHeaderTitle,
+} from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const meta = {
+  title: "Patterns/Layout/Page Header",
+  component: PageHeader,
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+} satisfies Meta<typeof PageHeader>
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Content composition only. The consuming screen owns navigation and action handlers.
+// Dashboard's minimum width and internal navigation belong to DashboardLayout.
+export const All: Story = {
+  name: "Page Header",
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.patterns}
+        title="Page Header"
+        description="화면 콘텐츠의 제목 영역입니다. Breadcrumb, 제목, 설명과 대표 Action을 조합합니다."
+      />
+      <StorySection title="Overview" description="단일 Brand Action을 사용하는 기본 조합입니다.">
+        <PageHeader>
+          <PageHeaderContent>
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#home">홈</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbLink href="#projects">프로젝트</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>업무 현황</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+            <PageHeaderTitle>업무 현황</PageHeaderTitle>
+            <PageHeaderDescription>프로젝트별 업무 진행 상황을 확인하고 조회합니다.</PageHeaderDescription>
+          </PageHeaderContent>
+          <PageHeaderActions>
+            <Button type="button" variant="primary" appearance="brand" size="default">
+              신규 등록
+            </Button>
+          </PageHeaderActions>
+        </PageHeader>
+      </StorySection>
+    </StoryPage>
+  ),
+}
diff --git a/src/patterns/sample-users.ts b/src/patterns/sample-users.ts
new file mode 100644
index 0000000..7487d15
--- /dev/null
+++ b/src/patterns/sample-users.ts
@@ -0,0 +1,30 @@
+// Local sample data for the pattern Stories (no network).
+export type SampleUser = {
+  id: string
+  name: string
+  department: string
+  status: "active" | "pending" | "inactive"
+  createdAt: string // ISO date
+}
+
+export const statusLabel: Record<SampleUser["status"], string> = { active: "활성", pending: "대기", inactive: "비활성" }
+
+const names = ["김민수", "이서연", "박지훈", "최유진", "정하늘", "강도현", "조수빈", "윤재민", "임나래", "한지우", "오세준", "서하은"]
+const departments = ["설계팀", "시공팀", "안전관리팀", "품질팀", "경영지원팀"]
+const statuses: SampleUser["status"][] = ["active", "active", "pending", "inactive"]
+
+// 47 rows: more than two pages at 20 per page, with dates spread over October 2026.
+export const sampleUsers: SampleUser[] = Array.from({ length: 47 }, (_, i) => ({
+  id: `U-${String(i + 1).padStart(3, "0")}`,
+  name: `${names[i % names.length]}${i >= names.length ? ` ${Math.floor(i / names.length) + 1}` : ""}`,
+  department: departments[(i * 3) % departments.length],
+  status: statuses[(i * 5) % statuses.length],
+  createdAt: new Date(2026, 9, 1 + (i % 28)).toISOString(),
+}))
+
+export const formatDate = (iso: string) => new Intl.DateTimeFormat("ko-KR", { year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(iso))
+
+export const sameDay = (iso: string, date: Date) => {
+  const d = new Date(iso)
+  return d.getFullYear() === date.getFullYear() && d.getMonth() === date.getMonth() && d.getDate() === date.getDate()
+}
diff --git a/src/theme/designer-extras.tsx b/src/theme/designer-extras.tsx
new file mode 100644
index 0000000..5d11b4f
--- /dev/null
+++ b/src/theme/designer-extras.tsx
@@ -0,0 +1,25 @@
+import {
+  Button, Combobox, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem,
+  ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem,
+  Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem,
+  DataTable, useDataTable, dataTableSelectColumn, type DataTableColumnDef,
+} from "@hm-design/ui"
+
+const data = [{ id: "one", name: "선택 행 / Active + Accent" }, { id: "two", name: "일반 행 / Hover" }]
+const columns: DataTableColumnDef<(typeof data)[number]>[] = [dataTableSelectColumn(), { accessorKey: "name", header: "Data Table" }]
+const options = [{ value: "one", label: "Selected option" }, { value: "two", label: "Highlighted option" }]
+
+export function DesignerExtras() {
+  const table = useDataTable({ columns, data, getRowId: row => row.id, initialState: { rowSelection: { one: true } } })
+  return <div style={{ display: "grid", gap: 18, padding: 20 }}>
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
+      <Combobox options={options} defaultValue="one" aria-label="Theme combobox" />
+      <DropdownMenu><DropdownMenuTrigger asChild><Button appearance="outline">Dropdown Preview</Button></DropdownMenuTrigger>
+        <DropdownMenuContent><DropdownMenuItem>Dropdown highlight</DropdownMenuItem><DropdownMenuItem variant="destructive">Destructive action</DropdownMenuItem></DropdownMenuContent></DropdownMenu>
+      <ContextMenu><ContextMenuTrigger style={{ border: "1px solid var(--hm-sem-stroke-default)", padding: 8 }}>우클릭 Context Preview</ContextMenuTrigger>
+        <ContextMenuContent><ContextMenuItem>Context highlight</ContextMenuItem></ContextMenuContent></ContextMenu>
+      <Menubar><MenubarMenu><MenubarTrigger>Menubar Preview</MenubarTrigger><MenubarContent><MenubarItem>Menubar highlight</MenubarItem></MenubarContent></MenubarMenu></Menubar>
+    </div>
+    <DataTable table={table} />
+  </div>
+}
diff --git a/src/theme/designer-preview.tsx b/src/theme/designer-preview.tsx
new file mode 100644
index 0000000..78afd72
--- /dev/null
+++ b/src/theme/designer-preview.tsx
@@ -0,0 +1,38 @@
+import { useLayoutEffect, useSyncExternalStore, type ReactNode } from "react"
+import { applyRuntimeTheme, resetRuntimeTheme, resolveRuntimeTheme, isRuntimeTheme, runtimeThemeContract, type RuntimeTheme, type RuntimeThemeToken } from "@hm-design/ui/theme"
+import defaultJson from "../../themes/default.json"
+
+// Storybook-only persistence; production owns its own JSON delivery/storage policy.
+const storageKey = "hm-designer-color-theme-v1"
+const listeners = new Set<() => void>()
+export function isDesignerTheme(value: unknown): value is RuntimeTheme {
+  return isRuntimeTheme(value) && Object.keys(value.tokens).every(key => runtimeThemeContract[key as RuntimeThemeToken].type === "color")
+}
+let current: RuntimeTheme = { schemaVersion: 1, tokens: {} }
+try {
+  const saved: unknown = JSON.parse(sessionStorage.getItem(storageKey) ?? "null")
+  if (isDesignerTheme(saved)) current = saved
+} catch { /* Disabled storage or stale documents fall back to HM Default. */ }
+
+export const designerThemeStore = {
+  getSnapshot: () => current,
+  subscribe: (listener: () => void) => { listeners.add(listener); return () => { listeners.delete(listener) } },
+  set(theme: unknown): boolean {
+    if (!isDesignerTheme(theme)) return false
+    current = { schemaVersion: 1, tokens: { ...theme.tokens } }
+    try { sessionStorage.setItem(storageKey, JSON.stringify(current)) } catch { /* Live editing works without storage. */ }
+    listeners.forEach(listener => listener())
+    return true
+  },
+  reset: () => designerThemeStore.set({ schemaVersion: 1, tokens: {} }),
+}
+
+export function DesignerThemePreview({ children, enabled }: { children: ReactNode; enabled: boolean }) {
+  const theme = useSyncExternalStore(designerThemeStore.subscribe, designerThemeStore.getSnapshot)
+  useLayoutEffect(() => {
+    if (!enabled) return
+    applyRuntimeTheme(document.documentElement, resolveRuntimeTheme(theme, defaultJson))
+    return () => resetRuntimeTheme(document.documentElement)
+  }, [theme, enabled])
+  return children
+}
diff --git a/src/theme/designer-theme.css b/src/theme/designer-theme.css
new file mode 100644
index 0000000..70423b0
--- /dev/null
+++ b/src/theme/designer-theme.css
@@ -0,0 +1,31 @@
+.hm-designer { color: var(--hm-sem-fg-primary); background: var(--hm-sem-bg-content); font-size: 14px; }
+.hm-designer h1 { font-size: 24px; font-weight: 700; margin: 4px 0 12px; }
+.hm-designer h2 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
+.hm-designer p, .hm-designer small { color: var(--hm-sem-fg-secondary); line-height: 1.6; }
+.hm-designer-header { display: flex; gap: 16px; justify-content: space-between; align-items: start; margin-bottom: 24px; }
+.hm-designer-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 24px; }
+.hm-designer-editor, .hm-designer-preview { min-width: 0; padding: 20px; background: var(--hm-sem-bg-surface); border: 1px solid var(--hm-sem-stroke-input-default); border-radius: 4px; }
+.hm-designer-field { padding: 14px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); }
+.hm-designer-field label { display: block; font-weight: 600; }
+.hm-designer-field small { display: block; font-size: 12px; font-weight: 400; margin: 3px 0 8px; }
+.hm-designer-inputs { display: flex; gap: 8px; }
+.hm-designer-inputs input[type=color] { width: 42px; height: 34px; padding: 2px; cursor: pointer; }
+.hm-designer-inputs input:not([type=color]) { width: 120px; height: 34px; padding: 6px 8px; font-family: monospace; }
+.hm-designer-editor input, .hm-designer-editor textarea { border: 1px solid var(--hm-sem-stroke-input-default); background: var(--hm-sem-bg-surface); color: var(--hm-sem-fg-primary); border-radius: 4px; }
+.hm-designer-editor input[aria-invalid=true] { border-color: var(--hm-sem-action-destructive); }
+.hm-designer-editor input:focus-visible, .hm-designer-editor textarea:focus-visible,
+.hm-designer-header button:focus-visible, .hm-designer-source button:focus-visible,
+.hm-designer-transfer button:focus-visible { outline: 2px solid var(--hm-sem-stroke-input-focus); outline-offset: 2px; }
+.hm-designer-header button, .hm-designer-transfer button, .hm-designer-source button { border: 1px solid var(--hm-sem-stroke-default); border-radius: 4px; background: var(--hm-sem-bg-surface); padding: 7px 10px; color: var(--hm-sem-fg-primary); cursor: pointer; font-size: 13px; }
+.hm-designer-source { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--hm-sem-stroke-input-default); }
+.hm-designer-source label { display: block; margin-bottom: 6px; }
+.hm-designer-source input { width: 100%; padding: 8px; margin-bottom: 8px; }
+.hm-designer button:disabled { opacity: 0.5; cursor: wait; }
+.hm-designer-transfer { margin-top: 24px; }
+.hm-designer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
+.hm-designer-transfer textarea { width: 100%; padding: 10px; font-family: monospace; font-size: 12px; margin-bottom: 10px; }
+.hm-designer-transfer input[type=file] { width: 100%; margin-top: 12px; }
+.hm-designer-transfer output { display: block; margin-top: 12px; overflow-wrap: anywhere; }
+.hm-designer-preview > p { margin-bottom: 12px; }
+@media (max-width: 900px) { .hm-designer-layout { grid-template-columns: minmax(0, 1fr); } }
+@media (max-width: 480px) { .hm-designer-header { flex-direction: column; } .hm-designer-editor, .hm-designer-preview { padding: 12px; } }
diff --git a/src/theme/designer-theme.stories.tsx b/src/theme/designer-theme.stories.tsx
new file mode 100644
index 0000000..267a1f1
--- /dev/null
+++ b/src/theme/designer-theme.stories.tsx
@@ -0,0 +1,248 @@
+import { useEffect, useRef, useState, useSyncExternalStore } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { defaultRuntimeTheme, runtimeThemeContract, fetchRuntimeTheme, type RuntimeThemeToken } from "@hm-design/ui/theme"
+import { designerThemeStore } from "./designer-preview"
+import { Specimens } from "./specimens"
+import { DesignerExtras } from "./designer-extras"
+import { StoryPage } from "@/components/story-page"
+import "./designer-theme.css"
+
+const roles = [
+  ["color.action.primary", "Primary / Brand", "Badge · 현재 페이지 · 내비게이션"],
+  ["color.state.active", "Active / Selected", "Checkbox · Radio · Switch · Calendar"],
+  ["color.on.state.active", "On Active", "선택된 컨트롤의 아이콘과 글자"],
+  ["color.stroke.input.focus", "Focus", "입력 테두리 · Checkbox / Calendar 포커스 링"],
+  ["color.accent", "Accent", "메뉴 · Calendar · Table · Pagination의 45% 강조 면"],
+  ["color.on.accent", "On Accent", "강조 면의 글자"],
+  ["color.action.destructive", "Destructive", "오류 · Invalid · Destructive Button / Badge"],
+  ["color.bg.surface", "Surface", "입력 · Card · Popup"],
+  ["color.bg.content", "Content Surface", "콘텐츠 영역"],
+  ["color.bg.subtle", "Subtle Surface", "은은한 면 · Calendar today"],
+  ["color.fg.primary", "Text Primary", "주요 텍스트"],
+  ["color.fg.secondary", "Text Secondary", "보조 텍스트"],
+  ["color.fg.placeholder", "Placeholder", "입력 안내"],
+  ["color.fg.inverse", "Inverse Text", "반전 면의 텍스트"],
+  ["color.stroke.default", "Default Border", "컨트롤 · Badge 외곽선"],
+  ["color.stroke.input.default", "Input Border", "입력 · Popup 테두리"],
+  ["color.action.cancel", "Cancel", "취소 동작"],
+] as const satisfies readonly (readonly [RuntimeThemeToken, string, string])[]
+
+function ColorField({ token, label, hint, value, onChange }: { token: RuntimeThemeToken; label: string; hint: string; value: string; onChange: (value: string) => void }) {
+  const [draft, setDraft] = useState(value)
+  const [previous, setPrevious] = useState(value)
+  if (previous !== value) { setPrevious(value); setDraft(value) }
+  const valid = /^#[\da-f]{6}$/i.test(draft)
+  const update = (next: string) => { setDraft(next); if (/^#[\da-f]{6}$/i.test(next)) onChange(next.toLowerCase()) }
+  return <div className="hm-designer-field">
+    <label htmlFor={`theme-${token}`}>{label}<small>{hint}</small></label>
+    <div className="hm-designer-inputs">
+      <input type="color" value={value} aria-label={`${label} color picker`} onChange={event => update(event.target.value)} />
+      <input id={`theme-${token}`} aria-label={`${label} HEX`} aria-invalid={!valid} spellCheck={false} value={draft} onChange={event => update(event.target.value)} />
+    </div>
+    {!valid && <small role="status">#123abc 형식의 6자리 HEX를 입력하세요. 마지막 유효값을 유지합니다.</small>}
+  </div>
+}
+
+function ThemeEditor() {
+  const [navigationMode, setNavigationMode] = useState<"GNB" | "LNB">("GNB")
+  const theme = useSyncExternalStore(designerThemeStore.subscribe, designerThemeStore.getSnapshot)
+  const [json, setJson] = useState("")
+  const [status, setStatus] = useState("")
+  const [themeUrl, setThemeUrl] = useState("/themes/service-example.json")
+  const [loading, setLoading] = useState(false)
+  const pending = useRef<AbortController | undefined>(undefined)
+  useEffect(() => () => pending.current?.abort(), [])
+  const [revision, setRevision] = useState(0)
+  const [effective, setEffective] = useState(defaultRuntimeTheme.tokens)
+  useEffect(() => {
+    // Read resolved roles after the preview decorator's layout effect.
+    // JSON Default + partial override is what the components actually consume.
+    const style = getComputedStyle(document.documentElement)
+    setEffective(Object.fromEntries(roles.map(([token]) => {
+      const value = style.getPropertyValue(runtimeThemeContract[token].property).trim()
+      // CSS minification may shorten #ffffff to #fff; the public input stays HEX6.
+      return [token, /^#[\da-f]{3}$/i.test(value) ? `#${value.slice(1).split("").map(character => character.repeat(2)).join("")}` : value]
+    })))
+  }, [theme])
+  const exported = JSON.stringify(theme, null, 2)
+  const cancelUrl = () => { pending.current?.abort(); pending.current = undefined; setLoading(false) }
+  const updateTheme = (value: unknown) => {
+    const accepted = designerThemeStore.set(value)
+    if (accepted) cancelUrl()
+    return accepted
+  }
+  const loadUrl = async (url: string) => {
+    pending.current?.abort()
+    const controller = new AbortController()
+    pending.current = controller
+    setLoading(true)
+    try {
+      const fetched = await fetchRuntimeTheme(url, { cache: "no-store", signal: controller.signal })
+      if (pending.current !== controller) return
+      if (!designerThemeStore.set(fetched)) throw Error("Expected color-only Theme")
+      setRevision(value => value + 1)
+      setStatus(`Theme JSON 적용: ${url}`)
+    } catch { if (pending.current === controller) { designerThemeStore.reset(); setRevision(value => value + 1); setStatus("Theme URL 로드 실패: HM Default로 복원했습니다.") } }
+    finally { if (pending.current === controller) { pending.current = undefined; setLoading(false) } }
+  }
+  const reset = () => { cancelUrl(); designerThemeStore.reset(); setRevision(value => value + 1); setJson(""); setStatus("HM Default로 즉시 복원했습니다.") }
+  const importTheme = () => {
+    try {
+      if (!updateTheme(JSON.parse(json))) throw Error("invalid")
+      setRevision(value => value + 1)
+      setStatus("Theme JSON을 즉시 적용했습니다.")
+    } catch { setStatus("가져오기 실패: schemaVersion 1과 공개 컬러 token / 6자리 HEX를 확인하세요. Radius는 이 컬러 편집기에서 허용하지 않습니다. 기존 Theme를 유지합니다.") }
+  }
+  const copy = async () => {
+    setJson(exported)
+    try { await navigator.clipboard.writeText(exported); setStatus("JSON을 복사했습니다. 개발팀에 전달하세요.") }
+    catch { setStatus("클립보드 접근이 제한되어 있습니다. JSON 입력란에서 직접 복사하세요.") }
+  }
+  const download = () => {
+    const url = URL.createObjectURL(new Blob([exported], { type: "application/json" }))
+    const link = document.createElement("a")
+    link.href = url; link.download = "hm-color-theme.json"; link.hidden = true
+    document.body.append(link); link.click(); link.remove()
+    // Give the browser download handler time to acquire the Blob before release.
+    setTimeout(() => URL.revokeObjectURL(url), 1000)
+    setStatus("hm-color-theme.json 다운로드를 요청했습니다. 다운로드가 제한되면 Show JSON으로 직접 복사하세요.")
+  }
+  return <StoryPage><main className="hm-designer">
+    <header className="hm-designer-header">
+      <div><p>HM DESIGN SYSTEM / COLOR THEME</p><h1>디자인팀 Theme Playground</h1>
+        <p>컬러를 바꾸면 이 화면과 다른 Story의 UI에 즉시 반영됩니다. 현재 탭의 세션 동안 유지됩니다.</p></div>
+      <button type="button" onClick={reset}>Reset to HM Default</button>
+    </header>
+    <div className="hm-designer-layout">
+      <section className="hm-designer-editor" aria-label="Theme color editor">
+        <section className="hm-designer-source" aria-label="Theme JSON source">
+          <h2>Theme JSON Preview</h2><p>원본은 themes/*.json입니다. 파일을 Import하거나 서비스의 CDN URL을 입력하세요.</p>
+          <div className="hm-designer-actions"><button type="button" disabled={loading} onClick={() => void loadUrl("/themes/default.json")}>Load Default JSON</button>
+            <button type="button" disabled={loading} onClick={() => void loadUrl("/themes/service-example.json")}>Load Service Example JSON</button></div>
+          <label htmlFor="hm-theme-url">Theme JSON URL</label><input id="hm-theme-url" value={themeUrl} onChange={event => setThemeUrl(event.target.value)} />
+          <button type="button" disabled={loading || !themeUrl.trim()} onClick={() => void loadUrl(themeUrl)}>Load URL</button>
+        </section>
+        <h2>Theme 역할 편집</h2><p>HM Default를 출발점으로 편집합니다. 유효한 HEX를 입력하면 바로 적용됩니다.</p>
+        {roles.map(([token, label, hint]) => <ColorField key={`${token}:${revision}`} token={token} label={label} hint={hint}
+          value={effective[token] ?? defaultRuntimeTheme.tokens[token]!}
+          onChange={value => updateTheme({ schemaVersion: 1, tokens: { ...theme.tokens, [token]: value } })} />)}
+        <section className="hm-designer-transfer" aria-label="Theme JSON transfer">
+          <h2>개발팀에 전달</h2><p>공식 Runtime Contract의 JSON입니다. 수정한 역할만 내보내며 나머지는 HM Default를 사용합니다.</p>
+          <div className="hm-designer-actions"><button type="button" onClick={() => { setJson(exported); setStatus("현재 Theme JSON을 표시했습니다.") }}>Show JSON</button>
+            <button type="button" onClick={() => void copy()}>Copy JSON</button><button type="button" onClick={download}>Export JSON</button></div>
+          <textarea aria-label="Theme JSON" value={json} onChange={event => setJson(event.target.value)} placeholder={'{"schemaVersion":1,"tokens":{}}'} rows={8} spellCheck={false} />
+          <button type="button" onClick={importTheme}>Import JSON</button>
+          <input type="file" accept=".json,application/json" aria-label="Import Theme JSON file" onChange={event => {
+            const file = event.target.files?.[0]
+            if (file) void file.text().then(text => {
+              setJson(text)
+              try { if (!updateTheme(JSON.parse(text))) throw Error("invalid"); setRevision(value => value + 1); setStatus("Theme 파일을 즉시 적용했습니다.") }
+              catch { setStatus("Theme 파일이 유효하지 않습니다. 기존 Theme를 유지합니다.") }
+            }).catch(() => setStatus("Theme 파일을 읽지 못했습니다."))
+            event.target.value = ""
+          }} />
+          <output aria-live="polite">{status}</output>
+        </section>
+      </section>
+      <section className="hm-designer-preview" aria-label="Live component preview"><h2>Live Preview</h2>
+        <p>Primary · Active · Focus · Accent · Destructive의 영향을 여러 컴포넌트에서 함께 확인하세요.</p>
+        <label htmlFor="hm-preview-navigation-mode">Navigation Mode</label>
+        <select id="hm-preview-navigation-mode" value={navigationMode} onChange={event => setNavigationMode(event.target.value === "LNB" ? "LNB" : "GNB")}>
+          <option value="GNB">GNB ONLY</option><option value="LNB">LNB ONLY</option>
+        </select>
+        <Specimens navigationMode={navigationMode} /><DesignerExtras />
+      </section>
+    </div>
+  </main></StoryPage>
+}
+
+const meta = { title: "Theme/Designer Playground", parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+export const Editor: Story = { name: "Designer Playground", render: () => <ThemeEditor /> }
+
+export const LiveVerification: Story = {
+  tags: ["verification"],
+  render: () => <><output data-testid="designer-result">Ready</output><ThemeEditor /></>,
+  play: async ({ canvasElement }) => {
+    const result = canvasElement.querySelector<HTMLOutputElement>('[data-testid="designer-result"]')!
+    const preview = canvasElement.querySelector<HTMLElement>('[aria-label="Live component preview"]')!
+    const origin = performance.timeOrigin
+    const checks: string[] = []
+    const assert = (ok: boolean, label: string) => { if (!ok) throw Error(label); checks.push(label) }
+    const settle = () => new Promise(resolve => setTimeout(resolve, 250))
+    const variable = (property: string) => getComputedStyle(document.documentElement).getPropertyValue(property).trim().toLowerCase()
+    const style = (selector: string, property: "backgroundColor" | "color" | "borderTopColor") => getComputedStyle(preview.querySelector<HTMLElement>(selector)!)[property]
+    const geometry = () => Array.from(preview.querySelectorAll<HTMLElement>("[data-slot]")).map(element => {
+      const style = getComputedStyle(element)
+      return [element.dataset.slot, ...["width", "height", "padding", "margin", "borderRadius", "gap", "fontSize", "lineHeight", "display"].map(key => style[key as keyof CSSStyleDeclaration])]
+    })
+    const setInput = (label: string, value: string) => {
+      const input = canvasElement.querySelector<HTMLInputElement>(`[aria-label="${label}"]`)!
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!.call(input, value)
+      input.dispatchEvent(new Event("input", { bubbles: true }))
+    }
+    const click = (label: string) => Array.from(canvasElement.querySelectorAll<HTMLButtonElement>("button")).find(button => button.textContent === label)!.click()
+    try {
+      result.textContent = "Running designer workflow verification…"
+      await document.fonts.ready
+      click("Reset to HM Default"); await settle()
+      const initial = JSON.stringify(geometry())
+      for (const [token, label] of roles) {
+        assert(canvasElement.querySelector<HTMLInputElement>(`[aria-label="${label} HEX"]`)!.value === defaultRuntimeTheme.tokens[token], `${label}: auto-loaded HM Default`)
+      }
+      const core = [
+        ["Primary / Brand", "--hm-sem-action-primary", "#6837a8"],
+        ["Active / Selected", "--hm-sem-state-active", "#007f73"],
+        ["Focus", "--hm-sem-stroke-input-focus", "#c75b00"],
+        ["Accent", "--hm-sem-accent", "#ffd36d"],
+        ["Destructive", "--hm-sem-action-destructive", "#d41466"],
+      ] as const
+      for (const [label, property, value] of core) {
+        const others = core.filter(row => row[1] !== property).map(row => [row[1], variable(row[1])])
+        setInput(`${label} HEX`, value); await settle()
+        assert(variable(property) === value, `${label}: input applies live`)
+        if (label === "Primary / Brand") assert(canvasElement.querySelector<HTMLInputElement>('[aria-label="On Accent HEX"]')!.value === variable("--hm-sem-on-accent"), "On Accent displays its actual resolved role")
+        for (const [key, previous] of others) assert(variable(key) === previous, `${label}: leaves ${key} independent`)
+        assert(JSON.stringify(geometry()) === initial, `${label}: component geometry unchanged`)
+        assert(performance.timeOrigin === origin && preview.isConnected, `${label}: same document, reload 0`)
+      }
+      assert(style('[data-slot="checkbox"][aria-label="Checked"]', "backgroundColor") === "rgb(0, 127, 115)", "Checkbox fill uses Active")
+      assert(style('[data-slot="radio-group-item"]', "borderTopColor") === "rgb(0, 127, 115)", "Radio uses Active")
+      assert(style('[data-slot="switch"]', "backgroundColor") === "rgb(0, 127, 115)", "Switch uses Active")
+      assert(style('[data-slot="slider-range"]', "backgroundColor") === "rgb(0, 127, 115)", "Slider uses Active")
+      assert(style('[data-slot="progress-indicator"]', "backgroundColor") === "rgb(0, 127, 115)", "Progress uses Active")
+      assert(style('[data-slot="badge"]', "backgroundColor") === "rgb(104, 55, 168)", "Badge uses Primary")
+      assert(style('[data-slot="pagination-link"][data-active="true"]', "backgroundColor") === "rgb(104, 55, 168)", "Pagination current uses Primary")
+      for (const property of ["--hm-select-option-state-background", "--hm-calendar-day-hover-background", "--hm-calendar-range-middle-background", "--hm-pagination-hover-background", "--hm-table-row-hover-background", "--hm-table-row-selected-background", "--hm-command-highlight-background", "--hm-dropdown-menu-highlight-background", "--hm-context-menu-highlight-background", "--hm-menubar-highlight-background"])
+        assert(variable(property).includes("#ffd36d 45%"), `${property}: live Accent 45%`)
+      click("Show JSON")
+      await settle()
+      const transfer = canvasElement.querySelector<HTMLTextAreaElement>('[aria-label="Theme JSON"]')!
+      const exported = transfer.value
+      assert(JSON.parse(exported).tokens["color.state.active"] === "#007f73", "Export is official partial contract JSON")
+      click("Reset to HM Default"); await settle()
+      assert(JSON.stringify(geometry()) === initial && variable("--hm-sem-state-active") === "#266651", "Reset restores HM Default immediately")
+      const fillJson = (value: string) => {
+        Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")!.set!.call(transfer, value)
+        transfer.dispatchEvent(new Event("input", { bubbles: true }))
+      }
+      fillJson(exported); await settle(); click("Import JSON"); await settle()
+      assert(variable("--hm-sem-state-active") === "#007f73" && variable("--hm-sem-stroke-input-focus") === "#c75b00", "Export -> Import round trip applies immediately")
+      for (const invalid of ["not json", '{"schemaVersion":1,"tokens":{"color.action.primary":"red"}}', '{"schemaVersion":1,"tokens":{"radius.input.default":"7px"}}', '{"schemaVersion":1,"tokens":{"--hm-checkbox-checked-background":"#123456"}}']) {
+        fillJson(invalid); await settle(); click("Import JSON"); await settle()
+        assert(variable("--hm-sem-state-active") === "#007f73", "Invalid/color-only import preserves last valid Theme")
+      }
+      fillJson('{"schemaVersion":1,"tokens":{"color.state.active":"#345678"}}'); await settle(); click("Import JSON"); await settle()
+      assert(variable("--hm-sem-state-active") === "#345678" && variable("--hm-sem-action-primary") === "#123328" && variable("--hm-sem-stroke-input-focus") === "#266651", "Partial import replaces previous keys; unspecified roles use Default")
+      for (const [index, [token, label]] of roles.entries()) {
+        const value = `#3456${(120 + index).toString(16)}`
+        setInput(`${label} HEX`, value); await settle()
+        assert(designerThemeStore.getSnapshot().tokens[token] === value, `${label}: editor role works`)
+      }
+      assert(JSON.stringify(geometry()) === initial, "All color roles leave component layout unchanged")
+      result.textContent = `PASS — ${checks.length} designer checks; viewport ${window.innerWidth}; live input, role independence, default load, reset, partial, import/export, layout, reload 0.`
+    } catch (error) { result.textContent = `FAIL after ${checks.length} checks: ${String(error)}`; throw error }
+    finally { designerThemeStore.reset() }
+  },
+}
diff --git a/src/theme/preview.ts b/src/theme/preview.ts
new file mode 100644
index 0000000..c84de52
--- /dev/null
+++ b/src/theme/preview.ts
@@ -0,0 +1,2 @@
+// Storybook compatibility adapter: Preview and service apps share one contract/API.
+export { applyRuntimeTheme as applyPreviewTheme, resetRuntimeTheme as resetPreviewTheme } from "@hm-design/ui/theme"
diff --git a/src/theme/runtime-loader.stories.tsx b/src/theme/runtime-loader.stories.tsx
new file mode 100644
index 0000000..c95c518
--- /dev/null
+++ b/src/theme/runtime-loader.stories.tsx
@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { applyRuntimeTheme, resetRuntimeTheme, fetchRuntimeTheme, loadRuntimeTheme, resolveRuntimeTheme, defaultRuntimeTheme, runtimeThemeContract } from "@hm-design/ui/theme"
+import { Specimens } from "./specimens"
+import { DesignerExtras } from "./designer-extras"
+
+const meta = { title: "Theme/Runtime Contract/Loader", tags: ["verification"], parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+export const CdnVerification: Story = {
+  render: () => <main>
+    <h1>Runtime JSON Loader verification</h1>
+    <button onClick={event => void verifyLoader(event.currentTarget.parentElement!).catch(() => undefined)}>Run loader verification</button>
+    <output data-testid="loader-result">Ready</output>
+    <div data-testid="loader-preview"><Specimens /><DesignerExtras /></div>
+  </main>,
+  play: async ({ canvasElement }) => verifyLoader(canvasElement),
+}
+
+async function verifyLoader(container: HTMLElement) {
+  const root = document.documentElement
+  const result = container.querySelector<HTMLOutputElement>('[data-testid="loader-result"]')!
+  if (result.dataset.running === "true") return
+  result.dataset.running = "true"
+  const checks: string[] = []
+  const assert = (ok: boolean, label: string) => { if (!ok) throw Error(label); checks.push(label) }
+  const variable = (property: string) => getComputedStyle(root).getPropertyValue(property).trim().toLowerCase()
+  const geometry = () => Array.from(container.querySelectorAll<HTMLElement>("[data-slot]")).map(element => {
+    const style = getComputedStyle(element)
+    return [element.dataset.slot, ...["width", "height", "padding", "margin", "borderRadius", "gap", "fontSize", "lineHeight", "display"].map(key => style[key as keyof CSSStyleDeclaration])]
+  })
+  const settle = () => new Promise(resolve => setTimeout(resolve, 250))
+  const dataUrl = (value: unknown) => `data:application/json,${encodeURIComponent(JSON.stringify(value))}`
+  const originalFetch = globalThis.fetch
+  try {
+    result.textContent = "Running JSON Loader verification…"
+    await document.fonts.ready
+    resetRuntimeTheme(root); await settle()
+    const initial = JSON.stringify(geometry())
+    const origin = performance.timeOrigin
+    const defaults = await fetchRuntimeTheme("/themes/default.json", { cache: "no-store" })
+    assert(Object.keys(defaults.tokens).length === 71, "Default JSON exposes 71 color contract entries")
+    for (const [key, value] of Object.entries(defaults.tokens)) assert(defaultRuntimeTheme.tokens[key as keyof typeof runtimeThemeContract] === value, `${key}: JSON equals generated package fallback`)
+    assert(await loadRuntimeTheme(root, "/themes/default.json", { request: { cache: "no-store" } }), "Default JSON uses official URL Loader")
+    await settle()
+    assert(JSON.stringify(geometry()) === initial, "Default JSON preserves component geometry")
+    assert(await loadRuntimeTheme(root, "/themes/service-example.json", { request: { cache: "no-store" } }), "External partial JSON uses same URL Loader")
+    await settle()
+    for (const [property, value] of [["--hm-sem-action-primary", "#6837a8"], ["--hm-sem-state-active", "#007f73"], ["--hm-sem-stroke-input-focus", "#c75b00"], ["--hm-sem-accent", "#ffd36d"], ["--hm-sem-action-destructive", "#d41466"]]) assert(variable(property) === value, `${property}: independent external role`)
+    assert(getComputedStyle(container.querySelector<HTMLElement>('[data-slot="checkbox"][aria-label="Checked"]')!).backgroundColor === "rgb(0, 127, 115)", "HTTP JSON reaches rendered Checkbox")
+    assert(JSON.stringify(geometry()) === initial, "External JSON preserves component geometry")
+    const resolved = resolveRuntimeTheme({ schemaVersion: 1, tokens: { "color.state.active": "#345678" } }, defaults)
+    assert(resolved.tokens["color.action.primary"] === "#123328" && resolved.tokens["color.state.active"] === "#345678", "Default JSON + partial service override merge")
+    assert(await loadRuntimeTheme(root, "/themes/service-example.json", { defaults }), "Loader accepts separately fetched Default JSON")
+    assert(variable("--hm-sem-action-primary") === "#6837a8", "Service override wins supplied Default")
+    resetRuntimeTheme(root)
+    assert(variable("--hm-sem-state-active") === "#266651", "Reset returns package Default immediately")
+    const invalid = [null, {}, {schemaVersion:2,tokens:{}}, {schemaVersion:1,tokens:{"unknown":"#123456"}}, {schemaVersion:1,tokens:{"color.state.active":null}}, {schemaVersion:1,tokens:{"color.state.active":"var(--evil)"}}, {schemaVersion:1,tokens:{"color.state.active":"url(javascript:evil)"}}, {schemaVersion:1,tokens:{"color.state.active":"<script>evil</script>"}}, {schemaVersion:1,tokens:{"color.state.active":"#123456; color:red"}}, {schemaVersion:1,tokens:{"color.state.active":"#abc"}}, {schemaVersion:1,tokens:{"color.bg.brand.stop.0":"#123456"}}, {schemaVersion:1,tokens:{"--hm-checkbox-checked-background":"#123456"}}]
+    for (const document of invalid) {
+      applyRuntimeTheme(root, { schemaVersion:1,tokens:{"color.state.active":"#007f73"} })
+      assert(!await loadRuntimeTheme(root, dataUrl(document)), "Invalid/schema/missing/unsafe input fails closed")
+      assert(variable("--hm-sem-state-active") === "#266651", "Invalid URL JSON releases override to HM fallback")
+    }
+    for (const url of ["data:application/json,malformed", "/themes/missing-verification-theme.json"]) {
+      applyRuntimeTheme(root, {schemaVersion:1,tokens:{"color.state.active":"#007f73"}})
+      assert(!await loadRuntimeTheme(root, url) && variable("--hm-sem-state-active") === "#266651", "Malformed/HTTP failure keeps usable HM Default")
+    }
+    const controller = new AbortController(); controller.abort()
+    assert(!await loadRuntimeTheme(root, "/themes/default.json", {request:{signal:controller.signal}}), "Aborted fetch falls back safely")
+    assert(await loadRuntimeTheme(root, dataUrl({schemaVersion:1,tokens:{}})), "Empty JSON uses HM Default")
+    assert(variable("--hm-sem-state-active") === "#266651", "Empty JSON leaves Default Active")
+    // Deterministic delayed CDN response simulation; no production network monkeypatch.
+    let finish: ((response: Response) => void) | undefined
+    globalThis.fetch = (input, init) => String(input).includes("delayed-verification")
+      ? new Promise<Response>(resolve => { finish = resolve }) : originalFetch(input, init)
+    const delayed = () => new Response(JSON.stringify({schemaVersion:1,tokens:{"color.state.active":"#111111"}}), {headers:{"Content-Type":"application/json"}})
+    const old = loadRuntimeTheme(root, "/delayed-verification")
+    await loadRuntimeTheme(root, "/themes/service-example.json")
+    finish!(delayed())
+    assert(!await old && variable("--hm-sem-state-active") === "#007f73", "Older delayed CDN response cannot replace newer Theme")
+    const pendingReset = loadRuntimeTheme(root, "/delayed-verification")
+    resetRuntimeTheme(root); finish!(delayed())
+    assert(!await pendingReset && variable("--hm-sem-state-active") === "#266651", "Reset cancels pending load ownership")
+    const pendingApply = loadRuntimeTheme(root, "/delayed-verification")
+    applyRuntimeTheme(root, {schemaVersion:1,tokens:{"color.state.active":"#345678"}}); finish!(delayed())
+    assert(!await pendingApply && variable("--hm-sem-state-active") === "#345678", "Direct Apply supersedes pending load")
+    resetRuntimeTheme(root)
+    assert(JSON.stringify(geometry()) === initial && performance.timeOrigin === origin, "All URL changes preserve geometry in same document; reload 0")
+    result.textContent = `PASS — ${checks.length} loader checks; viewport ${innerWidth}; Default/External/partial/reset/invalid, HTTP simulation, abort/race, geometry, reload 0.`
+  } catch(error) { result.textContent = `FAIL after ${checks.length} checks: ${String(error)}`; throw error }
+  finally { globalThis.fetch = originalFetch; resetRuntimeTheme(root); result.dataset.running = "false" }
+}
diff --git a/src/theme/runtime-theme.stories.tsx b/src/theme/runtime-theme.stories.tsx
new file mode 100644
index 0000000..a5f3d49
--- /dev/null
+++ b/src/theme/runtime-theme.stories.tsx
@@ -0,0 +1,193 @@
+import { useLayoutEffect, useRef, useSyncExternalStore, type CSSProperties } from "react"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { DashboardHeader, DashboardLayout, DashboardMain, DashboardSidebar } from "@hm-design/ui"
+import { Specimens } from "./specimens"
+import { applyRuntimeTheme, resetRuntimeTheme, defaultRuntimeTheme, runtimeThemeContract, type RuntimeTheme } from "@hm-design/ui/theme"
+import baseline from "./verification-baseline.json"
+
+// Verification values are deliberately distinct. They are never imported by production.
+const external: RuntimeTheme = { schemaVersion: 1, tokens: {
+  "color.action.primary": "#6837a8", "color.state.active": "#007f73",
+  "color.stroke.input.focus": "#c75b00", "color.accent": "#ffd36d",
+  "color.action.destructive": "#d41466",
+} }
+const meta = { title: "Theme/Runtime Contract", tags: ["verification"], parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+
+function ThemeScope({ theme, label, showNavigation = true }: { theme?: RuntimeTheme; label: string; showNavigation?: boolean }) {
+  const ref = useRef<HTMLDivElement>(null)
+  useLayoutEffect(() => {
+    const root = ref.current!
+    if (theme) applyRuntimeTheme(root, theme)
+    return () => resetRuntimeTheme(root)
+  }, [theme])
+  return <section ref={ref} data-hm-theme="preset" data-testid={label}>
+    <h2 style={{ padding: "12px 20px" }}>{label}</h2><Specimens showNavigation={showNavigation} />
+  </section>
+}
+
+export const Comparison: Story = { render: () => <>
+  <p style={{ padding: 20 }}>Default / External: Primary purple / Active teal / Focus orange / Accent yellow / Destructive pink.</p>
+  <ThemeScope label="HM Default" /><ThemeScope label="External" theme={external} />
+</> }
+
+function GlobalSpecimens() {
+  useLayoutEffect(() => {
+    applyRuntimeTheme(document.documentElement, external)
+    return () => resetRuntimeTheme(document.documentElement)
+  }, [])
+  return <><h1 style={{ padding: 20 }}>Global External — popup/Portal verification</h1><Specimens /></>
+}
+export const GlobalExternal: Story = { render: () => <GlobalSpecimens /> }
+
+const properties = ["backgroundColor", "backgroundImage", "color", "borderTopColor", "borderRadius", "boxShadow", "width", "height", "padding", "gap", "fontSize", "lineHeight", "display"] as const
+// CSS Color 4 serializes color-mix as color(srgb); canonicalize it to legacy RGB for before/after parity.
+const normalize = (value: string) => value.replace(/color\(srgb ([\d.]+) ([\d.]+) ([\d.]+)(?: \/ ([\d.]+))?\)/g,
+  (_, r, g, b, a) => a && Number(a) !== 1 ? `rgba(${Math.round(Number(r)*255)}, ${Math.round(Number(g)*255)}, ${Math.round(Number(b)*255)}, ${Number(a)})` : `rgb(${Math.round(Number(r)*255)}, ${Math.round(Number(g)*255)}, ${Math.round(Number(b)*255)})`)
+const snapshot = (root: HTMLElement) => Array.from(root.querySelectorAll<HTMLElement>("[data-slot]"))
+  .map(el => { const s = getComputedStyle(el); return { slot: el.dataset.slot, values: properties.map(p => normalize(s[p])) } })
+const settle = async (root: HTMLElement) => {
+  // Bound the wait even when the browser suspends a transition in an inactive Story tab.
+  void root.offsetHeight
+  await new Promise<void>(resolve => setTimeout(resolve, 250))
+}
+const shadowHasColor = (shadow: string, hex: string) => {
+  const canvas = document.createElement("canvas")
+  canvas.width = canvas.height = 1
+  const context = canvas.getContext("2d", { willReadFrequently: true })!
+  const target = [1, 3, 5].map(start => parseInt(hex.slice(start, start+2), 16))
+  return [...shadow.matchAll(/(?:oklab|rgba?|color)\([^)]*\)/g)].some(([color]) => {
+    context.clearRect(0,0,1,1); context.fillStyle = color; context.fillRect(0,0,1,1)
+    const pixel = context.getImageData(0,0,1,1).data
+    return pixel[3] > 0 && target.every((channel,i) => Math.abs(channel-pixel[i]) <= 2)
+  })
+}
+const subscribeViewport = (notify: () => void) => { window.addEventListener("resize", notify); return () => window.removeEventListener("resize", notify) }
+function BaselineSpecimens() {
+  const mobile = useSyncExternalStore(subscribeViewport, () => window.matchMedia("(max-width: 1023px)").matches)
+  const values = mobile ? { ...baseline, "--hm-gnb-height": "56px", "--hm-gnb-padding-x": "16px", "--hm-lnb-width": "0px", "--hm-dashboard-padding": "20px" } : baseline
+  return <div data-testid="before" data-hm-theme="baseline" style={values as CSSProperties}><Specimens /></div>
+}
+
+export const Verification: Story = {
+  render: () => <div>
+    {/* Compare settled state targets, independent of background-tab animation clocks. */}
+    <style>{'[data-testid="before"] *, [data-testid="after"] * { transition-duration: 0s !important; }'}</style>
+    <h1 style={{ padding: 20 }}>Runtime Theme integration verification</h1>
+    <button style={{ margin: "0 20px" }} onClick={event => { void verifyRuntime(event.currentTarget.parentElement!).catch(() => undefined) }}>Run verification</button>
+    <output data-testid="result" style={{ display: "block", padding: 20 }}>Ready — Run verification</output>
+    <BaselineSpecimens />
+    <div data-testid="after" data-hm-theme="preset"><Specimens /></div>
+  </div>,
+  play: async ({ canvasElement }) => verifyRuntime(canvasElement),
+}
+
+async function verifyRuntime(canvasElement: HTMLElement) {
+    const before = canvasElement.querySelector<HTMLElement>('[data-testid="before"]')!
+    const after = canvasElement.querySelector<HTMLElement>('[data-testid="after"]')!
+    const result = canvasElement.querySelector<HTMLOutputElement>('output')!
+    if (result.dataset.running === "true") return
+    result.dataset.running = "true"
+    const checks: string[] = []
+    const assert = (condition: boolean, label: string) => { if (!condition) throw Error(label); checks.push(label) }
+    const variable = (name: string) => {
+      const value = getComputedStyle(after).getPropertyValue(name).trim().toLowerCase()
+      // Static CSS minification can shorten HEX6 to HEX3; compare the same color.
+      return /^#[\da-f]{3}$/.test(value) ? `#${value.slice(1).split("").map(character => character.repeat(2)).join("")}` : value
+    }
+    result.textContent = "Running… waiting for fonts"
+    await document.fonts.ready
+    result.textContent = "Running… comparing rendered Default"
+    await settle(after)
+    const initial = snapshot(after)
+    const parity = () => snapshot(after).flatMap((row,i) => row.values.flatMap((v,j) => v === initial[i]?.values[j] ? [] : [`${row.slot}.${properties[j]}: ${initial[i]?.values[j]} → ${v}`]))
+    try {
+      const old = snapshot(before)
+      const differences = initial.flatMap((row, i) => row.values.flatMap((v,j) => v === old[i]?.values[j] ? [] : [`${row.slot}.${properties[j]}: ${old[i]?.values[j]} → ${v}`]))
+      assert(differences.length === 0, `Default visual parity (${initial.length} rendered parts) ${differences.join("; ")}`)
+      assert(applyRuntimeTheme(after, defaultRuntimeTheme), "Default preset satisfies public contract")
+      assert(JSON.stringify(snapshot(after)) === JSON.stringify(initial), "Default preset injection equals CSS fallback")
+      resetRuntimeTheme(after)
+      assert(applyRuntimeTheme(after, external), "External partial theme accepted")
+      await settle(after)
+      const expected: Record<string, string> = {
+        "--hm-checkbox-checked-background": "#007f73", "--hm-radio-dot-color": "#007f73",
+        "--hm-switch-on-background": "#007f73", "--hm-slider-range-background": "#007f73",
+        "--hm-progress-indicator-background": "#007f73", "--hm-calendar-selected-background": "#007f73",
+        "--hm-calendar-range-edge-background": "#007f73", "--hm-badge-default-background": "#6837a8",
+        "--hm-pagination-active-background": "#6837a8", "--hm-input-focus-border-color": "#c75b00",
+        "--ring": "#c75b00", "--hm-input-error-border-color": "#d41466",
+        "--hm-button-outline-red-ink": "#d41466", "--hm-button-outline-green-ink": "#6837a8",
+        "--hm-gnb-current-text": "#6837a8", "--hm-lnb-current-text": "#6837a8",
+      }
+      for (const [key,value] of Object.entries(expected)) assert(variable(key) === value, `${key} independent role (${variable(key)})`)
+      const checked = after.querySelector<HTMLElement>('[data-slot="checkbox"][data-state="checked"]')!
+      const badge = after.querySelector<HTMLElement>('[data-slot="badge"]')!
+      const selectedDay = after.querySelector<HTMLElement>('[data-slot="calendar"] [data-selected] .rdp-day_button')!
+      assert(getComputedStyle(checked).backgroundColor === "rgb(0, 127, 115)", "Rendered Checkbox uses Active")
+      assert(getComputedStyle(badge).backgroundColor === "rgb(104, 55, 168)", "Rendered Badge uses Primary")
+      assert(getComputedStyle(selectedDay).backgroundColor === "rgb(0, 127, 115)", "Rendered Calendar selected uses Active")
+      checked.focus()
+      assert(shadowHasColor(getComputedStyle(checked).boxShadow, "#c75b00"), "Actual Checkbox focus uses independent Focus")
+      selectedDay.focus()
+      assert(shadowHasColor(getComputedStyle(selectedDay).boxShadow, "#c75b00"), "Actual Calendar focus uses independent Focus")
+      selectedDay.blur()
+      await settle(after)
+      assert(variable("--hm-sem-bg-surface") === "#ffffff", "Partial override preserves unspecified Default")
+      for (const key of ["--hm-select-option-state-background", "--hm-calendar-range-middle-background", "--hm-table-row-selected-background", "--hm-pagination-hover-background", "--hm-command-highlight-background"])
+        assert(variable(key).includes("#ffd36d 45%"), `${key} receives Accent 45%`)
+      // Exhaustively inject every public entry, independently, through the same DOM scope.
+      for (const [key,def] of Object.entries(runtimeThemeContract)) {
+        const group = key.includes("stop.") && !key.startsWith("color.palette.")
+        if (group) continue // Covered as complete groups by the full default preset and external gradient document below.
+        const value = def.type === "radius" ? "7px" : "#345678"
+        assert(applyRuntimeTheme(after, { schemaVersion: 1, tokens: { [key]: value } }) && variable(def.property) === value, `${key} override`)
+      }
+      const stops = Object.fromEntries(Object.keys(runtimeThemeContract).filter(key => key.includes("stop.")).map(key => [key, "#345678"]))
+      assert(applyRuntimeTheme(after, { schemaVersion: 1, tokens: stops }), "External complete gradient groups accepted")
+      assert(variable("--hm-button-brand-green-background").includes("#345678"), "External stops reach Brand Button gradient")
+      assert(variable("--hm-gnb-background").includes("#345678"), "External stops reach GNB gradient")
+      // One-role changes may not leak into other core roles.
+      const roles = ["color.action.primary", "color.state.active", "color.stroke.input.focus", "color.accent", "color.action.destructive"] as const
+      for (const key of roles) {
+        applyRuntimeTheme(after, { schemaVersion: 1, tokens: { [key]: "#345678" } })
+        for (const other of roles.filter(k => k !== key)) assert(variable(runtimeThemeContract[other].property) === runtimeThemeContract[other].defaultValue, `${key} leaves ${other} unchanged`)
+      }
+      assert(applyRuntimeTheme(after, { schemaVersion: 1, tokens: {} }), "Empty tokens accepted")
+      await settle(after)
+      assert(parity().length === 0, `Empty theme preserves Default ${parity().join("; ")}`)
+      for (const invalid of [null, {}, {schemaVersion:2,tokens:{}}, {schemaVersion:1,tokens:{"color.state.active":"red"}}, JSON.parse('{"schemaVersion":1,"tokens":{"__proto__":"#123456","color.state.active":"#007f73"}}'), {schemaVersion:1,tokens:{"--hm-checkbox-checked-background":"#123456"}}, {schemaVersion:1,tokens:{"color.bg.brand.stop.0":"#123456"}}]) {
+        applyRuntimeTheme(after, external)
+        assert(!applyRuntimeTheme(after, invalid), "Invalid document rejected atomically")
+        await settle(after)
+        assert(parity().length === 0, `Invalid document releases override to Default ${parity().join("; ")}`)
+      }
+      applyRuntimeTheme(after, external)
+      const geometry = snapshot(after).map(r => r.values.slice(4,5).concat(r.values.slice(6)))
+      assert(JSON.stringify(geometry) === JSON.stringify(initial.map(r => r.values.slice(4,5).concat(r.values.slice(6)))), "External color theme preserves geometry")
+      // Global A + local B remain separate, and cleanup restores host-owned inline values.
+      const globalRoot = document.documentElement
+      try {
+        applyRuntimeTheme(globalRoot, external)
+        applyRuntimeTheme(after, {schemaVersion:1,tokens:{"color.state.active":"#345678"}})
+        assert(variable("--hm-checkbox-checked-background") === "#345678", "Scoped B overrides global A")
+        assert(getComputedStyle(globalRoot).getPropertyValue("--hm-checkbox-checked-background").trim() === "#007f73", "Global A retains its own mapping")
+        assert(variable("--hm-badge-default-background") === "#123328", "Explicit isolated scope falls back to HM preset")
+      } finally { resetRuntimeTheme(globalRoot); resetRuntimeTheme(after) }
+      after.style.setProperty("--hm-sem-state-active", "#112233", "important")
+      applyRuntimeTheme(after, external); resetRuntimeTheme(after)
+      assert(after.style.getPropertyValue("--hm-sem-state-active") === "#112233" && after.style.getPropertyPriority("--hm-sem-state-active") === "important", "Cleanup restores previous inline value and priority")
+      after.style.removeProperty("--hm-sem-state-active")
+      result.textContent = `PASS — ${checks.length} checks; ${initial.length} rendered parts; default parity, all public tokens, independent roles, partial/empty/invalid, switching, cleanup, global/scoped, geometry.`
+    } catch (error) {
+      result.textContent = `FAIL after ${checks.length} checks — ${String(error)}`
+      throw error
+    } finally { resetRuntimeTheme(after); result.dataset.running = "false" }
+}
+
+export const Dashboard: Story = { render: () => <DashboardLayout
+  header={<DashboardHeader><strong>Theme Dashboard</strong></DashboardHeader>}
+  sidebar={<DashboardSidebar><nav aria-label="Dashboard 메뉴"><a href="#" aria-current="page">Current</a></nav></DashboardSidebar>}>
+  <DashboardMain><ThemeScope label="External" theme={external} showNavigation={false} /></DashboardMain>
+</DashboardLayout> }
diff --git a/src/theme/specimens.tsx b/src/theme/specimens.tsx
new file mode 100644
index 0000000..48a0de7
--- /dev/null
+++ b/src/theme/specimens.tsx
@@ -0,0 +1,50 @@
+import {
+  Button, Input, Checkbox, RadioGroup, RadioGroupItem, Switch, Select, SelectTrigger, SelectValue,
+  SelectContent, SelectItem, Slider, Progress, Calendar, DatePicker, Pagination, PaginationContent,
+  PaginationItem, PaginationLink, Badge, Table, TableHeader, TableBody, TableRow, TableHead, TableCell,
+  GNB, GNBBrand, GNBNav, GNBMobileMenu, GNBMobileLink, GNBUtilities, LNB, LNBBrand, LNBNav, LNBItem,
+  LNBMobileHeader, LNBMobileBrand, LNBMobileMenu, LNBMobileLink,
+  Command, CommandList, CommandItem,
+} from "@hm-design/ui"
+export function Specimens({ navigationMode = "GNB", showNavigation = true }: { navigationMode?: "GNB" | "LNB"; showNavigation?: boolean }) {
+  return <div style={{ display: "grid", gap: 18, padding: 20 }}>
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
+      <Button appearance="outline">Primary</Button><Button>Brand gradient</Button>
+      <Button variant="destructive" appearance="outline">Destructive</Button>
+      <Badge>Badge</Badge><Badge variant="destructive">Error</Badge>
+      <Checkbox defaultChecked aria-label="Checked" /><Checkbox aria-label="Focus checkbox" />
+      <RadioGroup defaultValue="yes"><RadioGroupItem value="yes" aria-label="Selected radio" /></RadioGroup>
+      <Switch defaultChecked aria-label="ON" />
+    </div>
+    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 12 }}>
+      <Input placeholder="Focus input" /><Input aria-invalid="true" placeholder="Invalid input" />
+      <Select defaultValue="a"><SelectTrigger aria-label="Select"><SelectValue /></SelectTrigger>
+        <SelectContent><SelectItem value="a">Selected</SelectItem><SelectItem value="b">Highlighted</SelectItem></SelectContent>
+      </Select>
+      <DatePicker defaultValue={new Date(2026, 9, 15)} />
+      <Slider defaultValue={[60]} aria-label="Active slider" /><Progress value={60} />
+    </div>
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 20 }}>
+      <Calendar mode="single" defaultMonth={new Date(2026, 9, 1)} today={new Date(2026, 9, 2)} selected={new Date(2026, 9, 15)} />
+      <Calendar mode="range" defaultMonth={new Date(2026, 9, 1)} today={new Date(2026, 9, 2)} selected={{ from: new Date(2026, 9, 8), to: new Date(2026, 9, 14) }} />
+    </div>
+    <Pagination><PaginationContent><PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>
+      <PaginationItem><PaginationLink href="#">2</PaginationLink></PaginationItem></PaginationContent></Pagination>
+    <Table><TableHeader><TableRow><TableHead>Status</TableHead><TableHead>Value</TableHead></TableRow></TableHeader>
+      <TableBody><TableRow data-state="selected"><TableCell>Selected</TableCell><TableCell>60</TableCell></TableRow>
+        <TableRow><TableCell>Hover</TableCell><TableCell>40</TableCell></TableRow></TableBody></Table>
+    <Command><CommandList><CommandItem value="a">Menu highlight</CommandItem><CommandItem value="b">Menu second</CommandItem></CommandList></Command>
+    {showNavigation && navigationMode === "GNB" ? <GNB><GNBMobileMenu><GNBMobileLink href="#" active>Current</GNBMobileLink></GNBMobileMenu>
+      <GNBBrand href="#"><span><strong>Runtime Theme</strong></span></GNBBrand>
+      <GNBNav><span>GNB</span></GNBNav><GNBUtilities><Badge>Primary</Badge></GNBUtilities></GNB> : null}
+    {showNavigation && navigationMode === "LNB" ? <div>
+      <LNB style={{ minHeight: 180 }}><LNBBrand><strong>LNB Standalone</strong></LNBBrand>
+        <LNBNav aria-label="LNB Preview"><LNBItem href="#" active>Current</LNBItem><LNBItem href="#">Item</LNBItem></LNBNav></LNB>
+      <LNBMobileHeader>
+        <LNBMobileMenu title="LNB Preview"><LNBMobileLink href="#" active>Current</LNBMobileLink><LNBMobileLink href="#">Item</LNBMobileLink></LNBMobileMenu>
+        <LNBMobileBrand href="#">LNB Standalone</LNBMobileBrand>
+      </LNBMobileHeader>
+    </div> : null}
+  </div>
+}
+
diff --git a/src/theme/verification-baseline.json b/src/theme/verification-baseline.json
new file mode 100644
index 0000000..7844bb3
--- /dev/null
+++ b/src/theme/verification-baseline.json
@@ -0,0 +1,1055 @@
+{
+  "--hm-accordion-text": "var(--hm-sem-fg-primary)",
+  "--hm-accordion-content-text": "var(--hm-sem-fg-primary)",
+  "--hm-accordion-divider-width": "1px",
+  "--hm-accordion-divider-color": "var(--hm-warm-neutral-pale)",
+  "--hm-accordion-trigger-min-height": "48px",
+  "--hm-accordion-trigger-padding-y": "12px",
+  "--hm-accordion-trigger-gap": "16px",
+  "--hm-accordion-trigger-font-size": "16px",
+  "--hm-accordion-trigger-line-height": "24px",
+  "--hm-accordion-trigger-font-weight": "500",
+  "--hm-accordion-icon-size": "20px",
+  "--hm-accordion-icon-color": "var(--hm-sem-fg-secondary)",
+  "--hm-accordion-content-font-size": "14px",
+  "--hm-accordion-content-line-height": "20px",
+  "--hm-accordion-content-padding-bottom": "16px",
+  "--hm-accordion-disabled-opacity": "0.6",
+  "--hm-alert-dialog-background": "var(--hm-sem-bg-surface)",
+  "--hm-alert-dialog-text": "var(--hm-sem-fg-primary)",
+  "--hm-alert-dialog-border-width": "1px",
+  "--hm-alert-dialog-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-alert-dialog-radius": "8px",
+  "--hm-alert-dialog-shadow": "0 0 12px rgb(0 0 0 / 0.2)",
+  "--hm-alert-dialog-width": "400px",
+  "--hm-alert-dialog-edge": "16px",
+  "--hm-alert-dialog-padding": "24px",
+  "--hm-alert-dialog-header-gap": "8px",
+  "--hm-alert-dialog-actions-gap": "8px",
+  "--hm-alert-dialog-actions-margin-top": "24px",
+  "--hm-alert-dialog-title-font-size": "18px",
+  "--hm-alert-dialog-title-line-height": "28px",
+  "--hm-alert-dialog-title-font-weight": "700",
+  "--hm-alert-dialog-description-font-size": "14px",
+  "--hm-alert-dialog-description-line-height": "20px",
+  "--hm-alert-dialog-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-alert-radius": "var(--hm-radius-control-md)",
+  "--hm-alert-padding-x": "16px",
+  "--hm-alert-padding-y": "12px",
+  "--hm-alert-border-width": "1px",
+  "--hm-alert-icon-size": "16px",
+  "--hm-alert-title-font-size": "14px",
+  "--hm-alert-title-line-height": "20px",
+  "--hm-alert-title-font-weight": "500",
+  "--hm-alert-description-font-size": "14px",
+  "--hm-alert-description-line-height": "20px",
+  "--hm-alert-description-font-weight": "400",
+  "--hm-alert-default-background": "var(--hm-sem-bg-surface)",
+  "--hm-alert-default-border-color": "var(--hm-sem-stroke-default)",
+  "--hm-alert-default-title-color": "var(--hm-sem-fg-primary)",
+  "--hm-alert-default-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-alert-destructive-background": "var(--hm-sem-bg-surface)",
+  "--hm-alert-destructive-border-color": "var(--hm-sem-action-destructive)",
+  "--hm-alert-destructive-title-color": "var(--hm-sem-action-destructive)",
+  "--hm-alert-destructive-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-avatar-size-sm": "24px",
+  "--hm-avatar-size-md": "32px",
+  "--hm-avatar-size-lg": "40px",
+  "--hm-avatar-radius": "9999px",
+  "--hm-avatar-fallback-background": "var(--accent)",
+  "--hm-avatar-fallback-text": "var(--accent-foreground)",
+  "--hm-avatar-fallback-font-weight": "500",
+  "--hm-avatar-fallback-font-size-sm": "10px",
+  "--hm-avatar-fallback-font-size-md": "12px",
+  "--hm-avatar-fallback-font-size-lg": "14px",
+  "--hm-badge-radius": "var(--hm-radius-control-md)",
+  "--hm-badge-padding-x": "8px",
+  "--hm-badge-padding-y": "2px",
+  "--hm-badge-border-width": "1px",
+  "--hm-badge-font-size": "12px",
+  "--hm-badge-line-height": "18px",
+  "--hm-badge-font-weight": "500",
+  "--hm-badge-default-background": "var(--hm-sem-action-primary)",
+  "--hm-badge-default-text": "var(--hm-sem-on-action-primary)",
+  "--hm-badge-default-border-color": "var(--hm-sem-action-primary)",
+  "--hm-badge-secondary-background": "var(--hm-color-surface-subtle)",
+  "--hm-badge-secondary-text": "var(--hm-sem-fg-secondary)",
+  "--hm-badge-secondary-border-color": "var(--hm-color-surface-subtle)",
+  "--hm-badge-destructive-background": "var(--hm-sem-action-destructive)",
+  "--hm-badge-destructive-text": "var(--hm-white)",
+  "--hm-badge-destructive-border-color": "var(--hm-sem-action-destructive)",
+  "--hm-badge-outline-background": "var(--hm-sem-bg-surface)",
+  "--hm-badge-outline-text": "var(--hm-sem-fg-primary)",
+  "--hm-badge-outline-border-color": "var(--hm-sem-stroke-default)",
+  "--hm-breadcrumb-font-size": "14px",
+  "--hm-breadcrumb-line-height": "20px",
+  "--hm-breadcrumb-font-weight": "400",
+  "--hm-breadcrumb-gap": "8px",
+  "--hm-breadcrumb-link-color": "var(--hm-sem-fg-secondary)",
+  "--hm-breadcrumb-link-hover-color": "var(--hm-sem-fg-primary)",
+  "--hm-breadcrumb-page-color": "var(--hm-sem-fg-primary)",
+  "--hm-breadcrumb-page-font-weight": "700",
+  "--hm-breadcrumb-separator-color": "var(--hm-sem-fg-secondary)",
+  "--hm-breadcrumb-separator-size": "16px",
+  "--hm-breadcrumb-ellipsis-size": "20px",
+  "--hm-breadcrumb-focus-radius": "2px",
+  "--hm-button-radius": "var(--hm-radius-button)",
+  "--hm-button-font-family": "var(--hm-font-family-base)",
+  "--hm-button-weight-brand": "var(--hm-font-weight-bold)",
+  "--hm-button-weight-standard": "var(--hm-font-weight-medium)",
+  "--hm-button-text": "var(--hm-color-text-inverse)",
+  "--hm-button-disabled-opacity": "0.6",
+  "--hm-button-height-sm": "28px",
+  "--hm-button-height-md": "var(--hm-control-height-md)",
+  "--hm-button-height-lg": "42px",
+  "--hm-button-padding-x-sm": "10px",
+  "--hm-button-padding-x-md": "14px",
+  "--hm-button-padding-x-lg": "18px",
+  "--hm-button-font-size-sm": "12px",
+  "--hm-button-font-size-md": "var(--hm-font-size-button-md)",
+  "--hm-button-font-size-lg": "15px",
+  "--hm-button-line-height-sm": "18px",
+  "--hm-button-line-height-md": "20px",
+  "--hm-button-line-height-lg": "22px",
+  "--hm-button-brand-green-background": "var(--hm-sem-surface-action-primary)",
+  "--hm-button-brand-green-border": "var(--hm-sem-border-action-primary)",
+  "--hm-button-brand-brown-background": "linear-gradient(180deg, var(--hm-brown-light-2) 0%, var(--hm-brown-light-1) 30%, var(--hm-brown-dark-1) 65%, #221d13 100%)",
+  "--hm-button-brand-brown-border": "linear-gradient(180deg, var(--hm-brown-dark-1) 0%, #a98d53 50%, #221d13 100%)",
+  "--hm-button-brand-orange-background": "linear-gradient(180deg, #d35a00 0%, #ce5600 30%, #b44b00 65%, #783402 100%)",
+  "--hm-button-brand-orange-border": "linear-gradient(180deg, #bc4c00 0%, var(--hm-orange-light-4) 50%, #5e2902 100%)",
+  "--hm-button-brand-bevel": "inset 0 1px 1px var(--hm-color-action-shadow-light), inset 0 -1px 2px var(--hm-color-action-shadow-dark)",
+  "--hm-button-solid-green-background": "var(--hm-green-light-1)",
+  "--hm-button-solid-green-border": "var(--hm-green-dark-1)",
+  "--hm-button-solid-brown-background": "var(--hm-brown-light-1)",
+  "--hm-button-solid-brown-border": "var(--hm-brown-dark-1)",
+  "--hm-button-solid-orange-background": "var(--hm-orange-default)",
+  "--hm-button-solid-orange-border": "var(--hm-orange-default)",
+  "--hm-button-solid-gray-background": "#767676",
+  "--hm-button-solid-gray-border": "#5a5a5a",
+  "--hm-button-outline-green-ink": "var(--hm-color-primary)",
+  "--hm-button-outline-brown-ink": "var(--hm-brown-default)",
+  "--hm-button-outline-red-ink": "var(--hm-color-action-destructive)",
+  "--hm-button-outline-red-surface": "var(--hm-color-action-destructive-hover)",
+  "--hm-button-outline-surface": "var(--hm-color-surface-default)",
+  "--hm-button-state-overlay": "var(--hm-color-action-overlay-hover)",
+  "--hm-calendar-padding": "12px",
+  "--hm-calendar-text": "var(--hm-sem-fg-primary)",
+  "--hm-calendar-month-gap": "16px",
+  "--hm-calendar-caption-height": "32px",
+  "--hm-calendar-caption-font-size": "14px",
+  "--hm-calendar-caption-line-height": "20px",
+  "--hm-calendar-caption-font-weight": "700",
+  "--hm-calendar-nav-size": "28px",
+  "--hm-calendar-nav-radius": "var(--hm-radius-control-md)",
+  "--hm-calendar-nav-icon-size": "16px",
+  "--hm-calendar-nav-hover-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-calendar-weekday-color": "var(--hm-sem-fg-secondary)",
+  "--hm-calendar-weekday-font-size": "12px",
+  "--hm-calendar-weekday-line-height": "18px",
+  "--hm-calendar-weekday-font-weight": "500",
+  "--hm-calendar-day-size": "36px",
+  "--hm-calendar-day-radius": "var(--hm-radius-control-md)",
+  "--hm-calendar-day-font-size": "14px",
+  "--hm-calendar-day-line-height": "20px",
+  "--hm-calendar-day-hover-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-calendar-today-background": "var(--hm-color-surface-subtle)",
+  "--hm-calendar-today-font-weight": "700",
+  "--hm-calendar-selected-background": "var(--hm-sem-state-active)",
+  "--hm-calendar-selected-text": "var(--hm-sem-on-state-active)",
+  "--hm-calendar-range-edge-background": "var(--hm-sem-state-active)",
+  "--hm-calendar-range-edge-text": "var(--hm-sem-on-state-active)",
+  "--hm-calendar-range-middle-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-calendar-range-middle-text": "var(--accent-foreground)",
+  "--hm-calendar-outside-color": "var(--hm-sem-fg-secondary)",
+  "--hm-calendar-outside-opacity": "0.6",
+  "--hm-calendar-disabled-opacity": "0.4",
+  "--hm-card-radius": "var(--hm-radius-container)",
+  "--hm-card-border-width": "1px",
+  "--hm-card-padding": "24px",
+  "--hm-card-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-card-border-color-on-content": "var(--hm-brown-light-4)",
+  "--hm-card-surface": "var(--hm-sem-bg-surface)",
+  "--hm-card-surface-content": "var(--hm-sem-bg-content)",
+  "--hm-card-text": "var(--hm-sem-fg-primary)",
+  "--hm-card-header-gap": "20px",
+  "--hm-card-title-font-size": "20px",
+  "--hm-card-title-line-height": "28px",
+  "--hm-card-title-font-weight": "600",
+  "--hm-card-title-color": "var(--hm-sem-fg-primary)",
+  "--hm-carousel-gap": "16px",
+  "--hm-carousel-control-size": "32px",
+  "--hm-carousel-control-inset": "8px",
+  "--hm-carousel-control-icon-size": "16px",
+  "--hm-carousel-control-background": "var(--hm-sem-bg-surface)",
+  "--hm-carousel-control-text": "var(--hm-sem-fg-primary)",
+  "--hm-carousel-control-border-width": "1px",
+  "--hm-carousel-control-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-carousel-control-hover-background": "var(--accent)",
+  "--hm-carousel-disabled-opacity": "0.6",
+  "--hm-checkbox-size": "18px",
+  "--hm-checkbox-radius": "var(--hm-radius-control-md)",
+  "--hm-checkbox-border-width": "1px",
+  "--hm-checkbox-icon-size": "14px",
+  "--hm-checkbox-background": "var(--hm-sem-bg-surface)",
+  "--hm-checkbox-border-color": "var(--hm-sem-stroke-default)",
+  "--hm-checkbox-hover-border-color": "var(--hm-sem-action-primary)",
+  "--hm-checkbox-checked-background": "var(--hm-sem-state-active)",
+  "--hm-checkbox-checked-border-color": "var(--hm-sem-state-active)",
+  "--hm-checkbox-checked-hover-overlay": "var(--hm-color-action-overlay-hover)",
+  "--hm-checkbox-indicator-color": "var(--hm-sem-on-state-active)",
+  "--hm-checkbox-error-border-color": "var(--hm-red-danger)",
+  "--hm-collapsible-trigger-text": "var(--hm-sem-fg-primary)",
+  "--hm-collapsible-trigger-gap": "8px",
+  "--hm-collapsible-trigger-font-size": "14px",
+  "--hm-collapsible-trigger-line-height": "20px",
+  "--hm-collapsible-trigger-font-weight": "500",
+  "--hm-collapsible-icon-size": "16px",
+  "--hm-collapsible-icon-color": "var(--hm-sem-fg-secondary)",
+  "--hm-collapsible-content-gap": "8px",
+  "--hm-collapsible-content-text": "var(--hm-sem-fg-primary)",
+  "--hm-collapsible-content-font-size": "14px",
+  "--hm-collapsible-content-line-height": "20px",
+  "--hm-collapsible-disabled-opacity": "0.6",
+  "--hm-combobox-height-md": "32px",
+  "--hm-combobox-height-lg": "42px",
+  "--hm-combobox-border-width": "1px",
+  "--hm-combobox-padding-x": "12px",
+  "--hm-combobox-gap": "12px",
+  "--hm-combobox-radius": "var(--hm-radius-control-md)",
+  "--hm-combobox-font-size-md": "14px",
+  "--hm-combobox-line-height-md": "20px",
+  "--hm-combobox-font-size-lg": "16px",
+  "--hm-combobox-line-height-lg": "24px",
+  "--hm-combobox-background": "var(--hm-sem-bg-surface)",
+  "--hm-combobox-text": "var(--hm-sem-fg-primary)",
+  "--hm-combobox-placeholder": "var(--hm-sem-fg-placeholder)",
+  "--hm-combobox-border-color": "var(--hm-sem-stroke-input-default)",
+  "--hm-combobox-focus-border-color": "var(--hm-sem-stroke-input-focus)",
+  "--hm-combobox-icon-size": "18px",
+  "--hm-combobox-icon-color": "var(--hm-sem-fg-secondary)",
+  "--hm-combobox-check-size": "16px",
+  "--hm-combobox-disabled-opacity": "0.6",
+  "--hm-command-background": "var(--hm-sem-bg-surface)",
+  "--hm-command-text": "var(--hm-sem-fg-primary)",
+  "--hm-command-radius": "var(--hm-radius-container)",
+  "--hm-command-input-height": "40px",
+  "--hm-command-input-padding-x": "12px",
+  "--hm-command-input-gap": "8px",
+  "--hm-command-input-font-size": "14px",
+  "--hm-command-input-line-height": "20px",
+  "--hm-command-input-placeholder": "var(--hm-sem-fg-placeholder)",
+  "--hm-command-input-icon-size": "16px",
+  "--hm-command-input-icon-color": "var(--hm-sem-fg-secondary)",
+  "--hm-command-divider-color": "var(--hm-warm-neutral-pale)",
+  "--hm-command-list-max-height": "280px",
+  "--hm-command-list-padding": "4px",
+  "--hm-command-item-height": "36px",
+  "--hm-command-item-padding-x": "12px",
+  "--hm-command-item-gap": "8px",
+  "--hm-command-item-radius": "2px",
+  "--hm-command-item-font-size": "14px",
+  "--hm-command-item-line-height": "20px",
+  "--hm-command-highlight-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-command-highlight-text": "var(--accent-foreground)",
+  "--hm-command-group-label-color": "var(--hm-sem-fg-secondary)",
+  "--hm-command-group-label-font-size": "12px",
+  "--hm-command-group-label-line-height": "18px",
+  "--hm-command-group-label-font-weight": "500",
+  "--hm-command-shortcut-color": "var(--hm-sem-fg-secondary)",
+  "--hm-command-shortcut-font-size": "12px",
+  "--hm-command-empty-padding-y": "24px",
+  "--hm-command-empty-color": "var(--hm-sem-fg-secondary)",
+  "--hm-command-disabled-opacity": "0.6",
+  "--hm-context-menu-background": "var(--hm-sem-floating-background)",
+  "--hm-context-menu-text": "var(--hm-sem-fg-primary)",
+  "--hm-context-menu-border-width": "var(--hm-sem-floating-border-width)",
+  "--hm-context-menu-border-color": "var(--hm-sem-floating-border-color)",
+  "--hm-context-menu-radius": "var(--hm-sem-floating-radius)",
+  "--hm-context-menu-shadow": "var(--hm-sem-floating-shadow)",
+  "--hm-context-menu-padding": "4px",
+  "--hm-context-menu-item-height": "36px",
+  "--hm-context-menu-item-padding-x": "12px",
+  "--hm-context-menu-item-gap": "8px",
+  "--hm-context-menu-item-radius": "2px",
+  "--hm-context-menu-font-size": "14px",
+  "--hm-context-menu-line-height": "20px",
+  "--hm-context-menu-font-weight": "400",
+  "--hm-context-menu-highlight-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-context-menu-highlight-text": "var(--accent-foreground)",
+  "--hm-context-menu-destructive-text": "var(--hm-sem-action-destructive)",
+  "--hm-context-menu-destructive-highlight-background": "var(--hm-color-action-destructive-hover)",
+  "--hm-context-menu-label-color": "var(--hm-sem-fg-secondary)",
+  "--hm-context-menu-label-font-size": "12px",
+  "--hm-context-menu-label-line-height": "18px",
+  "--hm-context-menu-label-font-weight": "500",
+  "--hm-context-menu-shortcut-color": "var(--hm-sem-fg-secondary)",
+  "--hm-context-menu-shortcut-font-size": "12px",
+  "--hm-context-menu-separator-color": "var(--hm-warm-neutral-pale)",
+  "--hm-context-menu-indicator-size": "16px",
+  "--hm-context-menu-radio-dot-size": "8px",
+  "--hm-dashboard-height": "100dvh",
+  "--hm-dashboard-background": "var(--hm-lnb-background-end)",
+  "--hm-dashboard-content-background": "var(--hm-sem-bg-content)",
+  "--hm-dashboard-padding": "34px",
+  "--hm-dashboard-gap": "24px",
+  "--hm-dashboard-content-shadow-top": "0 -8px 18px rgb(7 30 24 / 0.18)",
+  "--hm-dashboard-content-shadow-side": "-8px 0 18px rgb(7 30 24 / 0.18)",
+  "--hm-data-table-footer-gap": "12px",
+  "--hm-data-table-footer-padding-top": "12px",
+  "--hm-data-table-summary-color": "var(--hm-sem-fg-secondary)",
+  "--hm-data-table-summary-font-size": "13px",
+  "--hm-data-table-sort-gap": "4px",
+  "--hm-data-table-sort-icon-size": "14px",
+  "--hm-data-table-sort-active-color": "var(--hm-green-light-3)",
+  "--hm-data-table-empty-padding-y": "48px",
+  "--hm-data-table-empty-color": "var(--hm-sem-fg-secondary)",
+  "--hm-data-table-skeleton-height": "16px",
+  "--hm-date-picker-height-md": "32px",
+  "--hm-date-picker-height-lg": "42px",
+  "--hm-date-picker-border-width": "1px",
+  "--hm-date-picker-padding-x": "12px",
+  "--hm-date-picker-gap": "12px",
+  "--hm-date-picker-radius": "var(--hm-radius-control-md)",
+  "--hm-date-picker-font-size-md": "14px",
+  "--hm-date-picker-line-height-md": "20px",
+  "--hm-date-picker-font-size-lg": "16px",
+  "--hm-date-picker-line-height-lg": "24px",
+  "--hm-date-picker-background": "var(--hm-sem-bg-surface)",
+  "--hm-date-picker-text": "var(--hm-sem-fg-primary)",
+  "--hm-date-picker-placeholder": "var(--hm-sem-fg-placeholder)",
+  "--hm-date-picker-border-color": "var(--hm-sem-stroke-input-default)",
+  "--hm-date-picker-focus-border-color": "var(--hm-sem-stroke-input-focus)",
+  "--hm-date-picker-icon-size": "18px",
+  "--hm-date-picker-icon-color": "var(--hm-sem-fg-secondary)",
+  "--hm-date-picker-disabled-opacity": "0.6",
+  "--hm-color-primary": "var(--hm-green-default)",
+  "--hm-color-primary-hover": "color-mix(in srgb, var(--hm-color-primary) 85%, var(--hm-black))",
+  "--hm-color-primary-active": "color-mix(in srgb, var(--hm-color-primary) 70%, var(--hm-black))",
+  "--hm-color-surface-default": "var(--hm-white)",
+  "--hm-color-surface-content": "var(--hm-beige-light)",
+  "--hm-color-surface-subtle": "var(--hm-warm-neutral-muted)",
+  "--hm-color-text-primary": "var(--hm-green-dark-1)",
+  "--hm-color-text-secondary": "var(--hm-warm-neutral-dark)",
+  "--hm-color-text-inverse": "var(--hm-white)",
+  "--hm-color-text-placeholder": "var(--hm-neutral-gray-500)",
+  "--hm-color-border-default": "var(--hm-warm-neutral-mid)",
+  "--hm-color-border-control": "var(--hm-warm-neutral-pale)",
+  "--hm-color-border-focus": "var(--hm-green-light-2)",
+  "--hm-color-action-cancel": "var(--hm-warm-neutral-dark)",
+  "--hm-color-action-destructive": "var(--hm-red-danger)",
+  "--hm-color-action-destructive-hover": "color-mix(in srgb, var(--hm-color-action-destructive) 8%, var(--hm-color-surface-default))",
+  "--hm-color-action-overlay-hover": "color-mix(in srgb, var(--hm-black) 20%, transparent)",
+  "--hm-color-action-overlay-active": "color-mix(in srgb, var(--hm-black) 30%, transparent)",
+  "--hm-color-action-shadow-light": "color-mix(in srgb, var(--hm-white) 10%, transparent)",
+  "--hm-color-action-shadow-dark": "color-mix(in srgb, var(--hm-black) 25%, transparent)",
+  "--hm-radius-control-md": "4px",
+  "--hm-control-height-md": "34px",
+  "--hm-font-family-base": "\"Noto Sans KR\", \"Malgun Gothic\", sans-serif",
+  "--hm-font-size-button-md": "13px",
+  "--hm-font-weight-medium": "500",
+  "--hm-font-weight-bold": "700",
+  "--hm-sem-bg-content": "var(--hm-color-surface-content)",
+  "--hm-sem-bg-surface": "var(--hm-color-surface-default)",
+  "--hm-sem-fg-primary": "var(--hm-color-text-primary)",
+  "--hm-sem-fg-secondary": "var(--hm-color-text-secondary)",
+  "--hm-sem-fg-placeholder": "var(--hm-color-text-placeholder)",
+  "--hm-sem-action-primary": "var(--hm-color-primary)",
+  "--hm-sem-action-cancel": "var(--hm-color-action-cancel)",
+  "--hm-sem-action-destructive": "var(--hm-color-action-destructive)",
+  "--hm-sem-stroke-default": "var(--hm-color-border-default)",
+  "--hm-sem-stroke-input-default": "var(--hm-color-border-control)",
+  "--hm-sem-stroke-input-focus": "var(--hm-color-border-focus)",
+  "--hm-sem-on-action-primary": "var(--hm-color-text-inverse)",
+  "--hm-sem-state-active": "var(--hm-green-light-2)",
+  "--hm-sem-on-state-active": "var(--hm-color-text-inverse)",
+  "--hm-sem-brand-bg-stop-0": "var(--hm-green-dark-1)",
+  "--hm-sem-brand-bg-stop-12": "var(--hm-green-dark-2)",
+  "--hm-sem-brand-bg-stop-42": "var(--hm-green-default)",
+  "--hm-sem-brand-bg-stop-78": "var(--hm-green-light-2)",
+  "--hm-sem-brand-bg-stop-100": "var(--hm-green-light-1)",
+  "--hm-sem-bg-brand": "linear-gradient(to bottom,\r\n    var(--hm-sem-brand-bg-stop-0) 0%, var(--hm-sem-brand-bg-stop-12) 12%,\r\n    var(--hm-sem-brand-bg-stop-42) 42%, var(--hm-sem-brand-bg-stop-78) 78%,\r\n    var(--hm-sem-brand-bg-stop-100) 100%)",
+  "--hm-sem-action-surface-stop-0": "var(--hm-green-tone-1)",
+  "--hm-sem-action-surface-stop-30": "var(--hm-green-tone-2)",
+  "--hm-sem-action-surface-stop-65": "var(--hm-green-tone-3)",
+  "--hm-sem-action-surface-stop-100": "var(--hm-green-tone-4)",
+  "--hm-sem-surface-action-primary": "linear-gradient(180deg,\r\n    var(--hm-sem-action-surface-stop-0) 0%, var(--hm-sem-action-surface-stop-30) 30%,\r\n    var(--hm-sem-action-surface-stop-65) 65%, var(--hm-sem-action-surface-stop-100) 100%)",
+  "--hm-sem-action-border-stop-0": "var(--hm-green-dark-1)",
+  "--hm-sem-action-border-stop-50": "var(--hm-green-light-4)",
+  "--hm-sem-action-border-stop-100": "var(--hm-green-tone-4)",
+  "--hm-sem-border-action-primary": "linear-gradient(180deg,\r\n    var(--hm-sem-action-border-stop-0) 0%, var(--hm-sem-action-border-stop-50) 50%,\r\n    var(--hm-sem-action-border-stop-100) 100%)",
+  "--hm-radius-button": "var(--hm-radius-control-md)",
+  "--hm-radius-input": "var(--hm-radius-control-md)",
+  "--hm-radius-select": "var(--hm-radius-control-md)",
+  "--hm-radius-container": "var(--hm-radius-control-md)",
+  "--hm-sem-floating-background": "var(--hm-sem-bg-surface)",
+  "--hm-sem-floating-border-width": "1px",
+  "--hm-sem-floating-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-sem-floating-radius": "var(--hm-radius-container)",
+  "--hm-sem-floating-shadow": "0 0 12px rgb(0 0 0 / 0.2)",
+  "--background": "var(--hm-sem-bg-content)",
+  "--foreground": "var(--hm-sem-fg-primary)",
+  "--card": "var(--hm-sem-bg-surface)",
+  "--card-foreground": "var(--hm-sem-fg-primary)",
+  "--popover": "var(--hm-sem-bg-surface)",
+  "--popover-foreground": "var(--hm-sem-fg-primary)",
+  "--primary": "var(--hm-sem-action-primary)",
+  "--primary-foreground": "var(--hm-sem-on-action-primary)",
+  "--secondary": "var(--hm-warm-neutral-secondary)",
+  "--secondary-foreground": "var(--hm-brown-default)",
+  "--muted": "var(--hm-color-surface-subtle)",
+  "--muted-foreground": "var(--hm-sem-fg-secondary)",
+  "--accent": "var(--hm-green-tint)",
+  "--accent-foreground": "var(--hm-sem-action-primary)",
+  "--destructive": "var(--hm-sem-action-destructive)",
+  "--border": "var(--hm-sem-stroke-default)",
+  "--input": "var(--hm-sem-stroke-input-default)",
+  "--ring": "var(--hm-sem-stroke-input-focus)",
+  "--radius": "var(--hm-radius-container)",
+  "--hm-dialog-radius": "8px",
+  "--hm-dialog-shadow": "0 0 12px rgb(0 0 0 / 0.2)",
+  "--hm-dialog-background": "var(--hm-sem-bg-surface)",
+  "--hm-dialog-text": "var(--hm-sem-fg-primary)",
+  "--hm-dialog-border-width": "1px",
+  "--hm-dialog-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-dialog-divider-color": "var(--hm-warm-neutral-pale)",
+  "--hm-dialog-padding": "24px",
+  "--hm-dialog-header-padding-bottom": "16px",
+  "--hm-dialog-header-gap": "8px",
+  "--hm-dialog-actions-gap": "8px",
+  "--hm-dialog-title-font-size": "20px",
+  "--hm-dialog-title-line-height": "28px",
+  "--hm-dialog-title-font-weight": "700",
+  "--hm-dialog-description-font-size": "14px",
+  "--hm-dialog-description-line-height": "20px",
+  "--hm-dialog-body-font-size": "16px",
+  "--hm-dialog-body-line-height": "24px",
+  "--hm-dialog-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-dialog-edge": "16px",
+  "--hm-dialog-app-header-height": "0px",
+  "--hm-dialog-app-footer-height": "0px",
+  "--hm-drawer-background": "var(--hm-sem-bg-surface)",
+  "--hm-drawer-text": "var(--hm-sem-fg-primary)",
+  "--hm-drawer-border-width": "1px",
+  "--hm-drawer-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-drawer-radius": "8px",
+  "--hm-drawer-shadow": "0 0 12px rgb(0 0 0 / 0.2)",
+  "--hm-drawer-max-height": "85dvh",
+  "--hm-drawer-width": "400px",
+  "--hm-drawer-edge-gap": "48px",
+  "--hm-drawer-padding": "24px",
+  "--hm-drawer-header-gap": "8px",
+  "--hm-drawer-footer-gap": "8px",
+  "--hm-drawer-handle-width": "48px",
+  "--hm-drawer-handle-height": "4px",
+  "--hm-drawer-handle-color": "var(--hm-warm-neutral-mid)",
+  "--hm-drawer-handle-margin-top": "12px",
+  "--hm-drawer-title-font-size": "18px",
+  "--hm-drawer-title-line-height": "28px",
+  "--hm-drawer-title-font-weight": "700",
+  "--hm-drawer-description-font-size": "14px",
+  "--hm-drawer-description-line-height": "20px",
+  "--hm-drawer-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-drawer-body-font-size": "14px",
+  "--hm-drawer-body-line-height": "20px",
+  "--hm-dropdown-menu-background": "var(--hm-sem-floating-background)",
+  "--hm-dropdown-menu-text": "var(--hm-sem-fg-primary)",
+  "--hm-dropdown-menu-border-width": "var(--hm-sem-floating-border-width)",
+  "--hm-dropdown-menu-border-color": "var(--hm-sem-floating-border-color)",
+  "--hm-dropdown-menu-radius": "var(--hm-sem-floating-radius)",
+  "--hm-dropdown-menu-shadow": "var(--hm-sem-floating-shadow)",
+  "--hm-dropdown-menu-padding": "4px",
+  "--hm-dropdown-menu-item-height": "36px",
+  "--hm-dropdown-menu-item-padding-x": "12px",
+  "--hm-dropdown-menu-item-gap": "8px",
+  "--hm-dropdown-menu-item-radius": "2px",
+  "--hm-dropdown-menu-font-size": "14px",
+  "--hm-dropdown-menu-line-height": "20px",
+  "--hm-dropdown-menu-font-weight": "400",
+  "--hm-dropdown-menu-highlight-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-dropdown-menu-highlight-text": "var(--accent-foreground)",
+  "--hm-dropdown-menu-destructive-text": "var(--hm-sem-action-destructive)",
+  "--hm-dropdown-menu-destructive-highlight-background": "var(--hm-color-action-destructive-hover)",
+  "--hm-dropdown-menu-label-color": "var(--hm-sem-fg-secondary)",
+  "--hm-dropdown-menu-label-font-size": "12px",
+  "--hm-dropdown-menu-label-line-height": "18px",
+  "--hm-dropdown-menu-label-font-weight": "500",
+  "--hm-dropdown-menu-shortcut-color": "var(--hm-sem-fg-secondary)",
+  "--hm-dropdown-menu-shortcut-font-size": "12px",
+  "--hm-dropdown-menu-separator-color": "var(--hm-warm-neutral-pale)",
+  "--hm-dropdown-menu-indicator-size": "16px",
+  "--hm-dropdown-menu-radio-dot-size": "8px",
+  "--hm-filter-bar-gap": "8px",
+  "--hm-filter-bar-control-width": "180px",
+  "--hm-filter-bar-search-width": "280px",
+  "--hm-filter-bar-search-icon-size": "16px",
+  "--hm-filter-bar-search-icon-inset": "12px",
+  "--hm-filter-bar-search-icon-gap": "8px",
+  "--hm-filter-bar-search-text-end": "32px",
+  "--hm-filter-bar-search-icon-color": "var(--hm-sem-fg-placeholder)",
+  "--hm-filter-bar-search-clear-color": "var(--hm-sem-fg-secondary)",
+  "--hm-filter-bar-narrow-breakpoint": "640px",
+  "--hm-gnb-height": "70px",
+  "--hm-gnb-join": "12px",
+  "--hm-gnb-background": "linear-gradient(180deg, var(--hm-green-tone-1) 0%, var(--hm-green-tone-2) 30%, var(--hm-green-tone-3) 65%, var(--hm-green-tone-4) 100%)",
+  "--hm-gnb-padding-x": "28px",
+  "--hm-gnb-column-gap": "24px",
+  "--hm-gnb-z-index": "40",
+  "--hm-gnb-text": "var(--hm-white)",
+  "--hm-gnb-text-secondary": "var(--hm-green-tint)",
+  "--hm-gnb-text-stroke-color": "color-mix(in srgb, var(--hm-black) 30%, transparent)",
+  "--hm-gnb-text-stroke-width": "1px",
+  "--hm-gnb-hover-background": "color-mix(in srgb, var(--hm-black) 10%, transparent)",
+  "--hm-gnb-focus-outline": "2px solid var(--hm-white)",
+  "--hm-gnb-brand-gap": "12px",
+  "--hm-gnb-brand-padding-end": "28px",
+  "--hm-gnb-brand-eyebrow-size": "11px",
+  "--hm-gnb-brand-eyebrow-spacing": "0.12em",
+  "--hm-gnb-brand-name-size": "16px",
+  "--hm-gnb-brand-text-gap": "5px",
+  "--hm-gnb-logo-max-height": "100%",
+  "--hm-gnb-menu-inset-top": "4px",
+  "--hm-gnb-menu-join": "12px",
+  "--hm-gnb-menu-min-width": "112px",
+  "--hm-gnb-menu-padding-x": "16px",
+  "--hm-gnb-menu-gap": "12px",
+  "--hm-gnb-menu-radius": "4px 4px 0 0",
+  "--hm-gnb-menu-font-size": "16px",
+  "--hm-gnb-menu-font-weight": "700",
+  "--hm-gnb-current-background": "var(--hm-sem-bg-content)",
+  "--hm-gnb-current-text": "var(--hm-sem-action-primary)",
+  "--hm-gnb-open-background": "var(--hm-sem-bg-surface)",
+  "--hm-gnb-open-text": "var(--hm-sem-action-primary)",
+  "--hm-gnb-panel-background": "var(--hm-sem-bg-surface)",
+  "--hm-gnb-panel-radius": "0 0 8px 8px",
+  "--hm-gnb-panel-shadow": "0 6px 16px rgb(0 0 0 / 0.1)",
+  "--hm-gnb-panel-item-min-height": "56px",
+  "--hm-gnb-panel-item-padding": "16px",
+  "--hm-gnb-panel-item-font-size": "16px",
+  "--hm-gnb-panel-item-line-height": "24px",
+  "--hm-gnb-panel-item-text": "var(--hm-sem-fg-primary)",
+  "--hm-gnb-panel-item-hover-background": "var(--hm-sem-bg-content)",
+  "--hm-gnb-panel-item-hover-text": "var(--hm-sem-action-primary)",
+  "--hm-gnb-user-gap": "3px",
+  "--hm-gnb-user-radius": "var(--hm-radius-control-md)",
+  "--hm-gnb-user-name-size": "16px",
+  "--hm-gnb-user-description-size": "12px",
+  "--hm-gnb-user-text-max-width": "220px",
+  "--hm-gnb-mobile-link-height": "44px",
+  "--hm-gnb-mobile-link-padding-x": "12px",
+  "--hm-gnb-mobile-link-radius": "var(--hm-radius-control-md)",
+  "--hm-gnb-mobile-link-font-size": "14px",
+  "--hm-gnb-mobile-link-line-height": "20px",
+  "--hm-gnb-mobile-link-font-weight": "500",
+  "--hm-gnb-mobile-link-text": "var(--hm-sem-fg-primary)",
+  "--hm-gnb-mobile-link-hover-background": "var(--accent)",
+  "--hm-gnb-mobile-link-hover-text": "var(--accent-foreground)",
+  "--hm-gnb-mobile-link-current-background": "var(--hm-sem-bg-content)",
+  "--hm-gnb-mobile-link-current-text": "var(--hm-sem-action-primary)",
+  "--hm-gnb-mobile-link-current-font-weight": "700",
+  "--hm-gnb-mobile-group-label-color": "var(--hm-sem-fg-secondary)",
+  "--hm-gnb-mobile-group-gap": "16px",
+  "--hm-gnb-mobile-nested-gap": "8px",
+  "--hm-gnb-mobile-nested-indent": "var(--hm-gnb-mobile-link-padding-x)",
+  "--hm-gnb-mobile-focus-ring": "0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent)",
+  "--hm-hover-card-background": "var(--hm-sem-floating-background)",
+  "--hm-hover-card-text": "var(--hm-sem-fg-primary)",
+  "--hm-hover-card-border-width": "var(--hm-sem-floating-border-width)",
+  "--hm-hover-card-border-color": "var(--hm-sem-floating-border-color)",
+  "--hm-hover-card-radius": "var(--hm-sem-floating-radius)",
+  "--hm-hover-card-shadow": "var(--hm-sem-floating-shadow)",
+  "--hm-hover-card-padding": "16px",
+  "--hm-hover-card-width": "320px",
+  "--hm-hover-card-font-size": "14px",
+  "--hm-hover-card-line-height": "20px",
+  "--hm-hover-card-font-weight": "400",
+  "--hm-input-height-sm": "28px",
+  "--hm-input-height-md": "34px",
+  "--hm-input-height-lg": "42px",
+  "--hm-input-padding-x-sm": "10px",
+  "--hm-input-padding-x-md": "12px",
+  "--hm-input-padding-x-lg": "12px",
+  "--hm-input-font-size-sm": "12px",
+  "--hm-input-line-height-sm": "18px",
+  "--hm-input-font-size-md": "14px",
+  "--hm-input-line-height-md": "20px",
+  "--hm-input-font-size-lg": "16px",
+  "--hm-input-line-height-lg": "24px",
+  "--hm-input-font-weight": "400",
+  "--hm-input-radius": "var(--hm-radius-input)",
+  "--hm-input-border-width": "1px",
+  "--hm-input-state-border-width": "1.5px",
+  "--hm-input-background": "var(--hm-sem-bg-surface)",
+  "--hm-input-text": "var(--hm-sem-fg-primary)",
+  "--hm-input-placeholder": "var(--hm-sem-fg-placeholder)",
+  "--hm-input-border-color": "var(--hm-sem-stroke-input-default)",
+  "--hm-input-focus-border-color": "var(--hm-sem-stroke-input-focus)",
+  "--hm-input-error-border-color": "var(--hm-red-danger)",
+  "--hm-label-font-size": "14px",
+  "--hm-label-line-height": "20px",
+  "--hm-label-font-weight": "500",
+  "--hm-label-text": "var(--hm-sem-fg-secondary)",
+  "--hm-lnb-width": "272px",
+  "--hm-lnb-join": "18px",
+  "--hm-lnb-background": "linear-gradient(90deg, var(--hm-green-default) 0%, var(--hm-green-light-1) 30%, var(--hm-green-light-2) 50%, var(--hm-green-light-3) 90%, var(--hm-green-light-2) 100%)",
+  "--hm-lnb-background-end": "var(--hm-green-light-2)",
+  "--hm-lnb-padding-top": "28px",
+  "--hm-lnb-padding-bottom": "22px",
+  "--hm-lnb-inset-start": "20px",
+  "--hm-lnb-inset-end": "20px",
+  "--hm-lnb-nav-padding-top": "20px",
+  "--hm-lnb-text": "var(--hm-white)",
+  "--hm-lnb-text-secondary": "var(--hm-green-tint)",
+  "--hm-lnb-text-stroke-color": "color-mix(in srgb, var(--hm-black) 30%, transparent)",
+  "--hm-lnb-focus-outline": "2px solid var(--hm-white)",
+  "--hm-lnb-brand-padding-x": "30px",
+  "--hm-lnb-brand-padding-bottom": "22px",
+  "--hm-lnb-brand-gap": "12px",
+  "--hm-lnb-brand-eyebrow-size": "11px",
+  "--hm-lnb-brand-eyebrow-spacing": "0.12em",
+  "--hm-lnb-brand-name-size": "17px",
+  "--hm-lnb-brand-text-gap": "5px",
+  "--hm-lnb-item-min-height": "56px",
+  "--hm-lnb-item-padding-start": "18px",
+  "--hm-lnb-item-gap": "12px",
+  "--hm-lnb-item-font-size": "18px",
+  "--hm-lnb-item-line-height": "28px",
+  "--hm-lnb-item-font-weight": "700",
+  "--hm-lnb-item-radius": "4px 0 0 4px",
+  "--hm-lnb-item-icon-size": "20px",
+  "--hm-lnb-item-icon-opacity": "0.5",
+  "--hm-lnb-item-icon-stroke": "1.7",
+  "--hm-lnb-item-text-stroke-width": "1.5px",
+  "--hm-lnb-item-text-shadow": "1px 2px 1px var(--hm-lnb-text-stroke-color)",
+  "--hm-lnb-hover-background": "color-mix(in srgb, var(--hm-black) 10%, transparent)",
+  "--hm-lnb-current-background": "var(--hm-sem-bg-content)",
+  "--hm-lnb-current-text": "var(--hm-sem-action-primary)",
+  "--hm-lnb-current-radius": "8px 0 0 8px",
+  "--hm-lnb-current-depth": "linear-gradient(to right, rgb(0 0 0 / 0.3), transparent 6px) 0 0 / 75% 100% no-repeat,\n    linear-gradient(to bottom, rgb(0 0 0 / 0.2), transparent 3px) 0 0 / 75% 100% no-repeat,\n    linear-gradient(to top, rgb(0 0 0 / 0.2), transparent 3px) 0 0 / 75% 100% no-repeat",
+  "--hm-lnb-group-open-background": "color-mix(in srgb, var(--hm-black) 20%, transparent)",
+  "--hm-lnb-group-open-line": "1px solid var(--hm-green-light-2)",
+  "--hm-lnb-group-radius": "8px 0 0 8px",
+  "--hm-lnb-group-current-text": "var(--hm-yellow-accent)",
+  "--hm-lnb-group-arrow-size": "18px",
+  "--hm-lnb-subitem-padding-start": "68px",
+  "--hm-lnb-group-padding-bottom": "8px",
+  "--hm-lnb-third-min-height": "48px",
+  "--hm-lnb-third-padding-block": "12px",
+  "--hm-lnb-third-padding-start": "88px",
+  "--hm-lnb-third-line-height": "24px",
+  "--hm-lnb-third-font-weight": "500",
+  "--hm-lnb-third-current-font-weight": "700",
+  "--hm-lnb-third-connector-x": "var(--hm-lnb-subitem-padding-start)",
+  "--hm-lnb-third-connector-length": "12px",
+  "--hm-lnb-third-connector-width": "1px",
+  "--hm-lnb-third-connector-color": "color-mix(in srgb, var(--hm-green-tint) 40%, transparent)",
+  "--hm-lnb-third-connector-current-color": "color-mix(in srgb, var(--hm-green-light-2) 40%, transparent)",
+  "--hm-lnb-profile-padding-x": "30px",
+  "--hm-lnb-profile-padding-top": "22px",
+  "--hm-lnb-profile-gap": "12px",
+  "--hm-lnb-profile-name-size": "16px",
+  "--hm-lnb-profile-description-size": "12px",
+  "--hm-loading-screen-background": "var(--hm-green-default)",
+  "--hm-loading-screen-foreground": "var(--hm-white)",
+  "--hm-loading-screen-inline-padding-block": "36px",
+  "--hm-loading-screen-inline-padding-inline": "24px",
+  "--hm-loading-screen-inline-radius": "6px",
+  "--hm-loading-screen-inline-shadow": "inset 0 0 24px rgb(0 0 0 / 0.45)",
+  "--hm-loading-screen-gap": "12px",
+  "--hm-loading-screen-z-index": "9999",
+  "--hm-loading-spinner-size": "44px",
+  "--hm-loading-spinner-bar-width": "2.5px",
+  "--hm-loading-spinner-bar-height": "10px",
+  "--hm-loading-spinner-bar-count": "24",
+  "--hm-loading-spinner-bar-color": "var(--hm-loading-screen-foreground)",
+  "--hm-loading-spinner-bar-min-opacity": "0.08",
+  "--hm-loading-spinner-duration": "1.2s",
+  "--hm-loading-spinner-stagger": "0.05s",
+  "--hm-loading-text-font-size": "14px",
+  "--hm-loading-text-font-weight": "500",
+  "--hm-loading-text-letter-spacing": "-0.02em",
+  "--hm-loading-text-color": "color-mix(in srgb, var(--hm-loading-screen-foreground) 60%, transparent)",
+  "--hm-menubar-background": "var(--hm-sem-bg-surface)",
+  "--hm-menubar-text": "var(--hm-sem-fg-primary)",
+  "--hm-menubar-border-width": "1px",
+  "--hm-menubar-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-menubar-radius": "var(--hm-radius-container)",
+  "--hm-menubar-height": "38px",
+  "--hm-menubar-padding": "2px",
+  "--hm-menubar-gap": "2px",
+  "--hm-menubar-trigger-padding-x": "12px",
+  "--hm-menubar-trigger-radius": "2px",
+  "--hm-menubar-trigger-font-size": "14px",
+  "--hm-menubar-trigger-line-height": "20px",
+  "--hm-menubar-trigger-font-weight": "500",
+  "--hm-menubar-content-background": "var(--hm-sem-floating-background)",
+  "--hm-menubar-content-border-width": "var(--hm-sem-floating-border-width)",
+  "--hm-menubar-content-border-color": "var(--hm-sem-floating-border-color)",
+  "--hm-menubar-content-radius": "var(--hm-sem-floating-radius)",
+  "--hm-menubar-content-shadow": "var(--hm-sem-floating-shadow)",
+  "--hm-menubar-content-padding": "4px",
+  "--hm-menubar-item-height": "36px",
+  "--hm-menubar-item-padding-x": "12px",
+  "--hm-menubar-item-gap": "8px",
+  "--hm-menubar-item-radius": "2px",
+  "--hm-menubar-font-size": "14px",
+  "--hm-menubar-line-height": "20px",
+  "--hm-menubar-highlight-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-menubar-trigger-highlight-background": "var(--accent)",
+  "--hm-menubar-highlight-text": "var(--accent-foreground)",
+  "--hm-menubar-destructive-text": "var(--hm-sem-action-destructive)",
+  "--hm-menubar-destructive-highlight-background": "var(--hm-color-action-destructive-hover)",
+  "--hm-menubar-label-color": "var(--hm-sem-fg-secondary)",
+  "--hm-menubar-label-font-size": "12px",
+  "--hm-menubar-label-line-height": "18px",
+  "--hm-menubar-label-font-weight": "500",
+  "--hm-menubar-shortcut-color": "var(--hm-sem-fg-secondary)",
+  "--hm-menubar-shortcut-font-size": "12px",
+  "--hm-menubar-separator-color": "var(--hm-warm-neutral-pale)",
+  "--hm-menubar-indicator-size": "16px",
+  "--hm-menubar-radio-dot-size": "8px",
+  "--hm-navigation-menu-height": "34px",
+  "--hm-navigation-menu-padding-x": "12px",
+  "--hm-navigation-menu-gap": "4px",
+  "--hm-navigation-menu-radius": "var(--hm-radius-control-md)",
+  "--hm-navigation-menu-font-size": "14px",
+  "--hm-navigation-menu-line-height": "20px",
+  "--hm-navigation-menu-font-weight": "500",
+  "--hm-navigation-menu-text": "var(--hm-sem-fg-primary)",
+  "--hm-navigation-menu-icon-size": "12px",
+  "--hm-navigation-menu-hover-background": "var(--accent)",
+  "--hm-navigation-menu-hover-text": "var(--accent-foreground)",
+  "--hm-navigation-menu-active-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-navigation-menu-active-text": "var(--hm-sem-action-primary)",
+  "--hm-navigation-menu-active-font-weight": "700",
+  "--hm-navigation-menu-background": "var(--hm-sem-floating-background)",
+  "--hm-navigation-menu-border-width": "var(--hm-sem-floating-border-width)",
+  "--hm-navigation-menu-border-color": "var(--hm-sem-floating-border-color)",
+  "--hm-navigation-menu-surface-radius": "var(--hm-sem-floating-radius)",
+  "--hm-navigation-menu-shadow": "var(--hm-sem-floating-shadow)",
+  "--hm-navigation-menu-content-padding": "8px",
+  "--hm-navigation-menu-content-min-width": "240px",
+  "--hm-navigation-menu-item-padding": "8px 12px",
+  "--hm-navigation-menu-item-gap": "2px",
+  "--hm-navigation-menu-item-radius": "2px",
+  "--hm-navigation-menu-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-navigation-menu-description-font-size": "12px",
+  "--hm-navigation-menu-description-line-height": "18px",
+  "--hm-navigation-menu-disabled-opacity": "0.6",
+  "--hm-page-header-gap": "24px",
+  "--hm-page-header-margin-bottom": "20px",
+  "--hm-page-header-breadcrumb-gap": "10px",
+  "--hm-page-header-title-font-size": "28px",
+  "--hm-page-header-title-line-height": "36px",
+  "--hm-page-header-title-font-weight": "700",
+  "--hm-page-header-title-color": "var(--hm-sem-fg-primary)",
+  "--hm-page-header-description-gap": "8px",
+  "--hm-page-header-description-font-size": "14px",
+  "--hm-page-header-description-line-height": "20px",
+  "--hm-page-header-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-page-header-actions-gap": "8px",
+  "--hm-pagination-gap": "4px",
+  "--hm-pagination-height": "34px",
+  "--hm-pagination-min-width": "34px",
+  "--hm-pagination-padding-x": "12px",
+  "--hm-pagination-radius": "var(--hm-radius-control-md)",
+  "--hm-pagination-font-size": "14px",
+  "--hm-pagination-line-height": "20px",
+  "--hm-pagination-font-weight": "500",
+  "--hm-pagination-icon-size": "16px",
+  "--hm-pagination-text": "var(--hm-sem-fg-primary)",
+  "--hm-pagination-hover-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-pagination-hover-text": "var(--accent-foreground)",
+  "--hm-pagination-active-background": "var(--hm-sem-action-primary)",
+  "--hm-pagination-active-text": "var(--hm-sem-on-action-primary)",
+  "--hm-pagination-active-font-weight": "700",
+  "--hm-pagination-ellipsis-color": "var(--hm-sem-fg-secondary)",
+  "--hm-pagination-disabled-opacity": "0.6",
+  "--hm-popover-background": "var(--hm-sem-floating-background)",
+  "--hm-popover-text": "var(--hm-sem-fg-primary)",
+  "--hm-popover-border-width": "var(--hm-sem-floating-border-width)",
+  "--hm-popover-border-color": "var(--hm-sem-floating-border-color)",
+  "--hm-popover-radius": "var(--hm-sem-floating-radius)",
+  "--hm-popover-shadow": "var(--hm-sem-floating-shadow)",
+  "--hm-popover-padding": "16px",
+  "--hm-popover-width": "288px",
+  "--hm-popover-font-size": "14px",
+  "--hm-popover-line-height": "20px",
+  "--hm-popover-font-weight": "400",
+  "--hm-green-light-4": "#34daaa",
+  "--hm-green-light-3": "#249473",
+  "--hm-green-light-2": "#266651",
+  "--hm-green-light-1": "#205241",
+  "--hm-green-default": "#123328",
+  "--hm-green-dark-1": "#0a221d",
+  "--hm-green-dark-2": "#071e18",
+  "--hm-brown-light-2": "#897445",
+  "--hm-brown-light-1": "#604f32",
+  "--hm-brown-default": "#3e3523",
+  "--hm-brown-dark-1": "#352d1d",
+  "--hm-brown-light-4": "#ecd4a2",
+  "--hm-orange-light-4": "#feba88",
+  "--hm-orange-default": "#cc5200",
+  "--hm-warm-neutral-light": "#e0dace",
+  "--hm-warm-neutral-mid": "#9a9284",
+  "--hm-warm-neutral-dark": "#6e6759",
+  "--hm-beige-light": "#f5f0e5",
+  "--hm-red-danger": "#d32f2f",
+  "--hm-white": "#ffffff",
+  "--hm-black": "#000000",
+  "--hm-neutral-gray-500": "#999999",
+  "--hm-green-tone-1": "#1f8265",
+  "--hm-green-tone-2": "#165c47",
+  "--hm-green-tone-3": "#114838",
+  "--hm-green-tone-4": "#08241c",
+  "--hm-warm-neutral-pale": "#dedbd2",
+  "--hm-warm-neutral-secondary": "#ede8db",
+  "--hm-warm-neutral-muted": "#f4f1ea",
+  "--hm-green-tint": "#bddfd4",
+  "--hm-yellow-accent": "#ffc600",
+  "--hm-progress-height": "8px",
+  "--hm-progress-radius": "9999px",
+  "--hm-progress-track-background": "var(--hm-warm-neutral-light)",
+  "--hm-progress-indicator-background": "var(--hm-sem-state-active)",
+  "--hm-radio-size": "18px",
+  "--hm-radio-border-width": "1px",
+  "--hm-radio-dot-size": "8px",
+  "--hm-radio-background": "var(--hm-sem-bg-surface)",
+  "--hm-radio-border-color": "var(--hm-sem-stroke-default)",
+  "--hm-radio-hover-border-color": "var(--hm-sem-action-primary)",
+  "--hm-radio-checked-border-color": "var(--hm-sem-state-active)",
+  "--hm-radio-dot-color": "var(--hm-sem-state-active)",
+  "--hm-radio-error-border-color": "var(--hm-red-danger)",
+  "--hm-radio-group-gap": "12px",
+  "--hm-radio-group-gap-horizontal": "16px",
+  "--hm-resizable-divider-width": "1px",
+  "--hm-resizable-divider-color": "var(--hm-warm-neutral-pale)",
+  "--hm-resizable-hover-color": "var(--hm-warm-neutral-mid)",
+  "--hm-resizable-active-color": "var(--hm-sem-action-primary)",
+  "--hm-resizable-focus-color": "var(--hm-sem-stroke-input-focus)",
+  "--hm-resizable-halo-width": "1px",
+  "--hm-resizable-grip-width": "12px",
+  "--hm-resizable-grip-height": "16px",
+  "--hm-resizable-grip-radius": "2px",
+  "--hm-resizable-grip-background": "var(--hm-sem-bg-surface)",
+  "--hm-resizable-grip-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-resizable-grip-icon-size": "10px",
+  "--hm-resizable-grip-icon-color": "var(--hm-sem-fg-secondary)",
+  "--hm-resizable-disabled-opacity": "0.6",
+  "--hm-scroll-area-scrollbar-size": "10px",
+  "--hm-scroll-area-thumb-background": "var(--hm-warm-neutral-mid)",
+  "--hm-scroll-area-thumb-hover-background": "var(--hm-warm-neutral-dark)",
+  "--hm-scroll-area-thumb-radius": "9999px",
+  "--hm-select-control-height-md": "32px",
+  "--hm-select-control-height-lg": "42px",
+  "--hm-select-border-width": "1px",
+  "--hm-select-padding-x": "12px",
+  "--hm-select-gap": "12px",
+  "--hm-select-option-height-md": "42px",
+  "--hm-select-option-height-lg": "42px",
+  "--hm-select-radius": "var(--hm-radius-input)",
+  "--hm-select-font-size-md": "14px",
+  "--hm-select-line-height-md": "20px",
+  "--hm-select-font-size-lg": "16px",
+  "--hm-select-line-height-lg": "24px",
+  "--hm-select-option-font-size-md": "var(--hm-select-font-size-md)",
+  "--hm-select-option-line-height-md": "var(--hm-select-line-height-md)",
+  "--hm-select-option-font-size-lg": "var(--hm-select-font-size-lg)",
+  "--hm-select-option-line-height-lg": "var(--hm-select-line-height-lg)",
+  "--hm-select-font-weight": "400",
+  "--hm-select-background": "var(--hm-sem-bg-surface)",
+  "--hm-select-text": "var(--hm-sem-fg-primary)",
+  "--hm-select-placeholder": "var(--hm-sem-fg-placeholder)",
+  "--hm-select-border-color": "var(--hm-sem-stroke-input-default)",
+  "--hm-select-focus-border-color": "var(--hm-sem-stroke-input-focus)",
+  "--hm-select-seam-color": "var(--hm-sem-stroke-input-default)",
+  "--hm-select-option-state-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-select-option-state-text": "var(--accent-foreground)",
+  "--hm-select-content-shadow": "0 2px 24px rgb(0 0 0 / 0.12)",
+  "--hm-select-disabled-opacity": "0.6",
+  "--hm-select-indicator-color": "#2d2d2d",
+  "--hm-separator-thickness": "1px",
+  "--hm-separator-color": "var(--hm-warm-neutral-pale)",
+  "--hm-sheet-background": "var(--hm-sem-bg-surface)",
+  "--hm-sheet-text": "var(--hm-sem-fg-primary)",
+  "--hm-sheet-border-width": "1px",
+  "--hm-sheet-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-sheet-shadow": "0 0 12px rgb(0 0 0 / 0.2)",
+  "--hm-sheet-width": "400px",
+  "--hm-sheet-edge-gap": "48px",
+  "--hm-sheet-padding": "24px",
+  "--hm-sheet-header-gap": "8px",
+  "--hm-sheet-footer-gap": "8px",
+  "--hm-sheet-close-clearance": "36px",
+  "--hm-sheet-title-font-size": "20px",
+  "--hm-sheet-title-line-height": "28px",
+  "--hm-sheet-title-font-weight": "700",
+  "--hm-sheet-description-font-size": "14px",
+  "--hm-sheet-description-line-height": "20px",
+  "--hm-sheet-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-sheet-body-font-size": "14px",
+  "--hm-sheet-body-line-height": "20px",
+  "--hm-skeleton-background": "var(--hm-warm-neutral-light)",
+  "--hm-skeleton-radius": "var(--hm-radius-control-md)",
+  "--hm-slider-track-size": "6px",
+  "--hm-slider-track-background": "var(--hm-warm-neutral-light)",
+  "--hm-slider-range-background": "var(--hm-sem-state-active)",
+  "--hm-slider-thumb-size": "18px",
+  "--hm-slider-thumb-background": "var(--hm-sem-bg-surface)",
+  "--hm-slider-thumb-border-width": "2px",
+  "--hm-slider-thumb-border-color": "var(--hm-sem-state-active)",
+  "--hm-slider-thumb-halo-color": "color-mix(in srgb, var(--hm-sem-action-primary) 20%, transparent)",
+  "--hm-slider-thumb-halo-size": "4px",
+  "--hm-slider-thumb-halo-size-active": "6px",
+  "--hm-slider-disabled-opacity": "0.6",
+  "--hm-toast-width": "356px",
+  "--hm-toast-background": "var(--hm-sem-bg-surface)",
+  "--hm-toast-text": "var(--hm-sem-fg-primary)",
+  "--hm-toast-border-width": "1px",
+  "--hm-toast-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-toast-radius": "var(--hm-radius-container)",
+  "--hm-toast-shadow": "0 0 12px rgb(0 0 0 / 0.2)",
+  "--hm-toast-padding": "16px",
+  "--hm-toast-gap": "12px",
+  "--hm-toast-font-family": "var(--hm-font-family-base)",
+  "--hm-toast-title-font-size": "14px",
+  "--hm-toast-title-line-height": "20px",
+  "--hm-toast-title-font-weight": "500",
+  "--hm-toast-description-color": "var(--hm-sem-fg-secondary)",
+  "--hm-toast-description-font-size": "13px",
+  "--hm-toast-description-line-height": "18px",
+  "--hm-toast-description-font-weight": "400",
+  "--hm-toast-icon-size": "16px",
+  "--hm-toast-icon-color": "var(--hm-sem-fg-primary)",
+  "--hm-toast-error-border-color": "var(--hm-sem-action-destructive)",
+  "--hm-toast-error-text": "var(--hm-sem-action-destructive)",
+  "--hm-toast-action-height": "28px",
+  "--hm-toast-action-padding-x": "12px",
+  "--hm-toast-action-radius": "var(--hm-radius-control-md)",
+  "--hm-toast-action-font-size": "12px",
+  "--hm-toast-action-font-weight": "500",
+  "--hm-toast-action-background": "var(--hm-sem-action-primary)",
+  "--hm-toast-action-text": "var(--hm-sem-on-action-primary)",
+  "--hm-toast-cancel-background": "var(--hm-color-surface-subtle)",
+  "--hm-toast-cancel-text": "var(--hm-sem-fg-secondary)",
+  "--hm-toast-close-background": "var(--hm-toast-background)",
+  "--hm-toast-close-text": "var(--hm-sem-fg-secondary)",
+  "--hm-toast-close-border-color": "var(--hm-toast-border-color)",
+  "--hm-switch-width": "36px",
+  "--hm-switch-height": "20px",
+  "--hm-switch-thumb-size": "16px",
+  "--hm-switch-thumb-offset": "2px",
+  "--hm-switch-off-background": "var(--hm-sem-stroke-default)",
+  "--hm-switch-on-background": "var(--hm-sem-state-active)",
+  "--hm-switch-thumb-color": "var(--hm-sem-bg-surface)",
+  "--hm-switch-hover-overlay": "var(--hm-color-action-overlay-hover)",
+  "--hm-table-min-width": "520px",
+  "--hm-table-background": "var(--hm-sem-bg-surface)",
+  "--hm-table-text": "var(--hm-sem-fg-primary)",
+  "--hm-table-font-size": "14px",
+  "--hm-table-line-height": "20px",
+  "--hm-table-font-weight": "400",
+  "--hm-table-cell-padding-y": "14px",
+  "--hm-table-cell-padding-x": "12px",
+  "--hm-table-divider-width": "1px",
+  "--hm-table-divider-color": "var(--hm-warm-neutral-pale)",
+  "--hm-table-header-background": "color-mix(in srgb, var(--hm-green-tint) 30%, var(--hm-white))",
+  "--hm-table-header-text": "var(--hm-green-light-1)",
+  "--hm-table-header-font-size": "13px",
+  "--hm-table-header-font-weight": "700",
+  "--hm-table-header-border-top": "var(--hm-green-light-2)",
+  "--hm-table-header-border-bottom": "color-mix(in srgb, var(--hm-green-light-2) 20%, transparent)",
+  "--hm-table-row-hover-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-table-row-selected-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-table-footer-background": "var(--hm-color-surface-subtle)",
+  "--hm-table-footer-font-weight": "500",
+  "--hm-table-caption-color": "var(--hm-sem-fg-secondary)",
+  "--hm-table-caption-font-size": "12px",
+  "--hm-table-caption-line-height": "18px",
+  "--hm-table-caption-gap": "12px",
+  "--hm-tab-height": "34px",
+  "--hm-tab-padding-x": "16px",
+  "--hm-tab-radius-top": "4px",
+  "--hm-tab-border-width": "1px",
+  "--hm-tab-font-size": "16px",
+  "--hm-tab-line-height": "24px",
+  "--hm-tab-font-weight": "700",
+  "--hm-tab-background": "color-mix(in srgb, var(--hm-green-tint) 45%, transparent)",
+  "--hm-tab-border-color": "color-mix(in srgb, var(--hm-green-light-2) 35%, transparent)",
+  "--hm-tab-text": "var(--hm-green-light-2)",
+  "--hm-tab-selected-background": "var(--hm-sem-bg-surface)",
+  "--hm-tab-selected-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-tab-selected-text": "var(--hm-green-default)",
+  "--hm-tab-hover-overlay": "color-mix(in srgb, var(--hm-black) 20%, transparent)",
+  "--hm-tab-hover-text": "var(--hm-green-default)",
+  "--hm-tab-transition-duration": "0.15s",
+  "--hm-tab-arrow-size": "34px",
+  "--hm-tab-arrow-icon-size": "18px",
+  "--hm-tab-arrow-background": "var(--hm-green-light-1)",
+  "--hm-tab-arrow-border-color": "var(--hm-green-dark-1)",
+  "--hm-tab-arrow-icon-color": "var(--hm-white)",
+  "--hm-tab-arrow-disabled-opacity": "0.6",
+  "--hm-tab-fill-line-color": "var(--hm-green-light-3)",
+  "--hm-tab-fill-curve-radius": "8px",
+  "--hm-textarea-min-height": "112px",
+  "--hm-textarea-padding-block": "8px",
+  "--hm-textarea-padding-inline": "12px",
+  "--hm-textarea-font-size": "16px",
+  "--hm-textarea-line-height": "24px",
+  "--hm-textarea-font-weight": "400",
+  "--hm-textarea-radius": "var(--hm-radius-input)",
+  "--hm-textarea-border-width": "1px",
+  "--hm-textarea-state-border-width": "1.5px",
+  "--hm-textarea-background": "var(--hm-sem-bg-surface)",
+  "--hm-textarea-text": "var(--hm-sem-fg-primary)",
+  "--hm-textarea-placeholder": "var(--hm-sem-fg-placeholder)",
+  "--hm-textarea-border-color": "var(--hm-sem-stroke-input-default)",
+  "--hm-textarea-focus-border-color": "var(--hm-sem-stroke-input-focus)",
+  "--hm-textarea-error-border-color": "var(--hm-red-danger)",
+  "--hm-toggle-group-height-sm": "28px",
+  "--hm-toggle-group-height-md": "34px",
+  "--hm-toggle-group-height-lg": "42px",
+  "--hm-toggle-group-padding-x-sm": "8px",
+  "--hm-toggle-group-padding-x-md": "12px",
+  "--hm-toggle-group-padding-x-lg": "16px",
+  "--hm-toggle-group-radius": "var(--hm-radius-control-md)",
+  "--hm-toggle-group-gap": "8px",
+  "--hm-toggle-group-font-size": "14px",
+  "--hm-toggle-group-line-height": "20px",
+  "--hm-toggle-group-font-weight": "500",
+  "--hm-toggle-group-off-background": "transparent",
+  "--hm-toggle-group-off-text": "var(--hm-sem-fg-primary)",
+  "--hm-toggle-group-hover-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-toggle-group-on-background": "var(--accent)",
+  "--hm-toggle-group-on-text": "var(--accent-foreground)",
+  "--hm-toggle-group-border-width": "1px",
+  "--hm-toggle-group-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-toggle-group-disabled-opacity": "0.6",
+  "--hm-toggle-height-sm": "28px",
+  "--hm-toggle-height-md": "34px",
+  "--hm-toggle-height-lg": "42px",
+  "--hm-toggle-padding-x-sm": "8px",
+  "--hm-toggle-padding-x-md": "12px",
+  "--hm-toggle-padding-x-lg": "16px",
+  "--hm-toggle-radius": "var(--hm-radius-control-md)",
+  "--hm-toggle-gap": "8px",
+  "--hm-toggle-font-size": "14px",
+  "--hm-toggle-line-height": "20px",
+  "--hm-toggle-font-weight": "500",
+  "--hm-toggle-off-background": "transparent",
+  "--hm-toggle-off-text": "var(--hm-sem-fg-primary)",
+  "--hm-toggle-hover-background": "color-mix(in srgb, var(--accent) 45%, transparent)",
+  "--hm-toggle-on-background": "var(--accent)",
+  "--hm-toggle-on-text": "var(--accent-foreground)",
+  "--hm-toggle-outline-border-width": "1px",
+  "--hm-toggle-outline-border-color": "var(--hm-warm-neutral-pale)",
+  "--hm-toggle-disabled-opacity": "0.6",
+  "--hm-tooltip-background": "var(--hm-sem-fg-primary)",
+  "--hm-tooltip-text": "var(--hm-color-text-inverse)",
+  "--hm-tooltip-radius": "var(--hm-radius-container)",
+  "--hm-tooltip-padding-x": "10px",
+  "--hm-tooltip-padding-y": "6px",
+  "--hm-tooltip-max-width": "240px",
+  "--hm-tooltip-font-size": "12px",
+  "--hm-tooltip-line-height": "18px",
+  "--hm-tooltip-font-weight": "400"
+}
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/themes/default.json b/themes/default.json
new file mode 100644
index 0000000..b828221
--- /dev/null
+++ b/themes/default.json
@@ -0,0 +1,76 @@
+{
+  "schemaVersion": 1,
+  "tokens": {
+    "color.bg.content": "#f5f0e5",
+    "color.bg.surface": "#ffffff",
+    "color.fg.primary": "#0a221d",
+    "color.fg.secondary": "#6e6759",
+    "color.fg.placeholder": "#999999",
+    "color.action.primary": "#123328",
+    "color.action.cancel": "#6e6759",
+    "color.action.destructive": "#d32f2f",
+    "color.stroke.default": "#9a9284",
+    "color.stroke.input.default": "#dedbd2",
+    "color.stroke.input.focus": "#266651",
+    "color.bg.brand.stop.0": "#0a221d",
+    "color.bg.brand.stop.12": "#071e18",
+    "color.bg.brand.stop.42": "#123328",
+    "color.bg.brand.stop.78": "#266651",
+    "color.bg.brand.stop.100": "#205241",
+    "surface.action.primary.stop.0": "#1f8265",
+    "surface.action.primary.stop.30": "#165c47",
+    "surface.action.primary.stop.65": "#114838",
+    "surface.action.primary.stop.100": "#08241c",
+    "surface.action.primary.border.stop.0": "#0a221d",
+    "surface.action.primary.border.stop.50": "#34daaa",
+    "surface.action.primary.border.stop.100": "#08241c",
+    "color.state.active": "#266651",
+    "color.on.state.active": "#ffffff",
+    "color.fg.inverse": "#ffffff",
+    "color.bg.subtle": "#f4f1ea",
+    "color.accent": "#bddfd4",
+    "color.on.accent": "#123328",
+    "color.palette.green-light-4": "#34daaa",
+    "color.palette.green-light-3": "#249473",
+    "color.palette.green-light-2": "#266651",
+    "color.palette.green-light-1": "#205241",
+    "color.palette.green-default": "#123328",
+    "color.palette.green-dark-1": "#0a221d",
+    "color.palette.green-dark-2": "#071e18",
+    "color.palette.brown-light-2": "#897445",
+    "color.palette.brown-light-1": "#604f32",
+    "color.palette.brown-default": "#3e3523",
+    "color.palette.brown-dark-1": "#352d1d",
+    "color.palette.brown-light-4": "#ecd4a2",
+    "color.palette.orange-light-4": "#feba88",
+    "color.palette.orange-default": "#cc5200",
+    "color.palette.warm-neutral-light": "#e0dace",
+    "color.palette.warm-neutral-mid": "#9a9284",
+    "color.palette.warm-neutral-dark": "#6e6759",
+    "color.palette.beige-light": "#f5f0e5",
+    "color.palette.red-danger": "#d32f2f",
+    "color.palette.white": "#ffffff",
+    "color.palette.black": "#000000",
+    "color.palette.neutral-gray-500": "#999999",
+    "color.palette.green-tone-1": "#1f8265",
+    "color.palette.green-tone-2": "#165c47",
+    "color.palette.green-tone-3": "#114838",
+    "color.palette.green-tone-4": "#08241c",
+    "color.palette.warm-neutral-pale": "#dedbd2",
+    "color.palette.warm-neutral-secondary": "#ede8db",
+    "color.palette.warm-neutral-muted": "#f4f1ea",
+    "color.palette.green-tint": "#bddfd4",
+    "color.palette.yellow-accent": "#ffc600",
+    "color.palette.brown-deep": "#221d13",
+    "color.palette.brown-highlight": "#a98d53",
+    "color.palette.orange-light": "#d35a00",
+    "color.palette.orange-mid": "#ce5600",
+    "color.palette.orange-dark": "#b44b00",
+    "color.palette.orange-deep": "#783402",
+    "color.palette.orange-border": "#bc4c00",
+    "color.palette.orange-border-deep": "#5e2902",
+    "color.palette.gray": "#767676",
+    "color.palette.gray-dark": "#5a5a5a",
+    "color.palette.indicator": "#2d2d2d"
+  }
+}
diff --git a/themes/drafts/preview-warm.json b/themes/drafts/preview-warm.json
new file mode 100644
index 0000000..1a45d62
--- /dev/null
+++ b/themes/drafts/preview-warm.json
@@ -0,0 +1,24 @@
+{
+  "schemaVersion": 1,
+  "themeId": "storybook-warm-draft",
+  "tokens": {
+    "color.bg.content": "#FFFFFF",
+    "color.bg.surface": "#F5F0E5",
+    "color.action.primary": "#3E3523",
+    "color.stroke.input.focus": "#3E3523",
+    "radius.input.default": "6px",
+    "radius.container.default": "6px",
+    "color.bg.brand.stop.0": "#352D1D",
+    "color.bg.brand.stop.12": "#2F281C",
+    "color.bg.brand.stop.42": "#3E3523",
+    "color.bg.brand.stop.78": "#897445",
+    "color.bg.brand.stop.100": "#604F32",
+    "surface.action.primary.stop.0": "#897445",
+    "surface.action.primary.stop.30": "#604F32",
+    "surface.action.primary.stop.65": "#352D1D",
+    "surface.action.primary.stop.100": "#221D13",
+    "surface.action.primary.border.stop.0": "#352D1D",
+    "surface.action.primary.border.stop.50": "#A98D53",
+    "surface.action.primary.border.stop.100": "#221D13"
+  }
+}
diff --git a/themes/service-example.json b/themes/service-example.json
new file mode 100644
index 0000000..ede5d23
--- /dev/null
+++ b/themes/service-example.json
@@ -0,0 +1,10 @@
+{
+  "schemaVersion": 1,
+  "tokens": {
+    "color.action.primary": "#6837a8",
+    "color.state.active": "#007f73",
+    "color.stroke.input.focus": "#c75b00",
+    "color.accent": "#ffd36d",
+    "color.action.destructive": "#d41466"
+  }
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..17c5036
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src", ".storybook", "vite.config.ts"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5d54e8a
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "paths": { "@/*": ["./src/*"] }
+  }
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..308cb58
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "types": ["node"],
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["vite.config.ts", ".storybook/main.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..6138ba9
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,11 @@
+import path from "node:path"
+import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: { "@": path.resolve(import.meta.dirname, "./src") },
+  },
+})
diff --git a/vite.dashboard-export.config.ts b/vite.dashboard-export.config.ts
new file mode 100644
index 0000000..62d1325
--- /dev/null
+++ b/vite.dashboard-export.config.ts
@@ -0,0 +1,28 @@
+import path from "node:path"
+import react from "@vitejs/plugin-react"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  base: "./",
+  root: path.resolve(import.meta.dirname, "./src/exports/dashboard"),
+  plugins: [react(), tailwindcss()],
+  publicDir: false,
+  resolve: {
+    alias: { "@": path.resolve(import.meta.dirname, "./src") },
+  },
+  build: {
+    outDir: path.resolve(import.meta.dirname, "./dist-dashboard"),
+    emptyOutDir: true,
+    cssCodeSplit: false,
+    modulePreload: false,
+    rollupOptions: {
+      input: { index: path.resolve(import.meta.dirname, "./src/exports/dashboard/index.html") },
+      output: {
+        format: "iife",
+        entryFileNames: "assets/dashboard-export.js",
+        assetFileNames: "assets/[name]-[hash][extname]",
+      },
+    },
+  },
+})