@stn-uiux/pub-ui 0.1.67 → 0.1.69

package/dist/{chunk-HJCUNRB3.js → chunk-FSSMH6VS.js}

@@ -29,6 +29,20 @@ var STN_LAYER0_BACKGROUND_VARIANT_ROWS = [
     figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
     note: "Dashboard \xB7 light/dark pair"
   },
+  {
+    preset: "infomap",
+    kind: "image",
+    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,
+    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
+    note: "Infomap 3D Graphic \xB7 light/dark pair"
+  },
+  {
+    preset: "infomap-none",
+    kind: "image",
+    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,
+    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,
+    note: "Infomap 3D Graphic (None/\uD14D\uC2A4\uD2B8 \uC5C6\uC74C) \xB7 light/dark pair"
+  },
   {
     preset: "showroom-a",
     kind: "image",
@@ -116,6 +130,8 @@ var STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background \u2014 color / image
 var STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2;
 var STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS = [
   { id: "dashboard", label: "dashboard", asset: "\uB300\uC2DC\uBCF4\uB4DC \uBC30\uACBD (dashboard-light / dark)", variant: "dashboard" },
+  { id: "infomap", label: "infomap", asset: "\uC778\uD3EC\uB9F5 3D \uBC30\uACBD (infomap-light / dark)", variant: "infomap" },
+  { id: "infomap-none", label: "infomap-none", asset: "\uC778\uD3EC\uB9F5 3D (None/\uD14D\uC2A4\uD2B8 \uC5C6\uC74C)", variant: "infomap-none" },
   { id: "color", label: "color", asset: "\uB2E8\uC0C9 \uD14C\uB9C8 \uBC30\uACBD (solid default)", variant: "none" },
   { id: "gradient", label: "gradient", asset: "\uACF5\uC2DD \uC570\uBE44\uC5B8\uD2B8 \uADF8\uB77C\uB370\uC774\uC158 (\uC6CC\uC2DC/\uC2EC\uB3C4)", variant: "gradient" },
   { id: "map", label: "map", asset: "GIS \uC9C0\uB3C4 \uBC30\uACBD (map-light)", variant: "map-light" },
@@ -132,4 +148,4 @@ export {
   STN_LAYER0_MAP_LIGHT_OVERLAY,
   STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS
 };
-//# sourceMappingURL=chunk-HJCUNRB3.js.map
+//# sourceMappingURL=chunk-FSSMH6VS.js.map

package/dist/chunk-FSSMH6VS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnLayer0Background.ts"],"sourcesContent":["/**\n * Infomap Layer 0 background pattern\n * Light: 41267 · 186876 · 186860 · 202895\n * Dark:  80488 · 35369 · 84014 · 91183\n * @see StnLayer0Background · layouts/stn-layer0-bg.css\n */\n\nexport const STN_LAYER0_BACKGROUND_FIGMA = {\n  none: '40000040:41267',\n  noneDark: '40000040:80488',\n  showroomA: '40000042:186876',\n  showroomADark: '40002117:35369',\n  showroomB: '40000042:186860',\n  showroomBDark: '40000040:84014',\n  mapLight: '40000042:202895',\n  mapDark: '40000040:91183',\n  login: '40004209:78293',\n  loginDark: '40004209:78293',\n  dashboard: '40004209:78300',\n  dashboardDark: '40004209:78300',\n} as const\n\nexport type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image'\n\n/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 7종 (light/dark 자동 전환) */\nexport type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard' | 'infomap' | 'infomap-none'\n\n/** Doc site · Pub HTML 기준 경로 — 앱에서는 동일 경로 또는 자산 URL로 교체 */\nexport {\n  STN_LAYER0_BACKGROUND_ASSET_PATHS,\n  STN_LAYER0_BACKGROUND_DEMO_IMAGES,\n} from './stnLayer0BackgroundAssets'\n\nexport const STN_LAYER0_BACKGROUND_INTRO =\n  '페이지 최하단 레벨(Level 0)에 위치하는 시스템 바닥면 배경 패턴입니다. 단색 컬러 및 맵·토폴로지 캔버스 배경 이미지를 `StnLayer0BackgroundPreset`으로 손쉽게 적용할 수 있습니다.'\n\nexport const STN_LAYER0_BACKGROUND_VARIANT_ROWS = [\n  {\n    preset: 'none',\n    kind: 'color',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.none,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.noneDark,\n    note: 'Light gradient · Dark elevation surface-0 (gray-950)',\n  },\n  {\n    preset: 'dashboard',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Dashboard · light/dark pair',\n  },\n  {\n    preset: 'infomap',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Infomap 3D Graphic · light/dark pair',\n  },\n  {\n    preset: 'infomap-none',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Infomap 3D Graphic (None/텍스트 없음) · light/dark pair',\n  },\n  {\n    preset: 'showroom-a',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomA,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomADark,\n    note: 'Showroom A · dark logo stage',\n  },\n  {\n    preset: 'showroom-b',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomB,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomBDark,\n    note: 'Showroom B · dark + radial vignette',\n  },\n  {\n    preset: 'map-light',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.mapLight,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.mapDark,\n    note: 'Map light(+20% white) · Map dark',\n  },\n  {\n    preset: 'login',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.login,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.loginDark,\n    note: 'Login · light/dark pair',\n  },\n] as const satisfies ReadonlyArray<{\n  preset: StnLayer0BackgroundPreset\n  kind: StnLayer0BackgroundKind\n  figma: string\n  figmaDark: string\n  note: string\n}>\n\nexport const STN_LAYER0_BACKGROUND_USAGE = `import {\n  StnLayer,\n  StnLayer0Background,\n  StnLayer0BackgroundPreset,\n  DashboardPageScaffold,\n} from '@stn-uiux/pub-ui-react'\n\n/** Map / Topology — wrapClassName만 (맵 배경은 elevation CSS) */\n<DashboardPageScaffold\n  shell=\"layer\"\n  wrapClassName=\"stn-page--map-bg\"\n  gnb={…}\n  header={…}\n/>\n\n/** 일반 페이지 — L0 color (default = elevation-surface-0) */\n<StnLayer.Background>\n  <StnLayer0Background color=\"default\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** Figma image 프리셋 — showroom · map · login */\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"map-light\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"login\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** 직접 조합 — light/dark 이미지 */\n<StnLayer.Background>\n  <StnLayer0Background\n    kind=\"image\"\n    src=\"/assets/bg-light.png\"\n    srcDark=\"/assets/bg-dark.png\"\n  />\n  <StnLayer.Content>…</StnLayer.Content>\n</StnLayer.Background>`\n\nexport const STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background — color / image -->\n<div class=\"stn-elev-0 stn-layer0-bg\">\n  <!-- color -->\n  <div class=\"stn-layer0-bg color default\" aria-hidden=\"true\"></div>\n\n  <!-- 또는 image -->\n  <div\n    class=\"stn-layer0-bg image\"\n    style=\"--stn-layer0-bg-image: url('/assets/bg-light.png')\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <main class=\"stn-elev-1\"><!-- L1 content --></main>\n</div>`\n\nexport const STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2\n\n/** Patterns → Background playground 프리셋 (UI 라벨 · 내부 variant) */\nexport type StnLayer0BackgroundPlaygroundPresetId =\n  | 'dashboard'\n  | 'infomap'\n  | 'infomap-none'\n  | 'color'\n  | 'gradient'\n  | 'map'\n  | 'topology'\n  | 'none'\n\nexport const STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS: {\n  id: StnLayer0BackgroundPlaygroundPresetId\n  label: string\n  asset: string\n  variant?: StnLayer0BackgroundPreset\n}[] = [\n  { id: 'dashboard', label: 'dashboard', asset: '대시보드 배경 (dashboard-light / dark)', variant: 'dashboard' },\n  { id: 'infomap', label: 'infomap', asset: '인포맵 3D 배경 (infomap-light / dark)', variant: 'infomap' },\n  { id: 'infomap-none', label: 'infomap-none', asset: '인포맵 3D (None/텍스트 없음)', variant: 'infomap-none' },\n  { id: 'color', label: 'color', asset: '단색 테마 배경 (solid default)', variant: 'none' },\n  { id: 'gradient', label: 'gradient', asset: '공식 앰비언트 그라데이션 (워시/심도)', variant: 'gradient' },\n  { id: 'map', label: 'map', asset: 'GIS 지도 배경 (map-light)', variant: 'map-light' },\n  { id: 'topology', label: 'topology', asset: '토폴로지 배경 (showroom-b)', variant: 'showroom-b' },\n  { id: 'none', label: 'none', asset: 'L0 배경 없음 (외부 캔버스 전용)', variant: 'none' },\n]\n"],"mappings":";AAOO,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AACjB;AAaO,IAAM,8BACX;AAEK,IAAM,qCAAqC;AAAA,EAChD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AACF;AAQO,IAAM,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CpC,IAAM,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAM,+BAA+B;AAarC,IAAM,2CAKP;AAAA,EACJ,EAAE,IAAI,aAAa,OAAO,aAAa,OAAO,kEAAoC,SAAS,YAAY;AAAA,EACvG,EAAE,IAAI,WAAW,OAAO,WAAW,OAAO,6DAAoC,SAAS,UAAU;AAAA,EACjG,EAAE,IAAI,gBAAgB,OAAO,gBAAgB,OAAO,gEAAwB,SAAS,eAAe;AAAA,EACpG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,0DAA4B,SAAS,OAAO;AAAA,EAClF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,oGAAyB,SAAS,WAAW;AAAA,EACzF,EAAE,IAAI,OAAO,OAAO,OAAO,OAAO,6CAAyB,SAAS,YAAY;AAAA,EAChF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,sDAAwB,SAAS,aAAa;AAAA,EAC1F,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,+EAAwB,SAAS,OAAO;AAC9E;","names":[]}

package/dist/{chunk-LKVTW54X.js → chunk-IZRGNUH6.js}

@@ -174,4 +174,4 @@ export {
   STN_DROPDOWN_MENU_INTRO,
   STN_DROPDOWN_MENU_USAGE
 };
-//# sourceMappingURL=chunk-LKVTW54X.js.map
+//# sourceMappingURL=chunk-IZRGNUH6.js.map

package/dist/chunk-IZRGNUH6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnDropdown.ts"],"sourcesContent":["/**\n * StnDropdown — native `<select>` · custom menu (`div.selected` + `ul.select_option`)\n * @see common.css · content.css (cctv-header, simple_board_area, ip_mpls)\n */\n\nexport type StnDropdownMode = 'native' | 'menu'\n\nexport type StnDropdownSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent' | 'translucent'\nexport type StnDropdownHelperTextPosition = 'top' | 'bottom' | 'left' | 'right'\nexport type StnDropdownDirection = 'down' | 'up'\n\n/** native: select에 class 직접 · wrapper: div.stn-dropdown > select.selected */\nexport type StnDropdownNativeLayout = 'inline' | 'wrapper'\n\nexport type StnDropdownModifier =\n  | 'pageSize'\n  | 'serverFilter'\n  | 'networkArea'\n  | 'fullWidth'\n\nexport type StnDropdownOption = {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\n/** StnDropdown menu sm/md/lg/xl — height only · width는 `width`/`fullWidth` */\nexport const STN_DROPDOWN_SIZE_ROWS: readonly {\n  size: StnDropdownSize\n  height: string\n  radius: string\n  fontSize: string\n  pubClass: string\n  typicalWidth: string\n  usedIn: string\n}[] = [\n  {\n    size: 'sm',\n    height: '24px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown sm',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '폼·테이블 셀 · 좁은 검색',\n  },\n  {\n    size: 'md',\n    height: '32px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown md',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '검색영역 · interface_list',\n  },\n  {\n    size: 'lg',\n    height: '40px',\n    radius: '6px (radius-6)',\n    fontSize: '14px',\n    pubClass: 'stn-dropdown lg',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '강조 검색 · 넓은 라벨 열',\n  },\n  {\n    size: 'xl',\n    height: '52px',\n    radius: '8px (radius-8)',\n    fontSize: '15px',\n    pubClass: 'stn-dropdown xl',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: 'CCTV 헤더 검색 · 대형 대시보드 메뉴 (기존 prominent 통합)',\n  },\n] as const\n\nexport const STN_DROPDOWN_INTRO =\n  'Infomap **input** 크롬 + `.stn-dropdown` 계약입니다. **Light** (`40000042:186901`) — white · gray-200 · gray-600. **Dark** (modal `40000040:75056`) — TextField와 동일 `--stn-input-*`. Chevron: Figma `40000040:101798` `icon/line/arrow-right` 12px (`/@assets/svg/system/line/arrow-right.svg` · rotate 90°). React 표준 **`StnDropdown` menu** — sm/md/lg(24·32·40px) · width 프리셋/fullWidth.'\n\nexport const STN_DROPDOWN_INVENTORY: readonly {\n  id: string\n  mode: StnDropdownMode\n  size: StnDropdownSize\n  pubClass: string\n  height: string\n  typicalWidth: string\n  usedIn: string\n  exampleHtml: string\n}[] = [\n  {\n    id: 'native-search-md',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--size-md',\n    height: '32px',\n    typicalWidth: '130px (.search_area) · 기본 180px',\n    usedIn: '검색영역 — interface_list, device_detail',\n    exampleHtml: 'ip_mpls/interface_list.html',\n  },\n  {\n    id: 'native-form-sm',\n    mode: 'native',\n    size: 'sm',\n    pubClass: 'stn-dropdown stn-dropdown--size-sm',\n    height: '24px',\n    typicalWidth: '100% (.w100p) · 60–100px 인라인',\n    usedIn: '등록/상세 폼, IP-MPLS 테이블 셀',\n    exampleHtml: 'ip_mpls/interface_regist.html',\n  },\n  {\n    id: 'native-wrapper',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected',\n    height: '32px',\n    typicalWidth: '130px',\n    usedIn: '처리상태 등 — wrapper 안에 select',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-search-field',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected.select_search',\n    height: '32px',\n    typicalWidth: 'auto',\n    usedIn: '검색분야 선택 + 텍스트 input 조합',\n    exampleHtml: 'dev_version/access_log.html',\n  },\n  {\n    id: 'menu-cctv-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--prominent · .selected · .select_option',\n    height: '52px (prominent)',\n    typicalWidth: '110px (cctv-header) · 200px (simple_board)',\n    usedIn: 'CCTV 헤더 검색 — React `StnDropdownMenu`',\n    exampleHtml: 'koscom/honeycomb.html',\n  },\n  {\n    id: 'menu-board-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'simple_board_area .search_area .stn-dropdown.stn-dropdown--prominent',\n    height: '52px (prominent)',\n    typicalWidth: '200px',\n    usedIn: '간편 게시판 검색 — `StnDropdownMenu`',\n    exampleHtml: 'basic/simple_dashboard.html',\n  },\n  {\n    id: 'native-page-size',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-table__page-size',\n    height: '32px',\n    typicalWidth: 'min 72px',\n    usedIn: '테이블 footer 페이지 크기',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-server-filter',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown server_filter',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '프로세스 팝업 검색',\n    exampleHtml: 'dev_version/process (pop)',\n  },\n  {\n    id: 'native-network-area',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown network_area_box',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '토폴로지·망영역 선택',\n    exampleHtml: 'config topology screens',\n  },\n] as const\n\nexport const STN_DROPDOWN_HTML_COUNTS = {\n  nativeSelectBoxFiles: 56,\n  customMenuFiles: 12,\n  smallTysFiles: 17,\n  wrapperSelectFiles: 13,\n} as const\n\nexport const STN_DROPDOWN_USAGE = `import { StnDropdown } from '@stn-uiux/pub-ui-react'\n\n// size = 높이 · width = 별도 (80·100·140·180·200 · fullWidth)\n<StnDropdown size=\"sm\" width={100} options={gradeOptions} value={grade} onChange={setGrade} />\n<StnDropdown size=\"md\" width={180} options={shutdownOptions} value={shutdown} onChange={setShutdown} />\n<StnDropdown size=\"lg\" fullWidth options={statusOptions} value={status} onChange={setStatus} />`\n\nexport const STN_DROPDOWN_HTML = `<!-- StnDropdown · 커스텀 드롭다운 -->\n<div class=\"stn-dropdown md\">\n  <div class=\"selected\">선택값</div>\n  <ul class=\"select_option\">\n    <li>옵션 1</li>\n  </ul>\n</div>`\n\nexport const STN_DROPDOWN_MENU_INTRO =\n  '검색줄·대시보드용 **두꺼운 커스텀 메뉴**(52px, radius 8px). Pub `cctv-header` / `simple_board_area`와 동일 계열입니다. React는 `StnDropdownMenu`(`stn-dropdown--prominent`)를 쓰고, 일반 드롭다운 sm/md/lg는 `StnDropdown`입니다.'\n\nexport const STN_DROPDOWN_MENU_USAGE = `import { StnDropdownMenu } from '@stn-uiux/pub-ui-react'\n\n<StnDropdownMenu\n  width={110}\n  options={[\n    { value: 'all', label: '전체' },\n    { value: 'group', label: '그룹명' },\n    { value: 'device', label: '장비명' },\n  ]}\n  value={field}\n  onChange={setField}\n  aria-label=\"검색 필드\"\n/>`\n"],"mappings":"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","names":[]}

package/dist/{chunk-XBFXX3D6.js → chunk-NGUMR3D6.js}

@@ -14,7 +14,13 @@ var STN_LAYER0_BACKGROUND_DEMO_IMAGES = {
   mapDark: `${STN_CDN_ASSET_BASE}/map-dark.png`,
   login: `${STN_CDN_ASSET_BASE}/login-light.png`,
   loginLight: `${STN_CDN_ASSET_BASE}/login-light.png`,
-  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`
+  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`,
+  infomap: `${STN_CDN_ASSET_BASE}/infomap-light.png`,
+  infomapLight: `${STN_CDN_ASSET_BASE}/infomap-light.png`,
+  infomapDark: `${STN_CDN_ASSET_BASE}/infomap-dark.png`,
+  infomapNone: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,
+  infomapNoneLight: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,
+  infomapNoneDark: `${STN_CDN_ASSET_BASE}/infomap-dark-none.png`
 };
 var STN_LAYER0_BACKGROUND_ASSET_PATHS = {
   dashboard: "@assets/images/layer0/dashboard-light.png",
@@ -30,7 +36,13 @@ var STN_LAYER0_BACKGROUND_ASSET_PATHS = {
   mapDark: "@assets/images/layer0/map-dark.png",
   login: "@assets/images/layer0/login-light.png",
   loginLight: "@assets/images/layer0/login-light.png",
-  loginDark: "@assets/images/layer0/login-dark.png"
+  loginDark: "@assets/images/layer0/login-dark.png",
+  infomap: "@assets/images/layer0/infomap-light.png",
+  infomapLight: "@assets/images/layer0/infomap-light.png",
+  infomapDark: "@assets/images/layer0/infomap-dark.png",
+  infomapNone: "@assets/images/layer0/infomap-light-none.png",
+  infomapNoneLight: "@assets/images/layer0/infomap-light-none.png",
+  infomapNoneDark: "@assets/images/layer0/infomap-dark-none.png"
 };
 
 export {
@@ -38,4 +50,4 @@ export {
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,
   STN_LAYER0_BACKGROUND_ASSET_PATHS
 };
-//# sourceMappingURL=chunk-XBFXX3D6.js.map
+//# sourceMappingURL=chunk-NGUMR3D6.js.map

package/dist/chunk-NGUMR3D6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnLayer0BackgroundAssets.ts"],"sourcesContent":["/**\n * L0 preset images — Hosted on STN Official Vercel CDN for zero-setup & instant loading.\n */\nexport const STN_CDN_ASSET_BASE = 'https://stn-design.vercel.app/images/layer0'\n\nexport const STN_LAYER0_BACKGROUND_DEMO_IMAGES = {\n  dashboard: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardLight: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardDark: `${STN_CDN_ASSET_BASE}/dashboard-dark.png`,\n  showroomA: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomALight: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomADark: `${STN_CDN_ASSET_BASE}/showroom-a-dark.png`,\n  showroomB: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBLight: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBDark: `${STN_CDN_ASSET_BASE}/showroom-b-dark.png`,\n  mapLight: `${STN_CDN_ASSET_BASE}/map-light.png`,\n  mapDark: `${STN_CDN_ASSET_BASE}/map-dark.png`,\n  login: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginLight: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`,\n  infomap: `${STN_CDN_ASSET_BASE}/infomap-light.png`,\n  infomapLight: `${STN_CDN_ASSET_BASE}/infomap-light.png`,\n  infomapDark: `${STN_CDN_ASSET_BASE}/infomap-dark.png`,\n  infomapNone: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,\n  infomapNoneLight: `${STN_CDN_ASSET_BASE}/infomap-light-none.png`,\n  infomapNoneDark: `${STN_CDN_ASSET_BASE}/infomap-dark-none.png`,\n} as const\n\n/** Pub CSS @assets 경로 — HTML·vanilla 소비자용 */\nexport const STN_LAYER0_BACKGROUND_ASSET_PATHS = {\n  dashboard: '@assets/images/layer0/dashboard-light.png',\n  dashboardLight: '@assets/images/layer0/dashboard-light.png',\n  dashboardDark: '@assets/images/layer0/dashboard-dark.png',\n  showroomA: '@assets/images/layer0/showroom-a-light.png',\n  showroomALight: '@assets/images/layer0/showroom-a-light.png',\n  showroomADark: '@assets/images/layer0/showroom-a-dark.png',\n  showroomB: '@assets/images/layer0/showroom-b-light.png',\n  showroomBLight: '@assets/images/layer0/showroom-b-light.png',\n  showroomBDark: '@assets/images/layer0/showroom-b-dark.png',\n  mapLight: '@assets/images/layer0/map-light.png',\n  mapDark: '@assets/images/layer0/map-dark.png',\n  login: '@assets/images/layer0/login-light.png',\n  loginLight: '@assets/images/layer0/login-light.png',\n  loginDark: '@assets/images/layer0/login-dark.png',\n  infomap: '@assets/images/layer0/infomap-light.png',\n  infomapLight: '@assets/images/layer0/infomap-light.png',\n  infomapDark: '@assets/images/layer0/infomap-dark.png',\n  infomapNone: '@assets/images/layer0/infomap-light-none.png',\n  infomapNoneLight: '@assets/images/layer0/infomap-light-none.png',\n  infomapNoneDark: '@assets/images/layer0/infomap-dark-none.png',\n} as const\n"],"mappings":";AAGO,IAAM,qBAAqB;AAE3B,IAAM,oCAAoC;AAAA,EAC/C,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,UAAU,GAAG,kBAAkB;AAAA,EAC/B,SAAS,GAAG,kBAAkB;AAAA,EAC9B,OAAO,GAAG,kBAAkB;AAAA,EAC5B,YAAY,GAAG,kBAAkB;AAAA,EACjC,WAAW,GAAG,kBAAkB;AAAA,EAChC,SAAS,GAAG,kBAAkB;AAAA,EAC9B,cAAc,GAAG,kBAAkB;AAAA,EACnC,aAAa,GAAG,kBAAkB;AAAA,EAClC,aAAa,GAAG,kBAAkB;AAAA,EAClC,kBAAkB,GAAG,kBAAkB;AAAA,EACvC,iBAAiB,GAAG,kBAAkB;AACxC;AAGO,IAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,iBAAiB;AACnB;","names":[]}

package/dist/chunk-QQYDH4WU.js

@@ -0,0 +1,9 @@
+// src/data/stnPackageVersion.ts
+var STN_UI_VERSION = "0.1.68";
+var STN_UI_VERSION_LABEL = "v0.1.68";
+
+export {
+  STN_UI_VERSION,
+  STN_UI_VERSION_LABEL
+};
+//# sourceMappingURL=chunk-QQYDH4WU.js.map

package/dist/chunk-QQYDH4WU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.68'\nexport const STN_UI_VERSION_LABEL = 'v0.1.68'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}

package/dist/cli.js

@@ -32,8 +32,8 @@ import {
 } from "./chunk-EQ6LUBD6.js";
 import {
   STN_LAYER0_BACKGROUND_USAGE
-} from "./chunk-HJCUNRB3.js";
-import "./chunk-XBFXX3D6.js";
+} from "./chunk-FSSMH6VS.js";
+import "./chunk-NGUMR3D6.js";
 import {
   STN_LAYOUT_LIST_VIEW_USAGE
 } from "./chunk-2ZYBBVBT.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk-5BGXBJXN.js";
 import {
   STN_DROPDOWN_USAGE
-} from "./chunk-LKVTW54X.js";
+} from "./chunk-IZRGNUH6.js";
 import {
   STN_HEADER_USAGE
 } from "./chunk-ESH5VDHX.js";

package/dist/data/index.js

@@ -135,7 +135,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-OGCKPHGD.js";
+} from "../chunk-QQYDH4WU.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -422,12 +422,12 @@ import {
   STN_LAYER0_BACKGROUND_USAGE_HTML,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_MAP_LIGHT_OVERLAY
-} from "../chunk-HJCUNRB3.js";
+} from "../chunk-FSSMH6VS.js";
 import {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "../chunk-XBFXX3D6.js";
+} from "../chunk-NGUMR3D6.js";
 import {
   STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE,
   STN_LAYER_SHELL_USAGE,
@@ -474,7 +474,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "../chunk-LKVTW54X.js";
+} from "../chunk-IZRGNUH6.js";
 import {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,

package/dist/data/stnDropdown.d.ts

@@ -4,7 +4,7 @@
  */
 type StnDropdownMode = 'native' | 'menu';
 type StnDropdownSize = 'sm' | 'md' | 'lg' | 'xl';
-type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent';
+type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent' | 'translucent';
 type StnDropdownHelperTextPosition = 'top' | 'bottom' | 'left' | 'right';
 type StnDropdownDirection = 'down' | 'up';
 /** native: select에 class 직접 · wrapper: div.stn-dropdown > select.selected */

package/dist/data/stnDropdown.js

@@ -7,7 +7,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "../chunk-LKVTW54X.js";
+} from "../chunk-IZRGNUH6.js";
 export {
   STN_DROPDOWN_HTML,
   STN_DROPDOWN_HTML_COUNTS,

package/dist/data/stnLayer0Background.d.ts

@@ -21,8 +21,8 @@ declare const STN_LAYER0_BACKGROUND_FIGMA: {
     readonly dashboardDark: "40004209:78300";
 };
 type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image';
-/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 5종 (light/dark 자동 전환) */
-type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard';
+/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 7종 (light/dark 자동 전환) */
+type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard' | 'infomap' | 'infomap-none';
 
 declare const STN_LAYER0_BACKGROUND_INTRO = "\uD398\uC774\uC9C0 \uCD5C\uD558\uB2E8 \uB808\uBCA8(Level 0)\uC5D0 \uC704\uCE58\uD558\uB294 \uC2DC\uC2A4\uD15C \uBC14\uB2E5\uBA74 \uBC30\uACBD \uD328\uD134\uC785\uB2C8\uB2E4. \uB2E8\uC0C9 \uCEEC\uB7EC \uBC0F \uB9F5\u00B7\uD1A0\uD3F4\uB85C\uC9C0 \uCE94\uBC84\uC2A4 \uBC30\uACBD \uC774\uBBF8\uC9C0\uB97C `StnLayer0BackgroundPreset`\uC73C\uB85C \uC190\uC27D\uAC8C \uC801\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.";
 declare const STN_LAYER0_BACKGROUND_VARIANT_ROWS: readonly [{
@@ -37,6 +37,18 @@ declare const STN_LAYER0_BACKGROUND_VARIANT_ROWS: readonly [{
     readonly figma: "40004209:78300";
     readonly figmaDark: "40004209:78300";
     readonly note: "Dashboard · light/dark pair";
+}, {
+    readonly preset: "infomap";
+    readonly kind: "image";
+    readonly figma: "40004209:78300";
+    readonly figmaDark: "40004209:78300";
+    readonly note: "Infomap 3D Graphic · light/dark pair";
+}, {
+    readonly preset: "infomap-none";
+    readonly kind: "image";
+    readonly figma: "40004209:78300";
+    readonly figmaDark: "40004209:78300";
+    readonly note: "Infomap 3D Graphic (None/텍스트 없음) · light/dark pair";
 }, {
     readonly preset: "showroom-a";
     readonly kind: "image";
@@ -66,7 +78,7 @@ declare const STN_LAYER0_BACKGROUND_USAGE = "import {\n  StnLayer,\n  StnLayer0B
 declare const STN_LAYER0_BACKGROUND_USAGE_HTML = "<!-- L0 background \u2014 color / image -->\n<div class=\"stn-elev-0 stn-layer0-bg\">\n  <!-- color -->\n  <div class=\"stn-layer0-bg color default\" aria-hidden=\"true\"></div>\n\n  <!-- \uB610\uB294 image -->\n  <div\n    class=\"stn-layer0-bg image\"\n    style=\"--stn-layer0-bg-image: url('/assets/bg-light.png')\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <main class=\"stn-elev-1\"><!-- L1 content --></main>\n</div>";
 declare const STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2;
 /** Patterns → Background playground 프리셋 (UI 라벨 · 내부 variant) */
-type StnLayer0BackgroundPlaygroundPresetId = 'dashboard' | 'color' | 'gradient' | 'map' | 'topology' | 'none';
+type StnLayer0BackgroundPlaygroundPresetId = 'dashboard' | 'infomap' | 'infomap-none' | 'color' | 'gradient' | 'map' | 'topology' | 'none';
 declare const STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS: {
     id: StnLayer0BackgroundPlaygroundPresetId;
     label: string;

package/dist/data/stnLayer0Background.js

@@ -6,11 +6,11 @@ import {
   STN_LAYER0_BACKGROUND_USAGE_HTML,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_MAP_LIGHT_OVERLAY
-} from "../chunk-HJCUNRB3.js";
+} from "../chunk-FSSMH6VS.js";
 import {
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "../chunk-XBFXX3D6.js";
+} from "../chunk-NGUMR3D6.js";
 export {
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES,

package/dist/data/stnLayer0BackgroundAssets.d.ts

@@ -17,6 +17,12 @@ declare const STN_LAYER0_BACKGROUND_DEMO_IMAGES: {
     readonly login: "https://stn-design.vercel.app/images/layer0/login-light.png";
     readonly loginLight: "https://stn-design.vercel.app/images/layer0/login-light.png";
     readonly loginDark: "https://stn-design.vercel.app/images/layer0/login-dark.png";
+    readonly infomap: "https://stn-design.vercel.app/images/layer0/infomap-light.png";
+    readonly infomapLight: "https://stn-design.vercel.app/images/layer0/infomap-light.png";
+    readonly infomapDark: "https://stn-design.vercel.app/images/layer0/infomap-dark.png";
+    readonly infomapNone: "https://stn-design.vercel.app/images/layer0/infomap-light-none.png";
+    readonly infomapNoneLight: "https://stn-design.vercel.app/images/layer0/infomap-light-none.png";
+    readonly infomapNoneDark: "https://stn-design.vercel.app/images/layer0/infomap-dark-none.png";
 };
 /** Pub CSS @assets 경로 — HTML·vanilla 소비자용 */
 declare const STN_LAYER0_BACKGROUND_ASSET_PATHS: {
@@ -34,6 +40,12 @@ declare const STN_LAYER0_BACKGROUND_ASSET_PATHS: {
     readonly login: "@assets/images/layer0/login-light.png";
     readonly loginLight: "@assets/images/layer0/login-light.png";
     readonly loginDark: "@assets/images/layer0/login-dark.png";
+    readonly infomap: "@assets/images/layer0/infomap-light.png";
+    readonly infomapLight: "@assets/images/layer0/infomap-light.png";
+    readonly infomapDark: "@assets/images/layer0/infomap-dark.png";
+    readonly infomapNone: "@assets/images/layer0/infomap-light-none.png";
+    readonly infomapNoneLight: "@assets/images/layer0/infomap-light-none.png";
+    readonly infomapNoneDark: "@assets/images/layer0/infomap-dark-none.png";
 };
 
 export { STN_CDN_ASSET_BASE, STN_LAYER0_BACKGROUND_ASSET_PATHS, STN_LAYER0_BACKGROUND_DEMO_IMAGES };

package/dist/data/stnLayer0BackgroundAssets.js

@@ -2,7 +2,7 @@ import {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "../chunk-XBFXX3D6.js";
+} from "../chunk-NGUMR3D6.js";
 export {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,

package/dist/data/stnPackageVersion.d.ts

@@ -1,5 +1,5 @@
 /** Package version constants */
-declare const STN_UI_VERSION = "0.1.67";
-declare const STN_UI_VERSION_LABEL = "v0.1.67";
+declare const STN_UI_VERSION = "0.1.68";
+declare const STN_UI_VERSION_LABEL = "v0.1.68";
 
 export { STN_UI_VERSION, STN_UI_VERSION_LABEL };

package/dist/data/stnPackageVersion.js

@@ -1,7 +1,7 @@
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-OGCKPHGD.js";
+} from "../chunk-QQYDH4WU.js";
 export {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL

package/dist/index.js

@@ -140,7 +140,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-OGCKPHGD.js";
+} from "./chunk-QQYDH4WU.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -427,12 +427,12 @@ import {
   STN_LAYER0_BACKGROUND_USAGE_HTML,
   STN_LAYER0_BACKGROUND_VARIANT_ROWS,
   STN_LAYER0_MAP_LIGHT_OVERLAY
-} from "./chunk-HJCUNRB3.js";
+} from "./chunk-FSSMH6VS.js";
 import {
   STN_CDN_ASSET_BASE,
   STN_LAYER0_BACKGROUND_ASSET_PATHS,
   STN_LAYER0_BACKGROUND_DEMO_IMAGES
-} from "./chunk-XBFXX3D6.js";
+} from "./chunk-NGUMR3D6.js";
 import {
   STN_ALERT_CENTER_PAGE_SCAFFOLD_USAGE,
   STN_LAYER_SHELL_USAGE,
@@ -479,7 +479,7 @@ import {
   STN_DROPDOWN_MENU_USAGE,
   STN_DROPDOWN_SIZE_ROWS,
   STN_DROPDOWN_USAGE
-} from "./chunk-LKVTW54X.js";
+} from "./chunk-IZRGNUH6.js";
 import {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.67",
+  "version": "0.1.69",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [

package/styles/components/stn-card.css

@@ -69,6 +69,27 @@
 .stn-card.pad-md { padding: var(--stn-card-pad-md); }
 .stn-card.pad-lg { padding: var(--stn-card-pad-lg); }
 
+/* Layout modifiers */
+.stn-card.is-full-width,
+.stn-card.full-width {
+  width: 100%;
+}
+
+.stn-card.is-full-height,
+.stn-card.full-height {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.stn-card.is-full-height > .stn-card__body,
+.stn-card.full-height > .stn-card__body {
+  flex: 1 1 0%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 /* Interactive (Hover / Click) */
 .stn-card.interactive,
 .stn-card[role='button'] {
@@ -91,6 +112,29 @@
   margin-bottom: var(--stn-space-12, 12px);
 }
 
+.stn-card__header-title {
+  margin: 0;
+  min-width: 0;
+  font-size: var(--stn-text-title-small-size, var(--stn-font-size-16, 16px));
+  font-weight: var(--stn-font-weight-semibold, 600);
+  color: var(--stn-text-primary);
+  line-height: var(--stn-line-height-1, 1.2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Card title size modifiers */
+.stn-card__header-title.sm { font-size: var(--stn-font-size-14, 14px); }
+.stn-card__header-title.md { font-size: var(--stn-font-size-16, 16px); }
+.stn-card__header-title.lg { font-size: var(--stn-font-size-18, 18px); }
+
+/* Card title weight modifiers */
+.stn-card__header-title.regular { font-weight: var(--stn-font-weight-regular, 400); }
+.stn-card__header-title.medium { font-weight: var(--stn-font-weight-medium, 500); }
+.stn-card__header-title.semibold { font-weight: var(--stn-font-weight-semibold, 600); }
+.stn-card__header-title.bold { font-weight: var(--stn-font-weight-bold, 700); }
+
 .stn-card__body {
   display: block;
 }

package/styles/components/stn-chip.css

@@ -19,6 +19,7 @@
  *   - Border accents: `accent-mint`, `accent-sky`, `accent-violet`, `accent-orange`, `accent-yellow`, `accent-gray`
  */
 
+
 .stn-chip-wrap {
   display: inline-flex;
   align-items: center;
@@ -203,47 +204,28 @@
   --stn-chip-color: var(--stn-grade-warning);
 }
 
-/* —— 4. Variants: Filled vs Outline / Border vs Contained 50% Opacity —— */
+/* —— 4. Variants: Filled vs Soft vs Outline —— */
 /* Filled (Default / Contained) */
 .stn-chip.filled,
-.stn-chip.contained,
-.stn-chip:not(.outline):not(.border):not(.contained-50):not(.filled-50):not(.bg-50):not(.bg-opacity-50):not(.soft):not(.subtle):not(.tinted) {
+.stn-chip:not(.outline):not(.soft) {
   --stn-chip-bg: var(--stn-chip-color);
   --stn-chip-border: transparent;
   --stn-chip-fg: var(--stn-text-re-primary);
 }
 
-/* Contained / Soft / Subtle (연한 배경 + 해당 색상 텍스트) */
-.stn-chip.subtle,
-.stn-chip.soft,
-.stn-chip.tinted,
-.stn-chip.contained-50,
-.stn-chip.filled-50,
-.stn-chip.bg-50,
-.stn-chip.bg-opacity-50,
-.stn-chip--bg-50 {
+/* Soft (은은한 틴트 배경 + 해당 색상 텍스트 단일 통일) */
+.stn-chip.soft {
   --stn-chip-bg: color-mix(in srgb, var(--stn-chip-color) 14%, transparent);
   --stn-chip-border: transparent;
   --stn-chip-fg: var(--stn-chip-color);
 }
 
-[data-theme='dark'] .stn-chip.subtle,
-[data-theme='dark'] .stn-chip.soft,
-[data-theme='dark'] .stn-chip.tinted,
-[data-theme='dark'] .stn-chip.contained-50,
-[data-theme='dark'] .stn-chip.filled-50,
-[data-theme='dark'] .stn-chip.bg-50,
-[data-theme='dark'] .stn-chip.bg-opacity-50,
-[data-theme='dark'] .stn-chip--bg-50 {
+[data-theme='dark'] .stn-chip.soft {
   --stn-chip-bg: color-mix(in srgb, var(--stn-chip-color) 22%, transparent);
-  --stn-chip-border: transparent;
-  --stn-chip-fg: var(--stn-chip-color);
 }
 
-/* Outline / Border */
-.stn-chip.outline,
-.stn-chip.outlined,
-.stn-chip.border {
+/* Outline (외곽선 테두리 단일 통일) */
+.stn-chip.outline {
   --stn-chip-bg: transparent;
   --stn-chip-border: var(--stn-chip-color);
   --stn-chip-fg: var(--stn-chip-color);
@@ -330,18 +312,12 @@
   filter: brightness(1.08);
 }
 
-.stn-chip.clickable.outline:hover,
-.stn-chip.clickable.border:hover {
+.stn-chip.clickable.outline:hover {
   background-color: color-mix(in srgb, var(--stn-chip-color) 12%, transparent);
   filter: none;
 }
 
-.stn-chip.clickable.contained-50:hover,
-.stn-chip.clickable.filled-50:hover,
-.stn-chip.clickable.bg-50:hover,
-.stn-chip.clickable.bg-opacity-50:hover,
-.stn-chip.clickable.soft:hover,
-.stn-chip.clickable.stn-chip--bg-50:hover {
+.stn-chip.clickable.soft:hover {
   background-color: color-mix(in srgb, var(--stn-chip-color) 65%, transparent);
   filter: none;
 }

package/styles/components/stn-dropdown.css

@@ -173,6 +173,26 @@
   border-bottom: var(--stn-size-1, 1px) solid var(--stn-feedback-error);
 }
 
+/* 3-5. Translucent (반투명 — 배경 비침 & 블러) */
+.stn-dropdown.translucent>.selected {
+  border: var(--stn-size-1, 1px) solid var(--stn-input-border);
+  background-color: var(--stn-dropdown-bg-translucent, var(--stn-opacity-black-25));
+  color: var(--stn-input-fg, var(--stn-text-primary));
+  backdrop-filter: blur(var(--stn-dropdown-translucent-blur, 8px));
+  -webkit-backdrop-filter: blur(var(--stn-dropdown-translucent-blur, 8px));
+}
+
+.stn-dropdown.translucent:hover:not(.is-disabled)>.selected {
+  border-color: var(--stn-border-strong, var(--stn-gray-400));
+  background-color: color-mix(in srgb, var(--stn-dropdown-bg-translucent, var(--stn-opacity-black-25)) 75%, var(--stn-static-white) 25%);
+}
+
+.stn-dropdown.translucent.on>.selected,
+.stn-dropdown.translucent:focus-within>.selected {
+  border: var(--stn-input-focus);
+  background-color: color-mix(in srgb, var(--stn-dropdown-bg-translucent, var(--stn-opacity-black-25)) 80%, var(--stn-primary) 20%);
+}
+
 /* ==========================================================================
    4. Prop: state (Normal · Focus/Open · Disabled · Error · ReadOnly)
    ========================================================================== */

package/styles/components/stn-status.css

@@ -36,7 +36,7 @@
 }
 
 /* Size 스케일 — STN 표준 규격: xs · sm · md(기본) · lg · xl */
-/* xs — 18px */
+/* xs — 20px (bordered) */
 .stn-status-dot.xs {
   font-size: var(--stn-font-size-11, 11px);
   gap: var(--stn-space-4, 4px);
@@ -46,14 +46,14 @@
   height: var(--stn-size-6, 6px);
 }
 .stn-status-dot.xs.bordered {
-  height: var(--stn-size-18, 18px);
+  height: var(--stn-size-20, 20px);
   padding: 0 var(--stn-space-6, 6px);
 }
 .stn-status-dot.xs .stn-status-dot__count {
   font-size: var(--stn-font-size-10, 10px);
 }
 
-/* sm — 20px */
+/* sm — 24px (bordered: 버튼 sm과 1:1 일치) */
 .stn-status-dot.sm {
   font-size: var(--stn-font-size-12, 12px);
   gap: var(--stn-space-4, 4px);
@@ -63,14 +63,14 @@
   height: var(--stn-size-7, 7px);
 }
 .stn-status-dot.sm.bordered {
-  height: var(--stn-size-20, 20px);
-  padding: 0 var(--stn-space-6, 6px);
+  height: var(--stn-size-24, 24px);
+  padding: 0 var(--stn-space-8, 8px);
 }
 .stn-status-dot.sm .stn-status-dot__count {
   font-size: var(--stn-font-size-11, 11px);
 }
 
-/* md — 24px (기본) */
+/* md — 32px (기본 · bordered: 버튼 md와 1:1 일치) */
 .stn-status-dot.md {
   font-size: var(--stn-font-size-13, 13px);
   gap: var(--stn-space-6, 6px);
@@ -80,14 +80,14 @@
   height: var(--stn-size-8, 8px);
 }
 .stn-status-dot.md.bordered {
-  height: var(--stn-size-24, 24px);
-  padding: 0 var(--stn-space-8, 8px);
+  height: var(--stn-size-32, 32px);
+  padding: 0 var(--stn-space-10, 10px);
 }
 .stn-status-dot.md .stn-status-dot__count {
   font-size: var(--stn-font-size-12, 12px);
 }
 
-/* lg — 28px */
+/* lg — 40px (bordered: 버튼 lg와 1:1 일치) */
 .stn-status-dot.lg {
   font-size: var(--stn-font-size-14, 14px);
   gap: var(--stn-space-8, 8px);
@@ -97,14 +97,14 @@
   height: var(--stn-size-10, 10px);
 }
 .stn-status-dot.lg.bordered {
-  height: var(--stn-size-28, 28px);
-  padding: 0 var(--stn-space-10, 10px);
+  height: var(--stn-size-40, 40px);
+  padding: 0 var(--stn-space-12, 12px);
 }
 .stn-status-dot.lg .stn-status-dot__count {
   font-size: var(--stn-font-size-13, 13px);
 }
 
-/* xl — 32px */
+/* xl — 48px (bordered) */
 .stn-status-dot.xl {
   font-size: var(--stn-font-size-15, 15px);
   gap: var(--stn-space-8, 8px);
@@ -114,8 +114,8 @@
   height: var(--stn-size-10, 10px);
 }
 .stn-status-dot.xl.bordered {
-  height: var(--stn-size-32, 32px);
-  padding: 0 var(--stn-space-12, 12px);
+  height: var(--stn-size-48, 48px);
+  padding: 0 var(--stn-space-14, 14px);
 }
 .stn-status-dot.xl .stn-status-dot__count {
   font-size: var(--stn-font-size-14, 14px);
@@ -128,13 +128,13 @@
 .stn-status-dot.gap-md { gap: var(--stn-space-6, 6px); }
 .stn-status-dot.gap-lg { gap: var(--stn-space-10, 10px); }
 
-/* 단독 테두리 캡슐 모드 (Bordered Dot) */
+/* 단독 테두리 캡슐 모드 (Bordered Dot: 기본 md 32px) */
 .stn-status-dot.bordered {
-  height: var(--stn-size-24, 24px);
-  padding: 0 var(--stn-space-8, 8px);
+  height: var(--stn-size-32, 32px);
+  padding: 0 var(--stn-space-10, 10px);
   border-radius: var(--stn-radius-chip-pill, 9999px);
-  border: 1px solid var(--stn-status-dot-bordered-border);
-  background-color: var(--stn-layer-bg-card);
+  border: 1px solid var(--stn-status-dot-bordered-border, var(--stn-border-subtle));
+  background-color: var(--stn-status-dot-bordered-bg, var(--stn-layer-bg-card, transparent));
   box-sizing: border-box;
 }
 
@@ -254,8 +254,8 @@
 .stn-status-dot-group.bordered {
   height: var(--stn-size-26, 26px);
   border-radius: var(--stn-radius-chip-pill, 9999px);
-  border: 1px solid var(--stn-status-dot-bordered-border);
-  background-color: var(--stn-layer-bg-card);
+  border: 1px solid var(--stn-status-dot-bordered-border, var(--stn-border-subtle));
+  background-color: var(--stn-status-dot-bordered-bg, var(--stn-layer-bg-card, transparent));
   box-shadow: none;
   overflow: hidden;
 }
@@ -272,7 +272,7 @@
   font-weight: var(--stn-font-weight-medium, 500);
   color: var(--stn-text-primary);
   user-select: none;
-  border-right: 1px solid var(--stn-status-dot-bordered-border);
+  border-right: 1px solid var(--stn-status-dot-bordered-border, var(--stn-border-subtle));
   transition: opacity 0.2s ease, background-color 0.15s ease;
 }
 
@@ -596,7 +596,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--stn-space-2, 2px);
+  gap: var(--stn-severity-badge-gap, var(--stn-space-4, 4px));
   border-radius: var(--stn-radius-4, 4px);
   font-family: var(--stn-font-body, Pretendard, sans-serif);
   line-height: 1.2;
@@ -631,7 +631,7 @@
   height: var(--stn-severity-badge-height-sm, var(--stn-size-18, 18px));
   padding: var(--stn-severity-badge-padding-sm, var(--stn-space-2, 2px) var(--stn-space-4, 4px));
   font-size: var(--stn-font-size-10, 10px);
-  gap: var(--stn-space-2, 2px);
+  gap: var(--stn-severity-badge-gap-sm, var(--stn-space-2, 2px));
 }
 
 .stn-status-severity.sm .stn-status-severity__icon {
@@ -644,7 +644,7 @@
   height: var(--stn-severity-badge-height-md, var(--stn-size-20, 20px));
   padding: var(--stn-severity-badge-padding-md, var(--stn-space-4, 4px) var(--stn-space-8, 8px));
   font-size: var(--stn-font-size-11, 11px);
-  gap: var(--stn-space-2, 2px);
+  gap: var(--stn-severity-badge-gap-md, var(--stn-space-4, 4px));
 }
 
 .stn-status-severity.md .stn-status-severity__icon {
@@ -657,7 +657,7 @@
   height: var(--stn-severity-badge-height-lg, var(--stn-size-24, 24px));
   padding: var(--stn-severity-badge-padding-lg, var(--stn-space-4, 4px) var(--stn-space-10, 10px));
   font-size: var(--stn-font-size-12, 12px);
-  gap: var(--stn-space-4, 4px);
+  gap: var(--stn-severity-badge-gap-lg, var(--stn-space-4, 4px));
 }
 
 .stn-status-severity.lg .stn-status-severity__icon {

package/styles/components/stn-toast.css

@@ -176,9 +176,9 @@
   display: block;
 }
 
-/* --- Metric / Extra Info Box Slot --- */
+/* --- Metric / Extra Info Box Slot (@deprecated: StnCard 사용 권장) --- */
 .stn-toast__metric-box {
-  background-color: var(--stn-surface-subtle, rgba(0, 0, 0, 0.25));
+  background-color: var(--stn-elevation-surface-2);
   border: 1px solid var(--stn-border-subtle);
   border-radius: var(--stn-radius-4, 4px);
   padding: var(--stn-space-8, 8px) var(--stn-space-10, 10px);

package/styles/components/stn-widget.css

@@ -267,6 +267,17 @@
   text-overflow: ellipsis;
 }
 
+/* Widget title size modifiers */
+.stn-widget .stn-widget__title.sm { font-size: var(--stn-font-size-14, 14px); }
+.stn-widget .stn-widget__title.md { font-size: var(--stn-font-size-16, 16px); }
+.stn-widget .stn-widget__title.lg { font-size: var(--stn-font-size-18, 18px); }
+
+/* Widget title weight modifiers */
+.stn-widget .stn-widget__title.regular { font-weight: var(--stn-font-weight-regular, 400); }
+.stn-widget .stn-widget__title.medium { font-weight: var(--stn-font-weight-medium, 500); }
+.stn-widget .stn-widget__title.semibold { font-weight: var(--stn-font-weight-semibold, 600); }
+.stn-widget .stn-widget__title.bold { font-weight: var(--stn-font-weight-bold, 700); }
+
 /* 다중 액션 또는 좁은 카드에서 개행을 허용한 경우 (BEM 표준: wrapActions / .stn-widget__head--wrap) */
 .stn-widget--wrap-actions .stn-widget__head,
 .stn-widget .stn-widget__head--wrap {
@@ -645,13 +656,34 @@
 }
 
 .stn-widget__body--surface-subtle {
-  background-color: var(--stn-surface-subtle, var(--stn-widget-footer-well-bg));
+  background-color: var(--stn-widget-footer-well-bg);
 }
 
+.stn-widget .stn-widget__body.stn-widget__body--no-scroll,
 .stn-widget__body--no-scroll {
   overflow: hidden;
 }
 
+/* ==========================================================================
+   StnWidget Fit Dimensions (fullHeight=false / fullWidth=false)
+   ========================================================================== */
+.stn-widget.stn-widget--fit-height {
+  height: auto;
+  flex-grow: 0;
+}
+
+.stn-widget.stn-widget--fit-height > .stn-widget__body {
+  height: auto;
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
+.stn-widget.stn-widget--fit-width {
+  width: auto;
+  max-width: fit-content;
+  flex-grow: 0;
+}
+
 /* ==========================================================================
    StnWidget Header Period Helpers
    ========================================================================== */

package/styles/layouts/stn-layer1-content.css

@@ -332,8 +332,8 @@
   gap: var(--stn-space-8);
 }
 
-@media (max-width: 1279px) {
-  /* 태블릿/모바일(column)에서는 본문 컨테이너가 스크롤되어 LNB -> 검색바 -> 테이블 순으로 전체 탐색 가능 */
+@media (max-width: 768px) {
+  /* 모바일(column)에서는 본문 컨테이너가 스크롤되어 LNB -> 검색바 -> 테이블 순으로 전체 탐색 가능 */
   .stn-layer-1__body > .stn-container {
     overflow-y: auto !important;
     overflow-x: hidden;
@@ -350,7 +350,7 @@
     flex-shrink: 0;
   }
 
-  /* 모바일(1280px 미만) 토글 버튼: 세로 아코디언 방향(위/아래)에 맞춰 90도 회전 */
+  /* 모바일(768px 이하) 토글 버튼: 세로 아코디언 방향(위/아래)에 맞춰 90도 회전 */
   .stn-list-lnb .stn-list-lnb__toggle-btn {
     transform: rotate(90deg);
     transition: transform 0.2s ease;
@@ -385,15 +385,15 @@
     justify-content: space-between !important;
   }
 
-  /* 테이블 영역 모바일 최소 높이 보장 */
-  .stn-layer-1__body .stn-container > .stn-stack > .stn-stack {
+  /* 테이블 영역 모바일 최소 높이 보장 (LNB 목록 레이아웃 전용) */
+  :is(.stn-layer-1:has(.stn-list-lnb), .stn-layer-1__body:has(.stn-list-lnb)) .stn-container > .stn-stack > .stn-stack {
     height: auto !important;
     min-height: var(--stn-layout-list-mobile-table-min-height);
   }
 }
 
-/* 데스크톱(lg ≥ 1280px): 기본 264px 고정, 접힘 시 56px 레일 */
-@media (min-width: 1280px) {
+/* 데스크톱·태블릿(≥ 769px): 기본 264px 고정, 접힘 시 56px 레일 */
+@media (min-width: 769px) {
   .stn-list-lnb {
     width: var(--stn-list-lnb-width);
     height: 100%;

package/styles/tokens/stn-colors-semantic.css

@@ -64,6 +64,7 @@
   --stn-input-focus-bg: color-mix(in srgb, var(--stn-blue-250) 10%, transparent);
   --stn-input-focus-fg: var(--stn-blue-300);
   --stn-input-placeholder: var(--stn-gray-600);
+  --stn-dropdown-bg-translucent: var(--stn-opacity-black-25);
   --stn-label-prefix-label-bg: var(--stn-gray-800);
   --stn-tooltip-bg-neutral: var(--stn-gray-700);
   --stn-tooltip-fg-neutral: var(--stn-static-white);
@@ -376,7 +377,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-400);
-  --stn-chip-neutral: var(--stn-gray-500);
+  --stn-chip-neutral: var(--stn-gray-400);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -488,7 +489,7 @@
   --stn-widget-footer-well-border: transparent;
   --stn-widget-chevron: var(--stn-gray-250);
   --stn-widget-overlay: color-mix(in srgb, var(--stn-gray-850) 92%, transparent);
-  --stn-widget-overlay-border: var(--stn-gray-750);
+  --stn-widget-overlay-border: var(--stn-gray-700);
   --stn-widget-overlay-scrim: color-mix(in srgb, var(--stn-gray-850) 28%, transparent);
   --stn-widget-overlay-scrim-border: color-mix(in srgb, var(--stn-static-white) 10%, transparent);
   --stn-widget-overlay-fade: linear-gradient(115.89deg, color-mix(in srgb, var(--stn-gray-850) 85%, transparent) 0%, color-mix(in srgb, var(--stn-gray-900) 85%, transparent) 50.29%, color-mix(in srgb, var(--stn-gray-950) 85%, transparent) 100%);
@@ -597,6 +598,8 @@
   --stn-status-flow-step-color: var(--stn-gray-200);
   --stn-status-flow-connector-color: var(--stn-gray-600);
   --stn-status-flow-connector-opacity: 0.6;
+  --stn-status-dot-bordered-border: var(--stn-border-strong);
+  --stn-status-dot-bordered-bg: var(--stn-gray-800);
 }
 
 [data-theme='light'] {
@@ -639,7 +642,7 @@
   --stn-grade-neutral: var(--stn-gray-400);
   --stn-icon-fg: var(--stn-gray-600);
   --stn-icon-fg-muted: var(--stn-gray-400);
-  --stn-elevation-surface-0: var(--stn-static-white);
+  --stn-elevation-surface-0: var(--stn-gray-25);
   --stn-elevation-surface-1: var(--stn-opacity-black-0);
   --stn-elevation-surface-2: var(--stn-static-white);
   --stn-elevation-surface-widget: var(--stn-static-white);
@@ -656,6 +659,7 @@
   --stn-input-focus-bg: var(--stn-static-white);
   --stn-input-focus-fg: var(--stn-gray-600);
   --stn-input-placeholder: var(--stn-gray-400);
+  --stn-dropdown-bg-translucent: var(--stn-opacity-white-50);
   --stn-label-prefix-label-bg: var(--stn-gray-50);
   --stn-label-prefix-divider: var(--stn-gray-200);
   --stn-label-prefix-label-color: var(--stn-gray-500);
@@ -730,7 +734,7 @@
   --stn-table-pill-shadow: 1px 1px 2px color-mix(in srgb, var(--stn-static-black) 10%, transparent);
   --stn-table-row-hover: var(--stn-gray-25);
   --stn-table-td-fg: var(--stn-gray-750);
-  --stn-table-th-bg: var(--stn-gray-50);
+  --stn-table-th-bg: var(--stn-gray-75);
   --stn-table-th-fg: var(--stn-gray-700);
   --stn-table-th-radius: 4px;
   --stn-pagination-active-bg: var(--stn-opacity-black-5);
@@ -970,7 +974,7 @@
   --stn-scroll-thumb-muted: var(--stn-gray-600);
   --stn-scroll-thumb-muted-hover: var(--stn-gray-500);
   --stn-chip-teal: var(--stn-teal-500);
-  --stn-chip-neutral: var(--stn-gray-500);
+  --stn-chip-neutral: var(--stn-gray-400);
   --stn-chip-fg-contrast: var(--stn-gray-950);
   --stn-chip-accent-mint: var(--stn-teal-300);
   --stn-chip-accent-sky: var(--stn-blue-300);
@@ -1074,7 +1078,7 @@
   --stn-widget-minor-bg: color-mix(in srgb, var(--stn-yellow-50) 65%, var(--stn-static-white));
   --stn-widget-minor-glow: 0 0 16px 0 color-mix(in srgb, var(--stn-yellow-400) 22%, transparent) inset, 0 2px 8px 0 color-mix(in srgb, var(--stn-yellow-400) 12%, transparent);
   --stn-widget-slot-border: var(--stn-gray-200);
-  --stn-widget-slot-bg: var(--stn-gray-50);
+  --stn-widget-slot-bg: color-mix(in srgb, var(--stn-gray-900) 3%, transparent);
   --stn-widget-drag-bg: linear-gradient(281deg, var(--stn-gray-25) 4%, var(--stn-gray-50) 31%, var(--stn-static-white) 61%);
   --stn-widget-drag-shadow: 1px 1px 2px 0 var(--stn-static-white) inset, 2px 2px 4px 0 var(--stn-gray-100), 0 0 2px 0 var(--stn-gray-100);
   --stn-widget-drag-fg: var(--stn-blue-600);
@@ -1191,4 +1195,6 @@
   --stn-status-flow-step-color: var(--stn-gray-800);
   --stn-status-flow-connector-color: var(--stn-gray-400);
   --stn-status-flow-connector-opacity: 0.7;
+  --stn-status-dot-bordered-border: var(--stn-border-subtle);
+  --stn-status-dot-bordered-bg: var(--stn-elevation-surface-2);
 }

package/styles/tokens/stn-size-semantic.css

@@ -221,6 +221,7 @@
   --stn-widget-severity-border-width: var(--stn-size-4);
   --stn-header-breadcrumb-mobile-max-width: var(--stn-size-140);
   --stn-widget-translucent-blur: var(--stn-size-8);
+  --stn-dropdown-translucent-blur: var(--stn-size-8);
   --stn-widget-overlay-blur: var(--stn-size-4);
   --stn-widget-severity-blur: var(--stn-size-6);
   --stn-widget-dot-size: var(--stn-size-8);

package/styles/tokens/stn-spacing-semantic.css

@@ -203,6 +203,10 @@
   --stn-severity-badge-padding-sm: var(--stn-space-2) var(--stn-space-4);
   --stn-severity-badge-padding-md: var(--stn-space-4) var(--stn-space-8);
   --stn-severity-badge-padding-lg: var(--stn-space-4) var(--stn-space-10);
+  --stn-severity-badge-gap: var(--stn-space-4);
+  --stn-severity-badge-gap-sm: var(--stn-space-2);
+  --stn-severity-badge-gap-md: var(--stn-space-4);
+  --stn-severity-badge-gap-lg: var(--stn-space-4);
   --stn-widget-padding: var(--stn-space-12);
   --stn-widget-head-margin-bottom: var(--stn-space-8);
   --stn-widget-footer-padding: var(--stn-space-8) var(--stn-space-12);

package/dist/chunk-HJCUNRB3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnLayer0Background.ts"],"sourcesContent":["/**\n * Infomap Layer 0 background pattern\n * Light: 41267 · 186876 · 186860 · 202895\n * Dark:  80488 · 35369 · 84014 · 91183\n * @see StnLayer0Background · layouts/stn-layer0-bg.css\n */\n\nexport const STN_LAYER0_BACKGROUND_FIGMA = {\n  none: '40000040:41267',\n  noneDark: '40000040:80488',\n  showroomA: '40000042:186876',\n  showroomADark: '40002117:35369',\n  showroomB: '40000042:186860',\n  showroomBDark: '40000040:84014',\n  mapLight: '40000042:202895',\n  mapDark: '40000040:91183',\n  login: '40004209:78293',\n  loginDark: '40004209:78293',\n  dashboard: '40004209:78300',\n  dashboardDark: '40004209:78300',\n} as const\n\nexport type StnLayer0BackgroundKind = 'color' | 'gradient' | 'image'\n\n/** Figma 예제 프리셋 — color 1종 · gradient 1종 · image 5종 (light/dark 자동 전환) */\nexport type StnLayer0BackgroundPreset = 'none' | 'gradient' | 'showroom-a' | 'showroom-b' | 'map-light' | 'login' | 'dashboard'\n\n/** Doc site · Pub HTML 기준 경로 — 앱에서는 동일 경로 또는 자산 URL로 교체 */\nexport {\n  STN_LAYER0_BACKGROUND_ASSET_PATHS,\n  STN_LAYER0_BACKGROUND_DEMO_IMAGES,\n} from './stnLayer0BackgroundAssets'\n\nexport const STN_LAYER0_BACKGROUND_INTRO =\n  '페이지 최하단 레벨(Level 0)에 위치하는 시스템 바닥면 배경 패턴입니다. 단색 컬러 및 맵·토폴로지 캔버스 배경 이미지를 `StnLayer0BackgroundPreset`으로 손쉽게 적용할 수 있습니다.'\n\nexport const STN_LAYER0_BACKGROUND_VARIANT_ROWS = [\n  {\n    preset: 'none',\n    kind: 'color',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.none,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.noneDark,\n    note: 'Light gradient · Dark elevation surface-0 (gray-950)',\n  },\n  {\n    preset: 'dashboard',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.dashboard,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.dashboardDark,\n    note: 'Dashboard · light/dark pair',\n  },\n  {\n    preset: 'showroom-a',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomA,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomADark,\n    note: 'Showroom A · dark logo stage',\n  },\n  {\n    preset: 'showroom-b',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.showroomB,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.showroomBDark,\n    note: 'Showroom B · dark + radial vignette',\n  },\n  {\n    preset: 'map-light',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.mapLight,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.mapDark,\n    note: 'Map light(+20% white) · Map dark',\n  },\n  {\n    preset: 'login',\n    kind: 'image',\n    figma: STN_LAYER0_BACKGROUND_FIGMA.login,\n    figmaDark: STN_LAYER0_BACKGROUND_FIGMA.loginDark,\n    note: 'Login · light/dark pair',\n  },\n] as const satisfies ReadonlyArray<{\n  preset: StnLayer0BackgroundPreset\n  kind: StnLayer0BackgroundKind\n  figma: string\n  figmaDark: string\n  note: string\n}>\n\nexport const STN_LAYER0_BACKGROUND_USAGE = `import {\n  StnLayer,\n  StnLayer0Background,\n  StnLayer0BackgroundPreset,\n  DashboardPageScaffold,\n} from '@stn-uiux/pub-ui-react'\n\n/** Map / Topology — wrapClassName만 (맵 배경은 elevation CSS) */\n<DashboardPageScaffold\n  shell=\"layer\"\n  wrapClassName=\"stn-page--map-bg\"\n  gnb={…}\n  header={…}\n/>\n\n/** 일반 페이지 — L0 color (default = elevation-surface-0) */\n<StnLayer.Background>\n  <StnLayer0Background color=\"default\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** Figma image 프리셋 — showroom · map · login */\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"map-light\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n<StnLayer.Background>\n  <StnLayer0BackgroundPreset variant=\"login\" />\n  <StnLayer.Content>{/* 본문 */}</StnLayer.Content>\n</StnLayer.Background>\n\n/** 직접 조합 — light/dark 이미지 */\n<StnLayer.Background>\n  <StnLayer0Background\n    kind=\"image\"\n    src=\"/assets/bg-light.png\"\n    srcDark=\"/assets/bg-dark.png\"\n  />\n  <StnLayer.Content>…</StnLayer.Content>\n</StnLayer.Background>`\n\nexport const STN_LAYER0_BACKGROUND_USAGE_HTML = `<!-- L0 background — color / image -->\n<div class=\"stn-elev-0 stn-layer0-bg\">\n  <!-- color -->\n  <div class=\"stn-layer0-bg color default\" aria-hidden=\"true\"></div>\n\n  <!-- 또는 image -->\n  <div\n    class=\"stn-layer0-bg image\"\n    style=\"--stn-layer0-bg-image: url('/assets/bg-light.png')\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <main class=\"stn-elev-1\"><!-- L1 content --></main>\n</div>`\n\nexport const STN_LAYER0_MAP_LIGHT_OVERLAY = 0.2\n\n/** Patterns → Background playground 프리셋 (UI 라벨 · 내부 variant) */\nexport type StnLayer0BackgroundPlaygroundPresetId =\n  | 'dashboard'\n  | 'color'\n  | 'gradient'\n  | 'map'\n  | 'topology'\n  | 'none'\n\nexport const STN_LAYER0_BACKGROUND_PLAYGROUND_PRESETS: {\n  id: StnLayer0BackgroundPlaygroundPresetId\n  label: string\n  asset: string\n  variant?: StnLayer0BackgroundPreset\n}[] = [\n  { id: 'dashboard', label: 'dashboard', asset: '대시보드 배경 (dashboard-light / dark)', variant: 'dashboard' },\n  { id: 'color', label: 'color', asset: '단색 테마 배경 (solid default)', variant: 'none' },\n  { id: 'gradient', label: 'gradient', asset: '공식 앰비언트 그라데이션 (워시/심도)', variant: 'gradient' },\n  { id: 'map', label: 'map', asset: 'GIS 지도 배경 (map-light)', variant: 'map-light' },\n  { id: 'topology', label: 'topology', asset: '토폴로지 배경 (showroom-b)', variant: 'showroom-b' },\n  { id: 'none', label: 'none', asset: 'L0 배경 없음 (외부 캔버스 전용)', variant: 'none' },\n]\n"],"mappings":";AAOO,IAAM,8BAA8B;AAAA,EACzC,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AACjB;AAaO,IAAM,8BACX;AAEK,IAAM,qCAAqC;AAAA,EAChD;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO,4BAA4B;AAAA,IACnC,WAAW,4BAA4B;AAAA,IACvC,MAAM;AAAA,EACR;AACF;AAQO,IAAM,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CpC,IAAM,mCAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezC,IAAM,+BAA+B;AAWrC,IAAM,2CAKP;AAAA,EACJ,EAAE,IAAI,aAAa,OAAO,aAAa,OAAO,kEAAoC,SAAS,YAAY;AAAA,EACvG,EAAE,IAAI,SAAS,OAAO,SAAS,OAAO,0DAA4B,SAAS,OAAO;AAAA,EAClF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,oGAAyB,SAAS,WAAW;AAAA,EACzF,EAAE,IAAI,OAAO,OAAO,OAAO,OAAO,6CAAyB,SAAS,YAAY;AAAA,EAChF,EAAE,IAAI,YAAY,OAAO,YAAY,OAAO,sDAAwB,SAAS,aAAa;AAAA,EAC1F,EAAE,IAAI,QAAQ,OAAO,QAAQ,OAAO,+EAAwB,SAAS,OAAO;AAC9E;","names":[]}

package/dist/chunk-LKVTW54X.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnDropdown.ts"],"sourcesContent":["/**\n * StnDropdown — native `<select>` · custom menu (`div.selected` + `ul.select_option`)\n * @see common.css · content.css (cctv-header, simple_board_area, ip_mpls)\n */\n\nexport type StnDropdownMode = 'native' | 'menu'\n\nexport type StnDropdownSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport type StnDropdownVariant = 'outline' | 'standard' | 'filled' | 'transparent'\nexport type StnDropdownHelperTextPosition = 'top' | 'bottom' | 'left' | 'right'\nexport type StnDropdownDirection = 'down' | 'up'\n\n/** native: select에 class 직접 · wrapper: div.stn-dropdown > select.selected */\nexport type StnDropdownNativeLayout = 'inline' | 'wrapper'\n\nexport type StnDropdownModifier =\n  | 'pageSize'\n  | 'serverFilter'\n  | 'networkArea'\n  | 'fullWidth'\n\nexport type StnDropdownOption = {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\n/** StnDropdown menu sm/md/lg/xl — height only · width는 `width`/`fullWidth` */\nexport const STN_DROPDOWN_SIZE_ROWS: readonly {\n  size: StnDropdownSize\n  height: string\n  radius: string\n  fontSize: string\n  pubClass: string\n  typicalWidth: string\n  usedIn: string\n}[] = [\n  {\n    size: 'sm',\n    height: '24px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown sm',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '폼·테이블 셀 · 좁은 검색',\n  },\n  {\n    size: 'md',\n    height: '32px',\n    radius: '4px (radius-4)',\n    fontSize: '13px',\n    pubClass: 'stn-dropdown md',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '검색영역 · interface_list',\n  },\n  {\n    size: 'lg',\n    height: '40px',\n    radius: '6px (radius-6)',\n    fontSize: '14px',\n    pubClass: 'stn-dropdown lg',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: '강조 검색 · 넓은 라벨 열',\n  },\n  {\n    size: 'xl',\n    height: '52px',\n    radius: '8px (radius-8)',\n    fontSize: '15px',\n    pubClass: 'stn-dropdown xl',\n    typicalWidth: 'width 프리셋 · 기본 180px · fullWidth=100%',\n    usedIn: 'CCTV 헤더 검색 · 대형 대시보드 메뉴 (기존 prominent 통합)',\n  },\n] as const\n\nexport const STN_DROPDOWN_INTRO =\n  'Infomap **input** 크롬 + `.stn-dropdown` 계약입니다. **Light** (`40000042:186901`) — white · gray-200 · gray-600. **Dark** (modal `40000040:75056`) — TextField와 동일 `--stn-input-*`. Chevron: Figma `40000040:101798` `icon/line/arrow-right` 12px (`/@assets/svg/system/line/arrow-right.svg` · rotate 90°). React 표준 **`StnDropdown` menu** — sm/md/lg(24·32·40px) · width 프리셋/fullWidth.'\n\nexport const STN_DROPDOWN_INVENTORY: readonly {\n  id: string\n  mode: StnDropdownMode\n  size: StnDropdownSize\n  pubClass: string\n  height: string\n  typicalWidth: string\n  usedIn: string\n  exampleHtml: string\n}[] = [\n  {\n    id: 'native-search-md',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--size-md',\n    height: '32px',\n    typicalWidth: '130px (.search_area) · 기본 180px',\n    usedIn: '검색영역 — interface_list, device_detail',\n    exampleHtml: 'ip_mpls/interface_list.html',\n  },\n  {\n    id: 'native-form-sm',\n    mode: 'native',\n    size: 'sm',\n    pubClass: 'stn-dropdown stn-dropdown--size-sm',\n    height: '24px',\n    typicalWidth: '100% (.w100p) · 60–100px 인라인',\n    usedIn: '등록/상세 폼, IP-MPLS 테이블 셀',\n    exampleHtml: 'ip_mpls/interface_regist.html',\n  },\n  {\n    id: 'native-wrapper',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected',\n    height: '32px',\n    typicalWidth: '130px',\n    usedIn: '처리상태 등 — wrapper 안에 select',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-search-field',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown > select.selected.select_search',\n    height: '32px',\n    typicalWidth: 'auto',\n    usedIn: '검색분야 선택 + 텍스트 input 조합',\n    exampleHtml: 'dev_version/access_log.html',\n  },\n  {\n    id: 'menu-cctv-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-dropdown--prominent · .selected · .select_option',\n    height: '52px (prominent)',\n    typicalWidth: '110px (cctv-header) · 200px (simple_board)',\n    usedIn: 'CCTV 헤더 검색 — React `StnDropdownMenu`',\n    exampleHtml: 'koscom/honeycomb.html',\n  },\n  {\n    id: 'menu-board-prominent',\n    mode: 'menu',\n    size: 'md',\n    pubClass: 'simple_board_area .search_area .stn-dropdown.stn-dropdown--prominent',\n    height: '52px (prominent)',\n    typicalWidth: '200px',\n    usedIn: '간편 게시판 검색 — `StnDropdownMenu`',\n    exampleHtml: 'basic/simple_dashboard.html',\n  },\n  {\n    id: 'native-page-size',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown stn-table__page-size',\n    height: '32px',\n    typicalWidth: 'min 72px',\n    usedIn: '테이블 footer 페이지 크기',\n    exampleHtml: 'dev_version/device_detail.html',\n  },\n  {\n    id: 'native-server-filter',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown server_filter',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '프로세스 팝업 검색',\n    exampleHtml: 'dev_version/process (pop)',\n  },\n  {\n    id: 'native-network-area',\n    mode: 'native',\n    size: 'md',\n    pubClass: 'stn-dropdown network_area_box',\n    height: '32px',\n    typicalWidth: 'default',\n    usedIn: '토폴로지·망영역 선택',\n    exampleHtml: 'config topology screens',\n  },\n] as const\n\nexport const STN_DROPDOWN_HTML_COUNTS = {\n  nativeSelectBoxFiles: 56,\n  customMenuFiles: 12,\n  smallTysFiles: 17,\n  wrapperSelectFiles: 13,\n} as const\n\nexport const STN_DROPDOWN_USAGE = `import { StnDropdown } from '@stn-uiux/pub-ui-react'\n\n// size = 높이 · width = 별도 (80·100·140·180·200 · fullWidth)\n<StnDropdown size=\"sm\" width={100} options={gradeOptions} value={grade} onChange={setGrade} />\n<StnDropdown size=\"md\" width={180} options={shutdownOptions} value={shutdown} onChange={setShutdown} />\n<StnDropdown size=\"lg\" fullWidth options={statusOptions} value={status} onChange={setStatus} />`\n\nexport const STN_DROPDOWN_HTML = `<!-- StnDropdown · 커스텀 드롭다운 -->\n<div class=\"stn-dropdown md\">\n  <div class=\"selected\">선택값</div>\n  <ul class=\"select_option\">\n    <li>옵션 1</li>\n  </ul>\n</div>`\n\nexport const STN_DROPDOWN_MENU_INTRO =\n  '검색줄·대시보드용 **두꺼운 커스텀 메뉴**(52px, radius 8px). Pub `cctv-header` / `simple_board_area`와 동일 계열입니다. React는 `StnDropdownMenu`(`stn-dropdown--prominent`)를 쓰고, 일반 드롭다운 sm/md/lg는 `StnDropdown`입니다.'\n\nexport const STN_DROPDOWN_MENU_USAGE = `import { StnDropdownMenu } from '@stn-uiux/pub-ui-react'\n\n<StnDropdownMenu\n  width={110}\n  options={[\n    { value: 'all', label: '전체' },\n    { value: 'group', label: '그룹명' },\n    { value: 'device', label: '장비명' },\n  ]}\n  value={field}\n  onChange={setField}\n  aria-label=\"검색 필드\"\n/>`\n"],"mappings":"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","names":[]}

package/dist/chunk-OGCKPHGD.js

@@ -1,9 +0,0 @@
-// src/data/stnPackageVersion.ts
-var STN_UI_VERSION = "0.1.67";
-var STN_UI_VERSION_LABEL = "v0.1.67";
-
-export {
-  STN_UI_VERSION,
-  STN_UI_VERSION_LABEL
-};
-//# sourceMappingURL=chunk-OGCKPHGD.js.map

package/dist/chunk-OGCKPHGD.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.67'\nexport const STN_UI_VERSION_LABEL = 'v0.1.67'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}

package/dist/chunk-XBFXX3D6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnLayer0BackgroundAssets.ts"],"sourcesContent":["/**\n * L0 preset images — Hosted on STN Official Vercel CDN for zero-setup & instant loading.\n */\nexport const STN_CDN_ASSET_BASE = 'https://stn-design.vercel.app/images/layer0'\n\nexport const STN_LAYER0_BACKGROUND_DEMO_IMAGES = {\n  dashboard: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardLight: `${STN_CDN_ASSET_BASE}/dashboard-light.png`,\n  dashboardDark: `${STN_CDN_ASSET_BASE}/dashboard-dark.png`,\n  showroomA: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomALight: `${STN_CDN_ASSET_BASE}/showroom-a-light.png`,\n  showroomADark: `${STN_CDN_ASSET_BASE}/showroom-a-dark.png`,\n  showroomB: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBLight: `${STN_CDN_ASSET_BASE}/showroom-b-light.png`,\n  showroomBDark: `${STN_CDN_ASSET_BASE}/showroom-b-dark.png`,\n  mapLight: `${STN_CDN_ASSET_BASE}/map-light.png`,\n  mapDark: `${STN_CDN_ASSET_BASE}/map-dark.png`,\n  login: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginLight: `${STN_CDN_ASSET_BASE}/login-light.png`,\n  loginDark: `${STN_CDN_ASSET_BASE}/login-dark.png`,\n} as const\n\n/** Pub CSS @assets 경로 — HTML·vanilla 소비자용 */\nexport const STN_LAYER0_BACKGROUND_ASSET_PATHS = {\n  dashboard: '@assets/images/layer0/dashboard-light.png',\n  dashboardLight: '@assets/images/layer0/dashboard-light.png',\n  dashboardDark: '@assets/images/layer0/dashboard-dark.png',\n  showroomA: '@assets/images/layer0/showroom-a-light.png',\n  showroomALight: '@assets/images/layer0/showroom-a-light.png',\n  showroomADark: '@assets/images/layer0/showroom-a-dark.png',\n  showroomB: '@assets/images/layer0/showroom-b-light.png',\n  showroomBLight: '@assets/images/layer0/showroom-b-light.png',\n  showroomBDark: '@assets/images/layer0/showroom-b-dark.png',\n  mapLight: '@assets/images/layer0/map-light.png',\n  mapDark: '@assets/images/layer0/map-dark.png',\n  login: '@assets/images/layer0/login-light.png',\n  loginLight: '@assets/images/layer0/login-light.png',\n  loginDark: '@assets/images/layer0/login-dark.png',\n} as const\n"],"mappings":";AAGO,IAAM,qBAAqB;AAE3B,IAAM,oCAAoC;AAAA,EAC/C,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,WAAW,GAAG,kBAAkB;AAAA,EAChC,gBAAgB,GAAG,kBAAkB;AAAA,EACrC,eAAe,GAAG,kBAAkB;AAAA,EACpC,UAAU,GAAG,kBAAkB;AAAA,EAC/B,SAAS,GAAG,kBAAkB;AAAA,EAC9B,OAAO,GAAG,kBAAkB;AAAA,EAC5B,YAAY,GAAG,kBAAkB;AAAA,EACjC,WAAW,GAAG,kBAAkB;AAClC;AAGO,IAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,eAAe;AAAA,EACf,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AACb;","names":[]}