From de7ab9b7e302ef6b73e28616df7981ae21179242 Mon Sep 17 00:00:00 2001
From: gbpark <puget159@gmail.com>
Date: Thu, 16 Apr 2026 00:32:19 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A4=91=EA=B0=84=EC=84=B8=EC=9D=B4=EB=B8=8C?=
 =?UTF-8?q?=20-=20=EB=A9=94=EB=89=B4=EC=88=98=EC=A0=95=20-=20INVYONE=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=9C=EB=94=94=EC=98=A4=20=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/erp/controller/AdminController.java   |   21 +-
 .../java/com/erp/service/AdminService.java    |   24 +
 .../src/main/resources/application.yml        |    2 +-
 .../src/main/resources/mapper/admin.xml       |   11 +-
 docker/dev/backend-spring.Dockerfile          |    7 +-
 frontend/app/(main)/admin/builder/page.tsx    |  336 ++-
 frontend/app/(main)/admin/menu/page.tsx       | 1471 ++++---------
 .../admin/menu/MenuActivityPanel.tsx          |   65 +
 .../admin/menu/MenuOverviewPanel.tsx          |   97 +
 .../components/admin/menu/MenuScopePanel.tsx  |   67 +
 .../admin/menu/MenuSettingsPanel.tsx          |  282 +++
 .../components/admin/menu/MenuTreePanel.tsx   |  352 +++
 frontend/components/layout/AppLayout.tsx      |    6 +-
 .../screen/InteractiveScreenViewer.tsx        |    2 +-
 frontend/components/screen/ScreenDesigner.tsx |  336 +--
 frontend/components/screen/ViewTabBar.tsx     |   57 +
 .../screen/panels/ComponentsPanel.tsx         |  397 ++--
 .../components/screen/toolbar/SlimToolbar.tsx |  573 ++---
 .../V2ApprovalStepConfigPanel.tsx             |    2 +-
 .../V2ItemRoutingConfigPanel.tsx              |    4 +-
 .../V2ProcessWorkStandardConfigPanel.tsx      |    4 +-
 .../V2RackStructureConfigPanel.tsx            |    2 +-
 .../V2TimelineSchedulerConfigPanel.tsx        |    4 +-
 frontend/contexts/MenuContext.tsx             |    5 +-
 .../lib/registry/DynamicComponentRenderer.tsx |   32 +
 .../components/button/ButtonConfigPanel.tsx   |   21 +
 .../lib/registry/components/button/index.ts   |    2 +-
 .../registry/components/common/IconPicker.tsx |  119 +
 .../registry/components/container/index.ts    |    4 +-
 .../flow-widget/FlowWidgetRenderer.tsx        |    4 +-
 .../{ => domain}/flow-widget/index.ts         |    0
 .../{ => domain}/map/MapComponent.tsx         |    0
 .../{ => domain}/map/MapConfigPanel.tsx       |    0
 .../{ => domain}/map/MapPreviewComponent.tsx  |    0
 .../{ => domain}/map/MapRenderer.tsx          |    2 +-
 .../components/{ => domain}/map/index.ts      |    0
 .../ApprovalStepComponent.tsx                 |    0
 .../ApprovalStepConfigPanel.tsx               |    0
 .../v2-approval-step/ApprovalStepRenderer.tsx |    2 +-
 .../{ => domain}/v2-approval-step/index.ts    |    4 +-
 .../{ => domain}/v2-approval-step/types.ts    |    0
 .../BomItemEditorComponent.tsx                |    0
 .../BomItemEditorRenderer.tsx                 |    2 +-
 .../{ => domain}/v2-bom-item-editor/index.ts  |    2 +-
 .../v2-bom-tree/BomDetailEditModal.tsx        |    0
 .../v2-bom-tree/BomExcelUploadModal.tsx       |    0
 .../v2-bom-tree/BomHistoryModal.tsx           |    0
 .../v2-bom-tree/BomTreeComponent.tsx          |    0
 .../v2-bom-tree/BomTreeRenderer.tsx           |    2 +-
 .../v2-bom-tree/BomVersionModal.tsx           |    0
 .../{ => domain}/v2-bom-tree/index.ts         |    2 +-
 .../v2-item-routing/ItemRoutingComponent.tsx  |    0
 .../ItemRoutingConfigPanel.tsx                |    0
 .../v2-item-routing/ItemRoutingRenderer.tsx   |    2 +-
 .../{ => domain}/v2-item-routing/config.ts    |    0
 .../v2-item-routing/hooks/useItemRouting.ts   |    0
 .../{ => domain}/v2-item-routing/index.ts     |    4 +-
 .../{ => domain}/v2-item-routing/types.ts     |    0
 .../LocationSwapSelectorComponent.tsx         |    0
 .../LocationSwapSelectorConfigPanel.tsx       |    0
 .../LocationSwapSelectorRenderer.tsx          |    2 +-
 .../v2-location-swap-selector/index.ts        |    2 +-
 .../ProcessWorkStandardComponent.tsx          |    0
 .../ProcessWorkStandardConfigPanel.tsx        |    0
 .../ProcessWorkStandardRenderer.tsx           |    2 +-
 .../components/DetailFormModal.tsx            |    0
 .../components/InspectionStandardLookup.tsx   |    0
 .../components/ItemProcessSelector.tsx        |    0
 .../components/WorkItemAddModal.tsx           |    0
 .../components/WorkItemCard.tsx               |    0
 .../components/WorkItemDetailList.tsx         |    0
 .../components/WorkPhaseSection.tsx           |    0
 .../v2-process-work-standard/config.ts        |    0
 .../hooks/useProcessWorkStandard.ts           |    0
 .../v2-process-work-standard/index.ts         |    4 +-
 .../v2-process-work-standard/types.ts         |    0
 .../v2-rack-structure/FormatSegmentEditor.tsx |    0
 .../{ => domain}/v2-rack-structure/README.md  |    0
 .../RackStructureComponent.tsx                |    0
 .../RackStructureConfigPanel.tsx              |    0
 .../RackStructureRenderer.tsx                 |    2 +-
 .../{ => domain}/v2-rack-structure/config.ts  |    0
 .../{ => domain}/v2-rack-structure/index.ts   |    4 +-
 .../{ => domain}/v2-rack-structure/types.ts   |    0
 .../ShippingPlanEditorComponent.tsx           |    0
 .../ShippingPlanEditorConfigPanel.tsx         |    0
 .../ShippingPlanEditorRenderer.tsx            |    2 +-
 .../v2-shipping-plan-editor/index.ts          |    4 +-
 .../v2-shipping-plan-editor/types.ts          |    0
 .../v2-timeline-scheduler/README.md           |    0
 .../TimelineSchedulerComponent.tsx            |    0
 .../TimelineSchedulerConfigPanel.tsx          |    0
 .../TimelineSchedulerRenderer.tsx             |    2 +-
 .../components/ItemTimelineCard.tsx           |    0
 .../components/ResourceRow.tsx                |    0
 .../components/ScheduleBar.tsx                |    0
 .../components/SchedulePreviewDialog.tsx      |    0
 .../components/TimelineHeader.tsx             |    0
 .../components/TimelineLegend.tsx             |    0
 .../v2-timeline-scheduler/components/index.ts |    0
 .../v2-timeline-scheduler/config.ts           |    0
 .../hooks/useTimelineData.ts                  |    0
 .../v2-timeline-scheduler/index.ts            |    4 +-
 .../v2-timeline-scheduler/types.ts            |    0
 .../utils/conflictDetection.ts                |    0
 frontend/lib/registry/components/index.ts     |   22 +-
 .../lib/registry/components/input/index.ts    |    4 +-
 .../components/search/SearchConfigPanel.tsx   |  179 +-
 .../lib/registry/components/search/index.ts   |    4 +-
 .../components/stats/StatsConfigPanel.tsx     |   98 +-
 .../lib/registry/components/stats/index.ts    |    4 +-
 .../components/table/TableComponent.tsx       |  637 +++---
 .../components/table/TableConfigPanel.tsx     |  223 +-
 .../lib/registry/components/table/types.ts    |    2 +
 .../registry/components/table/useTableData.ts |  150 ++
 .../components/v2-aggregation-widget/index.ts |    1 +
 .../components/v2-card-display/index.ts       |    1 +
 .../components/v2-category-manager/index.ts   |    1 +
 .../lib/registry/components/v2-date/index.ts  |    1 +
 .../components/v2-file-upload/index.ts        |    1 +
 .../lib/registry/components/v2-input/index.ts |    1 +
 .../lib/registry/components/v2-media/index.ts |    1 +
 .../components/v2-numbering-rule/index.ts     |    1 +
 .../components/v2-repeat-container/index.ts   |    1 +
 .../components/v2-section-card/index.ts       |    1 +
 .../components/v2-section-paper/index.ts      |    1 +
 .../registry/components/v2-select/index.ts    |    1 +
 .../SplitPanelLayoutComponent.tsx             |    2 +-
 .../components/v2-split-panel-layout/index.ts |    1 +
 .../components/v2-status-count/index.ts       |    1 +
 .../components/v2-table-grouped/index.ts      |    1 +
 .../components/v2-table-list/index.ts         |    1 +
 .../lib/utils/getComponentConfigPanel.tsx     |   70 +-
 frontend/package-lock.json                    |  381 +++-
 frontend/package.json                         |    3 +
 frontend/styles/builder-ide.css               | 1117 +++++++++-
 frontend/styles/v5-layout.css                 |  472 +++-
 .../2026-04-08-invyone-dev-session-log.md     |  148 --
 .../gbpark/2026-04-09-builder-session-log.md  |  179 --
 .../2026-04-10-card-engine-phase1-log.md      |  323 ---
 .../2026-04-10-phase1-implementation-log.md   |  298 ---
 .../2026-04-10-phase2-implementation-log.md   |  305 ---
 .../2026-04-10-phase3-implementation-log.md   |  480 -----
 .../2026-04-10-phase4-implementation-log.md   |  297 ---
 .../gbpark/2026-04-10-phase5-control-mode.md  |  357 ---
 .../2026-04-10-phase5-implementation-log.md   |  368 ----
 .../2026-04-10-template-model-redesign.md     | 1913 -----------------
 ...2026-04-10-template-redesign-phase1-log.md |  527 -----
 .../2026-04-11-card-engine-phase2.1-log.md    |  273 ---
 ...6-04-11-card-engine-phase2.1-rework-log.md |  256 ---
 .../2026-04-13-builder-panel-mockup.html      |  402 ++++
 .../2026-04-14-builder-header-mockup.html     |  380 ++++
 .../2026-04-15-menu-mng-v5-mockup-b.html      |  677 ++++++
 .../2026-04-15-menu-mng-v5-mockup-c.html      |  990 +++++++++
 .../gbpark/2026-04-15-menu-mng-v5-mockup.html |  588 +++++
 155 files changed, 8227 insertions(+), 8277 deletions(-)
 create mode 100644 frontend/components/admin/menu/MenuActivityPanel.tsx
 create mode 100644 frontend/components/admin/menu/MenuOverviewPanel.tsx
 create mode 100644 frontend/components/admin/menu/MenuScopePanel.tsx
 create mode 100644 frontend/components/admin/menu/MenuSettingsPanel.tsx
 create mode 100644 frontend/components/admin/menu/MenuTreePanel.tsx
 create mode 100644 frontend/components/screen/ViewTabBar.tsx
 create mode 100644 frontend/lib/registry/components/common/IconPicker.tsx
 rename frontend/lib/registry/components/{ => domain}/flow-widget/FlowWidgetRenderer.tsx (86%)
 rename frontend/lib/registry/components/{ => domain}/flow-widget/index.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/map/MapComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/map/MapConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/map/MapPreviewComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/map/MapRenderer.tsx (96%)
 rename frontend/lib/registry/components/{ => domain}/map/index.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-approval-step/ApprovalStepComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-approval-step/ApprovalStepConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-approval-step/ApprovalStepRenderer.tsx (85%)
 rename frontend/lib/registry/components/{ => domain}/v2-approval-step/index.ts (92%)
 rename frontend/lib/registry/components/{ => domain}/v2-approval-step/types.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-item-editor/BomItemEditorComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-item-editor/BomItemEditorRenderer.tsx (85%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-item-editor/index.ts (91%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-tree/BomDetailEditModal.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-tree/BomExcelUploadModal.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-tree/BomHistoryModal.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-tree/BomTreeComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-tree/BomTreeRenderer.tsx (86%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-tree/BomVersionModal.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-bom-tree/index.ts (89%)
 rename frontend/lib/registry/components/{ => domain}/v2-item-routing/ItemRoutingComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-item-routing/ItemRoutingConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-item-routing/ItemRoutingRenderer.tsx (90%)
 rename frontend/lib/registry/components/{ => domain}/v2-item-routing/config.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-item-routing/hooks/useItemRouting.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-item-routing/index.ts (94%)
 rename frontend/lib/registry/components/{ => domain}/v2-item-routing/types.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-location-swap-selector/LocationSwapSelectorComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-location-swap-selector/LocationSwapSelectorRenderer.tsx (91%)
 rename frontend/lib/registry/components/{ => domain}/v2-location-swap-selector/index.ts (96%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/ProcessWorkStandardComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/ProcessWorkStandardRenderer.tsx (90%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/components/DetailFormModal.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/components/InspectionStandardLookup.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/components/ItemProcessSelector.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/components/WorkItemAddModal.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/components/WorkItemCard.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/components/WorkItemDetailList.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/components/WorkPhaseSection.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/config.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/hooks/useProcessWorkStandard.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/index.ts (94%)
 rename frontend/lib/registry/components/{ => domain}/v2-process-work-standard/types.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/FormatSegmentEditor.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/README.md (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/RackStructureComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/RackStructureConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/RackStructureRenderer.tsx (95%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/config.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/index.ts (95%)
 rename frontend/lib/registry/components/{ => domain}/v2-rack-structure/types.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-shipping-plan-editor/ShippingPlanEditorComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-shipping-plan-editor/ShippingPlanEditorConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx (83%)
 rename frontend/lib/registry/components/{ => domain}/v2-shipping-plan-editor/index.ts (88%)
 rename frontend/lib/registry/components/{ => domain}/v2-shipping-plan-editor/types.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/README.md (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/TimelineSchedulerComponent.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx (94%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/components/ItemTimelineCard.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/components/ResourceRow.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/components/ScheduleBar.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/components/SchedulePreviewDialog.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/components/TimelineHeader.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/components/TimelineLegend.tsx (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/components/index.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/config.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/hooks/useTimelineData.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/index.ts (92%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/types.ts (100%)
 rename frontend/lib/registry/components/{ => domain}/v2-timeline-scheduler/utils/conflictDetection.ts (100%)
 create mode 100644 frontend/lib/registry/components/table/useTableData.ts
 delete mode 100644 notes/gbpark/2026-04-08-invyone-dev-session-log.md
 delete mode 100644 notes/gbpark/2026-04-09-builder-session-log.md
 delete mode 100644 notes/gbpark/2026-04-10-card-engine-phase1-log.md
 delete mode 100644 notes/gbpark/2026-04-10-phase1-implementation-log.md
 delete mode 100644 notes/gbpark/2026-04-10-phase2-implementation-log.md
 delete mode 100644 notes/gbpark/2026-04-10-phase3-implementation-log.md
 delete mode 100644 notes/gbpark/2026-04-10-phase4-implementation-log.md
 delete mode 100644 notes/gbpark/2026-04-10-phase5-control-mode.md
 delete mode 100644 notes/gbpark/2026-04-10-phase5-implementation-log.md
 delete mode 100644 notes/gbpark/2026-04-10-template-model-redesign.md
 delete mode 100644 notes/gbpark/2026-04-10-template-redesign-phase1-log.md
 delete mode 100644 notes/gbpark/2026-04-11-card-engine-phase2.1-log.md
 delete mode 100644 notes/gbpark/2026-04-11-card-engine-phase2.1-rework-log.md
 create mode 100644 notes/gbpark/2026-04-13-builder-panel-mockup.html
 create mode 100644 notes/gbpark/2026-04-14-builder-header-mockup.html
 create mode 100644 notes/gbpark/2026-04-15-menu-mng-v5-mockup-b.html
 create mode 100644 notes/gbpark/2026-04-15-menu-mng-v5-mockup-c.html
 create mode 100644 notes/gbpark/2026-04-15-menu-mng-v5-mockup.html

diff --git a/backend-spring/src/main/java/com/erp/controller/AdminController.java b/backend-spring/src/main/java/com/erp/controller/AdminController.java
index 4413e94d..978ad236 100644
--- a/backend-spring/src/main/java/com/erp/controller/AdminController.java
+++ b/backend-spring/src/main/java/com/erp/controller/AdminController.java
@@ -131,13 +131,24 @@ public class AdminController {
      * 메뉴 일괄 삭제
      */
     @DeleteMapping("/menus/batch")
-    public ResponseEntity<ApiResponse<Void>> deleteMenusBatch(@RequestBody Map<String, Object> body) {
-        @SuppressWarnings("unchecked")
-        List<String> menuIds = (List<String>) body.get("menu_ids");
+    public ResponseEntity<ApiResponse<Map<String, Object>>> deleteMenusBatch(@RequestBody List<String> menuIds) {
+        int deletedCount = 0;
+        int failedCount = 0;
         if (menuIds != null) {
-            menuIds.forEach(adminService::deleteMenu);
+            for (String menuId : menuIds) {
+                try {
+                    adminService.deleteMenu(menuId);
+                    deletedCount++;
+                } catch (Exception e) {
+                    failedCount++;
+                    log.warn("메뉴 삭제 실패 menuId={} : {}", menuId, e.getMessage());
+                }
+            }
         }
-        return ResponseEntity.ok(ApiResponse.success(null, "메뉴 일괄 삭제 성공"));
+        Map<String, Object> result = new HashMap<>();
+        result.put("deletedCount", deletedCount);
+        result.put("failedCount", failedCount);
+        return ResponseEntity.ok(ApiResponse.success(result, "메뉴 일괄 삭제 성공"));
     }
 
     // ── 사용자 관리 ────────────────────────────────────────────────────────
diff --git a/backend-spring/src/main/java/com/erp/service/AdminService.java b/backend-spring/src/main/java/com/erp/service/AdminService.java
index 803c15f3..d114c911 100644
--- a/backend-spring/src/main/java/com/erp/service/AdminService.java
+++ b/backend-spring/src/main/java/com/erp/service/AdminService.java
@@ -80,6 +80,8 @@ public class AdminService extends BaseService {
         long objid = System.currentTimeMillis();
         params.put("objid", objid);
 
+        normalizeMenuParams(params);
+
         // Map frontend field names to DB column names
         if (params.get("menu_name_kor") == null && params.get("menu_name") != null) {
             params.put("menu_name_kor", params.get("menu_name"));
@@ -91,10 +93,32 @@ public class AdminService extends BaseService {
 
     public Map<String, Object> updateMenu(String menuId, Map<String, Object> params) {
         params.put("menu_id", menuId);
+        normalizeMenuParams(params);
         sqlSession.update("admin.updateMenu", params);
         return params;
     }
 
+    // 프론트가 보내는 camelCase 키를 XML이 기대하는 snake_case 키로 복사한다.
+    // (XML #{menu_name_kor} 등 snake_case 파라미터로 바인딩하기 위함)
+    private void normalizeMenuParams(Map<String, Object> params) {
+        copyIfAbsent(params, "menuNameKor", "menu_name_kor");
+        copyIfAbsent(params, "menuUrl", "menu_url");
+        copyIfAbsent(params, "menuDesc", "menu_desc");
+        copyIfAbsent(params, "parentObjId", "parent_obj_id");
+        copyIfAbsent(params, "langKey", "lang_key");
+        copyIfAbsent(params, "langKeyDesc", "lang_key_desc");
+        copyIfAbsent(params, "menuIcon", "menu_icon");
+        copyIfAbsent(params, "screenCode", "screen_code");
+        copyIfAbsent(params, "menuType", "menu_type");
+        copyIfAbsent(params, "companyCode", "company_code");
+    }
+
+    private void copyIfAbsent(Map<String, Object> params, String camelKey, String snakeKey) {
+        if (params.get(snakeKey) == null && params.get(camelKey) != null) {
+            params.put(snakeKey, params.get(camelKey));
+        }
+    }
+
     public void deleteMenu(String menuId) {
         Map<String, Object> params = new HashMap<>();
         params.put("menu_id", menuId);
diff --git a/backend-spring/src/main/resources/application.yml b/backend-spring/src/main/resources/application.yml
index d58fdd04..85101ee2 100644
--- a/backend-spring/src/main/resources/application.yml
+++ b/backend-spring/src/main/resources/application.yml
@@ -14,7 +14,7 @@ spring:
   jackson:
     default-property-inclusion: always
   datasource:
-    url: jdbc:postgresql://211.115.91.141:11134/test_dev
+    url: jdbc:postgresql://183.99.177.40:5432/vexplor
     username: postgres
     password: "vexplor0909!!"
     driver-class-name: org.postgresql.Driver
diff --git a/backend-spring/src/main/resources/mapper/admin.xml b/backend-spring/src/main/resources/mapper/admin.xml
index a58d7ca5..d03428b5 100644
--- a/backend-spring/src/main/resources/mapper/admin.xml
+++ b/backend-spring/src/main/resources/mapper/admin.xml
@@ -313,7 +313,7 @@
     FROM MENU_INFO M
     LEFT JOIN COMPANY_MNG C
         ON M.COMPANY_CODE = C.COMPANY_CODE
-    WHERE M.OBJID = #{menu_id}::NUMERIC
+    WHERE M.OBJID = #{menu_id}
   </select>
 
   <!-- 메뉴 등록 -->
@@ -363,20 +363,23 @@
         , LANG_KEY = #{lang_key}
         , LANG_KEY_DESC = #{lang_key_desc}
         , MENU_ICON = #{menu_icon}
-    WHERE OBJID = #{menu_id}::NUMERIC
+        <if test="parent_obj_id != null">, PARENT_OBJ_ID = #{parent_obj_id}</if>
+        <if test="menu_type != null">, MENU_TYPE = #{menu_type}</if>
+        <if test="company_code != null">, COMPANY_CODE = #{company_code}</if>
+    WHERE OBJID = #{menu_id}
   </update>
 
   <!-- 메뉴 삭제 -->
   <delete id="deleteMenu" parameterType="map">
     DELETE FROM MENU_INFO
-    WHERE OBJID = #{menu_id}::NUMERIC
+    WHERE OBJID = #{menu_id}
   </delete>
 
   <!-- 메뉴 상태 토글 -->
   <update id="updateMenuStatus" parameterType="map">
     UPDATE MENU_INFO
     SET STATUS = #{status}
-    WHERE OBJID = #{menu_id}::NUMERIC
+    WHERE OBJID = #{menu_id}
   </update>
 
   <!-- ================================================================
diff --git a/docker/dev/backend-spring.Dockerfile b/docker/dev/backend-spring.Dockerfile
index dd94a5b1..c54d3962 100644
--- a/docker/dev/backend-spring.Dockerfile
+++ b/docker/dev/backend-spring.Dockerfile
@@ -18,5 +18,8 @@ RUN ./gradlew dependencies --no-daemon || true
 
 EXPOSE 8081
 
-# 개발 서버 시작 (spring-boot-devtools 활용)
-CMD ["./gradlew", "bootRun", "--no-daemon"]
+# 개발 서버 시작 (spring-boot-devtools + continuous classes 리빌드)
+# 백그라운드: `./gradlew classes -t` 가 .java 변경 감지해 .class 재컴파일
+# 포그라운드: `./gradlew bootRun` 이 앱 실행, DevTools 가 build/classes 변경 감지해 자동 리로드
+# 주의: --continuous 는 gradle daemon 필요 → --no-daemon 제거
+CMD ["sh", "-c", "./gradlew classes -t & exec ./gradlew bootRun"]
diff --git a/frontend/app/(main)/admin/builder/page.tsx b/frontend/app/(main)/admin/builder/page.tsx
index 57d065e9..60462d77 100644
--- a/frontend/app/(main)/admin/builder/page.tsx
+++ b/frontend/app/(main)/admin/builder/page.tsx
@@ -1,90 +1,328 @@
 "use client";
 
-// VEX 화면 디자이너 직접 연결. /admin/builder 접속 시 곧바로 ScreenDesigner 를
-// 전체 화면으로 표시. URL 쿼리 `?id=xxx` 로 특정 화면 지정 가능, 없으면 첫 번째
-// 화면 자동 선택.
-// Phase 2.1 의 TemplateBuilder 는 카드 내부 모델 시도 실패 후 포기 (2026-04-11).
-import { Suspense, useState, useEffect } from "react";
+// INVYONE 빌더 진입 화면
+// - 템플릿 목록 + 새 템플릿 생성
+// - URL 에 ?id=xxx 가 있으면 빌더로 바로 진입
+// - 없으면 템플릿 선택/생성 UI 표시
+import { Suspense, useState, useEffect, useCallback } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
 import ScreenDesigner from "@/components/screen/ScreenDesigner";
 import type { ScreenDefinition } from "@/types/screen";
 import { screenApi } from "@/lib/api/screen";
+import { useAuth } from "@/hooks/useAuth";
+import { Plus, LayoutTemplate, Search, FileText } from "lucide-react";
+import { Input } from "@/components/ui/input";
+
+function TemplateGallery({
+  templates,
+  onSelect,
+  onCreate,
+  loading,
+}: {
+  templates: ScreenDefinition[];
+  onSelect: (t: ScreenDefinition) => void;
+  onCreate: () => void;
+  loading: boolean;
+}) {
+  const [query, setQuery] = useState("");
+  const filtered = templates.filter((t) => {
+    const q = query.toLowerCase();
+    return (
+      !q ||
+      (t.screen_name || "").toLowerCase().includes(q) ||
+      (t.screen_code || "").toLowerCase().includes(q)
+    );
+  });
+
+  return (
+    <div className="ide-builder h-[calc(100vh-4rem)] w-full overflow-y-auto bg-background px-8 py-10">
+      <div className="mx-auto max-w-6xl">
+        {/* 헤더 */}
+        <div className="mb-8 flex items-end justify-between">
+          <div>
+            <h1 className="mb-1 text-2xl font-bold text-foreground">템플릿</h1>
+            <p className="text-sm text-muted-foreground">
+              기존 템플릿을 열거나 새로 만들어보세요
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={onCreate}
+            className="flex items-center gap-1.5 rounded-md border border-primary/30 bg-primary/10 px-4 py-2 text-sm font-semibold text-primary transition-all hover:bg-primary/15 hover:border-primary/50"
+          >
+            <Plus size={14} />
+            새 템플릿
+          </button>
+        </div>
+
+        {/* 검색 */}
+        <div className="mb-6 relative max-w-md">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={14} />
+          <Input
+            placeholder="템플릿 검색..."
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="pl-9 h-9"
+          />
+        </div>
+
+        {/* 로딩 */}
+        {loading && (
+          <div className="py-20 text-center text-sm text-muted-foreground">
+            불러오는 중...
+          </div>
+        )}
+
+        {/* 빈 상태 */}
+        {!loading && templates.length === 0 && (
+          <div className="py-20 text-center">
+            <LayoutTemplate className="mx-auto mb-4 text-muted-foreground/30" size={48} />
+            <p className="mb-2 text-sm font-medium text-foreground">
+              아직 템플릿이 없습니다
+            </p>
+            <p className="mb-4 text-xs text-muted-foreground">
+              첫 템플릿을 만들어보세요
+            </p>
+            <button
+              type="button"
+              onClick={onCreate}
+              className="rounded-md border border-primary/30 bg-primary/10 px-4 py-2 text-sm font-semibold text-primary hover:bg-primary/15"
+            >
+              <Plus size={14} className="inline mr-1" />
+              새 템플릿 만들기
+            </button>
+          </div>
+        )}
+
+        {/* 템플릿 그리드 */}
+        {!loading && filtered.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+            {filtered.map((t) => (
+              <button
+                key={t.screen_id}
+                type="button"
+                onClick={() => onSelect(t)}
+                className="group flex flex-col items-start rounded-lg border border-border/40 bg-card p-4 text-left transition-all hover:border-primary/30 hover:shadow-md"
+              >
+                <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 text-primary">
+                  <FileText size={18} />
+                </div>
+                <h3 className="mb-1 text-sm font-semibold text-foreground line-clamp-1">
+                  {t.screen_name}
+                </h3>
+                {t.screen_code && (
+                  <p className="mb-2 font-mono text-[0.6rem] text-muted-foreground/60">
+                    {t.screen_code}
+                  </p>
+                )}
+                <p className="text-[0.62rem] text-muted-foreground line-clamp-2">
+                  {(t as any).description || "설명 없음"}
+                </p>
+              </button>
+            ))}
+          </div>
+        )}
+
+        {!loading && templates.length > 0 && filtered.length === 0 && (
+          <div className="py-12 text-center text-sm text-muted-foreground">
+            &ldquo;{query}&rdquo; 검색 결과가 없습니다
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CreateTemplateModal({
+  open,
+  onClose,
+  onCreate,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onCreate: (name: string) => Promise<void>;
+}) {
+  const [name, setName] = useState("");
+  const [creating, setCreating] = useState(false);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-2xl">
+        <h2 className="mb-1 text-lg font-bold text-foreground">새 템플릿</h2>
+        <p className="mb-4 text-xs text-muted-foreground">
+          템플릿 이름을 입력하세요. 나중에 각 컴포넌트에서 테이블을 선택합니다.
+        </p>
+        <Input
+          autoFocus
+          placeholder="예: 사원 관리"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && name.trim() && !creating) {
+              setCreating(true);
+              onCreate(name.trim()).finally(() => setCreating(false));
+            } else if (e.key === "Escape") {
+              onClose();
+            }
+          }}
+          className="mb-4 h-10"
+        />
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={creating}
+            className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-muted disabled:opacity-50"
+          >
+            취소
+          </button>
+          <button
+            type="button"
+            disabled={!name.trim() || creating}
+            onClick={async () => {
+              setCreating(true);
+              try {
+                await onCreate(name.trim());
+              } finally {
+                setCreating(false);
+              }
+            }}
+            className="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+          >
+            {creating ? "생성 중..." : "만들기"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
 
 function BuilderInner() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const screenIdParam = searchParams.get("id");
+  const { companyCode } = useAuth();
+
   const [selectedScreen, setSelectedScreen] = useState<ScreenDefinition | null>(null);
+  const [allTemplates, setAllTemplates] = useState<ScreenDefinition[]>([]);
   const [loading, setLoading] = useState(true);
   const [loadError, setLoadError] = useState<string | null>(null);
+  const [showCreate, setShowCreate] = useState(false);
 
+  const fetchTemplates = useCallback(async () => {
+    try {
+      setLoading(true);
+      setLoadError(null);
+      const result: any = await screenApi.getScreens({
+        page: 1,
+        size: 1000,
+        searchTerm: "",
+        excludePop: true,
+      });
+      const list: ScreenDefinition[] = result?.data ?? [];
+      setAllTemplates(list);
+      return list;
+    } catch (err: any) {
+      console.error("[BuilderPage] 템플릿 로드 실패:", err);
+      setLoadError(err?.message ?? "템플릿 로드 실패");
+      return [];
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // URL ?id=xxx 있으면 해당 템플릿 로드
   useEffect(() => {
-    let alive = true;
     (async () => {
-      try {
-        setLoading(true);
-        setLoadError(null);
-        const result: any = await screenApi.getScreens({
-          page: 1,
-          size: 1000,
-          searchTerm: "",
-          excludePop: true,
-        });
-        if (!alive) return;
-        const list: ScreenDefinition[] = result?.data ?? [];
-        let target: ScreenDefinition | null = null;
-        if (screenIdParam) {
-          const id = parseInt(screenIdParam, 10);
-          target = list.find((s: any) => s.screen_id === id) ?? null;
-        }
-        if (!target && list.length > 0) {
-          target = list[0];
-        }
-        setSelectedScreen(target);
-      } catch (err: any) {
-        console.error("[BuilderPage] 화면 로드 실패:", err);
-        if (alive) setLoadError(err?.message ?? "화면 로드 실패");
-      } finally {
-        if (alive) setLoading(false);
+      const list = await fetchTemplates();
+      if (screenIdParam) {
+        const id = parseInt(screenIdParam, 10);
+        const target = list.find((s: any) => s.screen_id === id);
+        if (target) setSelectedScreen(target);
       }
     })();
-    return () => {
-      alive = false;
-    };
-  }, [screenIdParam]);
+  }, [screenIdParam, fetchTemplates]);
 
-  if (loading) {
-    return (
-      <div className="flex h-screen items-center justify-center text-slate-500">
-        빌더 로딩 중...
-      </div>
-    );
-  }
+  const handleSelectTemplate = useCallback(
+    (t: ScreenDefinition) => {
+      setSelectedScreen(t);
+      router.replace(`/admin/builder?id=${t.screen_id}`);
+    },
+    [router],
+  );
 
+  const handleCreateTemplate = useCallback(
+    async (name: string) => {
+      try {
+        // 회사 코드 가져오기 (없으면 빈 문자열)
+        const code = companyCode || "DEFAULT";
+        // 템플릿 생성 — table_name은 빈 상태로 시작 (각 컴포넌트가 자기 테이블 선택)
+        const newScreen = await screenApi.createScreen({
+          screen_name: name,
+          table_name: "", // INVYONE: 컴포넌트별로 선택 (레거시 호환용 빈 값)
+          company_code: code as any,
+        } as any);
+        setShowCreate(false);
+        setSelectedScreen(newScreen);
+        router.replace(`/admin/builder?id=${newScreen.screen_id}`);
+      } catch (err: any) {
+        console.error("[BuilderPage] 템플릿 생성 실패:", err);
+        alert(`템플릿 생성 실패: ${err?.message ?? "알 수 없는 오류"}`);
+      }
+    },
+    [companyCode, router],
+  );
+
+  const handleBackToList = useCallback(() => {
+    setSelectedScreen(null);
+    router.replace("/admin/builder");
+    // 목록 새로고침
+    fetchTemplates();
+  }, [fetchTemplates, router]);
+
+  // 에러 상태
   if (loadError) {
     return (
       <div className="flex h-screen flex-col items-center justify-center gap-2 text-slate-500">
         <div className="text-sm">⚠ {loadError}</div>
         <button
           type="button"
-          onClick={() => router.push("/admin/screenMng/screenMngList")}
+          onClick={() => fetchTemplates()}
           className="rounded border border-slate-300 px-3 py-1 text-xs hover:bg-slate-100"
         >
-          화면 관리로 이동
+          다시 시도
         </button>
       </div>
     );
   }
 
-  // AppLayout 의 헤더/탭 아래 영역에만 배치. fixed 덮어쓰기 대신 일반 flow 로
-  // 헤더와 안 겹치게.
-  // ★ ide-builder 클래스: builder-ide.css 의 IDE 톤(HSL 오버라이드)을 이 스코프
-  //   안에서만 먹게 한다. ScreenDesigner 의 JSX 는 건드리지 않고 색만 바꿈.
+  // 템플릿 선택 안 되어 있으면 갤러리 표시
+  if (!selectedScreen) {
+    return (
+      <>
+        <TemplateGallery
+          templates={allTemplates}
+          onSelect={handleSelectTemplate}
+          onCreate={() => setShowCreate(true)}
+          loading={loading}
+        />
+        <CreateTemplateModal
+          open={showCreate}
+          onClose={() => setShowCreate(false)}
+          onCreate={handleCreateTemplate}
+        />
+      </>
+    );
+  }
+
+  // 템플릿 선택됨 → 빌더 표시
   return (
     <div className="ide-builder h-[calc(100vh-4rem)] w-full overflow-hidden bg-background">
       <ScreenDesigner
         selectedScreen={selectedScreen}
-        onBackToList={() => router.push("/admin/screenMng/screenMngList")}
+        onBackToList={handleBackToList}
         onScreenUpdate={(updatedFields) => {
           if (selectedScreen) {
             setSelectedScreen({ ...selectedScreen, ...updatedFields });
diff --git a/frontend/app/(main)/admin/menu/page.tsx b/frontend/app/(main)/admin/menu/page.tsx
index c09f4459..dc5bb15f 100644
--- a/frontend/app/(main)/admin/menu/page.tsx
+++ b/frontend/app/(main)/admin/menu/page.tsx
@@ -1,17 +1,14 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
 import { menuApi } from "@/lib/api/menu";
 import type { MenuItem } from "@/lib/api/menu";
-import { MenuTable } from "@/components/admin/MenuTable";
+import { useMenu } from "@/contexts/MenuContext";
+import { useAuth } from "@/hooks/useAuth";
+import { LoadingSpinner, LoadingOverlay } from "@/components/common/LoadingSpinner";
 import { MenuFormModal } from "@/components/admin/MenuFormModal";
 import { MenuCopyDialog } from "@/components/admin/MenuCopyDialog";
-import { Button } from "@/components/ui/button";
-import { LoadingSpinner, LoadingOverlay } from "@/components/common/LoadingSpinner";
-import { toast } from "sonner";
-import { Badge } from "@/components/ui/badge";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -22,851 +19,306 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { useMenu } from "@/contexts/MenuContext";
-import { useMenuManagementText, setTranslationCache, getMenuTextSync } from "@/lib/utils/multilang";
-import { useMultiLang } from "@/hooks/useMultiLang";
-import { apiClient } from "@/lib/api/client";
-import { useAuth } from "@/hooks/useAuth"; // useAuth 추가
-import { ScrollToTop } from "@/components/common/ScrollToTop";
 
-type MenuType = "admin" | "user";
+import { MenuScopePanel } from "@/components/admin/menu/MenuScopePanel";
+import { MenuTreePanel } from "@/components/admin/menu/MenuTreePanel";
+import { MenuOverviewPanel } from "@/components/admin/menu/MenuOverviewPanel";
+import { MenuSettingsPanel } from "@/components/admin/menu/MenuSettingsPanel";
+import { MenuActivityPanel } from "@/components/admin/menu/MenuActivityPanel";
+
+type Scope = "admin" | "user";
+type View = "overview" | "settings" | "activity";
 
 export default function MenuPage() {
   const { refreshMenus } = useMenu();
-  const { user } = useAuth(); // 현재 사용자 정보 가져오기
-  const [selectedMenuType, setSelectedMenuType] = useState<MenuType>("admin");
+  const { user } = useAuth();
+
+  const [scope, setScope] = useState<Scope>("admin");
+  const [adminMenus, setAdminMenus] = useState<MenuItem[]>([]);
+  const [userMenus, setUserMenus] = useState<MenuItem[]>([]);
+  const [selectedId, setSelectedId] = useState<string>("");
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [view, setView] = useState<View>("overview");
+  const [searchText, setSearchText] = useState("");
   const [loading, setLoading] = useState(false);
   const [deleting, setDeleting] = useState(false);
+
+  // 고급 편집 모달 (기존 MenuFormModal 재사용)
   const [formModalOpen, setFormModalOpen] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [copyDialogOpen, setCopyDialogOpen] = useState(false);
-  const [selectedMenuId, setSelectedMenuId] = useState<string>("");
-  const [selectedMenuName, setSelectedMenuName] = useState<string>("");
-  const [selectedMenus, setSelectedMenus] = useState<Set<string>>(new Set());
-  
-  // 메뉴 관리 화면용 로컬 상태 (모든 상태의 메뉴 표시)
-  const [localAdminMenus, setLocalAdminMenus] = useState<MenuItem[]>([]);
-  const [localUserMenus, setLocalUserMenus] = useState<MenuItem[]>([]);
-
-  // 다국어 텍스트 훅 사용
-  // getMenuText는 더 이상 사용하지 않음 - getUITextSync만 사용
-  const { userLang } = useMultiLang({ company_code: "*" });
-
-  // SUPER_ADMIN 여부 확인
-  const isSuperAdmin = user?.user_type === "SUPER_ADMIN";
-
-  // 다국어 텍스트 상태
-  const [uiTexts, setUiTexts] = useState<Record<string, string>>({});
-  const [uiTextsLoading, setUiTextsLoading] = useState(false);
-
-  // 회사 목록 상태
-  const [companies, setCompanies] = useState<Array<{ code: string; name: string }>>([]);
-  const [selectedCompany, setSelectedCompany] = useState("all");
-  const [searchText, setSearchText] = useState("");
-  const [expandedMenus, setExpandedMenus] = useState<Set<string>>(new Set());
-  const [companySearchText, setCompanySearchText] = useState("");
-  const [isCompanyDropdownOpen, setIsCompanyDropdownOpen] = useState(false);
-  const [formData, setFormData] = useState({
+  const [formModalData, setFormModalData] = useState({
     menuId: "",
-    parentId: "",
-    menu_type: "",
+    parentId: "0",
+    menu_type: "0",
     level: 0,
     parentCompanyCode: "",
   });
 
-  // 언어별 텍스트 매핑 테이블 제거 - DB에서 직접 가져옴
+  const [copyDialogOpen, setCopyDialogOpen] = useState(false);
+  const [copyTarget, setCopyTarget] = useState({ id: "", name: "" });
 
-  // 메뉴관리 페이지에서 사용할 다국어 키들 (실제 DB에 등록된 키들)
-  const MENU_MANAGEMENT_LANG_KEYS = [
-    // 페이지 제목 및 설명
-    "menu.management.title",
-    "menu.management.description",
-    "menu.type.title",
-    "menu.type.admin",
-    "menu.type.user",
-    "menu.management.admin",
-    "menu.management.user",
-    "menu.management.admin.description",
-    "menu.management.user.description",
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteTargetId, setDeleteTargetId] = useState("");
 
-    // 버튼
-    "button.add",
-    "button.add.top.level",
-    "button.add.sub",
-    "button.edit",
-    "button.delete",
-    "button.delete.selected",
-    "button.delete.selected.count",
-    "button.delete.processing",
-    "button.cancel",
-    "button.save",
-    "button.register",
-    "button.modify",
+  // Promise 기반 confirm 다이얼로그 (window.confirm 대체)
+  const [confirmState, setConfirmState] = useState<{
+    open: boolean;
+    title: string;
+    description: string;
+    okLabel: string;
+    cancelLabel: string;
+    resolver: ((v: boolean) => void) | null;
+  }>({
+    open: false,
+    title: "",
+    description: "",
+    okLabel: "확인",
+    cancelLabel: "취소",
+    resolver: null,
+  });
 
-    // 필터 및 검색
-    "filter.company",
-    "filter.company.all",
-    "filter.company.common",
-    "filter.company.search",
-    "filter.search",
-    "filter.search.placeholder",
-    "filter.reset",
+  const confirmDialog = useCallback(
+    (title: string, description: string, okLabel = "확인", cancelLabel = "취소") =>
+      new Promise<boolean>((resolve) => {
+        setConfirmState({ open: true, title, description, okLabel, cancelLabel, resolver: resolve });
+      }),
+    [],
+  );
 
-    // 테이블 헤더
-    "table.header.select",
-    "table.header.menu.name",
-    "table.header.menu.url",
-    "table.header.menu.type",
-    "table.header.status",
-    "table.header.company",
-    "table.header.sequence",
-    "table.header.actions",
+  const resolveConfirm = (ok: boolean) => {
+    confirmState.resolver?.(ok);
+    setConfirmState((s) => ({ ...s, open: false, resolver: null }));
+  };
 
-    // 상태
-    "status.active",
-    "status.inactive",
-    "status.unspecified",
+  const menus = scope === "admin" ? adminMenus : userMenus;
 
-    // 폼
-    "form.menu.type",
-    "form.menu.type.admin",
-    "form.menu.type.user",
-    "form.company",
-    "form.company.select",
-    "form.company.common",
-    "form.company.submenu.note",
-    "form.lang.key",
-    "form.lang.key.select",
-    "form.lang.key.none",
-    "form.lang.key.search",
-    "form.lang.key.selected",
-    "form.menu.name",
-    "form.menu.name.placeholder",
-    "form.menu.url",
-    "form.menu.url.placeholder",
-    "form.menu.description",
-    "form.menu.description.placeholder",
-    "form.menu.sequence",
+  const selectedMenu = useMemo(
+    () => menus.find((m) => String(m.objid ?? m.OBJID) === selectedId),
+    [menus, selectedId],
+  );
 
-    // 모달
-    "modal.menu.register.title",
-    "modal.menu.modify.title",
-    "modal.delete.title",
-    "modal.delete.description",
-    "modal.delete.batch.description",
+  const parentName = useMemo(() => {
+    if (!selectedMenu) return "";
+    const parentId = String(selectedMenu.parent_obj_id ?? selectedMenu.PARENT_OBJ_ID ?? "0");
+    if (parentId === "0") return "";
+    const parent = menus.find((m) => String(m.objid ?? m.OBJID) === parentId);
+    return parent ? (parent.menu_name_kor ?? parent.MENU_NAME_KOR ?? "") : "";
+  }, [selectedMenu, menus]);
 
-    // 메시지
-    "message.loading",
-    "message.menu.delete.processing",
-    "message.menu.save.success",
-    "message.menu.save.failed",
-    "message.menu.delete.success",
-    "message.menu.delete.failed",
-    "message.menu.delete.batch.success",
-    "message.menu.delete.batch.partial",
-    "message.menu.status.toggle.success",
-    "message.menu.status.toggle.failed",
-    "message.validation.menu.name.required",
-    "message.validation.company.required",
-    "message.validation.select.menu.delete",
-    "message.error.load.menu.list",
-    "message.error.load.menu.info",
-    "message.error.load.company.list",
-    "message.error.load.lang.key.list",
+  const loadMenus = useCallback(
+    async (showLoading = true) => {
+      if (showLoading) setLoading(true);
+      try {
+        const [adminRes, userRes] = await Promise.all([
+          menuApi.getAdminMenusForManagement(),
+          menuApi.getUserMenusForManagement(),
+        ]);
+        if (adminRes.success && adminRes.data) setAdminMenus(adminRes.data);
+        if (userRes.success && userRes.data) setUserMenus(userRes.data);
+      } catch (e) {
+        toast.error("메뉴 목록을 불러오는데 실패했습니다");
+      } finally {
+        if (showLoading) setLoading(false);
+      }
+    },
+    [],
+  );
 
-    // 리스트 정보
-    "menu.list.title",
-    "menu.list.total",
-    "menu.list.search.result",
-
-    // UI
-    "ui.expand",
-    "ui.collapse",
-    "ui.menu.collapse",
-    "ui.language",
-  ];
-
-  // 초기 로딩
   useEffect(() => {
-    loadCompanies();
-    loadMenus(false); // 메뉴 목록 로드 (메뉴 관리 화면용 - 모든 상태 표시)
-    // 사용자 언어가 설정되지 않았을 때만 기본 텍스트 설정
-    if (!userLang) {
-      initializeDefaultTexts();
-    }
-  }, [userLang]); // userLang 변경 시마다 실행
+    loadMenus(true);
+  }, [loadMenus]);
 
-  // 초기 기본 텍스트 설정 함수
-  const initializeDefaultTexts = () => {
-    const defaultTexts: Record<string, string> = {};
-    MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
-      // 기본 한국어 텍스트 제공
-      const defaultText = getDefaultText(key);
-      defaultTexts[key] = defaultText;
+  // 스코프 변경 시 선택/검색/탭 초기화
+  useEffect(() => {
+    setSelectedId("");
+    setSearchText("");
+    setView("overview");
+  }, [scope]);
+
+  const handleSelect = (id: string) => {
+    const node = menus.find((m) => String(m.objid ?? m.OBJID) === id);
+    setSelectedId(id);
+    const lev = Number(node?.lev ?? node?.LEV ?? 1);
+    setView(lev > 1 ? "settings" : "overview");
+  };
+
+  const handleToggleExpand = (id: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
     });
-    setUiTexts(defaultTexts);
-    // console.log("🌐 초기 기본 텍스트 설정 완료:", Object.keys(defaultTexts).length);
   };
 
-  // 기본 텍스트 반환 함수
-  const getDefaultText = (key: string): string => {
-    const defaultTexts: Record<string, string> = {
-      "menu.management.title": "메뉴 관리",
-      "menu.management.description": "시스템의 메뉴 구조와 권한을 관리합니다.",
-      "menu.type.title": "메뉴 타입",
-      "menu.type.admin": "관리자",
-      "menu.type.user": "사용자",
-      "menu.management.admin": "관리자 메뉴",
-      "menu.management.user": "사용자 메뉴",
-      "menu.management.admin.description": "시스템 관리 및 설정 메뉴",
-      "menu.management.user.description": "일반 사용자 업무 메뉴",
-      "button.add": "추가",
-      "button.add.top.level": "최상위 메뉴 추가",
-      "button.add.sub": "하위 메뉴 추가",
-      "button.edit": "수정",
-      "button.delete": "삭제",
-      "button.delete.selected": "선택 삭제",
-      "button.delete.selected.count": "선택 삭제 ({count})",
-      "button.delete.processing": "삭제 중...",
-      "button.cancel": "취소",
-      "button.save": "저장",
-      "button.register": "등록",
-      "button.modify": "수정",
-      "filter.company": "회사",
-      "filter.company.all": "전체",
-      "filter.company.common": "공통",
-      "filter.company.search": "회사 검색",
-      "filter.search": "검색",
-      "filter.search.placeholder": "메뉴명 또는 URL로 검색...",
-      "filter.reset": "초기화",
-      "table.header.select": "선택",
-      "table.header.menu.name": "메뉴명",
-      "table.header.menu.url": "URL",
-      "table.header.menu.type": "메뉴 타입",
-      "table.header.status": "상태",
-      "table.header.company": "회사",
-      "table.header.sequence": "순서",
-      "table.header.actions": "작업",
-      "status.active": "활성화",
-      "status.inactive": "비활성화",
-      "status.unspecified": "미지정",
-      "form.menu.type": "메뉴 타입",
-      "form.menu.type.admin": "관리자",
-      "form.menu.type.user": "사용자",
-      "form.company": "회사",
-      "form.company.select": "회사를 선택하세요",
-      "form.company.common": "공통",
-      "form.company.submenu.note": "하위 메뉴는 상위 메뉴와 동일한 회사를 가져야 합니다.",
-      "form.lang.key": "다국어 키",
-      "form.lang.key.select": "다국어 키를 선택하세요",
-      "form.lang.key.none": "다국어 키 없음",
-      "form.lang.key.search": "다국어 키 검색...",
-      "form.lang.key.selected": "선택된 키: {key} - {description}",
-      "form.menu.name": "메뉴명",
-      "form.menu.name.placeholder": "메뉴명을 입력하세요",
-      "form.menu.url": "URL",
-      "form.menu.url.placeholder": "메뉴 URL을 입력하세요",
-      "form.menu.description": "설명",
-      "form.menu.description.placeholder": "메뉴 설명을 입력하세요",
-      "form.menu.sequence": "순서",
-      "modal.menu.register.title": "메뉴 등록",
-      "modal.menu.modify.title": "메뉴 수정",
-      "modal.delete.title": "메뉴 삭제",
-      "modal.delete.description": "해당 메뉴를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.",
-      "modal.delete.batch.description":
-        "선택된 {count}개의 메뉴를 영구적으로 삭제하시겠습니까?\n\n⚠️ 주의: 상위 메뉴를 삭제하면 하위 메뉴들도 함께 삭제됩니다.\n이 작업은 되돌릴 수 없습니다.",
-      "message.loading": "로딩 중...",
-      "message.menu.delete.processing": "메뉴 삭제 중...",
-      "message.menu.save.success": "메뉴가 성공적으로 저장되었습니다.",
-      "message.menu.save.failed": "메뉴 저장에 실패했습니다.",
-      "message.menu.delete.success": "메뉴가 성공적으로 삭제되었습니다.",
-      "message.menu.delete.failed": "메뉴 삭제에 실패했습니다.",
-      "message.menu.delete.batch.success": "선택된 메뉴들이 성공적으로 삭제되었습니다.",
-      "message.menu.delete.batch.partial": "일부 메뉴 삭제에 실패했습니다.",
-      "message.menu.status.toggle.success": "메뉴 상태가 변경되었습니다.",
-      "message.menu.status.toggle.failed": "메뉴 상태 변경에 실패했습니다.",
-      "message.validation.menu.name.required": "메뉴명을 입력해주세요.",
-      "message.validation.company.required": "회사를 선택해주세요.",
-      "message.validation.select.menu.delete": "삭제할 메뉴를 선택해주세요.",
-      "message.error.load.menu.list": "메뉴 목록을 불러오는데 실패했습니다.",
-      "message.error.load.menu.info": "메뉴 정보를 불러오는데 실패했습니다.",
-      "message.error.load.company.list": "회사 목록을 불러오는데 실패했습니다.",
-      "message.error.load.lang.key.list": "다국어 키 목록을 불러오는데 실패했습니다.",
-      "menu.list.title": "메뉴 목록",
-      "menu.list.total": "총 {count}개",
-      "menu.list.search.result": "검색 결과: {count}개",
-      "ui.expand": "펼치기",
-      "ui.collapse": "접기",
-      "ui.menu.collapse": "메뉴 접기",
-      "ui.language": "언어",
+  const handleMove = async (
+    sourceId: string,
+    targetId: string,
+    pos: "before" | "after" | "into",
+  ) => {
+    const source = menus.find((m) => String(m.objid ?? m.OBJID) === sourceId);
+    const target = menus.find((m) => String(m.objid ?? m.OBJID) === targetId);
+    if (!source || !target) return;
+
+    // 순환 방지: source가 target의 조상이면 거부
+    const isAncestor = (aId: string, bId: string): boolean => {
+      let cur = menus.find((m) => String(m.objid ?? m.OBJID) === bId);
+      while (cur) {
+        const pid = String(cur.parent_obj_id ?? cur.PARENT_OBJ_ID ?? "0");
+        if (pid === "0") return false;
+        if (pid === aId) return true;
+        cur = menus.find((m) => String(m.objid ?? m.OBJID) === pid);
+      }
+      return false;
     };
-
-    return defaultTexts[key] || key;
-  };
-
-  // 컴포넌트 마운트 시 및 userLang 변경 시 다국어 텍스트 로드
-  useEffect(() => {
-    if (userLang && !uiTextsLoading) {
-      loadUITexts();
-    }
-  }, [userLang]); // userLang 변경 시마다 실행
-
-  // uiTexts 상태 변경 감지
-  useEffect(() => {
-    // console.log("🔄 uiTexts 상태 변경됨:", {
-    //   count: Object.keys(uiTexts).length,
-    //   sampleKeys: Object.keys(uiTexts).slice(0, 5),
-    //   sampleValues: Object.entries(uiTexts)
-    //     .slice(0, 3)
-    //     .map(([k, v]) => `${k}: ${v}`),
-    // });
-  }, [uiTexts]);
-
-  // 컴포넌트 마운트 후 다국어 텍스트 강제 로드 (userLang이 아직 설정되지 않았을 수 있음)
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (userLang && !uiTextsLoading) {
-    // console.log("🔄 컴포넌트 마운트 후 다국어 텍스트 강제 로드");
-        loadUITexts();
-      }
-    }, 300); // 300ms 후 실행
-
-    return () => clearTimeout(timer);
-  }, [userLang]); // userLang이 설정된 후 실행
-
-  // 추가 안전장치: 컴포넌트 마운트 후 일정 시간이 지나면 강제로 다국어 텍스트 로드
-  useEffect(() => {
-    const fallbackTimer = setTimeout(() => {
-      if (!uiTextsLoading && Object.keys(uiTexts).length === 0) {
-    // console.log("🔄 안전장치: 컴포넌트 마운트 후 강제 다국어 텍스트 로드");
-        // 사용자 언어가 설정되지 않았을 때만 기본 텍스트 설정
-        if (!userLang) {
-          initializeDefaultTexts();
-        } else {
-          // 사용자 언어가 설정된 경우 다국어 텍스트 로드
-          loadUITexts();
-        }
-      }
-    }, 1000); // 1초 후 실행
-
-    return () => clearTimeout(fallbackTimer);
-  }, [userLang]); // userLang 변경 시마다 실행
-
-  // 번역 로드 이벤트 감지
-  useEffect(() => {
-    const handleTranslationLoaded = (event: CustomEvent) => {
-      const { key, text, userLang: loadedLang } = event.detail;
-      if (loadedLang === userLang) {
-        setUiTexts((prev) => ({ ...prev, [key]: text }));
-      }
-    };
-
-    window.addEventListener("translation-loaded", handleTranslationLoaded as EventListener);
-
-    return () => {
-      window.removeEventListener("translation-loaded", handleTranslationLoaded as EventListener);
-    };
-  }, [userLang]);
-
-  // 드롭다운 외부 클릭 시 닫기
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as Element;
-      if (!target.closest(".company-dropdown")) {
-        setIsCompanyDropdownOpen(false);
-        setCompanySearchText("");
-      }
-    };
-
-    if (isCompanyDropdownOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isCompanyDropdownOpen]);
-
-  // 특정 메뉴 타입만 로드하는 함수
-  const loadMenusForType = async (type: MenuType, showLoading = true) => {
-    try {
-      if (showLoading) {
-        setLoading(true);
-      }
-      
-      if (type === "admin") {
-        const adminResponse = await menuApi.getAdminMenusForManagement();
-        if (adminResponse.success && adminResponse.data) {
-          setLocalAdminMenus(adminResponse.data);
-        }
-      } else {
-        const userResponse = await menuApi.getUserMenusForManagement();
-        if (userResponse.success && userResponse.data) {
-          setLocalUserMenus(userResponse.data);
-        }
-      }
-    } catch (error) {
-      toast.error(getUITextSync("message.error.load.menu.list"));
-    } finally {
-      if (showLoading) {
-        setLoading(false);
-      }
-    }
-  };
-
-  const loadMenus = async (showLoading = true) => {
-    // console.log(`📋 메뉴 목록 조회 시작 (showLoading: ${showLoading})`);
-    try {
-      if (showLoading) {
-        setLoading(true);
-      }
-      
-      // 선택된 메뉴 타입에 해당하는 메뉴만 로드
-      if (selectedMenuType === "admin") {
-        const adminResponse = await menuApi.getAdminMenusForManagement();
-        if (adminResponse.success && adminResponse.data) {
-          setLocalAdminMenus(adminResponse.data);
-        }
-      } else {
-        const userResponse = await menuApi.getUserMenusForManagement();
-        if (userResponse.success && userResponse.data) {
-          setLocalUserMenus(userResponse.data);
-        }
-      }
-      
-      // 전역 메뉴 상태도 업데이트 (좌측 사이드바용)
-      await refreshMenus();
-    // console.log("📋 메뉴 목록 조회 성공");
-    } catch (error) {
-    // console.error("❌ 메뉴 목록 조회 실패:", error);
-      toast.error(getUITextSync("message.error.load.menu.list"));
-    } finally {
-      if (showLoading) {
-        setLoading(false);
-      }
-    }
-  };
-
-  // 회사 목록 조회
-  const loadCompanies = async () => {
-    // console.log("🏢 회사 목록 조회 시작");
-    try {
-      const response = await apiClient.get("/admin/companies");
-
-      if (response.data.success) {
-    // console.log("🏢 회사 목록 응답:", response.data);
-        const companyList = response.data.data.map((company: any) => ({
-          code: company.company_code,
-          name: company.company_name,
-        }));
-    // console.log("🏢 변환된 회사 목록:", companyList);
-        setCompanies(companyList);
-      }
-    } catch (error) {
-    // console.error("❌ 회사 목록 조회 실패:", error);
-    }
-  };
-
-  // 다국어 텍스트 로드 함수 - 배치 API 사용
-  const loadUITexts = async () => {
-    if (uiTextsLoading) return; // 이미 로딩 중이면 중단
-
-    // userLang이 설정되지 않았으면 기본값 설정
-    if (!userLang) {
-    // console.log("🌐 사용자 언어가 설정되지 않음, 기본값 설정");
-      const defaultTexts: Record<string, string> = {};
-      MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
-        defaultTexts[key] = getDefaultText(key); // 기본 한국어 텍스트 사용
-      });
-      setUiTexts(defaultTexts);
+    if (isAncestor(sourceId, targetId) || sourceId === targetId) {
+      toast.error("자기 자신의 하위로 이동할 수 없습니다");
       return;
     }
 
-    // 사용자 언어가 설정된 경우, 기존 uiTexts가 비어있으면 기본 텍스트로 초기화
-    if (Object.keys(uiTexts).length === 0) {
-    // console.log("🌐 기존 uiTexts가 비어있음, 기본 텍스트로 초기화");
-      const defaultTexts: Record<string, string> = {};
-      MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
-        defaultTexts[key] = getDefaultText(key);
-      });
-      setUiTexts(defaultTexts);
+    // 새 parent 결정
+    let newParentId: string;
+    if (pos === "into") {
+      newParentId = String(target.objid ?? target.OBJID);
+    } else {
+      newParentId = String(target.parent_obj_id ?? target.PARENT_OBJ_ID ?? "0");
     }
 
-    // console.log("🌐 UI 다국어 텍스트 로드 시작", {
-    //   userLang,
-    //   apiParams: {
-    //     companyCode: "*",
-    //     menuCode: "menu.management",
-    //     userLang: userLang,
-    //   },
-    // });
-    setUiTextsLoading(true);
-
-    try {
-      // 배치 API를 사용하여 모든 다국어 키를 한 번에 조회
-      const response = await apiClient.post(
-        "/multilang/batch",
-        {
-          langKeys: MENU_MANAGEMENT_LANG_KEYS,
-          companyCode: "*", // 모든 회사
-          menuCode: "menu.management", // 메뉴관리 메뉴
-          userLang: userLang, // body에 포함
-        },
-        {
-          params: {}, // query params는 비움
-        },
+    // parent 변경(=계층 이동) 시 사용자 확인
+    const currentParentId = String(source.parent_obj_id ?? source.PARENT_OBJ_ID ?? "0");
+    if (currentParentId !== newParentId) {
+      const sourceName = source.menu_name_kor ?? source.MENU_NAME_KOR ?? "메뉴";
+      const targetParentName =
+        newParentId === "0"
+          ? "최상위"
+          : (() => {
+              const p = menus.find((m) => String(m.objid ?? m.OBJID) === newParentId);
+              return p ? (p.menu_name_kor ?? p.MENU_NAME_KOR ?? "알 수 없음") : "알 수 없음";
+            })();
+      const ok = await confirmDialog(
+        "메뉴 계층 이동",
+        `"${sourceName}" 메뉴를 "${targetParentName}" 하위로 이동합니다. 계층이 변경되며 되돌리려면 다시 드래그해야 합니다. 진행하시겠습니까?`,
+        "이동",
+        "취소",
       );
-
-      if (response.data.success) {
-        const translations = response.data.data;
-    // console.log("🌐 배치 다국어 텍스트 응답:", translations);
-
-        // 번역 결과를 상태에 저장 (기존 uiTexts와 병합)
-        const mergedTranslations = { ...uiTexts, ...translations };
-        // console.log("🔧 setUiTexts 호출 전:", {
-        //   translationsCount: Object.keys(translations).length,
-        //   mergedCount: Object.keys(mergedTranslations).length,
-        // });
-        setUiTexts(mergedTranslations);
-        // console.log("🔧 setUiTexts 호출 후 - mergedTranslations:", mergedTranslations);
-
-        // 번역 캐시에 저장 (다른 컴포넌트에서도 사용할 수 있도록)
-        setTranslationCache(userLang, mergedTranslations);
-      } else {
-    // console.error("❌ 다국어 텍스트 배치 조회 실패:", response.data.message);
-        // API 실패 시에도 기존 uiTexts는 유지
-    // console.log("🔄 API 실패로 인해 기존 uiTexts 유지");
-      }
-    } catch (error) {
-    // console.error("❌ UI 다국어 텍스트 로드 실패:", error);
-      // API 실패 시에도 기존 uiTexts는 유지
-    // console.log("🔄 API 실패로 인해 기존 uiTexts 유지");
-    } finally {
-      setUiTextsLoading(false);
-    }
-  };
-
-  // UI 텍스트 가져오기 함수 (동기 버전만 사용)
-  // getUIText 함수는 제거 - getUITextSync만 사용
-
-  // 동기 버전 (DB에서 가져온 번역 텍스트 사용)
-  const getUITextSync = (key: string, params?: Record<string, string | number>, fallback?: string): string => {
-    // uiTexts에서 번역 텍스트 찾기
-    let text = uiTexts[key];
-
-    // uiTexts에 없으면 getMenuTextSync로 기본 한글 텍스트 가져오기
-    if (!text) {
-      text = getMenuTextSync(key, userLang ?? undefined) || fallback || key;
+      if (!ok) return;
     }
 
-    // 파라미터 치환
-    if (params && text) {
-      Object.entries(params).forEach(([paramKey, paramValue]) => {
-        text = text!.replace(`{${paramKey}}`, String(paramValue));
-      });
+    // 새 parent의 모든 형제(source 제외)를 seq 순으로 정렬
+    const siblings = menus
+      .filter((m) => String(m.parent_obj_id ?? m.PARENT_OBJ_ID ?? "0") === newParentId)
+      .filter((m) => String(m.objid ?? m.OBJID) !== sourceId)
+      .sort((a, b) => Number(a.seq ?? a.SEQ ?? 0) - Number(b.seq ?? b.SEQ ?? 0));
+
+    // 삽입 위치 결정
+    let insertIdx: number;
+    if (pos === "into") {
+      insertIdx = siblings.length;
+    } else {
+      const targetIdx = siblings.findIndex((m) => String(m.objid ?? m.OBJID) === targetId);
+      insertIdx = pos === "before" ? targetIdx : targetIdx + 1;
     }
 
-    return text || key;
-  };
+    // 재구성된 순서 (source 포함)
+    const reordered = [...siblings];
+    reordered.splice(insertIdx, 0, source);
 
-  // 다국어 API 테스트 함수 (getUITextSync 사용)
-  const testMultiLangAPI = async () => {
-    // console.log("🧪 다국어 API 테스트 시작");
+    // 각 형제 seq 0,1,2,... 재부여 + 순차 업데이트 (순서 보장)
     try {
-      const text = getUITextSync("menu.management.admin");
-    // console.log("🧪 다국어 API 테스트 결과:", text);
-    } catch (error) {
-    // console.error("❌ 다국어 API 테스트 실패:", error);
+      for (let i = 0; i < reordered.length; i++) {
+        const m = reordered[i];
+        const id = String(m.objid ?? m.OBJID);
+        const isSource = id === sourceId;
+        // 기존 seq와 동일하면 skip (source는 parent 변경 가능성 때문에 항상 업데이트)
+        const curSeq = Number(m.seq ?? m.SEQ ?? 0);
+        if (!isSource && curSeq === i) continue;
+        const payload = {
+          objid: id,
+          parentObjId: isSource
+            ? newParentId
+            : String(m.parent_obj_id ?? m.PARENT_OBJ_ID ?? "0"),
+          menuNameKor: m.menu_name_kor ?? m.MENU_NAME_KOR ?? "",
+          menuUrl: m.menu_url ?? m.MENU_URL ?? "",
+          menuDesc: m.menu_desc ?? m.MENU_DESC ?? "",
+          seq: i,
+          menu_type: String(m.menu_type ?? m.MENU_TYPE ?? (scope === "admin" ? "0" : "1")),
+          status: (m.status ?? m.STATUS ?? "active").toString(),
+          company_code: m.company_code ?? m.COMPANY_CODE ?? "*",
+          langKey: m.lang_key ?? m.LANG_KEY ?? undefined,
+          menuIcon: m.menu_icon ?? m.MENU_ICON ?? undefined,
+        };
+        await menuApi.updateMenu(id, payload);
+      }
+      toast.success("이동되었습니다");
+      await loadMenus(false);
+      await refreshMenus();
+    } catch (e) {
+      toast.error("이동 중 오류가 발생했습니다");
     }
   };
 
-  // 대문자 키를 소문자 키로 변환하는 함수
-  const convertMenuData = (data: any[]): MenuItem[] => {
-    return data.map((item) => ({
-      objid: item.OBJID ?? item.objid,
-      parent_obj_id: item.PARENT_OBJ_ID ?? item.parent_obj_id,
-      menu_name_kor: item.MENU_NAME_KOR ?? item.menu_name_kor,
-      menu_url: item.MENU_URL ?? item.menu_url,
-      menu_desc: item.MENU_DESC ?? item.menu_desc,
-      seq: item.SEQ ?? item.seq,
-      menu_type: item.MENU_TYPE ?? item.menu_type,
-      status: item.STATUS ?? item.status,
-      lev: item.LEV ?? item.lev,
-      lpad_menu_name_kor: item.LPAD_MENU_NAME_KOR ?? item.lpad_menu_name_kor,
-      status_title: item.STATUS_TITLE ?? item.status_title,
-      writer: item.WRITER ?? item.writer,
-      regdate: item.REGDATE ?? item.regdate,
-      company_code: item.COMPANY_CODE ?? item.company_code,
-      company_name: item.COMPANY_NAME ?? item.company_name,
-    }));
-  };
-
-  const handleAddTopLevelMenu = () => {
-    setFormData({
+  const handleAddTop = () => {
+    setFormModalData({
       menuId: "",
-      parentId: "0", // 최상위 메뉴는 parentId가 0
-      menu_type: getMenuTypeValue(),
-      level: 1, // 최상위 메뉴는 level 1
-      parentCompanyCode: "", // 최상위 메뉴는 상위 회사 정보 없음
+      parentId: "0",
+      menu_type: scope === "admin" ? "0" : "1",
+      level: 1,
+      parentCompanyCode: "",
     });
     setFormModalOpen(true);
   };
 
-  const handleAddMenu = (parentId: string, menuType: string, level: number) => {
-    // 상위 메뉴의 회사 정보 찾기
-    const currentMenus = selectedMenuType === "admin" ? localAdminMenus : localUserMenus;
-    const parentMenu = currentMenus.find((menu) => menu.objid === parentId);
-
-    setFormData({
-      menuId: "",
-      parentId,
-      menu_type: menuType,
-      level: level + 1,
-      parentCompanyCode: parentMenu?.company_code || "",
+  const handleOpenAdvanced = (menuId: string) => {
+    const node = menus.find((m) => String(m.objid ?? m.OBJID) === menuId);
+    if (!node) return;
+    setFormModalData({
+      menuId,
+      parentId: String(node.parent_obj_id ?? node.PARENT_OBJ_ID ?? "0"),
+      menu_type: String(node.menu_type ?? node.MENU_TYPE ?? "1"),
+      level: Number(node.lev ?? node.LEV ?? 1),
+      parentCompanyCode: node.company_code ?? node.COMPANY_CODE ?? "",
     });
     setFormModalOpen(true);
   };
 
-  const handleEditMenu = (menuId: string) => {
-    // console.log("🔧 메뉴 수정 시작 - menuId:", menuId);
-
-    // 현재 메뉴 정보 찾기
-    const currentMenus = selectedMenuType === "admin" ? localAdminMenus : localUserMenus;
-    const menuToEdit = currentMenus.find((menu) => (menu.objid ?? menu.OBJID) === menuId);
-
-    if (menuToEdit) {
-    // console.log("수정할 메뉴 정보:", menuToEdit);
-
-      setFormData({
-        menuId: menuId,
-        parentId: menuToEdit.parent_obj_id ?? menuToEdit.PARENT_OBJ_ID ?? "",
-        menu_type: selectedMenuType, // 현재 선택된 메뉴 타입
-        level: 0, // 기본값
-        parentCompanyCode: menuToEdit.company_code ?? menuToEdit.COMPANY_CODE ?? "",
-      });
-
-      // console.log("설정된 formData:", {
-      //   menuId: menuId,
-      //   parentId: menuToEdit.parent_obj_id || menuToEdit.PARENT_OBJ_ID || "",
-      //   menuType: selectedMenuType,
-      //   level: 0,
-      //   parentCompanyCode: menuToEdit.company_code || menuToEdit.COMPANY_CODE || "",
-      // });
-    } else {
-      // console.error("수정할 메뉴를 찾을 수 없음:", menuId);
-    }
-
-    setFormModalOpen(true);
+  const handleFormSuccess = async () => {
+    await loadMenus(false);
+    await refreshMenus();
   };
 
-  const handleMenuSelectionChange = (menuId: string, checked: boolean) => {
-    const newSelected = new Set(selectedMenus);
-    if (checked) {
-      newSelected.add(menuId);
-    } else {
-      newSelected.delete(menuId);
-    }
-    setSelectedMenus(newSelected);
+  const handleSavedInline = async () => {
+    await loadMenus(false);
+    await refreshMenus();
   };
 
-  const handleSelectAllMenus = (checked: boolean) => {
-    const currentMenus = selectedMenuType === "admin" ? localAdminMenus : localUserMenus;
-    if (checked) {
-      // 모든 메뉴 선택 (최상위 메뉴 포함)
-      setSelectedMenus(new Set(currentMenus.map((menu) => menu.objid ?? menu.OBJID ?? "")));
-    } else {
-      setSelectedMenus(new Set());
-    }
-  };
-
-  const handleDeleteSelectedMenus = async () => {
-    if (selectedMenus.size === 0) {
-      toast.error(getUITextSync("message.validation.select.menu.delete"));
-      return;
-    }
-
-    if (!confirm(getUITextSync("modal.delete.batch.description", { count: selectedMenus.size }))) {
-      return;
-    }
-
-    setDeleting(true);
-    try {
-      const menuIds = Array.from(selectedMenus);
-    // console.log("삭제할 메뉴 IDs:", menuIds);
-
-      toast.info(getUITextSync("message.menu.delete.processing"));
-
-      const response = await menuApi.deleteMenusBatch(menuIds);
-      // console.log("삭제 API 응답:", response);
-      // console.log("응답 구조:", {
-      //   success: response.success,
-      //   data: response.data,
-      //   message: response.message,
-      // });
-
-      if (response.success && response.data) {
-        const { deletedCount, failedCount } = response.data;
-        // console.log("삭제 결과:", { deletedCount, failedCount });
-
-        // 선택된 메뉴 초기화
-        setSelectedMenus(new Set());
-
-        // 메뉴 목록 즉시 새로고침 (로딩 상태 없이)
-    // console.log("메뉴 목록 새로고침 시작");
-        await loadMenus(false);
-        // 전역 메뉴 상태도 업데이트
-        await refreshMenus();
-    // console.log("메뉴 목록 새로고침 완료");
-
-        // 삭제 결과 메시지
-        if (failedCount === 0) {
-          toast.success(getUITextSync("message.menu.delete.batch.success", { count: deletedCount }));
-        } else {
-          toast.success(
-            getUITextSync("message.menu.delete.batch.partial", {
-              success: deletedCount,
-              failed: failedCount,
-            }),
-          );
-        }
-      } else {
-    // console.error("삭제 실패:", response);
-        toast.error(response.message || "메뉴 삭제에 실패했습니다.");
-      }
-    } catch (error) {
-    // console.error("메뉴 삭제 중 오류:", error);
-      toast.error(getUITextSync("message.menu.delete.failed"));
-    } finally {
-      setDeleting(false);
-    }
+  const requestDelete = (menuId: string) => {
+    setDeleteTargetId(menuId);
+    setDeleteDialogOpen(true);
   };
 
   const confirmDelete = async () => {
+    setDeleting(true);
     try {
-      const response = await menuApi.deleteMenu(selectedMenuId);
-      if (response.success) {
-        toast.success(response.message);
+      const resp = await menuApi.deleteMenu(deleteTargetId);
+      if (resp.success) {
+        toast.success(resp.message || "삭제되었습니다");
+        if (selectedId === deleteTargetId) {
+          setSelectedId("");
+          setView("overview");
+        }
         await loadMenus(false);
-      } else {
-        toast.error(response.message);
-      }
-    } catch (error) {
-      toast.error("메뉴 삭제에 실패했습니다.");
-    } finally {
-      setDeleteDialogOpen(false);
-      setSelectedMenuId("");
-    }
-  };
-
-  const handleCopyMenu = (menuId: string, menuName: string) => {
-    setSelectedMenuId(menuId);
-    setSelectedMenuName(menuName);
-    setCopyDialogOpen(true);
-  };
-
-  const handleCopyComplete = async () => {
-    // 복사 완료 후 메뉴 목록 새로고침
-    await loadMenus(false);
-    toast.success("메뉴 복사가 완료되었습니다");
-  };
-
-  const handleToggleStatus = async (menuId: string) => {
-    try {
-      const response = await menuApi.toggleMenuStatus(menuId);
-      if (response.success) {
-        toast.success(response.message);
-        await loadMenus(false); // 메뉴 목록 새로고침
-        // 전역 메뉴 상태도 업데이트
         await refreshMenus();
       } else {
-        toast.error(response.message);
+        toast.error(resp.message || "삭제 실패");
       }
-    } catch (error) {
-    // console.error("메뉴 상태 토글 오류:", error);
-      toast.error(getUITextSync("message.menu.status.toggle.failed"));
+    } catch (e) {
+      toast.error("삭제 중 오류가 발생했습니다");
+    } finally {
+      setDeleting(false);
+      setDeleteDialogOpen(false);
+      setDeleteTargetId("");
     }
   };
 
-  const handleFormSuccess = () => {
-    loadMenus(false);
-    // 전역 메뉴 상태도 업데이트
-    refreshMenus();
-  };
-
-  const getCurrentMenus = () => {
-    // 메뉴 관리 화면용: 모든 상태의 메뉴 표시 (localAdminMenus/localUserMenus 사용)
-    const currentMenus = selectedMenuType === "admin" ? localAdminMenus : localUserMenus;
-
-    // 검색어 필터링
-    let filteredMenus = currentMenus;
-    if (searchText.trim()) {
-      const searchLower = searchText.toLowerCase();
-      filteredMenus = currentMenus.filter((menu) => {
-        const menuName = (menu.menu_name_kor ?? menu.MENU_NAME_KOR ?? "").toLowerCase();
-        const menuUrl = (menu.menu_url ?? menu.MENU_URL ?? "").toLowerCase();
-        return menuName.includes(searchLower) || menuUrl.includes(searchLower);
-      });
-    }
-
-    // 회사 필터링
-    if (selectedCompany !== "all") {
-      filteredMenus = filteredMenus.filter((menu) => {
-        const menuCompanyCode = menu.company_code ?? menu.COMPANY_CODE ?? "";
-        return menuCompanyCode === selectedCompany;
-      });
-    }
-
-    return filteredMenus;
-  };
-
-  // 메뉴 타입 변경 시 선택된 메뉴 초기화
-  const handleMenuTypeChange = (type: MenuType) => {
-    setSelectedMenuType(type);
-    setSelectedMenus(new Set()); // 선택된 메뉴 초기화
-    setExpandedMenus(new Set()); // 메뉴 타입 변경 시 확장 상태 초기화
-    
-    // 선택한 메뉴 타입에 해당하는 메뉴만 로드
-    if (type === "admin" && localAdminMenus.length === 0) {
-      loadMenusForType("admin", false);
-    } else if (type === "user" && localUserMenus.length === 0) {
-      loadMenusForType("user", false);
-    }
-  };
-
-  const handleToggleExpand = (menuId: string) => {
-    const newExpandedMenus = new Set(expandedMenus);
-    if (newExpandedMenus.has(menuId)) {
-      newExpandedMenus.delete(menuId);
-    } else {
-      newExpandedMenus.add(menuId);
-    }
-    setExpandedMenus(newExpandedMenus);
-  };
-
-  const getMenuTypeString = () => {
-    return selectedMenuType === "admin" ? getUITextSync("menu.type.admin") : getUITextSync("menu.type.user");
-  };
-
-  const getMenuTypeValue = () => {
-    return selectedMenuType === "admin" ? "0" : "1";
-  };
-
-  // uiTextsCount를 useMemo로 계산하여 상태 변경 시에만 재계산
-  const uiTextsCount = useMemo(() => Object.keys(uiTexts).length, [uiTexts]);
-  const adminMenusCount = useMemo(() => localAdminMenus?.length || 0, [localAdminMenus]);
-  const userMenusCount = useMemo(() => localUserMenus?.length || 0, [localUserMenus]);
-
-  // 디버깅을 위한 간단한 상태 표시
-  // console.log("🔍 MenuManagement 렌더링 상태:", {
-  //   loading,
-  //   uiTextsLoading,
-  //   uiTextsCount,
-  //   adminMenusCount,
-  //   userMenusCount,
-  //   selectedMenuType,
-  //   userLang,
-  // });
-
   if (loading) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -876,276 +328,187 @@ export default function MenuPage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-background">
-      <div className="space-y-6 p-6">
-        {/* 페이지 헤더 */}
-        <div className="space-y-2 border-b pb-4">
-          <h1 className="text-3xl font-bold tracking-tight">메뉴 관리</h1>
-          <p className="text-sm text-muted-foreground">시스템 메뉴를 관리하고 화면을 할당합니다</p>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      {/* 페이지 헤더 */}
+      <div
+        style={{
+          padding: "1.1rem 1.4rem .9rem",
+          borderBottom: "1px solid var(--v5-border)",
+          display: "flex",
+          alignItems: "flex-end",
+          justifyContent: "space-between",
+          gap: "1rem",
+          flexShrink: 0,
+        }}
+      >
+        <div>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: "1.1rem",
+              fontWeight: 700,
+              letterSpacing: "-.02em",
+              color: "var(--v5-text)",
+            }}
+          >
+            메뉴 관리
+          </h1>
+          <p
+            style={{
+              margin: ".3rem 0 0",
+              fontSize: ".72rem",
+              color: "var(--v5-text-muted)",
+            }}
+          >
+            트리에서 항목을 선택하면 우측에서 편집합니다.
+          </p>
         </div>
-
-        {/* 메인 컨텐츠 */}
-        <LoadingOverlay isLoading={deleting} text={getUITextSync("button.delete.processing")}>
-          <div className="flex h-full gap-6">
-            {/* 좌측 사이드바 - 메뉴 타입 선택 (20%) */}
-            <div className="w-[20%] border-r pr-6">
-              <div className="space-y-4">
-                <h3 className="text-lg font-semibold">{getUITextSync("menu.type.title")}</h3>
-
-                {/* 메뉴 타입 선택 카드들 */}
-                <div className="space-y-3">
-                  <div
-                    className={`cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md ${
-                      selectedMenuType === "admin" ? "border-primary bg-accent" : "hover:border-border"
-                    }`}
-                    onClick={() => handleMenuTypeChange("admin")}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex-1">
-                        <h4 className="text-sm font-semibold">{getUITextSync("menu.management.admin")}</h4>
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {getUITextSync("menu.management.admin.description")}
-                        </p>
-                      </div>
-                      <Badge variant={selectedMenuType === "admin" ? "default" : "secondary"}>
-                        {localAdminMenus.length}
-                      </Badge>
-                    </div>
-                  </div>
-
-                  <div
-                    className={`cursor-pointer rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md ${
-                      selectedMenuType === "user" ? "border-primary bg-accent" : "hover:border-border"
-                    }`}
-                    onClick={() => handleMenuTypeChange("user")}
-                  >
-                    <div className="flex items-center justify-between">
-                      <div className="flex-1">
-                        <h4 className="text-sm font-semibold">{getUITextSync("menu.management.user")}</h4>
-                        <p className="mt-1 text-xs text-muted-foreground">
-                          {getUITextSync("menu.management.user.description")}
-                        </p>
-                      </div>
-                      <Badge variant={selectedMenuType === "user" ? "default" : "secondary"}>
-                        {localUserMenus.length}
-                      </Badge>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* 우측 메인 영역 - 메뉴 목록 (80%) */}
-            <div className="w-[80%] pl-0">
-              <div className="flex h-full flex-col space-y-4">
-                {/* 상단 헤더: 제목 + 검색 + 버튼 */}
-                <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-                  {/* 왼쪽: 제목 */}
-                  <h2 className="text-xl font-semibold">
-                    {getMenuTypeString()} {getUITextSync("menu.list.title")}
-                  </h2>
-
-                  {/* 오른쪽: 검색 + 버튼 */}
-                  <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-                    {/* 회사 선택 */}
-                    <div className="w-full sm:w-[160px]">
-                      <div className="company-dropdown relative">
-                            <button
-                              type="button"
-                              onClick={() => setIsCompanyDropdownOpen(!isCompanyDropdownOpen)}
-                              className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                            >
-                              <span className={selectedCompany === "all" ? "text-muted-foreground" : ""}>
-                                {selectedCompany === "all"
-                                  ? getUITextSync("filter.company.all")
-                                  : selectedCompany === "*"
-                                    ? getUITextSync("filter.company.common")
-                                    : companies.find((c) => c.code === selectedCompany)?.name ||
-                                      getUITextSync("filter.company.all")}
-                              </span>
-                              <svg
-                                className={`h-4 w-4 transition-transform ${isCompanyDropdownOpen ? "rotate-180" : ""}`}
-                                fill="none"
-                                stroke="currentColor"
-                                viewBox="0 0 24 24"
-                              >
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                              </svg>
-                            </button>
-
-                            {isCompanyDropdownOpen && (
-                              <div className="absolute top-full left-0 z-[100] mt-1 w-full min-w-[200px] rounded-md border bg-popover text-popover-foreground shadow-lg">
-                                <div className="border-b p-2">
-                                  <Input
-                                    placeholder={getUITextSync("filter.company.search")}
-                                    value={companySearchText}
-                                    onChange={(e) => setCompanySearchText(e.target.value)}
-                                    className="h-8 text-sm"
-                                    onClick={(e) => e.stopPropagation()}
-                                  />
-                                </div>
-
-                                <div className="max-h-48 overflow-y-auto">
-                                  <div
-                                    className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
-                                    onClick={() => {
-                                      setSelectedCompany("all");
-                                      setIsCompanyDropdownOpen(false);
-                                      setCompanySearchText("");
-                                    }}
-                                  >
-                                    {getUITextSync("filter.company.all")}
-                                  </div>
-                                  <div
-                                    className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
-                                    onClick={() => {
-                                      setSelectedCompany("*");
-                                      setIsCompanyDropdownOpen(false);
-                                      setCompanySearchText("");
-                                    }}
-                                  >
-                                    {getUITextSync("filter.company.common")}
-                                  </div>
-
-                                  {companies
-                                    .filter((company) => company.code && company.code.trim() !== "")
-                                    .filter(
-                                      (company) =>
-                                        company.name.toLowerCase().includes(companySearchText.toLowerCase()) ||
-                                        company.code.toLowerCase().includes(companySearchText.toLowerCase()),
-                                    )
-                                    .map((company, index) => (
-                                      <div
-                                        key={company.code || `company-${index}`}
-                                        className="flex cursor-pointer items-center px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground"
-                                        onClick={() => {
-                                          setSelectedCompany(company.code);
-                                          setIsCompanyDropdownOpen(false);
-                                          setCompanySearchText("");
-                                        }}
-                                      >
-                                        {company.code === "*" ? getUITextSync("filter.company.common") : company.name}
-                                      </div>
-                                    ))}
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-
-                    {/* 검색 입력 */}
-                    <div className="w-full sm:w-[240px]">
-                      <Input
-                        id="search"
-                        placeholder={getUITextSync("filter.search.placeholder")}
-                        value={searchText}
-                        onChange={(e) => setSearchText(e.target.value)}
-                        className="h-10 text-sm"
-                      />
-                    </div>
-
-                    {/* 초기화 버튼 */}
-                    <Button
-                      onClick={() => {
-                        setSearchText("");
-                        setSelectedCompany("all");
-                        setCompanySearchText("");
-                      }}
-                      variant="outline"
-                      className="h-10 text-sm font-medium"
-                    >
-                      {getUITextSync("filter.reset")}
-                    </Button>
-
-                    {/* 최상위 메뉴 추가 */}
-                    <Button variant="outline" onClick={() => handleAddTopLevelMenu()} className="h-10 gap-2 text-sm font-medium">
-                      {getUITextSync("button.add.top.level")}
-                    </Button>
-
-                    {/* 선택 삭제 */}
-                    {selectedMenus.size > 0 && (
-                      <Button
-                        variant="destructive"
-                        onClick={handleDeleteSelectedMenus}
-                        disabled={deleting}
-                        className="h-10 gap-2 text-sm font-medium"
-                      >
-                        {deleting ? (
-                          <>
-                            <LoadingSpinner size="sm" className="mr-2" />
-                            {getUITextSync("button.delete.processing")}
-                          </>
-                        ) : (
-                          getUITextSync("button.delete.selected.count", {
-                            count: selectedMenus.size,
-                          })
-                        )}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-
-                {/* 테이블 영역 */}
-                <div className="flex-1 overflow-hidden">
-                  <MenuTable
-                    menus={getCurrentMenus()}
-                    title=""
-                    onAddMenu={handleAddMenu}
-                    onEditMenu={handleEditMenu}
-                    onCopyMenu={handleCopyMenu}
-                    onToggleStatus={handleToggleStatus}
-                    selectedMenus={selectedMenus}
-                    onMenuSelectionChange={handleMenuSelectionChange}
-                    onSelectAllMenus={handleSelectAllMenus}
-                    expandedMenus={expandedMenus}
-                    onToggleExpand={handleToggleExpand}
-                    uiTexts={uiTexts}
-                    isSuperAdmin={isSuperAdmin} // SUPER_ADMIN 여부 전달
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </LoadingOverlay>
-
-        <MenuFormModal
-          isOpen={formModalOpen}
-          onClose={() => setFormModalOpen(false)}
-          onSuccess={handleFormSuccess}
-          menuId={formData.menuId}
-          parentId={formData.parentId}
-          menuType={formData.menu_type}
-          level={formData.level}
-          parentCompanyCode={formData.parentCompanyCode}
-          uiTexts={uiTexts}
-        />
-
-        <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>메뉴 삭제</AlertDialogTitle>
-              <AlertDialogDescription>
-                해당 메뉴를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
-              </AlertDialogDescription>
-            </AlertDialogHeader>
-            <AlertDialogFooter>
-              <AlertDialogCancel>취소</AlertDialogCancel>
-              <AlertDialogAction onClick={confirmDelete}>삭제</AlertDialogAction>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialog>
-
-        <MenuCopyDialog
-          menuObjid={selectedMenuId ? parseInt(selectedMenuId, 10) : null}
-          menuName={selectedMenuName}
-          open={copyDialogOpen}
-          onOpenChange={setCopyDialogOpen}
-          onCopyComplete={handleCopyComplete}
-        />
       </div>
 
-      {/* Scroll to Top 버튼 (모바일/태블릿 전용) */}
-      <ScrollToTop />
+      <LoadingOverlay isLoading={deleting} text="삭제 중...">
+        <div className="v5-mm">
+          <MenuScopePanel
+            scope={scope}
+            adminCount={adminMenus.length}
+            userCount={userMenus.length}
+            onChange={setScope}
+          />
+
+          <MenuTreePanel
+            menus={menus}
+            selectedId={selectedId}
+            expandedIds={expanded}
+            searchText={searchText}
+            onSelect={handleSelect}
+            onToggleExpand={handleToggleExpand}
+            onSearchChange={setSearchText}
+            onAddTop={handleAddTop}
+            onMove={handleMove}
+          />
+
+          <section className="v5-mm-col v5-mm-col-detail">
+            <div className="v5-mm-vt">
+              <div className="v5-mm-vt-list">
+                <button
+                  className={`v5-mm-vt-btn${view === "overview" ? " on" : ""}`}
+                  onClick={() => setView("overview")}
+                >
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <rect x="3" y="3" width="7" height="7" rx="1" />
+                    <rect x="14" y="3" width="7" height="7" rx="1" />
+                    <rect x="3" y="14" width="7" height="7" rx="1" />
+                    <rect x="14" y="14" width="7" height="7" rx="1" />
+                  </svg>
+                  Overview
+                </button>
+                <button
+                  className={`v5-mm-vt-btn${view === "settings" ? " on" : ""}`}
+                  onClick={() => setView("settings")}
+                  disabled={!selectedMenu}
+                >
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <circle cx="12" cy="12" r="3" />
+                    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                  </svg>
+                  Settings
+                </button>
+                <button
+                  className={`v5-mm-vt-btn${view === "activity" ? " on" : ""}`}
+                  onClick={() => setView("activity")}
+                >
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+                  </svg>
+                  Activity
+                </button>
+              </div>
+            </div>
+
+            {view === "overview" && <MenuOverviewPanel menus={menus} selectedId={selectedId} />}
+            {view === "settings" && selectedMenu && (
+              <MenuSettingsPanel
+                menu={selectedMenu}
+                parentName={parentName}
+                onSaved={handleSavedInline}
+                onDelete={requestDelete}
+                onOpenAdvanced={handleOpenAdvanced}
+              />
+            )}
+            {view === "settings" && !selectedMenu && (
+              <div className="v5-mm-pane on v5-mm-pane-wrap">
+                <div className="v5-mm-empty">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                    <circle cx="12" cy="12" r="3" />
+                    <path d="M12 1v6M12 17v6M4.2 4.2l4.3 4.3M15.5 15.5l4.3 4.3M1 12h6M17 12h6M4.2 19.8l4.3-4.3M15.5 8.5l4.3-4.3" />
+                  </svg>
+                  <div>트리에서 L2/L3 항목을 선택하세요</div>
+                </div>
+              </div>
+            )}
+            {view === "activity" && <MenuActivityPanel />}
+          </section>
+        </div>
+      </LoadingOverlay>
+
+      <MenuFormModal
+        isOpen={formModalOpen}
+        onClose={() => setFormModalOpen(false)}
+        onSuccess={handleFormSuccess}
+        menuId={formModalData.menuId}
+        parentId={formModalData.parentId}
+        menuType={formModalData.menu_type}
+        level={formModalData.level}
+        parentCompanyCode={formModalData.parentCompanyCode}
+        uiTexts={{}}
+      />
+
+      <MenuCopyDialog
+        menuObjid={copyTarget.id ? parseInt(copyTarget.id, 10) : null}
+        menuName={copyTarget.name}
+        open={copyDialogOpen}
+        onOpenChange={setCopyDialogOpen}
+        onCopyComplete={async () => {
+          await loadMenus(false);
+          toast.success("메뉴 복사가 완료되었습니다");
+        }}
+      />
+
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>메뉴 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              해당 메뉴를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmDelete}>삭제</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <AlertDialog
+        open={confirmState.open}
+        onOpenChange={(o) => {
+          if (!o) resolveConfirm(false);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{confirmState.title}</AlertDialogTitle>
+            <AlertDialogDescription>{confirmState.description}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => resolveConfirm(false)}>
+              {confirmState.cancelLabel}
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={() => resolveConfirm(true)}>
+              {confirmState.okLabel}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/frontend/components/admin/menu/MenuActivityPanel.tsx b/frontend/components/admin/menu/MenuActivityPanel.tsx
new file mode 100644
index 00000000..257e422f
--- /dev/null
+++ b/frontend/components/admin/menu/MenuActivityPanel.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import React from "react";
+
+// NOTE: 실제 audit/activity API가 생기면 여기서 호출. 현재는 mock.
+const MOCK = [
+  { kind: "edit", who: "gbpark", msg: "메뉴명 수정", target: "메뉴 관리", meta: "mnu_00231 · 메뉴관리 → 메뉴 관리", time: "2일 전" },
+  { kind: "add", who: "gbpark", msg: "하위 메뉴 추가", target: "공통 코드 / 다국어", meta: "mnu_00248 · /admin/i18n", time: "4일 전" },
+  { kind: "edit", who: "park", msg: "URL 변경", target: "화면 관리", meta: "/admin/screen → /admin/screenMng", time: "6일 전" },
+  { kind: "del", who: "gbpark", msg: "메뉴 비활성화", target: "테스트", meta: "mnu_00197 · status: inactive", time: "1주 전" },
+];
+
+const iconFor = (kind: string) => {
+  if (kind === "add")
+    return (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+        <path d="M12 5v14M5 12h14" />
+      </svg>
+    );
+  if (kind === "del")
+    return (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+        <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+      </svg>
+    );
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+      <path d="m18.5 2.5 3 3L12 15l-4 1 1-4z" />
+    </svg>
+  );
+};
+
+export function MenuActivityPanel() {
+  return (
+    <div className="v5-mm-pane on v5-mm-pane-wrap">
+      <div style={{ marginBottom: "1rem" }}>
+        <div className="v5-mm-step" style={{ marginBottom: ".4rem" }}>
+          <span className="num">03</span>Activity
+        </div>
+        <h2 style={{ margin: 0, fontSize: "1.35rem", fontWeight: 700, letterSpacing: "-.025em" }}>
+          활동 로그 <span style={{ fontSize: ".72rem", color: "var(--v5-text-muted)", fontWeight: 500 }}>· 최근 {MOCK.length}건</span>
+        </h2>
+        <p style={{ margin: ".35rem 0 1rem", fontSize: ".7rem", color: "var(--v5-text-muted)" }}>
+          * 현재는 샘플 데이터입니다. audit 로그 API 연동 예정.
+        </p>
+      </div>
+
+      <div className="v5-mm-act-list">
+        {MOCK.map((a, i) => (
+          <div className="v5-mm-act" key={i}>
+            <div className={`v5-mm-act-ico ${a.kind}`}>{iconFor(a.kind)}</div>
+            <div className="v5-mm-act-body">
+              <div className="v5-mm-act-title">
+                <b>{a.who}</b> {a.msg} · <b>{a.target}</b>
+              </div>
+              <div className="v5-mm-act-meta">{a.meta}</div>
+            </div>
+            <span className="v5-mm-act-time">{a.time}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/menu/MenuOverviewPanel.tsx b/frontend/components/admin/menu/MenuOverviewPanel.tsx
new file mode 100644
index 00000000..b568270d
--- /dev/null
+++ b/frontend/components/admin/menu/MenuOverviewPanel.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import React, { useMemo } from "react";
+import type { MenuItem } from "@/lib/api/menu";
+
+interface Props {
+  menus: MenuItem[];
+  selectedId: string;
+}
+
+export function MenuOverviewPanel({ menus, selectedId }: Props) {
+  const stats = useMemo(() => {
+    // 선택된 노드가 없으면 전체 기준, 있으면 L1이면 그 하위 전체, L2면 그 하위 자손
+    const selected = menus.find((m) => String(m.objid ?? m.OBJID) === selectedId);
+    const selectedLev = selected ? Number(selected.lev ?? selected.LEV ?? 1) : 0;
+
+    const descendants = (rootId: string): MenuItem[] => {
+      const collected: MenuItem[] = [];
+      const visit = (id: string) => {
+        for (const m of menus) {
+          const mid = String(m.objid ?? m.OBJID);
+          const pid = String(m.parent_obj_id ?? m.PARENT_OBJ_ID ?? "0");
+          if (pid === id) {
+            collected.push(m);
+            visit(mid);
+          }
+        }
+      };
+      visit(rootId);
+      return collected;
+    };
+
+    const scope = selected ? [selected, ...descendants(selectedId)] : menus;
+
+    const total = scope.length;
+    const active = scope.filter((m) => (m.status ?? m.STATUS ?? "").toString().toLowerCase() === "active").length;
+    const inactive = total - active;
+    const linked = scope.filter((m) => (m.menu_url ?? m.MENU_URL ?? "").trim().length > 0).length;
+
+    return { total, active, inactive, linked, selectedLev, selectedName: selected ? (selected.menu_name_kor ?? selected.MENU_NAME_KOR ?? "") : "" };
+  }, [menus, selectedId]);
+
+  return (
+    <div className="v5-mm-pane on v5-mm-pane-wrap">
+      <div style={{ marginBottom: "1.2rem" }}>
+        <div className="v5-mm-step" style={{ marginBottom: ".4rem" }}>
+          <span className="num">03</span>Overview
+        </div>
+        <h2 style={{ margin: 0, fontSize: "1.35rem", fontWeight: 700, letterSpacing: "-.025em" }}>
+          {stats.selectedName || "전체 메뉴"}
+          <span style={{ fontSize: ".72rem", color: "var(--v5-text-muted)", fontWeight: 500, marginLeft: ".55rem" }}>
+            · {stats.total}개 항목
+          </span>
+        </h2>
+        <p style={{ margin: ".35rem 0 0", fontSize: ".7rem", color: "var(--v5-text-muted)" }}>
+          트리에서 L1을 선택하면 해당 카테고리의 하위 전체 통계가 표시됩니다.
+        </p>
+      </div>
+
+      <div className="v5-mm-stats">
+        <div className="v5-mm-stat">
+          <div className="v5-mm-stat-lbl">전체</div>
+          <div className="v5-mm-stat-val">
+            <span className="n">{stats.total}</span>
+            <span className="u">items</span>
+          </div>
+        </div>
+        <div className="v5-mm-stat">
+          <div className="v5-mm-stat-lbl">활성</div>
+          <div className="v5-mm-stat-val">
+            <span className="n ok">{stats.active}</span>
+            <span className="u">/ {stats.total}</span>
+          </div>
+        </div>
+        <div className="v5-mm-stat">
+          <div className="v5-mm-stat-lbl">비활성</div>
+          <div className="v5-mm-stat-val">
+            <span className="n off">{stats.inactive}</span>
+            <span className="u">disabled</span>
+          </div>
+        </div>
+        <div className="v5-mm-stat">
+          <div className="v5-mm-stat-lbl">URL 연결</div>
+          <div className="v5-mm-stat-val">
+            <span className="n">{stats.linked}</span>
+            <span className="u">linked</span>
+          </div>
+        </div>
+      </div>
+
+      <div style={{ padding: "2rem 1rem", textAlign: "center", color: "var(--v5-text-muted)", fontSize: ".72rem",
+        border: "1px dashed var(--v5-border)", borderRadius: "10px", background: "var(--v5-surface-solid)" }}>
+        L2 메뉴를 클릭하면 Settings 탭으로 자동 전환되어 편집할 수 있습니다.
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/menu/MenuScopePanel.tsx b/frontend/components/admin/menu/MenuScopePanel.tsx
new file mode 100644
index 00000000..9f460c58
--- /dev/null
+++ b/frontend/components/admin/menu/MenuScopePanel.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+
+type Scope = "admin" | "user";
+
+interface Props {
+  scope: Scope;
+  adminCount: number;
+  userCount: number;
+  onChange: (s: Scope) => void;
+}
+
+export function MenuScopePanel({ scope, adminCount, userCount, onChange }: Props) {
+  return (
+    <aside className="v5-mm-col v5-mm-col-scope">
+      <div className="v5-mm-col-hd">
+        <div>
+          <div className="v5-mm-step">
+            <span className="num">01</span>Scope
+          </div>
+          <h3>스코프</h3>
+          <p>메뉴 타입을 선택하세요</p>
+        </div>
+      </div>
+      <div className="v5-mm-scope-list">
+        <div
+          className={`v5-mm-scope${scope === "admin" ? " on" : ""}`}
+          onClick={() => onChange("admin")}
+        >
+          <div className="v5-mm-scope-top">
+            <div className="v5-mm-scope-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M12 2 2 7l10 5 10-5-10-5z" />
+                <path d="m2 17 10 5 10-5M2 12l10 5 10-5" />
+              </svg>
+            </div>
+            <div className="v5-mm-scope-cnt">{adminCount}</div>
+          </div>
+          <div>
+            <div className="v5-mm-scope-name">관리자</div>
+            <div className="v5-mm-scope-desc">시스템·업무·리포트 관리 화면</div>
+          </div>
+        </div>
+
+        <div
+          className={`v5-mm-scope${scope === "user" ? " on" : ""}`}
+          onClick={() => onChange("user")}
+        >
+          <div className="v5-mm-scope-top">
+            <div className="v5-mm-scope-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+                <circle cx="12" cy="7" r="4" />
+              </svg>
+            </div>
+            <div className="v5-mm-scope-cnt">{userCount}</div>
+          </div>
+          <div>
+            <div className="v5-mm-scope-name">사용자</div>
+            <div className="v5-mm-scope-desc">최종 사용자 대시보드·업무</div>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/frontend/components/admin/menu/MenuSettingsPanel.tsx b/frontend/components/admin/menu/MenuSettingsPanel.tsx
new file mode 100644
index 00000000..a5ae13dc
--- /dev/null
+++ b/frontend/components/admin/menu/MenuSettingsPanel.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { menuApi } from "@/lib/api/menu";
+import type { MenuItem, MenuFormData } from "@/lib/api/menu";
+
+interface Props {
+  menu: MenuItem;
+  parentName: string;
+  onSaved: () => void;
+  onDelete: (menuId: string) => void;
+  onOpenAdvanced: (menuId: string) => void;
+}
+
+interface FormState {
+  menuNameKor: string;
+  menuUrl: string;
+  menuDesc: string;
+  menuIcon: string;
+  seq: number;
+  companyCode: string;
+  status: string;
+  langKey: string;
+}
+
+const toForm = (m: MenuItem): FormState => ({
+  menuNameKor: m.menu_name_kor ?? m.MENU_NAME_KOR ?? "",
+  menuUrl: m.menu_url ?? m.MENU_URL ?? "",
+  menuDesc: m.menu_desc ?? m.MENU_DESC ?? "",
+  menuIcon: m.menu_icon ?? m.MENU_ICON ?? "",
+  seq: Number(m.seq ?? m.SEQ ?? 1),
+  companyCode: m.company_code ?? m.COMPANY_CODE ?? "*",
+  // DB는 소문자 'active'/'inactive' — 원본 그대로 유지
+  status: (m.status ?? m.STATUS ?? "active").toString().toLowerCase(),
+  langKey: m.lang_key ?? m.LANG_KEY ?? "",
+});
+
+export function MenuSettingsPanel({ menu, parentName, onSaved, onDelete, onOpenAdvanced }: Props) {
+  const menuId = String(menu.objid ?? menu.OBJID ?? "");
+  const initial = toForm(menu);
+  const [form, setForm] = useState<FormState>(initial);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setForm(toForm(menu));
+  }, [menu]);
+
+  const isDirty =
+    form.menuNameKor !== initial.menuNameKor ||
+    form.menuUrl !== initial.menuUrl ||
+    form.menuDesc !== initial.menuDesc ||
+    form.menuIcon !== initial.menuIcon ||
+    form.seq !== initial.seq ||
+    form.companyCode !== initial.companyCode ||
+    form.status !== initial.status ||
+    form.langKey !== initial.langKey;
+
+  const set = <K extends keyof FormState>(k: K, v: FormState[K]) =>
+    setForm((f) => ({ ...f, [k]: v }));
+
+  const handleSave = async () => {
+    if (!form.menuNameKor.trim()) {
+      toast.error("메뉴명을 입력하세요");
+      return;
+    }
+    setSaving(true);
+    try {
+      const payload: MenuFormData = {
+        objid: menuId,
+        parentObjId: String(menu.parent_obj_id ?? menu.PARENT_OBJ_ID ?? "0"),
+        menuNameKor: form.menuNameKor,
+        menuUrl: form.menuUrl,
+        menuDesc: form.menuDesc,
+        seq: form.seq,
+        menu_type: String(menu.menu_type ?? menu.MENU_TYPE ?? "1"),
+        status: form.status,
+        company_code: form.companyCode,
+        langKey: form.langKey || undefined,
+        menuIcon: form.menuIcon || undefined,
+      };
+      const resp = await menuApi.updateMenu(menuId, payload);
+      if (resp.success) {
+        toast.success(resp.message || "저장되었습니다");
+        onSaved();
+      } else {
+        toast.error(resp.message || "저장 실패");
+      }
+    } catch (e) {
+      toast.error("저장 중 오류가 발생했습니다");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const statusOn = form.status === "active";
+
+  return (
+    <div className="v5-mm-pane on v5-mm-pane-wrap">
+      <div className="v5-mm-sv-hero">
+        <div className="v5-mm-sv-hero-top">
+          <div className="v5-mm-sv-hero-ico">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M4 6h16M4 12h16M4 18h10" />
+            </svg>
+          </div>
+          <div className="v5-mm-sv-hero-info">
+            <div className="v5-mm-sv-hero-path">
+              관리자 / <b>{parentName || "최상위"}</b>
+            </div>
+            <h2>
+              {form.menuNameKor || "(이름 없음)"}
+              <span className={`v5-mm-chip${statusOn ? " on" : ""}`}>{statusOn ? "Active" : "Inactive"}</span>
+              <span className="v5-mm-chip scope">{form.companyCode === "*" ? "공용 *" : form.companyCode || "—"}</span>
+              <span className="v5-mm-chip">L{Number(menu.lev ?? menu.LEV ?? 1)}</span>
+            </h2>
+          </div>
+        </div>
+        <div className="v5-mm-sv-hero-meta">
+          <span>
+            OBJID <b>{menuId}</b>
+          </span>
+          <span>
+            수정 <b>{menu.regdate ?? menu.REGDATE ?? "—"}</b>
+          </span>
+          <span>
+            작성 <b>{menu.writer ?? menu.WRITER ?? "—"}</b>
+          </span>
+        </div>
+      </div>
+
+      <div className="v5-mm-sv-grid">
+        <div className="v5-mm-sv-side">
+          <h4>기본 정보</h4>
+          <p>메뉴 이름, 다국어 키, 사용자에게 표시되는 설명을 설정합니다.</p>
+        </div>
+        <div className="v5-mm-sv-fields">
+          <div className="v5-mm-sv-row">
+            <label>
+              메뉴명<span className="req">*</span>
+            </label>
+            <input
+              className="v5-mm-inp"
+              value={form.menuNameKor}
+              onChange={(e) => set("menuNameKor", e.target.value)}
+            />
+          </div>
+          <div className="v5-mm-sv-row-2">
+            <div className="v5-mm-sv-row">
+              <label>다국어 키</label>
+              <input
+                className="v5-mm-inp"
+                value={form.langKey}
+                onChange={(e) => set("langKey", e.target.value)}
+                placeholder="예) menu.management"
+              />
+            </div>
+            <div className="v5-mm-sv-row">
+              <label>아이콘</label>
+              <input
+                className="v5-mm-inp"
+                value={form.menuIcon}
+                onChange={(e) => set("menuIcon", e.target.value)}
+                placeholder="Lucide 아이콘명"
+              />
+            </div>
+          </div>
+          <div className="v5-mm-sv-row">
+            <label>설명</label>
+            <textarea
+              className="v5-mm-inp"
+              value={form.menuDesc}
+              onChange={(e) => set("menuDesc", e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="v5-mm-sv-grid">
+        <div className="v5-mm-sv-side">
+          <h4>연결</h4>
+          <p>메뉴 클릭 시 이동할 URL 또는 화면을 지정합니다. 화면 선택은 고급 편집에서 가능합니다.</p>
+        </div>
+        <div className="v5-mm-sv-fields">
+          <div className="v5-mm-sv-row">
+            <label>URL</label>
+            <input
+              className="v5-mm-inp"
+              value={form.menuUrl}
+              onChange={(e) => set("menuUrl", e.target.value)}
+              placeholder="/admin/..."
+            />
+            <div className="help">화면/대시보드/POP 할당은 고급 편집을 이용하세요.</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="v5-mm-sv-grid">
+        <div className="v5-mm-sv-side">
+          <h4>스코프 &amp; 표시</h4>
+          <p>어느 회사에서 보이고 트리 상 어떤 순서/상태로 나타날지 결정합니다.</p>
+        </div>
+        <div className="v5-mm-sv-fields">
+          <div className="v5-mm-sv-row-2">
+            <div className="v5-mm-sv-row">
+              <label>회사</label>
+              <input
+                className="v5-mm-inp"
+                value={form.companyCode}
+                onChange={(e) => set("companyCode", e.target.value)}
+                placeholder="* 또는 회사 코드"
+              />
+            </div>
+            <div className="v5-mm-sv-row">
+              <label>부모</label>
+              <input className="v5-mm-inp" value={parentName || "최상위"} readOnly />
+            </div>
+          </div>
+          <div className="v5-mm-sv-row-2">
+            <div className="v5-mm-sv-row">
+              <label>순서</label>
+              <input
+                className="v5-mm-inp"
+                type="number"
+                value={form.seq}
+                onChange={(e) => set("seq", Number(e.target.value) || 0)}
+              />
+            </div>
+            <div className="v5-mm-sv-row">
+              <label>상태</label>
+              <label
+                className={`v5-mm-tg${statusOn ? " on" : ""}`}
+                onClick={() => set("status", statusOn ? "inactive" : "active")}
+              >
+                <span className="sw" />
+                <span className="lbl">{statusOn ? "활성" : "비활성"}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="v5-mm-sv-ft">
+        <div style={{ display: "flex", gap: ".4rem" }}>
+          <button className="v5-mm-btn danger sm" onClick={() => onDelete(menuId)}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+            </svg>
+            삭제
+          </button>
+          <button className="v5-mm-btn sm" onClick={() => onOpenAdvanced(menuId)}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+            </svg>
+            고급 편집
+          </button>
+        </div>
+        <div style={{ display: "flex", gap: ".4rem", alignItems: "center" }}>
+          {isDirty && (
+            <span className="v5-mm-unsaved">
+              <span className="d" />
+              저장되지 않음
+            </span>
+          )}
+          <button
+            className="v5-mm-btn"
+            disabled={!isDirty || saving}
+            onClick={() => setForm(initial)}
+          >
+            되돌리기
+          </button>
+          <button className="v5-mm-btn primary" disabled={!isDirty || saving} onClick={handleSave}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="M5 12l5 5L20 7" />
+            </svg>
+            {saving ? "저장 중…" : "저장"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/admin/menu/MenuTreePanel.tsx b/frontend/components/admin/menu/MenuTreePanel.tsx
new file mode 100644
index 00000000..c49d1638
--- /dev/null
+++ b/frontend/components/admin/menu/MenuTreePanel.tsx
@@ -0,0 +1,352 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import type { MenuItem } from "@/lib/api/menu";
+
+export type DropPos = "before" | "after" | "into";
+
+interface TreeNode {
+  id: string;
+  parentId: string;
+  name: string;
+  url: string;
+  lev: number;
+  status: string;
+  raw: Record<string, any>;
+  children: TreeNode[];
+}
+
+interface Props {
+  menus: MenuItem[];
+  selectedId: string;
+  expandedIds: Set<string>;
+  searchText: string;
+  onSelect: (id: string) => void;
+  onToggleExpand: (id: string) => void;
+  onSearchChange: (s: string) => void;
+  onAddTop: () => void;
+  onMove: (sourceId: string, targetId: string, pos: DropPos) => void;
+}
+
+const buildTree = (menus: MenuItem[]): TreeNode[] => {
+  const map = new Map<string, TreeNode>();
+  const roots: TreeNode[] = [];
+
+  for (const m of menus) {
+    const id = String(m.objid ?? m.OBJID ?? "");
+    if (!id) continue;
+    map.set(id, {
+      id,
+      parentId: String(m.parent_obj_id ?? m.PARENT_OBJ_ID ?? "0"),
+      name: m.menu_name_kor ?? m.MENU_NAME_KOR ?? "(no name)",
+      url: m.menu_url ?? m.MENU_URL ?? "",
+      lev: Number(m.lev ?? m.LEV ?? 1),
+      status: (m.status ?? m.STATUS ?? "").toString().toLowerCase(),
+      raw: m as any,
+      children: [],
+    });
+  }
+
+  map.forEach((node) => {
+    if (node.parentId && node.parentId !== "0" && map.has(node.parentId)) {
+      map.get(node.parentId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  });
+
+  const sortRec = (nodes: TreeNode[]) => {
+    nodes.sort((a, b) => (Number(a.raw.seq ?? a.raw.SEQ ?? 0) - Number(b.raw.seq ?? b.raw.SEQ ?? 0)));
+    nodes.forEach((n) => sortRec(n.children));
+  };
+  sortRec(roots);
+
+  return roots;
+};
+
+const filterTree = (nodes: TreeNode[], q: string): TreeNode[] => {
+  if (!q) return nodes;
+  const lower = q.toLowerCase();
+  const rec = (node: TreeNode): TreeNode | null => {
+    const matchSelf =
+      node.name.toLowerCase().includes(lower) || node.url.toLowerCase().includes(lower);
+    const filteredChildren = node.children.map(rec).filter(Boolean) as TreeNode[];
+    if (matchSelf || filteredChildren.length) {
+      return { ...node, children: filteredChildren };
+    }
+    return null;
+  };
+  return nodes.map(rec).filter(Boolean) as TreeNode[];
+};
+
+const StatusDot = ({ on }: { on: boolean }) => (
+  <span className={`v5-mm-dot${on ? " on" : ""}`} />
+);
+
+interface RowProps {
+  node: TreeNode;
+  selectedId: string;
+  expandedIds: Set<string>;
+  draggingId: string | null;
+  dropHint: { id: string; pos: DropPos } | null;
+  onSelect: (id: string) => void;
+  onToggleExpand: (id: string) => void;
+  onDragStart: (id: string) => void;
+  onDragEnd: () => void;
+  onDragOver: (e: React.DragEvent, id: string, lev: number) => void;
+  onDrop: (e: React.DragEvent, id: string) => void;
+}
+
+const NodeRow: React.FC<RowProps> = ({
+  node,
+  selectedId,
+  expandedIds,
+  draggingId,
+  dropHint,
+  onSelect,
+  onToggleExpand,
+  onDragStart,
+  onDragEnd,
+  onDragOver,
+  onDrop,
+}) => {
+  const hasChildren = node.children.length > 0;
+  const open = expandedIds.has(node.id);
+  const sel = selectedId === node.id;
+  const dragging = draggingId === node.id;
+  const dropCls =
+    dropHint && dropHint.id === node.id
+      ? dropHint.pos === "before"
+        ? "drop-before"
+        : dropHint.pos === "after"
+        ? "drop-after"
+        : "drop-into"
+      : "";
+  const cls = [
+    "v5-mm-node",
+    node.lev === 1 ? "l1" : node.lev === 2 ? "l2" : "l3",
+    hasChildren ? "" : "leaf",
+    open ? "open" : "",
+    sel ? "on" : "",
+    dragging ? "dragging" : "",
+    dropCls,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const isActive = node.status === "active";
+
+  return (
+    <>
+      <div
+        className={cls}
+        onClick={() => onSelect(node.id)}
+        draggable
+        onDragStart={(e) => {
+          e.stopPropagation();
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.setData("text/plain", node.id);
+          onDragStart(node.id);
+        }}
+        onDragEnd={onDragEnd}
+        onDragOver={(e) => onDragOver(e, node.id, node.lev)}
+        onDrop={(e) => onDrop(e, node.id)}
+      >
+        <span
+          className="v5-mm-caret"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (hasChildren) onToggleExpand(node.id);
+          }}
+        >
+          {hasChildren && (
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+              <path d="m9 5 7 7-7 7" />
+            </svg>
+          )}
+        </span>
+        {node.lev === 1 ? (
+          <span className="v5-mm-node-ico">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <rect x="3" y="3" width="7" height="7" rx="1.5" />
+              <rect x="14" y="3" width="7" height="7" rx="1.5" />
+              <rect x="3" y="14" width="7" height="7" rx="1.5" />
+              <rect x="14" y="14" width="7" height="7" rx="1.5" />
+            </svg>
+          </span>
+        ) : (
+          <StatusDot on={isActive} />
+        )}
+        <div className="v5-mm-node-body">
+          <div className="v5-mm-node-name">{node.name}</div>
+          {node.lev > 1 && node.url && <div className="v5-mm-node-meta">{node.url}</div>}
+        </div>
+        {node.lev === 1 && hasChildren && <span className="v5-mm-cnt">{node.children.length}</span>}
+      </div>
+      {open && hasChildren && (
+        <div className="v5-mm-sub" style={{ display: "block" }}>
+          {node.children.map((child) => (
+            <NodeRow
+              key={child.id}
+              node={child}
+              selectedId={selectedId}
+              expandedIds={expandedIds}
+              draggingId={draggingId}
+              dropHint={dropHint}
+              onSelect={onSelect}
+              onToggleExpand={onToggleExpand}
+              onDragStart={onDragStart}
+              onDragEnd={onDragEnd}
+              onDragOver={onDragOver}
+              onDrop={onDrop}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+};
+
+export function MenuTreePanel({
+  menus,
+  selectedId,
+  expandedIds,
+  searchText,
+  onSelect,
+  onToggleExpand,
+  onSearchChange,
+  onAddTop,
+  onMove,
+}: Props) {
+  const tree = useMemo(() => buildTree(menus), [menus]);
+  const filtered = useMemo(() => filterTree(tree, searchText), [tree, searchText]);
+
+  const total = menus.length;
+  const rootCount = tree.length;
+
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dropHint, setDropHint] = useState<{ id: string; pos: DropPos } | null>(null);
+  const [treeRef] = useAutoAnimate<HTMLDivElement>({ duration: 280, easing: "cubic-bezier(.16,1,.3,1)" });
+
+  const handleDragStart = (id: string) => setDraggingId(id);
+  const handleDragEnd = () => {
+    setDraggingId(null);
+    setDropHint(null);
+  };
+  const handleDragOver = (e: React.DragEvent, id: string, lev: number) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!draggingId || draggingId === id) return;
+    e.dataTransfer.dropEffect = "move";
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const y = e.clientY - rect.top;
+    const h = rect.height;
+    // L1: 카드형 — before/after 50/50 (자식 승격이 용이)
+    // L2/L3: 3-zone — 상단 33% before / 중앙 34% into (하위로 넣기) / 하단 33% after
+    let pos: DropPos;
+    if (lev === 1) {
+      pos = y < h * 0.5 ? "before" : "after";
+    } else {
+      if (y < h * 0.33) pos = "before";
+      else if (y > h * 0.67) pos = "after";
+      else pos = "into";
+    }
+    setDropHint((prev) => (prev && prev.id === id && prev.pos === pos ? prev : { id, pos }));
+  };
+  const handleDrop = (e: React.DragEvent, id: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const sourceId = draggingId || e.dataTransfer.getData("text/plain");
+    const pos = dropHint?.pos || "after";
+    if (sourceId && sourceId !== id) {
+      onMove(sourceId, id, pos);
+    }
+    setDraggingId(null);
+    setDropHint(null);
+  };
+
+  return (
+    <section className="v5-mm-col v5-mm-col-tree">
+      <div className="v5-mm-col-hd">
+        <div>
+          <div className="v5-mm-step">
+            <span className="num">02</span>Tree
+          </div>
+          <h3>메뉴 트리</h3>
+          <p>
+            {rootCount}개 · {total}개 항목
+          </p>
+        </div>
+        <button className="v5-mm-hd-add" title="최상위 메뉴 추가" onClick={onAddTop}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
+            <path d="M12 5v14M5 12h14" />
+          </svg>
+        </button>
+      </div>
+
+      <div className="v5-mm-tree-srch">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <circle cx="11" cy="11" r="7" />
+          <path d="m21 21-4.3-4.3" />
+        </svg>
+        <input
+          placeholder="트리 검색…"
+          value={searchText}
+          onChange={(e) => onSearchChange(e.target.value)}
+        />
+      </div>
+
+      <div
+        className="v5-mm-tree"
+        ref={treeRef}
+        onDragOver={(e) => {
+          if (!draggingId) return;
+          // 자식 노드가 이벤트 처리 중이면(dropHint 이미 있음) 무시
+          if (dropHint) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+        }}
+        onDrop={(e) => {
+          if (!draggingId) return;
+          if (dropHint) return; // 자식 노드가 처리
+          e.preventDefault();
+          // 마지막 L1의 after로 이동
+          const lastL1 = [...filtered].reverse()[0];
+          if (lastL1 && draggingId !== lastL1.id) {
+            onMove(draggingId, lastL1.id, "after");
+          }
+          setDraggingId(null);
+          setDropHint(null);
+        }}
+      >
+        {filtered.length === 0 ? (
+          <div className="v5-mm-empty">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <circle cx="11" cy="11" r="7" />
+              <path d="m21 21-4.3-4.3" />
+            </svg>
+            <div>검색 결과가 없습니다</div>
+          </div>
+        ) : (
+          filtered.map((node) => (
+            <NodeRow
+              key={node.id}
+              node={node}
+              selectedId={selectedId}
+              expandedIds={expandedIds}
+              draggingId={draggingId}
+              dropHint={dropHint}
+              onSelect={onSelect}
+              onToggleExpand={onToggleExpand}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+            />
+          ))
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 0b0ec87e..734d38e3 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -104,9 +104,9 @@ const getMenuIcon = (menuName: string, dbIconName?: string | null) => {
 
 const convertMenuToUI = (menus: MenuItem[], userInfo: ExtendedUserInfo | null, parentId: string = "0", parentPath: string = ""): any[] => {
   const filteredMenus = menus
-    .filter((menu) => (menu.parent_obj_id ?? menu.PARENT_OBJ_ID) === parentId)
-    .filter((menu) => (menu.status ?? menu.STATUS) === "active")
-    .sort((a, b) => (a.seq ?? a.SEQ ?? 0) - (b.seq ?? b.SEQ ?? 0));
+    .filter((menu) => String(menu.parent_obj_id ?? menu.PARENT_OBJ_ID ?? "0") === String(parentId ?? "0"))
+    .filter((menu) => String(menu.status ?? menu.STATUS ?? "").toLowerCase() === "active")
+    .sort((a, b) => Number(a.seq ?? a.SEQ ?? 0) - Number(b.seq ?? b.SEQ ?? 0));
 
   if (parentId === "0") {
     const allMenus: any[] = [];
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index 8249e5e7..0d6fe91d 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -653,7 +653,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
     // 🆕 렉 구조 컴포넌트 처리 (v1, v2 모두 지원)
     if (comp.type === "component" && (componentType === "rack-structure" || componentType === "v2-rack-structure")) {
       // v2 컴포넌트 사용 (v1은 deprecated)
-      const { RackStructureComponent } = require("@/lib/registry/components/v2-rack-structure/RackStructureComponent");
+      const { RackStructureComponent } = require("@/lib/registry/components/domain/v2-rack-structure/RackStructureComponent");
       const componentConfig = (comp as any).componentConfig || {};
       // config가 중첩되어 있을 수 있음: componentConfig.config 또는 componentConfig 직접
       const rackConfig = componentConfig.config || componentConfig;
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index cd3de4e4..535fb6a0 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -1,12 +1,20 @@
 "use client";
 
 import { useState, useCallback, useEffect, useMemo, useRef } from "react";
-import { Database, Cog } from "lucide-react";
+import { Database, Cog, Monitor, Tablet, Smartphone, ChevronDown, Eye, EyeOff, Zap, Grid3X3, Settings } from "lucide-react";
 import { cn } from "@/lib/utils";
 // 좌측 패널의 수평 탭 → 수직 <details> 아코디언으로 전환 (2026-04-11)
 // shadcn Tabs 사용 없음. 필요 시 아래 import 재활성화.
 // import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   ScreenDefinition,
   ComponentData,
@@ -125,6 +133,7 @@ import { TableOptionsProvider } from "@/contexts/TableOptionsContext";
 import { SlimToolbar } from "./toolbar/SlimToolbar";
 import { V2PropertiesPanel } from "./panels/V2PropertiesPanel";
 import { FieldsPanel } from "./panels/FieldsPanel";
+import { type ViewType } from "./ViewTabBar";
 
 // 컴포넌트 초기화 (새 시스템)
 import "@/lib/registry/components";
@@ -194,6 +203,15 @@ export default function ScreenDesigner({
   const [isGeneratingMultilang, setIsGeneratingMultilang] = useState(false);
   const [showMultilangSettingsModal, setShowMultilangSettingsModal] = useState(false);
 
+  // ── 3뷰 탭 상태 (Phase G) ──
+  const [activeView, setActiveView] = useState<ViewType>("list");
+  // 비활성 뷰의 컴포넌트를 캐시. layout.components 는 항상 활성 뷰의 컴포넌트.
+  const viewLayoutsRef = useRef<Record<ViewType, ComponentData[]>>({
+    list: [],
+    create: [],
+    edit: [],
+  });
+
   // 🆕 화면에 할당된 메뉴 OBJID
   const [menuObjid, setMenuObjid] = useState<number | undefined>(undefined);
 
@@ -217,6 +235,7 @@ export default function ScreenDesigner({
     usePanelState(panelConfigs);
 
   const [selectedComponent, setSelectedComponent] = useState<ComponentData | null>(null);
+  const [isPropertiesPanelOpen, setIsPropertiesPanelOpen] = useState(true);
 
   // 🆕 탭 내부 컴포넌트 선택 상태 (중첩 구조 지원)
   const [selectedTabComponentInfo, setSelectedTabComponentInfo] = useState<{
@@ -237,6 +256,28 @@ export default function ScreenDesigner({
     component: any; // 패널 내부 컴포넌트 데이터
   } | null>(null);
 
+  // ── 3뷰 전환 (Phase G) ──
+  const switchView = useCallback((newView: ViewType) => {
+    if (newView === activeView) return;
+    // 현재 뷰의 컴포넌트를 캐시에 저장
+    viewLayoutsRef.current[activeView] = [...layout.components];
+    // 새 뷰의 컴포넌트를 로드
+    const nextComponents = viewLayoutsRef.current[newView] || [];
+    setLayout((prev) => ({ ...prev, components: nextComponents }));
+    setActiveView(newView);
+    // 선택 상태 초기화
+    setSelectedComponent(null);
+    setSelectedTabComponentInfo(null);
+    setSelectedPanelComponentInfo(null);
+  }, [activeView, layout.components]);
+
+  /** 각 뷰의 컴포넌트 수 (ViewTabBar 뱃지용) */
+  const viewCounts = useMemo<Record<ViewType, number>>(() => ({
+    list: activeView === "list" ? layout.components.length : (viewLayoutsRef.current.list?.length ?? 0),
+    create: activeView === "create" ? layout.components.length : (viewLayoutsRef.current.create?.length ?? 0),
+    edit: activeView === "edit" ? layout.components.length : (viewLayoutsRef.current.edit?.length ?? 0),
+  }), [activeView, layout.components.length]);
+
   // 컴포넌트 선택 시 통합 패널 자동 열기
   const handleComponentSelect = useCallback(
     (component: ComponentData | null) => {
@@ -1592,6 +1633,22 @@ export default function ScreenDesigner({
             });
 
             response = v2Response ? convertV2ToLegacy(v2Response) : null;
+
+            // ── 3뷰 로드 (Phase G): V2 응답에서 views 추출 ──
+            const rawViews = (v2Response as any)?.views;
+            if (rawViews) {
+              const toComponents = (v2Comps: any[]) => {
+                if (!v2Comps?.length) return [];
+                const converted = convertV2ToLegacy({ components: v2Comps } as any);
+                return converted?.components || [];
+              };
+              viewLayoutsRef.current.create = toComponents(rawViews.create);
+              viewLayoutsRef.current.edit = toComponents(rawViews.edit);
+            } else {
+              viewLayoutsRef.current.create = [];
+              viewLayoutsRef.current.edit = [];
+            }
+            // list 뷰는 메인 components 에서 로드 (아래 setLayout 이후 동기화)
           } else {
             response = await screenApi.getLayout(selectedScreen.screen_id);
           }
@@ -1654,6 +1711,10 @@ export default function ScreenDesigner({
             setHistory([layoutWithDefaultGrid]);
             setHistoryIndex(0);
 
+            // ── 3뷰: list 뷰 캐시 동기화 + 뷰를 list 로 리셋 ──
+            viewLayoutsRef.current.list = layoutWithDefaultGrid.components;
+            setActiveView("list");
+
             // 파일 컴포넌트 데이터 복원 (비동기)
             restoreFileComponentsData(layoutWithDefaultGrid.components);
 
@@ -2099,15 +2160,34 @@ export default function ScreenDesigner({
       // 현재 선택된 테이블을 화면의 기본 테이블로 저장
       const currentMainTableName = tables.length > 0 ? tables[0].tableName : null;
 
+      // ── 3뷰 저장: 현재 뷰의 컴포넌트를 캐시에 동기화 ──
+      viewLayoutsRef.current[activeView] = updatedComponents;
+      const listComponents = activeView === "list" ? updatedComponents : (viewLayoutsRef.current.list || []);
+
       const layoutWithResolution = {
         ...layout,
-        components: updatedComponents,
+        components: listComponents, // 목록 뷰 = 메인 components (하위 호환)
         screenResolution: screenResolution,
-        mainTableName: currentMainTableName, // 화면의 기본 테이블
+        mainTableName: currentMainTableName,
       };
 
       // V2/POP API 사용 여부에 따라 분기
       const v2Layout = convertLegacyToV2(layoutWithResolution);
+
+      // 등록/수정 뷰 컴포넌트를 V2 변환하여 views 에 첨부
+      const createComps = viewLayoutsRef.current.create || [];
+      const editComps = viewLayoutsRef.current.edit || [];
+      const v2Views: Record<string, any> = {};
+      if (createComps.length > 0) {
+        v2Views.create = convertLegacyToV2({ ...layout, components: createComps }).components;
+      }
+      if (editComps.length > 0) {
+        v2Views.edit = convertLegacyToV2({ ...layout, components: editComps }).components;
+      }
+      if (Object.keys(v2Views).length > 0) {
+        (v2Layout as any).views = v2Views;
+      }
+
       if (USE_POP_API) {
         await screenApi.saveLayoutPop(selectedScreen.screen_id, v2Layout);
       } else if (USE_V2_API) {
@@ -2140,7 +2220,7 @@ export default function ScreenDesigner({
     } finally {
       setIsSaving(false);
     }
-  }, [selectedScreen, layout, screenResolution, tables, onScreenUpdate]);
+  }, [selectedScreen, layout, screenResolution, tables, onScreenUpdate, activeView]);
 
   // POP 미리보기 핸들러 (새 창에서 열기)
   const handlePopPreview = useCallback(() => {
@@ -6367,18 +6447,13 @@ export default function ScreenDesigner({
       >
         <TableOptionsProvider>
         <div className="bg-background flex h-full w-full flex-col">
-          {/* 상단 슬림 툴바 */}
+          {/* 상단 슬림 툴바 (tabs merged, resolution/grid moved to floating bar) */}
           <SlimToolbar
             screenName={selectedScreen?.screen_name}
-            tableName={selectedScreen?.table_name}
-            screenResolution={screenResolution}
             onBack={onBackToList}
             onSave={handleSave}
             isSaving={isSaving}
             onPreview={isPop ? handlePopPreview : undefined}
-            onResolutionChange={setScreenResolution}
-            gridSettings={layout.gridSettings}
-            onGridSettingsChange={updateGridSettings}
             onGenerateMultilang={handleGenerateMultilang}
             isGeneratingMultilang={isGeneratingMultilang}
             onOpenMultilangSettings={() => setShowMultilangSettingsModal(true)}
@@ -6390,102 +6465,35 @@ export default function ScreenDesigner({
             onMatchSize={handleMatchSize}
             onToggleLabels={handleToggleAllLabels}
             onShowShortcuts={() => setShowShortcutsModal(true)}
+            isPropertiesOpen={isPropertiesPanelOpen}
+            onToggleProperties={() => setIsPropertiesPanelOpen(v => !v)}
+            activeView={activeView}
+            onViewChange={switchView}
+            viewCounts={viewCounts}
           />
           {/* 메인 컨테이너 (패널들 + 캔버스) */}
           <div className="flex flex-1 overflow-hidden">
             {/* 통합 패널 - 좌측 사이드바 제거 후 너비 300px로 확장 */}
             {panelStates.v2?.isOpen && (
-              <div className="border-border bg-card flex h-full w-[200px] flex-col overflow-hidden border-r shadow-sm">
-                <div className="border-border flex shrink-0 items-center justify-between border-b px-4 py-3">
-                  <h3 className="text-foreground text-sm font-semibold">패널</h3>
-                  <button
-                    onClick={() => closePanel("v2")}
-                    className="text-muted-foreground hover:text-foreground focus-visible:ring-ring rounded-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-                  >
-                    ✕
-                  </button>
-                </div>
-                <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
-                  <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-
-                    <details open className="ide-section">
-                      <summary className="ide-section-header">컴포넌트</summary>
-                      <div className="ide-section-body">
-                      <ComponentsPanel
-                        tables={filteredTables}
-                        searchTerm={searchTerm}
-                        onSearchChange={setSearchTerm}
-                        onTableDragStart={(e, table, column) => {
-                          const dragData = {
-                            type: column ? "column" : "table",
-                            table,
-                            column,
-                          };
-                          e.dataTransfer.setData("application/json", JSON.stringify(dragData));
-                        }}
-                        selectedTableName={selectedScreen?.table_name}
-                        placedColumns={placedColumns}
-                        onTableSelect={handleTableSelect}
-                        showTableSelector={true}
-                      />
-                      </div>
-                    </details>
-
-                    {/* INVYONE 필드 섹션 (Phase 1+) — FieldConfig[] 편집 */}
-                    <details className="ide-section">
-                      <summary className="ide-section-header">필드</summary>
-                      <div className="ide-section-body">
-                        <FieldsPanel
-                          tableName={selectedScreen?.table_name ?? null}
-                          fields={selectedScreen?.fields ?? []}
-                          onFieldsChange={(next) =>
-                            onScreenUpdate?.({ fields: next } as any)
-                          }
-                        />
-                      </div>
-                    </details>
-
-                    {/* 레이어 관리 섹션 (DB 기반) */}
-                    <details className="ide-section">
-                      <summary className="ide-section-header">레이어</summary>
-                      <div className="ide-section-body">
-                      <LayerManagerPanel
-                        screenId={selectedScreen?.screen_id || null}
-                        activeLayerId={Number(activeLayerIdRef.current) || 1}
-                        onLayerChange={async (layerId) => {
-                          if (!selectedScreen?.screen_id) return;
-                          try {
-                            // 1. 현재 레이어 저장
-                            const curId = Number(activeLayerIdRef.current) || 1;
-                            const v2Layout = convertLegacyToV2({ ...layout, screenResolution });
-                            await screenApi.saveLayoutV2(selectedScreen.screen_id, { ...v2Layout, layerId: curId });
-                              
-                            // 2. 새 레이어 로드
-                            const data = await screenApi.getLayerLayout(selectedScreen.screen_id, layerId);
-                            if (data && data.components) {
-                              const legacy = convertV2ToLegacy(data);
-                              if (legacy) {
-                                setLayout((prev) => ({ ...prev, components: legacy.components }));
-                              } else {
-                                setLayout((prev) => ({ ...prev, components: [] }));
-                              }
-                            } else {
-                              setLayout((prev) => ({ ...prev, components: [] }));
-                            }
-                              
-                            setActiveLayerIdWithRef(layerId);
-                            setSelectedComponent(null);
-                          } catch (error) {
-                            console.error("레이어 전환 실패:", error);
-                            toast.error("레이어 전환에 실패했습니다.");
-                          }
-                        }}
-                        components={layout.components}
-                        zones={zones}
-                        onZonesChange={setZones}
-                      />
-                      </div>
-                    </details>
+              <div className="inv-left-panel">
+                {/* ── 좌측 패널: ComponentsPanel이 직접 채움 ── */}
+                <ComponentsPanel
+                  tables={filteredTables}
+                  searchTerm={searchTerm}
+                  onSearchChange={setSearchTerm}
+                  onTableDragStart={(e, table, column) => {
+                    const dragData = {
+                      type: column ? "column" : "table",
+                      table,
+                      column,
+                    };
+                    e.dataTransfer.setData("application/json", JSON.stringify(dragData));
+                  }}
+                  selectedTableName={selectedScreen?.table_name}
+                  placedColumns={placedColumns}
+                  onTableSelect={handleTableSelect}
+                  showTableSelector={true}
+                />
 
                     {/* ★ 좌측 편집 섹션 비활성 (2026-04-11, 우측 속성 패널로 이주 완료)
                      *  내부 500 줄 블록을 통째로 제거하는 대신 {false && (...)} 로
@@ -7008,17 +7016,87 @@ export default function ScreenDesigner({
                       </div>
                     </details>
                     )}
-                  </div>
-                </div>
               </div>
             )}
 
             {/* 메인 캔버스 영역 (스크롤 가능한 컨테이너) - GPU 가속 스크롤 적용 */}
             <div
               ref={canvasContainerRef}
-              className="bg-muted relative flex-1 overflow-auto px-16 py-6"
+              className={cn(
+                "bg-muted relative flex-1 overflow-auto px-16 py-6",
+                activeView !== "list" && "popup-view-canvas",
+              )}
               style={{ willChange: "scroll-position" }}
             >
+              {/* ── 팝업 뷰 안내 라벨 (Phase G) ── */}
+              {activeView !== "list" && (
+                <div className="popup-view-label">
+                  {activeView === "create" ? "등록 팝업" : "수정 팝업"} 편집 모드
+                </div>
+              )}
+              {/* ── Floating canvas tools (resolution + grid) ── */}
+              <div className="canvas-float-tools">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button type="button" className="ft-cell">
+                      {screenResolution?.category === "tablet"
+                        ? <Tablet size={13} />
+                        : screenResolution?.category === "mobile"
+                          ? <Smartphone size={13} />
+                          : <Monitor size={13} />}
+                      {screenResolution?.name || "Full HD"}
+                      <span className="ft-sub">{screenResolution ? `${screenResolution.width}×${screenResolution.height}` : "1920×1080"}</span>
+                      <ChevronDown size={9} style={{ opacity: 0.4 }} />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="center" className="res-dropdown">
+                    <div className="res-category-label">데스크톱</div>
+                    {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
+                      <DropdownMenuItem key={resolution.name} onClick={() => setScreenResolution(resolution)} className="res-item">
+                        <Monitor size={14} className="res-item-icon" />
+                        <span className="res-item-name">{resolution.name}</span>
+                        <span className="res-item-size">{resolution.width}×{resolution.height}</span>
+                      </DropdownMenuItem>
+                    ))}
+                    <div className="res-sep" />
+                    <div className="res-category-label">태블릿</div>
+                    {SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
+                      <DropdownMenuItem key={resolution.name} onClick={() => setScreenResolution(resolution)} className="res-item">
+                        <Tablet size={14} className="res-item-icon" />
+                        <span className="res-item-name">{resolution.name}</span>
+                        <span className="res-item-size">{resolution.width}×{resolution.height}</span>
+                      </DropdownMenuItem>
+                    ))}
+                    <div className="res-sep" />
+                    <div className="res-category-label">모바일</div>
+                    {SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
+                      <DropdownMenuItem key={resolution.name} onClick={() => setScreenResolution(resolution)} className="res-item">
+                        <Smartphone size={14} className="res-item-icon" />
+                        <span className="res-item-name">{resolution.name}</span>
+                        <span className="res-item-size">{resolution.width}×{resolution.height}</span>
+                      </DropdownMenuItem>
+                    ))}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <div className="ft-toggles">
+                  <button
+                    type="button"
+                    className={cn("ft-toggle", layout.gridSettings?.showGrid && "on")}
+                    onClick={() => updateGridSettings({ ...layout.gridSettings!, showGrid: !layout.gridSettings?.showGrid })}
+                    title="격자 표시"
+                  >
+                    <Grid3X3 size={12} />
+                  </button>
+                  <button
+                    type="button"
+                    className={cn("ft-toggle", layout.gridSettings?.snapToGrid && "on")}
+                    onClick={() => updateGridSettings({ ...layout.gridSettings!, snapToGrid: !layout.gridSettings?.snapToGrid })}
+                    title="격자 스냅"
+                  >
+                    <Zap size={12} />
+                  </button>
+                </div>
+              </div>
               {/* Pan 모드 안내 - 제거됨 */}
               {/* 줌 레벨 표시 */}
               <div className="bg-card text-foreground border-border pointer-events-none fixed right-6 bottom-6 z-50 rounded-lg border px-4 py-2 text-sm font-medium shadow-md">
@@ -7891,30 +7969,36 @@ export default function ScreenDesigner({
                       />
                     )}
 
-                    {/* 빈 캔버스 안내 */}
+                    {/* 빈 캔버스 안내 — v5 Cosmic */}
                     {layout.components.length === 0 && (
-                      <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                        <div className="max-w-2xl space-y-4 px-6 text-center">
-                          <div className="bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-                            <Database className="text-muted-foreground h-8 w-8" />
+                      <div className="empty-canvas-wrap">
+                        <div className="empty-canvas">
+                          <div className="empty-canvas-icon">
+                            <Database size={28} />
                           </div>
-                          <h3 className="text-foreground text-xl font-semibold">캔버스가 비어있습니다</h3>
-                          <p className="text-muted-foreground text-sm">
+                          <h3 className="empty-canvas-title">캔버스가 비어있습니다</h3>
+                          <p className="empty-canvas-desc">
                             좌측 패널에서 테이블/컬럼이나 템플릿을 드래그하여 화면을 설계하세요
                           </p>
-                          <div className="text-muted-foreground space-y-2 text-xs">
-                            <p>
-                              <span className="font-medium">단축키:</span> T(테이블), M(템플릿), P(속성), S(스타일),
-                              R(격자), D(상세설정), E(해상도)
-                            </p>
-                            <p>
-                              <span className="font-medium">편집:</span> Ctrl+C(복사), Ctrl+V(붙여넣기), Ctrl+S(저장),
-                              Ctrl+Z(실행취소), Delete/Backspace(삭제)
-                            </p>
-                            <p className="text-warning flex items-center justify-center gap-2">
-                              <span>⚠️</span>
-                              <span>브라우저 기본 단축키가 차단되어 애플리케이션 기능만 작동합니다</span>
-                            </p>
+                          <div className="empty-canvas-shortcuts">
+                            <div className="empty-shortcut-group">
+                              <span className="empty-shortcut-label">단축키</span>
+                              <div className="empty-shortcut-keys">
+                                <kbd>T</kbd> 테이블
+                                <kbd>M</kbd> 템플릿
+                                <kbd>P</kbd> 속성
+                                <kbd>S</kbd> 스타일
+                              </div>
+                            </div>
+                            <div className="empty-shortcut-group">
+                              <span className="empty-shortcut-label">편집</span>
+                              <div className="empty-shortcut-keys">
+                                <kbd>Ctrl+C</kbd> 복사
+                                <kbd>Ctrl+V</kbd> 붙여넣기
+                                <kbd>Ctrl+S</kbd> 저장
+                                <kbd>Del</kbd> 삭제
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -7932,8 +8016,8 @@ export default function ScreenDesigner({
              *    없으면 "블록을 선택하세요" 안내.
              *  - 좌측 "편집" 섹션은 다음 Edit 에서 제거 (500줄 블록이라 분리).
              */}
-            {panelStates.v2?.isOpen && (
-              <aside className="border-border bg-card flex h-full w-[280px] flex-col overflow-hidden border-l shadow-sm">
+            {isPropertiesPanelOpen && (
+              <aside className="inv-right-panel border-border bg-card flex h-full w-[280px] flex-col overflow-hidden border-l shadow-sm">
                 <div className="border-border flex shrink-0 items-center justify-between border-b px-3 py-2">
                   <h3 className="text-foreground text-xs font-bold tracking-wider uppercase">
                     속성
diff --git a/frontend/components/screen/ViewTabBar.tsx b/frontend/components/screen/ViewTabBar.tsx
new file mode 100644
index 00000000..4f032c77
--- /dev/null
+++ b/frontend/components/screen/ViewTabBar.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { List, PlusCircle, Pencil } from "lucide-react";
+
+export type ViewType = "list" | "create" | "edit";
+
+interface ViewTab {
+  id: ViewType;
+  label: string;
+  icon: React.ReactNode;
+  hint: string;
+}
+
+const VIEW_TABS: ViewTab[] = [
+  { id: "list", label: "목록 화면", icon: <List size={13} />, hint: "목록 + 검색 + 그리드" },
+  { id: "create", label: "등록 팝업", icon: <PlusCircle size={13} />, hint: "등록 팝업 편집" },
+  { id: "edit", label: "수정 팝업", icon: <Pencil size={13} />, hint: "수정 팝업 편집" },
+];
+
+interface ViewTabBarProps {
+  activeView: ViewType;
+  onViewChange: (view: ViewType) => void;
+  /** 각 뷰에 컴포넌트가 있는지 (뱃지 표시용) */
+  viewCounts?: Record<ViewType, number>;
+}
+
+export function ViewTabBar({ activeView, onViewChange, viewCounts }: ViewTabBarProps) {
+  const activeTab = VIEW_TABS.find((t) => t.id === activeView);
+
+  return (
+    <div className="view-tab-bar">
+      <div className="view-tab-group">
+        {VIEW_TABS.map((tab) => {
+          const count = viewCounts?.[tab.id] ?? 0;
+          const isActive = tab.id === activeView;
+
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              className={cn("view-tab", isActive && "active")}
+              onClick={() => onViewChange(tab.id)}
+            >
+              {tab.icon}
+              <span>{tab.label}</span>
+              {count > 0 && (
+                <span className="view-tab-badge">{count}</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+      <span className="view-tab-hint">{activeTab?.hint}</span>
+    </div>
+  );
+}
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index dc16d666..dc5f6818 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -2,12 +2,15 @@
 
 import React, { useState, useMemo } from "react";
 import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ComponentRegistry } from "@/lib/registry/ComponentRegistry";
 import { ComponentDefinition, ComponentCategory } from "@/types/component";
-import { Search, Package, Grid, Layers, Palette, Zap, MousePointer, Database, GripVertical } from "lucide-react";
+import {
+  Search, Package, Layers, Palette, Zap, Database, GripVertical,
+  Table2, BarChart3, Type, Minus, LayoutGrid, TextCursorInput, SlidersHorizontal,
+  ListFilter, Workflow, Map, CalendarRange, ClipboardCheck, Warehouse, GitBranch,
+  Truck, CircleDot, Boxes,
+} from "lucide-react";
 import { TableInfo, ColumnInfo } from "@/types/screen";
-import TablesPanel from "./TablesPanel";
 
 interface ComponentsPanelProps {
   className?: string;
@@ -43,64 +46,52 @@ export function ComponentsPanel({
     return components;
   }, []);
 
-  // V2 컴포넌트 정의 (새로운 통합 컴포넌트 시스템)
-  // 입력 컴포넌트(v2-input, v2-select, v2-date)는 테이블 컬럼 드래그 시 자동 생성되므로 숨김
-  const v2Components = useMemo(
+  // ── 기본 컴포넌트 (v2 하드코딩) ──
+  const basicV2Components = useMemo(
     () =>
       [
-        // v2-input: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
-        // v2-date: 테이블 컬럼 드래그 시 자동 생성되므로 숨김 처리
-        // v2-layout: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
-        // v2-group: 중첩 드래그앤드롭 기능 미구현으로 숨김 처리
-        // v2-list: table-list, card-display로 분리하여 숨김 처리
-        // v2-media 제거 - 테이블 컬럼의 image/file 입력 타입으로 사용
-        // v2-biz 제거 - 개별 컴포넌트(flow-widget, rack-structure, numbering-rule)로 직접 표시
-        // v2-hierarchy 제거 - 현재 미사용
-        {
-          id: "v2-select",
-          name: "V2 선택",
-          description: "드롭다운, 콤보박스, 라디오, 체크박스 등 다양한 선택 모드 지원",
-          category: "input" as ComponentCategory,
-          tags: ["select", "dropdown", "combobox", "v2"],
-          default_size: { width: 300, height: 40 },
-          default_config: {
-            mode: "dropdown",
-            source: "static",
-            multiple: false,
-            searchable: false,
-            placeholder: "선택하세요",
-            options: [],
-            allowClear: true,
-          },
-        },
         {
           id: "v2-repeater",
-          name: "리피터 그리드",
-          description: "행 단위로 데이터를 추가/수정/삭제",
+          name: "데이터 조회/선택",
+          description: "다른 테이블에서 데이터를 조회하고 선택하여 전달",
           category: "data" as ComponentCategory,
-          tags: ["repeater", "table", "modal", "button", "v2", "v2"],
+          tags: ["조회", "선택", "전달", "모달", "repeater"],
           default_size: { width: 600, height: 300 },
         },
+      ] as unknown as ComponentDefinition[],
+    [],
+  );
+
+  // ── 고급 컴포넌트 (도메인 특화) ──
+  const advancedComponents = useMemo(
+    () =>
+      [
         {
           id: "v2-bom-tree",
-          name: "BOM 트리 뷰",
-          description: "BOM 구성을 계층 트리 형태로 조회",
+          name: "BOM 트리",
+          description: "자재 구성을 계층 트리로 조회",
           category: "data" as ComponentCategory,
-          tags: ["bom", "tree", "계층", "제조", "v2"],
+          tags: ["bom", "tree", "계층", "제조"],
           default_size: { width: 900, height: 600 },
         },
         {
           id: "v2-bom-item-editor",
-          name: "BOM 하위품목 편집기",
-          description: "BOM 하위 품목을 트리 구조로 추가/편집/삭제",
+          name: "BOM 편집",
+          description: "하위 자재를 트리 구조로 추가/편집/삭제",
           category: "data" as ComponentCategory,
-          tags: ["bom", "tree", "편집", "하위품목", "제조", "v2"],
+          tags: ["bom", "tree", "편집", "제조"],
           default_size: { width: 900, height: 400 },
         },
       ] as unknown as ComponentDefinition[],
     [],
   );
 
+  // 레거시 호환 (기존 코드에서 v2Components 참조하는 곳용)
+  const v2Components = useMemo(
+    () => [...basicV2Components, ...advancedComponents],
+    [basicV2Components, advancedComponents],
+  );
+
   // 카테고리별 컴포넌트 그룹화
   const componentsByCategory = useMemo(() => {
     // 숨길 컴포넌트 ID 목록
@@ -112,7 +103,7 @@ export function ComponentsPanel({
       "textarea-basic",
       // V2 컴포넌트로 대체됨
       "image-widget", // → V2Media (image)
-      // "file-upload", // 🆕 레거시 컴포넌트 노출 (안정적인 파일 업로드)
+      "file-upload", // → input (type='file') 로 대체
       "entity-search-input", // → V2Select (entity 모드)
       "autocomplete-search-input", // → V2Select (autocomplete 모드)
       // DataFlow 전용 (일반 화면에서 불필요)
@@ -141,7 +132,7 @@ export function ComponentsPanel({
       // 플로우 위젯 숨김 처리
       "flow-widget",
       // 선택 항목 상세입력 - 거래처 품목 추가 등에서 사용
-      // "selected-items-detail-input",
+      "selected-items-detail-input", // → 데이터 조회/선택 으로 대체
       // 연관 데이터 버튼 - v2-repeater로 대체 가능
       "related-data-buttons",
       // ===== V2로 대체된 기존 컴포넌트 (v2 버전만 사용) =====
@@ -207,6 +198,7 @@ export function ComponentsPanel({
       // tabs, repeat-container, repeat-screen-modal, repeater-field-group,
       // screen-split-panel 는 기존 상단에서 이미 숨김
       "numbering-rule",
+      "split-panel-layout2", // → table (displayMode='split') Phase E 통합
       "section-paper", // → v2-section-paper
       "section-card", // → v2-section-card
       "location-swap-selector", // → v2-location-swap-selector
@@ -253,24 +245,43 @@ export function ComponentsPanel({
     return components;
   };
 
-  // 카테고리 아이콘 매핑
-  const getCategoryIcon = (category: ComponentCategory) => {
+  // ── INVYONE 컴포넌트별 아이콘 매핑 ──
+  const getComponentIcon = (id: string, category: string) => {
+    const s = 14;
+    const icons: Record<string, React.ReactNode> = {
+      table: <Table2 size={s} />,
+      "v2-table-list": <Table2 size={s} />,
+      stats: <BarChart3 size={s} />,
+      title: <Type size={s} />,
+      divider: <Minus size={s} />,
+      container: <LayoutGrid size={s} />,
+      input: <TextCursorInput size={s} />,
+      button: <Zap size={s} />,
+      search: <ListFilter size={s} />,
+      "v2-repeater": <SlidersHorizontal size={s} />,
+      "v2-bom-tree": <Boxes size={s} />,
+      "v2-bom-item-editor": <Boxes size={s} />,
+      "v2-approval-step": <ClipboardCheck size={s} />,
+      map: <Map size={s} />,
+      "v2-shipping-plan-editor": <Truck size={s} />,
+      "v2-timeline-scheduler": <CalendarRange size={s} />,
+      "v2-rack-structure": <Warehouse size={s} />,
+      "v2-process-work-standard": <Workflow size={s} />,
+      "v2-item-routing": <GitBranch size={s} />,
+    };
+    if (icons[id]) return icons[id];
+    // 카테고리 폴백
     switch (category) {
-      case "display":
-        return <Palette className="h-6 w-6" />;
-      case "action":
-        return <Zap className="h-6 w-6" />;
-      case "data":
-        return <Database className="h-6 w-6" />;
-      case "layout":
-        return <Layers className="h-6 w-6" />;
-      case "utility":
-        return <Package className="h-6 w-6" />;
-      default:
-        return <Grid className="h-6 w-6" />;
+      case "data": return <Database size={s} />;
+      case "display": return <Palette size={s} />;
+      case "action": return <Zap size={s} />;
+      case "layout": return <Layers size={s} />;
+      default: return <CircleDot size={s} />;
     }
   };
 
+  // getCategoryIcon 제거됨 — getComponentIcon 으로 대체
+
   // 드래그 시작 핸들러
   //
   // ★ 2026-04-11 버그 픽스:
@@ -295,157 +306,187 @@ export function ComponentsPanel({
     e.dataTransfer.effectAllowed = "copy";
   };
 
-  // 카테고리별 배경색 매핑
-  const getCategoryColor = (category: string) => {
-    switch (category) {
-      case "data":
-        return "bg-primary/10 text-primary group-hover:bg-primary/20";
-      case "display":
-        return "bg-emerald-500/10 text-emerald-600 group-hover:bg-emerald-500/20";
-      case "input":
-        return "bg-violet-500/10 text-violet-600 group-hover:bg-violet-500/20";
-      case "layout":
-        return "bg-amber-500/10 text-amber-600 group-hover:bg-amber-500/20";
-      case "action":
-        return "bg-rose-500/10 text-rose-600 group-hover:bg-rose-500/20";
-      default:
-        return "bg-muted text-muted-foreground group-hover:bg-muted/80";
+  // ── 카테고리별 컬러 클래스 ──
+  const getCategoryAccent = (cat: string) => {
+    switch (cat) {
+      case "data": return "inv-cat-data";
+      case "display": return "inv-cat-display";
+      case "action": return "inv-cat-action";
+      case "layout": return "inv-cat-layout";
+      case "input": return "inv-cat-input";
+      case "utility": return "inv-cat-utility";
+      default: return "inv-cat-default";
     }
   };
 
-  // 컴포넌트 카드 렌더링 함수 (컴팩트 버전)
+  // ── INVYONE 컴포넌트 카드 ──
   const renderComponentCard = (component: ComponentDefinition) => (
     <div
       key={component.id}
       draggable
       onDragStart={(e) => {
         handleDragStart(e, component);
-        e.currentTarget.style.opacity = "0.6";
-        e.currentTarget.style.transform = "rotate(2deg) scale(0.98)";
+        e.currentTarget.style.opacity = "0.5";
       }}
       onDragEnd={(e) => {
         e.currentTarget.style.opacity = "1";
-        e.currentTarget.style.transform = "none";
       }}
-      className="group bg-card hover:border-primary/40 cursor-grab rounded-lg border px-3 py-2.5 transition-all duration-200 hover:shadow-sm active:scale-[0.98] active:cursor-grabbing"
+      className={`inv-comp-card ${getCategoryAccent(component.category)}`}
+      title={component.description}
     >
-      <div className="flex items-center gap-2.5">
-        <div
-          className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-md transition-all duration-200 ${getCategoryColor(component.category)}`}
-        >
-          {getCategoryIcon(component.category)}
-        </div>
-        <div className="min-w-0 flex-1">
-          <span className="text-foreground block truncate text-xs font-medium">{component.name}</span>
-          <div className="flex items-center gap-2">
-            <span className="text-muted-foreground text-[10px] capitalize">{component.category}</span>
-            <span className="text-muted-foreground/60 text-[10px]">|</span>
-            <span className="text-muted-foreground text-[10px]">
-              {component.default_size.width}×{component.default_size.height}
-            </span>
-          </div>
-        </div>
-        <div className="text-muted-foreground/40 group-hover:text-muted-foreground/60 transition-colors">
-          <GripVertical className="h-3.5 w-3.5" />
-        </div>
+      <div className="inv-comp-icon">
+        {getComponentIcon(component.id, component.category)}
       </div>
+      <span className="inv-comp-name">{component.name}</span>
+      <GripVertical size={10} className="inv-comp-grip" />
     </div>
   );
 
   // 빈 상태 렌더링
   const renderEmptyState = () => (
-    <div className="flex h-32 items-center justify-center text-center">
-      <div className="p-6">
-        <Package className="text-muted-foreground/40 mx-auto mb-2 h-10 w-10" />
-        <p className="text-muted-foreground text-xs font-medium">컴포넌트를 찾을 수 없습니다</p>
-        <p className="text-muted-foreground/60 mt-1 text-xs">검색어를 조정해보세요</p>
-      </div>
+    <div className="text-muted-foreground flex h-20 items-center justify-center text-center text-[0.6rem]">
+      검색 결과 없음
     </div>
   );
 
+  // ── 기본/고급 ID 분류 ──
+  const BASIC_IDS = new Set([
+    "table", "search", "input", "button", "stats", "title", "divider", "container",
+    "v2-repeater",
+  ]);
+  const ADVANCED_IDS = new Set([
+    "v2-bom-tree", "v2-bom-item-editor", "v2-approval-step",
+    "map", "v2-shipping-plan-editor", "v2-timeline-scheduler",
+    "v2-rack-structure", "v2-process-work-standard", "v2-item-routing",
+  ]);
+
+  const allFiltered = useMemo(() => {
+    const all = [
+      ...getFilteredComponents("v2"),
+      ...getFilteredComponents("action"),
+      ...getFilteredComponents("display"),
+      ...getFilteredComponents("data"),
+      ...getFilteredComponents("layout"),
+      ...getFilteredComponents("input"),
+      ...getFilteredComponents("utility"),
+    ];
+    return {
+      basic: all.filter((c) => BASIC_IDS.has(c.id)),
+      advanced: all.filter((c) => ADVANCED_IDS.has(c.id)),
+    };
+  }, [searchQuery, componentsByCategory]);
+
+  // 테이블 컬럼을 드래그 가능한 칩으로 렌더
+  const selectedTable = tables?.find(
+    (t: any) => (t.tableName || t.table_name) === selectedTableName,
+  );
+  const tableColumns = (selectedTable as any)?.columns || [];
+
   return (
-    <div className={`bg-background flex h-full flex-col p-4 ${className}`}>
-      {/* 헤더 */}
-      <div className="mb-3">
-        <h2 className="mb-0.5 text-sm font-semibold">컴포넌트</h2>
-        <p className="text-muted-foreground text-xs">{allComponents.length}개 사용 가능</p>
+    <div className={`inv-panel-root ${className || ""}`}>
+      {/* 검색 */}
+      <div className="inv-search-wrap">
+        <Search size={12} className="inv-search-icon" />
+        <Input
+          placeholder="검색..."
+          value={searchQuery}
+          onChange={(e) => {
+            const value = e.target.value;
+            setSearchQuery(value);
+            if (onSearchChange) onSearchChange(value);
+          }}
+          className="inv-search-input"
+        />
       </div>
 
-      {/* 통합 검색 */}
-      <div className="mb-3">
-        <div className="relative">
-          <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
-          <Input
-            placeholder="컴포넌트, 테이블, 컬럼 검색..."
-            value={searchQuery}
-            onChange={(e) => {
-              const value = e.target.value;
-              setSearchQuery(value);
-              // 테이블 검색도 함께 업데이트
-              if (onSearchChange) {
-                onSearchChange(value);
-              }
-            }}
-            className="h-8 pl-8 text-xs"
-          />
-        </div>
-      </div>
+      {/* 단일 스크롤 영역 */}
+      <div className="inv-panel-scroll">
 
-      {/* 테이블 / 컴포넌트 탭 */}
-      <Tabs defaultValue="tables" className="flex min-h-0 flex-1 flex-col">
-        <TabsList className="mb-3 grid h-8 w-full shrink-0 grid-cols-2 gap-1 p-1">
-          <TabsTrigger value="tables" className="flex items-center justify-center gap-1 text-xs">
-            <Database className="h-3 w-3" />
-            <span>테이블</span>
-          </TabsTrigger>
-          <TabsTrigger value="components" className="flex items-center justify-center gap-1 text-xs">
-            <Package className="h-3 w-3" />
+        {/* ── 테이블 컬럼 (선택된 테이블이 있을 때만) ── */}
+        {selectedTableName && (
+          <details open className="inv-section">
+            <summary className="inv-section-header">
+              <Database size={11} />
+              <span className="flex-1">{selectedTableName}</span>
+              <span className="inv-section-count">{tableColumns.length}</span>
+            </summary>
+            <div className="inv-column-list">
+              {tableColumns.length > 0 ? (
+                tableColumns.map((col: any) => {
+                  const colName = col.columnName || col.column_name;
+                  const colLabel = col.columnLabel || col.column_label || col.displayName || colName;
+                  const isPlaced = placedColumns?.has(colName);
+                  const dataType = (col.dataType || col.data_type || "").toLowerCase();
+                  let tag = "TXT";
+                  if (dataType.includes("int") || dataType.includes("numeric") || dataType.includes("decimal")) tag = "NUM";
+                  else if (dataType.includes("date") || dataType.includes("time")) tag = "DATE";
+                  else if (dataType.includes("bool")) tag = "BOOL";
+
+                  return (
+                    <div
+                      key={colName}
+                      draggable={!isPlaced}
+                      onDragStart={(e) => {
+                        if (isPlaced || !selectedTable) return;
+                        onTableDragStart?.(e, selectedTable as any, col);
+                      }}
+                      className={`inv-col-row ${isPlaced ? "placed" : ""}`}
+                      data-type={tag}
+                    >
+                      <span className="inv-col-tag">{tag}</span>
+                      <span className="inv-col-name" title={colName}>{colLabel}</span>
+                      {isPlaced && <span className="inv-col-placed">배치됨</span>}
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="text-muted-foreground py-2 text-center text-[0.6rem]">
+                  컬럼 없음
+                </div>
+              )}
+            </div>
+            {/* 테이블 변경 */}
+            {showTableSelector && tables && tables.length > 1 && (
+              <select
+                value={selectedTableName || ""}
+                onChange={(e) => onTableSelect?.(e.target.value)}
+                className="inv-table-select"
+              >
+                {tables.map((t: any) => (
+                  <option key={t.tableName || t.table_name} value={t.tableName || t.table_name}>
+                    {t.tableLabel || t.table_label || t.tableName || t.table_name}
+                  </option>
+                ))}
+              </select>
+            )}
+          </details>
+        )}
+
+        {/* ── 컴포넌트 ── */}
+        <div className="inv-section">
+          <div className="inv-section-header inv-section-static">
+            <Package size={11} />
             <span>컴포넌트</span>
-          </TabsTrigger>
-        </TabsList>
-
-        {/* 테이블 컬럼 탭 */}
-        <TabsContent value="tables" className="mt-0 flex-1 overflow-y-auto">
-          <TablesPanel
-            tables={tables}
-            searchTerm={searchTerm}
-            onSearchChange={onSearchChange || (() => {})}
-            onDragStart={onTableDragStart || (() => {})}
-            selectedTableName={selectedTableName}
-            placedColumns={placedColumns}
-            onTableSelect={onTableSelect}
-            showTableSelector={showTableSelector}
-          />
-        </TabsContent>
-
-        {/* 컴포넌트 탭 */}
-        <TabsContent value="components" className="mt-0 flex-1 space-y-2 overflow-y-auto">
-          {(() => {
-            const allFilteredComponents = [
-              ...getFilteredComponents("v2"),
-              ...getFilteredComponents("action"),
-              ...getFilteredComponents("display"),
-              ...getFilteredComponents("data"),
-              ...getFilteredComponents("layout"),
-              ...getFilteredComponents("input"),
-              ...getFilteredComponents("utility"),
-            ];
-
-            return allFilteredComponents.length > 0
-              ? allFilteredComponents.map(renderComponentCard)
-              : renderEmptyState();
-          })()}
-        </TabsContent>
-      </Tabs>
-
-      {/* 도움말 */}
-      <div className="border-primary/20 bg-primary/5 mt-3 rounded-lg border p-3">
-        <div className="flex items-start gap-2">
-          <MousePointer className="text-primary mt-0.5 h-3.5 w-3.5 flex-shrink-0" />
-          <p className="text-muted-foreground text-xs leading-relaxed">
-            컴포넌트를 <span className="text-foreground font-semibold">드래그</span>하여 화면에 추가하세요
-          </p>
+          </div>
+          <div className="inv-comp-list">
+            {allFiltered.basic.length > 0
+              ? allFiltered.basic.map(renderComponentCard)
+              : renderEmptyState()}
+          </div>
         </div>
+
+        {/* ── 더보기 ── */}
+        {allFiltered.advanced.length > 0 && (
+          <details className="inv-section inv-more-section">
+            <summary className="inv-more-toggle">
+              <span>더보기</span>
+              <span className="inv-more-count">{allFiltered.advanced.length}</span>
+            </summary>
+            <div className="inv-comp-list">
+              {allFiltered.advanced.map(renderComponentCard)}
+            </div>
+          </details>
+        )}
       </div>
     </div>
   );
diff --git a/frontend/components/screen/toolbar/SlimToolbar.tsx b/frontend/components/screen/toolbar/SlimToolbar.tsx
index 6c6e144d..d7748b78 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -4,24 +4,16 @@ import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Database,
   ArrowLeft,
   Save,
-  Monitor,
-  Smartphone,
-  Tablet,
-  ChevronDown,
-  Settings,
-  Grid3X3,
-  Eye,
-  EyeOff,
-  Zap,
   Languages,
   Settings2,
   PanelLeft,
   PanelLeftClose,
+  PanelRight,
+  PanelRightClose,
   AlignStartVertical,
   AlignCenterVertical,
   AlignEndVertical,
@@ -33,18 +25,9 @@ import {
   RulerIcon,
   Tag,
   Keyboard,
+  Eye,
   Equal,
 } from "lucide-react";
-import { ScreenResolution } from "@/types/screen";
-import { SCREEN_RESOLUTIONS } from "@/types/screen-management";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   Dialog,
   DialogContent,
@@ -52,58 +35,55 @@ import {
   DialogTitle,
   DialogFooter,
 } from "@/components/ui/dialog";
-
-interface GridSettings {
-  columns: number;
-  gap: number;
-  padding: number;
-  snapToGrid: boolean;
-  showGrid: boolean;
-  gridColor?: string;
-  gridOpacity?: number;
-}
+import { cn } from "@/lib/utils";
+import { type ViewType } from "../ViewTabBar";
+import { List, PlusCircle, Pencil } from "lucide-react";
 
 type AlignMode = "left" | "centerX" | "right" | "top" | "centerY" | "bottom";
 type DistributeDirection = "horizontal" | "vertical";
 type MatchSizeMode = "width" | "height" | "both";
 
+// View tab definitions (same as ViewTabBar)
+const VIEW_TABS: { id: ViewType; label: string; icon: React.ReactNode }[] = [
+  { id: "list", label: "목록 화면", icon: <List size={11} /> },
+  { id: "create", label: "등록 팝업", icon: <PlusCircle size={11} /> },
+  { id: "edit", label: "수정 팝업", icon: <Pencil size={11} /> },
+];
+
 interface SlimToolbarProps {
   screenName?: string;
-  tableName?: string;
-  screenResolution?: ScreenResolution;
   onBack: () => void;
   onSave: () => void;
   isSaving?: boolean;
   onPreview?: () => void;
-  onResolutionChange?: (resolution: ScreenResolution) => void;
-  gridSettings?: GridSettings;
-  onGridSettingsChange?: (settings: GridSettings) => void;
   onGenerateMultilang?: () => void;
   isGeneratingMultilang?: boolean;
   onOpenMultilangSettings?: () => void;
-  // 패널 토글 기능
+  // Panel toggle
   isPanelOpen?: boolean;
   onTogglePanel?: () => void;
-  // 정렬/배분/크기 기능
+  // Align/distribute/match size
   selectedCount?: number;
   onAlign?: (mode: AlignMode) => void;
   onDistribute?: (direction: DistributeDirection) => void;
   onMatchSize?: (mode: MatchSizeMode) => void;
   onToggleLabels?: () => void;
   onShowShortcuts?: () => void;
+  // Properties panel toggle
+  isPropertiesOpen?: boolean;
+  onToggleProperties?: () => void;
+  // View tabs (merged from ViewTabBar)
+  activeView?: ViewType;
+  onViewChange?: (view: ViewType) => void;
+  viewCounts?: Record<ViewType, number>;
 }
 
 export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   screenName,
-  tableName,
-  screenResolution,
   onBack,
   onSave,
   isSaving = false,
   onPreview,
-  onResolutionChange,
-  gridSettings,
-  onGridSettingsChange,
   onGenerateMultilang,
   isGeneratingMultilang = false,
   onOpenMultilangSettings,
@@ -115,379 +95,170 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   onMatchSize,
   onToggleLabels,
   onShowShortcuts,
+  isPropertiesOpen = true,
+  onToggleProperties,
+  activeView = "list",
+  onViewChange,
+  viewCounts,
 }) => {
-  // 사용자 정의 해상도 상태
-  const [customWidth, setCustomWidth] = useState("");
-  const [customHeight, setCustomHeight] = useState("");
-  const [showCustomInput, setShowCustomInput] = useState(false);
-
-  const getCategoryIcon = (category: string) => {
-    switch (category) {
-      case "desktop":
-        return <Monitor className="h-4 w-4 text-primary" />;
-      case "tablet":
-        return <Tablet className="h-4 w-4 text-emerald-600" />;
-      case "mobile":
-        return <Smartphone className="h-4 w-4 text-purple-600" />;
-      default:
-        return <Monitor className="h-4 w-4 text-primary" />;
-    }
-  };
-
-  const handleCustomResolution = () => {
-    const width = parseInt(customWidth);
-    const height = parseInt(customHeight);
-    if (width > 0 && height > 0 && onResolutionChange) {
-      const customResolution: ScreenResolution = {
-        width,
-        height,
-        name: `사용자 정의 (${width}×${height})`,
-        category: "custom",
-      };
-      onResolutionChange(customResolution);
-      setShowCustomInput(false);
-    }
-  };
-
-  const updateGridSetting = (key: keyof GridSettings, value: boolean) => {
-    if (onGridSettingsChange && gridSettings) {
-      onGridSettingsChange({
-        ...gridSettings,
-        [key]: value,
-      });
-    }
-  };
-
   return (
-    <div className="flex h-14 items-center justify-between border-b border-border bg-background px-4 shadow-sm">
-      {/* 좌측: 브랜드 로고 + 네비게이션 + 패널 토글 + 화면 정보 */}
-      <div className="flex items-center space-x-4">
-        {/* INVYONE 브랜드 로고 (리브랜딩) */}
+    <div className="slim-toolbar hdr">
+      {/* Zone 1: Brand */}
+      <div className="hdr-zone" style={{ padding: "0 14px" }}>
         <div className="ide-brand">
           <span className="ide-brand-text">INVYONE</span>
           <span className="ide-brand-badge">STUDIO</span>
         </div>
-
-        <Button variant="ghost" size="sm" onClick={onBack} className="flex items-center space-x-2">
-          <ArrowLeft className="h-4 w-4" />
-          <span>목록으로</span>
-        </Button>
-
-        {onTogglePanel && <div className="h-6 w-px bg-border" />}
-
-        {/* 패널 토글 버튼 */}
-        {onTogglePanel && (
-          <Button
-            variant={isPanelOpen ? "default" : "outline"}
-            size="sm"
-            onClick={onTogglePanel}
-            className="flex items-center space-x-2"
-            title="패널 열기/닫기 (P)"
-          >
-            {isPanelOpen ? (
-              <PanelLeftClose className="h-4 w-4" />
-            ) : (
-              <PanelLeft className="h-4 w-4" />
-            )}
-            <span>패널</span>
-          </Button>
-        )}
-
-        <div className="h-6 w-px bg-border" />
-
-        <div className="flex items-center space-x-3">
-          <div>
-            <h1 className="text-lg font-semibold text-foreground">{screenName || "화면 설계"}</h1>
-            {tableName && (
-              <div className="mt-0.5 flex items-center space-x-1">
-                <Database className="h-3 w-3 text-muted-foreground" />
-                <span className="font-mono text-xs text-muted-foreground">{tableName}</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 해상도 선택 드롭다운 */}
-        {screenResolution && (
-          <>
-            <div className="h-6 w-px bg-border" />
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button className="flex items-center space-x-2 rounded-md bg-primary/10 px-3 py-1.5 transition-colors hover:bg-primary/20">
-                  {getCategoryIcon(screenResolution.category || "desktop")}
-                  <span className="text-sm font-medium text-primary">{screenResolution.name}</span>
-                  <span className="text-xs text-primary">
-                    ({screenResolution.width} × {screenResolution.height})
-                  </span>
-                  {onResolutionChange && <ChevronDown className="h-3 w-3 text-primary" />}
-                </button>
-              </DropdownMenuTrigger>
-              {onResolutionChange && (
-                <DropdownMenuContent align="start" className="w-64">
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">데스크톱</DropdownMenuLabel>
-                  {SCREEN_RESOLUTIONS.filter((r) => r.category === "desktop").map((resolution) => (
-                    <DropdownMenuItem
-                      key={resolution.name}
-                      onClick={() => onResolutionChange(resolution)}
-                      className="flex items-center space-x-2"
-                    >
-                      <Monitor className="h-4 w-4 text-primary" />
-                      <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-muted-foreground/70">
-                        {resolution.width}×{resolution.height}
-                      </span>
-                    </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">태블릿</DropdownMenuLabel>
-                  {SCREEN_RESOLUTIONS.filter((r) => r.category === "tablet").map((resolution) => (
-                    <DropdownMenuItem
-                      key={resolution.name}
-                      onClick={() => onResolutionChange(resolution)}
-                      className="flex items-center space-x-2"
-                    >
-                      <Tablet className="h-4 w-4 text-emerald-600" />
-                      <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-muted-foreground/70">
-                        {resolution.width}×{resolution.height}
-                      </span>
-                    </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">모바일</DropdownMenuLabel>
-                  {SCREEN_RESOLUTIONS.filter((r) => r.category === "mobile").map((resolution) => (
-                    <DropdownMenuItem
-                      key={resolution.name}
-                      onClick={() => onResolutionChange(resolution)}
-                      className="flex items-center space-x-2"
-                    >
-                      <Smartphone className="h-4 w-4 text-purple-600" />
-                      <span className="flex-1">{resolution.name}</span>
-                      <span className="text-xs text-muted-foreground/70">
-                        {resolution.width}×{resolution.height}
-                      </span>
-                    </DropdownMenuItem>
-                  ))}
-                  <DropdownMenuSeparator />
-                  <DropdownMenuLabel className="text-xs text-muted-foreground">사용자 정의</DropdownMenuLabel>
-                  <DropdownMenuItem
-                    onClick={() => {
-                      setCustomWidth(screenResolution.width.toString());
-                      setCustomHeight(screenResolution.height.toString());
-                      setShowCustomInput(true);
-                    }}
-                    className="flex items-center space-x-2"
-                  >
-                    <Settings className="h-4 w-4 text-muted-foreground" />
-                    <span className="flex-1">사용자 정의...</span>
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              )}
-            </DropdownMenu>
-
-            {/* 사용자 정의 해상도 다이얼로그 */}
-            <Dialog open={showCustomInput} onOpenChange={setShowCustomInput}>
-              <DialogContent className="sm:max-w-[320px]">
-                <DialogHeader>
-                  <DialogTitle>사용자 정의 해상도</DialogTitle>
-                </DialogHeader>
-                <div className="grid grid-cols-2 gap-4 py-4">
-                  <div className="space-y-2">
-                    <Label htmlFor="customWidth" className="text-sm">너비 (px)</Label>
-                    <Input
-                      id="customWidth"
-                      type="number"
-                      value={customWidth}
-                      onChange={(e) => setCustomWidth(e.target.value)}
-                      placeholder="1920"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="customHeight" className="text-sm">높이 (px)</Label>
-                    <Input
-                      id="customHeight"
-                      type="number"
-                      value={customHeight}
-                      onChange={(e) => setCustomHeight(e.target.value)}
-                      placeholder="1080"
-                    />
-                  </div>
-                </div>
-                <DialogFooter>
-                  <Button variant="outline" onClick={() => setShowCustomInput(false)}>
-                    취소
-                  </Button>
-                  <Button onClick={handleCustomResolution}>
-                    적용
-                  </Button>
-                </DialogFooter>
-              </DialogContent>
-            </Dialog>
-          </>
-        )}
-
-        {/* 격자 설정 */}
-        {gridSettings && onGridSettingsChange && (
-          <>
-            <div className="h-6 w-px bg-border" />
-            <div className="flex items-center space-x-2 rounded-md bg-muted px-3 py-1.5">
-              <Grid3X3 className="h-4 w-4 text-muted-foreground" />
-              <div className="flex items-center space-x-3">
-                <label className="flex cursor-pointer items-center space-x-1.5">
-                  {gridSettings.showGrid ? (
-                    <Eye className="h-3.5 w-3.5 text-primary" />
-                  ) : (
-                    <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
-                  )}
-                  <Checkbox
-                    checked={gridSettings.showGrid}
-                    onCheckedChange={(checked) => updateGridSetting("showGrid", checked as boolean)}
-                    className="h-3.5 w-3.5"
-                  />
-                  <span className="text-xs text-muted-foreground">격자 표시</span>
-                </label>
-                <label className="flex cursor-pointer items-center space-x-1.5">
-                  <Zap className={`h-3.5 w-3.5 ${gridSettings.snapToGrid ? "text-primary" : "text-muted-foreground/70"}`} />
-                  <Checkbox
-                    checked={gridSettings.snapToGrid}
-                    onCheckedChange={(checked) => updateGridSetting("snapToGrid", checked as boolean)}
-                    className="h-3.5 w-3.5"
-                  />
-                  <span className="text-xs text-muted-foreground">격자 스냅</span>
-                </label>
-              </div>
-            </div>
-          </>
-        )}
       </div>
 
-      {/* 중앙: 정렬/배분 도구 (다중 선택 시 표시) */}
+      {/* Zone 2: Back + Panel toggle */}
+      <div className="hdr-zone">
+        <div className="hdr-gap-1">
+          <button type="button" className="sq-btn" onClick={onBack} title="목록으로">
+            <ArrowLeft size={15} />
+          </button>
+          {onTogglePanel && (
+            <button
+              type="button"
+              className={cn("sq-btn", isPanelOpen && "active")}
+              onClick={onTogglePanel}
+              title="패널 열기/닫기 (P)"
+            >
+              {isPanelOpen ? <PanelLeftClose size={15} /> : <PanelLeft size={15} />}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Zone 3: View tabs inline */}
+      <div className="hdr-zone" style={{ padding: 0 }}>
+        <div className="tab-group">
+          {VIEW_TABS.map((tab) => {
+            const count = viewCounts?.[tab.id] ?? 0;
+            const isActive = tab.id === activeView;
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                className={cn("tab-item", isActive && "active")}
+                onClick={() => onViewChange?.(tab.id)}
+              >
+                {tab.icon}
+                {tab.label}
+                {count > 0 && <span className="tab-cnt">{count}</span>}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Zone 4: Template title (flex grow) */}
+      <div className="hdr-zone grow">
+        <span className="info-title">{screenName || "새 템플릿"}</span>
+      </div>
+
+      {/* Alignment tools (conditional, shown when multi-select) */}
       {selectedCount >= 2 && (onAlign || onDistribute || onMatchSize) && (
-        <div className="flex items-center space-x-1 rounded-md bg-primary/10 px-2 py-1">
-          {/* 정렬 */}
-          {onAlign && (
-            <>
-              <span className="mr-1 text-xs font-medium text-primary">정렬</span>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("left")} title="좌측 정렬 (Alt+L)">
-                <AlignStartVertical className="h-3.5 w-3.5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerX")} title="가로 중앙 (Alt+C)">
-                <AlignCenterVertical className="h-3.5 w-3.5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("right")} title="우측 정렬 (Alt+R)">
-                <AlignEndVertical className="h-3.5 w-3.5" />
-              </Button>
-              <div className="mx-0.5 h-4 w-px bg-border" />
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("top")} title="상단 정렬 (Alt+T)">
-                <AlignStartHorizontal className="h-3.5 w-3.5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("centerY")} title="세로 중앙 (Alt+M)">
-                <AlignCenterHorizontal className="h-3.5 w-3.5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onAlign("bottom")} title="하단 정렬 (Alt+B)">
-                <AlignEndHorizontal className="h-3.5 w-3.5" />
-              </Button>
-            </>
-          )}
-
-          {/* 배분 (3개 이상 선택 시) */}
-          {onDistribute && selectedCount >= 3 && (
-            <>
-              <div className="mx-1 h-4 w-px bg-border" />
-              <span className="mr-1 text-xs font-medium text-primary">배분</span>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("horizontal")} title="가로 균등 배분 (Alt+H)">
-                <AlignHorizontalSpaceAround className="h-3.5 w-3.5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onDistribute("vertical")} title="세로 균등 배분 (Alt+V)">
-                <AlignVerticalSpaceAround className="h-3.5 w-3.5" />
-              </Button>
-            </>
-          )}
-
-          {/* 크기 맞추기 */}
-          {onMatchSize && (
-            <>
-              <div className="mx-1 h-4 w-px bg-border" />
-              <span className="mr-1 text-xs font-medium text-primary">크기</span>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("width")} title="너비 맞추기 (Alt+W)">
-                <RulerIcon className="h-3.5 w-3.5" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("height")} title="높이 맞추기 (Alt+E)">
-                <RulerIcon className="h-3.5 w-3.5 rotate-90" />
-              </Button>
-              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => onMatchSize("both")} title="크기 모두 맞추기">
-                <Equal className="h-3.5 w-3.5" />
-              </Button>
-            </>
-          )}
-
-          <div className="mx-1 h-4 w-px bg-border" />
-          <span className="text-xs text-primary">{selectedCount}개 선택</span>
+        <div className="hdr-zone">
+          <div className="tb-align-tools">
+            {onAlign && (
+              <>
+                <button type="button" className="sq-btn" onClick={() => onAlign("left")} title="좌측 정렬"><AlignStartVertical size={13} /></button>
+                <button type="button" className="sq-btn" onClick={() => onAlign("centerX")} title="가로 중앙"><AlignCenterVertical size={13} /></button>
+                <button type="button" className="sq-btn" onClick={() => onAlign("right")} title="우측 정렬"><AlignEndVertical size={13} /></button>
+                <div className="tb-dot" />
+                <button type="button" className="sq-btn" onClick={() => onAlign("top")} title="상단 정렬"><AlignStartHorizontal size={13} /></button>
+                <button type="button" className="sq-btn" onClick={() => onAlign("centerY")} title="세로 중앙"><AlignCenterHorizontal size={13} /></button>
+                <button type="button" className="sq-btn" onClick={() => onAlign("bottom")} title="하단 정렬"><AlignEndHorizontal size={13} /></button>
+              </>
+            )}
+            {onDistribute && selectedCount >= 3 && (
+              <>
+                <div className="tb-dot" />
+                <button type="button" className="sq-btn" onClick={() => onDistribute("horizontal")} title="가로 균등"><AlignHorizontalSpaceAround size={13} /></button>
+                <button type="button" className="sq-btn" onClick={() => onDistribute("vertical")} title="세로 균등"><AlignVerticalSpaceAround size={13} /></button>
+              </>
+            )}
+            {onMatchSize && (
+              <>
+                <div className="tb-dot" />
+                <button type="button" className="sq-btn" onClick={() => onMatchSize("width")} title="너비 맞추기"><RulerIcon size={13} /></button>
+                <button type="button" className="sq-btn" style={{ transform: "rotate(90deg)" }} onClick={() => onMatchSize("height")} title="높이 맞추기"><RulerIcon size={13} /></button>
+                <button type="button" className="sq-btn" onClick={() => onMatchSize("both")} title="크기 모두"><Equal size={13} /></button>
+              </>
+            )}
+            <span className="tb-sel-count">{selectedCount}</span>
+          </div>
         </div>
       )}
 
-      {/* 우측: 버튼들 */}
-      <div className="flex items-center space-x-2">
-        {/* 라벨 토글 버튼 */}
-        {onToggleLabels && (
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={onToggleLabels}
-            className="flex items-center space-x-1"
-            title="라벨 일괄 표시/숨기기 (Alt+Shift+L)"
-          >
-            <Tag className="h-4 w-4" />
-            <span>라벨</span>
-          </Button>
-        )}
+      {/* Zone 5: Tool icon buttons */}
+      <div className="hdr-zone">
+        <div className="hdr-gap-1">
+          {onToggleLabels && (
+            <button type="button" className="sq-btn" onClick={onToggleLabels} title="라벨 표시/숨기기">
+              <Tag size={13} />
+            </button>
+          )}
+          {onShowShortcuts && (
+            <button type="button" className="sq-btn" onClick={onShowShortcuts} title="단축키 (?)">
+              <Keyboard size={13} />
+            </button>
+          )}
+          {onPreview && (
+            <button type="button" className="sq-btn" onClick={onPreview} title="POP 미리보기">
+              <Eye size={13} />
+            </button>
+          )}
+          {onToggleProperties && (
+            <button
+              type="button"
+              className={cn("sq-btn", isPropertiesOpen && "active")}
+              onClick={onToggleProperties}
+              title="속성 패널 (I)"
+            >
+              {isPropertiesOpen ? <PanelRightClose size={13} /> : <PanelRight size={13} />}
+            </button>
+          )}
+        </div>
+      </div>
 
-        {/* 단축키 도움말 */}
-        {onShowShortcuts && (
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onShowShortcuts}
-            className="h-9 w-9"
-            title="단축키 도움말 (?)"
+      {/* Zone 6: Multilang + Save (end-aligned) */}
+      <div className="hdr-zone end">
+        <div className="hdr-gap-2">
+          {onGenerateMultilang && (
+            <button
+              type="button"
+              className="tool-btn"
+              onClick={onGenerateMultilang}
+              disabled={isGeneratingMultilang}
+              title="다국어 키 자동 생성"
+            >
+              <Languages size={13} />
+              {isGeneratingMultilang ? "생성 중..." : "다국어 생성"}
+            </button>
+          )}
+          {onOpenMultilangSettings && (
+            <button
+              type="button"
+              className="tool-btn"
+              onClick={onOpenMultilangSettings}
+              title="다국어 설정"
+            >
+              <Settings2 size={13} />
+              다국어 설정
+            </button>
+          )}
+          <button
+            type="button"
+            className="tb-save"
+            onClick={onSave}
+            disabled={isSaving}
           >
-            <Keyboard className="h-4 w-4" />
-          </Button>
-        )}
-
-        {onPreview && (
-          <Button variant="outline" onClick={onPreview} className="flex items-center space-x-2">
-            <Eye className="h-4 w-4" />
-            <span>POP 미리보기</span>
-          </Button>
-        )}
-        {onGenerateMultilang && (
-          <Button
-            variant="outline"
-            onClick={onGenerateMultilang}
-            disabled={isGeneratingMultilang}
-            className="flex items-center space-x-2"
-            title="화면 라벨에 대한 다국어 키를 자동으로 생성합니다"
-          >
-            <Languages className="h-4 w-4" />
-            <span>{isGeneratingMultilang ? "생성 중..." : "다국어 생성"}</span>
-          </Button>
-        )}
-        {onOpenMultilangSettings && (
-          <Button
-            variant="outline"
-            onClick={onOpenMultilangSettings}
-            className="flex items-center space-x-2"
-            title="다국어 키 연결 및 설정을 관리합니다"
-          >
-            <Settings2 className="h-4 w-4" />
-            <span>다국어 설정</span>
-          </Button>
-        )}
-        <Button onClick={onSave} disabled={isSaving} className="flex items-center space-x-2">
-          <Save className="h-4 w-4" />
-          <span>{isSaving ? "저장 중..." : "저장"}</span>
-        </Button>
+            <Save size={13} />
+            {isSaving ? "저장 중..." : "저장"}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx b/frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx
index dbc22a6d..a1084d82 100644
--- a/frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2ApprovalStepConfigPanel.tsx
@@ -16,7 +16,7 @@ import { Check, ChevronsUpDown, Database, ChevronDown, Settings } from "lucide-r
 import { cn } from "@/lib/utils";
 import { tableTypeApi } from "@/lib/api/screen";
 import { tableManagementApi } from "@/lib/api/tableManagement";
-import type { ApprovalStepConfig } from "@/lib/registry/components/v2-approval-step/types";
+import type { ApprovalStepConfig } from "@/lib/registry/components/domain/v2-approval-step/types";
 
 interface V2ApprovalStepConfigPanelProps {
   config: ApprovalStepConfig;
diff --git a/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx b/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
index a078e2da..6dc38628 100644
--- a/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2ItemRoutingConfigPanel.tsx
@@ -18,8 +18,8 @@ import {
   Database, Monitor, Columns, List, Filter, Eye,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { ItemRoutingConfig, ProcessColumnDef, ColumnDef, ItemFilterCondition } from "@/lib/registry/components/v2-item-routing/types";
-import { defaultConfig } from "@/lib/registry/components/v2-item-routing/config";
+import type { ItemRoutingConfig, ProcessColumnDef, ColumnDef, ItemFilterCondition } from "@/lib/registry/components/domain/v2-item-routing/types";
+import { defaultConfig } from "@/lib/registry/components/domain/v2-item-routing/config";
 
 interface V2ItemRoutingConfigPanelProps {
   config: Partial<ItemRoutingConfig>;
diff --git a/frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx b/frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx
index a2b7abdc..cb6285b6 100644
--- a/frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2ProcessWorkStandardConfigPanel.tsx
@@ -33,8 +33,8 @@ import type {
   ProcessWorkStandardConfig,
   WorkPhaseDefinition,
   DetailTypeDefinition,
-} from "@/lib/registry/components/v2-process-work-standard/types";
-import { defaultConfig } from "@/lib/registry/components/v2-process-work-standard/config";
+} from "@/lib/registry/components/domain/v2-process-work-standard/types";
+import { defaultConfig } from "@/lib/registry/components/domain/v2-process-work-standard/config";
 
 interface TableInfo { tableName: string; displayName?: string; }
 
diff --git a/frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx b/frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx
index 633702c8..f8d28b15 100644
--- a/frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2RackStructureConfigPanel.tsx
@@ -13,7 +13,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import { Badge } from "@/components/ui/badge";
 import { Database, SlidersHorizontal, Settings, ChevronDown, CheckCircle2, Circle } from "lucide-react";
 import { cn } from "@/lib/utils";
-import type { RackStructureComponentConfig, FieldMapping } from "@/lib/registry/components/v2-rack-structure/types";
+import type { RackStructureComponentConfig, FieldMapping } from "@/lib/registry/components/domain/v2-rack-structure/types";
 
 interface V2RackStructureConfigPanelProps {
   config: RackStructureComponentConfig;
diff --git a/frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx b/frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx
index 44065912..7d9cbb0c 100644
--- a/frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2TimelineSchedulerConfigPanel.tsx
@@ -18,8 +18,8 @@ import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, Command
 import { Settings, ChevronDown, Check, ChevronsUpDown, Database, Users, Layers, Filter, Link, Zap, Trash2, Plus, GripVertical } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { tableTypeApi } from "@/lib/api/screen";
-import type { TimelineSchedulerConfig, ScheduleType, SourceDataConfig, ResourceFieldMapping, FieldMapping, ZoomLevel, ToolbarAction } from "@/lib/registry/components/v2-timeline-scheduler/types";
-import { zoomLevelOptions, scheduleTypeOptions, viewModeOptions, dataSourceOptions, toolbarIconOptions } from "@/lib/registry/components/v2-timeline-scheduler/config";
+import type { TimelineSchedulerConfig, ScheduleType, SourceDataConfig, ResourceFieldMapping, FieldMapping, ZoomLevel, ToolbarAction } from "@/lib/registry/components/domain/v2-timeline-scheduler/types";
+import { zoomLevelOptions, scheduleTypeOptions, viewModeOptions, dataSourceOptions, toolbarIconOptions } from "@/lib/registry/components/domain/v2-timeline-scheduler/config";
 
 interface V2TimelineSchedulerConfigPanelProps {
   config: TimelineSchedulerConfig;
diff --git a/frontend/contexts/MenuContext.tsx b/frontend/contexts/MenuContext.tsx
index 8ef8fe35..7a1adf12 100644
--- a/frontend/contexts/MenuContext.tsx
+++ b/frontend/contexts/MenuContext.tsx
@@ -100,10 +100,9 @@ export function MenuProvider({ children }: { children: ReactNode }) {
   };
 
   useEffect(() => {
-    // user.company_code가 변경되면 메뉴 다시 로드
-    // console.log("🔄 MenuContext: user.company_code 변경 감지, 메뉴 재로드", user?.company_code);
+    if (!user?.company_code) return;
     loadMenus();
-  }, [user?.company_code]); // company_code 변경 시 재로드
+  }, [user?.company_code]);
 
   return (
     <MenuContext.Provider value={{ admin_menus: adminMenus, user_menus: userMenus, loading, refreshMenus }}>{children}</MenuContext.Provider>
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index e941b954..e9b28985 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -363,12 +363,44 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
     "container",
   ]);
 
+  // ── Phase E: v2-* → 통합 컴포넌트 역방향 alias (기존 저장 화면 호환) ──
+  const LEGACY_TO_UNIFIED: Record<string, string> = {
+    // divider
+    "v2-divider-line": "divider", "divider-line": "divider", "v2-split-line": "divider",
+    // title
+    "v2-text-display": "title", "text-display": "title",
+    // button
+    "v2-button-primary": "button", "button-primary": "button",
+    // search
+    "v2-table-search-widget": "search", "table-search-widget": "search",
+    // input
+    "v2-input": "input", "v2-select": "input", "v2-date": "input",
+    "text-input": "input", "number-input": "input", "date-input": "input",
+    "select-basic": "input", "checkbox-basic": "input", "textarea-basic": "input",
+    "slider-basic": "input", "radio-basic": "input", "toggle-switch": "input",
+    // stats
+    "v2-aggregation-widget": "stats", "aggregation-widget": "stats",
+    "v2-status-count": "stats", "v2-card-display": "stats", "card-display": "stats",
+    // table
+    "v2-table-list": "table", "table-list": "table",
+    "v2-table-grouped": "table", "v2-pivot-grid": "table",
+    // container
+    "v2-tabs-widget": "container", "v2-section-card": "container",
+    "v2-section-paper": "container", "v2-repeat-container": "container",
+    "section-card": "container", "section-paper": "container",
+    "accordion-basic": "container",
+  };
+
   const mapToV2ComponentType = (type: string | undefined): string | undefined => {
     if (!type) return type;
 
     // INVYONE 통합 컴포넌트는 매핑 없이 그대로 반환
     if (INVYONE_UNIFIED_IDS.has(type)) return type;
 
+    // ★ Phase E: v2-*/legacy → 통합 컴포넌트 alias
+    const unified = LEGACY_TO_UNIFIED[type];
+    if (unified) return unified;
+
     // 이미 v2- 접두사가 있으면 그대로 반환
     if (type.startsWith("v2-")) return type;
 
diff --git a/frontend/lib/registry/components/button/ButtonConfigPanel.tsx b/frontend/lib/registry/components/button/ButtonConfigPanel.tsx
index ee01e101..ee06c57f 100644
--- a/frontend/lib/registry/components/button/ButtonConfigPanel.tsx
+++ b/frontend/lib/registry/components/button/ButtonConfigPanel.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import type { ButtonConfig } from "./types";
+import { IconPicker } from "../common/IconPicker";
 
 /**
  * Button ConfigPanel — V2PropertiesPanel 에서 호출되는 설정 패널.
@@ -160,6 +161,26 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         />
       </div>
 
+      <div>
+        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
+          아이콘
+        </label>
+        <IconPicker
+          value={current.icon}
+          onChange={(v) => patch({ icon: v || undefined })}
+        />
+        {current.icon && (
+          <select
+            value={current.iconPosition || "left"}
+            onChange={(e) => patch({ iconPosition: e.target.value as "left" | "right" })}
+            className="border-border bg-background mt-1 w-full rounded border px-2 py-1 text-xs"
+          >
+            <option value="left">아이콘 왼쪽</option>
+            <option value="right">아이콘 오른쪽</option>
+          </select>
+        )}
+      </div>
+
       <label className="flex items-center gap-2 text-xs">
         <input
           type="checkbox"
diff --git a/frontend/lib/registry/components/button/index.ts b/frontend/lib/registry/components/button/index.ts
index 0e051834..00f0ece7 100644
--- a/frontend/lib/registry/components/button/index.ts
+++ b/frontend/lib/registry/components/button/index.ts
@@ -36,7 +36,7 @@ export const ButtonDefinition = createComponentDefinition({
   id: "button",
   name: "버튼",
   name_eng: "Button",
-  description: "통합 단일 버튼. 6종 variant × 13종 actionType",
+  description: "저장, 삭제, 팝업 등 동작 실행",
   category: ComponentCategory.ACTION,
   web_type: "button",
   component: ButtonWrapper,
diff --git a/frontend/lib/registry/components/common/IconPicker.tsx b/frontend/lib/registry/components/common/IconPicker.tsx
new file mode 100644
index 00000000..7c3222f6
--- /dev/null
+++ b/frontend/lib/registry/components/common/IconPicker.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useState, useMemo } from "react";
+import * as LucideIcons from "lucide-react";
+
+// lucide-react에서 실제 아이콘만 추출 (유틸/타입 제외)
+const ICON_ENTRIES = Object.entries(LucideIcons).filter(
+  ([name, comp]) =>
+    typeof comp === "object" &&
+    name !== "default" &&
+    name !== "createLucideIcon" &&
+    name !== "icons" &&
+    name[0] === name[0].toUpperCase() &&
+    !name.endsWith("Icon"),
+);
+
+// 자주 쓰는 아이콘 (상단 표시)
+const POPULAR = [
+  "Search", "Plus", "Edit", "Trash2", "Save", "Check", "X", "ChevronDown",
+  "ChevronRight", "Settings", "User", "Users", "Mail", "Calendar", "Clock",
+  "File", "Folder", "Download", "Upload", "Eye", "EyeOff", "Lock", "Unlock",
+  "Star", "Heart", "Home", "ArrowLeft", "ArrowRight", "RefreshCw", "Filter",
+  "BarChart3", "PieChart", "TrendingUp", "DollarSign", "ShoppingCart", "Package",
+];
+
+interface IconPickerProps {
+  value?: string;
+  onChange: (iconName: string) => void;
+  className?: string;
+}
+
+export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, className }) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) {
+      // 인기 아이콘 + 나머지 (최대 80개)
+      const popularSet = new Set(POPULAR);
+      const popular = ICON_ENTRIES.filter(([n]) => popularSet.has(n));
+      const rest = ICON_ENTRIES.filter(([n]) => !popularSet.has(n)).slice(0, 80 - popular.length);
+      return [...popular, ...rest];
+    }
+    const q = search.toLowerCase();
+    return ICON_ENTRIES.filter(([name]) => name.toLowerCase().includes(q)).slice(0, 80);
+  }, [search]);
+
+  // 현재 선택된 아이콘 렌더
+  const SelectedIcon = value ? (LucideIcons as any)[value] : null;
+
+  return (
+    <div className={`relative ${className || ""}`}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="border-border bg-background flex w-full items-center gap-2 rounded border px-2 py-1 text-xs"
+      >
+        {SelectedIcon ? (
+          <>
+            <SelectedIcon size={14} />
+            <span className="flex-1 truncate text-left font-mono">{value}</span>
+          </>
+        ) : (
+          <span className="text-muted-foreground flex-1 text-left">아이콘 선택...</span>
+        )}
+        <LucideIcons.ChevronDown size={12} className="text-muted-foreground shrink-0" />
+      </button>
+
+      {open && (
+        <div className="border-border bg-card absolute top-full right-0 left-0 z-50 mt-1 rounded border shadow-lg">
+          <div className="border-border border-b p-1.5">
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="아이콘 검색..."
+              className="border-border bg-background w-full rounded border px-2 py-1 text-[0.65rem]"
+              autoFocus
+            />
+          </div>
+          <div className="grid max-h-48 grid-cols-6 gap-0.5 overflow-y-auto p-1.5">
+            {/* 선택 해제 */}
+            <button
+              type="button"
+              onClick={() => { onChange(""); setOpen(false); }}
+              className="hover:bg-accent text-muted-foreground flex h-7 items-center justify-center rounded text-[0.55rem]"
+              title="없음"
+            >
+              --
+            </button>
+            {filtered.map(([name, Icon]) => {
+              const IconComp = Icon as React.FC<{ size?: number }>;
+              return (
+                <button
+                  key={name}
+                  type="button"
+                  onClick={() => { onChange(name); setOpen(false); setSearch(""); }}
+                  className={`flex h-7 items-center justify-center rounded transition-colors ${
+                    name === value ? "bg-primary/10 text-primary" : "hover:bg-accent text-foreground"
+                  }`}
+                  title={name}
+                >
+                  <IconComp size={14} />
+                </button>
+              );
+            })}
+          </div>
+          {filtered.length === 0 && (
+            <div className="text-muted-foreground p-3 text-center text-[0.6rem]">
+              &ldquo;{search}&rdquo; 결과 없음
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default IconPicker;
diff --git a/frontend/lib/registry/components/container/index.ts b/frontend/lib/registry/components/container/index.ts
index c52f4a7d..38494e0b 100644
--- a/frontend/lib/registry/components/container/index.ts
+++ b/frontend/lib/registry/components/container/index.ts
@@ -13,9 +13,9 @@ const DEFAULT_CONFIG = {
 
 export const ContainerDefinition = createComponentDefinition({
   id: "container",
-  name: "컨테이너",
+  name: "영역",
   name_eng: "Container",
-  description: "탭/섹션/아코디언/반복/조건부 통합 레이아웃 컨테이너",
+  description: "탭, 접힘, 구역 나누기 등 레이아웃",
   category: ComponentCategory.LAYOUT,
   web_type: "text",
   component: ContainerWrapper,
diff --git a/frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx b/frontend/lib/registry/components/domain/flow-widget/FlowWidgetRenderer.tsx
similarity index 86%
rename from frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx
rename to frontend/lib/registry/components/domain/flow-widget/FlowWidgetRenderer.tsx
index 14111f58..6cdd88a5 100644
--- a/frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx
+++ b/frontend/lib/registry/components/domain/flow-widget/FlowWidgetRenderer.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { FlowWidgetDefinition } from "./index";
 import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 
 /**
  * FlowWidget 렌더러
diff --git a/frontend/lib/registry/components/flow-widget/index.ts b/frontend/lib/registry/components/domain/flow-widget/index.ts
similarity index 100%
rename from frontend/lib/registry/components/flow-widget/index.ts
rename to frontend/lib/registry/components/domain/flow-widget/index.ts
diff --git a/frontend/lib/registry/components/map/MapComponent.tsx b/frontend/lib/registry/components/domain/map/MapComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/map/MapComponent.tsx
rename to frontend/lib/registry/components/domain/map/MapComponent.tsx
diff --git a/frontend/lib/registry/components/map/MapConfigPanel.tsx b/frontend/lib/registry/components/domain/map/MapConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/map/MapConfigPanel.tsx
rename to frontend/lib/registry/components/domain/map/MapConfigPanel.tsx
diff --git a/frontend/lib/registry/components/map/MapPreviewComponent.tsx b/frontend/lib/registry/components/domain/map/MapPreviewComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/map/MapPreviewComponent.tsx
rename to frontend/lib/registry/components/domain/map/MapPreviewComponent.tsx
diff --git a/frontend/lib/registry/components/map/MapRenderer.tsx b/frontend/lib/registry/components/domain/map/MapRenderer.tsx
similarity index 96%
rename from frontend/lib/registry/components/map/MapRenderer.tsx
rename to frontend/lib/registry/components/domain/map/MapRenderer.tsx
index 9a86c2d7..ed2d4077 100644
--- a/frontend/lib/registry/components/map/MapRenderer.tsx
+++ b/frontend/lib/registry/components/domain/map/MapRenderer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { ComponentCategory } from "@/types/component";
 import MapComponent from "./MapComponent";
 import MapPreviewComponent from "./MapPreviewComponent";
diff --git a/frontend/lib/registry/components/map/index.ts b/frontend/lib/registry/components/domain/map/index.ts
similarity index 100%
rename from frontend/lib/registry/components/map/index.ts
rename to frontend/lib/registry/components/domain/map/index.ts
diff --git a/frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx b/frontend/lib/registry/components/domain/v2-approval-step/ApprovalStepComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-approval-step/ApprovalStepComponent.tsx
rename to frontend/lib/registry/components/domain/v2-approval-step/ApprovalStepComponent.tsx
diff --git a/frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx b/frontend/lib/registry/components/domain/v2-approval-step/ApprovalStepConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-approval-step/ApprovalStepConfigPanel.tsx
rename to frontend/lib/registry/components/domain/v2-approval-step/ApprovalStepConfigPanel.tsx
diff --git a/frontend/lib/registry/components/v2-approval-step/ApprovalStepRenderer.tsx b/frontend/lib/registry/components/domain/v2-approval-step/ApprovalStepRenderer.tsx
similarity index 85%
rename from frontend/lib/registry/components/v2-approval-step/ApprovalStepRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-approval-step/ApprovalStepRenderer.tsx
index 9a54ce0f..7b7beecf 100644
--- a/frontend/lib/registry/components/v2-approval-step/ApprovalStepRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-approval-step/ApprovalStepRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2ApprovalStepDefinition } from "./index";
 import { ApprovalStepComponent } from "./ApprovalStepComponent";
 
diff --git a/frontend/lib/registry/components/v2-approval-step/index.ts b/frontend/lib/registry/components/domain/v2-approval-step/index.ts
similarity index 92%
rename from frontend/lib/registry/components/v2-approval-step/index.ts
rename to frontend/lib/registry/components/domain/v2-approval-step/index.ts
index fb0bd7bf..b4470c85 100644
--- a/frontend/lib/registry/components/v2-approval-step/index.ts
+++ b/frontend/lib/registry/components/domain/v2-approval-step/index.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import type { WebType } from "@/types/screen";
 import { ApprovalStepWrapper } from "./ApprovalStepComponent";
@@ -14,7 +14,7 @@ import { ApprovalStepConfig } from "./types";
  */
 export const V2ApprovalStepDefinition = createComponentDefinition({
   id: "v2-approval-step",
-  name: "결재 단계",
+  name: "결재 현황",
   name_eng: "ApprovalStep Component",
   description: "결재 요청의 각 단계별 상태를 스테퍼 형태로 시각화합니다",
   category: ComponentCategory.DISPLAY,
diff --git a/frontend/lib/registry/components/v2-approval-step/types.ts b/frontend/lib/registry/components/domain/v2-approval-step/types.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-approval-step/types.ts
rename to frontend/lib/registry/components/domain/v2-approval-step/types.ts
diff --git a/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx b/frontend/lib/registry/components/domain/v2-bom-item-editor/BomItemEditorComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorComponent.tsx
rename to frontend/lib/registry/components/domain/v2-bom-item-editor/BomItemEditorComponent.tsx
diff --git a/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorRenderer.tsx b/frontend/lib/registry/components/domain/v2-bom-item-editor/BomItemEditorRenderer.tsx
similarity index 85%
rename from frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-bom-item-editor/BomItemEditorRenderer.tsx
index 09cf855c..6cd18836 100644
--- a/frontend/lib/registry/components/v2-bom-item-editor/BomItemEditorRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-bom-item-editor/BomItemEditorRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { BomItemEditorComponent } from "./BomItemEditorComponent";
 import { V2BomItemEditorDefinition } from "./index";
 
diff --git a/frontend/lib/registry/components/v2-bom-item-editor/index.ts b/frontend/lib/registry/components/domain/v2-bom-item-editor/index.ts
similarity index 91%
rename from frontend/lib/registry/components/v2-bom-item-editor/index.ts
rename to frontend/lib/registry/components/domain/v2-bom-item-editor/index.ts
index db26cf7f..a54fdfde 100644
--- a/frontend/lib/registry/components/v2-bom-item-editor/index.ts
+++ b/frontend/lib/registry/components/domain/v2-bom-item-editor/index.ts
@@ -1,5 +1,5 @@
 import { ComponentCategory } from "@/types/component";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { BomItemEditorComponent } from "./BomItemEditorComponent";
 
 export const V2BomItemEditorDefinition = createComponentDefinition({
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomDetailEditModal.tsx b/frontend/lib/registry/components/domain/v2-bom-tree/BomDetailEditModal.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-bom-tree/BomDetailEditModal.tsx
rename to frontend/lib/registry/components/domain/v2-bom-tree/BomDetailEditModal.tsx
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx b/frontend/lib/registry/components/domain/v2-bom-tree/BomExcelUploadModal.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-bom-tree/BomExcelUploadModal.tsx
rename to frontend/lib/registry/components/domain/v2-bom-tree/BomExcelUploadModal.tsx
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx b/frontend/lib/registry/components/domain/v2-bom-tree/BomHistoryModal.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-bom-tree/BomHistoryModal.tsx
rename to frontend/lib/registry/components/domain/v2-bom-tree/BomHistoryModal.tsx
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx b/frontend/lib/registry/components/domain/v2-bom-tree/BomTreeComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-bom-tree/BomTreeComponent.tsx
rename to frontend/lib/registry/components/domain/v2-bom-tree/BomTreeComponent.tsx
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomTreeRenderer.tsx b/frontend/lib/registry/components/domain/v2-bom-tree/BomTreeRenderer.tsx
similarity index 86%
rename from frontend/lib/registry/components/v2-bom-tree/BomTreeRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-bom-tree/BomTreeRenderer.tsx
index a8219810..2da4c8e8 100644
--- a/frontend/lib/registry/components/v2-bom-tree/BomTreeRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-bom-tree/BomTreeRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2BomTreeDefinition } from "./index";
 import { BomTreeComponent } from "./BomTreeComponent";
 
diff --git a/frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx b/frontend/lib/registry/components/domain/v2-bom-tree/BomVersionModal.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-bom-tree/BomVersionModal.tsx
rename to frontend/lib/registry/components/domain/v2-bom-tree/BomVersionModal.tsx
diff --git a/frontend/lib/registry/components/v2-bom-tree/index.ts b/frontend/lib/registry/components/domain/v2-bom-tree/index.ts
similarity index 89%
rename from frontend/lib/registry/components/v2-bom-tree/index.ts
rename to frontend/lib/registry/components/domain/v2-bom-tree/index.ts
index 18c5d4c5..5d9841ab 100644
--- a/frontend/lib/registry/components/v2-bom-tree/index.ts
+++ b/frontend/lib/registry/components/domain/v2-bom-tree/index.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentCategory } from "@/types/component";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { BomTreeComponent } from "./BomTreeComponent";
 
 export const V2BomTreeDefinition = createComponentDefinition({
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx b/frontend/lib/registry/components/domain/v2-item-routing/ItemRoutingComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-item-routing/ItemRoutingComponent.tsx
rename to frontend/lib/registry/components/domain/v2-item-routing/ItemRoutingComponent.tsx
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingConfigPanel.tsx b/frontend/lib/registry/components/domain/v2-item-routing/ItemRoutingConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-item-routing/ItemRoutingConfigPanel.tsx
rename to frontend/lib/registry/components/domain/v2-item-routing/ItemRoutingConfigPanel.tsx
diff --git a/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx b/frontend/lib/registry/components/domain/v2-item-routing/ItemRoutingRenderer.tsx
similarity index 90%
rename from frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-item-routing/ItemRoutingRenderer.tsx
index 653d351d..9bde7d1f 100644
--- a/frontend/lib/registry/components/v2-item-routing/ItemRoutingRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-item-routing/ItemRoutingRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2ItemRoutingDefinition } from "./index";
 import { ItemRoutingComponent } from "./ItemRoutingComponent";
 
diff --git a/frontend/lib/registry/components/v2-item-routing/config.ts b/frontend/lib/registry/components/domain/v2-item-routing/config.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-item-routing/config.ts
rename to frontend/lib/registry/components/domain/v2-item-routing/config.ts
diff --git a/frontend/lib/registry/components/v2-item-routing/hooks/useItemRouting.ts b/frontend/lib/registry/components/domain/v2-item-routing/hooks/useItemRouting.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-item-routing/hooks/useItemRouting.ts
rename to frontend/lib/registry/components/domain/v2-item-routing/hooks/useItemRouting.ts
diff --git a/frontend/lib/registry/components/v2-item-routing/index.ts b/frontend/lib/registry/components/domain/v2-item-routing/index.ts
similarity index 94%
rename from frontend/lib/registry/components/v2-item-routing/index.ts
rename to frontend/lib/registry/components/domain/v2-item-routing/index.ts
index 460dc63e..7aa35ef0 100644
--- a/frontend/lib/registry/components/v2-item-routing/index.ts
+++ b/frontend/lib/registry/components/domain/v2-item-routing/index.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { ItemRoutingComponent } from "./ItemRoutingComponent";
 import { V2ItemRoutingConfigPanel as ItemRoutingConfigPanel } from "@/components/v2/config-panels/V2ItemRoutingConfigPanel";
@@ -9,7 +9,7 @@ import { defaultConfig } from "./config";
 
 export const V2ItemRoutingDefinition = createComponentDefinition({
   id: "v2-item-routing",
-  name: "품목별 라우팅",
+  name: "공정 순서 관리",
   name_eng: "Item Routing",
   description: "품목별 라우팅 버전과 공정 순서를 관리하는 3단계 계층 컴포넌트",
   category: ComponentCategory.INPUT,
diff --git a/frontend/lib/registry/components/v2-item-routing/types.ts b/frontend/lib/registry/components/domain/v2-item-routing/types.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-item-routing/types.ts
rename to frontend/lib/registry/components/domain/v2-item-routing/types.ts
diff --git a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorComponent.tsx b/frontend/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorComponent.tsx
rename to frontend/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorComponent.tsx
diff --git a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx b/frontend/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
rename to frontend/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorConfigPanel.tsx
diff --git a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorRenderer.tsx b/frontend/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorRenderer.tsx
similarity index 91%
rename from frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorRenderer.tsx
index 8ce0b9f0..b550b5da 100644
--- a/frontend/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2LocationSwapSelectorDefinition } from "./index";
 import { LocationSwapSelectorComponent } from "./LocationSwapSelectorComponent";
 
diff --git a/frontend/lib/registry/components/v2-location-swap-selector/index.ts b/frontend/lib/registry/components/domain/v2-location-swap-selector/index.ts
similarity index 96%
rename from frontend/lib/registry/components/v2-location-swap-selector/index.ts
rename to frontend/lib/registry/components/domain/v2-location-swap-selector/index.ts
index 3eeaa56c..4e330721 100644
--- a/frontend/lib/registry/components/v2-location-swap-selector/index.ts
+++ b/frontend/lib/registry/components/domain/v2-location-swap-selector/index.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { LocationSwapSelectorComponent } from "./LocationSwapSelectorComponent";
 import { V2LocationSwapSelectorConfigPanel as LocationSwapSelectorConfigPanel } from "@/components/v2/config-panels/V2LocationSwapSelectorConfigPanel";
diff --git a/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardComponent.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardComponent.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardComponent.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardConfigPanel.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardRenderer.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardRenderer.tsx
similarity index 90%
rename from frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardRenderer.tsx
index aedfae37..95e0dac5 100644
--- a/frontend/lib/registry/components/v2-process-work-standard/ProcessWorkStandardRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2ProcessWorkStandardDefinition } from "./index";
 import { ProcessWorkStandardComponent } from "./ProcessWorkStandardComponent";
 
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/DetailFormModal.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/components/DetailFormModal.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/components/DetailFormModal.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/components/DetailFormModal.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/InspectionStandardLookup.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/components/InspectionStandardLookup.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/components/InspectionStandardLookup.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/components/InspectionStandardLookup.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/ItemProcessSelector.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/components/ItemProcessSelector.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/components/ItemProcessSelector.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/components/ItemProcessSelector.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/WorkItemAddModal.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkItemAddModal.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/components/WorkItemAddModal.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkItemAddModal.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/WorkItemCard.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkItemCard.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/components/WorkItemCard.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkItemCard.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/WorkItemDetailList.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkItemDetailList.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/components/WorkItemDetailList.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkItemDetailList.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/components/WorkPhaseSection.tsx b/frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkPhaseSection.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/components/WorkPhaseSection.tsx
rename to frontend/lib/registry/components/domain/v2-process-work-standard/components/WorkPhaseSection.tsx
diff --git a/frontend/lib/registry/components/v2-process-work-standard/config.ts b/frontend/lib/registry/components/domain/v2-process-work-standard/config.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/config.ts
rename to frontend/lib/registry/components/domain/v2-process-work-standard/config.ts
diff --git a/frontend/lib/registry/components/v2-process-work-standard/hooks/useProcessWorkStandard.ts b/frontend/lib/registry/components/domain/v2-process-work-standard/hooks/useProcessWorkStandard.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/hooks/useProcessWorkStandard.ts
rename to frontend/lib/registry/components/domain/v2-process-work-standard/hooks/useProcessWorkStandard.ts
diff --git a/frontend/lib/registry/components/v2-process-work-standard/index.ts b/frontend/lib/registry/components/domain/v2-process-work-standard/index.ts
similarity index 94%
rename from frontend/lib/registry/components/v2-process-work-standard/index.ts
rename to frontend/lib/registry/components/domain/v2-process-work-standard/index.ts
index e0a9ed11..3cfaa9c8 100644
--- a/frontend/lib/registry/components/v2-process-work-standard/index.ts
+++ b/frontend/lib/registry/components/domain/v2-process-work-standard/index.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { ProcessWorkStandardComponent } from "./ProcessWorkStandardComponent";
 import { V2ProcessWorkStandardConfigPanel as ProcessWorkStandardConfigPanel } from "@/components/v2/config-panels/V2ProcessWorkStandardConfigPanel";
@@ -9,7 +9,7 @@ import { defaultConfig } from "./config";
 
 export const V2ProcessWorkStandardDefinition = createComponentDefinition({
   id: "v2-process-work-standard",
-  name: "공정 작업기준",
+  name: "공정 기준 관리",
   name_eng: "Process Work Standard",
   description: "품목별 라우팅/공정에 대한 작업 전·중·후 기준 항목을 관리하는 컴포넌트",
   category: ComponentCategory.INPUT,
diff --git a/frontend/lib/registry/components/v2-process-work-standard/types.ts b/frontend/lib/registry/components/domain/v2-process-work-standard/types.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-process-work-standard/types.ts
rename to frontend/lib/registry/components/domain/v2-process-work-standard/types.ts
diff --git a/frontend/lib/registry/components/v2-rack-structure/FormatSegmentEditor.tsx b/frontend/lib/registry/components/domain/v2-rack-structure/FormatSegmentEditor.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-rack-structure/FormatSegmentEditor.tsx
rename to frontend/lib/registry/components/domain/v2-rack-structure/FormatSegmentEditor.tsx
diff --git a/frontend/lib/registry/components/v2-rack-structure/README.md b/frontend/lib/registry/components/domain/v2-rack-structure/README.md
similarity index 100%
rename from frontend/lib/registry/components/v2-rack-structure/README.md
rename to frontend/lib/registry/components/domain/v2-rack-structure/README.md
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx b/frontend/lib/registry/components/domain/v2-rack-structure/RackStructureComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-rack-structure/RackStructureComponent.tsx
rename to frontend/lib/registry/components/domain/v2-rack-structure/RackStructureComponent.tsx
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx b/frontend/lib/registry/components/domain/v2-rack-structure/RackStructureConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-rack-structure/RackStructureConfigPanel.tsx
rename to frontend/lib/registry/components/domain/v2-rack-structure/RackStructureConfigPanel.tsx
diff --git a/frontend/lib/registry/components/v2-rack-structure/RackStructureRenderer.tsx b/frontend/lib/registry/components/domain/v2-rack-structure/RackStructureRenderer.tsx
similarity index 95%
rename from frontend/lib/registry/components/v2-rack-structure/RackStructureRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-rack-structure/RackStructureRenderer.tsx
index 16fe7188..ab11edb4 100644
--- a/frontend/lib/registry/components/v2-rack-structure/RackStructureRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-rack-structure/RackStructureRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2RackStructureDefinition } from "./index";
 import { RackStructureComponent } from "./RackStructureComponent";
 import { GeneratedLocation } from "./types";
diff --git a/frontend/lib/registry/components/v2-rack-structure/config.ts b/frontend/lib/registry/components/domain/v2-rack-structure/config.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-rack-structure/config.ts
rename to frontend/lib/registry/components/domain/v2-rack-structure/config.ts
diff --git a/frontend/lib/registry/components/v2-rack-structure/index.ts b/frontend/lib/registry/components/domain/v2-rack-structure/index.ts
similarity index 95%
rename from frontend/lib/registry/components/v2-rack-structure/index.ts
rename to frontend/lib/registry/components/domain/v2-rack-structure/index.ts
index 516327ef..6325e650 100644
--- a/frontend/lib/registry/components/v2-rack-structure/index.ts
+++ b/frontend/lib/registry/components/domain/v2-rack-structure/index.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { RackStructureWrapper } from "./RackStructureComponent";
 import { V2RackStructureConfigPanel as RackStructureConfigPanel } from "@/components/v2/config-panels/V2RackStructureConfigPanel";
@@ -13,7 +13,7 @@ import { defaultConfig } from "./config";
  */
 export const V2RackStructureDefinition = createComponentDefinition({
   id: "v2-rack-structure",
-  name: "렉 구조 설정",
+  name: "창고 렉 관리",
   name_eng: "Rack Structure Config",
   description: "창고 렉 위치를 열 범위와 단 수로 일괄 생성하는 컴포넌트",
   category: ComponentCategory.INPUT,
diff --git a/frontend/lib/registry/components/v2-rack-structure/types.ts b/frontend/lib/registry/components/domain/v2-rack-structure/types.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-rack-structure/types.ts
rename to frontend/lib/registry/components/domain/v2-rack-structure/types.ts
diff --git a/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorComponent.tsx b/frontend/lib/registry/components/domain/v2-shipping-plan-editor/ShippingPlanEditorComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorComponent.tsx
rename to frontend/lib/registry/components/domain/v2-shipping-plan-editor/ShippingPlanEditorComponent.tsx
diff --git a/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorConfigPanel.tsx b/frontend/lib/registry/components/domain/v2-shipping-plan-editor/ShippingPlanEditorConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorConfigPanel.tsx
rename to frontend/lib/registry/components/domain/v2-shipping-plan-editor/ShippingPlanEditorConfigPanel.tsx
diff --git a/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx b/frontend/lib/registry/components/domain/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx
similarity index 83%
rename from frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx
index ff7a5eaa..2522ec8b 100644
--- a/frontend/lib/registry/components/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-shipping-plan-editor/ShippingPlanEditorRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2ShippingPlanEditorDefinition } from "./index";
 import { ShippingPlanEditorComponent } from "./ShippingPlanEditorComponent";
 
diff --git a/frontend/lib/registry/components/v2-shipping-plan-editor/index.ts b/frontend/lib/registry/components/domain/v2-shipping-plan-editor/index.ts
similarity index 88%
rename from frontend/lib/registry/components/v2-shipping-plan-editor/index.ts
rename to frontend/lib/registry/components/domain/v2-shipping-plan-editor/index.ts
index 19272a56..90a60b16 100644
--- a/frontend/lib/registry/components/v2-shipping-plan-editor/index.ts
+++ b/frontend/lib/registry/components/domain/v2-shipping-plan-editor/index.ts
@@ -1,13 +1,13 @@
 "use client";
 
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { ComponentCategory } from "@/types/component";
 import { ShippingPlanEditorWrapper } from "./ShippingPlanEditorComponent";
 import { ShippingPlanEditorConfigPanel } from "./ShippingPlanEditorConfigPanel";
 
 export const V2ShippingPlanEditorDefinition = createComponentDefinition({
   id: "v2-shipping-plan-editor",
-  name: "출하계획 동시등록",
+  name: "출하 계획",
   name_eng: "Shipping Plan Editor",
   description: "수주 선택 후 품목별 그룹핑하여 출하계획을 일괄 등록하는 컴포넌트",
   category: ComponentCategory.DISPLAY,
diff --git a/frontend/lib/registry/components/v2-shipping-plan-editor/types.ts b/frontend/lib/registry/components/domain/v2-shipping-plan-editor/types.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-shipping-plan-editor/types.ts
rename to frontend/lib/registry/components/domain/v2-shipping-plan-editor/types.ts
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/README.md b/frontend/lib/registry/components/domain/v2-timeline-scheduler/README.md
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/README.md
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/README.md
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/TimelineSchedulerComponent.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerComponent.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/TimelineSchedulerComponent.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/TimelineSchedulerConfigPanel.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
similarity index 94%
rename from frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
index 48e8a21f..0f25cded 100644
--- a/frontend/lib/registry/components/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
+++ b/frontend/lib/registry/components/domain/v2-timeline-scheduler/TimelineSchedulerRenderer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { AutoRegisteringComponentRenderer } from "../../../AutoRegisteringComponentRenderer";
 import { V2TimelineSchedulerDefinition } from "./index";
 import { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
 
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/ItemTimelineCard.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/components/ItemTimelineCard.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/components/ItemTimelineCard.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/components/ItemTimelineCard.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/components/ResourceRow.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/components/ResourceRow.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/components/ResourceRow.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/components/ScheduleBar.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/components/ScheduleBar.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/components/ScheduleBar.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/SchedulePreviewDialog.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/components/SchedulePreviewDialog.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/components/SchedulePreviewDialog.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/components/SchedulePreviewDialog.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/components/TimelineHeader.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineHeader.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/components/TimelineHeader.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineLegend.tsx b/frontend/lib/registry/components/domain/v2-timeline-scheduler/components/TimelineLegend.tsx
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/components/TimelineLegend.tsx
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/components/TimelineLegend.tsx
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts b/frontend/lib/registry/components/domain/v2-timeline-scheduler/components/index.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/components/index.ts
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/components/index.ts
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/config.ts b/frontend/lib/registry/components/domain/v2-timeline-scheduler/config.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/config.ts
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/config.ts
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts b/frontend/lib/registry/components/domain/v2-timeline-scheduler/hooks/useTimelineData.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/hooks/useTimelineData.ts
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/hooks/useTimelineData.ts
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/index.ts b/frontend/lib/registry/components/domain/v2-timeline-scheduler/index.ts
similarity index 92%
rename from frontend/lib/registry/components/v2-timeline-scheduler/index.ts
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/index.ts
index f52deadb..e1196f1a 100644
--- a/frontend/lib/registry/components/v2-timeline-scheduler/index.ts
+++ b/frontend/lib/registry/components/domain/v2-timeline-scheduler/index.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { ComponentCategory } from "@/types/component";
-import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { createComponentDefinition } from "../../../utils/createComponentDefinition";
 import { TimelineSchedulerComponent } from "./TimelineSchedulerComponent";
 import { V2TimelineSchedulerConfigPanel as TimelineSchedulerConfigPanel } from "@/components/v2/config-panels/V2TimelineSchedulerConfigPanel";
 import { defaultTimelineSchedulerConfig } from "./config";
@@ -13,7 +13,7 @@ import { TimelineSchedulerConfig } from "./types";
  */
 export const V2TimelineSchedulerDefinition = createComponentDefinition({
   id: "v2-timeline-scheduler",
-  name: "타임라인 스케줄러",
+  name: "일정 관리",
   name_eng: "Timeline Scheduler Component",
   description: "간트차트 형태의 일정/계획 시각화 및 편집 컴포넌트",
   category: ComponentCategory.DISPLAY,
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/types.ts b/frontend/lib/registry/components/domain/v2-timeline-scheduler/types.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/types.ts
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/types.ts
diff --git a/frontend/lib/registry/components/v2-timeline-scheduler/utils/conflictDetection.ts b/frontend/lib/registry/components/domain/v2-timeline-scheduler/utils/conflictDetection.ts
similarity index 100%
rename from frontend/lib/registry/components/v2-timeline-scheduler/utils/conflictDetection.ts
rename to frontend/lib/registry/components/domain/v2-timeline-scheduler/utils/conflictDetection.ts
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 98d3aad2..ffa17745 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -31,9 +31,9 @@ import "./toggle-switch/ToggleSwitchRenderer";
 import "./image-display/ImageDisplayRenderer";
 import "./accordion-basic/AccordionBasicRenderer"; // 컴포넌트 패널에서만 숨김
 import "./split-panel-layout2/SplitPanelLayout2Renderer"; // 분할 패널 레이아웃 v2
-import "./map/MapRenderer";
+import "./domain/map/MapRenderer";
 import "./repeater-field-group/RepeaterFieldGroupRenderer";
-import "./flow-widget/FlowWidgetRenderer";
+import "./domain/flow-widget/FlowWidgetRenderer";
 import "./category-manager/CategoryManagerRenderer";
 import "./customer-item-mapping/CustomerItemMappingRenderer"; // 거래처별 품목정보
 
@@ -118,26 +118,26 @@ import "./container/ContainerRenderer"; // v2-tabs-widget + v2-section-card/pape
 import "./v2-repeat-container/RepeatContainerRenderer";
 import "./v2-section-card/SectionCardRenderer";
 import "./v2-section-paper/SectionPaperRenderer";
-import "./v2-rack-structure/RackStructureRenderer";
-import "./v2-location-swap-selector/LocationSwapSelectorRenderer";
+import "./domain/v2-rack-structure/RackStructureRenderer";
+import "./domain/v2-location-swap-selector/LocationSwapSelectorRenderer";
 import "./v2-table-search-widget";
 import "./v2-tabs-widget/tabs-component";
 import "./v2-category-manager/V2CategoryManagerRenderer";
 import "./v2-media/V2MediaRenderer"; // V2 통합 미디어 컴포넌트
 import "./v2-table-grouped/TableGroupedRenderer"; // 그룹화 테이블
-import "./v2-timeline-scheduler/TimelineSchedulerRenderer"; // 타임라인 스케줄러
+import "./domain/v2-timeline-scheduler/TimelineSchedulerRenderer"; // 타임라인 스케줄러
 import "./v2-input/V2InputRenderer"; // V2 통합 입력 컴포넌트
 import "./v2-select/V2SelectRenderer"; // V2 통합 선택 컴포넌트
 import "./v2-date/V2DateRenderer"; // V2 통합 날짜 컴포넌트
 import "./v2-file-upload/V2FileUploadRenderer"; // V2 파일 업로드 컴포넌트
 import "./v2-split-line/SplitLineRenderer"; // V2 캔버스 분할선
-import "./v2-bom-tree/BomTreeRenderer"; // BOM 트리 뷰
-import "./v2-bom-item-editor/BomItemEditorRenderer"; // BOM 하위품목 편집기
-import "./v2-approval-step/ApprovalStepRenderer"; // 결재 단계 시각화
+import "./domain/v2-bom-tree/BomTreeRenderer"; // BOM 트리 뷰
+import "./domain/v2-bom-item-editor/BomItemEditorRenderer"; // BOM 하위품목 편집기
+import "./domain/v2-approval-step/ApprovalStepRenderer"; // 결재 단계 시각화
 import "./v2-status-count/StatusCountRenderer"; // 상태별 카운트 카드
-import "./v2-process-work-standard/ProcessWorkStandardRenderer"; // 공정 작업기준
-import "./v2-item-routing/ItemRoutingRenderer"; // 품목별 라우팅
-import "./v2-shipping-plan-editor/ShippingPlanEditorRenderer"; // 출하계획 동시등록
+import "./domain/v2-process-work-standard/ProcessWorkStandardRenderer"; // 공정 작업기준
+import "./domain/v2-item-routing/ItemRoutingRenderer"; // 품목별 라우팅
+import "./domain/v2-shipping-plan-editor/ShippingPlanEditorRenderer"; // 출하계획 동시등록
 
 /**
  * 컴포넌트 초기화 함수
diff --git a/frontend/lib/registry/components/input/index.ts b/frontend/lib/registry/components/input/index.ts
index 0b2192f8..3f0f6d25 100644
--- a/frontend/lib/registry/components/input/index.ts
+++ b/frontend/lib/registry/components/input/index.ts
@@ -34,9 +34,9 @@ const DEFAULT_CONFIG: Partial<InputConfig> = {
 
 export const InputDefinition = createComponentDefinition({
   id: "input",
-  name: "입력",
+  name: "입력 필드",
   name_eng: "Input",
-  description: "범용 필드 입력. FieldConfig.type 10종 지원",
+  description: "텍스트, 숫자, 날짜, 선택 등 10종 입력",
   category: ComponentCategory.INPUT,
   web_type: "text",
   component: InputWrapper,
diff --git a/frontend/lib/registry/components/search/SearchConfigPanel.tsx b/frontend/lib/registry/components/search/SearchConfigPanel.tsx
index 842e3b89..efda0887 100644
--- a/frontend/lib/registry/components/search/SearchConfigPanel.tsx
+++ b/frontend/lib/registry/components/search/SearchConfigPanel.tsx
@@ -1,60 +1,144 @@
 "use client";
 
-import React from "react";
+import React, { useCallback, useMemo, useState, useEffect } from "react";
 import type { SearchConfig } from "./types";
 
 /**
- * Search ConfigPanel — V2PropertiesPanel 에서 호출되는 설정 패널.
- *
- * placeholder / layout / 검색 버튼 텍스트 / 초기화·자동검색·날짜범위 토글 편집.
- * Phase A-4 의 최소 구현; Phase F 에서 fields (검색 대상 컬럼) 편집 UI 확장.
+ * Search ConfigPanel — Phase F: 테이블 연결 + 검색 필드 자동 로드.
  */
 
 export interface SearchConfigPanelProps {
   config?: SearchConfig;
   onChange?: (config: SearchConfig) => void;
   selectedComponent?: { id: string; config?: SearchConfig; [k: string]: any };
+  tables?: any[];
+  tableColumns?: any[];
+  screenTableName?: string;
+  onTableChange?: (tableName: string) => void;
+}
+
+interface SearchField {
+  key: string;
+  label: string;
+  type: "text" | "select" | "date" | "number";
 }
 
 export const SearchConfigPanel: React.FC<SearchConfigPanelProps> = ({
   config,
   onChange,
   selectedComponent,
+  tables,
+  tableColumns,
+  screenTableName,
+  onTableChange,
 }) => {
   const current: SearchConfig =
-    (config as SearchConfig) ||
-    (selectedComponent?.config as SearchConfig) ||
-    {};
+    (config as SearchConfig) || (selectedComponent?.config as SearchConfig) || {};
 
-  const patch = (p: Partial<SearchConfig>) => {
-    onChange?.({ ...current, ...p });
-  };
+  const patch = useCallback(
+    (p: Partial<SearchConfig>) => onChange?.({ ...current, ...p }),
+    [current, onChange],
+  );
+
+  const fields: SearchField[] = (current as any).fields ?? [];
+
+  const [allDbTables, setAllDbTables] = useState<any[]>([]);
+  useEffect(() => {
+    (async () => {
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const res = await tableManagementApi.getTableList();
+        if (res.success && res.data) setAllDbTables(res.data);
+      } catch { /* ignore */ }
+    })();
+  }, []);
+
+  const tableOptions = useMemo(() => {
+    const src = allDbTables.length > 0 ? allDbTables : (tables || []);
+    return src.map((t: any) => ({
+      value: t.tableName || t.table_name,
+      label: t.display_name || t.tableLabel || t.table_label || t.tableName || t.table_name,
+    }));
+  }, [allDbTables, tables]);
+
+  const autoLoadFields = useCallback(() => {
+    if (!tableColumns?.length) return;
+    // 검색 가능 필드: text/varchar 계열 우선, 나머지도 포함
+    const newFields: SearchField[] = tableColumns
+      .filter((col: any) => {
+        const name = (col.columnName || col.column_name || "").toLowerCase();
+        // PK/시스템 컬럼 제외
+        return !["objid", "created_at", "updated_at", "created_by", "updated_by"].includes(name);
+      })
+      .slice(0, 8) // 최대 8개
+      .map((col: any) => {
+        const colName = col.columnName || col.column_name;
+        const dataType = (col.dataType || col.data_type || "").toLowerCase();
+        let fieldType: SearchField["type"] = "text";
+        if (dataType.includes("int") || dataType.includes("numeric") || dataType.includes("decimal")) fieldType = "number";
+        if (dataType.includes("date") || dataType.includes("time")) fieldType = "date";
+        if (col.codeCategory || col.code_category) fieldType = "select";
+        return {
+          key: colName,
+          label: col.columnLabel || col.column_label || col.displayName || colName,
+          type: fieldType,
+        };
+      });
+    patch({ fields: newFields } as any);
+  }, [tableColumns, patch]);
+
+  const connectedTable = (current as any).selectedTable || screenTableName;
+  const sel = "border-border bg-background w-full rounded border px-2 py-1 text-xs";
+  const lbl = "text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase";
 
   return (
     <div className="flex flex-col gap-3 p-3 text-xs">
+      {/* ── 테이블 연결 ── */}
+      {tableOptions.length > 0 && (
+        <div className="border-border rounded border p-2">
+          <label className={lbl}>테이블 연결</label>
+          <select
+            value={connectedTable || ""}
+            onChange={(e) => {
+              onTableChange?.(e.target.value);
+              patch({ selectedTable: e.target.value } as any);
+            }}
+            className={sel}
+          >
+            <option value="">선택...</option>
+            {tableOptions.map((t) => (
+              <option key={t.value} value={t.value}>{t.label}</option>
+            ))}
+          </select>
+          {connectedTable && tableColumns && tableColumns.length > 0 && (
+            <button
+              type="button"
+              onClick={autoLoadFields}
+              className="border-border hover:bg-accent mt-1.5 w-full rounded border px-2 py-1 text-[0.62rem] font-medium"
+            >
+              검색 필드 자동 로드 (최대 8개)
+            </button>
+          )}
+        </div>
+      )}
+
       <div>
-        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-          placeholder
-        </label>
+        <label className={lbl}>placeholder</label>
         <input
           type="text"
           value={current.placeholder || ""}
           onChange={(e) => patch({ placeholder: e.target.value })}
           placeholder="검색어를 입력하세요"
-          className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+          className={sel}
         />
       </div>
 
       <div>
-        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-          배치
-        </label>
+        <label className={lbl}>배치</label>
         <select
           value={current.layout || "inline"}
-          onChange={(e) =>
-            patch({ layout: e.target.value as SearchConfig["layout"] })
-          }
-          className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+          onChange={(e) => patch({ layout: e.target.value as SearchConfig["layout"] })}
+          className={sel}
         >
           <option value="inline">가로 (한 줄)</option>
           <option value="stacked">세로 (여러 줄)</option>
@@ -62,28 +146,13 @@ export const SearchConfigPanel: React.FC<SearchConfigPanelProps> = ({
       </div>
 
       <div>
-        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-          검색 버튼 텍스트
-        </label>
+        <label className={lbl}>검색 버튼 텍스트</label>
         <input
           type="text"
           value={current.searchButtonText || ""}
           onChange={(e) => patch({ searchButtonText: e.target.value })}
           placeholder="검색"
-          className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
-        />
-      </div>
-
-      <div>
-        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-          도움말 텍스트 (선택)
-        </label>
-        <input
-          type="text"
-          value={current.helperText || ""}
-          onChange={(e) => patch({ helperText: e.target.value || undefined })}
-          placeholder="예: 이름 · 사번 · 부서"
-          className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+          className={sel}
         />
       </div>
 
@@ -93,7 +162,7 @@ export const SearchConfigPanel: React.FC<SearchConfigPanelProps> = ({
           checked={current.showResetButton ?? true}
           onChange={(e) => patch({ showResetButton: e.target.checked })}
         />
-        <span>초기화 버튼 표시</span>
+        <span>초기화 버튼</span>
       </label>
 
       <label className="flex items-center gap-2 text-xs">
@@ -102,7 +171,7 @@ export const SearchConfigPanel: React.FC<SearchConfigPanelProps> = ({
           checked={!!current.autoSearch}
           onChange={(e) => patch({ autoSearch: e.target.checked })}
         />
-        <span>입력 시 자동 검색 (300ms 디바운스)</span>
+        <span>자동 검색 (300ms)</span>
       </label>
 
       <label className="flex items-center gap-2 text-xs">
@@ -111,8 +180,34 @@ export const SearchConfigPanel: React.FC<SearchConfigPanelProps> = ({
           checked={!!current.dateRangeEnabled}
           onChange={(e) => patch({ dateRangeEnabled: e.target.checked })}
         />
-        <span>날짜 범위 검색 활성화</span>
+        <span>날짜 범위 검색</span>
       </label>
+
+      {/* ── 검색 필드 목록 ── */}
+      {fields.length > 0 && (
+        <div className="border-border border-t pt-2">
+          <span className="text-muted-foreground text-[0.62rem] font-semibold tracking-wider uppercase">
+            검색 필드 ({fields.length})
+          </span>
+          {fields.map((f, i) => (
+            <div key={f.key} className="border-border mt-1 flex items-center gap-1 rounded border px-2 py-1">
+              <span className="text-muted-foreground text-[0.55rem] w-4">{i + 1}</span>
+              <span className="flex-1 truncate text-[0.65rem] font-mono">{f.key}</span>
+              <span className="text-muted-foreground text-[0.55rem]">{f.type}</span>
+              <button
+                type="button"
+                onClick={() => {
+                  const next = fields.filter((_, idx) => idx !== i);
+                  patch({ fields: next } as any);
+                }}
+                className="text-destructive text-[0.55rem]"
+              >
+                x
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/frontend/lib/registry/components/search/index.ts b/frontend/lib/registry/components/search/index.ts
index 04b00707..46cae7a1 100644
--- a/frontend/lib/registry/components/search/index.ts
+++ b/frontend/lib/registry/components/search/index.ts
@@ -32,9 +32,9 @@ const DEFAULT_CONFIG: Partial<SearchConfig> = {
 
 export const SearchDefinition = createComponentDefinition({
   id: "search",
-  name: "검색 필터",
+  name: "검색",
   name_eng: "Search",
-  description: "검색 입력 + 버튼. DataPort 로 table 등에 searchParams 전달",
+  description: "조건 입력 후 데이터 조회",
   category: ComponentCategory.UTILITY,
   web_type: "text",
   component: SearchWrapper,
diff --git a/frontend/lib/registry/components/stats/StatsConfigPanel.tsx b/frontend/lib/registry/components/stats/StatsConfigPanel.tsx
index 37e47c03..9d44e99a 100644
--- a/frontend/lib/registry/components/stats/StatsConfigPanel.tsx
+++ b/frontend/lib/registry/components/stats/StatsConfigPanel.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import type { StatsConfig, StatsItem } from "./types";
+import { IconPicker } from "../common/IconPicker";
 
 /**
  * Stats ConfigPanel — 통계 카드 설정 편집.
@@ -10,16 +11,32 @@ import type { StatsConfig, StatsItem } from "./types";
  * Phase F 에서 아이콘 선택기, column 드롭다운 (DB 메타 연동) 확장.
  */
 
+// 색상 프리셋 (Phase F)
+const COLOR_PRESETS = [
+  { name: "블루", colors: ["#3b82f6", "#60a5fa", "#2563eb", "#1d4ed8"] },
+  { name: "다채로운", colors: ["#3b82f6", "#10b981", "#f59e0b", "#ef4444"] },
+  { name: "파스텔", colors: ["#93c5fd", "#86efac", "#fcd34d", "#fca5a5"] },
+  { name: "다크", colors: ["#1e3a5f", "#1e3f28", "#5c3c0a", "#5c1a1a"] },
+];
+
 export interface StatsConfigPanelProps {
   config?: StatsConfig;
   onChange?: (config: StatsConfig) => void;
   selectedComponent?: { id: string; config?: StatsConfig; [k: string]: any };
+  tables?: any[];
+  tableColumns?: any[];
+  screenTableName?: string;
+  onTableChange?: (tableName: string) => void;
 }
 
 export const StatsConfigPanel: React.FC<StatsConfigPanelProps> = ({
   config,
   onChange,
   selectedComponent,
+  tables,
+  tableColumns,
+  screenTableName,
+  onTableChange,
 }) => {
   const current: StatsConfig =
     (config as StatsConfig) || (selectedComponent?.config as StatsConfig) || {};
@@ -114,6 +131,42 @@ export const StatsConfigPanel: React.FC<StatsConfigPanelProps> = ({
         </select>
       </div>
 
+      {/* ─── 테이블 연결 ─── */}
+      <StatsTableSelect
+        value={current.sourceTable || screenTableName || ""}
+        onChange={(v) => { onTableChange?.(v); patch({ sourceTable: v }); }}
+      />
+
+      {/* ─── 색상 프리셋 (Phase F) ─── */}
+      <div className="border-border border-t pt-2">
+        <label className="text-muted-foreground mb-1.5 block text-[0.62rem] font-semibold tracking-wider uppercase">
+          색상 프리셋
+        </label>
+        <div className="grid grid-cols-2 gap-1.5">
+          {COLOR_PRESETS.map((preset) => (
+            <button
+              key={preset.name}
+              type="button"
+              onClick={() => {
+                const updated = items.map((it, i) => ({
+                  ...it,
+                  color: preset.colors[i % preset.colors.length],
+                }));
+                patch({ items: updated });
+              }}
+              className="border-border hover:bg-accent flex items-center gap-1.5 rounded border px-2 py-1"
+            >
+              <div className="flex gap-0.5">
+                {preset.colors.map((c) => (
+                  <div key={c} className="h-3 w-3 rounded-sm" style={{ background: c }} />
+                ))}
+              </div>
+              <span className="text-[0.55rem]">{preset.name}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
       {/* ─── 항목 목록 ─── */}
       <div className="border-border mt-2 border-t pt-2">
         <div className="mb-2 flex items-center justify-between">
@@ -173,13 +226,10 @@ export const StatsConfigPanel: React.FC<StatsConfigPanelProps> = ({
                 placeholder="값 (숫자 또는 문자)"
                 className="border-border bg-background w-full rounded border px-1.5 py-0.5 text-[0.65rem]"
               />
-              <div className="grid grid-cols-2 gap-1.5">
-                <input
-                  type="text"
+              <div className="flex flex-col gap-1.5">
+                <IconPicker
                   value={item.icon || ""}
-                  onChange={(e) => updateItem(idx, { icon: e.target.value || undefined })}
-                  placeholder="아이콘 (예: 💰)"
-                  className="border-border bg-background w-full rounded border px-1.5 py-0.5 text-[0.65rem]"
+                  onChange={(v) => updateItem(idx, { icon: v || undefined })}
                 />
                 <input
                   type="color"
@@ -218,4 +268,38 @@ export const StatsConfigPanel: React.FC<StatsConfigPanelProps> = ({
   );
 };
 
+// ── 테이블 선택 서브 컴포넌트 (자체 API 호출) ──
+function StatsTableSelect({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  const [allTables, setAllTables] = useState<any[]>([]);
+  useEffect(() => {
+    (async () => {
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const res = await tableManagementApi.getTableList();
+        if (res.success && res.data) setAllTables(res.data);
+      } catch { /* ignore */ }
+    })();
+  }, []);
+
+  return (
+    <div className="border-border rounded border p-2">
+      <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
+        데이터 소스 테이블
+      </label>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+      >
+        <option value="">선택...</option>
+        {allTables.map((t: any) => (
+          <option key={t.table_name} value={t.table_name}>
+            {t.display_name || t.table_name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
 export default StatsConfigPanel;
diff --git a/frontend/lib/registry/components/stats/index.ts b/frontend/lib/registry/components/stats/index.ts
index 84408c3b..bef3d43c 100644
--- a/frontend/lib/registry/components/stats/index.ts
+++ b/frontend/lib/registry/components/stats/index.ts
@@ -38,9 +38,9 @@ const DEFAULT_CONFIG: Partial<StatsConfig> = {
 
 export const StatsDefinition = createComponentDefinition({
   id: "stats",
-  name: "통계/KPI",
+  name: "통계 카드",
   name_eng: "Stats",
-  description: "통계/KPI 카드. items 기반 다중 지표 표시",
+  description: "수량, 합계, 상태 등 핵심 수치 표시",
   category: ComponentCategory.DISPLAY,
   web_type: "text",
   component: StatsWrapper,
diff --git a/frontend/lib/registry/components/table/TableComponent.tsx b/frontend/lib/registry/components/table/TableComponent.tsx
index 1d66a068..45884908 100644
--- a/frontend/lib/registry/components/table/TableComponent.tsx
+++ b/frontend/lib/registry/components/table/TableComponent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useState, useCallback } from "react";
 import { ComponentRendererProps } from "@/types/component";
 import {
   TableConfig,
@@ -8,25 +8,9 @@ import {
   TableColumn,
   TableRowHeight,
 } from "./types";
+import { useTableData } from "./useTableData";
 
-/**
- * Table — 통합 데이터 테이블 컴포넌트
- *
- * displayMode 로 기본/분할/그룹/피벗/카드 모드 분기. Phase C-1 최소 구현으로
- * 각 모드는 **스켈레톤 렌더** 만. 실제 데이터 조회/정렬/페이지네이션 로직은
- * Phase F 에서 DB 연결 + FieldConfig 기반 자동화로 확장.
- *
- * 관련: notes/gbpark/2026-04-11-component-unification-plan.md §3.1
- */
-
-const VALID_MODES: TableDisplayMode[] = [
-  "table",
-  "split",
-  "grouped",
-  "pivot",
-  "card",
-];
-
+const VALID_MODES: TableDisplayMode[] = ["table", "split", "grouped", "pivot", "card"];
 const ROW_HEIGHT_PRESETS: Record<TableRowHeight, string> = {
   compact: "28px",
   normal: "36px",
@@ -49,7 +33,7 @@ export const TableComponent: React.FC<TableComponentProps> = ({
   style,
   ...props
 }) => {
-  // ─── 4경로 머지 ───────────────────────────────────────────────────────
+  // ─── 4경로 머지 ───
   const fromProps: Partial<TableConfig> = {};
   const p = props as any;
   if (typeof p.displayMode === "string" && (VALID_MODES as string[]).includes(p.displayMode))
@@ -60,8 +44,7 @@ export const TableComponent: React.FC<TableComponentProps> = ({
   if (typeof p.showCheckbox === "boolean") fromProps.showCheckbox = p.showCheckbox;
   if (typeof p.showHeader === "boolean") fromProps.showHeader = p.showHeader;
   if (typeof p.showFooter === "boolean") fromProps.showFooter = p.showFooter;
-  if (p.pagination && typeof p.pagination === "object")
-    fromProps.pagination = p.pagination;
+  if (p.pagination && typeof p.pagination === "object") fromProps.pagination = p.pagination;
   if (typeof p.rowHeight === "string") fromProps.rowHeight = p.rowHeight;
   if (typeof p.striped === "boolean") fromProps.striped = p.striped;
   if (typeof p.hoverable === "boolean") fromProps.hoverable = p.hoverable;
@@ -86,7 +69,15 @@ export const TableComponent: React.FC<TableComponentProps> = ({
     ? (componentConfig.displayMode as TableDisplayMode)
     : "table";
 
-  // ─── columns 결정 (fields 우선, 없으면 columns, 없으면 placeholder) ───
+  // ─── 테이블명 결정 ───
+  const tableName =
+    componentConfig.selectedTable ||
+    (component as any).tableName ||
+    (component as any).componentConfig?.selectedTable ||
+    (component as any).componentConfig?.tableName ||
+    (props as any).tableName;
+
+  // ─── columns 결정 ───
   const columns: TableColumn[] = (() => {
     if (Array.isArray(componentConfig.fields) && componentConfig.fields.length > 0) {
       return componentConfig.fields
@@ -105,11 +96,7 @@ export const TableComponent: React.FC<TableComponentProps> = ({
     if (Array.isArray(componentConfig.columns) && componentConfig.columns.length > 0) {
       return componentConfig.columns.filter((c) => c.visible !== false);
     }
-    return [
-      { key: "col1", label: "컬럼 1" },
-      { key: "col2", label: "컬럼 2" },
-      { key: "col3", label: "컬럼 3" },
-    ];
+    return [];
   })();
 
   const showHeader = componentConfig.showHeader !== false;
@@ -121,6 +108,67 @@ export const TableComponent: React.FC<TableComponentProps> = ({
   const showToolbar = componentConfig.showToolbar ?? true;
   const emptyMessage = componentConfig.emptyMessage ?? "데이터가 없습니다";
 
+  // ─── 데이터 fetch (런타임만) ───
+  const tableData = useTableData({
+    tableName,
+    enabled: !isDesignMode && !!tableName,
+    pageSize: componentConfig.pagination?.pageSize ?? 20,
+  });
+
+  // ─── 행 선택 ───
+  const [selectedRowIdx, setSelectedRowIdx] = useState<number | null>(null);
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+
+  const handleRowClick = useCallback((idx: number) => {
+    if (isDesignMode) return;
+    if (componentConfig.selectionMode === "multiple") {
+      setSelectedRows((prev) => {
+        const next = new Set(prev);
+        next.has(idx) ? next.delete(idx) : next.add(idx);
+        return next;
+      });
+    } else {
+      setSelectedRowIdx(idx);
+    }
+  }, [isDesignMode, componentConfig.selectionMode]);
+
+  // ─── 렌더할 데이터 결정 ───
+  const rows = isDesignMode
+    ? (columns.length > 0 ? [{}, {}, {}] : []) // 디자인 모드: 빈 목업 3줄
+    : tableData.data;
+
+  // ─── DOM props 필터 ───
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  const {
+    selectedScreen: _1, onZoneComponentDrop: _2, onZoneClick: _3,
+    componentConfig: _4, component: _5, isSelected: _6,
+    onClick: _7, onDragStart: _8, onDragEnd: _9,
+    size: _10, position: _11, style: _12,
+    screenId: _13, tableName: _14, onRefresh: _15, onClose: _16,
+    web_type: _17, autoGeneration: _18, isInteractive: _19,
+    formData: _20, onFormDataChange: _21,
+    menuId: _22, menuObjid: _23, onSave: _24,
+    userId: _25, userName: _26, companyCode: _27,
+    isInModal: _28, readonly: _29,
+    originalData: _30, _originalData: _31, _initialData: _32, _groupedData: _33,
+    allComponents: _34, onUpdateLayout: _35,
+    selectedRows: _36, selectedRowsData: _37, onSelectedRowsChange: _38,
+    sortBy: _39, sortOrder: _40, tableDisplayData: _41,
+    flowSelectedData: _42, flowSelectedStepId: _43,
+    onFlowSelectedDataChange: _44, onConfigChange: _45,
+    refreshKey: _46, flowRefreshKey: _47, onFlowRefresh: _48,
+    isPreview: _49, groupedData: _50,
+    displayMode: _51, columns: _52, fields: _53,
+    selectionMode: _54, showCheckbox: _55, showHeader: _56, showFooter: _57,
+    pagination: _58, rowHeight: _59, striped: _60, hoverable: _61, bordered: _62,
+    splitRatio: _63, groupBy: _64, pivotRows: _65, pivotColumns: _66, pivotValues: _67,
+    emptyMessage: _68, showToolbar: _69, showExcel: _70, showRefresh: _71,
+    disabled: _72, required: _73,
+    ...domProps
+  } = props as any;
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  // ─── 스타일 ───
   const containerStyle: React.CSSProperties = {
     width: "100%",
     height: "100%",
@@ -133,360 +181,197 @@ export const TableComponent: React.FC<TableComponentProps> = ({
     ...(component as any).style,
     ...style,
   };
-
   if (isDesignMode && isSelected) {
     containerStyle.outline = "2px solid hsl(var(--primary))";
     containerStyle.outlineOffset = "2px";
   }
 
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onClick?.();
-  };
-
-  /* eslint-disable @typescript-eslint/no-unused-vars */
-  const {
-    selectedScreen: _1,
-    onZoneComponentDrop: _2,
-    onZoneClick: _3,
-    componentConfig: _4,
-    component: _5,
-    isSelected: _6,
-    onClick: _7,
-    onDragStart: _8,
-    onDragEnd: _9,
-    size: _10,
-    position: _11,
-    style: _12,
-    screenId: _13,
-    tableName: _14,
-    onRefresh: _15,
-    onClose: _16,
-    web_type: _17,
-    autoGeneration: _18,
-    isInteractive: _19,
-    formData: _20,
-    onFormDataChange: _21,
-    menuId: _22,
-    menuObjid: _23,
-    onSave: _24,
-    userId: _25,
-    userName: _26,
-    companyCode: _27,
-    isInModal: _28,
-    readonly: _29,
-    originalData: _30,
-    _originalData: _31,
-    _initialData: _32,
-    _groupedData: _33,
-    allComponents: _34,
-    onUpdateLayout: _35,
-    selectedRows: _36,
-    selectedRowsData: _37,
-    onSelectedRowsChange: _38,
-    sortBy: _39,
-    sortOrder: _40,
-    tableDisplayData: _41,
-    flowSelectedData: _42,
-    flowSelectedStepId: _43,
-    onFlowSelectedDataChange: _44,
-    onConfigChange: _45,
-    refreshKey: _46,
-    flowRefreshKey: _47,
-    onFlowRefresh: _48,
-    isPreview: _49,
-    groupedData: _50,
-    // ★ TableConfig 필드 제외
-    displayMode: _51,
-    columns: _52,
-    fields: _53,
-    selectionMode: _54,
-    showCheckbox: _55,
-    showHeader: _56,
-    showFooter: _57,
-    pagination: _58,
-    rowHeight: _59,
-    striped: _60,
-    hoverable: _61,
-    bordered: _62,
-    splitRatio: _63,
-    groupBy: _64,
-    pivotRows: _65,
-    pivotColumns: _66,
-    pivotValues: _67,
-    emptyMessage: _68,
-    showToolbar: _69,
-    showExcel: _70,
-    showRefresh: _71,
-    disabled: _72,
-    required: _73,
-    ...domProps
-  } = props as any;
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-
+  // ─── 서브 렌더 ───
   const renderToolbar = () =>
     showToolbar && (
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "6px 10px",
-          borderBottom: "1px solid hsl(var(--border))",
-          background: "hsl(var(--muted))",
-          flexShrink: 0,
-        }}
-      >
+      <div style={toolbarStyle}>
         <span style={{ fontSize: "11px", color: "hsl(var(--muted-foreground))", fontWeight: 600 }}>
-          {displayMode.toUpperCase()} · 컬럼 {columns.length}개
+          {tableName ? tableName : displayMode.toUpperCase()}
+          {!isDesignMode && ` · ${tableData.total}건`}
+          {isDesignMode && columns.length > 0 && ` · 컬럼 ${columns.length}개`}
         </span>
         <div style={{ display: "flex", gap: "4px" }}>
+          {tableData.loading && (
+            <span style={{ fontSize: "10px", color: "hsl(var(--primary))" }}>로딩...</span>
+          )}
           {componentConfig.showRefresh && (
-            <button type="button" style={toolbarBtnStyle} disabled={isDesignMode}>
+            <button type="button" style={btnStyle} onClick={tableData.refresh} disabled={isDesignMode}>
               ⟳
             </button>
           )}
           {componentConfig.showExcel && (
-            <button type="button" style={toolbarBtnStyle} disabled={isDesignMode}>
-              📊
-            </button>
+            <button type="button" style={btnStyle} disabled>📊</button>
           )}
         </div>
       </div>
     );
 
+  const renderHeader = () =>
+    showHeader && (
+      <thead style={{ background: "hsl(var(--muted))", position: "sticky", top: 0, zIndex: 1 }}>
+        <tr>
+          {showCheckbox && (
+            <th style={{ ...thStyle, width: "32px", textAlign: "center" }}>
+              <input type="checkbox" disabled={isDesignMode} />
+            </th>
+          )}
+          {columns.map((col) => (
+            <th
+              key={col.key}
+              style={{
+                ...thStyle,
+                width: col.width ? `${col.width}px` : undefined,
+                textAlign: col.align ?? "left",
+                cursor: col.sortable && !isDesignMode ? "pointer" : "default",
+              }}
+              onClick={() => col.sortable && !isDesignMode && tableData.toggleSort(col.key)}
+            >
+              {col.label}
+              {col.sortable && (
+                <span style={{ marginLeft: "4px", fontSize: "10px", color: tableData.sortBy === col.key ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))" }}>
+                  {tableData.sortBy === col.key ? (tableData.sortOrder === "asc" ? "↑" : "↓") : "↕"}
+                </span>
+              )}
+            </th>
+          ))}
+        </tr>
+      </thead>
+    );
+
+  const renderRows = () => (
+    <tbody>
+      {rows.length > 0 ? rows.map((row, idx) => (
+        <tr
+          key={idx}
+          style={{
+            height: rowHeight,
+            background:
+              selectedRowIdx === idx
+                ? "hsl(var(--primary) / 0.08)"
+                : striped && idx % 2 === 1
+                  ? "hsl(var(--muted) / 0.5)"
+                  : "transparent",
+            borderBottom: "1px solid hsl(var(--border) / 0.3)",
+            cursor: hoverable && !isDesignMode ? "pointer" : "default",
+            transition: "background 0.1s",
+          }}
+          onClick={() => handleRowClick(idx)}
+        >
+          {showCheckbox && (
+            <td style={{ ...tdStyle, textAlign: "center" }}>
+              <input
+                type="checkbox"
+                checked={selectedRows.has(idx)}
+                onChange={() => handleRowClick(idx)}
+                disabled={isDesignMode}
+              />
+            </td>
+          )}
+          {columns.map((col) => (
+            <td key={col.key} style={{ ...tdStyle, textAlign: col.align ?? "left" }}>
+              {isDesignMode ? (
+                <span style={{ color: "hsl(var(--muted-foreground))" }}>...</span>
+              ) : (
+                <span>{row[col.key] != null ? String(row[col.key]) : ""}</span>
+              )}
+            </td>
+          ))}
+        </tr>
+      )) : (
+        <tr>
+          <td
+            colSpan={columns.length + (showCheckbox ? 1 : 0) || 1}
+            style={{ padding: "24px", textAlign: "center", color: "hsl(var(--muted-foreground))", fontSize: "11px" }}
+          >
+            {tableData.loading ? "로딩 중..." : (tableData.error || emptyMessage)}
+          </td>
+        </tr>
+      )}
+    </tbody>
+  );
+
+  const renderFooter = () =>
+    showFooter && (
+      <div style={footerStyle}>
+        <span>총 {isDesignMode ? 0 : tableData.total}건</span>
+        <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
+          <button
+            type="button"
+            style={btnStyle}
+            disabled={isDesignMode || tableData.page <= 1}
+            onClick={() => tableData.setPage(tableData.page - 1)}
+          >
+            ‹
+          </button>
+          <span style={{ padding: "2px 8px", fontSize: "11px" }}>
+            {isDesignMode ? "1 / 1" : `${tableData.page} / ${tableData.totalPages}`}
+          </span>
+          <button
+            type="button"
+            style={btnStyle}
+            disabled={isDesignMode || tableData.page >= tableData.totalPages}
+            onClick={() => tableData.setPage(tableData.page + 1)}
+          >
+            ›
+          </button>
+        </div>
+      </div>
+    );
+
+  // ─── 메인 렌더 ───
   const renderBasicTable = () => (
     <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
-      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "12px" }}>
-        {showHeader && (
-          <thead
-            style={{
-              background: "hsl(var(--muted))",
-              position: "sticky",
-              top: 0,
-              zIndex: 1,
-            }}
-          >
-            <tr>
-              {showCheckbox && (
-                <th style={{ ...thStyle, width: "32px", textAlign: "center" }}>
-                  <input type="checkbox" disabled={isDesignMode} />
-                </th>
-              )}
-              {columns.map((col) => (
-                <th
-                  key={col.key}
-                  style={{
-                    ...thStyle,
-                    width: col.width ? `${col.width}px` : undefined,
-                    textAlign: col.align ?? "left",
-                  }}
-                >
-                  {col.label}
-                  {col.sortable && (
-                    <span style={{ marginLeft: "4px", color: "hsl(var(--muted-foreground))", fontSize: "10px" }}>
-                      ↕
-                    </span>
-                  )}
-                </th>
-              ))}
-            </tr>
-          </thead>
-        )}
-        <tbody>
-          {[0, 1, 2].map((rowIdx) => (
-            <tr
-              key={rowIdx}
-              style={{
-                height: rowHeight,
-                background: striped && rowIdx % 2 === 1 ? "hsl(var(--muted))" : "transparent",
-                borderBottom: "1px solid hsl(var(--muted))",
-                cursor: hoverable ? "pointer" : "default",
-              }}
-            >
-              {showCheckbox && (
-                <td style={{ ...tdStyle, textAlign: "center" }}>
-                  <input type="checkbox" disabled={isDesignMode} />
-                </td>
-              )}
-              {columns.map((col) => (
-                <td
-                  key={col.key}
-                  style={{ ...tdStyle, textAlign: col.align ?? "left" }}
-                >
-                  <span style={{ color: "hsl(var(--muted-foreground))" }}>...</span>
-                </td>
-              ))}
-            </tr>
-          ))}
-          {columns.length === 0 && (
-            <tr>
-              <td
-                colSpan={1}
-                style={{
-                  padding: "24px",
-                  textAlign: "center",
-                  color: "hsl(var(--muted-foreground))",
-                  fontSize: "11px",
-                }}
-              >
-                {emptyMessage}
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
+      {columns.length > 0 ? (
+        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "12px" }}>
+          {renderHeader()}
+          {renderRows()}
+        </table>
+      ) : (
+        <div style={{ padding: "24px", textAlign: "center", color: "hsl(var(--muted-foreground))", fontSize: "11px" }}>
+          {isDesignMode ? "컬럼을 설정하면 테이블이 표시됩니다" : emptyMessage}
+        </div>
+      )}
     </div>
   );
 
   const renderSplitMode = () => {
     const ratio = componentConfig.splitRatio ?? 0.5;
+    const selectedRow = selectedRowIdx != null ? rows[selectedRowIdx] : null;
     return (
       <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
-        <div
-          style={{
-            flex: ratio,
-            borderRight: "1px solid hsl(var(--border))",
-            minWidth: 0,
-            overflow: "auto",
-          }}
-        >
+        <div style={{ flex: ratio, borderRight: "1px solid hsl(var(--border))", minWidth: 0, overflow: "auto" }}>
           {renderBasicTable()}
         </div>
-        <div
-          style={{
-            flex: 1 - ratio,
-            padding: "12px",
-            background: "hsl(var(--muted))",
-            minWidth: 0,
-          }}
-        >
-          <div
-            style={{
-              fontSize: "11px",
-              color: "hsl(var(--muted-foreground))",
-              fontWeight: 600,
-              marginBottom: "8px",
-            }}
-          >
-            상세
-          </div>
-          <div
-            style={{
-              border: "1px dashed hsl(var(--border))",
-              borderRadius: "4px",
-              padding: "20px",
-              textAlign: "center",
-              color: "hsl(var(--muted-foreground))",
-              fontSize: "11px",
-            }}
-          >
-            선택한 행의 상세 내용
-            <div style={{ fontSize: "10px", marginTop: "4px" }}>
-              (좌측 행 클릭 → 상세 표시)
+        <div style={{ flex: 1 - ratio, padding: "10px", background: "hsl(var(--muted) / 0.3)", minWidth: 0, overflow: "auto" }}>
+          {selectedRow ? (
+            <div style={{ fontSize: "11px" }}>
+              {columns.map((col) => (
+                <div key={col.key} style={{ padding: "4px 0", borderBottom: "1px solid hsl(var(--border) / 0.2)" }}>
+                  <span style={{ color: "hsl(var(--muted-foreground))", marginRight: "8px", fontWeight: 600, fontSize: "10px" }}>{col.label}</span>
+                  <span>{selectedRow[col.key] != null ? String(selectedRow[col.key]) : "-"}</span>
+                </div>
+              ))}
             </div>
-          </div>
+          ) : (
+            <div style={{ textAlign: "center", color: "hsl(var(--muted-foreground))", fontSize: "11px", paddingTop: "20px" }}>
+              좌측 행을 클릭하면 상세 표시
+            </div>
+          )}
         </div>
       </div>
     );
   };
 
-  const renderGroupedMode = () => {
-    const groupBy = componentConfig.groupBy;
-    return (
-      <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
-        {["그룹 A", "그룹 B"].map((groupLabel) => (
-          <div key={groupLabel}>
-            <div
-              style={{
-                padding: "6px 10px",
-                background: "hsl(var(--accent))",
-                borderBottom: "1px solid hsl(var(--accent))",
-                fontSize: "11px",
-                fontWeight: 700,
-                color: "hsl(var(--primary))",
-              }}
-            >
-              ▼ {groupBy ? `${groupBy} = ${groupLabel}` : groupLabel}
-            </div>
-            <div style={{ padding: "0 16px" }}>{renderBasicTable()}</div>
-          </div>
-        ))}
-      </div>
-    );
-  };
-
-  const renderPivotMode = () => (
-    <div
-      style={{
-        flex: 1,
-        minHeight: 0,
-        padding: "16px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        color: "hsl(var(--muted-foreground))",
-        fontSize: "12px",
-        background: "hsl(var(--muted))",
-        textAlign: "center",
-      }}
-    >
-      <div>
-        <div style={{ fontSize: "24px", marginBottom: "8px" }}>📊</div>
-        피벗 그리드
-        <div style={{ fontSize: "10px", marginTop: "4px" }}>
-          (Phase F 에서 정교화 — 현재는 placeholder)
-        </div>
-      </div>
-    </div>
-  );
-
-  const renderCardMode = () => (
-    <div
-      style={{
-        flex: 1,
-        minHeight: 0,
-        overflow: "auto",
-        padding: "8px",
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
-        gap: "8px",
-      }}
-    >
-      {[0, 1, 2].map((i) => (
-        <div
-          key={i}
-          style={{
-            border: "1px solid hsl(var(--border))",
-            borderRadius: "6px",
-            padding: "10px",
-            background: "hsl(var(--card))",
-          }}
-        >
-          {columns.map((col) => (
-            <div key={col.key} style={{ fontSize: "11px", marginBottom: "4px" }}>
-              <span style={{ color: "hsl(var(--muted-foreground))", marginRight: "4px" }}>{col.label}:</span>
-              <span style={{ color: "hsl(var(--muted-foreground))" }}>...</span>
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-
   const renderBody = () => {
     switch (displayMode) {
-      case "split":
-        return renderSplitMode();
-      case "grouped":
-        return renderGroupedMode();
-      case "pivot":
-        return renderPivotMode();
-      case "card":
-        return renderCardMode();
+      case "split": return renderSplitMode();
       case "table":
-      default:
-        return renderBasicTable();
+      default: return renderBasicTable();
     }
   };
 
@@ -494,67 +379,43 @@ export const TableComponent: React.FC<TableComponentProps> = ({
     <div
       style={containerStyle}
       className={className}
-      onClick={handleClick}
+      onClick={(e) => { e.stopPropagation(); onClick?.(); }}
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       {...domProps}
     >
       {renderToolbar()}
       {renderBody()}
-      {showFooter && componentConfig.pagination?.enabled !== false && (
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "6px 10px",
-            borderTop: "1px solid hsl(var(--border))",
-            background: "hsl(var(--muted))",
-            fontSize: "11px",
-            color: "hsl(var(--muted-foreground))",
-            flexShrink: 0,
-          }}
-        >
-          <span>총 0건</span>
-          <div style={{ display: "flex", gap: "4px" }}>
-            <button type="button" style={toolbarBtnStyle} disabled>
-              ‹
-            </button>
-            <span style={{ padding: "2px 8px" }}>1 / 1</span>
-            <button type="button" style={toolbarBtnStyle} disabled>
-              ›
-            </button>
-          </div>
-        </div>
-      )}
+      {renderFooter()}
     </div>
   );
 };
 
+// ─── 스타일 상수 ───
 const thStyle: React.CSSProperties = {
-  padding: "8px 10px",
-  fontSize: "11px",
-  fontWeight: 700,
-  color: "hsl(var(--foreground))",
-  textTransform: "uppercase",
-  letterSpacing: "0.03em",
-  borderBottom: "1px solid hsl(var(--border))",
+  padding: "8px 10px", fontSize: "11px", fontWeight: 700,
+  color: "hsl(var(--foreground))", textTransform: "uppercase",
+  letterSpacing: "0.03em", borderBottom: "1px solid hsl(var(--border))",
   whiteSpace: "nowrap",
 };
-
 const tdStyle: React.CSSProperties = {
-  padding: "6px 10px",
-  fontSize: "12px",
-  color: "hsl(var(--foreground))",
+  padding: "6px 10px", fontSize: "12px", color: "hsl(var(--foreground))",
 };
-
-const toolbarBtnStyle: React.CSSProperties = {
-  padding: "2px 8px",
-  fontSize: "11px",
-  border: "1px solid hsl(var(--border))",
-  background: "hsl(var(--card))",
-  borderRadius: "4px",
-  cursor: "pointer",
+const btnStyle: React.CSSProperties = {
+  padding: "2px 8px", fontSize: "11px",
+  border: "1px solid hsl(var(--border))", background: "hsl(var(--card))",
+  borderRadius: "4px", cursor: "pointer",
+};
+const toolbarStyle: React.CSSProperties = {
+  display: "flex", alignItems: "center", justifyContent: "space-between",
+  padding: "6px 10px", borderBottom: "1px solid hsl(var(--border))",
+  background: "hsl(var(--muted))", flexShrink: 0,
+};
+const footerStyle: React.CSSProperties = {
+  display: "flex", alignItems: "center", justifyContent: "space-between",
+  padding: "6px 10px", borderTop: "1px solid hsl(var(--border))",
+  background: "hsl(var(--muted))", fontSize: "11px",
+  color: "hsl(var(--muted-foreground))", flexShrink: 0,
 };
 
 export const TableWrapper: React.FC<TableComponentProps> = (props) => {
diff --git a/frontend/lib/registry/components/table/TableConfigPanel.tsx b/frontend/lib/registry/components/table/TableConfigPanel.tsx
index e43ce5e7..f77faa9a 100644
--- a/frontend/lib/registry/components/table/TableConfigPanel.tsx
+++ b/frontend/lib/registry/components/table/TableConfigPanel.tsx
@@ -1,33 +1,41 @@
 "use client";
 
-import React from "react";
+import React, { useCallback, useMemo, useState, useEffect } from "react";
 import type { TableConfig, TableColumn } from "./types";
 
 /**
  * Table ConfigPanel — 통합 데이터 테이블 설정 편집.
  *
- * displayMode 가 최상위. 나머지는 모드별 세부 옵션.
- * Phase C-1 최소 구현; Phase F 에서 FieldConfig 연결 / SQL query builder /
- * 고급 필터 등 확장.
+ * Phase F: 테이블 연결 + 컬럼 자동 로드 + displayMode + 옵션
  */
 
 export interface TableConfigPanelProps {
   config?: TableConfig;
   onChange?: (config: TableConfig) => void;
   selectedComponent?: { id: string; config?: TableConfig; [k: string]: any };
+  // DynamicComponentConfigPanel이 전달하는 확장 props
+  tables?: any[];
+  tableColumns?: any[];
+  screenTableName?: string;
+  onTableChange?: (tableName: string) => void;
 }
 
 export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
   config,
   onChange,
   selectedComponent,
+  tables,
+  tableColumns,
+  screenTableName,
+  onTableChange,
 }) => {
   const current: TableConfig =
     (config as TableConfig) || (selectedComponent?.config as TableConfig) || {};
 
-  const patch = (p: Partial<TableConfig>) => {
-    onChange?.({ ...current, ...p });
-  };
+  const patch = useCallback(
+    (p: Partial<TableConfig>) => onChange?.({ ...current, ...p }),
+    [current, onChange],
+  );
 
   const columns: TableColumn[] = current.columns ?? [];
 
@@ -40,10 +48,7 @@ export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
     patch({
       columns: [
         ...columns,
-        {
-          key: `col${columns.length + 1}`,
-          label: `컬럼 ${columns.length + 1}`,
-        },
+        { key: `col${columns.length + 1}`, label: `컬럼 ${columns.length + 1}` },
       ],
     });
   };
@@ -52,21 +57,88 @@ export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
     patch({ columns: columns.filter((_, i) => i !== idx) });
   };
 
+  // ── 전체 DB 테이블 직접 로드 ──
+  const [allDbTables, setAllDbTables] = useState<any[]>([]);
+  useEffect(() => {
+    (async () => {
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const res = await tableManagementApi.getTableList();
+        if (res.success && res.data) setAllDbTables(res.data);
+      } catch { /* ignore */ }
+    })();
+  }, []);
+
+  const tableOptions = useMemo(() => {
+    const src = allDbTables.length > 0 ? allDbTables : (tables || []);
+    return src.map((t: any) => ({
+      value: t.tableName || t.table_name,
+      label: t.display_name || t.tableLabel || t.table_label || t.tableName || t.table_name,
+    }));
+  }, [allDbTables, tables]);
+
+  // 테이블 컬럼에서 TableColumn 자동 생성
+  const autoLoadColumns = useCallback(() => {
+    if (!tableColumns?.length) return;
+    const newCols: TableColumn[] = tableColumns.map((col: any) => ({
+      key: col.columnName || col.column_name,
+      label: col.columnLabel || col.column_label || col.displayName || col.columnName || col.column_name,
+      width: undefined,
+      align: "left" as const,
+      sortable: true,
+      visible: true,
+    }));
+    patch({ columns: newCols });
+  }, [tableColumns, patch]);
+
+  const connectedTable = (current as any).selectedTable || screenTableName;
+
+  const sel = "border-border bg-background w-full rounded border px-2 py-1 text-xs";
+  const lbl = "text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase";
+
   return (
     <div className="flex flex-col gap-3 p-3 text-xs">
+      {/* ── 테이블 연결 (Phase F) ── */}
+      {tableOptions.length > 0 && (
+        <div className="border-border rounded border p-2">
+          <label className={lbl}>테이블 연결</label>
+          <select
+            value={connectedTable || ""}
+            onChange={(e) => {
+              const v = e.target.value;
+              onTableChange?.(v);
+              patch({ selectedTable: v } as any);
+            }}
+            className={sel}
+          >
+            <option value="">선택...</option>
+            {tableOptions.map((t) => (
+              <option key={t.value} value={t.value}>{t.label}</option>
+            ))}
+          </select>
+          {connectedTable && tableColumns && tableColumns.length > 0 && (
+            <button
+              type="button"
+              onClick={autoLoadColumns}
+              className="border-border hover:bg-accent mt-1.5 w-full rounded border px-2 py-1 text-[0.62rem] font-medium"
+            >
+              DB 컬럼에서 자동 로드 ({tableColumns.length}개)
+            </button>
+          )}
+        </div>
+      )}
+
       <div>
-        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-          표시 모드 ⭐
-        </label>
+        <label className={lbl}>표시 모드</label>
         <select
           value={current.displayMode || "table"}
           onChange={(e) =>
             patch({ displayMode: e.target.value as TableConfig["displayMode"] })
           }
-          className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+          className={sel}
         >
           <option value="table">기본 테이블</option>
-          <option value="split">좌우 분할 (목록 · 상세)</option>
+          <option value="split">좌우 분할 (목록 + 상세)</option>
           <option value="grouped">그룹핑</option>
           <option value="pivot">피벗</option>
           <option value="card">카드 리스트</option>
@@ -74,17 +146,13 @@ export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
       </div>
 
       <div>
-        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-          행 선택
-        </label>
+        <label className={lbl}>행 선택</label>
         <select
           value={current.selectionMode || "single"}
           onChange={(e) =>
-            patch({
-              selectionMode: e.target.value as TableConfig["selectionMode"],
-            })
+            patch({ selectionMode: e.target.value as TableConfig["selectionMode"] })
           }
-          className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+          className={sel}
         >
           <option value="none">선택 불가</option>
           <option value="single">단일 선택</option>
@@ -93,15 +161,13 @@ export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
       </div>
 
       <div>
-        <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-          행 높이
-        </label>
+        <label className={lbl}>행 높이</label>
         <select
           value={current.rowHeight || "normal"}
           onChange={(e) =>
             patch({ rowHeight: e.target.value as TableConfig["rowHeight"] })
           }
-          className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+          className={sel}
         >
           <option value="compact">좁게</option>
           <option value="normal">기본</option>
@@ -110,88 +176,55 @@ export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
       </div>
 
       <div className="flex flex-col gap-1.5">
-        <label className="flex items-center gap-2 text-xs">
-          <input
-            type="checkbox"
-            checked={current.showHeader !== false}
-            onChange={(e) => patch({ showHeader: e.target.checked })}
-          />
-          <span>헤더 표시</span>
-        </label>
-        <label className="flex items-center gap-2 text-xs">
-          <input
-            type="checkbox"
-            checked={current.showFooter !== false}
-            onChange={(e) => patch({ showFooter: e.target.checked })}
-          />
-          <span>푸터/페이지네이션</span>
-        </label>
-        <label className="flex items-center gap-2 text-xs">
-          <input
-            type="checkbox"
-            checked={!!current.showCheckbox}
-            onChange={(e) => patch({ showCheckbox: e.target.checked })}
-          />
-          <span>체크박스 컬럼</span>
-        </label>
-        <label className="flex items-center gap-2 text-xs">
-          <input
-            type="checkbox"
-            checked={current.striped ?? true}
-            onChange={(e) => patch({ striped: e.target.checked })}
-          />
-          <span>줄무늬 (홀짝 다른 색)</span>
-        </label>
-        <label className="flex items-center gap-2 text-xs">
-          <input
-            type="checkbox"
-            checked={current.hoverable ?? true}
-            onChange={(e) => patch({ hoverable: e.target.checked })}
-          />
-          <span>호버 효과</span>
-        </label>
-        <label className="flex items-center gap-2 text-xs">
-          <input
-            type="checkbox"
-            checked={current.showToolbar ?? true}
-            onChange={(e) => patch({ showToolbar: e.target.checked })}
-          />
-          <span>상단 툴바</span>
-        </label>
+        {([
+          ["showHeader", "헤더 표시", true],
+          ["showFooter", "푸터/페이지네이션", true],
+          ["showCheckbox", "체크박스 컬럼", false],
+          ["striped", "줄무늬", true],
+          ["hoverable", "호버 효과", true],
+          ["showToolbar", "상단 툴바", true],
+        ] as [string, string, boolean][]).map(([key, label, def]) => (
+          <label key={key} className="flex items-center gap-2 text-xs">
+            <input
+              type="checkbox"
+              checked={(current as any)[key] ?? def}
+              onChange={(e) => patch({ [key]: e.target.checked } as any)}
+            />
+            <span>{label}</span>
+          </label>
+        ))}
       </div>
 
       {current.displayMode === "split" && (
         <div className="border-border border-t pt-2">
-          <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-            좌측 비율 (0.1 ~ 0.9)
-          </label>
+          <label className={lbl}>좌측 비율 (0.1 ~ 0.9)</label>
           <input
             type="number"
             value={current.splitRatio ?? 0.5}
-            min={0.1}
-            max={0.9}
-            step={0.05}
+            min={0.1} max={0.9} step={0.05}
             onChange={(e) => patch({ splitRatio: Number(e.target.value) })}
-            className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
+            className={sel}
           />
         </div>
       )}
 
       {current.displayMode === "grouped" && (
         <div className="border-border border-t pt-2">
-          <label className="text-muted-foreground mb-1 block text-[0.62rem] font-semibold tracking-wider uppercase">
-            그룹화 컬럼 키
-          </label>
-          <input
-            type="text"
+          <label className={lbl}>그룹화 컬럼 키</label>
+          <select
             value={current.groupBy || ""}
             onChange={(e) => patch({ groupBy: e.target.value || undefined })}
-            placeholder="예: department"
-            className="border-border bg-background w-full rounded border px-2 py-1 text-xs"
-          />
+            className={sel}
+          >
+            <option value="">선택...</option>
+            {columns.map((c) => (
+              <option key={c.key} value={c.key}>{c.label || c.key}</option>
+            ))}
+          </select>
         </div>
       )}
 
+      {/* ── 컬럼 편집 ── */}
       <div className="border-border mt-2 border-t pt-2">
         <div className="mb-2 flex items-center justify-between">
           <span className="text-muted-foreground text-[0.62rem] font-semibold tracking-wider uppercase">
@@ -208,7 +241,9 @@ export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
 
         {columns.length === 0 && (
           <div className="text-muted-foreground border-border rounded border border-dashed p-2 text-center text-[0.6rem]">
-            컬럼이 없습니다. Phase F 에서 FieldConfig 로 자동 생성될 예정.
+            {connectedTable
+              ? "위 '자동 로드' 버튼으로 컬럼을 불러오세요"
+              : "테이블을 연결하면 컬럼을 자동 로드할 수 있습니다"}
           </div>
         )}
 
@@ -260,9 +295,9 @@ export const TableConfigPanel: React.FC<TableConfigPanelProps> = ({
                   }
                   className="border-border bg-background w-full rounded border px-1.5 py-0.5 text-[0.65rem]"
                 >
-                  <option value="left">←</option>
-                  <option value="center">↔</option>
-                  <option value="right">→</option>
+                  <option value="left">L</option>
+                  <option value="center">C</option>
+                  <option value="right">R</option>
                 </select>
                 <label className="flex items-center gap-1 text-[0.6rem]">
                   <input
diff --git a/frontend/lib/registry/components/table/types.ts b/frontend/lib/registry/components/table/types.ts
index c12e7cd9..8d77aa68 100644
--- a/frontend/lib/registry/components/table/types.ts
+++ b/frontend/lib/registry/components/table/types.ts
@@ -48,6 +48,8 @@ export interface TablePagination {
 }
 
 export interface TableConfig extends ComponentConfig {
+  /** 연결된 테이블명 (DB) */
+  selectedTable?: string;
   /** 표시 모드 (기본/분할/그룹/피벗/카드) */
   displayMode?: TableDisplayMode;
   /** 컬럼 설정 */
diff --git a/frontend/lib/registry/components/table/useTableData.ts b/frontend/lib/registry/components/table/useTableData.ts
new file mode 100644
index 00000000..fd2dfe9b
--- /dev/null
+++ b/frontend/lib/registry/components/table/useTableData.ts
@@ -0,0 +1,150 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+
+/**
+ * useTableData — 통합 table 컴포넌트 데이터 fetch 훅
+ *
+ * entityJoinApi.getTableDataWithJoins() 호출.
+ * 페이지네이션, 정렬, 검색 상태를 관리.
+ */
+
+export interface UseTableDataParams {
+  tableName?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortOrder?: "asc" | "desc";
+  search?: Record<string, any>;
+  enabled?: boolean; // false면 fetch 안 함 (디자인 모드)
+}
+
+export interface UseTableDataResult {
+  data: Record<string, any>[];
+  total: number;
+  totalPages: number;
+  page: number;
+  pageSize: number;
+  sortBy: string;
+  sortOrder: "asc" | "desc";
+  loading: boolean;
+  error: string | null;
+  // 액션
+  setPage: (p: number) => void;
+  setPageSize: (s: number) => void;
+  setSortBy: (col: string) => void;
+  toggleSort: (col: string) => void;
+  setSearch: (s: Record<string, any>) => void;
+  refresh: () => void;
+}
+
+export function useTableData(params: UseTableDataParams): UseTableDataResult {
+  const {
+    tableName,
+    page: initialPage = 1,
+    pageSize: initialPageSize = 20,
+    sortBy: initialSortBy = "",
+    sortOrder: initialSortOrder = "desc",
+    search: externalSearch,
+    enabled = true,
+  } = params;
+
+  const [data, setData] = useState<Record<string, any>[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [page, setPage] = useState(initialPage);
+  const [pageSize, setPageSize] = useState(initialPageSize);
+  const [sortBy, setSortBy] = useState(initialSortBy);
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">(initialSortOrder);
+  const [search, setSearch] = useState<Record<string, any>>(externalSearch || {});
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const refreshKey = useRef(0);
+
+  // 외부 검색 조건 동기화
+  useEffect(() => {
+    if (externalSearch) {
+      setSearch(externalSearch);
+      setPage(1);
+    }
+  }, [externalSearch]);
+
+  // 데이터 fetch
+  const fetchData = useCallback(async () => {
+    if (!tableName || !enabled) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // 동적 import — 번들 사이즈 최적화
+      const { entityJoinApi } = await import("@/lib/api/entityJoin");
+
+      const response = await entityJoinApi.getTableDataWithJoins(tableName, {
+        page,
+        size: pageSize,
+        sortBy: sortBy || undefined,
+        sortOrder,
+        search: Object.keys(search).length > 0 ? search : undefined,
+        enableEntityJoin: true,
+      });
+
+      setData(response.data || []);
+      setTotal(response.total || 0);
+      setTotalPages(response.totalPages || 1);
+    } catch (err: any) {
+      console.error("[useTableData] fetch 실패:", err);
+      setError(err?.message || "데이터 로드 실패");
+      setData([]);
+      setTotal(0);
+      setTotalPages(1);
+    } finally {
+      setLoading(false);
+    }
+  }, [tableName, page, pageSize, sortBy, sortOrder, search, enabled, refreshKey.current]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // 테이블 변경 시 페이지 리셋
+  useEffect(() => {
+    setPage(1);
+    setSortBy("");
+    setSearch({});
+  }, [tableName]);
+
+  const toggleSort = useCallback((col: string) => {
+    setSortBy((prev) => {
+      if (prev === col) {
+        setSortOrder((o) => (o === "asc" ? "desc" : "asc"));
+        return col;
+      }
+      setSortOrder("asc");
+      return col;
+    });
+  }, []);
+
+  const refresh = useCallback(() => {
+    refreshKey.current += 1;
+    fetchData();
+  }, [fetchData]);
+
+  return {
+    data,
+    total,
+    totalPages,
+    page,
+    pageSize,
+    sortBy,
+    sortOrder,
+    loading,
+    error,
+    setPage,
+    setPageSize: (s: number) => { setPageSize(s); setPage(1); },
+    setSortBy,
+    toggleSort,
+    setSearch: (s: Record<string, any>) => { setSearch(s); setPage(1); },
+    refresh,
+  };
+}
diff --git a/frontend/lib/registry/components/v2-aggregation-widget/index.ts b/frontend/lib/registry/components/v2-aggregation-widget/index.ts
index db9a2936..f726b75d 100644
--- a/frontend/lib/registry/components/v2-aggregation-widget/index.ts
+++ b/frontend/lib/registry/components/v2-aggregation-widget/index.ts
@@ -13,6 +13,7 @@ import type { AggregationWidgetConfig } from "./types";
  */
 export const V2AggregationWidgetDefinition = createComponentDefinition({
   id: "v2-aggregation-widget",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "집계 위젯",
   name_eng: "Aggregation Widget",
   description: "데이터의 합계, 평균, 개수 등 집계 결과를 표시하는 위젯 (필터링 지원)",
diff --git a/frontend/lib/registry/components/v2-card-display/index.ts b/frontend/lib/registry/components/v2-card-display/index.ts
index 7b562095..55ade000 100644
--- a/frontend/lib/registry/components/v2-card-display/index.ts
+++ b/frontend/lib/registry/components/v2-card-display/index.ts
@@ -15,6 +15,7 @@ import { withContainerQuery } from "../../hoc/withContainerQuery";
  */
 export const V2CardDisplayDefinition = createComponentDefinition({
   id: "v2-card-display",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "카드 디스플레이",
   name_eng: "CardDisplay Component",
   description: "테이블 데이터를 카드 형태로 표시하는 컴포넌트",
diff --git a/frontend/lib/registry/components/v2-category-manager/index.ts b/frontend/lib/registry/components/v2-category-manager/index.ts
index 87f42f81..75193524 100644
--- a/frontend/lib/registry/components/v2-category-manager/index.ts
+++ b/frontend/lib/registry/components/v2-category-manager/index.ts
@@ -13,6 +13,7 @@ import { defaultV2CategoryManagerConfig } from "./types";
  */
 export const V2CategoryManagerDefinition = createComponentDefinition({
   id: "v2-category-manager",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "카테고리 관리 (V2)",
   name_eng: "Category Manager V2",
   description: "트리 구조 기반 카테고리 값 관리 컴포넌트 (3단계 계층 지원)",
diff --git a/frontend/lib/registry/components/v2-date/index.ts b/frontend/lib/registry/components/v2-date/index.ts
index c5dad2a3..97a513de 100644
--- a/frontend/lib/registry/components/v2-date/index.ts
+++ b/frontend/lib/registry/components/v2-date/index.ts
@@ -12,6 +12,7 @@ import { withContainerQuery } from "../../hoc/withContainerQuery";
 
 export const V2DateDefinition = createComponentDefinition({
   id: "v2-date",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "V2 날짜",
   description: "날짜, 시간, 날짜시간, 날짜범위 등 다양한 날짜/시간 입력 지원",
   category: ComponentCategory.INPUT,
diff --git a/frontend/lib/registry/components/v2-file-upload/index.ts b/frontend/lib/registry/components/v2-file-upload/index.ts
index 6c0383ec..b13a0c17 100644
--- a/frontend/lib/registry/components/v2-file-upload/index.ts
+++ b/frontend/lib/registry/components/v2-file-upload/index.ts
@@ -14,6 +14,7 @@ import { FileUploadConfig } from "./types";
  */
 export const V2FileUploadDefinition = createComponentDefinition({
   id: "v2-file-upload",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "파일 업로드",
   name_eng: "V2 FileUpload Component",
   description: "V2 파일 업로드를 위한 파일 선택 컴포넌트",
diff --git a/frontend/lib/registry/components/v2-input/index.ts b/frontend/lib/registry/components/v2-input/index.ts
index 7e2c0b60..ea390335 100644
--- a/frontend/lib/registry/components/v2-input/index.ts
+++ b/frontend/lib/registry/components/v2-input/index.ts
@@ -12,6 +12,7 @@ import { withContainerQuery } from "../../hoc/withContainerQuery";
 
 export const V2InputDefinition = createComponentDefinition({
   id: "v2-input",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "V2 입력",
   description: "텍스트, 숫자, 비밀번호 등 다양한 입력 타입 지원",
   category: ComponentCategory.INPUT,
diff --git a/frontend/lib/registry/components/v2-media/index.ts b/frontend/lib/registry/components/v2-media/index.ts
index ca0180b6..3a55d618 100644
--- a/frontend/lib/registry/components/v2-media/index.ts
+++ b/frontend/lib/registry/components/v2-media/index.ts
@@ -11,6 +11,7 @@ import { V2Media } from "@/components/v2/V2Media";
 
 export const V2MediaDefinition = createComponentDefinition({
   id: "v2-media",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "V2 미디어",
   description: "파일, 이미지, 비디오, 오디오 등 다양한 미디어 타입 지원",
   category: ComponentCategory.INPUT,
diff --git a/frontend/lib/registry/components/v2-numbering-rule/index.ts b/frontend/lib/registry/components/v2-numbering-rule/index.ts
index cf96f8c9..286c3b44 100644
--- a/frontend/lib/registry/components/v2-numbering-rule/index.ts
+++ b/frontend/lib/registry/components/v2-numbering-rule/index.ts
@@ -13,6 +13,7 @@ import { defaultConfig } from "./config";
  */
 export const V2NumberingRuleDefinition = createComponentDefinition({
   id: "v2-numbering-rule",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "코드 채번 규칙",
   name_eng: "Numbering Rule Component",
   description: "코드 자동 채번 규칙을 설정하고 관리하는 컴포넌트",
diff --git a/frontend/lib/registry/components/v2-repeat-container/index.ts b/frontend/lib/registry/components/v2-repeat-container/index.ts
index d39ede06..18a0ac34 100644
--- a/frontend/lib/registry/components/v2-repeat-container/index.ts
+++ b/frontend/lib/registry/components/v2-repeat-container/index.ts
@@ -12,6 +12,7 @@ import type { RepeatContainerConfig } from "./types";
  */
 export const V2RepeatContainerDefinition = createComponentDefinition({
   id: "v2-repeat-container",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "리피터 컨테이너",
   name_eng: "Repeat Container",
   description: "데이터 수만큼 내부 컴포넌트를 반복 렌더링하는 컨테이너",
diff --git a/frontend/lib/registry/components/v2-section-card/index.ts b/frontend/lib/registry/components/v2-section-card/index.ts
index 214a0836..7ee3b852 100644
--- a/frontend/lib/registry/components/v2-section-card/index.ts
+++ b/frontend/lib/registry/components/v2-section-card/index.ts
@@ -11,6 +11,7 @@ import { V2SectionCardConfigPanel } from "@/components/v2/config-panels/V2Sectio
  */
 export const V2SectionCardDefinition = createComponentDefinition({
   id: "v2-section-card",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "Section Card",
   name_eng: "Section Card",
   description: "제목과 테두리가 있는 명확한 그룹화 컨테이너",
diff --git a/frontend/lib/registry/components/v2-section-paper/index.ts b/frontend/lib/registry/components/v2-section-paper/index.ts
index 1afa9f50..aa02849d 100644
--- a/frontend/lib/registry/components/v2-section-paper/index.ts
+++ b/frontend/lib/registry/components/v2-section-paper/index.ts
@@ -11,6 +11,7 @@ import { V2SectionPaperConfigPanel } from "@/components/v2/config-panels/V2Secti
  */
 export const V2SectionPaperDefinition = createComponentDefinition({
   id: "v2-section-paper",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "Section Paper",
   name_eng: "Section Paper",
   description: "배경색 기반의 미니멀한 그룹화 컨테이너 (색종이 컨셉)",
diff --git a/frontend/lib/registry/components/v2-select/index.ts b/frontend/lib/registry/components/v2-select/index.ts
index 5ce29996..9fafe651 100644
--- a/frontend/lib/registry/components/v2-select/index.ts
+++ b/frontend/lib/registry/components/v2-select/index.ts
@@ -12,6 +12,7 @@ import { withContainerQuery } from "../../hoc/withContainerQuery";
 
 export const V2SelectDefinition = createComponentDefinition({
   id: "v2-select",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "V2 선택",
   description: "드롭다운, 콤보박스, 라디오, 체크박스 등 다양한 선택 모드 지원",
   category: ComponentCategory.INPUT,
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
index 100eb0e6..9da7fa65 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
+++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
@@ -51,7 +51,7 @@ import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRendere
 import { PanelInlineComponent } from "./types";
 import { cn } from "@/lib/utils";
 import { ResponsiveGridRenderer } from "@/components/screen/ResponsiveGridRenderer";
-import { BomExcelUploadModal } from "../v2-bom-tree/BomExcelUploadModal";
+import { BomExcelUploadModal } from "../domain/v2-bom-tree/BomExcelUploadModal";
 
 /** 클라이언트 사이드 데이터 필터 (페이징 OFF 전용) */
 function applyClientSideFilter(data: any[], dataFilter: any): any[] {
diff --git a/frontend/lib/registry/components/v2-split-panel-layout/index.ts b/frontend/lib/registry/components/v2-split-panel-layout/index.ts
index 817933ff..de21ad8f 100644
--- a/frontend/lib/registry/components/v2-split-panel-layout/index.ts
+++ b/frontend/lib/registry/components/v2-split-panel-layout/index.ts
@@ -13,6 +13,7 @@ import { SplitPanelLayoutConfig } from "./types";
  */
 export const V2SplitPanelLayoutDefinition = createComponentDefinition({
   id: "v2-split-panel-layout",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "분할 패널",
   name_eng: "SplitPanelLayout Component",
   description: "마스터-디테일 패턴의 좌우 분할 레이아웃 컴포넌트",
diff --git a/frontend/lib/registry/components/v2-status-count/index.ts b/frontend/lib/registry/components/v2-status-count/index.ts
index f1d03d4e..db210a06 100644
--- a/frontend/lib/registry/components/v2-status-count/index.ts
+++ b/frontend/lib/registry/components/v2-status-count/index.ts
@@ -7,6 +7,7 @@ import { V2StatusCountConfigPanel } from "@/components/v2/config-panels/V2Status
 
 export const V2StatusCountDefinition = createComponentDefinition({
   id: "v2-status-count",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "상태별 카운트",
   name_eng: "Status Count",
   description: "관련 테이블의 상태별 데이터 건수를 카드 형태로 표시하는 범용 컴포넌트",
diff --git a/frontend/lib/registry/components/v2-table-grouped/index.ts b/frontend/lib/registry/components/v2-table-grouped/index.ts
index f11e638c..c7dbd762 100644
--- a/frontend/lib/registry/components/v2-table-grouped/index.ts
+++ b/frontend/lib/registry/components/v2-table-grouped/index.ts
@@ -16,6 +16,7 @@ import { TableGroupedConfig } from "./types";
  */
 export const V2TableGroupedDefinition = createComponentDefinition({
   id: "v2-table-grouped",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "그룹화 테이블",
   name_eng: "Grouped Table Component",
   description: "데이터를 그룹화하여 접기/펼치기 기능을 제공하는 테이블",
diff --git a/frontend/lib/registry/components/v2-table-list/index.ts b/frontend/lib/registry/components/v2-table-list/index.ts
index d53c8300..06cef505 100644
--- a/frontend/lib/registry/components/v2-table-list/index.ts
+++ b/frontend/lib/registry/components/v2-table-list/index.ts
@@ -14,6 +14,7 @@ import { TableListConfig } from "./types";
  */
 export const V2TableListDefinition = createComponentDefinition({
   id: "v2-table-list",
+  hidden: true,  // Phase E: 통합 컴포넌트로 대체됨
   name: "테이블 리스트",
   name_eng: "TableList Component",
   description: "데이터베이스 테이블의 데이터를 목록으로 표시하는 컴포넌트",
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index 1d2607bd..71be5856 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -99,7 +99,7 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "customer-item-mapping": () => import("@/lib/registry/components/customer-item-mapping/CustomerItemMappingConfigPanel"),
   "mail-recipient-selector": () => import("@/lib/registry/components/mail-recipient-selector/MailRecipientSelectorConfigPanel"),
   "location-swap-selector": () => import("@/lib/registry/components/location-swap-selector/LocationSwapSelectorConfigPanel"),
-  "v2-location-swap-selector": () => import("@/lib/registry/components/v2-location-swap-selector/LocationSwapSelectorConfigPanel"),
+  "v2-location-swap-selector": () => import("@/lib/registry/components/domain/v2-location-swap-selector/LocationSwapSelectorConfigPanel"),
 
   // ========== 특수 컴포넌트 ==========
   "flow-widget": () => import("@/components/screen/config-panels/FlowWidgetConfigPanel"),
@@ -107,16 +107,16 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "v2-tabs-widget": () => import("@/components/screen/config-panels/TabsConfigPanel"),
   "tabs": () => import("@/components/screen/config-panels/TabsConfigPanel"),
   "v2-tabs": () => import("@/components/screen/config-panels/TabsConfigPanel"),
-  "map": () => import("@/lib/registry/components/map/MapConfigPanel"),
+  "map": () => import("@/lib/registry/components/domain/map/MapConfigPanel"),
   "rack-structure": () => import("@/lib/registry/components/rack-structure/RackStructureConfigPanel"),
-  "v2-rack-structure": () => import("@/lib/registry/components/v2-rack-structure/RackStructureConfigPanel"),
+  "v2-rack-structure": () => import("@/lib/registry/components/domain/v2-rack-structure/RackStructureConfigPanel"),
   "aggregation-widget": () => import("@/lib/registry/components/aggregation-widget/AggregationWidgetConfigPanel"),
   "v2-aggregation-widget": () => import("@/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel"),
   "numbering-rule": () => import("@/lib/registry/components/numbering-rule/NumberingRuleConfigPanel"),
   "v2-numbering-rule": () => import("@/lib/registry/components/v2-numbering-rule/NumberingRuleConfigPanel"),
   "category-manager": () => import("@/lib/registry/components/category-manager/CategoryManagerConfigPanel"),
   "universal-form-modal": () => import("@/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel"),
-  "v2-process-work-standard": () => import("@/lib/registry/components/v2-process-work-standard/ProcessWorkStandardConfigPanel"),
+  "v2-process-work-standard": () => import("@/lib/registry/components/domain/v2-process-work-standard/ProcessWorkStandardConfigPanel"),
 
   // ========== V2 BOM 컴포넌트 ==========
   "v2-bom-item-editor": () => import("@/components/v2/config-panels/V2BomItemEditorConfigPanel"),
@@ -142,12 +142,34 @@ const configPanelCache = new Map<string, React.ComponentType<any>>();
 /**
  * 컴포넌트 ID로 ConfigPanel 컴포넌트를 동적으로 로드
  */
+// ── Phase E: v2-* → 통합 컴포넌트 ConfigPanel alias ──
+const CONFIG_PANEL_ALIAS: Record<string, string> = {
+  "v2-divider-line": "divider", "divider-line": "divider", "v2-split-line": "divider",
+  "v2-text-display": "title", "text-display": "title",
+  "v2-button-primary": "button", "button-primary": "button",
+  "v2-table-search-widget": "search", "table-search-widget": "search",
+  "v2-input": "input", "v2-select": "input", "v2-date": "input",
+  "text-input": "input", "number-input": "input", "date-input": "input",
+  "select-basic": "input", "checkbox-basic": "input", "textarea-basic": "input",
+  "v2-aggregation-widget": "stats", "aggregation-widget": "stats",
+  "v2-status-count": "stats", "v2-card-display": "stats",
+  "v2-table-list": "table", "table-list": "table",
+  "v2-table-grouped": "table", "v2-pivot-grid": "table",
+  "v2-tabs-widget": "container", "v2-section-card": "container",
+  "v2-section-paper": "container", "v2-repeat-container": "container",
+  "section-card": "container", "section-paper": "container",
+  "accordion-basic": "container",
+};
+
 export async function getComponentConfigPanel(componentId: string): Promise<React.ComponentType<any> | null> {
-  if (configPanelCache.has(componentId)) {
-    return configPanelCache.get(componentId)!;
+  // alias 리졸브: v2-* → 통합 컴포넌트
+  const resolvedId = CONFIG_PANEL_ALIAS[componentId] ?? componentId;
+
+  if (configPanelCache.has(resolvedId)) {
+    return configPanelCache.get(resolvedId)!;
   }
 
-  const importFn = CONFIG_PANEL_MAP[componentId];
+  const importFn = CONFIG_PANEL_MAP[resolvedId] ?? CONFIG_PANEL_MAP[componentId];
   if (!importFn) {
     return null;
   }
@@ -184,7 +206,7 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
       return null;
     }
 
-    configPanelCache.set(componentId, ConfigPanelComponent);
+    configPanelCache.set(resolvedId, ConfigPanelComponent);
     return ConfigPanelComponent;
   } catch (error) {
     console.error(`컴포넌트 "${componentId}"의 ConfigPanel 로드 실패:`, error);
@@ -193,7 +215,8 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
 }
 
 export function hasComponentConfigPanel(componentId: string): boolean {
-  return componentId in CONFIG_PANEL_MAP;
+  const resolved = CONFIG_PANEL_ALIAS[componentId] ?? componentId;
+  return resolved in CONFIG_PANEL_MAP || componentId in CONFIG_PANEL_MAP;
 }
 
 export function getSupportedConfigPanelComponents(): string[] {
@@ -270,22 +293,21 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
   }, [tableColumns]);
 
   // repeater-field-group / selected-items-detail-input에서 전체 테이블 목록 로드
+  // ── 모든 컴포넌트에서 전체 DB 테이블 목록 로드 ──
   React.useEffect(() => {
-    if (componentId === "repeater-field-group" || componentId === "selected-items-detail-input") {
-      const loadAllTables = async () => {
-        try {
-          const { tableManagementApi } = await import("@/lib/api/tableManagement");
-          const response = await tableManagementApi.getTableList();
-          if (response.success && response.data) {
-            setAllTablesList(response.data);
-          }
-        } catch (_) {
-          // 전체 테이블 목록 로드 실패 시 무시
+    const loadAllTables = async () => {
+      try {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setAllTablesList(response.data);
         }
-      };
-      loadAllTables();
-    }
-  }, [componentId]);
+      } catch (_) {
+        // 전체 테이블 목록 로드 실패 시 무시
+      }
+    };
+    loadAllTables();
+  }, []);
 
   // selected-items-detail-input: 초기 sourceTable/targetTable 컬럼 로드
   React.useEffect(() => {
@@ -504,7 +526,7 @@ export const DynamicComponentConfigPanel: React.FC<ComponentConfigPanelProps> =
       tableName={screenTableName}
       columnName={currentComponent?.columnName || config?.columnName || config?.fieldName}
       tableColumns={selectedTableColumns}
-      tables={tables}
+      tables={allTablesList.length > 0 ? allTablesList : tables}
       allTables={allTablesList.length > 0 ? allTablesList : tables}
       onTableChange={handleTableChange}
       menuObjid={menuObjid}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 230d3139..b0a1d8c6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,7 @@
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
+        "@formkit/auto-animate": "^0.9.0",
         "@hookform/resolvers": "^5.2.1",
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -69,6 +70,8 @@
         "jsbarcode": "^3.12.1",
         "jspdf": "^3.0.3",
         "leaflet": "^1.9.4",
+        "lightningcss": "^1.32.0",
+        "lightningcss-linux-x64-gnu": "^1.32.0",
         "lucide-react": "^0.525.0",
         "mammoth": "^1.11.0",
         "next": "^15.4.8",
@@ -120,6 +123,9 @@
         "tailwindcss": "^4",
         "tw-animate-css": "^1.3.6",
         "typescript": "^5"
+      },
+      "engines": {
+        "node": ">=22.0.0"
       }
     },
     "node_modules/@acemir/cssom": {
@@ -632,6 +638,12 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@formkit/auto-animate": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@formkit/auto-animate/-/auto-animate-0.9.0.tgz",
+      "integrity": "sha512-VhP4zEAacXS3dfTpJpJ88QdLqMTcabMg0jwpOSxZ/VzfQVfl3GkZSCZThhGC5uhq/TxPHPzW0dzr4H9Bb1OgKA==",
+      "license": "MIT"
+    },
     "node_modules/@hookform/resolvers": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
@@ -3427,6 +3439,267 @@
         "tailwindcss": "4.1.16"
       }
     },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "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.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "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/@tailwindcss/node/node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "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/@tailwindcss/node/node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "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/@tailwindcss/node/node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "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/@tailwindcss/node/node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "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/@tailwindcss/node/node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "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/@tailwindcss/node/node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "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/@tailwindcss/node/node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "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/@tailwindcss/node/node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "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/@tailwindcss/node/node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "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/@tailwindcss/node/node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "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/@tailwindcss/oxide": {
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.16.tgz",
@@ -9193,7 +9466,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
@@ -11778,10 +12050,9 @@
       }
     },
     "node_modules/lightningcss": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
-      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
-      "dev": true,
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
       "license": "MPL-2.0",
       "dependencies": {
         "detect-libc": "^2.0.3"
@@ -11794,27 +12065,26 @@
         "url": "https://opencollective.com/parcel"
       },
       "optionalDependencies": {
-        "lightningcss-android-arm64": "1.30.2",
-        "lightningcss-darwin-arm64": "1.30.2",
-        "lightningcss-darwin-x64": "1.30.2",
-        "lightningcss-freebsd-x64": "1.30.2",
-        "lightningcss-linux-arm-gnueabihf": "1.30.2",
-        "lightningcss-linux-arm64-gnu": "1.30.2",
-        "lightningcss-linux-arm64-musl": "1.30.2",
-        "lightningcss-linux-x64-gnu": "1.30.2",
-        "lightningcss-linux-x64-musl": "1.30.2",
-        "lightningcss-win32-arm64-msvc": "1.30.2",
-        "lightningcss-win32-x64-msvc": "1.30.2"
+        "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.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
-      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "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": [
@@ -11829,13 +12099,12 @@
       }
     },
     "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
-      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "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": [
@@ -11850,13 +12119,12 @@
       }
     },
     "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
-      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "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": [
@@ -11871,13 +12139,12 @@
       }
     },
     "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
-      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "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": [
@@ -11892,13 +12159,12 @@
       }
     },
     "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
-      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "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": [
@@ -11913,13 +12179,12 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
-      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "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": [
@@ -11934,13 +12199,12 @@
       }
     },
     "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
-      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "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": [
@@ -11955,15 +12219,13 @@
       }
     },
     "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
-      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "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"
       ],
@@ -11976,13 +12238,12 @@
       }
     },
     "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
-      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "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": [
@@ -11997,13 +12258,12 @@
       }
     },
     "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
-      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "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": [
@@ -12018,13 +12278,12 @@
       }
     },
     "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
-      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "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": [
diff --git a/frontend/package.json b/frontend/package.json
index 584682cc..8c09b0bd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@formkit/auto-animate": "^0.9.0",
     "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -81,6 +82,8 @@
     "jsbarcode": "^3.12.1",
     "jspdf": "^3.0.3",
     "leaflet": "^1.9.4",
+    "lightningcss": "^1.32.0",
+    "lightningcss-linux-x64-gnu": "^1.32.0",
     "lucide-react": "^0.525.0",
     "mammoth": "^1.11.0",
     "next": "^15.4.8",
diff --git a/frontend/styles/builder-ide.css b/frontend/styles/builder-ide.css
index a9197f6e..7a4e5dd4 100644
--- a/frontend/styles/builder-ide.css
+++ b/frontend/styles/builder-ide.css
@@ -10,9 +10,9 @@
      .ide-builder 가 붙은 루트 아래에서만 효과.
      바깥 (헤더 / 사이드바 / 대시보드 등) 은 Cosmic 톤 그대로 유지.
 
-   기준 색 (mockup/css/09-developer.css 와 frontend/styles/developer.css):
-     다크  #121218 / #1a1a22 / #22222c / #3a3a48 / #e8e8ee / #5b9ef5
-     라이트 #f5f5f8 / #ededf2 / #e4e4ec / #d8d8e2 / #1a1a24 / #3b7dd8
+   기준 색 (IDE 배경 유지 + v5 Cosmic 보라 액센트):
+     다크  #121218 / #1a1a22 / #22222c / #3a3a48 / #e8e8ee / #a29bfe
+     라이트 #f5f5f8 / #ededf2 / #e4e4ec / #d8d8e2 / #1a1a24 / #6c5ce7
    ═══════════════════════════════════════════════════════════════════════════ */
 
 /* ─── 라이트 모드 ─── */
@@ -39,22 +39,22 @@
   /* 보더 d8d8e2 */
   --border: 240 13% 87%;
   --input: 240 13% 87%;
-  /* 액센트 (primary) 3b7dd8 — IDE 블루 */
-  --primary: 214 66% 54%;
+  /* 액센트 (primary) #6c5ce7 — v5 Cosmic 보라 */
+  --primary: 249 75% 63%;
   --primary-foreground: 0 0% 100%;
-  --ring: 214 66% 54%;
+  --ring: 249 75% 63%;
   /* destructive dc2626 */
   --destructive: 0 73% 51%;
   --destructive-foreground: 0 0% 100%;
   /* 사이드바 (패널 안의 보조 영역) */
   --sidebar-background: 240 13% 94%;
   --sidebar-foreground: 240 17% 12%;
-  --sidebar-primary: 214 66% 54%;
+  --sidebar-primary: 249 75% 63%;
   --sidebar-primary-foreground: 0 0% 100%;
   --sidebar-accent: 240 12% 91%;
   --sidebar-accent-foreground: 240 17% 12%;
   --sidebar-border: 240 13% 87%;
-  --sidebar-ring: 214 66% 54%;
+  --sidebar-ring: 249 75% 63%;
   /* 반경을 살짝 더 타이트하게 — IDE 느낌 */
   --radius: 0.375rem;
 }
@@ -83,22 +83,22 @@
   /* 보더 3a3a48 */
   --border: 240 10% 25%;
   --input: 240 10% 25%;
-  /* 액센트 5b9ef5 — IDE 라이트 블루 */
-  --primary: 214 89% 66%;
+  /* 액센트 #a29bfe — v5 Cosmic 보라 (다크) */
+  --primary: 245 99% 81%;
   --primary-foreground: 0 0% 100%;
-  --ring: 214 89% 66%;
+  --ring: 245 99% 81%;
   /* destructive f87171 */
   --destructive: 0 91% 71%;
   --destructive-foreground: 0 0% 100%;
   /* 사이드바 (패널 안의 보조 영역) */
   --sidebar-background: 240 14% 12%;
   --sidebar-foreground: 240 14% 92%;
-  --sidebar-primary: 214 89% 66%;
+  --sidebar-primary: 245 99% 81%;
   --sidebar-primary-foreground: 0 0% 100%;
   --sidebar-accent: 240 13% 19%;
   --sidebar-accent-foreground: 240 14% 92%;
   --sidebar-border: 240 10% 25%;
-  --sidebar-ring: 214 89% 66%;
+  --sidebar-ring: 245 99% 81%;
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -393,12 +393,12 @@
 .ide-builder details.ide-section > summary.ide-section-header {
   list-style: none;
   cursor: pointer;
-  padding: 0.5rem 0.65rem;
-  font-size: 0.66rem;
+  padding: 0.35rem 0.5rem;
+  font-size: 0.58rem;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: hsl(var(--primary));
+  letter-spacing: 0.06em;
+  color: hsl(var(--muted-foreground) / 0.5);
   background: hsl(var(--muted) / 0.5);
   border-bottom: 1px solid hsl(var(--border));
   display: flex;
@@ -408,15 +408,15 @@
   transition: background 0.1s;
 }
 .ide-builder details.ide-section > summary.ide-section-header:hover {
-  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground) / 0.8);
 }
 .ide-builder details.ide-section > summary.ide-section-header::-webkit-details-marker {
   display: none;
 }
 .ide-builder details.ide-section > summary.ide-section-header::before {
-  content: "▶";
-  font-size: 0.5rem;
-  color: hsl(var(--muted-foreground));
+  content: "▸";
+  font-size: 0.55rem;
+  color: hsl(var(--muted-foreground) / 0.4);
   transition: transform 0.15s;
   display: inline-block;
 }
@@ -524,58 +524,851 @@
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   ★ SlimToolbar 슬림화 (h-14 → h-10)
+   ★ SlimToolbar — Single-row header with zone dividers
+   Mockup: notes/gbpark/2026-04-14-builder-header-mockup.html
+   Design: flat buttons, zone pseudo-element dividers, tabs merged in header
    ═══════════════════════════════════════════════════════════════════════════ */
 
-.ide-builder .h-14 {
-  height: 42px !important;
-  min-height: 42px;
-}
-.ide-builder .h-14.border-b {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.ide-builder .h-9 {
-  height: 28px !important;
-  min-height: 28px;
-}
-.ide-builder .text-lg {
-  font-size: 0.82rem !important;
-  line-height: 1.15rem;
-  font-weight: 700;
+/* ── Header root ── */
+.ide-builder .hdr {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  z-index: 20;
+  background: hsl(var(--card));
+  border-bottom: 1px solid hsl(var(--border));
 }
 
+/* ── Zone: subtle vertical dividers between sections ── */
+.ide-builder .hdr-zone {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  position: relative;
+}
+.ide-builder .hdr-zone::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 25%;
+  bottom: 25%;
+  width: 1px;
+  background: hsl(var(--primary) / 0.1);
+}
+.ide-builder .hdr-zone:last-child::after {
+  display: none;
+}
+.ide-builder .hdr-zone.grow {
+  flex: 1;
+  min-width: 0;
+}
+.ide-builder .hdr-zone.end {
+  margin-left: auto;
+}
+.ide-builder .hdr-zone.end::after {
+  display: none;
+}
+.ide-builder .hdr-zone.end::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 25%;
+  bottom: 25%;
+  width: 1px;
+  background: hsl(var(--primary) / 0.1);
+}
+
+/* ── Zone internal spacing helpers ── */
+.ide-builder .hdr-gap-1 { display: flex; align-items: center; gap: 4px; }
+.ide-builder .hdr-gap-2 { display: flex; align-items: center; gap: 6px; }
+
 /* ═══════════════════════════════════════════════════════════════════════════
-   ★ INVYONE 브랜드 로고 (SlimToolbar 좌측)
+   ★ INVYONE 브랜드 로고 — v5 Cosmic
    ═══════════════════════════════════════════════════════════════════════════ */
 
 .ide-builder .ide-brand {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  padding-right: 0.7rem;
-  margin-right: 0.3rem;
-  border-right: 1px solid hsl(var(--border));
+  gap: 6px;
   flex-shrink: 0;
 }
 .ide-builder .ide-brand-text {
-  font-size: 0.78rem;
-  font-weight: 800;
+  font-size: 13px;
+  font-weight: 900;
   letter-spacing: -0.03em;
-  color: hsl(var(--primary));
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  background: linear-gradient(135deg, hsl(var(--primary)), #00cec9);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
 }
 .ide-builder .ide-brand-badge {
-  font-size: 0.5rem;
+  font-size: 7.5px;
   font-weight: 800;
-  padding: 0.1rem 0.32rem;
-  background: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
+  padding: 2px 5px;
+  background: linear-gradient(135deg, hsl(var(--primary)), #fd79a8);
+  color: #fff;
   border-radius: 3px;
-  letter-spacing: 0.04em;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
   line-height: 1.1;
+  box-shadow: 0 0 8px hsl(var(--primary) / 0.2);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ Flat icon button (sq-btn) — all header buttons use this
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .sq-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.ide-builder .sq-btn:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+.ide-builder .sq-btn.active {
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.12);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ Inline tab group (merged into header)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .tab-group {
+  display: flex;
+  gap: 0;
+  height: 100%;
+  align-items: stretch;
+}
+.ide-builder .tab-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 16px;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.12s;
+  white-space: nowrap;
+  position: relative;
+}
+.ide-builder .tab-item + .tab-item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 30%;
+  bottom: 30%;
+  width: 1px;
+  background: hsl(var(--primary) / 0.1);
+}
+.ide-builder .tab-item:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+.ide-builder .tab-item.active {
+  color: hsl(var(--primary));
+  font-weight: 700;
+  background: hsl(var(--primary) / 0.12);
+}
+.ide-builder .tab-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, hsl(var(--primary)), #00cec9);
+  box-shadow: 0 0 8px hsl(var(--primary) / 0.25);
+}
+.ide-builder .tab-cnt {
+  font-size: 9px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+.ide-builder .tab-item.active .tab-cnt {
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ Screen info (title + table badge) in header zone 4
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .info-title {
+  font-size: 12.5px;
+  font-weight: 700;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ide-builder .info-table {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: ui-monospace, monospace;
+  color: #00cec9;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: rgba(0, 206, 201, 0.1);
+  border: 1px solid rgba(0, 206, 201, 0.12);
+  margin-left: 8px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ Tool text button (multilang etc) — flat
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .tool-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  font-size: 11px;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+.ide-builder .tool-btn:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+.ide-builder .tool-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ Save button — flat, purple TEXT only (no filled background)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .tb-save {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  position: relative;
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: none;
+  font-size: 11.5px;
+  font-weight: 700;
+  color: hsl(var(--primary));
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.ide-builder .tb-save::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 20%;
+  right: 20%;
+  height: 2px;
+  border-radius: 1px;
+  background: hsl(var(--primary));
+  opacity: 0;
+  transform: scaleX(0);
+  transition: all 0.2s ease;
+}
+.ide-builder .tb-save:hover {
+  color: hsl(var(--primary));
+  text-shadow: 0 0 12px hsl(var(--primary) / 0.3);
+}
+.ide-builder .tb-save:hover::after {
+  opacity: 1;
+  transform: scaleX(1);
+  box-shadow: 0 0 8px hsl(var(--primary) / 0.4);
+}
+.ide-builder .tb-save:hover svg {
+  opacity: 1;
+}
+.ide-builder .tb-save svg {
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+.ide-builder .tb-save:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ Alignment tools bar (multi-select)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .tb-align-tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.ide-builder .tb-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: hsl(var(--primary) / 0.3);
+  margin: 0 3px;
+}
+.ide-builder .tb-sel-count {
+  font-size: 9px;
+  font-weight: 700;
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.12);
+  padding: 1px 6px;
+  border-radius: 8px;
+  margin-left: 4px;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ Floating canvas tools (resolution + grid toggles)
+   Positioned absolute, top-center of the canvas area
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .canvas-float-tools {
+  position: sticky;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 0;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--primary) / 0.1);
+  border-radius: 8px;
+  box-shadow: 0 0 20px hsl(var(--primary) / 0.1), 0 4px 20px rgba(0, 0, 0, 0.15);
+  z-index: 10;
+  overflow: hidden;
+  width: fit-content;
+  margin: 0 auto;
+  flex-shrink: 0;
+}
+
+/* ── Resolution cell ── */
+.ide-builder .ft-cell {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 12px;
+  position: relative;
+  font-size: 10.5px;
+  color: hsl(var(--foreground) / 0.7);
+  cursor: pointer;
+  transition: all 0.12s;
+  white-space: nowrap;
+  border: none;
+  background: transparent;
+}
+.ide-builder .ft-cell:hover {
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+}
+.ide-builder .ft-sub {
+  font-size: 9.5px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* ── Grid toggle group ── */
+.ide-builder .ft-toggles {
+  display: flex;
+  position: relative;
+}
+.ide-builder .ft-toggles::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 20%;
+  bottom: 20%;
+  width: 1px;
+  background: hsl(var(--primary) / 0.1);
+}
+.ide-builder .ft-toggle {
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.12s;
+}
+.ide-builder .ft-toggle:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+.ide-builder .ft-toggle.on {
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.12);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ 3뷰 탭 바 (Phase G — legacy ViewTabBar CSS, kept for reference)
+   Now tabs are rendered inside the header. These styles kept for any
+   remaining references but the separate .view-tab-bar row is removed.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .view-tab-bar {
+  display: none; /* hidden — tabs now merged into hdr */
+}
+.ide-builder .view-tab-group {
+  display: flex;
+  gap: 1px;
+}
+.ide-builder .view-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.2rem 0.65rem;
+  font-size: 0.65rem;
+  font-weight: 500;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  border: none;
+  border-radius: 4px 4px 0 0;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+  position: relative;
+  white-space: nowrap;
+}
+.ide-builder .view-tab:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+.ide-builder .view-tab.active {
+  color: hsl(var(--primary));
+  font-weight: 600;
+  background: hsl(var(--background));
+}
+.ide-builder .view-tab.active::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, hsl(var(--primary)), #00cec9);
+  border-radius: 1px 1px 0 0;
+  box-shadow: 0 0 8px hsl(var(--primary) / 0.3);
+}
+.ide-builder .view-tab-badge {
+  font-size: 0.5rem;
+  font-weight: 700;
+  padding: 0.05rem 0.3rem;
+  min-width: 14px;
+  text-align: center;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  border-radius: 8px;
+  line-height: 1.3;
+}
+.ide-builder .view-tab.active .view-tab-badge {
+  background: hsl(var(--primary) / 0.12);
+  color: hsl(var(--primary));
+}
+.ide-builder .view-tab-hint {
+  margin-left: auto;
+  font-size: 0.55rem;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+/* ── 팝업 뷰 캔버스 시각 표시 ── */
+.ide-builder .popup-view-canvas {
+  background:
+    repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 8px,
+      hsl(var(--muted) / 0.5) 8px,
+      hsl(var(--muted) / 0.5) 9px
+    ),
+    hsl(var(--muted));
+}
+.ide-builder .popup-view-label {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 40;
+  padding: 0.2rem 0.9rem;
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: hsl(var(--primary));
+  background: hsl(var(--card) / 0.9);
+  border: 1px solid hsl(var(--primary) / 0.2);
+  border-radius: 12px;
+  backdrop-filter: blur(4px);
+  pointer-events: none;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ INVYONE 좌측 패널 + 검색 + 탭
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.ide-builder .inv-left-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 260px;
+  background: hsl(var(--card));
+  border-right: 1px solid hsl(var(--border) / 0.35);
+  overflow: hidden;
+  animation: slide-in-left 0.2s ease;
+}
+.ide-builder .inv-right-panel {
+  animation: slide-in-right 0.2s ease;
+}
+
+/* ── 패널 루트 ── */
+.ide-builder .inv-panel-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+.ide-builder .inv-panel-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 0.3rem 0.5rem;
+}
+
+/* ── 검색 ── */
+.ide-builder .inv-search-wrap {
+  position: relative;
+  padding: 0.4rem;
+  flex-shrink: 0;
+}
+.ide-builder .inv-search-icon {
+  position: absolute;
+  top: 50%;
+  left: 0.75rem;
+  transform: translateY(-50%);
+  color: hsl(var(--muted-foreground) / 0.4);
+  pointer-events: none;
+}
+.ide-builder .inv-search-input {
+  height: 30px !important;
+  padding-left: 1.6rem !important;
+  font-size: 0.68rem !important;
+  background: hsl(var(--background)) !important;
+  border: 1px solid hsl(var(--border) / 0.5) !important;
+  border-radius: 6px !important;
+  color: hsl(var(--foreground)) !important;
+}
+.ide-builder .inv-search-input:focus {
+  border-color: hsl(var(--primary) / 0.4) !important;
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.08) !important;
+}
+.ide-builder .inv-search-input::placeholder {
+  color: hsl(var(--muted-foreground) / 0.35) !important;
+}
+
+/* ── 섹션 (테이블 컬럼 / 컴포넌트) ── */
+.ide-builder .inv-section {
+  margin-bottom: 0.15rem;
+}
+.ide-builder .inv-section + .inv-section {
+  border-top: 1px solid hsl(var(--border) / 0.3);
+  padding-top: 0.2rem;
+}
+.ide-builder .inv-section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.4rem;
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground) / 0.65);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  transition: color 0.12s;
+}
+.ide-builder .inv-section-header:hover {
+  color: hsl(var(--foreground) / 0.8);
+}
+.ide-builder .inv-section-header::-webkit-details-marker { display: none; }
+.ide-builder .inv-section-static { cursor: default; }
+.ide-builder .inv-section-count {
+  font-size: 0.5rem;
+  font-weight: 600;
+  padding: 0.08rem 0.3rem;
+  background: hsl(var(--muted) / 0.7);
+  border-radius: 6px;
+  color: hsl(var(--muted-foreground) / 0.6);
+  line-height: 1.3;
+}
+
+/* ── 테이블 컬럼 리스트 ── */
+.ide-builder .inv-column-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0.15rem 0;
+  margin: 0 0.2rem 0.3rem;
+  max-height: 240px;
+  overflow-y: auto;
+  background: hsl(var(--background) / 0.5);
+  border-radius: 6px;
+  border: 1px solid hsl(var(--border) / 0.2);
+}
+.ide-builder .inv-col-row {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.35rem 0.5rem;
+  cursor: grab;
+  transition: background 0.1s;
+  font-size: 0.7rem;
+  border-left: 3px solid transparent;
+}
+.ide-builder .inv-col-row:hover {
+  background: hsl(249 75% 63% / 0.1);
+  border-left-color: hsl(249 75% 63% / 0.6);
+}
+.ide-builder .inv-col-row:active {
+  cursor: grabbing;
+}
+.ide-builder .inv-col-row:nth-child(even) {
+  background: hsl(var(--muted) / 0.08);
+}
+.ide-builder .inv-col-row:nth-child(even):hover {
+  background: hsl(249 75% 63% / 0.1);
+}
+.ide-builder .inv-col-row.placed {
+  opacity: 0.3;
+  cursor: default;
+}
+.ide-builder .inv-col-tag {
+  font-size: 0.5rem;
+  font-weight: 700;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  background: hsl(249 75% 63% / 0.18);
+  color: hsl(249 75% 63% / 0.9);
+  flex-shrink: 0;
+  letter-spacing: 0.03em;
+  min-width: 34px;
+  text-align: center;
+}
+.ide-builder .inv-col-row[data-type="NUM"] .inv-col-tag {
+  background: hsl(38 85% 55% / 0.2);
+  color: hsl(38 85% 55%);
+}
+.ide-builder .inv-col-row[data-type="NUM"]:hover {
+  border-left-color: hsl(38 85% 55% / 0.6);
+}
+.ide-builder .inv-col-row[data-type="DATE"] .inv-col-tag {
+  background: hsl(160 70% 50% / 0.2);
+  color: hsl(160 70% 50%);
+}
+.ide-builder .inv-col-row[data-type="DATE"]:hover {
+  border-left-color: hsl(160 70% 50% / 0.6);
+}
+.ide-builder .inv-col-row[data-type="BOOL"] .inv-col-tag {
+  background: hsl(265 65% 60% / 0.2);
+  color: hsl(265 65% 60%);
+}
+.ide-builder .inv-col-row[data-type="BOOL"]:hover {
+  border-left-color: hsl(265 65% 60% / 0.6);
+}
+.ide-builder .inv-col-name {
+  flex: 1;
+  color: hsl(var(--foreground) / 0.88);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ide-builder .inv-col-row:hover .inv-col-name {
+  color: hsl(var(--foreground));
+}
+.ide-builder .inv-col-placed {
+  font-size: 0.48rem;
+  color: hsl(var(--muted-foreground) / 0.4);
+  flex-shrink: 0;
+}
+.ide-builder .inv-table-select {
+  display: block;
+  width: calc(100% - 0.6rem);
+  margin: 0.2rem 0.3rem 0.3rem;
+  font-size: 0.6rem;
+  padding: 0.2rem 0.35rem;
+  border: 1px solid hsl(var(--border) / 0.3);
+  border-radius: 4px;
+  background: hsl(var(--background));
+  color: hsl(var(--muted-foreground));
+}
+
+/* ── 컴포넌트 리스트 ── */
+.ide-builder .inv-comp-list {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 0.25rem;
+  margin: 0 0.15rem;
+  background: hsl(var(--background) / 0.4);
+  border-radius: 6px;
+  border: 1px solid hsl(var(--border) / 0.15);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ INVYONE 컴포넌트 팔레트 카드
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── 카테고리별 CSS 변수 (채도 높임) ── */
+.ide-builder .inv-cat-data    { --cat: 249, 75%, 63%; }   /* v5 보라 #6c5ce7 */
+.ide-builder .inv-cat-display { --cat: 174, 100%, 40%; }  /* v5 시안 #00cec9 */
+.ide-builder .inv-cat-action  { --cat: 340, 97%, 70%; }   /* v5 핑크 #fd79a8 */
+.ide-builder .inv-cat-layout  { --cat: 45, 98%, 64%; }    /* v5 앰버 #fdcb6e */
+.ide-builder .inv-cat-input   { --cat: 249, 75%, 73%; }   /* v5 보라 라이트 #a29bfe */
+.ide-builder .inv-cat-utility { --cat: 174, 100%, 40%; }  /* v5 시안 #00cec9 */
+.ide-builder .inv-cat-default { --cat: 240, 10%, 50%; }   /* 그레이 */
+
+/* ── 카드 베이스 ── */
+.ide-builder .inv-comp-card {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.32rem 0.4rem;
+  border-radius: 5px;
+  border: 1px solid hsl(var(--cat) / 0.22);
+  border-left: 3px solid hsl(var(--cat) / 0.8);
+  background: hsl(var(--cat) / 0.06);
+  cursor: grab;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+.ide-builder .inv-comp-card:hover {
+  border-left-color: hsl(var(--cat));
+  background: hsl(var(--cat) / 0.14);
+  border-color: hsl(var(--cat) / 0.35);
+  box-shadow: 0 1px 8px hsl(var(--cat) / 0.12);
+}
+.ide-builder .inv-comp-card:active {
+  cursor: grabbing;
+  transform: scale(0.97);
+  opacity: 0.8;
+}
+
+/* ── 아이콘 박스 ── */
+.ide-builder .inv-comp-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+  background: hsl(var(--cat) / 0.18);
+  color: hsl(var(--cat));
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+.ide-builder .inv-comp-card:hover .inv-comp-icon {
+  background: hsl(var(--cat) / 0.3);
+}
+
+/* ── 이름 ── */
+.ide-builder .inv-comp-name {
+  flex: 1;
+  min-width: 0;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── 그립 ── */
+.ide-builder .inv-comp-grip {
+  flex-shrink: 0;
+  color: hsl(var(--muted-foreground) / 0.1);
+  transition: color 0.15s;
+}
+.ide-builder .inv-comp-card:hover .inv-comp-grip {
+  color: hsl(var(--cat) / 0.4);
+}
+
+/* (palette-section/label 제거됨 — inv-section 으로 대체) */
+/* ── 더보기 섹션 ── */
+.ide-builder .inv-more-section {
+  margin-top: 0.25rem;
+  border-top: 1px solid hsl(var(--border) / 0.3);
+  padding-top: 0.25rem;
+}
+.ide-builder .inv-more-toggle {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.35rem;
+  margin: 0 0.1rem;
+  border-radius: 5px;
+  border: 1px dashed hsl(var(--border) / 0.5);
+  color: hsl(var(--muted-foreground) / 0.5);
+  font-size: 0.6rem;
+  font-weight: 600;
+  transition: all 0.15s;
+}
+.ide-builder .inv-more-toggle:hover {
+  border-color: hsl(var(--primary) / 0.3);
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.04);
+}
+.ide-builder .inv-more-toggle::-webkit-details-marker { display: none; }
+.ide-builder .inv-more-count {
+  font-size: 0.52rem;
+  font-weight: 700;
+  padding: 0.1rem 0.35rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground) / 0.7);
+  border-radius: 8px;
+  line-height: 1.3;
+}
+.ide-builder details[open] > .inv-more-toggle {
+  border-style: solid;
+  border-color: hsl(var(--primary) / 0.2);
+  color: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.05);
+  margin-bottom: 0.35rem;
+}
+.ide-builder details[open] > .inv-more-toggle .inv-more-count {
+  background: hsl(var(--primary) / 0.12);
+  color: hsl(var(--primary));
 }
 
 /* ─── 스크롤바 IDE 스타일 ─── */
@@ -597,3 +1390,221 @@
   background-clip: padding-box;
   border: 2px solid transparent;
 }
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ 애니메이션 — 패널 슬라이드, 플로팅 바, 탭, 버튼 트랜지션
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── 패널 슬라이드 ── */
+@keyframes slide-in-left {
+  from { transform: translateX(-100%); opacity: 0; }
+  to   { transform: translateX(0);     opacity: 1; }
+}
+@keyframes slide-in-right {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+
+/* ── 플로팅 바 등장 ── */
+@keyframes float-in {
+  from { transform: translateX(-50%) translateY(-12px); opacity: 0; }
+  to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
+}
+.ide-builder .canvas-float-tools {
+  animation: float-in 0.25s ease;
+}
+
+/* ── 탭 전환 — 액티브 언더라인 ── */
+.ide-builder .tab-item.active::after {
+  animation: tab-underline 0.2s ease;
+}
+@keyframes tab-underline {
+  from { transform: scaleX(0); }
+  to   { transform: scaleX(1); }
+}
+
+/* ── 버튼/아이콘 공통 트랜지션 ── */
+.ide-builder .sq-btn,
+.ide-builder .tool-btn,
+.ide-builder .tb-save,
+.ide-builder .tab-item,
+.ide-builder .ft-cell,
+.ide-builder .ft-toggle {
+  transition: all 0.15s ease;
+}
+
+/* ── 호버 스케일 피드백 (아이콘 버튼) ── */
+.ide-builder .sq-btn:active {
+  transform: scale(0.92);
+}
+
+/* ── 컴포넌트 카드 드래그 시작 ── */
+.ide-builder .inv-comp-card:active {
+  transition: transform 0.1s ease;
+}
+
+/* ── 플로팅 바 토글 버튼 상태 전환 ── */
+.ide-builder .ft-toggle.on {
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+/* ── 컬럼 행 호버 좌측 보더 슬라이드 ── */
+.ide-builder .inv-col-row {
+  transition: background 0.12s ease, border-left-color 0.15s ease;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ 해상도 드롭다운 — v5 Cosmic
+   ═══════════════════════════════════════════════════════════════════════════ */
+.ide-builder .res-dropdown {
+  background: hsl(var(--card)) !important;
+  border: 1px solid hsl(var(--primary) / 0.12) !important;
+  border-radius: 10px !important;
+  padding: 6px !important;
+  min-width: 280px !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 20px hsl(var(--primary) / 0.08) !important;
+  backdrop-filter: blur(12px);
+  animation: dropdown-in 0.15s ease;
+}
+@keyframes dropdown-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+.ide-builder .res-category-label {
+  font-size: 0.58rem !important;
+  font-weight: 700 !important;
+  color: hsl(var(--primary) / 0.5) !important;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 6px 8px 3px !important;
+}
+.ide-builder .res-item {
+  gap: 8px !important;
+  padding: 7px 8px !important;
+  border-radius: 6px !important;
+  font-size: 0.72rem !important;
+  color: hsl(var(--foreground) / 0.8) !important;
+  transition: all 0.12s !important;
+  cursor: pointer !important;
+}
+.ide-builder .res-item > svg {
+  color: hsl(var(--primary) / 0.4);
+  flex-shrink: 0;
+  width: 14px !important;
+  height: 14px !important;
+}
+.ide-builder .res-item:hover {
+  background: hsl(var(--primary) / 0.08) !important;
+  color: hsl(var(--foreground)) !important;
+}
+.ide-builder .res-item:hover > svg {
+  color: hsl(var(--primary));
+}
+.ide-builder .res-item-name {
+  flex: 1;
+  font-weight: 500;
+  white-space: nowrap;
+}
+.ide-builder .res-item-size {
+  font-size: 0.6rem;
+  font-family: ui-monospace, monospace;
+  color: hsl(var(--muted-foreground) / 0.4);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.ide-builder .res-sep {
+  height: 1px;
+  margin: 4px 8px;
+  background: hsl(var(--primary) / 0.08);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   ★ 빈 캔버스 안내 — v5 Cosmic
+   ═══════════════════════════════════════════════════════════════════════════ */
+.ide-builder .empty-canvas-wrap {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  animation: empty-fade-in 0.4s ease;
+}
+.ide-builder .empty-canvas-wrap * {
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+@keyframes empty-fade-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.ide-builder .empty-canvas {
+  text-align: center;
+  max-width: 420px;
+  padding: 2rem;
+}
+.ide-builder .empty-canvas-icon {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  background: hsl(var(--primary) / 0.08);
+  border: 1px solid hsl(var(--primary) / 0.12);
+  color: hsl(var(--primary) / 0.4);
+}
+.ide-builder .empty-canvas-title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: hsl(var(--foreground) / 0.6);
+  margin-bottom: 0.4rem;
+}
+.ide-builder .empty-canvas-desc {
+  font-size: 0.72rem;
+  color: hsl(var(--muted-foreground) / 0.6);
+  margin-bottom: 1.2rem;
+  line-height: 1.5;
+}
+.ide-builder .empty-canvas-shortcuts {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+.ide-builder .empty-shortcut-group {
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: hsl(var(--card) / 0.6);
+  border: 1px solid hsl(var(--border) / 0.3);
+  text-align: left;
+}
+.ide-builder .empty-shortcut-label {
+  display: block;
+  font-size: 0.55rem;
+  font-weight: 700;
+  color: hsl(var(--primary) / 0.5);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 4px;
+}
+.ide-builder .empty-shortcut-keys {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  font-size: 0.6rem;
+  color: hsl(var(--muted-foreground) / 0.5);
+}
+.ide-builder .empty-shortcut-keys kbd {
+  font-family: ui-monospace, monospace;
+  font-size: 0.55rem;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: hsl(var(--muted) / 0.5);
+  border: 1px solid hsl(var(--border) / 0.3);
+  color: hsl(var(--foreground) / 0.5);
+}
diff --git a/frontend/styles/v5-layout.css b/frontend/styles/v5-layout.css
index d511d2a5..27d8bc60 100644
--- a/frontend/styles/v5-layout.css
+++ b/frontend/styles/v5-layout.css
@@ -570,7 +570,7 @@ html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bo
 .v5-theme-fade.in{opacity:1;}
 
 /* ===== CONTENT PLACEHOLDER ===== */
-.v5-content{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}
+.v5-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;}
 .v5-placeholder{
   flex:1;display:flex;align-items:center;justify-content:center;
   border:2px dashed var(--v5-border);border-radius:16px;
@@ -627,3 +627,473 @@ html:not(.dark) .v5-cosmos .neb-4{width:600px;height:600px;top:-10%;right:20%;bo
   .v5-si{font-size:.72rem;padding:.45rem .6rem;}
   .v5-content{padding:1rem;}
 }
+
+/* ===================================================================
+   V5 MENU MANAGEMENT (v5-mm-*) — 3-column Cascade (Scope / Tree / Detail)
+   모든 색/간격 토큰은 v5 변수 재사용. 새 토큰은 :root 에 추가.
+   =================================================================== */
+:root{
+  --v5-mm-bg:#ffffff;
+  --v5-mm-panel:#ffffff;
+  --v5-mm-sunk:#f5f5f8;
+  --v5-mm-hover:#faf9fc;
+  --v5-mm-faint:#c9c7d5;
+  --v5-mm-border:#e5e3ec;
+  --v5-mm-border-2:#eeedf3;
+  --v5-mm-text:#1a1825;
+  --v5-mm-text-sec:#4e4c5e;
+  --v5-mm-text-muted:#8a8899;
+  --v5-mm-accent:#6c5ce7;
+  --v5-mm-accent-soft:rgba(108,92,231,.08);
+  --v5-mm-accent-line:rgba(108,92,231,.22);
+  --v5-mm-ring:rgba(108,92,231,.14);
+  --v5-mm-green:#0a9975;
+  --v5-mm-red:#dc2626;
+  --v5-mm-amber:#c87d18;
+}
+.dark{
+  --v5-mm-bg:#0a0a12;
+  --v5-mm-panel:#13131c;
+  --v5-mm-sunk:#0f0f18;
+  --v5-mm-hover:#1a1a24;
+  --v5-mm-faint:#4a4859;
+  --v5-mm-border:#1f1f26;
+  --v5-mm-border-2:#19191f;
+  --v5-mm-text:#f1eff8;
+  --v5-mm-text-sec:#a5a2ba;
+  --v5-mm-text-muted:#72708a;
+  --v5-mm-accent:#a991ff;
+  --v5-mm-accent-soft:rgba(169,145,255,.09);
+  --v5-mm-accent-line:rgba(169,145,255,.22);
+  --v5-mm-ring:rgba(169,145,255,.22);
+  --v5-mm-green:#5eeabc;
+  --v5-mm-red:#ff6a7a;
+  --v5-mm-amber:#f2b45e;
+}
+
+/* 전체 shell — admin content 안에 들어감 (반응형 fluid) */
+.v5-mm{display:grid;
+  grid-template-columns:clamp(220px,16vw,300px) clamp(280px,18vw,360px) minmax(0,1fr);
+  height:100%;min-height:0;border-top:1px solid var(--v5-border);}
+
+/* 공통 컬럼 셸 */
+.v5-mm-col{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--v5-mm-border);
+  background:var(--v5-mm-panel);animation:v5-mm-colIn .35s cubic-bezier(.16,1,.3,1);}
+.v5-mm-col:last-child{border-right:none;}
+@keyframes v5-mm-colIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
+
+/* 컬럼 헤더 공통 */
+.v5-mm-col-hd{padding:1rem 1rem .6rem;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;}
+.v5-mm-col-hd > div:first-child{min-width:0;}
+.v5-mm-step{display:inline-flex;align-items:center;gap:.35rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;
+  color:var(--v5-mm-text-muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
+.v5-mm-step .num{padding:.06rem .32rem;border-radius:3px;background:var(--v5-mm-sunk);
+  border:1px solid var(--v5-mm-border);color:var(--v5-mm-accent);}
+.v5-mm-col-hd h3{margin:.3rem 0 .1rem;font-size:.95rem;font-weight:700;letter-spacing:-.018em;color:var(--v5-mm-text);}
+.v5-mm-col-hd p{margin:0;font-size:.64rem;color:var(--v5-mm-text-muted);}
+
+.v5-mm-hd-add{width:28px;height:28px;border-radius:7px;border:1px solid var(--v5-mm-border);
+  background:var(--v5-mm-panel);color:var(--v5-mm-text-sec);cursor:pointer;display:flex;
+  align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
+.v5-mm-hd-add:hover{border-color:var(--v5-mm-accent);color:var(--v5-mm-accent);background:var(--v5-mm-sunk);}
+.v5-mm-hd-add svg{width:12px;height:12px;}
+
+/* ========= COL 1: SCOPE ========= */
+.v5-mm-col-scope{background:var(--v5-mm-sunk);}
+.v5-mm-scope-list{padding:.3rem .6rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-y:auto;}
+.v5-mm-scope{display:flex;flex-direction:column;gap:.5rem;padding:.85rem;border-radius:10px;
+  background:var(--v5-mm-panel);border:1px solid var(--v5-mm-border);cursor:pointer;transition:all .15s;}
+.v5-mm-scope:hover{border-color:rgba(108,92,231,.2);}
+.dark .v5-mm-scope:hover{border-color:rgba(162,155,254,.2);}
+.v5-mm-scope.on{background:rgba(108,92,231,.08);border-color:var(--v5-mm-accent);}
+.dark .v5-mm-scope.on{background:rgba(162,155,254,.08);}
+.v5-mm-scope-top{display:flex;align-items:center;justify-content:space-between;}
+.v5-mm-scope-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
+  background:var(--v5-mm-sunk);color:var(--v5-mm-text-sec);border:1px solid var(--v5-mm-border-2);}
+.v5-mm-scope.on .v5-mm-scope-ico{background:var(--v5-mm-accent);color:white;border-color:transparent;}
+.v5-mm-scope-ico svg{width:15px;height:15px;}
+.v5-mm-scope-cnt{font-size:1.1rem;font-weight:800;letter-spacing:-.03em;color:var(--v5-mm-text);font-variant-numeric:tabular-nums;}
+.v5-mm-scope.on .v5-mm-scope-cnt{color:var(--v5-mm-accent);}
+.v5-mm-scope-name{font-size:.82rem;font-weight:700;letter-spacing:-.01em;color:var(--v5-mm-text);}
+.v5-mm-scope-desc{font-size:.62rem;color:var(--v5-mm-text-muted);line-height:1.4;}
+
+/* ========= COL 2: TREE ========= */
+.v5-mm-col-tree{background:var(--v5-mm-panel);}
+.v5-mm-tree-srch{padding:.2rem .75rem .55rem;flex-shrink:0;position:relative;}
+.v5-mm-tree-srch > svg{position:absolute;left:1.3rem;top:50%;transform:translateY(-50%);width:11px;height:11px;
+  color:var(--v5-mm-text-muted);pointer-events:none;}
+.v5-mm-tree-srch input{width:100%;height:28px;padding:0 .55rem 0 1.85rem;border:1px solid var(--v5-mm-border);border-radius:6px;
+  background:var(--v5-mm-sunk);color:var(--v5-mm-text);font-size:.68rem;font-family:inherit;outline:none;transition:all .12s;}
+.v5-mm-tree-srch input:focus{border-color:var(--v5-mm-accent);background:var(--v5-mm-panel);
+  box-shadow:0 0 0 2px rgba(108,92,231,.14);}
+.dark .v5-mm-tree-srch input:focus{box-shadow:0 0 0 2px rgba(162,155,254,.2);}
+
+.v5-mm-tree{padding:.15rem .4rem 1rem;flex:1;overflow-y:auto;display:flex;flex-direction:column;}
+
+/* Node 공통 — margin 없이 padding으로 세로 간격 확보, hit area 연속 */
+.v5-mm-node{display:flex;align-items:center;gap:.55rem;padding:.72rem .7rem;border-radius:7px;margin:0 .15rem;
+  cursor:pointer;transition:all .12s;position:relative;user-select:none;
+  background-clip:padding-box;}
+.v5-mm-node:hover{background:var(--v5-mm-sunk);}
+.v5-mm-node.on{background:rgba(108,92,231,.08);}
+.dark .v5-mm-node.on{background:rgba(162,155,254,.09);}
+.v5-mm-node.on .v5-mm-node-name{color:var(--v5-mm-accent);font-weight:600;}
+
+.v5-mm-caret{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;
+  color:var(--v5-mm-text-muted);flex-shrink:0;border-radius:3px;transition:all .1s;}
+.v5-mm-caret:hover{background:var(--v5-mm-panel);color:var(--v5-mm-text);}
+.v5-mm-caret svg{width:9px;height:9px;transition:transform .18s cubic-bezier(.4,0,.2,1);}
+.v5-mm-node.open > .v5-mm-caret svg{transform:rotate(90deg);}
+.v5-mm-node.leaf .v5-mm-caret{opacity:0;pointer-events:none;}
+
+.v5-mm-node-ico{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
+  background:var(--v5-mm-sunk);color:var(--v5-mm-text-sec);flex-shrink:0;border:1px solid var(--v5-mm-border-2);}
+.v5-mm-node.on .v5-mm-node-ico{background:var(--v5-mm-accent);color:white;border-color:transparent;}
+.v5-mm-node-ico svg{width:13px;height:13px;}
+
+.v5-mm-node-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
+.v5-mm-node-name{font-size:.88rem;font-weight:500;color:var(--v5-mm-text);letter-spacing:-.005em;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.v5-mm-node-meta{font-size:.68rem;color:var(--v5-mm-text-muted);font-family:'JetBrains Mono',monospace;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+
+.v5-mm-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--v5-mm-faint);}
+.v5-mm-dot.on{background:var(--v5-mm-green);}
+
+.v5-mm-cnt{font-size:.68rem;font-weight:700;color:var(--v5-mm-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;
+  padding:.15rem .5rem;border-radius:5px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border-2);}
+.v5-mm-node.on .v5-mm-cnt{color:var(--v5-mm-accent);background:var(--v5-mm-panel);
+  border-color:rgba(108,92,231,.2);}
+
+/* L1: 크게 강조 — margin 대신 padding을 써서 드래그 hit area를 여백까지 확장 */
+.v5-mm-node.l1{padding:1.2rem 1rem .95rem;border-radius:11px;background:var(--v5-mm-panel);
+  border:1px solid var(--v5-mm-border);margin:0 .15rem .15rem;gap:.75rem;
+  background-clip:padding-box;}
+.v5-mm-node.l1:hover{border-color:rgba(108,92,231,.2);background:rgba(108,92,231,.05);}
+.dark .v5-mm-node.l1:hover{border-color:rgba(162,155,254,.2);background:rgba(162,155,254,.05);}
+.v5-mm-node.l1.on{border-color:var(--v5-mm-accent);background:rgba(108,92,231,.08);}
+.dark .v5-mm-node.l1.on{background:rgba(162,155,254,.08);}
+.v5-mm-node.l1 .v5-mm-caret{width:18px;height:18px;}
+.v5-mm-node.l1 .v5-mm-caret svg{width:11px;height:11px;}
+.v5-mm-node.l1 .v5-mm-node-ico{width:38px;height:38px;border-radius:10px;}
+.v5-mm-node.l1 .v5-mm-node-ico svg{width:18px;height:18px;}
+.v5-mm-node.l1 .v5-mm-node-name{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;}
+.v5-mm-node.l1.on .v5-mm-node-name{font-weight:700;color:var(--v5-mm-accent);}
+.v5-mm-node.l1 .v5-mm-cnt{font-size:.74rem;padding:.2rem .6rem;font-weight:700;}
+
+/* L2/L3 들여쓰기 + connector line */
+.v5-mm-node.l2{padding-left:2.1rem;}
+.v5-mm-node.l3{padding-left:3.3rem;}
+.v5-mm-node.l2::before{content:'';position:absolute;left:1.4rem;top:0;bottom:0;width:1px;background:var(--v5-mm-border-2);}
+.v5-mm-node.l2::after{content:'';position:absolute;left:1.4rem;top:50%;width:.5rem;height:1px;background:var(--v5-mm-border);}
+.v5-mm-node.l3::before{content:'';position:absolute;left:2.5rem;top:0;bottom:0;width:1px;background:var(--v5-mm-border-2);}
+.v5-mm-node.l3::after{content:'';position:absolute;left:2.5rem;top:50%;width:.5rem;height:1px;background:var(--v5-mm-border);}
+
+/* 서브트리 펼침 — stagger fade-in + blur */
+.v5-mm-sub{display:none;margin:0;padding:0;}
+.v5-mm-node.open + .v5-mm-sub{display:block;animation:v5-mm-subIn .35s cubic-bezier(.16,1,.3,1);}
+@keyframes v5-mm-subIn{
+  from{opacity:0;transform:translateY(-6px);filter:blur(3px);}
+  to{opacity:1;transform:none;filter:none;}
+}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node{animation:v5-mm-nodeIn .38s cubic-bezier(.16,1,.3,1) backwards;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(1){animation-delay:.03s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(2){animation-delay:.07s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(3){animation-delay:.11s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(4){animation-delay:.15s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(5){animation-delay:.19s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(6){animation-delay:.23s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(7){animation-delay:.27s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(8){animation-delay:.31s;}
+.v5-mm-node.open + .v5-mm-sub > .v5-mm-node:nth-child(n+9){animation-delay:.35s;}
+@keyframes v5-mm-nodeIn{
+  from{opacity:0;transform:translateX(-10px) scale(.98);}
+  to{opacity:1;transform:none;}
+}
+
+/* caret 회전 부드럽게 */
+.v5-mm-caret svg{transition:transform .28s cubic-bezier(.34,1.56,.64,1);}
+
+/* 선택 상태 진입 애니메이션 */
+.v5-mm-node.on{animation:v5-mm-selectPulse .5s cubic-bezier(.16,1,.3,1);}
+@keyframes v5-mm-selectPulse{
+  0%{box-shadow:inset 0 0 0 0 rgba(108,92,231,0);}
+  50%{box-shadow:inset 0 0 0 2px rgba(108,92,231,.3);}
+  100%{box-shadow:inset 0 0 0 0 rgba(108,92,231,0);}
+}
+.dark .v5-mm-node.on{animation-name:v5-mm-selectPulseDark;}
+@keyframes v5-mm-selectPulseDark{
+  0%{box-shadow:inset 0 0 0 0 rgba(162,155,254,0);}
+  50%{box-shadow:inset 0 0 0 2px rgba(162,155,254,.35);}
+  100%{box-shadow:inset 0 0 0 0 rgba(162,155,254,0);}
+}
+
+/* Drag & drop — box-shadow 인셋 방식 (connector ::before/::after 충돌 방지) */
+.v5-mm-node[draggable="true"]{cursor:grab;}
+.v5-mm-node[draggable="true"]:active{cursor:grabbing;}
+.v5-mm-node.dragging{opacity:.4;}
+.v5-mm-node.drop-before{box-shadow:inset 0 2px 0 var(--v5-mm-accent),0 -4px 8px -4px var(--v5-mm-ring);}
+.v5-mm-node.drop-after{box-shadow:inset 0 -2px 0 var(--v5-mm-accent),0 4px 8px -4px var(--v5-mm-ring);}
+.v5-mm-node.drop-into{background:var(--v5-mm-accent-soft);
+  box-shadow:inset 0 0 0 2px var(--v5-mm-accent);}
+
+/* ========= COL 3: DETAIL (Overview / Settings / Activity) ========= */
+.v5-mm-col-detail{background:var(--v5-mm-sunk);overflow:hidden;}
+.v5-mm-vt{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  padding:.65rem 1.4rem;border-bottom:1px solid var(--v5-mm-border);background:var(--v5-mm-panel);flex-shrink:0;}
+.v5-mm-vt-list{display:flex;padding:3px;border-radius:8px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border);}
+.v5-mm-vt-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border:none;border-radius:5px;
+  background:transparent;color:var(--v5-mm-text-muted);font-family:inherit;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .12s;}
+.v5-mm-vt-btn:hover{color:var(--v5-mm-text-sec);}
+.v5-mm-vt-btn.on{background:var(--v5-mm-panel);color:var(--v5-mm-text);box-shadow:0 1px 2px rgba(0,0,0,.05);}
+.dark .v5-mm-vt-btn.on{box-shadow:0 1px 3px rgba(0,0,0,.4);}
+.v5-mm-vt-btn svg{width:12px;height:12px;}
+.v5-mm-vt-btn .cnt{font-variant-numeric:tabular-nums;color:var(--v5-mm-text-muted);font-size:.6rem;font-weight:500;margin-left:.15rem;}
+.v5-mm-vt-btn.on .cnt{color:var(--v5-mm-accent);}
+
+/* 탭 뷰 전환 — fade + slide */
+.v5-mm-pane{display:none;}
+.v5-mm-pane.on{display:block;animation:v5-mm-paneIn .4s cubic-bezier(.16,1,.3,1);}
+@keyframes v5-mm-paneIn{
+  from{opacity:0;transform:translateY(10px);filter:blur(4px);}
+  to{opacity:1;transform:none;filter:none;}
+}
+/* Settings 섹션 stagger */
+.v5-mm-pane.on .v5-mm-sv-hero{animation:v5-mm-sectIn .45s cubic-bezier(.16,1,.3,1) .05s backwards;}
+.v5-mm-pane.on .v5-mm-sv-grid{animation:v5-mm-sectIn .45s cubic-bezier(.16,1,.3,1) backwards;}
+.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(1){animation-delay:.1s;}
+.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(2){animation-delay:.16s;}
+.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(3){animation-delay:.22s;}
+.v5-mm-pane.on .v5-mm-sv-grid:nth-of-type(4){animation-delay:.28s;}
+.v5-mm-pane.on .v5-mm-sv-ft{animation:v5-mm-sectIn .45s cubic-bezier(.16,1,.3,1) .35s backwards;}
+.v5-mm-pane.on .v5-mm-stats .v5-mm-stat{animation:v5-mm-sectIn .4s cubic-bezier(.16,1,.3,1) backwards;}
+.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(1){animation-delay:.08s;}
+.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(2){animation-delay:.14s;}
+.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(3){animation-delay:.20s;}
+.v5-mm-pane.on .v5-mm-stats .v5-mm-stat:nth-child(4){animation-delay:.26s;}
+.v5-mm-pane.on .v5-mm-act{animation:v5-mm-sectIn .4s cubic-bezier(.16,1,.3,1) backwards;}
+.v5-mm-pane.on .v5-mm-act:nth-child(1){animation-delay:.08s;}
+.v5-mm-pane.on .v5-mm-act:nth-child(2){animation-delay:.14s;}
+.v5-mm-pane.on .v5-mm-act:nth-child(3){animation-delay:.20s;}
+.v5-mm-pane.on .v5-mm-act:nth-child(4){animation-delay:.26s;}
+@keyframes v5-mm-sectIn{
+  from{opacity:0;transform:translateY(12px);}
+  to{opacity:1;transform:none;}
+}
+
+/* 탭 버튼 전환 */
+.v5-mm-vt-btn{transition:all .22s cubic-bezier(.16,1,.3,1);}
+.v5-mm-vt-btn.on{animation:v5-mm-tabPop .3s cubic-bezier(.34,1.56,.64,1);}
+@keyframes v5-mm-tabPop{
+  0%{transform:scale(.92);}
+  60%{transform:scale(1.04);}
+  100%{transform:scale(1);}
+}
+
+/* 스코프 카드 선택 */
+.v5-mm-scope.on{animation:v5-mm-scopePop .4s cubic-bezier(.34,1.56,.64,1);}
+@keyframes v5-mm-scopePop{
+  0%{transform:scale(.96);}
+  60%{transform:scale(1.02);}
+  100%{transform:scale(1);}
+}
+
+/* Toggle switch 부드러운 전환 */
+.v5-mm-tg .sw{transition:background .3s cubic-bezier(.4,0,.2,1);}
+.v5-mm-tg .sw::after{transition:left .3s cubic-bezier(.34,1.56,.64,1),transform .2s;}
+.v5-mm-tg:active .sw::after{transform:scale(1.08);}
+
+/* Input focus 전환 */
+.v5-mm-inp{transition:border-color .2s,box-shadow .2s,background .2s;}
+
+/* 드롭 인디케이터 pulse */
+.v5-mm-node.drop-before,.v5-mm-node.drop-after,.v5-mm-node.drop-into{
+  animation:v5-mm-dropGlow 1s ease-in-out infinite;
+}
+@keyframes v5-mm-dropGlow{
+  0%,100%{filter:brightness(1);}
+  50%{filter:brightness(1.1);}
+}
+
+/* shadcn AlertDialog 우리 style로 강화 — 글래스 + bounce in */
+[data-radix-popper-content-wrapper] [role="alertdialog"],
+[role="alertdialog"][data-state]{
+  animation:v5-mm-modalIn .35s cubic-bezier(.16,1,.3,1) !important;
+}
+[role="alertdialog"][data-state="closed"]{
+  animation:v5-mm-modalOut .2s cubic-bezier(.4,0,1,1) !important;
+}
+@keyframes v5-mm-modalIn{
+  0%{opacity:0;transform:translate(-50%,-50%) scale(.92);filter:blur(6px);}
+  60%{opacity:1;transform:translate(-50%,-50%) scale(1.02);filter:blur(0);}
+  100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
+}
+@keyframes v5-mm-modalOut{
+  0%{opacity:1;transform:translate(-50%,-50%) scale(1);}
+  100%{opacity:0;transform:translate(-50%,-50%) scale(.95);filter:blur(4px);}
+}
+
+/* Dialog overlay fade */
+[data-radix-focus-guard] ~ [data-radix-portal] [data-state="open"][class*="fixed"][class*="inset"]{
+  animation:v5-mm-overlayIn .3s ease-out !important;
+}
+@keyframes v5-mm-overlayIn{
+  from{opacity:0;backdrop-filter:blur(0);}
+  to{opacity:1;backdrop-filter:blur(6px);}
+}
+.v5-mm-pane-wrap{padding:clamp(.9rem,1.6vw,1.4rem) clamp(1rem,2vw,1.75rem) 2rem;
+  overflow-y:auto;height:100%;width:100%;}
+
+/* Settings */
+.v5-mm-sv-hero{padding-bottom:1.2rem;margin-bottom:.6rem;border-bottom:1px solid var(--v5-mm-border);}
+.v5-mm-sv-hero-top{display:flex;align-items:center;gap:.8rem;}
+.v5-mm-sv-hero-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
+  background:var(--v5-mm-accent);color:white;flex-shrink:0;box-shadow:0 2px 8px -2px rgba(108,92,231,.35);}
+.dark .v5-mm-sv-hero-ico{color:var(--v5-mm-bg);box-shadow:0 2px 10px -2px rgba(162,155,254,.35);}
+.v5-mm-sv-hero-ico svg{width:20px;height:20px;}
+.v5-mm-sv-hero-info{flex:1;min-width:0;}
+.v5-mm-sv-hero-path{font-size:.7rem;color:var(--v5-mm-text-muted);margin-bottom:.2rem;}
+.v5-mm-sv-hero-path b{color:var(--v5-mm-text-sec);font-weight:600;}
+.v5-mm-sv-hero-info h2{margin:0;font-size:1.4rem;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:.55rem;color:var(--v5-mm-text);}
+.v5-mm-sv-hero-meta{margin-top:.6rem;font-size:.66rem;color:var(--v5-mm-text-muted);font-family:'JetBrains Mono',monospace;
+  display:flex;gap:1.2rem;flex-wrap:wrap;}
+.v5-mm-sv-hero-meta b{color:var(--v5-mm-text-sec);font-weight:600;}
+
+.v5-mm-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .48rem;border-radius:5px;
+  font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
+  background:var(--v5-mm-sunk);color:var(--v5-mm-text-muted);border:1px solid var(--v5-mm-border);
+  font-family:'JetBrains Mono',monospace;}
+.v5-mm-chip.on{color:var(--v5-mm-green);background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.22);}
+.dark .v5-mm-chip.on{background:rgba(85,239,196,.08);border-color:rgba(85,239,196,.22);}
+.v5-mm-chip.scope{color:var(--v5-cyan);background:rgba(0,206,201,.08);border-color:rgba(0,206,201,.24);}
+.dark .v5-mm-chip.scope{background:rgba(85,239,196,.06);border-color:rgba(85,239,196,.22);}
+
+.v5-mm-sv-grid{display:grid;grid-template-columns:clamp(180px,18vw,260px) minmax(0,1fr);
+  gap:clamp(1rem,2vw,2rem);padding:clamp(1rem,1.6vw,1.5rem) 0;
+  border-bottom:1px solid var(--v5-mm-border-2);}
+.v5-mm-sv-grid:last-of-type{border-bottom:none;}
+.v5-mm-sv-side h4{margin:0 0 .35rem;font-size:.9rem;font-weight:700;letter-spacing:-.015em;color:var(--v5-mm-text);}
+.v5-mm-sv-side p{margin:0;font-size:.7rem;color:var(--v5-mm-text-muted);line-height:1.55;}
+.v5-mm-sv-fields{display:flex;flex-direction:column;gap:.85rem;max-width:720px;}
+.v5-mm-sv-row{display:flex;flex-direction:column;gap:.35rem;}
+.v5-mm-sv-row label{font-size:.68rem;color:var(--v5-mm-text-sec);font-weight:600;letter-spacing:-.005em;}
+.v5-mm-sv-row label .req{color:var(--v5-mm-red);}
+.v5-mm-sv-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
+@media(max-width:640px){.v5-mm-sv-row-2{grid-template-columns:1fr;}}
+.v5-mm-sv-row .help{font-size:.64rem;color:var(--v5-mm-text-muted);line-height:1.5;}
+
+.v5-mm-inp{width:100%;height:36px;padding:0 .85rem;border:1px solid var(--v5-mm-border);border-radius:8px;
+  background:var(--v5-mm-panel);color:var(--v5-mm-text);font-size:.78rem;font-family:inherit;outline:none;transition:all .15s;}
+.dark .v5-mm-inp{background:var(--v5-mm-sunk);}
+.v5-mm-inp:focus{border-color:var(--v5-mm-accent);box-shadow:0 0 0 3px rgba(108,92,231,.14);}
+.dark .v5-mm-inp:focus{box-shadow:0 0 0 3px rgba(162,155,254,.2);}
+.v5-mm-inp[readonly]{background:var(--v5-mm-sunk);color:var(--v5-mm-text-muted);}
+textarea.v5-mm-inp{height:auto;min-height:72px;padding:.55rem .85rem;resize:vertical;line-height:1.55;}
+select.v5-mm-inp{padding-right:2rem;appearance:none;-webkit-appearance:none;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239998ad' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
+  background-repeat:no-repeat;background-position:right .65rem center;background-size:12px;}
+
+.v5-mm-seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--v5-mm-sunk);border:1px solid var(--v5-mm-border);width:fit-content;}
+.v5-mm-seg button{padding:.45rem .9rem;border:none;border-radius:6px;background:transparent;color:var(--v5-mm-text-muted);
+  font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.35rem;}
+.v5-mm-seg button.on{background:var(--v5-mm-panel);color:var(--v5-mm-text);box-shadow:0 1px 2px rgba(0,0,0,.05);}
+.v5-mm-seg button.on svg{color:var(--v5-mm-accent);}
+.v5-mm-seg button svg{width:13px;height:13px;}
+
+.v5-mm-tg{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;height:36px;padding:0 .85rem;
+  border:1px solid var(--v5-mm-border);border-radius:8px;background:var(--v5-mm-panel);}
+.dark .v5-mm-tg{background:var(--v5-mm-sunk);}
+.v5-mm-tg .sw{width:38px;height:22px;border-radius:999px;background:var(--v5-mm-faint);position:relative;transition:background .2s;
+  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
+.v5-mm-tg .sw::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;
+  transition:left .22s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.2);}
+.v5-mm-tg.on .sw{background:var(--v5-mm-accent);}
+.v5-mm-tg.on .sw::after{left:18px;}
+.v5-mm-tg .lbl{font-size:.76rem;color:var(--v5-mm-text-sec);font-weight:500;}
+.v5-mm-tg.on .lbl{color:var(--v5-mm-text);font-weight:600;}
+
+.v5-mm-sv-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  padding:1.2rem 0 .5rem;margin-top:1rem;border-top:1px solid var(--v5-mm-border);}
+.v5-mm-unsaved{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--v5-mm-amber);font-weight:600;margin-right:.35rem;}
+.v5-mm-unsaved .d{width:6px;height:6px;border-radius:50%;background:var(--v5-mm-amber);animation:v5-mm-pulse 1.6s ease-in-out infinite;}
+@keyframes v5-mm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
+
+.v5-mm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
+  height:34px;padding:0 1rem;border-radius:8px;border:1px solid var(--v5-mm-border);
+  background:var(--v5-mm-panel);color:var(--v5-mm-text-sec);font-family:inherit;font-size:.74rem;font-weight:600;
+  cursor:pointer;transition:all .15s;outline:none;}
+.v5-mm-btn:hover{border-color:var(--v5-mm-text-muted);color:var(--v5-mm-text);}
+.v5-mm-btn svg{width:13px;height:13px;}
+.v5-mm-btn.primary{background:var(--v5-mm-accent);color:white;border-color:var(--v5-mm-accent);
+  box-shadow:0 2px 6px -1px rgba(108,92,231,.35),inset 0 1px 0 rgba(255,255,255,.22);}
+.v5-mm-btn.primary:hover{background:#5c4ed4;border-color:#5c4ed4;transform:translateY(-1px);
+  box-shadow:0 4px 12px -2px rgba(108,92,231,.4);}
+.dark .v5-mm-btn.primary{color:var(--v5-mm-bg);}
+.dark .v5-mm-btn.primary:hover{background:#b8b2ff;border-color:#b8b2ff;color:var(--v5-mm-bg);}
+.v5-mm-btn.danger{color:var(--v5-mm-red);}
+.v5-mm-btn.danger:hover{border-color:var(--v5-mm-red);background:rgba(255,71,87,.05);}
+.v5-mm-btn.sm{height:28px;padding:0 .7rem;font-size:.66rem;}
+
+/* Overview stats */
+.v5-mm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.2rem;}
+.v5-mm-stat{padding:.7rem .8rem;border-radius:9px;background:var(--v5-mm-panel);border:1px solid var(--v5-mm-border);}
+.v5-mm-stat-lbl{font-size:.52rem;font-weight:800;color:var(--v5-mm-text-muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem;}
+.v5-mm-stat-val{display:flex;align-items:baseline;gap:.35rem;}
+.v5-mm-stat-val .n{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--v5-mm-text);font-variant-numeric:tabular-nums;}
+.v5-mm-stat-val .n.ok{color:var(--v5-mm-green);}
+.v5-mm-stat-val .n.off{color:var(--v5-mm-text-muted);}
+.v5-mm-stat-val .u{font-size:.58rem;color:var(--v5-mm-text-muted);font-weight:500;}
+
+/* Activity list */
+.v5-mm-act-list{background:var(--v5-mm-panel);border:1px solid var(--v5-mm-border);border-radius:10px;overflow:hidden;}
+.v5-mm-act{display:flex;align-items:center;gap:.65rem;padding:.7rem .9rem;border-bottom:1px solid var(--v5-mm-border-2);font-size:.72rem;}
+.v5-mm-act:last-child{border-bottom:none;}
+.v5-mm-act-ico{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
+  background:var(--v5-mm-sunk);color:var(--v5-mm-text-sec);border:1px solid var(--v5-mm-border-2);flex-shrink:0;}
+.v5-mm-act-ico svg{width:12px;height:12px;}
+.v5-mm-act-ico.edit{color:var(--v5-mm-accent);background:rgba(108,92,231,.08);border-color:rgba(108,92,231,.18);}
+.v5-mm-act-ico.add{color:var(--v5-mm-green);background:rgba(0,184,148,.08);border-color:rgba(0,184,148,.2);}
+.v5-mm-act-ico.del{color:var(--v5-mm-red);background:rgba(255,71,87,.08);border-color:rgba(255,71,87,.2);}
+.v5-mm-act-body{flex:1;min-width:0;}
+.v5-mm-act-title{color:var(--v5-mm-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.v5-mm-act-title b{font-weight:600;}
+.v5-mm-act-meta{font-size:.58rem;color:var(--v5-mm-text-muted);margin-top:.1rem;font-family:'JetBrains Mono',monospace;}
+.v5-mm-act-time{font-size:.58rem;color:var(--v5-mm-text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;}
+
+/* Empty state */
+.v5-mm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
+  padding:4rem 1rem;color:var(--v5-mm-text-muted);font-size:.75rem;text-align:center;}
+.v5-mm-empty svg{width:40px;height:40px;opacity:.35;}
+
+/* ==== Responsive breakpoints ==== */
+@media(max-width:1280px){
+  .v5-mm-sv-grid{grid-template-columns:minmax(0,1fr);gap:.9rem;}
+  .v5-mm-sv-side{padding-bottom:.15rem;}
+  .v5-mm-sv-side h4{font-size:.82rem;}
+  .v5-mm-sv-side p{font-size:.66rem;}
+}
+@media(max-width:1100px){
+  .v5-mm{grid-template-columns:clamp(200px,18vw,260px) clamp(280px,26vw,360px) minmax(0,1fr);}
+  .v5-mm-stats{grid-template-columns:repeat(2,1fr);}
+  .v5-mm-sv-hero-info h2{font-size:1.2rem;}
+}
+@media(max-width:900px){
+  .v5-mm{grid-template-columns:minmax(220px,30vw) minmax(0,1fr);}
+  .v5-mm-col-scope{display:none;}
+  .v5-mm-col-scope.mobile-on{display:flex;}
+}
+@media(max-width:720px){
+  .v5-mm{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;}
+  .v5-mm-col{max-height:none;border-right:none;border-bottom:1px solid var(--v5-mm-border);}
+  .v5-mm-col-scope{display:flex;}
+  .v5-mm-col-scope .v5-mm-scope-list{flex-direction:row;padding:.5rem .6rem;overflow-x:auto;}
+  .v5-mm-col-scope .v5-mm-scope{min-width:160px;flex-shrink:0;}
+  .v5-mm-col-tree{max-height:40vh;}
+  .v5-mm-col-detail{border-bottom:none;}
+  .v5-mm-stats{grid-template-columns:1fr 1fr;}
+  .v5-mm-sv-hero-top{flex-direction:column;align-items:flex-start;}
+  .v5-mm-sv-hero-info h2{font-size:1.1rem;flex-wrap:wrap;}
+  .v5-mm-vt{padding:.5rem .75rem;}
+  .v5-mm-sv-ft{flex-direction:column;align-items:stretch;gap:.5rem;}
+  .v5-mm-sv-ft > div{justify-content:space-between;}
+}
diff --git a/notes/gbpark/2026-04-08-invyone-dev-session-log.md b/notes/gbpark/2026-04-08-invyone-dev-session-log.md
deleted file mode 100644
index 1b10ec8a..00000000
--- a/notes/gbpark/2026-04-08-invyone-dev-session-log.md
+++ /dev/null
@@ -1,148 +0,0 @@
-# INVYONE 개발 세션 기록 (2026-04-08)
-
-## 이 세션에서 한 것
-
-### 1. 대시보드 mockup 제어 모드 완성
-- **위치**: `notes/gbpark/2026-04-08-invyone-mockup/`
-- 16종 제어 노드 (조건분기/상태변경/타이머/승인/계산/외부호출 등)
-- 팔레트 드래그앤드롭 → 캔버스 배치
-- 포트 연결 (output→input 드래그)
-- 노드 설정 팝오버
-- 데모 시나리오 (수주 자동 실패 → 재고 연쇄)
-- 파일: `js/07-rule-builder.js`, `css/08-rule-builder.css`
-
-### 2. 개발자 모드 (템플릿 빌더) 프로토타입
-- index.html 어드민 모드 → "새 템플릿" → 3패널 빌더
-- 테이블 선택 (22종) → 프리셋 → ⚡ 자동 생성
-- 4종 프리셋 (기본형/분할형/탭형/M-D형)
-- 블록 클릭 → 속성 패널 (데이터 바인딩, 필드 on/off, 옵션)
-- 데이터 연결 (블록 간 매핑, 필드 매핑 편집 모달)
-- 등록 팝업 오버레이 (같은 캔버스에서 팝업 편집)
-- 팔레트 드래그앤드롭
-- 파일: `js/08-admin-builder.js`, developer.html (standalone 참고용)
-
-### 3. PM 원본 + test-vex DB 분석
-- PM 원본 (`~/다운로드/INVYONE개발/`) 분석: 사용자/개발자 모드, 70종 컴포넌트, 21종 템플릿
-- vexplor 본서버 DB 구조 분석:
-  - `screen_definitions`: 화면 정의 (screen_id, table_name, company_code)
-  - `screen_layouts_v3`: 레이아웃 JSON (components 배열, 12컬럼 그리드)
-  - `table_type_columns`: **핵심 메타데이터** (회사별 컬럼 타입/라벨/표시 설정)
-  - `table_column_category_values`: 드롭다운 선택지
-  - `table_labels`: 테이블 한글명
-  - `table_relationships`: 테이블 간 관계
-  - `node_flows`: **제어 플로우** (ReactFlow 노드 64개, 10종 노드 타입)
-  - `button_action_standards`: 12종 액션 (save/edit/delete/modal/control 등)
-  - 25종 버튼 액션 타입 발견 (layout_data 내 action 필드)
-
----
-
-## 핵심 설계 결정사항
-
-### DB 구조
-- **공유 테이블 유지** (모든 회사가 같은 테이블, company_code로 분리)
-- DB 컬럼은 전부 **VARCHAR** — 실제 타입은 `table_type_columns.input_type`에서 정의
-- input_type 15종: text(30136), date(4722), number(1350), category(987), entity(816), numbering(244), code(192), select(160), textarea(111), image(75), checkbox(60), file(21), radio(13), datetime(2), boolean(1)
-
-### 제어 모드 = 회사별 자동화
-- 제어 ≠ 기본 CRUD. CRUD(등록/수정/삭제/결재)는 **템플릿에 내장**
-- 제어 = **기본 액션 이후 발생하는 회사별 자동화 체인**
-- 예: "수주 결재 완료 → 발주 자동 생성" (모든 회사가 이렇게 하는 건 아님)
-- test-vex의 `node_flows`와 같은 개념, UI를 노드 에디터로 시각화한 것
-
-### 템플릿 = 컴포넌트 덩어리 (일체형)
-- test-vex: 모달 = 별도 화면 → 버튼으로 연결 (직렬적, 조립식)
-- invyone: 템플릿 = 메인화면 + 등록팝업 + 수정팝업 **한 덩어리**
-- 등록/수정은 **팝업** (모달은 중요한 것만 — 결재 등)
-- 개발자 모드에서 같은 캔버스에 팝업이 오버레이로 뜨고 편집 가능
-
----
-
-## 시행착오 / 깨달은 것
-
-### ❌ 프리셋 4종을 같은 레벨로 취급
-- 기본형/분할형/탭형은 **메인 화면** 프리셋
-- M-D형은 **등록 팝업** 프리셋
-- 이걸 섞어서 만들어서 구조가 꼬였음
-
-### ❌ 버튼바를 별도 블록으로 만듦
-- 등록/삭제/엑셀 버튼은 **메인 화면 툴바에 내장**되는 거지 별도 컴포넌트가 아님
-
-### ❌ 캔버스에 데이터 연결선 표시
-- 화면 빌더에서 SVG 연결선은 안 어울림 (플로우 에디터가 아님)
-- 데이터 연결은 **속성 패널에서만** 관리하는 게 깔끔
-
-### ❌ 코스믹 디자인을 개발자 도구에 적용
-- v5 Cosmic Glassmorphism은 사용자 대시보드용
-- 개발자 모드는 **IDE 스타일** (중성 다크 그레이, 글로우 없음)
-- 다크/라이트 둘 다 가독성 확보 필수
-
-### ❌ 자동생성만으로 SI 커버 가능하다고 생각
-- 자동생성은 **빠른 시작** (경로 A)
-- SI 프로젝트는 **수동 구성** 필요 (경로 B)
-- 둘 다 같은 빌더에서 지원해야 함
-
-### ✅ table_type_columns 기반 자동생성은 가능하고 가치 있음
-- 테이블 선택만으로 필드 타입/라벨/순서/표시 다 알 수 있음
-- test-vex에서 7단계 수동이던 것 → 2단계(테이블 선택 → 커스텀)로 줄일 수 있음
-- 단, SI에서는 시작점일 뿐 최종 결과물은 아님
-
-### ✅ 팝업 오버레이 편집은 좋은 방향
-- test-vex: 별도 화면 만들고 연결
-- invyone: 같은 캔버스에서 팝업이 뜨고 바로 편집
-- Figma처럼 실제 사용자가 보는 모습 그대로 편집
-
----
-
-## 다음 세션 TODO
-
-### 우선순위 1: 템플릿 빌더 구조 재정리
-```
-[올바른 구조]
-템플릿 = 메인 화면 + 등록 팝업 + 수정 팝업
-
-메인 화면:
-├─ 툴바 (제목 + 액션 버튼 내장)
-├─ 검색/필터
-├─ 데이터 목록
-└─ 프리셋: 기본형 / 분할형 / 탭형
-
-등록/수정 팝업:
-├─ 폼 레이아웃
-└─ 프리셋: 기본 폼 / M-D형
-
-두 경로:
-├─ 경로 A: 자동 생성 (테이블 선택 → 한 방)
-└─ 경로 B: 수동 구성 (빈 캔버스 → 직접 배치)
-```
-
-### 우선순위 2: 기존 코드 정리
-- 08-admin-builder.js 구조 재정리 (프리셋 레벨 분리)
-- 버튼바 블록 제거 → 툴바 내장
-- M-D형을 팝업 프리셋으로 이동
-- 캔버스 연결선 완전 제거 (속성 패널에서만)
-
-### 우선순위 3: 디자인 개선
-- 다크모드 가독성 (현재 OK 수준, 더 개선 가능)
-- 라이트모드 패널 구분 (개선됨, 추가 조정 필요)
-- 전체적으로 IDE 느낌 강화
-
-### 장기: SPEC v0.2 갱신
-- mockup 기반으로 M1 확정
-- 제어 모드 스펙
-- 템플릿 빌더 스펙
-- 메타데이터 기반 자동생성 스펙
-
----
-
-## 참고 파일 위치
-
-| 파일 | 설명 |
-|---|---|
-| `notes/gbpark/2026-04-08-invyone-mockup/index.html` | 대시보드 + 제어 모드 + 어드민 빌더 |
-| `notes/gbpark/2026-04-08-invyone-mockup/developer.html` | 개발자 모드 standalone (참고용) |
-| `notes/gbpark/2026-04-08-invyone-mockup/js/06-control-mode.js` | 제어 모드 (카드 흐름 보기) |
-| `notes/gbpark/2026-04-08-invyone-mockup/js/07-rule-builder.js` | 제어 노드 빌더 (16종) |
-| `notes/gbpark/2026-04-08-invyone-mockup/js/08-admin-builder.js` | 어드민 빌더 (자동생성+속성패널) |
-| `notes/gbpark/2026-04-08-invyone-mockup/css/08-rule-builder.css` | 제어 노드 스타일 |
-| `notes/gbpark/2026-04-08-invyone-mockup/css/09-developer.css` | 개발자 모드 스타일 (standalone용) |
-| `~/다운로드/INVYONE개발/` | PM 원본 mockup |
diff --git a/notes/gbpark/2026-04-09-builder-session-log.md b/notes/gbpark/2026-04-09-builder-session-log.md
deleted file mode 100644
index a18e2176..00000000
--- a/notes/gbpark/2026-04-09-builder-session-log.md
+++ /dev/null
@@ -1,179 +0,0 @@
-# INVYONE 빌더 세션 로그 (2026-04-08~09)
-
-> 이전 세션 로그: `2026-04-08-invyone-dev-session-log.md` (대시보드 mockup + 제어 모드 + 첫 빌더 프로토타입)
-> 이번 세션: 로우코드 정의 토론 → 규격 재설계 → 빌더 구조 전면 개편
-
----
-
-## 주요 결정사항 (시간순)
-
-### 1. 로우코드 정의 토론
-
-"INVYONE이 대체 뭐냐"에 대한 답을 정리:
-- 로우코드 레벨 정의: L0(노코드) ~ L3(프레임워크)
-- INVYONE 위치: L0~L1 (중소) + L1~L2 (중견+)
-- 타겟 사용자: 중소기업 업무담당자 (코드 모름) + 중견 이상 IT팀 (빌더 사용)
-- 결론: **개발자 빌더 먼저, 사용자 화면 나중에**
-
-### 2. PM 원본 분석
-
-`~/다운로드/INVYONE개발/` 폴더의 HTML 67개 파일 분석:
-- 총 110,515줄, 평균 1,647줄/파일
-- 구성: JS 67% / CSS 19% / HTML 14%
-- 패턴: 55/66 CRUD 버튼, 54/66 검색 섹션, 51/66 테이블/그리드
-- 결론: 대부분의 화면이 검색+테이블+CRUD 조합 → 빌더로 자동 생성 가능
-
-### 3. vex DB 분석
-
-test-vex (bexplorer-prod) DB 핵심 테이블:
-- `screen_definitions`: 화면 정의 (screen_id, table_name, company_code)
-- `screen_layouts_v3`: 레이아웃 JSON (components 배열, 12컬럼 그리드)
-- `table_type_columns`: 핵심 메타데이터 (회사별 컬럼 타입/라벨/표시 설정, input_type 15종)
-- `table_column_category_values`: 드롭다운 선택지
-- `table_relationships`: 테이블 간 관계
-- `node_flows`: 제어 플로우 (ReactFlow 노드 64개, 10종 노드 타입)
-- `button_action_standards`: 12종 액션
-
-발견: DB 컬럼이 전부 VARCHAR, 실제 타입은 table_type_columns.input_type에서 정의
-
-### 4. vex 방식 문제점 파악 → 개선 방향
-
-vex 문제:
-- ColumnConfig 354줄 + FilterConfig + FormField 전부 다른 규격
-- 컴포넌트 간 데이터 전달 시 변환 필요 → 에러 다발
-- 목록/등록/수정 = 3개 화면 따로 만들어 연결
-
-개선 방향:
-- 추상화 레벨 올리기 (컴포넌트 레벨 → 필드 레벨)
-- "사용자는 필드를 배치하는 게 아니라, FieldConfig를 소비하는 컴포넌트를 배치한다"
-
-### 5. 컴포넌트 규격 신규 설계
-
-FieldConfig + DataPort + Template 신규 규격 확정:
-- **FieldConfig** (~30줄) — 테이블/폼/검색 전부 하나의 규격
-- **DataPort** — output→input 표준 통신 (row/rows/value/params)
-- **Template** = 3뷰 내장 (목록+등록+수정, 같은 fields 공유)
-- vex 규격 호환 고려하지 않기로 결정 (신규 설계)
-
-산출물: `notes/gbpark/2026-04-08-invyone-component-spec.md` (584줄)
-
-### 6. 팔레트 정리: 26개 → 8개
-
-초기 팔레트 (11종):
-table, form, search, button, button-bar, tabs, split-panel, title, stats, divider, pagination
-
-정리 과정:
-- 레이아웃 (tabs, split-panel) → 프리셋이 처리 (내부 모델 유지, 팔레트에서 숨김)
-- 필드 → FieldConfig.type (컴포넌트가 아님)
-- 개별 버튼 종류 → ActionType (버튼 컴포넌트의 속성)
-- button-bar → 버튼으로 통합
-- pagination → 테이블 내장
-- 마스터-디테일 → 테이블+폼 조합 + DataPort 연결
-
-최종 8종: **데이터 테이블, 검색 필터, 입력 폼, 버튼, 통계 카드, 차트, 텍스트/제목, 구분선**
-
-### 7. 렌더링 계약 / computed 파서 / required 검증
-
-- 렌더링 계약: FieldType별 테이블/폼/검색 렌더링 매핑 테이블 명시 (암묵적 규칙 금지)
-- computed: eval/new Function 절대 금지 → 스택 기반 수식 파서만 허용
-- required: 0, false는 유효한 값 (empty = null/undefined/'' 만)
-
----
-
-## 구현한 파일들
-
-### mockup 폴더 (`notes/gbpark/2026-04-08-invyone-mockup/`)
-
-총 23파일, 12,142줄:
-
-| 파일 | 줄수 | 설명 |
-|---|---|---|
-| **HTML** | | |
-| `index.html` | 1,370 | 대시보드 + 제어 모드 + 어드민 빌더 진입점 |
-| `builder-v2.html` | 1,032 | 템플릿 빌더 v2 standalone (3뷰, 프리셋, 필드 on/off) |
-| `developer.html` | 701 | 개발자 모드 standalone 참고용 |
-| `renderer-proto.html` | 1,455 | FieldConfig 렌더러 프로토타입 |
-| `spec-viewer.html` | 2,146 | 컴포넌트 규격 인터랙티브 뷰어 |
-| **CSS** (css/) | | |
-| `01-tokens.css` | 62 | v5 토큰 + cosmic 배경 |
-| `02-shell.css` | 189 | 헤더/탭/사이드바 |
-| `03-canvas.css` | 145 | 캔버스/카드/드래그/리사이즈 |
-| `04-settings.css` | 121 | 카드 설정 패널 |
-| `05-widgets.css` | 122 | 위젯 스타일 |
-| `06-modals.css` | 90 | 라이브러리 모달 |
-| `07-control-mode.css` | 189 | 제어 모드 |
-| `08-rule-builder.css` | 184 | 제어 노드 빌더 |
-| `09-developer.css` | 304 | 개발자 모드 |
-| **JS** (js/) | | |
-| `01-shell.js` | 123 | 테마/모드/사이드바 |
-| `02-canvas.js` | 141 | 편집모드/드래그/리사이즈 |
-| `03-settings.js` | 94 | 설정 패널 |
-| `04-templates.js` | 173 | 위젯 렌더러/카드 빌드 |
-| `05-state.js` | 249 | 대시보드 상태/저장/복원 |
-| `06-control-mode.js` | 996 | 제어 모드 (카드 흐름, 트리 확산) |
-| `07-rule-builder.js` | 752 | 제어 노드 빌더 (16종 노드) |
-| `08-admin-builder.js` | 1,481 | 어드민 빌더 (최대 파일) |
-| `99-init.js` | 23 | init IIFE |
-| `README.md` | 131 | mockup 가이드 |
-
-### 스펙 문서
-
-| 파일 | 설명 |
-|---|---|
-| `2026-04-08-invyone-component-spec.md` | 컴포넌트 규격 v1.0 (FieldConfig, DataPort, Template) |
-| `2026-04-08-lowcode-platform-spec.md` | 로우코드 플랫폼 SPEC v1.0 (역할, 레벨, 67개 화면 분석) |
-| `2026-04-09-invyone-architecture.md` | 아키텍처 결정 문서 (본 세션 최종 정리) |
-
----
-
-## 시행착오
-
-### 블록 배경 투명으로 만들었다가 복원
-빌더 블록의 배경을 투명하게 만들어 캔버스가 비쳐 보이게 했으나, 가독성이 심각하게 떨어져서 원래 불투명 배경으로 복원.
-
-### vex 호환 고려했다가 폐기
-처음에는 vex의 components 배열 형식을 출력하는 방향으로 builder-v2를 만들었음. 그러나 vex의 ColumnConfig(354줄)과 분리된 규격들이 근본적 문제이므로, 호환을 포기하고 FieldConfig 단일 규격으로 신규 설계.
-
-### 자동생성 집착 → 기능 구현 우선으로 전환
-테이블 선택만으로 화면이 뿅 나오는 "자동생성"에 집착했으나, 실제로는 SI 프로젝트에서 커스텀이 필수. 자동생성은 시작점일 뿐이고, 빌더의 수동 구성 기능이 더 중요하다는 결론.
-
-### 팔레트에 필드/레이아웃/개별버튼 넣었다가 제거
-- 필드를 팔레트에 넣으면 "필드를 드래그해서 배치"하는 UX가 되는데, 이건 FieldConfig 소비 모델과 맞지 않음
-- 레이아웃(tabs, split-panel)은 프리셋이 처리하는 것이 맞음 (개발자가 직접 배치할 필요 없음)
-- 개별 버튼 종류(저장/삭제/엑셀 등)를 팔레트에 넣으면 팔레트가 비대해짐 → ActionType으로 통합
-
-### 코스믹 디자인을 개발자 도구에 적용
-v5 Cosmic Glassmorphism은 사용자 대시보드용. 개발자 모드는 IDE 스타일 (중성 다크 그레이, 글로우 없음)이 맞다.
-
----
-
-## 다음 할 일 (TODO)
-
-### 빌더 UX 개선
-- [ ] 테이블 설정 모달 UX — 더블클릭으로 열 것인지, 아이콘 클릭인지 결정 필요
-- [ ] 블록 더블클릭 → 설정 모달 열기 (현재는 클릭→속성 패널만)
-- [ ] 등록/수정 팝업 뷰 편집 개선 — 현재 오버레이 기본만 있음
-- [ ] 반응형 미리보기 — 모바일/태블릿 뷰
-
-### React 이식
-- [ ] React 이식 시작 조건 정의 — mockup 어디까지 완성하면 이식 시작할 것인가
-- [ ] FieldConfig 타입스크립트 정의 파일 작성
-- [ ] 렌더러 프로토타입 → React 컴포넌트로 변환
-- [ ] DataPort 이벤트 버스 구현
-
-### Phase 2 준비
-- [ ] ValidationRule 배열 설계
-- [ ] 필드 간 연동 규칙
-- [ ] 조건부 표시/숨김
-
----
-
-## 참고 파일 위치
-
-| 파일 | 설명 |
-|---|---|
-| `notes/gbpark/2026-04-08-invyone-mockup/` | mockup 전체 폴더 |
-| `notes/gbpark/2026-04-08-invyone-component-spec.md` | 컴포넌트 규격 |
-| `notes/gbpark/2026-04-08-lowcode-platform-spec.md` | 로우코드 플랫폼 SPEC |
-| `notes/gbpark/2026-04-09-invyone-architecture.md` | 아키텍처 결정 문서 |
-| `notes/gbpark/2026-04-08-invyone-dev-session-log.md` | 이전 세션 로그 |
diff --git a/notes/gbpark/2026-04-10-card-engine-phase1-log.md b/notes/gbpark/2026-04-10-card-engine-phase1-log.md
deleted file mode 100644
index 24b50cfe..00000000
--- a/notes/gbpark/2026-04-10-card-engine-phase1-log.md
+++ /dev/null
@@ -1,323 +0,0 @@
-# INVYONE 카드 엔진 Phase 1 — 구현 로그
-
-**작업일**: 2026-04-10
-**작업자**: gbpark + Claude
-**기반 스펙**: `notes/gbpark/2026-04-10-card-engine-final-spec.md`
-**이전 로그**: `notes/gbpark/2026-04-10-template-redesign-phase1-log.md` (OBSOLETE — 12-grid 모델)
-
----
-
-## 0. 요약
-
-스펙 §6 의 Phase 1 (토대 정리 + 핵심 컴포넌트 마이그레이션) 을 7단계로 나눠 진행.
-
-| Step | 제목 | 상태 |
-|---|---|---|
-| 1 | 타입 추가 (FreePosition, TemplateComponent, TemplateViewConfig, Card, Dashboard…) | ✅ |
-| 2 | template-builder 새 빌더 작성 (3뷰 + toTemplate/fromTemplate) | ✅ |
-| 3 | admin/builder/page.tsx 진입점 전환 | ✅ |
-| 4 | components/builder/* + ScreenDesigner_new.tsx 완전 삭제 | ✅ |
-| 5 | 레거시 타입 @deprecated 표기 (완전 제거는 Phase 2) | ✅ |
-| 6 | v2-* 우선순위 1 컴포넌트 마이그레이션 (완전 2 + 경량 7) | ✅ |
-| 7 | PoC 시각 검증 페이지 | ✅ (코드 + 브라우저 검증 완료 2026-04-11) |
-| 8 | 세션 후반 버그 픽스 (검증 중 발견) | ✅ (2026-04-11) |
-
-**tsc 결과**: 내 변경 영역 기준 에러 0. 전체 에러 카운트는 3423 → 3381 로 감소(삭제된 폐기 파일의 기존 에러가 사라짐).
-
----
-
-## 1. 수정·생성 파일
-
-### 타입
-- **수정** `frontend/types/invyone-component.ts`
-  - §7 추가: `FreePosition`, `ViewTrigger`, `TemplateComponent`, `TemplateViewConfig`, `TemplateViews`, `DataPortDef`, `Card`, `CardConnection`, `Dashboard`
-  - 레거시 타입 전부 `@deprecated` 표기: `GridPosition`, `AbsolutePosition`, `ComponentPosition`, `ResponsiveGridOverride`, `isGridPosition`, `isAbsolutePosition`, `TemplateKind`, `DEFAULT_COMPONENT_LAYOUTS`, `CANVAS_KEYWORDS`
-  - `Template.kind` 를 `kind?: TemplateKind` 로 optional + deprecated 변경
-
-### 빌더 (신규)
-- **신규** `frontend/components/template-builder/TemplateBuilder.tsx` (~550줄)
-  - 자유배치 캔버스 + 드래그/리사이즈 + 히스토리 + 격자 옵션 + 3뷰 토글 + 팔레트 + 속성/격자/메타 사이드 패널
-  - v2-* 렌더링은 placeholder (Phase 2 에서 실제 컴포넌트 연결)
-  - localStorage 기반 임시 저장/복원
-  - 단축키: Delete, Ctrl+Z/Y, Ctrl+S
-- **신규** `frontend/components/template-builder/store/templateBuilderStore.ts`
-  - Zustand, `toTemplate` / `fromTemplate` / `undo` / `redo` / `commit` / viewTrigger 자동 감지
-  - `BuilderView = 'list' | 'create' | 'edit'`
-
-### 빌더 진입점 전환
-- **수정** `frontend/app/(main)/admin/builder/page.tsx`
-  - `BuilderLayout` (12-grid) → `TemplateBuilder` import 교체
-
-### 폐기 삭제
-- **삭제** `frontend/components/builder/` 전체
-  - BuilderLayout/Canvas/Block/Palette/Props/Toolbar + hooks(useBuilderState, useBlockDrag, gridMetrics) + props/*
-- **삭제** `frontend/components/screen/ScreenDesigner_new.tsx` (dead code, 어디서도 import 되지 않았음)
-
-### v2-* 마이그레이션 — 완전 (2개)
-- **신규** `frontend/lib/registry/components/v2-table-list/TableListContainerWrapper.tsx`
-  - ResizeObserver 로 카드 폭 측정 → 600px 미만이면 `config.displayMode` 를 `"card"` 로 런타임 override
-  - 기존 `TableListComponent` 내부는 0줄 수정
-- **수정** `frontend/lib/registry/components/v2-table-list/index.ts`
-  - `component: TableListWrapper` → `component: TableListContainerWrapper`
-- **신규** `frontend/lib/registry/components/v2-table-search-widget/TableSearchContainerWrapper.tsx`
-  - 래퍼 div 에 `.v2-tsw-responsive-root` 클래스 부여
-- **신규** `frontend/lib/registry/components/v2-table-search-widget/table-search-widget-responsive.css`
-  - `container-type: inline-size` + `@container v2-tsw (max-width: 599px)` 에서 flex-col 강제
-- **수정** `frontend/lib/registry/components/v2-table-search-widget/index.tsx`
-  - `component: TableSearchWidget` → `component: TableSearchContainerWrapper`
-
-### v2-* 마이그레이션 — 경량 (7개)
-- **신규** `frontend/lib/registry/hoc/withContainerQuery.tsx`
-  - 간단한 HOC: `<div style={{ containerType: 'inline-size', containerName, width: '100%', height: '100%' }}>` 로 감싸기
-- **수정** 각 컴포넌트 `index.ts` 에서 `component: Wrapper` → `component: withContainerQuery(Wrapper, "<id>")`:
-  - v2-button-primary
-  - v2-aggregation-widget
-  - v2-card-display
-  - v2-input
-  - v2-select
-  - v2-date
-  - v2-text-display
-
-### PoC 검증
-- **신규** `frontend/app/(main)/test-card-responsive/page.tsx`
-  - 카드 폭 슬라이더 (240 ~ 1400px)
-  - 수주관리 화면 구성 (v2-text-display + aggregation-widget + search-widget + button-primary + table-list 의 **레이아웃 시뮬레이션**)
-  - ResizeObserver 기반 `data-v2-table-list-mode` 전환 + CSS @container 기반 search-widget 세로 스택 동시 시각 확인
-
-### 스펙 MD
-- **수정** `notes/gbpark/2026-04-10-card-engine-final-spec.md`
-  - Phase 2 시작 섹션에 "Phase 1 에서 미뤄둔 레거시 타입 정리" 체크리스트 삽입
-
----
-
-## 2. 주요 결정 사항 (사용자 협의)
-
-### 결정 1 — ScreenDesigner_new 처리 방식
-**옵션**: (a) 완전 재작성 / (b) 변환 레이어만 추가 / (c) 백지에서 새로 작성
-**결정**: **(c) 와 (a) 혼합 — 새 `components/template-builder/` 폴더에 완전 재작성**
-**이유**: ScreenDesigner_new 는 `ScreenDefinition/ComponentData/LayoutData` 기반이라 Template 모델로의 전환은 사실상 재작성. 새 경로가 의미상 더 명확(스펙 §4.1 검토 항목).
-
-### 결정 2 — components/builder 폐기 방식
-**결정**: **완전 삭제**
-**이유**: 스펙 MD 가 폐기 명시, git history 로 추적 가능, 흔적 남기면 혼란.
-
-### 결정 3 — Step 5 레거시 타입 처리
-**옵션**: (a) @deprecated + 유지 / (b) DashboardCard 도 임시 수정해 완전 제거 / (c) Phase 2 로 이관
-**결정**: **(a) @deprecated 주석 + 유지 + Phase 2 체크리스트에 제거 항목 명시**
-**이유**: DashboardCard.tsx 는 Phase 2 재작성 대상(스펙 §6/§7). Phase 1 에서 임시 수정하면 Phase 2 재작성 때 두 번 일. 옵션 3 은 방향성 불명.
-
-### 결정 4 — Step 6 v2-* 마이그레이션 범위
-**결정**: **핵심 2개 완전 + 나머지 7개 경량**
-- **완전**: v2-table-list (ResizeObserver), v2-table-search-widget (CSS @container)
-- **경량**: button-primary, input, select, date, text-display, card-display, aggregation-widget → `container-type: inline-size` 만 부착
-**이유**: PoC 검증력을 담보(검색+테이블 CRUD 기본형)하면서 Phase 1 스코프 유지. 나머지 7개의 모드 분기는 Phase 2 개별 재작성 시 추가.
-
----
-
-## 3. Phase 2 이월 체크리스트
-
-스펙 MD §6 Phase 2 섹션에 다음 항목이 추가됐다(`notes/gbpark/2026-04-10-card-engine-final-spec.md` 참조).
-
-### 레거시 타입 최종 제거 (Phase 1 이월)
-- [ ] `GridPosition`, `AbsolutePosition`, `ComponentPosition`, `ResponsiveGridOverride` 제거
-- [ ] `isGridPosition()`, `isAbsolutePosition()` 가드 제거
-- [ ] `TemplateKind`, `DEFAULT_COMPONENT_LAYOUTS`, `CANVAS_KEYWORDS` 제거
-- [ ] `Template.kind` 필드 완전 제거
-- [ ] `DashboardCard.tsx` 재작성하면서 위 타입 사용처를 전부 `FreePosition` 으로 교체
-- [ ] 잔존 확인: `grep -rn "GridPosition\|AbsolutePosition\|TemplateKind" frontend/`
-
-### 경량 7개 v2-* 컴포넌트 모드 분기 추가 (Phase 1 이월)
-- [ ] v2-button-primary: narrow 에서 아이콘만 / wide 에서 아이콘+텍스트
-- [ ] v2-input: 라벨 위치 (narrow=top / wide=left)
-- [ ] v2-select: 동일
-- [ ] v2-date: 동일 + narrow 에서 range 모드 자동 compact
-- [ ] v2-text-display: font-size 반응
-- [ ] v2-card-display: narrow 에서 cardsPerRow 자동 1
-- [ ] v2-aggregation-widget: narrow 에서 2x2 그리드
-
-### 우선순위 2/3 v2-* 마이그레이션 (스펙 §5.3)
-- [ ] 우선순위 2: v2-bom-tree, v2-bom-item-editor, v2-shipping-plan-editor, v2-pivot-grid, v2-timeline-scheduler, v2-process-work-standard, v2-approval-step
-- [ ] 우선순위 3: v2-rack-structure, v2-numbering-rule, v2-category-manager, v2-divider-line, v2-file-upload, v2-media
-
-### 기타
-- [ ] TemplateBuilder 의 placeholder 렌더링 → 실제 v2-* 컴포넌트 렌더링 (ComponentRegistry 연동)
-- [ ] TemplateBuilder 저장/복원을 localStorage 에서 백엔드 API 로
-- [ ] 3뷰 자동 생성 실제 동작 (등록 버튼 감지 → create 뷰 placeholder 자동 생성) — 현재 store 에는 탐지 로직 있으나 UI placeholder 생성 로직 없음
-
----
-
-## 4. 사용자 수동 검증 체크리스트 (Phase 1 종료 조건)
-
-다음 항목을 브라우저에서 직접 확인.
-
-### (A) 테스트 페이지 — 반응형 메커니즘 시각 확인
-1. 도커 or 로컬에서 frontend 실행
-2. 브라우저에서 `/test-card-responsive` 접속
-3. 카드 폭 슬라이더를 **800 → 400** 으로 드래그
-4. 확인:
-   - [ ] 상단 "감지된 모드" 배지가 `wide` → `narrow` 로 전환 (버튼 색도 인디고 → 로즈)
-   - [ ] v2-table-list 영역이 테이블 → 카드 리스트로 재렌더 (`data-v2-table-list-mode` 속성값 wide/narrow 교차)
-   - [ ] v2-table-search-widget 영역의 필터/버튼이 가로 → 세로 스택으로 재배열
-5. 슬라이더 프리셋 (320 / 520 / 800 / 1200) 로 경계값 확인
-6. **실패 시**: 스펙 §9 백업 플랜 적용 검토 (카드 min-width 강제, 모드 강제 등)
-
-### (B) 빌더 접근 확인
-1. `/admin/builder` 접속
-2. 확인:
-   - [ ] TemplateBuilder UI 가 표시 (상단 툴바 + 좌측 팔레트 + 중앙 캔버스 + 우측 속성 패널)
-   - [ ] 상단 탭에서 목록/등록/수정 3뷰 토글 가능
-   - [ ] 좌측 팔레트에서 v2-* 컴포넌트 드래그해 캔버스에 드롭 → 배치 성공
-   - [ ] 배치된 블록 드래그로 이동, 우하단 핸들로 리사이즈
-   - [ ] Ctrl+Z 실행취소, Ctrl+S 저장 (브라우저 저장 다이얼로그 아님 → localStorage)
-   - [ ] 새로고침 후에도 localStorage 에서 복원
-3. 팔레트에 v2-* 컴포넌트가 안 보이면 ComponentRegistry 초기화가 안 된 것. 그 경우 fallback 9개가 표시되어야 함.
-
-### (C) 기존 기능 영향 없음 확인
-1. `/admin/screenMng` 접속 → ScreenDesigner(구버전) 가 여전히 동작
-2. `/dashboard/...` 접속 → DashboardCard 가 여전히 동작 (Phase 2 재작성 전까지 @deprecated 타입 의존)
-3. 아무 v2-* 사용 화면이 있으면 팔레트 드래그 안 해도 렌더 자체는 그대로
-
----
-
-## 5. 알려진 한계 / TODO
-
-1. **TemplateBuilder 는 아직 placeholder 빌더**. 실제 v2-* 컴포넌트는 Phase 2 에서 연결. 지금은 블록명/크기만 표시.
-2. **ResizeObserver 기반 v2-table-list 는 `isDesignMode=true` 에서는 narrow 카드 모드가 동작하지 않음** — TableListComponent 의 원 로직이 design 모드에서 card 분기를 건너뜀. 빌더 안 프리뷰에서는 확인 불가, 실 렌더링(런타임)에서만 작동. 테스트는 `/test-card-responsive` 페이지로 수행.
-3. **localStorage 저장 키**: `invyone-template:<templateId>` / `invyone-template:__last__`. 나중에 백엔드 API 로 전환 시 마이그레이션 필요.
-4. **DashboardCard.tsx 는 여전히 레거시 타입 의존**. Phase 2 재작성 전까지 그대로 유지.
-5. **스펙의 v2-search-widget 은 실제 폴더명이 v2-table-search-widget**. 이름만 다르고 마이그레이션은 정상 적용.
-
----
-
-## 6. 참고 (작업 중 확인한 기존 파일)
-
-- `frontend/lib/registry/components/v2-table-list/TableListComponent.tsx` (283KB, 내부 불변 약속)
-- `frontend/lib/registry/components/v2-table-list/CardModeRenderer.tsx` (기존 카드 모드 렌더러 — 재사용)
-- `frontend/lib/registry/components/v2-table-search-widget/TableSearchWidget.tsx` (880줄, 내부 불변)
-- `frontend/components/screen/ScreenDesigner.tsx` (347KB, screenMng 사용 중, 건드리지 않음)
-- `frontend/components/dash/DashboardCard.tsx` (Phase 2 재작성 대상)
-
----
-
-## 7. 세션 후반 버그 픽스 (검증 중 발견, 2026-04-11)
-
-Phase 1 코드 작업이 완료된 뒤 §4 사용자 수동 검증을 진행하면서 3개의 버그가 발견되어 즉시 수정됨. Phase 1 의 일부로 포함.
-
-### 7.1 `/test-card-responsive` 가 AppLayout 탭 시스템에 흡수됨
-
-**증상**: 브라우저에서 URL 접속 시 `/admin` 과 비슷한 셸(사이드바 + 빈 탭 영역) 만 나오고 "열린 탭이 없습니다" 텍스트가 표시됨. PoC 페이지 자체가 렌더되지 않음.
-
-**원인**: 페이지가 `frontend/app/(main)/test-card-responsive/page.tsx` 에 있었는데, `frontend/app/(main)/layout.tsx` 가 `<AppLayout>{children}</AppLayout>` 으로 감싸고 있고, `AppLayout` 은 탭 기반 SPA 셸이라 `/test-card-responsive` 라는 URL 이 탭 시스템에 등록되어 있지 않으면 `children` 이 렌더되지 않았음.
-
-**수정**: 파일을 `(main)` 그룹 밖으로 이동해서 AppLayout 을 우회.
-- 이전: `frontend/app/(main)/test-card-responsive/page.tsx`
-- 이후: `frontend/app/test-card-responsive/page.tsx`
-
-루트 layout 만 적용되고 AppLayout 의 탭 시스템은 통과. 검증 페이지라 사이드바/헤더가 필요 없어 문제 없음.
-
-### 7.2 `useRegistryPalette` 가 VEX `default_size` 포맷 불일치로 NaN position 생성
-
-**증상**: TemplateBuilder 팔레트에서 컴포넌트(예: split-panel-layout)를 드래그해 캔버스에 드롭해도 블록이 시각적으로 나타나지 않음. 우측 속성 패널의 LEFT/TOP/WIDTH/HEIGHT 필드가 모두 비어있음. 컴포넌트 자체는 선택된 상태(COMPONENT 이름 + CONFIG JSON 표시) 로 패널에 보이지만 캔버스에서는 사라짐.
-
-**원인 연쇄**:
-1. VEX `ComponentDefinition.default_size` 는 `{ width, height }` 포맷 (예: `{ width: 300, height: 40 }`)
-2. TemplateBuilder 의 `PaletteItem.defaultSize` 는 `{ w, h }` 포맷
-3. `useRegistryPalette` 가 `c.default_size` 를 그대로 전달 → `defaultSize.w` = `undefined`
-4. 드롭 핸들러에서 `e.clientX - rect.left - defaultSize.w / 2` = `NaN`
-5. `position = { left: NaN, top: NaN, width: undefined, height: undefined }` 가 store 에 저장됨
-6. React 가 style 의 NaN/undefined 를 무시 → 블록이 "보이지 않음" (또는 0,0 에 0 크기)
-7. `LabeledNumber` 의 `Math.round(NaN) = NaN` → 속성 패널 input 이 빈 칸으로 렌더
-
-**수정**: `frontend/components/template-builder/TemplateBuilder.tsx` 의 `useRegistryPalette` 에서 두 가지 정규화:
-
-1. `default_size` 의 `{width, height}` 와 `{w, h}` 두 포맷 모두 지원:
-   ```ts
-   const rawSize = c.default_size ?? {};
-   const defaultSize = {
-     w: rawSize.w ?? rawSize.width ?? 280,
-     h: rawSize.h ?? rawSize.height ?? 180,
-   };
-   ```
-
-2. lucide icon 이름(긴 문자열 "Table", "LayoutGrid" 등) 은 `◼` 로 fallback:
-   ```ts
-   const icon =
-     typeof rawIcon === "string" && rawIcon.length > 0 && rawIcon.length <= 2
-       ? rawIcon
-       : "◼";
-   ```
-   짧은 이모지/유니코드만 그대로 표시. lucide 이름의 실제 아이콘 렌더링은 Phase 2 에서 ComponentRegistry 연동할 때 본격 구현.
-
-### 7.3 TemplateBuilder.tsx 다크 모드 가시성 전혀 없음
-
-**증상**: INVYONE 기본 다크 테마에서 TemplateBuilder 전체가 흰색/밝은 회색 배경에 옅은 텍스트로 표시되어 거의 읽을 수 없음. 팔레트, 툴바, 캔버스, 속성 패널 모두 동일. 블록을 드롭해도 어두운 배경 위에 어두운 블록이 거의 구분 안 됨.
-
-**원인**: TemplateBuilder.tsx 가 라이트 모드 전제로 작성됨. `bg-white`, `bg-slate-50`, `text-slate-*`, `border-slate-200` 등 Tailwind 클래스가 `dark:` variant 없이 사용됨.
-
-**수정**: Python 정규식 스크립트로 일괄 치환. **21개 패턴, 총 71곳** 치환.
-
-| 원본 | 치환 | 건수 |
-|---|---|---|
-| `bg-white` | `bg-white dark:bg-slate-900` | 8 |
-| `bg-slate-50` | `bg-slate-50 dark:bg-slate-950` | 2 |
-| `bg-slate-100` | `bg-slate-100 dark:bg-slate-800` | 1 |
-| `bg-amber-50` | `bg-amber-50 dark:bg-amber-950/40` | 1 |
-| `text-slate-800` | `text-slate-800 dark:text-slate-100` | 1 |
-| `text-slate-700` | `text-slate-700 dark:text-slate-200` | 1 |
-| `text-slate-600` | `text-slate-600 dark:text-slate-300` | 5 |
-| `text-slate-500` | `text-slate-500 dark:text-slate-400` | 2 |
-| `text-slate-400` | `text-slate-400 dark:text-slate-500` | 14 |
-| `text-amber-700` | `text-amber-700 dark:text-amber-300` | 1 |
-| `text-rose-600` | `text-rose-600 dark:text-rose-400` | 1 |
-| `text-rose-500` | `text-rose-500 dark:text-rose-400` | 1 |
-| `border-slate-200` | `border-slate-200 dark:border-slate-700` | 23 |
-| `border-rose-200` | `border-rose-200 dark:border-rose-800` | 1 |
-| `ring-indigo-200` | `ring-indigo-200 dark:ring-indigo-800` | 1 |
-| `hover:bg-slate-100` | `hover:bg-slate-100 dark:hover:bg-slate-700` | 2 |
-| `hover:bg-slate-50` | `hover:bg-slate-50 dark:hover:bg-slate-800/60` | 2 |
-| `hover:bg-indigo-50` | `hover:bg-indigo-50 dark:hover:bg-indigo-950/40` | 1 |
-| `hover:bg-rose-50` | `hover:bg-rose-50 dark:hover:bg-rose-950/40` | 1 |
-| `hover:border-indigo-300` | `hover:border-indigo-300 dark:hover:border-indigo-600` | 1 |
-| `hover:border-slate-300` | `hover:border-slate-300 dark:hover:border-slate-600` | 1 |
-
-치환 순서: `hover:` variants 먼저, 그 다음 일반 variants. `(?<!hover:)` negative lookbehind 사용해서 `hover:bg-*` 와 일반 `bg-*` 를 분리.
-
-**후속 정리**: 치환 순서 때문에 `text-slate-500 dark:text-slate-400 dark:text-slate-500` 같은 중복 체인이 일부 생김. 원인: `text-slate-500` → `... dark:text-slate-400` 치환 직후, 다음 `text-slate-400` 치환이 방금 추가된 `dark:text-slate-400` 안의 `text-slate-400` 을 또 매칭해서 `dark:text-slate-500` 를 뒤에 붙임. 추가 Python 스크립트로 `(dark:text-slate-\d00)\s+dark:text-slate-\d00` 패턴을 반복 제거. **1회 반복 후 남은 체인 0개** 확인.
-
-### 7.4 수정 후 검증 결과
-
-| 검증 | 결과 |
-|---|---|
-| `/test-card-responsive` 페이지 렌더 | ✅ 정상 |
-| 카드 폭 슬라이더로 반응형 전환 (800 → 400) | ✅ v2-table-list 테이블 → 카드 리스트, v2-table-search-widget 가로 → 세로 스택 |
-| `/admin/builder` TemplateBuilder UI | ✅ 정상 |
-| 팔레트 → 캔버스 드롭 → 블록 표시 | ✅ position 값 정상 |
-| 드래그/리사이즈/Delete/Ctrl+Z/Ctrl+S | ✅ 전부 동작 |
-| 3뷰 토글 (목록/등록/수정) | ✅ 독립 블록 유지 |
-| 다크 모드 가시성 | ✅ 모든 영역 구분 가능 |
-| 기존 VEX 화면/디자이너 (DTG 이력관리, screenMng 등) | ⏭️ 마이그레이션 미완 상태라 작동 안 함 (알려진 상태, Phase 1 범위 아님, Phase 2 이후 개별 마이그레이션 예정) |
-
-### 7.5 Phase 2 에 고려할 사항
-
-- **`useRegistryPalette`**: Phase 2 의 "TemplateBuilder 실렌더링 연결" 작업에서 다시 건드림. 그때 lucide icon 실제 렌더 + FieldConfig 연결 + DataPort 연결 등 포함해 더 정교하게 개선.
-- **다크 모드 치환**: `dark:` variant 수동 추가 방식이라 지저분할 수 있음. Phase 2 에서 shadcn CSS 변수 기반(`bg-background`, `text-foreground`, `border-border` 등) 으로 리팩터 고려 가능. 단 v5-layout.css 의 토큰과의 통합이 필요.
-- 이 버그들은 **컴포넌트 레지스트리 연동 + 라이트/다크 디자인 시스템 통합** 이라는 더 큰 작업의 일부이므로, Phase 2 에서 자연스럽게 전체 정리됨.
-
----
-
-## 끝
-
-Phase 1 종료 (2026-04-11).
-
-§4 사용자 수동 검증 **(A) `/test-card-responsive` 반응형 메커니즘 + (B) `/admin/builder` TemplateBuilder UI** 통과 확인. **(C) 기존 기능 sanity** 는 VEX → INVYONE 컴포넌트 마이그레이션이 "기능 업그레이드 먼저" 정책으로 아직 진행되지 않아 기존 VEX 화면들이 원래 작동하지 않는 정상 상태라 생략됨.
-
-핵심 보장(사용자가 "반응형 된다" 고 해서 믿고 진행한 결정)이 PoC 에서 실제로 작동함을 확인: 카드 폭 변경 시 v2-table-list 가 ResizeObserver 기반으로 wide/narrow 모드를 자동 전환, v2-table-search-widget 은 CSS `@container` 기반으로 가로 → 세로 스택 전환. 스펙 MD §9 의 백업 플랜 적용 불필요.
-
-Phase 2 에서:
-1. 사용자가 만드는 대시보드 시스템 구현 (`components/dash/*` 재작성)
-2. `DashboardCard` 재작성 — Card = Template 인스턴스, FreePosition + @container
-3. 레거시 타입 완전 제거 (@deprecated 표기한 것들)
-4. TemplateBuilder 실렌더링 연결 (ComponentRegistry + 실제 v2-* 렌더)
-5. 경량 7개 v2-* 모드 분기 추가
-6. 우선순위 2/3 v2-* 마이그레이션
-7. VEX 화면들을 INVYONE Template 로 마이그레이션 시작
diff --git a/notes/gbpark/2026-04-10-phase1-implementation-log.md b/notes/gbpark/2026-04-10-phase1-implementation-log.md
deleted file mode 100644
index 1c5c51e1..00000000
--- a/notes/gbpark/2026-04-10-phase1-implementation-log.md
+++ /dev/null
@@ -1,298 +0,0 @@
-# Phase 1 구현 작업기록 — DB 메타 → FieldConfig 변환
-
-> **작업일**: 2026-04-10
-> **설계서**: `notes/gbpark/2026-04-10-phase1-db-meta-to-fieldconfig.md`
-> **상태**: 구현 완료 + DB 실테스트 통과
-
----
-
-## 1. 생성된 파일 (4개)
-
-### 1.1 `backend-spring/src/main/resources/mapper/meta.xml`
-
-MyBatis XML 매퍼. namespace=`meta`, 쿼리 5개:
-
-| 쿼리 ID | 용도 | 반환 |
-|---|---|---|
-| `getMetaTableList` | public 스키마 테이블 목록 | table_name, table_label, column_count, has_custom_meta |
-| `getSchemaColumns` | information_schema.columns 전체 컬럼 | column_name, data_type, is_nullable, column_default, ordinal_position |
-| `getPrimaryKeys` | PK 컬럼명 목록 | string (column_name) |
-| `getCustomMeta` | table_type_columns 커스텀 메타 (회사 우선순위) | column_name, column_label, input_type, detail_settings, reference_table 등 |
-| `getTableLabel` | TABLE_LABELS에서 라벨 단건 | string (table_label) |
-
-**회사 우선순위 처리**: `getCustomMeta`에서 `DISTINCT ON (COLUMN_NAME)` + `CASE WHEN COMPANY_CODE = #{company_code} THEN 0 ELSE 1 END` 정렬로 회사별 메타가 '*'(글로벌)보다 우선.
-
----
-
-### 1.2 `backend-spring/src/main/java/com/erp/service/MetaService.java`
-
-핵심 변환 로직. 덕일 스타일 준수 — extends BaseService, @Autowired CommonService, sqlSession 직접 호출.
-
-#### 주요 메서드
-
-| 메서드 | 역할 |
-|---|---|
-| `getMetaTableList(params)` | 테이블 목록 pass-through |
-| `getMetaFields(params)` | 4개 쿼리 오케스트레이션 → buildFieldConfigs 호출 → 결과 조립 |
-| `buildFieldConfigs(schemaCols, pks, customMeta)` | **핵심** — 3소스 병합하여 FieldConfig Map 리스트 생성 |
-| `mapDataTypeToFieldType(dataType)` | PostgreSQL data_type → FieldType 변환 (12개 매핑) |
-| `mapInputTypeToFieldType(inputType)` | table_type_columns.input_type → FieldType 변환 (15개 매핑) |
-| `buildFieldRef(meta, detailSettings)` | entity 타입의 ref 객체 빌드 (top-level 컬럼 우선 → detail_settings 폴백) |
-| `extractOptions(detailSettings)` | select 타입의 options 추출 (`string[]` 및 `[{value,label}]` 둘 다 처리) |
-| `parseDetailSettings(meta)` | detail_settings JSONB → Map 파싱 (ObjectMapper) |
-
-#### buildFieldConfigs 병합 규칙 (필드별)
-
-```
-column     = information_schema.column_name
-label      = table_type_columns.column_label (있으면) || column_name
-type       = table_type_columns.input_type 매핑 (있으면) || data_type 매핑
-visible    = system이면 무조건 false, 아니면 is_visible
-order      = display_order > 0이면 우선 || ordinal_position
-required   = ★ 앱 레벨 메타(table_type_columns.is_nullable) 우선, 없으면 DB 스키마 폴백
-editable   = !PK && !system && type!='code'
-pk         = information_schema PK 제약조건
-system     = SYSTEM_FIELDS 목록에 포함 여부
-searchable = !system && (text|select|entity|date|code)
-sortable   = !system
-format     = number→'#,##0', date→'YYYY-MM-DD', datetime→'YYYY-MM-DD HH:mm'
-width      = type별 기본값 (number:100, date:120, entity:180 등)
-align      = number→'right', 나머지→'left'
-options    = detail_settings.options (string[] 또는 [{value,label}] → label 추출)
-ref        = entity일 때 reference_table/column/display_column (top-level 우선 → detail_settings 폴백)
-computed   = detail_settings.computed (있으면 editable=false 강제)
-```
-
-#### required 판정 로직 (★ 수동 수정 반영)
-
-```java
-// ★ 앱 레벨 메타 우선, DB 스키마 폴백
-if (!isSystem && meta != null && meta.get("is_nullable") != null) {
-    // table_type_columns.IS_NULLABLE가 있으면 앱 레벨 메타가 진실
-    required = "NO".equalsIgnoreCase(metaNullable);
-} else {
-    // 없으면 information_schema 폴백
-    required = "NO".equalsIgnoreCase(isNullable) && columnDefault == null && !isSystem;
-}
-```
-
-원래 구현: information_schema.is_nullable + column_default 기반.
-수정 이유: VEX에서 앱 레벨 메타(table_type_columns.IS_NULLABLE)가 DB 스키마보다 우선하는 패턴. 관리자가 설정한 필수 여부가 DB 제약조건보다 비즈니스적으로 정확함.
-
-#### system 필드 목록
-
-```
-company_code, created_by, created_date, updated_by, updated_date,
-is_active, deleted_date, deleted_by, writer, write_date
-```
-
-→ 자동으로 `visible: false`, `editable: false`, `required: false`, `searchable: false`, `sortable: false`
-
-#### 타입 매핑 테이블
-
-**PostgreSQL data_type → FieldType:**
-
-| data_type | FieldType |
-|---|---|
-| character varying, varchar | text |
-| text | textarea |
-| integer, bigint, smallint | number |
-| numeric, decimal, real, double precision | number |
-| boolean | checkbox |
-| date | date |
-| timestamp (with/without tz) | datetime |
-| jsonb, json | textarea |
-| bytea | file |
-| 기타 | text |
-
-**input_type → FieldType (custom meta 우선):**
-
-| input_type | FieldType |
-|---|---|
-| text, email, password, tel | text |
-| number, decimal | number |
-| date | date |
-| datetime | datetime |
-| select, category | select |
-| entity | entity |
-| checkbox, boolean | checkbox |
-| textarea, text_area | textarea |
-| file | file |
-| code, numbering | code |
-| 기타 | text |
-
-#### entity ref 빌드 로직
-
-```
-1차: top-level 컬럼 (REFERENCE_TABLE, REFERENCE_COLUMN, DISPLAY_COLUMN)
-2차: detail_settings JSON 폴백 (referenceTable, referenceColumn, displayColumn)
-→ table이 없으면 ref=null
-→ value_column 기본값 "id", display_column 기본값 = value_column
-→ search_columns는 detail_settings에서만 추출
-```
-
-#### select options 추출 로직
-
-```
-detail_settings.options 필드에서 추출
-  - string[] 형식: ["대기", "확정", ...] → 그대로 반환
-  - [{value, label}] 형식: [{value:"PENDING", label:"대기"}, ...] → label만 추출
-  - options 없으면 null (category 타입은 common code 연동 필요 — Phase 1 범위 밖)
-```
-
----
-
-### 1.3 `backend-spring/src/main/java/com/erp/controller/MetaController.java`
-
-REST 컨트롤러. 2개 엔드포인트:
-
-| 엔드포인트 | 메서드 | 설명 |
-|---|---|---|
-| `GET /api/meta/tables` | `getMetaTableList` | 접근 가능한 테이블 목록 |
-| `GET /api/meta/tables/{tableName}/fields` | `getMetaFields` | 특정 테이블의 FieldConfig[] 반환 |
-
-- `@RequestAttribute("company_code")` — JWT 필터에서 주입 (snake_case, 기존 패턴 따름)
-- `@RequiredArgsConstructor` + `private final MetaService` — 기존 컨트롤러 패턴 따름
-- relations API는 Phase 1에서 안 만듦 (Phase 5 담당)
-
----
-
-### 1.4 `frontend/lib/api/meta.ts`
-
-프론트엔드 API 클라이언트. 2개 함수:
-
-| 함수 | 반환 타입 | 설명 |
-|---|---|---|
-| `getMetaTableList()` | `Record<string, any>[]` | 테이블 목록 (별도 인터페이스 안 만듦) |
-| `getMetaFields(tableName)` | `{table_name, table_label, primary_key, fields: FieldConfig[]}` | FieldConfig 규격 타입 사용 (유일한 예외) |
-
-**snake_case → camelCase 변환 처리:**
-- `toFieldConfig(raw)` — 대부분 단일 단어라 변환 불필요, `default_value` → `defaultValue`만 처리
-- `toFieldRef(raw)` — `value_column` → `valueColumn`, `display_column` → `displayColumn`, `search_columns` → `searchColumns`
-- `apiClient` 사용 (baseURL에 `/api` 이미 포함 → `/meta/tables`로 호출)
-
----
-
-## 2. 덕일 스타일 준수 체크리스트
-
-| 규칙 | 준수 |
-|---|---|
-| 3레이어 (Controller → Service → XML) | O |
-| Mapper Interface 금지 | O — sqlSession 직접 호출 |
-| Map<String, Object> 사용, DTO 금지 | O — ApiResponse만 예외 |
-| BaseService 상속 | O |
-| @Autowired CommonService | O |
-| XML 파일명: 소문자, Mapper 안 붙임 | O — `meta.xml` |
-| XML namespace: 파일명과 동일 | O — `namespace="meta"` |
-| SQL: UPPER_SNAKE | O |
-| SELECT 쉼표: 앞에 | O |
-| #{파라미터}: snake_case | O |
-| OGNL test: 바깥 작은따옴표 | O |
-| 프론트 타입: Record<string, any> (FieldConfig만 예외) | O |
-
----
-
-## 3. 실제 DB 테스트 결과
-
-**테스트 환경**: `test_dev` DB (211.115.91.141:11134)
-**테스트 계정**: shkim (SUPER_ADMIN)
-**테스트 테이블**: `sales_order_mng` (entity/select/category/number/date 타입 다수 보유)
-
-### 3.1 GET /api/meta/tables
-
-```json
-{
-  "success": true,
-  "data": [
-    {"table_name": "approval_definitions", "table_label": "approval_definitions", "column_count": 15, "has_custom_meta": false},
-    {"table_name": "sales_order_mng", "table_label": "수주관리", "column_count": 44, "has_custom_meta": true},
-    ...
-  ]
-}
-```
-
-### 3.2 GET /api/meta/tables/sales_order_mng/fields
-
-**검증 결과:**
-
-| 검증 항목 | 결과 | 상세 |
-|---|---|---|
-| table_label | OK | "수주관리" (TABLE_LABELS에서) |
-| primary_key | OK | "id" |
-| PK 감지 | OK | id: `pk:true, editable:false` |
-| system 필드 | OK | company_code, created_by/date, updated_by/date, writer → `visible:false, system:true` |
-| entity + ref | OK | partner_id: `ref:{table:"customer_mng", value_column:"customer_code", display_column:"customer_name"}` |
-| entity (top-level 컬럼) | OK | delivery_partner_id: `ref:{table:"delivery_destination", ...}` |
-| select + options ({value,label}) | OK | shipping_method: `options:["직접배송","택배","화물","퀵서비스"]` |
-| select + options (문자열) | OK | status: `options:["대기","확정","출하","완료","취소"]` |
-| custom meta 우선 | OK | id(integer) → table_type_columns에 input_type='text' 설정 → type:"text" |
-| date 포맷 | OK | `format:"YYYY-MM-DD"` |
-| number 포맷/정렬 | OK | `format:"#,##0", align:"right"` |
-| 컴파일 | OK | `./gradlew compileJava` + `./gradlew bootJar` 성공 |
-| 프론트 타입체크 | OK | `npx tsc --noEmit` — meta.ts 에러 0개 |
-
----
-
-## 4. Phase 1 범위 밖 (나중에 해야 할 것)
-
-| 항목 | 담당 Phase | 비고 |
-|---|---|---|
-| relations API (table_relationships) | Phase 5 | 제어 모드에서 사용 |
-| category 타입의 common code 옵션 로딩 | Phase 2+ | CODE_CATEGORY → 공통코드 테이블 조회 |
-| entity ref가 없는 entity 필드 처리 | Phase 2+ | part_code, manager_id 등 — reference_table 미설정 |
-| FieldConfig.defaultValue, placeholder 세팅 | Phase 2+ | detail_settings에서 추출 가능하나 현재 미구현 |
-| select options의 value/label 분리 저장 | Phase 2+ | 현재 label만 string[]로 반환, value 매핑 필요 시 타입 확장 |
-
----
-
-## 5. 파일별 코드 요약
-
-### meta.xml (89줄)
-
-```
-5개 쿼리:
-- getMetaTableList: INFORMATION_SCHEMA.TABLES + TABLE_LABELS + TABLE_TYPE_COLUMNS EXISTS
-- getSchemaColumns: INFORMATION_SCHEMA.COLUMNS
-- getPrimaryKeys: TABLE_CONSTRAINTS + KEY_COLUMN_USAGE
-- getCustomMeta: TABLE_TYPE_COLUMNS (DISTINCT ON + 회사 우선순위)
-- getTableLabel: TABLE_LABELS 단건
-```
-
-### MetaService.java (375줄)
-
-```
-퍼블릭 메서드 2개:
-- getMetaTableList(params) → List<Map>
-- getMetaFields(params) → Map (table_name, table_label, primary_key, fields[])
-
-프라이빗 메서드 10개:
-- buildFieldConfigs: 3소스 병합 (핵심, ~120줄)
-- mapDataTypeToFieldType: PG타입→FieldType (12매핑)
-- mapInputTypeToFieldType: input_type→FieldType (15매핑)
-- buildFieldRef: entity ref 조립 (top-level 우선 → detail_settings 폴백)
-- extractOptions: select options 추출 (string[] + {value,label} 대응)
-- parseDetailSettings: JSONB→Map (ObjectMapper)
-- getDefaultWidth: 타입별 기본 너비
-- getDefaultFormat: 타입별 기본 포맷
-- str, strFromMap, num: Map 유틸
-```
-
-### MetaController.java (45줄)
-
-```
-2개 엔드포인트:
-- GET /api/meta/tables → getMetaTableList
-- GET /api/meta/tables/{tableName}/fields → getMetaFields
-```
-
-### meta.ts (86줄)
-
-```
-2개 API 함수:
-- getMetaTableList() → Record<string, any>[]
-- getMetaFields(tableName) → {fields: FieldConfig[], ...}
-
-2개 변환 헬퍼:
-- toFieldConfig(raw) → FieldConfig
-- toFieldRef(raw) → FieldRef (snake→camel)
-```
diff --git a/notes/gbpark/2026-04-10-phase2-implementation-log.md b/notes/gbpark/2026-04-10-phase2-implementation-log.md
deleted file mode 100644
index a7e34c23..00000000
--- a/notes/gbpark/2026-04-10-phase2-implementation-log.md
+++ /dev/null
@@ -1,305 +0,0 @@
-# Phase 2 구현 작업기록 — FieldConfig 기반 컴포넌트 (FcTable/FcForm/FcSearch)
-
-> **작업일**: 2026-04-10
-> **설계서**: `notes/gbpark/2026-04-10-phase2-fieldconfig-components.md`
-> **상태**: 구현 완료 + TypeScript 타입체크 통과 (tsc --noEmit 에러 0개)
-
----
-
-## 1. 생성된 파일 (17개)
-
-### 1.1 파일 구조
-
-```
-frontend/
-├── components/fc/                    ← FieldConfig 기반 컴포넌트 (신규)
-│   ├── index.ts                      ← 공개 exports
-│   ├── FcTable.tsx                   ← 데이터 테이블 (TanStack Table v8)
-│   ├── FcForm.tsx                    ← 입력 폼 (자체 상태 관리)
-│   ├── FcSearch.tsx                  ← 검색 필터
-│   ├── FcButton.tsx                  ← 단일 버튼 (confirm 팝업 포함)
-│   ├── FcButtonBar.tsx               ← 버튼 그룹
-│   ├── FcPagination.tsx              ← 페이지네이션
-│   ├── fields/                       ← FieldType별 렌더러 (10종)
-│   │   ├── FieldRenderer.tsx         ← FieldType→위젯 디스패처
-│   │   ├── TextField.tsx
-│   │   ├── NumberField.tsx
-│   │   ├── DateField.tsx
-│   │   ├── DateTimeField.tsx
-│   │   ├── SelectField.tsx
-│   │   ├── EntityField.tsx
-│   │   ├── CheckboxField.tsx
-│   │   ├── TextareaField.tsx
-│   │   ├── FileField.tsx
-│   │   └── CodeField.tsx
-│   └── table/                        ← 테이블 전용
-│       └── CellRenderer.tsx          ← 셀 포맷 디스패처
-├── lib/api/
-│   └── fcData.ts                     ← FieldConfig 기반 CRUD API 래퍼 (신규)
-└── app/(main)/test-fc/
-    └── page.tsx                      ← 테스트 페이지 (신규)
-```
-
----
-
-## 2. 핵심 컴포넌트 상세
-
-### 2.1 FieldRenderer — FieldType→위젯 디스패처
-
-`frontend/components/fc/fields/FieldRenderer.tsx`
-
-- `mode='form'` / `mode='search'` 분기로 같은 FieldConfig가 다른 위젯으로 렌더
-- switch/case로 10종 FieldType을 개별 컴포넌트에 위임
-- 모든 필드 공통 인터페이스: `{ field, value, onChange, mode, disabled?, error? }`
-
-### 2.2 렌더링 계약 구현 (spec Section 2.2 전부 준수)
-
-| FieldType | FcTable 셀 | FcForm 입력 | FcSearch 검색 |
-|---|---|---|---|
-| `text` | 텍스트 그대로 | `<Input type="text">` | `<Input>` (부분 일치) |
-| `number` | `#,##0` 포맷 (toLocaleString) | `<Input type="number">` | min~max 범위 2개 |
-| `date` | YYYY-MM-DD 포맷 | `<Input type="date">` | from~to 범위 2개 |
-| `datetime` | YYYY-MM-DD HH:mm 포맷 | `<Input type="datetime-local">` | from~to 범위 2개 |
-| `select` | 텍스트 그대로 | Radix `<Select>` 단일 | MultiSelect (Checkbox 드롭다운) |
-| `entity` | ref.displayColumn 그대로 | `<Input>` + 검색 버튼 | `<Input>` + 검색 버튼 |
-| `checkbox` | ✓(green) / ✗(muted) 아이콘 | Radix `<Checkbox>` | `<Select>` 전체/✓/✗ |
-| `textarea` | 40자 말줄임 (...) | `<textarea rows={3}>` | `<Input>` (부분 일치) |
-| `file` | 파일명 + FileText 아이콘 | 파일 업로드 버튼 | — (렌더 안 함) |
-| `code` | 텍스트 그대로 | readonly + Lock 아이콘 | `<Input>` (완전 일치) |
-
-### 2.3 FcTable — 데이터 테이블
-
-`frontend/components/fc/FcTable.tsx` (~190줄)
-
-**기술 스택**: TanStack Table v8 (`@tanstack/react-table`)
-
-**기능:**
-- `fields`에서 `visible: true`인 것만 컬럼으로 표시, `order` 순 정렬
-- `width`, `align` 적용 (없으면 타입별 기본값)
-- `sortable: true`인 컬럼은 헤더 클릭 시 정렬 토글 (asc→desc→none)
-- 행 클릭 시 `onRowSelect(row)` 호출 + 선택 행 하이라이트
-- `showCheckbox: true` + `selectionMode: 'multiple'`일 때 체크박스 전체선택/개별선택
-- 로딩 스피너, 빈 데이터 표시
-- `CellRenderer`가 FieldType에 따라 셀 포맷팅
-
-**Props:**
-```typescript
-interface FcTableProps {
-  fields: FieldConfig[];
-  data: Record<string, any>[];
-  config?: Partial<TableConfig>;
-  loading?: boolean;
-  onRowSelect?: (row: Record<string, any>) => void;
-  onRowsSelect?: (rows: Record<string, any>[]) => void;
-  selectedRowIndex?: number;
-}
-```
-
-### 2.4 FcForm — 입력 폼
-
-`frontend/components/fc/FcForm.tsx` (~130줄)
-
-**상태 관리**: `useState` 직접 사용 (React Hook Form 의존성 제거 — 폼이 단순하고 FieldConfig 동적 필드라 자체 관리가 적합)
-
-**기능:**
-- `system: true` 필드 숨김, `visible: true`만 표시, `order` 순
-- `config.columns` (1/2/3)에 따라 CSS Grid 레이아웃
-- `config.sections`가 있으면 섹션별로 그룹핑 (라벨 + 구분선)
-- `required: true` 필드에 * 표시
-- `editable: false` 필드 disabled
-- `pk: true` + `type: 'code'`이면 readonly (자동채번)
-- `loadRow` 변경 시 폼 데이터 자동 갱신
-- 제출 시 `required` 검증 (null/undefined/'' 만 empty, 0/false는 유효)
-- 초기화 버튼 (loadRow/initialData로 복원)
-
-**Props:**
-```typescript
-interface FcFormProps {
-  fields: FieldConfig[];
-  config?: Partial<FormConfig>;
-  initialData?: Record<string, any>;
-  onSubmit?: (data: Record<string, any>) => void;
-  loadRow?: Record<string, any>;
-}
-```
-
-### 2.5 FcSearch — 검색 필터
-
-`frontend/components/fc/FcSearch.tsx` (~110줄)
-
-**기능:**
-- `searchable: true` + `!system` 필드만 추출, `order` 순
-- `FieldRenderer(mode='search')`로 각 필드 렌더
-- `config.layout: 'inline'` (한 줄 나열) / `'stacked'` (세로)
-- `config.autoSearch: true`이면 300ms 디바운스 후 자동 `onSearch`
-- 검색/초기화 버튼
-- `buildSearchParams()` 변환 로직:
-
-```
-date/datetime 범위 → { column_from: '2026-01-01', column_to: '2026-12-31' }
-number 범위      → { column_min: 1000, column_max: 9999 }
-select 다중      → { column: ['확정', '완료'] }
-text 부분 일치   → { column: '삼성' }
-```
-
-### 2.6 CellRenderer — 테이블 셀 포맷터
-
-`frontend/components/fc/table/CellRenderer.tsx` (~85줄)
-
-| 타입 | 포맷 |
-|---|---|
-| number | `#,##0` → `toLocaleString('ko-KR')`, 소수점 포맷도 지원 |
-| date | `YYYY-MM-DD` (Date 파싱 후 수동 포맷) |
-| datetime | `YYYY-MM-DD HH:mm` |
-| checkbox | ✓ (green Check 아이콘) / ✗ (muted X 아이콘) |
-| textarea | 40자 초과 시 `...` 말줄임 + title 툴팁 |
-| file | FileText 아이콘 + 파일명 링크 스타일 |
-| null/undefined | `-` (muted) |
-| 기타 | `String(value)` |
-
----
-
-## 3. 보조 컴포넌트
-
-### 3.1 FcButton
-
-- `ButtonConfig.variant` 5종 (primary/default/destructive/outline/ghost) → v5 토큰 매핑
-- `confirm` 속성 있으면 클릭 시 확인/취소 인라인 팝업
-
-### 3.2 FcButtonBar
-
-- `ButtonBarConfig.buttons[]` 순회하며 `FcButton` 렌더
-- `onAction(actionType)` 콜백으로 12종 ActionType 전달
-
-### 3.3 FcPagination
-
-- 총 건수, 페이지 크기 선택기 (10/20/50/100)
-- 5페이지 범위 번호 표시 + 처음/이전/다음/끝 버튼
-- `onPageChange({ page, size })` 콜백
-
----
-
-## 4. API 래퍼
-
-### 4.1 fcData.ts
-
-`frontend/lib/api/fcData.ts` (~35줄)
-
-기존 `dataApi` (frontend/lib/api/data.ts)를 감싸는 얇은 래퍼.
-
-| 함수 | 용도 | 내부 호출 |
-|---|---|---|
-| `fcList(params)` | 목록 조회 (검색+페이징) | `dataApi.getTableData()` |
-| `fcGet(tableName, id)` | 단건 조회 | `dataApi.getRecordDetail()` |
-| `fcInsert(tableName, data)` | 등록 | `dataApi.createRecord()` |
-| `fcUpdate(tableName, id, data)` | 수정 | `dataApi.updateRecord()` |
-| `fcDelete(tableName, ids)` | 삭제 (복수) | `dataApi.deleteRecord()` × N |
-
-★ 별도 인터페이스 정의 안 함 — 전부 `Record<string, any>`
-
----
-
-## 5. 테스트 페이지
-
-### 5.1 `/test-fc` (frontend/app/(main)/test-fc/page.tsx)
-
-**레이아웃**: 좌(검색+테이블+페이지네이션) / 우(폼) 2컬럼
-
-**흐름:**
-```
-1. 드롭다운에서 테이블 선택
-2. getMetaFields(tableName) → FieldConfig[] 수신
-3. FcSearch + FcTable + FcForm 동시 렌더
-4. FcSearch 검색 → searchParams → fcList() 재조회 → FcTable 갱신
-5. FcTable 행 클릭 → selectedRow → FcForm 데이터 로드
-6. FcForm 저장 → fcInsert/fcUpdate → 성공 메시지 + FcTable 새로고침
-```
-
-**기능:**
-- 테이블 목록에 `has_custom_meta` 표시 (★)
-- 테이블 선택 시 필드 수, PK 표시
-- 수정/신규 모드 자동 전환 (selectedRow 유무)
-- 성공/실패 알림 (3초 자동 소멸)
-
----
-
-## 6. v5 디자인 토큰 사용 목록
-
-모든 컴포넌트에서 즉흥 hex/rgb 사용 안 함. v5-layout.css 토큰만 사용:
-
-| 용도 | 토큰 |
-|---|---|
-| 배경 | `var(--v5-glass)`, `var(--v5-surface)`, `var(--v5-bg-subtle)` |
-| 테두리 | `var(--v5-glass-border)`, `var(--v5-border)`, `var(--v5-border-subtle)` |
-| 텍스트 | `var(--v5-text)`, `var(--v5-text-sec)`, `var(--v5-text-muted)` |
-| 강조 | `var(--v5-primary)`, `var(--v5-primary-glow)` |
-| 상태 | `var(--v5-green)` (✓), `var(--v5-red)` (* 필수, 에러) |
-| 호버 | `var(--v5-surface-hover)` |
-| 글로우 | `var(--v5-glow-sm)` |
-| 블러 | `backdrop-blur-[20px]` (v5 글래스 패턴) |
-
-폰트 크기: 0.65rem(라벨) ~ 0.75rem(본문) — v5 컴팩트 스케일 준수
-
----
-
-## 7. 덕일 스타일 / 프로젝트 컨벤션 준수
-
-| 규칙 | 준수 |
-|---|---|
-| 프론트 타입: `Record<string, any>` (FieldConfig만 예외) | ✅ |
-| 별도 인터페이스 정의 금지 | ✅ — Props만 인라인 정의 |
-| FieldConfig/TableConfig 등은 invyone-component.ts 타입 사용 | ✅ |
-| v5 CSS 토큰 사용, 즉흥 값 금지 | ✅ |
-| shadcn UI 컴포넌트 재활용 (Input, Select, Checkbox) | ✅ |
-| 기존 dataApi 활용 (중복 API 안 만듦) | ✅ |
-| 컴팩트 폰트 사이즈 (0.55~0.85rem) | ✅ |
-
----
-
-## 8. TypeScript 검증 결과
-
-```bash
-npx tsc --noEmit 2>&1 | grep -E "(components/fc/|test-fc/|lib/api/fcData)"
-# 출력 없음 — 에러 0개
-```
-
-기존 코드(admin 페이지)의 타입 에러는 Phase 2와 무관.
-
----
-
-## 9. Phase 2 범위 밖 (다음에 해야 할 것)
-
-| 항목 | 담당 Phase | 비고 |
-|---|---|---|
-| entity 팝업 검색 (ref 테이블 조회) | Phase 3+ | 현재는 텍스트 입력 + 검색 버튼 UI만 |
-| category 공통코드 옵션 로딩 | Phase 2+ | CODE_CATEGORY → 공통코드 테이블 조회 |
-| 실제 파일 업로드 구현 | Phase 3+ | 현재는 파일 선택 UI만 |
-| computed 수식 파서 | Phase 5 | AST 기반 안전한 파서 필요 |
-| DataPort 이벤트 버스 | Phase 3 | 빌더에서 컴포넌트 간 연결 시 |
-| inlineEdit (테이블 인라인 편집) | Phase 3+ | TableConfig.inlineEdit는 정의만 |
-| 엑셀 내보내기 | Phase 3+ | toolbar.showExcel UI 미구현 |
-| select options의 value/label 분리 | Phase 2+ | 현재 label만 string[]으로 반환 |
-| defaultValue, placeholder 자동 세팅 | Phase 2+ | Phase 1에서 미구현 |
-
----
-
-## 10. 사용법 (다음 Phase에서 참고)
-
-```tsx
-import { FcTable, FcForm, FcSearch, FcPagination } from '@/components/fc';
-import { getMetaFields } from '@/lib/api/meta';
-import { fcList } from '@/lib/api/fcData';
-
-// 1. FieldConfig 가져오기
-const meta = await getMetaFields('sales_order_mng');
-const fields = meta.fields;
-
-// 2. 데이터 조회
-const result = await fcList({ tableName: 'sales_order_mng', page: 1, size: 20 });
-
-// 3. 컴포넌트 렌더
-<FcSearch fields={fields} onSearch={handleSearch} />
-<FcTable fields={fields} data={result.data} onRowSelect={handleSelect} />
-<FcForm fields={fields} loadRow={selectedRow} onSubmit={handleSave} />
-<FcPagination total={result.total} page={1} onPageChange={handlePage} />
-```
diff --git a/notes/gbpark/2026-04-10-phase3-implementation-log.md b/notes/gbpark/2026-04-10-phase3-implementation-log.md
deleted file mode 100644
index 59a44d7c..00000000
--- a/notes/gbpark/2026-04-10-phase3-implementation-log.md
+++ /dev/null
@@ -1,480 +0,0 @@
-# Phase 3 구현 작업기록 — 개발자 빌더 (수동 템플릿 구성)
-
-> **작업일**: 2026-04-10
-> **설계서**: `notes/gbpark/2026-04-10-phase3-developer-builder.md`
-> **상태**: 구현 완료 + TypeScript 타입체크 통과 + DB 테이블 생성 완료
-
----
-
-## 1. 생성된 파일 (18개)
-
-### 1.1 파일 구조
-
-```
-backend-spring/
-├── src/main/java/com/erp/
-│   ├── controller/TemplateController.java    ← CRUD + publish 엔드포인트 (신규)
-│   └── service/TemplateService.java          ← Template CRUD 비즈니스 로직 (신규)
-└── src/main/resources/mapper/
-    └── template.xml                          ← MyBatis SQL (신규)
-
-frontend/
-├── lib/api/
-│   └── template.ts                           ← Template CRUD API 클라이언트 (신규)
-├── styles/
-│   └── developer.css                         ← IDE 스타일 개발자 테마 (신규)
-├── components/builder/                       ← 빌더 컴포넌트 디렉토리 (전체 신규)
-│   ├── BuilderLayout.tsx                     ← 3패널 셸 + 키보드 단축키 + 상태바
-│   ├── BuilderToolbar.tsx                    ← 헤더 + 도구모음 (테이블 선택, 뷰 탭, 저장)
-│   ├── BuilderPalette.tsx                    ← 좌측 팔레트 (8종 컴포넌트)
-│   ├── BuilderCanvas.tsx                     ← 중앙 캔버스 (드롭 영역, 팝업 뷰)
-│   ├── BuilderBlock.tsx                      ← 개별 블록 (드래그/리사이즈 + 타입별 프리뷰)
-│   ├── BuilderProps.tsx                      ← 우측 속성 패널 (공통 + 타입별 분기)
-│   ├── hooks/
-│   │   ├── useBuilderState.ts                ← Zustand 빌더 상태관리
-│   │   └── useBlockDrag.ts                   ← 블록 드래그/리사이즈 훅
-│   └── props/
-│       ├── FieldListEditor.tsx               ← 필드 체크리스트 (공통)
-│       ├── TableProps.tsx                    ← 테이블 속성 패널
-│       ├── FormProps.tsx                     ← 폼 속성 패널
-│       ├── SearchProps.tsx                   ← 검색 속성 패널
-│       ├── ButtonProps.tsx                   ← 버튼/버튼바 속성 패널
-│       └── TitleProps.tsx                    ← 제목 속성 패널
-└── app/(main)/admin/builder/
-    └── page.tsx                              ← 빌더 페이지 진입점
-```
-
-### 1.2 수정된 파일 (2개)
-
-| 파일 | 변경 내용 |
-|---|---|
-| `backend-spring/src/main/resources/application.yml` | DB 접속 정보 변경: `39.117.244.52:11132/testvex` → `211.115.91.141:11134/test_dev` |
-| `CLAUDE.local.md` | DB 접속 정보 업데이트 기록 |
-
----
-
-## 2. 백엔드 상세
-
-### 2.1 TemplateController.java (~100줄)
-
-`/api/templates` REST 컨트롤러. 6개 엔드포인트:
-
-| 메서드 | 엔드포인트 | 설명 |
-|---|---|---|
-| `GET` | `/api/templates` | 템플릿 목록 (keyword, status, category 필터 + 페이지네이션) |
-| `GET` | `/api/templates/{templateId}` | 템플릿 상세 (JSONB 파싱된 Template 전체) |
-| `POST` | `/api/templates` | 템플릿 생성 (template_id 자동 생성: `tpl_` + UUID 12자) |
-| `PUT` | `/api/templates/{templateId}` | 템플릿 수정 (version 자동 증가) |
-| `PUT` | `/api/templates/{templateId}/publish` | 템플릿 게시 (draft → published) |
-| `DELETE` | `/api/templates/{templateId}` | 템플릿 삭제 (소프트: IS_ACTIVE='D') |
-
-**패턴**: MetaController와 동일 — `@RequestAttribute("company_code")`, `@RequestAttribute("user_id")`, `ApiResponse.success/error`
-
-### 2.2 TemplateService.java (~120줄)
-
-덕일 스타일 준수 — `extends BaseService`, `@Autowired CommonService`, `sqlSession` 직접 호출.
-
-| 메서드 | 역할 |
-|---|---|
-| `getTemplateList(params)` | CommonService.applyPagination → selectList + selectOne(Cnt) → buildListResponse |
-| `getTemplateInfo(params)` | selectOne + JSONB 파싱 (fields, views, connections) |
-| `insertTemplate(params)` | UUID 생성 + JSON 직렬화 + insert |
-| `updateTemplate(params)` | JSON 직렬화 + update (VERSION + 1) |
-| `publishTemplate(params)` | status='published' 업데이트 |
-| `deleteTemplate(params)` | IS_ACTIVE='D' 소프트 삭제 |
-
-**JSONB 처리 유틸 (private):**
-- `parseJsonField(row, key)` — PostgreSQL JSONB 문자열 → Java Object (ObjectMapper)
-- `stringifyJsonField(params, key)` — Java Object → JSON 문자열 (INSERT/UPDATE 전)
-
-### 2.3 template.xml (~120줄)
-
-MyBatis 매퍼. namespace=`template`, 쿼리 6개:
-
-| 쿼리 ID | 용도 |
-|---|---|
-| `getTemplateList` | 목록 (keyword LIKE, status/category 필터, companyCodeFilter, dynamicOrderBy, pagination) |
-| `getTemplateListCnt` | 목록 카운트 |
-| `getTemplateInfo` | 단건 (FIELDS, VIEWS, CONNECTIONS JSONB 포함) |
-| `insertTemplate` | 등록 (`#{fields}::jsonb` 캐스팅) |
-| `updateTemplate` | 수정 (VERSION + 1) |
-| `deleteTemplate` | 소프트 삭제 |
-| `publishTemplate` | 게시 상태 변경 |
-
-**common include 사용**: `companyCodeFilter`, `dynamicOrderBy`, `pagination`
-**OGNL test**: 바깥 작은따옴표 규칙 준수 (`test='keyword != null and keyword != ""'`)
-
----
-
-## 3. 프론트엔드 상세
-
-### 3.1 template.ts — API 클라이언트 (~40줄)
-
-| 함수 | 반환 | 설명 |
-|---|---|---|
-| `getTemplateList(params?)` | `Record<string, any>` | 목록 (list + total_count) |
-| `getTemplateInfo(templateId)` | `Record<string, any> \| null` | 상세 (Template JSON 전체) |
-| `insertTemplate(data)` | `Record<string, any>` | 생성 → `{ template_id }` 반환 |
-| `updateTemplate(templateId, data)` | `void` | 수정 |
-| `publishTemplate(templateId)` | `void` | 게시 |
-| `deleteTemplate(templateId)` | `void` | 삭제 |
-
-★ 별도 인터페이스 정의 안 함 — 전부 `Record<string, any>` (덕일 스타일)
-
-### 3.2 developer.css — IDE 스타일 테마 (~350줄)
-
-mockup `09-developer.css` 기반 React 포팅. v5 코스믹이 아닌 IDE/Figma 스타일.
-
-**색상 체계 (CSS 변수 `--d-*`):**
-
-| 변수 | 다크 | 라이트 | 용도 |
-|---|---|---|---|
-| `--d-bg` | #121218 | #f5f5f8 | 기본 배경 |
-| `--d-bg2` | #1a1a22 | #ededf2 | 패널 배경 |
-| `--d-bg3` | #22222c | #e4e4ec | 입력 배경 |
-| `--d-surface` | #2a2a36 | #fff | 호버 배경 |
-| `--d-border` | #3a3a48 | #d8d8e2 | 기본 보더 |
-| `--d-text` | #e8e8ee | #1a1a24 | 기본 텍스트 |
-| `--d-accent` | #5b9ef5 | #3b7dd8 | 액센트 (블루) |
-| `--d-red` | #f87171 | #dc2626 | 위험/필수 |
-| `--d-green` | #4ade80 | #16a34a | 성공/검색 |
-
-**주요 클래스:**
-- `.dev-shell` — 전체 셸 (flex column, 100vh)
-- `.dev-hdr` — 헤더 (42px)
-- `.dev-toolbar` — 도구모음 (34px)
-- `.dev-palette` — 좌측 팔레트 (180px)
-- `.dev-canvas` — 중앙 캔버스 (도트 그리드 배경)
-- `.dev-props` — 우측 속성 패널 (260px)
-- `.dev-block` — 캔버스 위 블록 (점선 보더, 선택 시 solid + 글로우)
-- `.dev-status` — 하단 상태바 (22px)
-- `.dev-popup-overlay/frame` — 등록/수정 팝업 편집 프레임
-
-**폰트 사이즈**: 0.36rem(배지) ~ 0.72rem(로고) — mockup 컴팩트 스케일 그대로
-
-### 3.3 useBuilderState.ts — Zustand 상태관리 (~280줄)
-
-`create<BuilderState>()(devtools(...))` 패턴 (기존 tabStore와 동일).
-
-**상태:**
-
-| 키 | 타입 | 설명 |
-|---|---|---|
-| `tableName` | `string \| null` | 선택된 테이블 |
-| `fields` | `FieldConfig[]` | 현재 테이블의 필드 목록 |
-| `currentView` | `'list' \| 'create' \| 'edit'` | 현재 뷰 탭 |
-| `blocks` | `Record<BuilderView, Component[]>` | 뷰별 블록 목록 |
-| `selectedBlockId` | `string \| null` | 선택된 블록 |
-| `connections` | `Connection[]` | DataPort 연결 목록 |
-| `templateId` | `string \| null` | 저장된 템플릿 ID |
-| `templateName` | `string` | 템플릿 이름 |
-| `category` | `string` | 분류 |
-| `description` | `string` | 설명 |
-| `isDirty` | `boolean` | 변경 여부 |
-
-**액션 (17개):**
-
-| 액션 | 설명 |
-|---|---|
-| `setTable(name, fields)` | 테이블 선택 → fields 로드 |
-| `switchView(view)` | 뷰 탭 전환 (선택 해제) |
-| `addBlock(type, position)` | 블록 추가 (기본 config/size/label 자동 설정) |
-| `removeBlock(id)` | 블록 삭제 (연결도 함께 제거) |
-| `updateBlock(id, updates)` | 블록 업데이트 |
-| `selectBlock(id)` | 블록 선택 |
-| `moveBlock(id, x, y)` | 블록 이동 (min 0) |
-| `resizeBlock(id, w, h)` | 블록 리사이즈 (min 40x20) |
-| `updateBlockConfig(id, config)` | 타입별 config 업데이트 |
-| `updateField(column, updates)` | FieldConfig 속성 변경 |
-| `setTemplateMeta(meta)` | 템플릿 이름/분류/설명 변경 |
-| `addConnection(conn)` | DataPort 연결 추가 |
-| `removeConnection(connId)` | 연결 제거 |
-| `toTemplate()` | 현재 상태 → Template JSON (저장용) |
-| `fromTemplate(tpl)` | Template JSON → 상태 복원 (로드용) |
-| `resetBuilder()` | 초기화 |
-| `markClean()` | isDirty=false |
-
-**셀렉터 훅:**
-- `useCurrentViewBlocks()` — 현재 뷰의 블록 목록
-- `useSelectedBlock()` — 선택된 블록 객체
-
-**컴포넌트 기본 설정 (`defaultConfig`):**
-
-| ComponentType | 기본 config |
-|---|---|
-| `table` | pageSize:20, selectionMode:'single', autoLoad:true, style:'default' |
-| `form` | columns:2, saveAction:{method:'UPSERT', refreshAfterSave:true} |
-| `search` | dateRangeEnabled:true, showResetButton:true, autoSearch:false, layout:'inline' |
-| `button` | text:'버튼', actionType:'save', variant:'default' |
-| `button-bar` | buttons:[{등록/primary}, {삭제/destructive}] |
-| `title` | text:'제목', fontSize:'0.75rem', fontWeight:'700', align:'left' |
-| `stats` | items:[] |
-| `divider` | style:'solid' |
-| `pagination` | pageSize:20, showSizeSelector:true, sizeOptions:[10,20,50,100] |
-
-**컴포넌트 기본 크기 (`defaultSize`):**
-
-| ComponentType | W × H |
-|---|---|
-| `table` | 854 × 380 |
-| `form` | 440 × 300 |
-| `search` | 854 × 42 |
-| `button` | 100 × 36 |
-| `button-bar` | 370 × 36 |
-| `title` | 300 × 36 |
-| `pagination` | 854 × 24 |
-
-### 3.4 useBlockDrag.ts — 드래그/리사이즈 훅 (~90줄)
-
-mousedown → document.mousemove → mouseup 패턴.
-
-- `startDrag(e, id, origX, origY, origW, origH)` — 블록 이동 시작
-- `startResize(e, id, origX, origY, origW, origH)` — 리사이즈 시작
-- **Shift 키**: 8px 스냅 (mockup의 `Math.round(n/8)*8` 그대로)
-- mouseup 시 리스너 자동 정리
-- `document.body.style.cursor/userSelect` 드래그 중 설정/해제
-
-### 3.5 BuilderLayout.tsx — 3패널 셸 (~55줄)
-
-```
-┌─ BuilderToolbar (헤더 + 도구모음) ─────────────────────┐
-├──────────┬────────────────────────────┬──────────────────┤
-│ Palette  │ Canvas                     │ Props            │
-│ (180px)  │ (flex:1)                   │ (260px)          │
-├──────────┴────────────────────────────┴──────────────────┤
-│ 상태바: 블록 N개 · 테이블명 · 연결 N개                      │
-└─────────────────────────────────────────────────────────┘
-```
-
-**키보드 단축키:**
-- `Delete` / `Backspace` — 선택된 블록 삭제
-- `Escape` — 블록 선택 해제
-
-### 3.6 BuilderToolbar.tsx — 헤더 + 도구모음 (~130줄)
-
-**헤더 (dev-hdr):**
-- INVYONE 로고 + DEV 배지
-- 템플릿 이름 입력
-- 저장 버튼
-
-**도구모음 (dev-toolbar):**
-- 테이블 드롭다운 (getMetaTableList → has_custom_meta ★ 표시)
-- 뷰 탭 (목록 / 등록 / 수정)
-- 수정됨 표시 (isDirty)
-
-**저장 흐름:**
-1. `toTemplate()` → Template JSON 생성
-2. `templateId` 있으면 `updateTemplate()`, 없으면 `insertTemplate()`
-3. 성공 시 `markClean()` + templateId 저장
-
-### 3.7 BuilderPalette.tsx — 좌측 팔레트 (~75줄)
-
-8종 컴포넌트를 4개 섹션으로 분류:
-
-| 섹션 | 컴포넌트 |
-|---|---|
-| 데이터 | 📊 데이터 테이블, 🔍 검색 필터 |
-| 입력 | 📝 입력 폼 |
-| 액션 | 🔘 버튼, ⬜ 버튼 바 |
-| 표시 | 📌 제목/텍스트, 📈 통계 카드, ── 구분선, 📄 페이지네이션 |
-
-- **드래그앤드롭**: `onDragStart` → `component-type` 데이터 전달 → 캔버스에서 `onDrop`
-- **클릭 추가**: 테이블 미선택 시 data 컴포넌트 비활성화 (opacity 0.4)
-
-### 3.8 BuilderCanvas.tsx — 중앙 캔버스 (~80줄)
-
-- **목록 뷰**: 전체 캔버스에 블록 자유 배치 (min 1200×800, 도트 그리드 배경)
-- **등록/수정 뷰**: `dev-popup-overlay` + `dev-popup-frame` (500px 너비) 안에 블록 배치
-- **드롭 처리**: `onDrop` → 마우스 좌표 계산 → `addBlock(type, {x, y})`
-- **빈 캔버스**: 안내 메시지 표시 ("팔레트에서 컴포넌트를 드래그하거나 클릭하여 추가하세요")
-- **선택 해제**: 캔버스 빈 공간 클릭 시 `selectBlock(null)`
-
-### 3.9 BuilderBlock.tsx — 개별 블록 (~160줄)
-
-**구조:**
-```
-.dev-block (position:absolute, 점선 보더)
-  ├── .dev-block-label (블록 이름)
-  ├── .dev-block-content (타입별 프리뷰)
-  └── .dev-resize-handle (우하단 리사이즈 핸들)
-```
-
-**타입별 프리뷰 (BlockPreview 내부 컴포넌트):**
-
-| 타입 | 프리뷰 내용 |
-|---|---|
-| `table` | `<table>` 헤더 + 3행 더미 (visible 필드 최대 8개) |
-| `form` | CSS Grid (columns 수) + 필드 라벨/입력 (최대 10개, required * 표시) |
-| `search` | 가로 나열 필드 라벨/입력 (searchable 필드 최대 5개) + 검색 버튼 |
-| `title` | fontSize/fontWeight/align 적용된 텍스트 |
-| `button` | variant 스타일 적용된 단일 버튼 |
-| `button-bar` | 버튼 목록 가로 나열 |
-| `pagination` | 총 건수 / 페이지 번호 / 건수 선택기 |
-| `divider` | 수평선 |
-| `stats` | "통계 카드 프리뷰" 텍스트 |
-
-**FieldOption 렌더링**: `string | {value, label}` 유니온 타입 처리 (tsc 에러 수정)
-
-### 3.10 BuilderProps.tsx — 우측 속성 패널 (~90줄)
-
-**공통 속성 (모든 블록):**
-- 컴포넌트 종류 (아이콘 + 한글 라벨)
-- 이름 (input, 캔버스 라벨과 양방향 동기화)
-- 위치·크기 (X/Y/W/H 4칸 그리드, 캔버스와 양방향)
-
-**타입별 분기:**
-- `table` → TableProps
-- `form` → FormProps
-- `search` → SearchProps
-- `button` → SingleButtonProps
-- `button-bar` → ButtonBarProps
-- `title` → TitleProps
-
-**공통 삭제 버튼**: 하단 빨간 테두리 버튼
-
-### 3.11 FieldListEditor.tsx — 필드 체크리스트 (~110줄)
-
-table/form/search 속성 패널에서 공통으로 사용하는 필드 목록.
-
-**기능:**
-- 체크박스 토글 (`visible` 또는 `searchable` 속성)
-- 필드 배지 표시 (PK, 필수, 검색, SYS, 계산)
-- 타입 배지 (text, number, date 등)
-- **클릭하면 상세 펼침** (FieldDetail 패널):
-  - 표시 이름, 너비 편집
-  - 토글: 필수, 편집, 검색, 정렬 (dev-toggle 스타일)
-
-### 3.12 타입별 속성 패널
-
-**TableProps.tsx** (~70줄):
-- 페이지 크기 (10/20/50/100)
-- 선택 방식 (없음/단일/다중)
-- 자동 로드, 인라인 편집, 체크박스 토글
-- 스타일 (기본/줄무늬/테두리/컴팩트)
-- FieldListEditor (visible 토글)
-
-**FormProps.tsx** (~40줄):
-- 컬럼 수 (1/2/3칸)
-- 저장 방식 (등록/수정/등록+수정)
-- FieldListEditor (visible 토글)
-
-**SearchProps.tsx** (~50줄):
-- 날짜 범위 검색, 초기화 버튼, 자동 검색 토글
-- 레이아웃 (인라인/세로)
-- FieldListEditor (searchable 토글)
-
-**ButtonProps.tsx** (~140줄):
-- `SingleButtonProps`: 텍스트, 액션 종류(12종), 스타일(5종), 확인 메시지
-- `ButtonBarProps`: 버튼 목록 CRUD (추가/삭제/편집), 각 버튼 액션+스타일 설정
-
-**TitleProps.tsx** (~40줄):
-- 텍스트, 크기(4단계), 굵기(4단계), 정렬(3종)
-
----
-
-## 4. DB 변경
-
-### 4.1 templates 테이블 (신규)
-
-```sql
-CREATE TABLE templates (
-    template_id     VARCHAR(50) PRIMARY KEY,
-    name            VARCHAR(200) NOT NULL,
-    category        VARCHAR(50),
-    description     TEXT,
-    primary_table   VARCHAR(100) NOT NULL,
-    fields          JSONB NOT NULL,
-    views           JSONB NOT NULL,
-    connections     JSONB DEFAULT '[]',
-    company_code    VARCHAR(20) NOT NULL DEFAULT '*',
-    version         INTEGER DEFAULT 1,
-    status          VARCHAR(20) DEFAULT 'draft',
-    created_by      VARCHAR(50),
-    created_date    TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    updated_by      VARCHAR(50),
-    updated_date    TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    is_active       VARCHAR(1) DEFAULT 'Y'
-);
-```
-
-**인덱스 3개:**
-- `idx_templates_company` (company_code)
-- `idx_templates_table` (primary_table)
-- `idx_templates_status` (status)
-
-**실행 대상**: `211.115.91.141:11134/test_dev` (2026-04-10 실행 완료)
-
-### 4.2 application.yml DB 접속 변경
-
-```
-변경 전: jdbc:postgresql://39.117.244.52:11132/testvex (pw: ph0909!!)
-변경 후: jdbc:postgresql://211.115.91.141:11134/test_dev (pw: vexplor0909!!)
-```
-
-39.117 서버 폐기에 따른 변경.
-
----
-
-## 5. 덕일 스타일 / 프로젝트 컨벤션 준수
-
-| 규칙 | 준수 |
-|---|---|
-| 3레이어 (Controller → Service → XML) | ✅ |
-| Mapper Interface 금지 | ✅ — sqlSession 직접 호출 |
-| Map<String, Object> 사용, DTO 금지 | ✅ — ApiResponse만 예외 |
-| BaseService 상속 | ✅ |
-| @Autowired CommonService | ✅ |
-| XML 파일명: 소문자, Mapper 안 붙임 | ✅ — `template.xml` |
-| XML namespace: 파일명과 동일 | ✅ — `namespace="template"` |
-| SQL: UPPER_SNAKE | ✅ |
-| SELECT 쉼표: 앞에 | ✅ |
-| #{파라미터}: snake_case | ✅ |
-| OGNL test: 바깥 작은따옴표 | ✅ |
-| 프론트 타입: Record<string, any> | ✅ — FieldConfig/Component만 예외 |
-| 개발자 모드 CSS: IDE 스타일 (v5 코스믹 아님) | ✅ — `--d-*` 변수 체계 |
-| Zustand devtools 미들웨어 | ✅ |
-| 기존 apiClient 사용 | ✅ |
-
----
-
-## 6. 검증 결과
-
-| 검증 항목 | 결과 |
-|---|---|
-| `./gradlew compileJava` | BUILD SUCCESSFUL |
-| `./gradlew bootJar` | BUILD SUCCESSFUL |
-| `npx tsc --noEmit` (빌더 관련) | 에러 0개 |
-| DB 테이블 생성 (test_dev) | CREATE TABLE + INDEX 3개 성공 |
-
----
-
-## 7. Phase 3 범위 밖 (다음에 해야 할 것)
-
-| 항목 | 담당 Phase | 비고 |
-|---|---|---|
-| 메타 드리프트 감지 (빌더에서 Template 열 때 최신 메타 비교) | Phase 3+ | 설계서 Section 9에 정의됨 |
-| DataPort 연결 UI (속성 패널에서 연결 추가/삭제) | Phase 3+ | mockup의 `propsConnections()` 참고 |
-| 기존 Template 목록/로드 UI | Phase 3+ | 현재는 새 템플릿 생성만 |
-| 자동생성 + 프리셋 (⚡ 버튼) | Phase 6 | 설계서 명시 |
-| stats/chart 타입 속성 패널 | Phase 3+ | 현재 빈 구조만 |
-| 필드 순서 드래그 재정렬 | Phase 3+ | 현재 order 기준 정렬만 |
-| Template 게시 워크플로우 UI | Phase 4 | 대시보드에서 게시된 Template 사용 |
-
----
-
-## 8. 빌더 사용 흐름
-
-```
-1. /admin/builder 접속
-2. 도구모음에서 테이블 선택 (예: sales_order_mng)
-   → Phase 1 API로 FieldConfig[] 자동 로드
-3. 팔레트에서 컴포넌트 선택 → 캔버스에 드래그 또는 클릭
-   (예: 제목 → 검색 필터 → 데이터 테이블 → 페이지네이션)
-4. 캔버스에서 블록 드래그(이동) / 우하단 핸들로 리사이즈
-5. 블록 클릭 → 우측 속성 패널에서 설정 조정
-   (필드 ON/OFF, 페이지 크기, 선택 모드 등)
-6. 뷰 탭으로 목록/등록/수정 전환
-   (등록/수정은 팝업 프레임 안에서 편집)
-7. 💾 저장 → Template JSON이 DB에 저장
-8. 기존 Template 로드 → fromTemplate()으로 상태 복원
-```
diff --git a/notes/gbpark/2026-04-10-phase4-implementation-log.md b/notes/gbpark/2026-04-10-phase4-implementation-log.md
deleted file mode 100644
index 10569c67..00000000
--- a/notes/gbpark/2026-04-10-phase4-implementation-log.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# Phase 4 구현 작업기록 — 대시보드(=메뉴) 사용자 화면 시스템
-
-> **작업일**: 2026-04-10
-> **설계서**: `notes/gbpark/2026-04-10-phase4-dashboard-menu.md`
-> **상태**: 구현 완료 + 빌드 검증 통과 + DB 테이블 생성 완료
-
----
-
-## 1. 생성/수정된 파일 (19개)
-
-### 1.1 백엔드 (6개)
-
-| 파일 | 상태 | 역할 |
-|---|---|---|
-| `backend-spring/src/main/resources/mapper/dashboard.xml` | 수정 (VEX 레거시 교체) | 대시보드/카드/사이드바 SQL 12쿼리 |
-| `backend-spring/src/main/resources/mapper/userOverride.xml` | 신규 | 사용자 오버라이드 UPSERT/조회/삭제 3쿼리 |
-| `backend-spring/src/main/java/com/erp/service/DashboardService.java` | 수정 (VEX 레거시 교체) | BaseService + sqlSession 덕일 스타일 |
-| `backend-spring/src/main/java/com/erp/service/UserOverrideService.java` | 신규 | JSONB 파싱/직렬화 + UPSERT |
-| `backend-spring/src/main/java/com/erp/controller/DashboardController.java` | 수정 (VEX 레거시 교체) | `/api/dashboards` 엔드포인트 |
-| `backend-spring/src/main/java/com/erp/controller/UserOverrideController.java` | 신규 | `/api/overrides` 엔드포인트 |
-
-### 1.2 프론트엔드 (13개)
-
-| 파일 | 역할 |
-|---|---|
-| `frontend/lib/api/dashMenu.ts` | 대시보드/카드/사이드바 API 래퍼 |
-| `frontend/lib/api/override.ts` | 사용자 오버라이드 API 래퍼 |
-| `frontend/stores/dashboardStore.ts` | Zustand 대시보드 상태관리 |
-| `frontend/styles/dashboard.css` | v5 Cosmic Glassmorphism 대시보드 CSS |
-| `frontend/components/dash/DashboardLayout.tsx` | 전체 레이아웃 (사이드바+캔버스+모달) |
-| `frontend/components/dash/DashboardSidebar.tsx` | 대시보드 목록 사이드바 |
-| `frontend/components/dash/DashboardToolbar.tsx` | 상단 툴바 (편집/저장/+템플릿) |
-| `frontend/components/dash/DashboardCanvas.tsx` | 자유 배치 캔버스 + 드래그/리사이즈 |
-| `frontend/components/dash/DashboardCard.tsx` | 카드 (Template→FcTable/FcSearch 렌더) |
-| `frontend/components/dash/DashboardEmpty.tsx` | 빈 대시보드 안내 |
-| `frontend/components/dash/TemplateLibraryModal.tsx` | 템플릿 라이브러리 모달 |
-| `frontend/components/dash/CardSettingsPanel.tsx` | 카드 설정 패널 (컬럼 ON/OFF) |
-| `frontend/components/dash/CardMiniView.tsx` | 접힌 카드 미니 뷰 |
-| `frontend/app/(main)/dash/page.tsx` | `/dash` 라우트 페이지 |
-
----
-
-## 2. VEX 레거시 교체 사항
-
-### 2.1 기존 DashboardService/Controller (VEX)
-
-**교체 전**: JdbcTemplate 직접 사용, `dashboards`+`dashboard_elements` VEX 테이블, `/api/dashboard` (단수)
-**교체 후**: BaseService + sqlSession 덕일 스타일, `DASHBOARDS`+`DASHBOARD_CARDS` 테이블, `/api/dashboards` (복수)
-
-기존 VEX 대시보드의 유틸리티 엔드포인트 (`execute-query`, `execute-dml`, `table-schema`, `fetch-external-api`)는 제거됨. 필요 시 별도 유틸리티 컨트롤러로 분리 가능.
-
-### 2.2 프론트엔드 경로 분리
-
-| 구분 | VEX 레거시 | Phase 4 (INVYONE) |
-|---|---|---|
-| API 파일 | `lib/api/dashboard.ts` (유지) | `lib/api/dashMenu.ts` (신규) |
-| 컴포넌트 | `components/dashboard/` (유지) | `components/dash/` (신규) |
-| 페이지 | `app/(main)/dashboard/` (유지) | `app/(main)/dash/` (신규) |
-
-VEX 레거시 파일은 건드리지 않음. 나중에 VEX 완전 폐기 시 삭제.
-
----
-
-## 3. 백엔드 상세
-
-### 3.1 dashboard.xml (namespace="dashboard", 12쿼리)
-
-| 쿼리 ID | 용도 |
-|---|---|
-| `getDashboardList` | 대시보드 목록 (유저+회사공통, 페이지네이션) |
-| `getDashboardListCnt` | 목록 카운트 |
-| `getDashboardInfo` | 대시보드 단건 |
-| `insertDashboard` | 대시보드 생성 |
-| `updateDashboard` | 대시보드 수정 (이름/아이콘/순서) |
-| `deleteDashboard` | 대시보드 소프트 삭제 (IS_ACTIVE='D') |
-| `getDashboardCardList` | 카드 목록 (TEMPLATES JOIN으로 기본 정보 포함) |
-| `insertDashboardCard` | 카드 추가 |
-| `updateDashboardCard` | 카드 업데이트 (위치/크기/접기) |
-| `updateCardPosition` | 카드 일괄 위치 업데이트 (단건, for loop용) |
-| `deleteDashboardCard` | 카드 소프트 삭제 |
-| `getSidebarMenu` | 사이드바 메뉴 (간략 대시보드 목록) |
-
-### 3.2 userOverride.xml (namespace="userOverride", 3쿼리)
-
-| 쿼리 ID | 용도 |
-|---|---|
-| `getUserOverride` | 유저+카드 기준 오버라이드 조회 |
-| `upsertUserOverride` | ON CONFLICT UPSERT (UNIQUE(user_id, card_id)) |
-| `deleteUserOverride` | 오버라이드 삭제 |
-
-### 3.3 DashboardService.java (~100줄)
-
-덕일 스타일 준수: `extends BaseService`, `@Autowired CommonService`, `sqlSession` 직접 호출.
-- ID 생성: `dash_` + UUID 12자 / `card_` + UUID 12자
-- 기본값: icon=📋, position_x=50, width=600, height=400
-
-### 3.4 DashboardController.java (~120줄)
-
-| 메서드 | 엔드포인트 | 설명 |
-|---|---|---|
-| `GET` | `/api/dashboards` | 목록 (keyword, page, limit) |
-| `GET` | `/api/dashboards/{id}` | 단건 |
-| `POST` | `/api/dashboards` | 생성 |
-| `PUT` | `/api/dashboards/{id}` | 수정 |
-| `DELETE` | `/api/dashboards/{id}` | 삭제 |
-| `GET` | `/api/dashboards/{id}/cards` | 카드 목록 (Template JOIN) |
-| `POST` | `/api/dashboards/{id}/cards` | 카드 추가 |
-| `PUT` | `/api/dashboards/{id}/cards/{cardId}` | 카드 수정 |
-| `DELETE` | `/api/dashboards/{id}/cards/{cardId}` | 카드 삭제 |
-| `PUT` | `/api/dashboards/{id}/cards/batch` | 카드 일괄 위치 업데이트 |
-| `GET` | `/api/dashboards/sidebar/menu` | 사이드바 메뉴 |
-
-### 3.5 UserOverrideController.java (~40줄)
-
-| 메서드 | 엔드포인트 | 설명 |
-|---|---|---|
-| `GET` | `/api/overrides?card_id=xxx` | 조회 |
-| `PUT` | `/api/overrides` | UPSERT |
-| `DELETE` | `/api/overrides?card_id=xxx` | 삭제 |
-
----
-
-## 4. 프론트엔드 상세
-
-### 4.1 dashMenu.ts — API 래퍼 (~55줄)
-
-```
-getDashboardList, getDashboardInfo, insertDashboard, updateDashboard, deleteDashboard
-getDashboardCards, insertDashboardCard, updateDashboardCard, deleteDashboardCard
-updateCardPositionsBatch, getSidebarMenu
-```
-
-★ 전부 `Record<string, any>` — 별도 인터페이스 정의 안 함
-
-### 4.2 dashboardStore.ts — Zustand (~80줄)
-
-상태: `dashboards[]`, `activeDashboardId`, `cards[]`, `editMode`, `loading`
-액션: `setDashboards`, `setActiveDashboard`, `setCards`, `addCard`, `updateCard`, `removeCard`, `toggleEditMode`, `addDashboard`, `updateDashboardInList`, `removeDashboard`
-
-### 4.3 DashboardLayout.tsx — 전체 오케스트레이터 (~180줄)
-
-```
-┌──────────────────────────────────────────────────┐
-│ DashboardLayout                                  │
-├────────────┬─────────────────────────────────────┤
-│ Sidebar    │ Toolbar                             │
-│ (220px)    ├─────────────────────────────────────┤
-│ - 목록     │ Canvas                              │
-│ - +추가    │ - DashboardCard × N                 │
-│            │ - 드래그/리사이즈                     │
-│            │ + CardSettingsPanel (조건부)          │
-├────────────┴─────────────────────────────────────┤
-│ TemplateLibraryModal (조건부)                     │
-└──────────────────────────────────────────────────┘
-```
-
-### 4.4 DashboardCanvas.tsx — 드래그/리사이즈 (~130줄)
-
-mockup의 `02-canvas.js` 로직 포팅:
-- mousedown → 드래그 또는 리사이즈 모드 판별
-- mousemove → 캔버스 경계 clamp 적용
-- mouseup → store에 최종 위치 반영
-- snap 없음 (px 단위), 캔버스 밖 방지
-
-### 4.5 DashboardCard.tsx — Template 렌더 (~160줄)
-
-카드 안에서 Phase 2 컴포넌트가 실제 데이터로 동작:
-1. `primaryTable`로 `getMetaFields()` → FieldConfig[] 로드
-2. `fcList()` → 실제 데이터 조회
-3. `FcSearch` + `FcTable` + `FcPagination` 렌더
-4. 검색 → 재조회, 페이지네이션 → 재조회
-
-### 4.6 TemplateLibraryModal.tsx (~130줄)
-
-mockup의 `06-modals.css` 스타일 포팅:
-- 좌측 카테고리 (7종: 전체/영업/생산/인사/재고/재무/관리자)
-- 우측 템플릿 카드 그리드 (auto-fill, minmax 180px)
-- 검색 필터
-- 클릭 → `onSelectTemplate` 콜백
-
-### 4.7 CardSettingsPanel.tsx (~100줄)
-
-- 필드 visible 토글 (ON/OFF)
-- `getUserOverride` + `upsertUserOverride` 실시간 저장
-- JSONB overrides 구조: `{ fields: { column: { visible: bool } } }`
-
-### 4.8 dashboard.css — v5 토큰 전부 사용 (~350줄)
-
-| 용도 | 토큰 |
-|---|---|
-| 배경 | `var(--v5-glass)`, `var(--v5-surface)` |
-| 테두리 | `var(--v5-glass-border)`, `var(--v5-border-subtle)` |
-| 텍스트 | `var(--v5-text)`, `var(--v5-text-sec)`, `var(--v5-text-muted)` |
-| 강조 | `var(--v5-primary)`, `var(--v5-primary-light)` |
-| 글로우 | `var(--v5-glow-sm)`, `var(--v5-glow-md)` |
-| 유리 | `backdrop-filter: blur(20px) saturate(1.4)` |
-
-다크/라이트 모드 변형: `.dark` 선택자 사용 (mockup 패턴 동일)
-
----
-
-## 5. DB 테이블 (✅ 생성 완료)
-
-**실행 대상**: `211.115.91.141:11134/test_dev` (2026-04-10 실행 완료)
-
-### 5.1 VEX 레거시 처리
-
-기존 `dashboards` 테이블(VEX 스키마: id, title, description, tags, settings 등)이 있어서 **`dashboards_vex_backup`으로 rename** 후 Phase 4 테이블 신규 생성.
-
-### 5.2 생성된 테이블 3개 + 인덱스 3개
-
-| 테이블 | PK | 용도 |
-|---|---|---|
-| `DASHBOARDS` | DASHBOARD_ID (VARCHAR 50) | 대시보드 (=메뉴 항목) |
-| `DASHBOARD_CARDS` | CARD_ID (VARCHAR 50) | 대시보드 위 카드 배치 (위치/크기) |
-| `USER_OVERRIDES` | OVERRIDE_ID (VARCHAR 50) | 사용자별 카드 오버라이드 (JSONB) |
-
-**DASHBOARDS 컬럼**: DASHBOARD_ID, NAME, ICON, DISPLAY_ORDER, COMPANY_CODE, USER_ID, IS_ACTIVE, CREATED_BY, CREATED_DATE, UPDATED_BY, UPDATED_DATE
-
-**DASHBOARD_CARDS 컬럼**: CARD_ID, DASHBOARD_ID, TEMPLATE_ID, POSITION_X, POSITION_Y, WIDTH, HEIGHT, IS_COLLAPSED, DISPLAY_ORDER, IS_ACTIVE, CREATED_DATE, UPDATED_DATE
-
-**USER_OVERRIDES 컬럼**: OVERRIDE_ID, USER_ID, CARD_ID, OVERRIDES(JSONB), CREATED_DATE, UPDATED_DATE + `UNIQUE(USER_ID, CARD_ID)`
-
-**인덱스**: `idx_dashboards_company`, `idx_dashboards_user`, `idx_dcards_dashboard`
-
-★ DB FK 제약조건 안 걸음 (앱 레벨 관리, Phase 4 설계서 Section 3 참조)
-
----
-
-## 6. 덕일 스타일 / 프로젝트 컨벤션 준수
-
-| 규칙 | 준수 |
-|---|---|
-| 3레이어 (Controller → Service → XML) | ✅ |
-| Mapper Interface 금지 | ✅ — sqlSession 직접 호출 |
-| Map<String, Object> 사용, DTO 금지 | ✅ — ApiResponse만 예외 |
-| BaseService 상속 | ✅ |
-| @Autowired CommonService | ✅ |
-| XML 파일명: 소문자, Mapper 안 붙임 | ✅ — `dashboard.xml`, `userOverride.xml` |
-| XML namespace: 파일명과 동일 | ✅ |
-| SQL: UPPER_SNAKE | ✅ |
-| SELECT 쉼표: 앞에 | ✅ |
-| #{파라미터}: snake_case | ✅ |
-| OGNL test: 바깥 작은따옴표 | ✅ |
-| 프론트 타입: Record<string, any> | ✅ — FieldConfig만 예외 |
-| v5 CSS 토큰 사용, 즉흥 값 금지 | ✅ |
-| 컴팩트 폰트 사이즈 (0.55~0.85rem) | ✅ |
-
----
-
-## 7. 검증 결과
-
-| 검증 항목 | 결과 |
-|---|---|
-| `./gradlew compileJava` | BUILD SUCCESSFUL |
-| `npx tsc --noEmit` (Phase 4 파일) | 에러 0개 |
-| 기존 VEX 코드 에러 | Phase 4와 무관 (기존 camelCase/snake_case 불일치 에러) |
-
----
-
-## 8. 접속 경로
-
-- 대시보드 메뉴 시스템: `/dash`
-- 개발자 빌더: `/admin/builder` (Phase 3)
-- 테스트 페이지: `/test-fc` (Phase 2)
-
----
-
-## 9. Phase 4 범위 밖 (다음에 해야 할 것)
-
-| 항목 | 담당 Phase | 비고 |
-|---|---|---|
-| AppLayout 사이드바 통합 (대시보드 목록을 기존 사이드바에 표시) | Phase 4+ | 현재는 `/dash` 페이지에 자체 사이드바 |
-| 대시보드 순서 드래그 재정렬 | Phase 4+ | 현재 display_order는 수동 |
-| Template 게시 워크플로우 (빌더에서 publish → 라이브러리에 표시) | Phase 3+ | 현재 빌더 publish API는 구현됨 |
-| 카드 간 DataPort 연결 (제어 모드) | Phase 5 | 대시보드 캔버스 위에 오버레이 |
-| 사용자 오버라이드 실시간 반영 (FcTable에 override 적용) | Phase 4+ | 현재 settings에서 toggle만 저장 |
-| 카드 미니 KPI 뷰 (접었을 때 실제 데이터 집계) | Phase 4+ | 현재 템플릿 이름/분류만 표시 |
-| 대시보드 아이콘 선택 UI | Phase 4+ | 현재 기본 📋 |
-
----
-
-## 10. 사용 흐름
-
-```
-1. /dash 접속
-2. 좌측 사이드바: 대시보드 목록 표시
-3. "+ 새 대시보드" → 이름 입력 → 사이드바에 자동 등록
-4. 대시보드 클릭 → 캔버스 표시
-5. "편집" 버튼 → 편집 모드 (드래그/리사이즈)
-6. "+ 템플릿 추가" → 라이브러리 모달 → 게시된 Template 선택
-7. → 캔버스에 카드 추가 (FcTable/FcSearch가 실제 DB 데이터 표시)
-8. 카드 ⚙ → 컬럼 ON/OFF (사용자 오버라이드)
-9. 카드 ▼ → 접기 (미니 뷰)
-10. "저장" → DB에 카드 위치/크기 일괄 저장
-11. 다른 대시보드 클릭 → 전환 (편집 모드 자동 해제)
-```
diff --git a/notes/gbpark/2026-04-10-phase5-control-mode.md b/notes/gbpark/2026-04-10-phase5-control-mode.md
deleted file mode 100644
index 3cdadae3..00000000
--- a/notes/gbpark/2026-04-10-phase5-control-mode.md
+++ /dev/null
@@ -1,357 +0,0 @@
-# Phase 5: 제어 모드 — 비즈니스 룰 / 데이터 흐름
-
-> **목적**: 대시보드의 카드(Template) 간 비즈니스 룰과 데이터 흐름을 시각적으로 정의하는 제어 모드 구현
-> **전제 조건**: Phase 1~4 완료 (DB 메타 + 컴포넌트 + 빌더 + 대시보드에 카드 배치까지 동작)
-> **산출물**: 제어 모드 UI (SVG 연결선 + 테이블 노드 + 규칙 빌더) + 비즈니스 룰 엔진
-> **다음 단계**: Phase 6 (자동생성/프리셋 — 편의 기능, 맨 마지막)
-
----
-
-## 1. 핵심 개념
-
-**제어 모드 = 같은 캔버스에서 "데이터가 어떻게 흐르는지" 보고 편집하는 모드**
-
-일반 모드: 카드(화면)를 사용
-제어 모드: 카드 간 관계/비즈니스 룰을 설정
-
-```
-[수주관리 카드]  ──수주 확정──→  [발주관리 카드]  ──금액>1000만──→  [프로젝트 카드]
-                  (자동 등록)                     (조건분기)
-```
-
----
-
-## 2. 두 가지 기능
-
-### 2.1 읽기 모드 — 흐름 시각화 (카드 클릭)
-
-카드 클릭 → 해당 카드의 데이터 소스(테이블) + 관련 테이블 + 비즈니스 룰이 트리 형태로 표시
-
-mockup 참조: `js/06-control-mode.js`의 `showCardFlow()`, `enterControlMode()`
-
-### 2.2 편집 모드 — 규칙 빌더 (드래그앤드롭)
-
-팔레트에서 테이블 노드 + 제어 노드를 캔버스에 드래그, I/O 포트로 연결
-
-mockup 참조: `js/07-rule-builder.js`의 `dropTable()`, `dropControl()`, `initPortEvents()`
-
----
-
-## 3. 읽기 모드 상세
-
-### 3.1 진입
-
-캔버스 상단 툴바의 **`⚡ 제어`** 버튼 클릭 → 제어 모드 진입
-
-### 3.2 시각적 변화
-
-1. 캔버스 격자가 시안 톤으로 변경 (`rgba(0,206,201,.22)`)
-2. 모든 카드 반투명 (opacity 0.5)
-3. 편집 모드 자동 비활성화
-
-### 3.3 카드 클릭 → 흐름 표시
-
-1. 클릭된 카드만 좌측 고정 + opacity 1, 나머지 fade out (0.08)
-2. 카드의 `data-source-table`에서 소스 테이블 추출
-3. Phase 1의 `GET /api/meta/tables/{tableName}/relations`로 관계 조회
-4. BFS로 도달 가능한 전체 체인 계산
-5. **트리 확산 애니메이션**: 선이 그려짐 → 노드 reveal → 또 선 → 또 노드 (depth별 지연)
-
-### 3.4 시각 요소
-
-**테이블 노드** (mockup: `.tbl-node`):
-```
-┌─ 🏢 DEPARTMENT ─── 4컬럼 ──┐
-│ ● dept_code    VARCHAR  PK │
-│ ○ dept_name    VARCHAR     │
-│ ○ company_code VARCHAR  FK │
-│ ○ parent_dept  VARCHAR  FK │
-└────────────────────────────┘
-```
-
-**연결선 4종** (SVG bezier):
-
-| 타입 | 색상 | CSS 클래스 | 용도 |
-|---|---|---|---|
-| 소스 | 핑크 (#fd79a8) | `ctrl-line-tpl` | 카드 → 소스 테이블 |
-| 자동실행 | 보라 (#6c5ce7) | `ctrl-line-auto` | 테이블 A → 테이블 B 자동 등록 |
-| 조건분기 | 앰버 (#fdcb6e) | `ctrl-line-cond` | 조건 충족 시 실행 |
-| FK | 시안 (#00cec9) | `ctrl-line` | 외래키 관계 (기본 비표시, 비즈니스 룰만) |
-
-**연결선 위 뱃지** (mockup: `.ctrl-badge`):
-- 클릭 가능, 해당 룰의 상세 정보 표시
-- 조건분기 뱃지: Yes/No 분기 경로 표시
-
-### 3.5 라이트 모드 보정
-
-라이트 모드에서 연결선은 더 진하게 (배경 대비):
-- 시안 → `#00a89e`, 보라 → `#5b4acf`, 앰버 → `#d4a017`, 핑크 → `#e0559e`
-
----
-
-## 4. 규칙 빌더 상세
-
-### 4.1 제어 노드 16종
-
-mockup의 `CTRL_NODE_TYPES` (js/07-rule-builder.js):
-
-| 카테고리 | 노드 | 아이콘 | RGB | 특수 출력 포트 |
-|---|---|---|---|---|
-| 트리거 | 타이머 | ⏱ | 0,206,201 | — |
-| 조건 | 조건분기 | ◇ | 253,203,110 | Yes/No |
-| 조건 | 데이터 검증 | ✔ | 255,107,129 | Pass/Fail |
-| 액션 | 상태 변경 | 🔄 | 108,92,231 | — |
-| 액션 | 자동 등록 | 📝 | 85,239,196 | — |
-| 액션 | 계산/수식 | 🧮 | 45,152,218 | — |
-| 액션 | 삭제/보관 | 🗑 | 255,71,87 | — |
-| 액션 | 문서 생성 | 📄 | 162,155,254 | — |
-| 흐름 | 승인/결재 | ✋ | 255,165,2 | Approved/Rejected |
-| 흐름 | 대기/지연 | ⏳ | 72,219,251 | — |
-| 흐름 | 반복 | 🔁 | 223,142,254 | Each/Done |
-| 흐름 | 병렬 실행 | 🔀 | 0,206,201 | — |
-| 흐름 | 병합/합류 | ⤵ | 149,175,192 | — |
-| 연동 | 외부 호출 | 🌐 | 116,185,255 | — |
-| 연동 | 알림 발송 | 📨 | 253,121,168 | — |
-| 기록 | 로그 기록 | 📜 | 150,150,160 | — |
-
-### 4.2 노드 구조
-
-```
-┌─ [In] ──────────────────── [Out] ──┐
-│  📝 자동 등록                       │
-│ ─────────────────────────          │
-│  클릭하여 설정                      │
-│ (대상 테이블, 필드 매핑)            │  [Yes]
-│                                    │  [No]
-└────────────────────────────────────┘
-```
-
-각 노드에 I/O 포트:
-- **Input 포트** (좌측): 데이터/이벤트를 받음
-- **Output 포트** (우측): 결과를 내보냄
-- 조건분기/승인 등은 다중 output (Yes/No)
-
-### 4.3 포트 연결 인터랙션
-
-1. output 포트 mousedown → 연결선 드래그 시작 (SVG 임시선)
-2. input 포트 위에서 mouseup → 연결 완료
-3. 연결 중간에 삭제 뱃지 (hover 시 표시)
-4. 같은 노드끼리 연결 금지, 중복 연결 금지
-
-### 4.4 노드 설정 팝오버
-
-노드 body 클릭 → 설정 팝오버:
-
-| 노드 타입 | 설정 항목 |
-|---|---|
-| 자동 등록 | 대상 테이블, 필드 매핑 (소스→대상), 조건 |
-| 상태 변경 | 대상 테이블, 대상 필드, 변경값 |
-| 조건분기 | 조건식 (필드, 연산자, 값) |
-| 승인/결재 | 결재선, 승인자 |
-| 타이머 | 실행 주기, 시작 조건 |
-| 외부 호출 | URL, 메서드, 파라미터 매핑 |
-| 알림 발송 | 대상 (사용자/이메일/슬랙), 메시지 템플릿 |
-| 계산/수식 | 수식 (computed 문법), 대상 필드 |
-
----
-
-## 5. 데이터 모델
-
-### 5.1 비즈니스 룰 DB
-
-**`business_rules` 테이블 (신규 생성):**
-
-```sql
-CREATE TABLE business_rules (
-    rule_id         VARCHAR(50) PRIMARY KEY,
-    dashboard_id    VARCHAR(50),             -- ★ DB FK 제약조건 안 걸음 (앱 레벨 관리)
-    name            VARCHAR(200),
-    description     TEXT,
-    nodes           JSONB NOT NULL,         -- 노드 배열 (위치, 타입, 설정)
-    connections     JSONB NOT NULL,         -- 연결 배열 (from → to)
-    is_enabled      BOOLEAN DEFAULT TRUE,
-    company_code    VARCHAR(20) NOT NULL,
-    created_by      VARCHAR(50),
-    created_date    TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    updated_by      VARCHAR(50),
-    updated_date    TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    is_active       VARCHAR(1) DEFAULT 'Y'
-);
-
-CREATE INDEX idx_brules_dashboard ON business_rules(dashboard_id);
-```
-
-### 5.2 노드 JSON 구조
-
-```
-★ 별도 인터페이스 정의 안 함 — Record<string, any> 사용
-★ JSONB로 저장되므로 구조만 문서화
-
-노드 (Record<string, any>):
-  id, type(CTRL_NODE_TYPES 키 또는 'table'), label, x, y,
-  config(타입별 설정), table_name(table 노드일 때)
-
-연결 (Record<string, any>):
-  id, from_node_id, from_port('out'|'yes'|'no'|'each'|'done'),
-  to_node_id, to_port('in')
-
-비즈니스 룰 (Record<string, any>):
-  rule_id, dashboard_id, name, nodes(배열), connections(배열), is_enabled
-```
-
----
-
-## 6. 백엔드 API
-
-### 6.1 관계 조회 (★ table_relationships 기반 — Phase 1과 소스 분리)
-
-```
-GET    /api/meta/tables/{tableName}/relations        → 테이블 간 업무 관계
-```
-
-**★ 2소스 책임 분리:**
-- Phase 1 `getTableFields()` → `table_type_columns` (필드 레벨 entity 참조 → FieldConfig.ref)
-- Phase 5 `getMetaRelations()` → `table_relationships` (테이블 간 업무 관계 → 제어 모드 흐름)
-- 제어 모드에서 두 소스 필요하면 **서비스 레이어에서 읽기 시점에만 합친다** (저장 구조 통합 안 함)
-
-### 6.2 비즈니스 룰 CRUD
-
-```
-GET    /api/dashboards/{dashboard_id}/rules          → 해당 대시보드의 룰 목록
-GET    /api/rules/{rule_id}                          → 룰 상세 (노드+연결)
-POST   /api/dashboards/{dashboard_id}/rules          → 룰 생성
-PUT    /api/rules/{rule_id}                          → 룰 수정
-DELETE /api/rules/{rule_id}                          → 룰 삭제
-PUT    /api/rules/{rule_id}/toggle                   → 활성/비활성 토글
-```
-
-**★ 덕일 스타일 3레이어. 파일명 1:1 매칭.**
-
-| Java 파일 | XML | namespace |
-|---|---|---|
-| `BusinessRuleController.java` | `businessRule.xml` | `businessRule` |
-| `BusinessRuleService.java` | | |
-
-```java
-@Service
-@Slf4j
-public class BusinessRuleService extends BaseService {
-
-    @Autowired
-    private CommonService commonService;
-
-    public Map<String, Object> getBusinessRuleList(Map<String, Object> params) {
-        commonService.applyPagination(params);
-        int totalCount = sqlSession.selectOne("businessRule.getBusinessRuleListCnt", params);
-        List<Map<String, Object>> list = sqlSession.selectList("businessRule.getBusinessRuleList", params);
-        return commonService.buildListResponse(list, totalCount, params);
-    }
-
-    public Map<String, Object> getBusinessRuleInfo(Map<String, Object> params) {
-        return sqlSession.selectOne("businessRule.getBusinessRuleInfo", params);
-    }
-
-    @Transactional
-    public Map<String, Object> insertBusinessRule(Map<String, Object> params) {
-        // nodes, connections → ObjectMapper로 JSON 문자열 변환 후 #{nodes}::jsonb
-        sqlSession.insert("businessRule.insertBusinessRule", params);
-        return params;
-    }
-
-    @Transactional
-    public void updateBusinessRule(Map<String, Object> params) {
-        sqlSession.update("businessRule.updateBusinessRule", params);
-    }
-
-    @Transactional
-    public int deleteBusinessRule(Map<String, Object> params) {
-        return sqlSession.update("businessRule.deleteBusinessRule", params);
-    }
-}
-```
-
----
-
-## 7. 프론트엔드 구현
-
-### 7.1 파일 구조
-
-```
-frontend/components/control/
-  ├── ControlMode.tsx              ← 제어 모드 오버레이 (캔버스 위에)
-  ├── ControlToolbar.tsx           ← 제어 모드 툴바 (읽기/편집 전환)
-  ├── FlowViewer.tsx              ← 읽기 모드: 카드 흐름 시각화
-  ├── RuleBuilder.tsx             ← 편집 모드: 규칙 빌더
-  ├── TableNode.tsx               ← 테이블 노드 UI
-  ├── ControlNode.tsx             ← 제어 노드 UI (16종)
-  ├── NodeConfigPopover.tsx       ← 노드 설정 팝오버
-  ├── PortHandle.tsx              ← I/O 포트 (드래그 연결)
-  ├── ConnectionLine.tsx          ← SVG bezier 연결선
-  ├── ControlPalette.tsx          ← 제어 모드 팔레트 (사이드바 교체)
-  └── hooks/
-      ├── useControlMode.ts       ← 제어 모드 상태 관리
-      ├── usePortDrag.ts          ← 포트 연결 드래그 로직
-      └── useFlowAnimation.ts    ← 트리 확산 애니메이션
-```
-
-### 7.2 SVG 연결선 렌더링
-
-mockup의 bezier 곡선 방식 그대로:
-
-```typescript
-// from 좌표 (x1,y1) → to 좌표 (x2,y2)
-const dx = x2 - x1;
-const d = `M${x1},${y1} C${x1+dx*0.5},${y1} ${x1+dx*0.5},${y2} ${x2},${y2}`;
-// SVG <path d={d} class="ctrl-line-auto" marker-end="url(#arr-auto)" />
-```
-
-선이 그려지는 애니메이션: `stroke-dashoffset` transition
-
----
-
-## 8. 스타일
-
-제어 모드 전용 스타일은 mockup의 `css/07-control-mode.css` + `css/08-rule-builder.css` 참조.
-
-핵심:
-- 캔버스 격자: 시안 톤 (`rgba(0,206,201,.22)`)
-- 테이블 노드: 시안 보더 + 글래스 배경
-- 연결선: 점선 + 펄스 애니메이션 (`stroke-dasharray: 6 3`)
-- 뱃지: 글래스 + 시안/보라/앰버 보더
-
----
-
-## 9. 참고 파일
-
-| 파일 | 용도 |
-|---|---|
-| `notes/gbpark/2026-04-08-invyone-mockup/js/06-control-mode.js` | **흐름 시각화 (진실의 원천)** — 996줄, enterControlMode, showCardFlow, buildCtrlTree, calcFlowPositions |
-| `notes/gbpark/2026-04-08-invyone-mockup/js/07-rule-builder.js` | **규칙 빌더 (진실의 원천)** — 752줄, 16종 노드, 포트 드래그, 연결 관리, 설정 팝오버 |
-| `notes/gbpark/2026-04-08-invyone-mockup/css/07-control-mode.css` | 제어 모드 스타일 |
-| `notes/gbpark/2026-04-08-invyone-mockup/css/08-rule-builder.css` | 규칙 빌더 스타일 |
-| `notes/gbpark/2026-04-09-invyone-architecture.md` (Section 9 Phase 3) | 제어 플로우 로드맵 |
-| `notes/gbpark/2026-04-08-lowcode-platform-spec.md` | 비즈니스 룰 정의 |
-
----
-
-## 10. 완료 기준
-
-1. **제어 모드 진입/탈출**: ⚡ 버튼으로 토글, 캔버스 시각이 변함
-2. **카드 클릭 → 흐름 표시**: 소스 테이블 + 관련 테이블 + 비즈니스 룰이 트리로 표시
-3. **트리 확산 애니메이션**: 선 → 노드 순서로 연쇄 등장
-4. **4종 연결선**: 소스(핑크), 자동(보라), 조건(앰버), FK(시안) 구분
-5. **팔레트에서 노드 드래그앤드롭**: 테이블 노드 + 제어 노드 캔버스에 배치
-6. **포트 연결**: output → input 드래그로 연결, SVG bezier 곡선
-7. **노드 설정 팝오버**: 타입별 설정 폼이 동작
-8. **규칙 저장/로드**: DB에 저장하고 다시 열면 복원
-9. **빈 영역 클릭 → 흐름 닫기**
-10. **다크/라이트 모드 지원**
-
----
-
-## 11. 다음 단계 연결
-
-Phase 6 (자동생성/프리셋):
-- 테이블 선택 → FieldConfig 기반으로 Template 자동 생성
-- 프리셋 3종 (basic/split/tabs) 자동 배치
-- 이 시점에서 모든 기능이 갖춰져 있으므로, 자동생성이 올바른 Template JSON을 생성할 수 있음
diff --git a/notes/gbpark/2026-04-10-phase5-implementation-log.md b/notes/gbpark/2026-04-10-phase5-implementation-log.md
deleted file mode 100644
index e92b7865..00000000
--- a/notes/gbpark/2026-04-10-phase5-implementation-log.md
+++ /dev/null
@@ -1,368 +0,0 @@
-# Phase 5 구현 작업기록 — 제어 모드 (비즈니스 룰 / 데이터 흐름)
-
-> **작업일**: 2026-04-10
-> **설계서**: `notes/gbpark/2026-04-10-phase5-control-mode.md`
-> **상태**: 구현 완료 + 빌드 검증 통과 + DB 테이블 생성 완료
-
----
-
-## 1. 생성/수정된 파일 (22개)
-
-### 1.1 백엔드 (6개)
-
-| 파일 | 상태 | 역할 |
-|---|---|---|
-| `backend-spring/src/main/resources/mapper/meta.xml` | 수정 | `getMetaRelations` 쿼리 추가 (table_relationships) |
-| `backend-spring/src/main/java/com/erp/service/MetaService.java` | 수정 | `getMetaRelations()` 메서드 추가 |
-| `backend-spring/src/main/java/com/erp/controller/MetaController.java` | 수정 | `GET /api/meta/tables/{tableName}/relations` 엔드포인트 |
-| `backend-spring/src/main/resources/mapper/businessRule.xml` | 신규 | 비즈니스 룰 CRUD 7쿼리 (namespace=`businessRule`) |
-| `backend-spring/src/main/java/com/erp/service/BusinessRuleService.java` | 신규 | 비즈니스 룰 서비스 (JSONB 파싱/직렬화) |
-| `backend-spring/src/main/java/com/erp/controller/BusinessRuleController.java` | 신규 | 룰 CRUD + 토글 엔드포인트 6개 |
-
-### 1.2 프론트엔드 (16개)
-
-| 파일 | 역할 |
-|---|---|
-| `frontend/lib/api/meta.ts` | `getMetaRelations()` 추가 |
-| `frontend/lib/api/businessRule.ts` | 비즈니스 룰 CRUD API 클라이언트 (신규) |
-| `frontend/styles/control-mode.css` | 제어 모드 + 규칙 빌더 CSS (~350줄, mockup 포팅) |
-| `frontend/components/control/hooks/useControlMode.ts` | Zustand 상태관리 + `CTRL_NODE_TYPES` 16종 |
-| `frontend/components/control/hooks/useFlowAnimation.ts` | BFS 체인 + 위치 계산 + 애니메이션 타이밍 |
-| `frontend/components/control/hooks/usePortDrag.ts` | 포트 연결 드래그 로직 |
-| `frontend/components/control/TableNode.tsx` | 테이블 노드 UI (컬럼 목록 + 드래그) |
-| `frontend/components/control/ConnectionLine.tsx` | SVG bezier 연결선 4종 + 마커 + 뱃지 |
-| `frontend/components/control/FlowViewer.tsx` | 읽기 모드: 카드 클릭 → 흐름 시각화 |
-| `frontend/components/control/ControlNode.tsx` | 제어 노드 16종 (I/O 포트 포함) |
-| `frontend/components/control/PortHandle.tsx` | I/O 포트 핸들 (드래그 연결 시작/끝) |
-| `frontend/components/control/NodeConfigPopover.tsx` | 노드 설정 팝오버 (타입별 폼) |
-| `frontend/components/control/ControlPalette.tsx` | 제어 팔레트 (사이드바 교체) |
-| `frontend/components/control/RuleBuilder.tsx` | 편집 모드: 규칙 빌더 (드래그앤드롭) |
-| `frontend/components/control/ControlToolbar.tsx` | 읽기/편집 모드 전환 + 저장 버튼 |
-| `frontend/components/control/ControlMode.tsx` | 제어 모드 오버레이 메인 컴포넌트 |
-
-### 1.3 기존 파일 수정 (3개)
-
-| 파일 | 변경 내용 |
-|---|---|
-| `frontend/components/dash/DashboardToolbar.tsx` | ⚡ 제어 모드 토글 버튼 추가 (제어 진입 시 편집 모드 자동 해제) |
-| `frontend/components/dash/DashboardLayout.tsx` | `ControlMode` 오버레이 통합 + 제어 편집 시 사이드바→팔레트 교체 |
-| `frontend/components/dash/DashboardCanvas.tsx` | `forwardRef` + `control-mode` CSS 클래스 + 제어 모드 시 드래그 비활성화 |
-
----
-
-## 2. 백엔드 상세
-
-### 2.1 Meta Relations API (2소스 책임 분리)
-
-```
-GET /api/meta/tables/{tableName}/relations → table_relationships 기반
-```
-
-**★ Phase 1과 소스 분리:**
-- Phase 1 `getMetaFields()` → `table_type_columns` (필드 레벨 entity 참조 → FieldConfig.ref)
-- Phase 5 `getMetaRelations()` → `table_relationships` (테이블 간 업무 관계 → 제어 모드 흐름)
-- 제어 모드에서 두 소스 필요하면 **서비스 레이어에서 읽기 시점에만 합침**
-
-### 2.2 BusinessRule CRUD (덕일 스타일 3레이어)
-
-| 엔드포인트 | 메서드 | 설명 |
-|---|---|---|
-| `/api/dashboards/{id}/rules` | GET | 대시보드별 룰 목록 (페이지네이션) |
-| `/api/dashboards/{id}/rules` | POST | 룰 생성 (`rule_` + UUID 12자) |
-| `/api/rules/{id}` | GET | 룰 상세 (JSONB → Object 파싱) |
-| `/api/rules/{id}` | PUT | 룰 수정 (Object → JSON 직렬화) |
-| `/api/rules/{id}` | DELETE | 룰 소프트 삭제 (IS_ACTIVE='D') |
-| `/api/rules/{id}/toggle` | PUT | 활성/비활성 토글 |
-
-**businessRule.xml 쿼리 7개:**
-`getBusinessRuleList`, `getBusinessRuleListCnt`, `getBusinessRuleInfo`, `insertBusinessRule`, `updateBusinessRule`, `deleteBusinessRule`, `toggleBusinessRule`
-
-**JSONB 처리**: `nodes`/`connections` → `ObjectMapper`로 파싱/직렬화 + `#{nodes}::jsonb` 캐스팅
-
----
-
-## 3. 프론트엔드 상세
-
-### 3.1 useControlMode — Zustand 상태관리 (~160줄)
-
-| 상태 | 타입 | 설명 |
-|---|---|---|
-| `active` | boolean | 제어 모드 ON/OFF |
-| `mode` | 'view' \| 'edit' | 읽기/편집 모드 |
-| `activeFlowCardId` | string \| null | 흐름 표시 중인 카드 |
-| `flowEdges` | Record[] | BFS 결과 엣지 배열 |
-| `tablePositions` | Record | 테이블 노드 위치 |
-| `ruleNodes` | Record[] | 규칙 빌더 노드 |
-| `ruleConnections` | Record[] | 규칙 빌더 연결 |
-| `configNodeId` | string \| null | 설정 팝오버 대상 노드 |
-
-**CTRL_NODE_TYPES 16종 (mockup 그대로):**
-
-| 카테고리 | 노드 | 아이콘 | 특수 포트 |
-|---|---|---|---|
-| 트리거 | 타이머 | ⏱ | — |
-| 조건 | 조건분기 | ◇ | Yes/No |
-| 조건 | 데이터 검증 | ✔ | Pass/Fail |
-| 액션 | 상태 변경 | 🔄 | — |
-| 액션 | 자동 등록 | 📝 | — |
-| 액션 | 계산/수식 | 🧮 | — |
-| 액션 | 삭제/보관 | 🗑 | — |
-| 액션 | 문서 생성 | 📄 | — |
-| 흐름 | 승인/결재 | ✋ | Approved/Rejected |
-| 흐름 | 대기/지연 | ⏳ | — |
-| 흐름 | 반복 | 🔁 | Each/Done |
-| 흐름 | 병렬 실행 | 🔀 | — |
-| 흐름 | 병합/합류 | ⤵ | — |
-| 연동 | 외부 호출 | 🌐 | — |
-| 연동 | 알림 발송 | 📨 | — |
-| 기록 | 로그 기록 | 📜 | — |
-
-### 3.2 FlowViewer — 읽기 모드 (카드 클릭 → 흐름 시각화)
-
-**흐름:**
-1. 캔버스에서 카드 클릭
-2. `getMetaRelations(sourceTable)` → 업무 관계 조회
-3. BFS로 도달 가능한 전체 체인 계산 (depth 무제한)
-4. `calcFlowPositions()` — 카드 우측에 depth별 트리 배치 (colGap=270~350, rowGap=240)
-5. `calcAnimationTimings()` — depth별 지연 (STEP=500ms, NODE_D=350ms)
-6. **트리 확산 애니메이션**: 선 → 노드 순서로 연쇄 등장
-
-**시각 효과:**
-- 선택된 카드: opacity 1 + 좌측 고정 + 시안 보더
-- 나머지 카드: opacity 0.08
-- 테이블 노드: scale(0.3) → scale(1) 트랜지션
-- 연결선: `stroke-dashoffset` draw 애니메이션 → pulse 복원
-- 빈 영역 클릭: 흐름 닫기 (모든 카드 0.5로 복원)
-- 노드 드래그: 실시간 위치 업데이트 + 선 재그리기
-
-### 3.3 RuleBuilder — 편집 모드 (규칙 빌더)
-
-**흐름:**
-1. 사이드바 → 제어 팔레트 교체 (DB 테이블 + 제어 노드 16종)
-2. 팔레트에서 캔버스로 드래그앤드롭 → 노드 생성
-3. 노드 헤더 드래그 → 이동
-4. output 포트 mousedown → bezier 임시선 → input 포트 mouseup → 연결 생성
-5. 연결 중간 hover → 삭제 뱃지 (✕)
-6. 노드 body 클릭 → 설정 팝오버 (타입별 폼)
-7. "규칙 저장" → `insertBusinessRule()` / `updateBusinessRule()`
-
-**포트 연결 규칙:**
-- 같은 노드끼리 연결 금지
-- 중복 연결 금지
-- 드래그 중 모든 input 포트 pulse 애니메이션
-
-### 3.4 SVG 연결선 4종
-
-| 타입 | 색상 | CSS 클래스 | 마커 | 용도 |
-|---|---|---|---|---|
-| 소스 | 핑크 #fd79a8 | `ctrl-line-tpl` | arr-src | 카드 → 소스 테이블 |
-| 자동실행 | 보라 #6c5ce7 | `ctrl-line-auto` | arr-auto | 테이블 → 테이블 자동 등록 |
-| 조건분기 | 앰버 #fdcb6e | `ctrl-line-cond` | arr-cond | 조건 충족 시 실행 |
-| FK | 시안 #00cec9 | `ctrl-line` | arr-fk | 외래키 관계 |
-
-**라이트 모드 보정**: 시안→#00a89e, 보라→#5b4acf, 앰버→#d4a017, 핑크→#e0559e
-
-### 3.5 연결선 위 뱃지
-
-- 일반: 글래스 배경 + 시안 보더 + 라벨 텍스트
-- 조건분기: 확장형 (`cb-head` + `cb-cond` + `cb-paths` Yes/No)
-- 소스: 핑크 보더
-- 자동실행: 보라 보더
-
-### 3.6 NodeConfigPopover — 타입별 설정 폼
-
-| 노드 타입 | 설정 항목 |
-|---|---|
-| 조건분기 | 필드, 연산자(=, ≠, >, <, 기한경과, 포함), 값 |
-| 상태 변경 | 대상 테이블, 변경 필드, 변경값 |
-| 자동 등록 | 대상 테이블 |
-| 타이머 | 기준 필드, 경과량, 단위(일/시간/주) |
-| 알림 발송 | 채널(이메일/SMS/푸시/Slack), 수신자, 메시지 |
-| 승인/결재 | 승인자, 승인 조건 |
-| 계산/수식 | 대상 테이블, 결과 필드, 수식 |
-| 외부 호출 | URL, 메서드(POST/GET/PUT/DELETE) |
-| 데이터 검증 | 대상 필드, 검증 규칙 |
-| 로그 기록 | 내용 |
-
-### 3.7 Dashboard 통합
-
-**DashboardToolbar:**
-- ⚡ 버튼 추가 (제어 모드 진입 시 편집 모드 자동 해제)
-- 제어 모드 활성 중: 편집/템플릿추가/저장 버튼 숨김
-
-**DashboardLayout:**
-- `ControlMode` 오버레이 (ControlToolbar + FlowViewer/RuleBuilder)
-- 제어 편집 모드: 사이드바 → `ControlPalette` 교체
-
-**DashboardCanvas:**
-- `forwardRef`로 부모에서 캔버스 DOM 참조
-- `control-mode` CSS 클래스 (시안 격자 배경)
-- 제어 모드 시 카드 드래그/리사이즈 비활성화
-
----
-
-## 4. DB 변경
-
-### 4.1 business_rules 테이블 (✅ 생성 완료)
-
-```sql
-CREATE TABLE business_rules (
-    rule_id         VARCHAR(50) PRIMARY KEY,
-    dashboard_id    VARCHAR(50),
-    name            VARCHAR(200),
-    description     TEXT,
-    nodes           JSONB NOT NULL,
-    connections     JSONB NOT NULL,
-    is_enabled      BOOLEAN DEFAULT TRUE,
-    company_code    VARCHAR(20) NOT NULL,
-    created_by      VARCHAR(50),
-    created_date    TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    updated_by      VARCHAR(50),
-    updated_date    TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    is_active       VARCHAR(1) DEFAULT 'Y'
-);
-CREATE INDEX idx_brules_dashboard ON business_rules(dashboard_id);
-```
-
-**실행 대상**: `211.115.91.141:11134/test_dev` (2026-04-10 실행 완료)
-★ DB FK 제약조건 안 걸음 (설계서 명시 — 앱 레벨 관리)
-
----
-
-## 5. 덕일 스타일 / 프로젝트 컨벤션 준수
-
-| 규칙 | 준수 |
-|---|---|
-| 3레이어 (Controller → Service → XML) | ✅ |
-| Mapper Interface 금지 | ✅ — sqlSession 직접 호출 |
-| Map<String, Object> 사용, DTO 금지 | ✅ — ApiResponse만 예외 |
-| BaseService 상속 | ✅ |
-| @Autowired CommonService | ✅ |
-| XML 파일명: 소문자, Mapper 안 붙임 | ✅ — `businessRule.xml` |
-| XML namespace: 파일명과 동일 | ✅ — `namespace="businessRule"` |
-| SQL: UPPER_SNAKE | ✅ |
-| SELECT 쉼표: 앞에 | ✅ |
-| #{파라미터}: snake_case | ✅ |
-| OGNL test: 바깥 작은따옴표 | ✅ |
-| 프론트 타입: Record<string, any> | ✅ — FieldConfig만 예외 |
-| v5/ctrl CSS 변수 사용, 즉흥 값 금지 | ✅ |
-| 컴팩트 폰트 사이즈 (0.42~0.68rem) | ✅ |
-| mockup 진실의 원천 | ✅ — 06-control-mode.js, 07-rule-builder.js |
-
----
-
-## 6. CSS 토큰 사용 목록
-
-| 용도 | 토큰 |
-|---|---|
-| 시안 | `--ctrl-cyan` (#00cec9), `--ctrl-cyan-glow` |
-| 보라 | `--ctrl-primary` (#6c5ce7) |
-| 앰버 | `--ctrl-amber` (#fdcb6e) |
-| 핑크 | `--ctrl-pink` (#fd79a8) |
-| 그린 | `--ctrl-green` (#55efc4) |
-| 레드 | `--ctrl-red` (#ff4757) |
-| 유리 배경 | `--ctrl-glass`, `--ctrl-glass-strong` |
-| 유리 보더 | `--ctrl-glass-border` |
-| 텍스트 | `var(--v5-text)`, `var(--v5-text-sec)`, `var(--v5-text-muted)` |
-| 보더 | `var(--v5-border)` |
-| 서피스 | `var(--v5-surface)`, `var(--v5-surface-hover)` |
-| 블러 | `backdrop-filter: blur(20px) saturate(1.4)` (v5 글래스 패턴) |
-
----
-
-## 7. 검증 결과
-
-| 검증 항목 | 결과 |
-|---|---|
-| `./gradlew compileJava` | BUILD SUCCESSFUL |
-| `./gradlew bootJar` | BUILD SUCCESSFUL |
-| `npx tsc --noEmit` (Phase 5 파일) | 에러 0개 |
-| DB 테이블 생성 (test_dev) | CREATE TABLE + INDEX 성공 |
-| 기존 레거시 에러 | 2827개 (Phase 5 무관, 변동 없음) |
-
----
-
-## 8. 완료 기준 대비 상태
-
-| # | 기준 | 상태 |
-|---|---|---|
-| 1 | ⚡ 버튼으로 제어 모드 토글 | ✅ |
-| 2 | 캔버스 시각 변화 (시안 격자, 카드 반투명) | ✅ |
-| 3 | 카드 클릭 → 흐름 표시 (소스 테이블 + 관련 테이블 + 비즈니스 룰 트리) | ✅ |
-| 4 | 트리 확산 애니메이션 (선→노드 순차 등장) | ✅ |
-| 5 | 4종 연결선 (소스/자동/조건/FK) | ✅ |
-| 6 | 팔레트에서 노드 드래그앤드롭 | ✅ |
-| 7 | 포트 연결 (output→input 드래그, bezier 곡선) | ✅ |
-| 8 | 노드 설정 팝오버 (타입별 폼) | ✅ |
-| 9 | 규칙 저장/로드 (DB JSONB) | ✅ |
-| 10 | 빈 영역 클릭 → 흐름 닫기 | ✅ |
-| 11 | 다크/라이트 모드 | ✅ (라이트 보정 CSS 포함) |
-
----
-
-## 9. 접속 경로
-
-- **대시보드 (제어 모드 포함)**: `/dash` → ⚡ 버튼 클릭
-- 개발자 빌더: `/admin/builder` (Phase 3)
-- 테스트 페이지: `/test-fc` (Phase 2)
-
----
-
-## 10. Phase 5 범위 밖 (다음에 해야 할 것)
-
-| 항목 | 비고 |
-|---|---|
-| `table_relationships` 테이블에 실제 데이터 INSERT | 현재 빈 테이블이면 흐름이 소스→1개만 표시 |
-| 비즈니스 룰 실행 엔진 (트리거/조건 평가/액션 실행) | 현재는 시각 편집만 |
-| 규칙 로드 UI (기존 규칙 목록에서 선택 → 복원) | 현재는 새 규칙 생성만 |
-| computed 수식 파서 (AST 기반 안전한 파서) | Phase 5+ |
-| DataPort 이벤트 버스 (카드 간 실시간 데이터 전달) | Phase 5+ |
-| 자동생성/프리셋 (Phase 6) | 모든 기능 갖춰진 후 마지막 |
-
----
-
-## 11. 파일별 코드 요약
-
-### businessRule.xml (107줄)
-```
-7개 쿼리: getBusinessRuleList, getBusinessRuleListCnt, getBusinessRuleInfo,
-insertBusinessRule, updateBusinessRule, deleteBusinessRule, toggleBusinessRule
-common include: companyCodeFilter, dynamicOrderBy, pagination
-```
-
-### BusinessRuleService.java (~95줄)
-```
-퍼블릭: getBusinessRuleList, getBusinessRuleInfo, insertBusinessRule,
-        updateBusinessRule, deleteBusinessRule, toggleBusinessRule
-프라이빗: parseJsonField, stringifyJsonField (JSONB 유틸)
-```
-
-### BusinessRuleController.java (~100줄)
-```
-6개 엔드포인트: GET/POST rules + GET/PUT/DELETE/toggle rule
-```
-
-### useControlMode.ts (~160줄)
-```
-Zustand store: active, mode, flowEdges, ruleNodes, ruleConnections
-+ CTRL_NODE_TYPES 16종 정의 + genNodeId/genConnId 헬퍼
-```
-
-### FlowViewer.tsx (~180줄)
-```
-카드 클릭 이벤트 → getMetaRelations → BFS → 위치 계산 → 순차 reveal
-TableNode + ConnectionSvg + FlowLine + FlowBadge 렌더
-```
-
-### RuleBuilder.tsx (~180줄)
-```
-캔버스 드래그앤드롭 → 노드 생성 (테이블/제어)
-포트 연결 SVG + 삭제 뱃지 + NodeConfigPopover
-```
-
-### control-mode.css (~350줄)
-```
---ctrl-* 변수 체계, 연결선 4종 + pulse 애니메이션,
-테이블 노드, 제어 노드, I/O 포트, 설정 팝오버, 팔레트
-다크/라이트 모드 보정
-```
diff --git a/notes/gbpark/2026-04-10-template-model-redesign.md b/notes/gbpark/2026-04-10-template-model-redesign.md
deleted file mode 100644
index cc5b431c..00000000
--- a/notes/gbpark/2026-04-10-template-model-redesign.md
+++ /dev/null
@@ -1,1913 +0,0 @@
-> ## ⚠️ OBSOLETE — 2026-04-10 늦게 폐기됨
->
-> 이 문서는 **12-grid + business/canvas 분기 전제** 로 작성되었으나,
-> 같은 날 추가 논의에서 **모든 우회 결정이 폐기되고 자유배치 카드 모델로 회귀**됨.
->
-> **최종 스펙**: [`notes/gbpark/2026-04-10-card-engine-final-spec.md`](./2026-04-10-card-engine-final-spec.md)
->
-> ### 폐기 사유
-> - 12-grid 모델 자체가 mockup (`notes/gbpark/2026-04-08-invyone-mockup/`) 의 자유배치 의도와 충돌
-> - 반응형은 12-grid 로 풀 게 아니라 **컴포넌트 내부 @container query** 로 풀어야 했음
-> - VEX 빌더 (`frontend/components/screen/ScreenDesigner_new.tsx`) 가 이미 자유배치 + 격자 옵션을 구현 중
-> - INVYONE 의 진짜 의도는 "VEX 컴포넌트를 카드 단위로 묶어서 자유배치" 였음
->
-> ### 무엇이 obsolete 인가
-> - `template_kind: 'business' | 'canvas'` 분기 → **폐기**
-> - `GridPosition { col, colSpan, row, rowSpan }` (12-col) → **폐기**
-> - `AbsolutePosition { x, y, w, h }` 와의 분리 → **통합** (Position 단일)
-> - `ResponsiveGridOverride { narrow, normal, wide }` → **폐기** (컴포넌트 내부 @container 가 처리)
-> - `DEFAULT_COMPONENT_LAYOUTS` (12-col 기본값) → **폐기**
-> - business 8종 컴포넌트 팔레트 → **폐기** (VEX v2-* 100+ 개로 대체)
-> - `frontend/components/builder/*` (12-grid 빌더) → **폐기**
->
-> ### 무엇이 살아있는가
-> - FieldConfig (그대로)
-> - DataPort / Connection (그대로)
-> - 3뷰 구조 (list/create/edit) (그대로)
-> - 카드 너비 기준 반응형 원칙 (단, 메커니즘이 12-grid → @container 로 변경)
->
-> ### git history 보존 목적으로만 남김
-> 이 문서의 결정 사항은 모두 무효. 참고만 할 것. 새 작업은 반드시 최종 스펙 문서를 따를 것.
->
-> ---
-
-# invyone 템플릿 모델 재설계 — 구현 방향 (OBSOLETE)
-
-**작성일**: 2026-04-10
-**작성자**: gbpark (+ Claude / ChatGPT 2차 협의 반영)
-**상태**: ⚠️ OBSOLETE — 같은 날 늦게 폐기됨. 위 경고 박스 참조.
-**최종 스펙**: `notes/gbpark/2026-04-10-card-engine-final-spec.md`
-**관련 메모리**: `project_template_builder.md`, `feedback_responsive_container_based.md`
-
----
-
-## 0. 한 줄 요약
-
-자유배치(absolute) + `transform: scale` 카드 축소 방식은 반응형과 구조적 미스매치. **grid-snap + `@container` 기반 모델**로 전환하되, control/flow 같은 특수 화면만 `template_kind: 'canvas'`로 absolute 예외 허용. 디자인(v5 Cosmic)은 그대로 유지하고 레이아웃 엔진만 교체.
-
----
-
-## 1. 배경 — 무엇이 문제였나
-
-### 1.1 현재 코드 상태 (2026-04-10 기준)
-
-| 파일 | 상태 | 문제 |
-|---|---|---|
-| `frontend/components/builder/BuilderCanvas.tsx:19-22` | 드롭 좌표를 `e.clientX - rect.left` 픽셀로 저장 | 자유배치 픽셀 좌표 |
-| `frontend/components/builder/BuilderBlock.tsx:26` | `style={{ left: x, top: y, width: w, height: h }}` | 순수 absolute positioning |
-| `frontend/types/invyone-component.ts:155-164` | `Position { x, y, w, h }` 주석은 "그리드 단위"지만 실제는 픽셀 | 타입 주석과 구현 불일치 |
-| `frontend/types/invyone-component.ts:168-177` | `ResponsiveOverride { lg, md, sm }` 정의 | **빌더/렌더러 어디서도 읽지 않음** (타입만 남고 구현 누락) |
-| `frontend/components/dash/DashboardCard.tsx:165-202` | `canvasBounds` 계산 후 `transform: scale(sx, sy)` | 반응형이 아니라 **썸네일링** |
-| `frontend/styles/dashboard.css:128-137` | `.dash-canvas`가 `position: relative` + 도트 배경만 | grid 없음 |
-| `notes/gbpark/2026-04-08-invyone-mockup/index.html:751-1078` | "완전 자유 배치" 의도 명시 주석 | mockup도 자유배치 전제 |
-
-### 1.2 구조적 미스매치의 본질
-
-자유배치(absolute px) 템플릿을 카드형 반응형 UI 재료로 쓰는 건 구조적으로 안 맞음:
-
-1. `transform: scale`은 반응형이 아님 — 폰트/버튼/간격이 전부 비율 축소되어 작은 카드에서 글자를 읽을 수 없음.
-2. 같은 뷰포트 안에 드래그로 700px / 300px 카드가 공존 → 뷰포트 미디어 쿼리 적용 자체가 불가능. 한 breakpoint에서 두 카드가 달라져야 함.
-3. `ResponsiveOverride` 타입은 선언만 되어 있고 실행 경로에 없음 — VEX가 가졌던 "런타임 반응형 변환 단계"가 타입만 계승되고 구현이 빠진 상태.
-
-### 1.3 VEX 원본은 어떻게 했었나
-
-`frontend/types/screen-legacy-backup.ts` + `frontend/types/responsive.ts`에 VEX 잔재:
-
-- `designer_position: { x, y, width, height }` — 빌더는 **절대좌표 자유배치**
-- `responsive: { desktop, tablet, mobile }` — 런타임은 브레이크포인트별 오버라이드
-- `BREAKPOINTS`: desktop=12, tablet=8, mobile=4 컬럼
-- `frontend/components/v2/V2Layout.tsx:19-48` — Tailwind `grid-cols-12` 12컬럼 시스템 실제 구현
-
-**VEX = "빌더 자유배치 + 런타임 반응형 12-col 변환" 하이브리드.** invyone은 빌더 쪽만 계승하고 런타임 변환 단계가 빠져있음 → 이게 현재 미스매치의 정체.
-
----
-
-## 2. 결정 사항
-
-### 2.1 레이아웃 모델
-
-**`template_kind: 'business' | 'canvas'`** — 용도별 분기.
-
-| kind | 레이아웃 | 반응형 | 주 사용자 | 용도 |
-|---|---|---|---|---|
-| **business** (기본) | grid-snap | `@container` (카드 너비 기준) | 업무 담당자 L0~L1 | 대다수 업무 화면 (수주/인사/자재 등) |
-| **canvas** (예외) | absolute 자유배치 | 없음 | 개발자/SI L1~L2 | control/flow/노드 에디터 |
-
-### 2.2 반응형 기본 단위
-
-**카드 컨테이너 기준(`@container`)** — 뷰포트 미디어 쿼리 아님.
-
-- 네이밍: `wide` / `normal` / `narrow` (카드 너비 중립 용어)
-- 금지: `desktop` / `tablet` / `mobile` (뷰포트 냄새)
-- 이유: 같은 뷰포트에 여러 크기 카드 공존 → 뷰포트 breakpoint는 구조적으로 불가능
-
-### 2.3 빌더 기본 주 사용자
-
-**업무 담당자 (L0~L1)** → 기본 UX는 **grid-snap**. 픽셀 드래그 자유배치는 canvas 빌더에만 허용.
-
----
-
-## 3. 기준값 (Phase 1 착수 시점 디폴트)
-
-### 3.1 grid 시스템
-
-- **12열 × auto 행** (content 기준 높이)
-- `col-span` 허용 (1~12), `row-span`은 Phase 2 이후 검토
-- 기본 gap: `.5rem` (v5 컴팩트 스케일)
-- 이유: 업계 표준 → Tailwind `grid-cols-*` 매핑 0 비용, 향후 shadcn 호환
-
-### 3.2 container breakpoint (카드 너비 기준)
-
-```css
-.dash-card-body {
-  container-type: inline-size;
-  container-name: card;
-}
-
-@container card (max-width: 520px)                                      { /* narrow */ }
-@container card (min-width: 520.01px) and (max-width: 900px)            { /* normal */ }
-@container card (min-width: 900.01px)                                   { /* wide   */ }
-```
-
-- `narrow` ≤ 520 — 1열로 스택, 폼 한 열
-- `normal` 520 ~ 900 — 기본 (2~3열, 폼 2열)
-- `wide` > 900 — 풀 12열, 폼 3열
-
-세 단계면 L0~L1 사용자가 실질적으로 체감하는 최소 단위. 더 나누면 과함.
-
-### 3.3 비교 대상 화면 (검증용)
-
-**수주관리** — 가장 범용 "검색 + 테이블 + 폼 + 버튼" 조합.
-
----
-
-## 4. 구현 단계 (재조정)
-
-### ~~Phase 0~~ — mockup 검증 **생략**
-
-디자인(v5 Cosmic)이 이미 잡혀 있고, React 이식 후에도 디자인은 그대로 유지되므로 mockup HTML로 사전 검증할 필요 없음. 바로 Phase 1로 진입.
-
-### Phase 1 — React 이식 (이 문서의 섹션 8~16 스펙 기반)
-
-**순서 제안**:
-
-1. 타입 재정의 (섹션 8)
-2. CSS 변수 추가 (섹션 12)
-3. 대시보드 카드 `@container` 전환 (섹션 11)
-4. 빌더 캔버스/블록 grid-snap 전환 (섹션 9, 10, 14)
-5. 등록/수정 팝업 grid 적용 (섹션 15)
-6. Template 마이그레이션 유틸 (섹션 13)
-7. 기존 Phase 3 / Phase 4 문서 업데이트 (섹션 16)
-
-### Phase 2 이상 (기존 로드맵 유지)
-
-- 규칙 엔진 (FieldConfig 기반 유효성/연동/조건부 표시)
-- 제어 플로우 = **canvas kind 빌더** (기존 control-mode mockup 재활용)
-
----
-
-## 5. 기존 Phase 1~5 문서와의 관계
-
-오늘 날짜 `notes/gbpark/2026-04-10-phase{1~5}-*.md` 문서들이 이미 존재. 이번 재설계가 각 Phase에 미치는 영향:
-
-| Phase | 문서 | 영향 | 조치 |
-|---|---|---|---|
-| 1 | `phase1-db-meta-to-fieldconfig.md` | **영향 없음** | FieldConfig 규격은 유지. 그대로 유효 |
-| 2 | `phase2-fieldconfig-components.md` | **제한적** | FcTable/FcForm/FcSearch 내부 렌더는 유지, 외부 배치가 grid로 바뀔 뿐. 컴포넌트 자체는 재사용 |
-| 3 | `phase3-developer-builder.md` | **큰 영향** | 빌더가 자유배치 전제로 작성됐을 것 → business/canvas 분기 반영 필요. 섹션 16.1 지침대로 업데이트 |
-| 4 | `phase4-dashboard-menu.md` | **큰 영향** | `DashboardCard`의 `transform: scale` 로직 전제 → `@container` 기반으로 재작성 필요. 섹션 16.2 지침대로 업데이트 |
-| 5 | `phase5-control-mode.md` | **영향 없음** | control-mode가 `template_kind: 'canvas'`의 정당한 사용처. absolute 유지 |
-
----
-
-## 6. 기능 확장 멈춤 (2026-04-10 ~ Phase 1 완료 전까지)
-
-모델이 바뀌는 기간 동안 기존 자유배치 코드 위에 신규 기능 쌓지 않기:
-
-- `DashboardCard`에 `transform: scale` 관련 로직 더 얹지 말 것
-- `Template.connections` / `user_overrides` / 기타 Template 구조 변경 과투자 금지
-- 빌더에 새 컴포넌트 타입 추가 금지 (grid 전환 후 한 번에)
-- 자유배치 전제의 UX 개선(드래그 스냅 등) 금지
-
-위 제약을 위반하면 Phase 1에서 해당 코드를 다시 뜯게 됨 → 두 번 일.
-
----
-
-## 7. 대안 비교 기록 (결정의 근거)
-
-| 옵션 | 내용 | 판정 |
-|---|---|---|
-| **A** | VEX식 하이브리드 복구 (`designer_position` + runtime `responsive` 오버라이드) | **이행용만 가능.** 결국 grid로 재변환하게 됨 → 두 번 일 |
-| **B** | Template=화면 전용 / CardContent=별도 반응형 모델 분리 | **C에 흡수됨.** "특수 화면만 absolute" 예외 조항 붙는 순간 C와 실질적 동일 |
-| **C (채택)** | grid-snap + `@container` 단일 모델 + `kind` 분기로 canvas 예외 허용 | **정석.** 업무 화면이 행/열 조합이면 grid가 맞음. VEX 런타임도 12-col이었던 이유 |
-
----
-
-# 파트 B — 구현 스펙 (Phase 1 착수용)
-
-여기서부터는 구현자가 그대로 따라갈 수 있는 수준의 상세 스펙.
-
----
-
-## 8. 타입 정의 완전판
-
-### 8.1 수정 대상 파일
-
-`frontend/types/invyone-component.ts`
-
-### 8.2 새 타입 — Position 분리
-
-```ts
-// ─────────────────────────────────────────────────────────────────────────────
-// Position — kind별로 두 벌로 분리
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * Business kind 전용 — grid 기반 위치.
- * 12-column grid에서의 시작 위치와 차지 컬럼/행 수.
- */
-export interface GridPosition {
-  /** 시작 컬럼 (1~12) */
-  col: number;
-  /** 차지 컬럼 수 (1~12) */
-  colSpan: number;
-  /** 명시적 행 번호 (생략 시 자동 흐름 — auto placement) */
-  row?: number;
-  /** 행 높이 배수 (기본 1) */
-  rowSpan?: number;
-  /** 카드 너비별 반응형 오버라이드 */
-  responsive?: ResponsiveGridOverride;
-}
-
-/**
- * Canvas kind 전용 — 절대 좌표 위치.
- * control/flow 등 자유 캔버스에서만 사용.
- */
-export interface AbsolutePosition {
-  /** 가로 위치 (px) */
-  x: number;
-  /** 세로 위치 (px) */
-  y: number;
-  /** 너비 (px) */
-  w: number;
-  /** 높이 (px) */
-  h: number;
-}
-
-export type ComponentPosition = GridPosition | AbsolutePosition;
-
-/**
- * 카드 너비 기준 반응형 오버라이드.
- * 뷰포트 미디어 쿼리 아님 — @container 쿼리로 해석된다.
- *
- * breakpoint 기준:
- * - narrow: 카드 너비 ≤ 520px
- * - normal: 카드 너비 520 ~ 900px
- * - wide  : 카드 너비 > 900px
- */
-export interface ResponsiveGridOverride {
-  narrow?: Partial<Omit<GridPosition, 'responsive'>>;
-  normal?: Partial<Omit<GridPosition, 'responsive'>>;
-  wide?: Partial<Omit<GridPosition, 'responsive'>>;
-}
-```
-
-### 8.3 타입 가드
-
-```ts
-export function isGridPosition(pos: ComponentPosition): pos is GridPosition {
-  return 'col' in pos && 'colSpan' in pos;
-}
-
-export function isAbsolutePosition(pos: ComponentPosition): pos is AbsolutePosition {
-  return 'x' in pos && 'y' in pos && 'w' in pos && 'h' in pos;
-}
-```
-
-### 8.4 Template.kind 추가
-
-```ts
-export type TemplateKind = 'business' | 'canvas';
-
-export interface Template {
-  // ─── 식별 ───
-  templateId: string;
-  name: string;
-  /** 레이아웃 모델 분기 (2026-04-10 추가) */
-  kind: TemplateKind;
-  category: string;
-  description?: string;
-
-  // ─── 데이터 ───
-  primaryTable: string;
-  fields: FieldConfig[];
-
-  // ─── 3뷰 ───
-  views: {
-    list: ViewConfig;
-    create: ViewConfig;
-    edit: ViewConfig;
-  };
-
-  // ─── 연결 ───
-  connections: Connection[];
-
-  // ─── 메타 ───
-  companyCode: string;
-  version: number;
-  status: TemplateStatus;
-  createdAt: string;
-  updatedAt: string;
-}
-```
-
-### 8.5 Component.position 교체
-
-```ts
-export interface Component {
-  // ─── 식별 ───
-  id: string;
-  type: ComponentType;
-  label: string;
-
-  // ─── 위치 (빌더가 관리) ───
-  /** Template.kind에 따라 해석이 달라짐 */
-  position: ComponentPosition;
-
-  // ─── 데이터 바인딩 ───
-  dataSource?: DataSource;
-  fields?: FieldConfig[];
-
-  // ─── 데이터 포트 ───
-  inputs?: DataPort[];
-  outputs?: DataPort[];
-
-  // ─── 타입별 설정 ───
-  config: ComponentTypeConfig;
-}
-```
-
-### 8.6 폐기 대상
-
-기존 `ResponsiveOverride { lg, md, sm }` 인터페이스 **삭제** (뷰포트 네이밍).
-
-### 8.7 런타임 사용 예시
-
-```ts
-function renderComponent(template: Template, comp: Component) {
-  if (template.kind === 'business') {
-    const pos = comp.position as GridPosition;
-    return <GridSlot col={pos.col} span={pos.colSpan} row={pos.row} responsive={pos.responsive} />;
-  } else {
-    const pos = comp.position as AbsolutePosition;
-    return <AbsoluteSlot x={pos.x} y={pos.y} w={pos.w} h={pos.h} />;
-  }
-}
-```
-
----
-
-## 9. 빌더 로직 세부
-
-### 9.1 수정 대상 파일
-
-- `frontend/components/builder/BuilderCanvas.tsx` — 캔버스 + 드롭 처리
-- `frontend/components/builder/BuilderBlock.tsx` — 블록 렌더 + 드래그/리사이즈
-- `frontend/components/builder/hooks/useBlockDrag.ts` — 드래그 상태 관리
-- `frontend/components/builder/hooks/useBuilderState.ts` — addBlock/updateBlock 시그니처 변경
-
-### 9.2 캔버스 구조 — CSS grid 기반
-
-```tsx
-// BuilderCanvas.tsx 새 구조
-export default function BuilderCanvas() {
-  const blocks = useCurrentViewBlocks();
-  const templateKind = useBuilderState((s) => s.templateKind); // 'business' | 'canvas'
-  const previewWidth = useBuilderState((s) => s.previewWidth); // 'narrow' | 'normal' | 'wide'
-
-  if (templateKind === 'canvas') {
-    return <CanvasBuilder blocks={blocks} />; // 기존 absolute 방식 유지
-  }
-
-  return (
-    <div className="dev-canvas-outer">
-      <div
-        className="dev-canvas-grid"
-        style={{
-          maxWidth: PREVIEW_WIDTH_MAP[previewWidth],
-          margin: '0 auto',
-          containerType: 'inline-size',
-          containerName: 'card',
-        }}
-      >
-        {blocks.map((block) => (
-          <BuilderBlock key={block.id} block={block} />
-        ))}
-        <DropPreview />
-      </div>
-    </div>
-  );
-}
-
-const PREVIEW_WIDTH_MAP = {
-  narrow: 400,
-  normal: 720,
-  wide: 1100,
-};
-```
-
-### 9.3 셀 좌표 계산 공식
-
-> ⚠️ **중요**: 모든 픽셀 ↔ 컬럼 변환은 이 섹션의 함수만 사용한다. `canvasW / 12` 같은 직접 계산은 **절대 금지** — gap/padding을 무시하기 때문에 drop 위치와 drag/resize 스냅 결과가 어긋남 (Finding 2 반영).
-
-```ts
-/**
- * grid 캔버스의 기하학 정보 한 세트.
- * pixelToGridCol / pixelToColSpan / pixelDeltaToColDelta 는 전부 이 값을 쓴다.
- *
- * @param canvasWidth 캔버스 총 너비 (element.clientWidth)
- * @param gap 컬럼 간 gap (px, 기본 8) — 보통 getComputedStyle(el).columnGap
- * @param padding 캔버스 좌/우 padding (px, 기본 0) — 한 쪽 값 (좌우 대칭 전제)
- */
-export function getGridMetrics(
-  canvasWidth: number,
-  gap = 8,
-  padding = 0
-) {
-  const contentWidth = Math.max(1, canvasWidth - padding * 2);
-  const totalGap = gap * 11;                  // 12열이면 gap 11개
-  const colWidth = (contentWidth - totalGap) / 12;
-  const step = colWidth + gap;                // "한 컬럼 + 이어지는 gap" = 스냅 단위
-  return { contentWidth, colWidth, step, padding, gap };
-}
-
-/**
- * 절대 픽셀 X (캔버스 좌측 기준) → 그리드 컬럼 (1~12).
- * 드롭 위치 계산용.
- */
-export function pixelToGridCol(
-  pixelX: number,
-  canvasWidth: number,
-  gap = 8,
-  padding = 0
-): number {
-  const { step, padding: pad } = getGridMetrics(canvasWidth, gap, padding);
-  const relX = pixelX - pad;
-  const col = Math.floor(relX / step) + 1;
-  return Math.max(1, Math.min(12, col));
-}
-
-/**
- * 픽셀 폭 → colSpan (1~12).
- */
-export function pixelToColSpan(
-  pixelW: number,
-  canvasWidth: number,
-  gap = 8,
-  padding = 0
-): number {
-  const { step } = getGridMetrics(canvasWidth, gap, padding);
-  return Math.max(1, Math.min(12, Math.round(pixelW / step)));
-}
-
-/**
- * 픽셀 이동량 (dx, dy 등) → 컬럼 이동 단위.
- * 드래그/리사이즈 증감 계산용. ★ 반드시 이 함수를 쓸 것 — `canvasW / 12` 직접 계산 금지.
- */
-export function pixelDeltaToColDelta(
-  pixelDelta: number,
-  canvasWidth: number,
-  gap = 8,
-  padding = 0
-): number {
-  const { step } = getGridMetrics(canvasWidth, gap, padding);
-  return Math.round(pixelDelta / step);
-}
-
-/**
- * 캔버스 엘리먼트에서 현재 gap/padding을 읽어오는 유틸.
- * 드래그/리사이즈 시작 시점에 1회 호출 → 세션 동안 캐시해서 사용.
- */
-export function readCanvasGeometry(el: HTMLElement) {
-  const cs = getComputedStyle(el);
-  const gap = parseFloat(cs.columnGap || cs.gap || '8');
-  const padding = parseFloat(cs.paddingLeft || '0');
-  return { canvasWidth: el.clientWidth, gap, padding };
-}
-```
-
-### 9.4 드롭 처리 (팔레트 → 캔버스)
-
-> ★ **drop / drag / resize는 모두 같은 공용 기하학 함수 체계(9.3)를 따른다.** drop만 `rect.width`로 대충 계산하면 첫 배치 스냅과 이후 드래그/리사이즈 스냅이 미세하게 어긋남 (Finding 4 반영).
-
-```tsx
-import { pixelToGridCol, readCanvasGeometry } from './gridMetrics';
-
-const handleDrop = useCallback(
-  (e: React.DragEvent) => {
-    e.preventDefault();
-    const type = e.dataTransfer.getData("component-type") as ComponentType;
-    if (!type) return;
-
-    const canvasEl = e.currentTarget as HTMLElement;
-    // 공용 함수 — 9.3 참조. drag/resize와 같은 경로로 gap/padding 일관 적용.
-    const { canvasWidth, gap, padding } = readCanvasGeometry(canvasEl);
-    const rect = canvasEl.getBoundingClientRect();
-    const relX = e.clientX - rect.left;
-    const col = pixelToGridCol(relX, canvasWidth, gap, padding);
-
-    // 컴포넌트 타입별 기본 colSpan (섹션 10 참조)
-    const defaultLayout = DEFAULT_COMPONENT_LAYOUTS[type];
-    const colSpan = Math.min(defaultLayout.colSpan, 13 - col);
-
-    // row는 자동 흐름 — 현재 블록 중 최대 row + 1
-    const maxRow = Math.max(0, ...blocks.map((b) => (b.position as GridPosition).row ?? 0));
-    const row = maxRow + 1;
-
-    addBlock(type, {
-      col,
-      colSpan,
-      row,
-      responsive: defaultLayout.responsive,
-    });
-  },
-  [addBlock, blocks]
-);
-```
-
-### 9.5 드래그 이동 — 블록 재배치
-
-```ts
-// useBlockDrag.ts 새 구조
-// ★ 모든 거리 계산은 9.3의 공용 함수(getGridMetrics, pixelDeltaToColDelta, readCanvasGeometry)만 사용.
-//   절대 `canvasW / 12`로 직접 계산하지 말 것 — gap/padding 무시하면 스냅이 어긋남 (Finding 2).
-import { pixelDeltaToColDelta, readCanvasGeometry } from './gridMetrics';
-
-export function useBlockDrag() {
-  const updateBlock = useBuilderState((s) => s.updateBlock);
-
-  const startDrag = useCallback((e: React.MouseEvent, blockId: string) => {
-    e.preventDefault();
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const block = getBlock(blockId);
-    if (!block || !isGridPosition(block.position)) return;
-    const origCol = block.position.col;
-    const origRow = block.position.row ?? 1;
-
-    const canvasEl = document.querySelector('.dev-canvas-grid') as HTMLElement;
-    if (!canvasEl) return;
-    // 드래그 세션 시작 시 1회 읽기 → onMove에서 재사용 (성능 + 일관성)
-    const { canvasWidth, gap, padding } = readCanvasGeometry(canvasEl);
-
-    const onMove = (ev: MouseEvent) => {
-      const dx = ev.clientX - startX;
-      const dy = ev.clientY - startY;
-
-      // 공용 변환 — 9.3 참조
-      const deltaCol = pixelDeltaToColDelta(dx, canvasWidth, gap, padding);
-      const deltaRow = Math.round(dy / ROW_HEIGHT); // ROW_HEIGHT 상수 (기본 48px 가정)
-
-      const newCol = Math.max(1, Math.min(13 - block.position.colSpan, origCol + deltaCol));
-      const newRow = Math.max(1, origRow + deltaRow);
-
-      updateBlock(blockId, {
-        position: { ...block.position, col: newCol, row: newRow },
-      });
-    };
-
-    const onUp = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-    };
-
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
-  }, [updateBlock]);
-
-  return { startDrag };
-}
-```
-
-### 9.6 리사이즈 — colSpan 변경
-
-```ts
-// ★ 9.5와 동일하게 공용 함수만 사용. `canvasW / 12` 직접 계산 금지 (Finding 2).
-const startResize = useCallback((e: React.MouseEvent, blockId: string) => {
-  e.preventDefault();
-  e.stopPropagation();
-  const startX = e.clientX;
-  const block = getBlock(blockId);
-  if (!block || !isGridPosition(block.position)) return;
-  const origSpan = block.position.colSpan;
-
-  const canvasEl = document.querySelector('.dev-canvas-grid') as HTMLElement;
-  if (!canvasEl) return;
-  const { canvasWidth, gap, padding } = readCanvasGeometry(canvasEl);
-
-  const onMove = (ev: MouseEvent) => {
-    const dx = ev.clientX - startX;
-    // 공용 변환 — 9.3 참조
-    const deltaCols = pixelDeltaToColDelta(dx, canvasWidth, gap, padding);
-    const newSpan = Math.max(1, Math.min(13 - block.position.col, origSpan + deltaCols));
-    updateBlock(blockId, {
-      position: { ...block.position, colSpan: newSpan },
-    });
-  };
-
-  const onUp = () => {
-    document.removeEventListener('mousemove', onMove);
-    document.removeEventListener('mouseup', onUp);
-  };
-
-  document.addEventListener('mousemove', onMove);
-  document.addEventListener('mouseup', onUp);
-}, [updateBlock]);
-```
-
-### 9.7 BuilderBlock 렌더
-
-```tsx
-export default function BuilderBlock({ block }: { block: Component }) {
-  const pos = block.position as GridPosition;
-  const { startDrag, startResize } = useBlockDrag();
-  const isSelected = useBuilderState((s) => s.selectedBlockId === block.id);
-
-  return (
-    <div
-      className={`dev-block${isSelected ? ' selected' : ''}`}
-      style={{
-        gridColumn: `${pos.col} / span ${pos.colSpan}`,
-        gridRow: pos.row ?? 'auto',
-      }}
-      onMouseDown={(e) => startDrag(e, block.id)}
-    >
-      <div className="dev-block-label">{block.label}</div>
-      <div className="dev-block-content">
-        <BlockPreview block={block} />
-      </div>
-      {/* 리사이즈 핸들 — 우측 가장자리 */}
-      <div
-        className="dev-resize-handle"
-        onMouseDown={(e) => startResize(e, block.id)}
-      />
-    </div>
-  );
-}
-```
-
-### 9.8 addBlock 시그니처 변경
-
-```ts
-// useBuilderState.ts
-interface BuilderState {
-  // ... 기존
-  templateKind: TemplateKind;
-  previewWidth: 'narrow' | 'normal' | 'wide';
-
-  addBlock: (type: ComponentType, position: GridPosition) => void;
-  updateBlock: (id: string, patch: Partial<Component>) => void;
-  setPreviewWidth: (w: 'narrow' | 'normal' | 'wide') => void;
-}
-```
-
----
-
-## 10. 컴포넌트별 기본 grid 배치
-
-### 10.1 기본값 테이블
-
-| 컴포넌트 | wide (기본) | normal | narrow | 설명 |
-|---|---|---|---|---|
-| `search` | col 1, span 12 | span 12 | span 12 | 검색은 항상 풀 너비 |
-| `table` | col 1, span 12 | span 12 | span 12 | 테이블도 풀 너비 |
-| `form` | col 1, span 12 | span 12 | span 12 | 폼 내부 `columns`로 세분화 |
-| `button-bar` | col 1, span 12 | span 12 | span 12 | 버튼바 풀 너비 |
-| `button` | col 1, span 2 | span 3 | span 12 | 단일 버튼 좁게 |
-| `stats` | col 1, span 4 | span 6 | span 12 | wide: 3개/행, normal: 2개/행, narrow: 1개/행 |
-| `chart` | col 1, span 6 | span 12 | span 12 | wide: 2개/행, normal/narrow: 1개/행 |
-| `title` | col 1, span 12 | span 12 | span 12 | 제목 풀 너비 |
-| `divider` | col 1, span 12 | span 12 | span 12 | 구분선 풀 너비 |
-| `pagination` | col 1, span 12 | span 12 | span 12 | 페이지네이션 풀 너비 |
-| `tabs` | col 1, span 12 | span 12 | span 12 | 탭 풀 너비 |
-| `split-panel` | col 1, span 12 | span 12 | span 12 | 분할 패널도 풀 너비 |
-
-### 10.2 상수 정의
-
-```ts
-// frontend/types/invyone-component.ts 또는 별도 constants 파일
-
-export const DEFAULT_COMPONENT_LAYOUTS: Record<ComponentType, GridPosition> = {
-  search: {
-    col: 1, colSpan: 12,
-  },
-  table: {
-    col: 1, colSpan: 12,
-  },
-  form: {
-    col: 1, colSpan: 12,
-  },
-  'button-bar': {
-    col: 1, colSpan: 12,
-  },
-  button: {
-    col: 1, colSpan: 2,
-    responsive: {
-      narrow: { colSpan: 12 },
-      normal: { colSpan: 3 },
-      wide: { colSpan: 2 },
-    },
-  },
-  stats: {
-    col: 1, colSpan: 4,
-    responsive: {
-      narrow: { colSpan: 12 },
-      normal: { colSpan: 6 },
-      wide: { colSpan: 4 },
-    },
-  },
-  // chart는 ComponentType에 없으나 팔레트 8종에 있음 — 추가 필요
-  title: {
-    col: 1, colSpan: 12,
-  },
-  divider: {
-    col: 1, colSpan: 12,
-  },
-  pagination: {
-    col: 1, colSpan: 12,
-  },
-  tabs: {
-    col: 1, colSpan: 12,
-  },
-  'split-panel': {
-    col: 1, colSpan: 12,
-  },
-};
-```
-
-### 10.3 수주관리 화면의 기본 배치 예시
-
-```ts
-const salesOrderTemplate: Template = {
-  templateId: 'tpl_sales_order',
-  name: '수주관리',
-  kind: 'business',
-  category: 'sales',
-  primaryTable: 'sales_order',
-  fields: [/* FieldConfig 배열 */],
-  views: {
-    list: {
-      components: [
-        {
-          id: 'stats_1',
-          type: 'stats',
-          label: '요약 통계',
-          position: {
-            col: 1, colSpan: 12,  // stats 3개 내부에서 grid 사용
-            row: 1,
-          },
-          config: { /* StatsConfig */ },
-        },
-        {
-          id: 'search_1',
-          type: 'search',
-          label: '검색',
-          position: {
-            col: 1, colSpan: 12,
-            row: 2,
-          },
-          config: { /* SearchConfig */ },
-        },
-        {
-          id: 'table_1',
-          type: 'table',
-          label: '주문 목록',
-          position: {
-            col: 1, colSpan: 8,
-            row: 3,
-            responsive: {
-              narrow: { colSpan: 12 },
-              normal: { colSpan: 12 },
-              wide:   { colSpan: 8  },
-            },
-          },
-          config: { /* TableConfig */ },
-        },
-        {
-          id: 'form_1',
-          type: 'form',
-          label: '주문 상세',
-          position: {
-            col: 9, colSpan: 4,
-            row: 3,
-            responsive: {
-              narrow: { col: 1, colSpan: 12, row: 4 },
-              normal: { col: 1, colSpan: 12, row: 4 },
-              wide:   { col: 9, colSpan: 4,  row: 3 },
-            },
-          },
-          config: { /* FormConfig */ },
-        },
-      ],
-    },
-    create: {/* 팝업 */},
-    edit: {/* 팝업 */},
-  },
-  connections: [/* table_1.selectedRow → form_1.loadRow */],
-  // ...
-};
-```
-
-wide에서는 좌측 테이블 + 우측 폼 (8:4), normal/narrow에서는 수직 스택 (테이블 위, 폼 아래).
-
----
-
-## 11. 대시보드 카드 CSS
-
-### 11.1 수정 대상 파일
-
-- `frontend/components/dash/DashboardCard.tsx` — `canvasBounds`, `scale` 로직 삭제
-- `frontend/styles/dashboard.css` — `.dash-card-body`, `.dash-card-grid` 스타일 추가
-
-### 11.2 삭제할 코드 (`DashboardCard.tsx`)
-
-다음 블록을 **전부 삭제**:
-
-```tsx
-// ❌ 삭제 — 줄 164~202
-const canvasBounds = useMemo(() => {
-  if (sortedComponents.length === 0) return { w: 1200, h: 800 };
-  // ...
-}, [sortedComponents]);
-
-const bodyRef = useRef<HTMLDivElement>(null);
-const [scale, setScale] = useState(1);
-
-useEffect(() => {
-  // ResizeObserver로 scale 계산
-  // ...
-}, [canvasBounds.w, canvasBounds.h, sortedComponents.length]);
-```
-
-### 11.3 새 렌더 코드 (`DashboardCard.tsx`)
-
-```tsx
-return (
-  <div className={`dash-card${isCollapsed ? ' collapsed' : ''}`}>
-    {/* 카드 헤더 — 기존 유지 */}
-    <div className="dash-card-head">{/* ... */}</div>
-
-    {/* 본문 — container query 활성화 */}
-    <div className="dash-card-body">
-      {loadError ? (
-        <div className="dash-card-error">⚠ {loadError}</div>
-      ) : !templateLoaded ? (
-        <div className="dash-card-loading">템플릿 로딩 중...</div>
-      ) : sortedComponents.length === 0 ? (
-        <DefaultCardContent {/* fallback — 기존 유지 */} />
-      ) : (
-        <div className="dash-card-grid">
-          {sortedComponents.map((comp) => (
-            <GridComponent
-              key={comp.id}
-              component={comp}
-              fields={fields}
-              data={data}
-              loading={loading}
-              totalCount={totalCount}
-              page={page}
-              pageSize={pageSize}
-              selectedRow={selectedRow}
-              onSearch={handleSearch}
-              onRowSelect={handleRowSelect}
-              onPageChange={handlePageChange}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-
-    {/* 접힌 상태 미니 뷰 — 기존 유지 */}
-    <CardMiniView />
-    {/* 리사이즈 핸들 — 기존 유지 */}
-    <div className="dash-resize-handle" data-resize="true" />
-  </div>
-);
-```
-
-### 11.4 GridComponent 컴포넌트 (새로 추가)
-
-```tsx
-function GridComponent({ component, fields, data, ...rest }: Props) {
-  const pos = component.position as GridPosition;
-  const type = component.type;
-  const config = component.config ?? {};
-
-  // CSS 변수로 col/row 모두 반응형 주입.
-  // ★ row/rowSpan도 responsive에서 override 가능하므로 --row-*, --row-span-*까지 반드시 주입.
-  //   (주입 안 하면 narrow에서 폼이 아래로 내려가야 하는 배치가 실제로는 안 내려감 — Finding 1)
-  //   row 미지정은 'auto' 문자열로 주입 → CSS grid auto placement가 작동.
-  const toRowVal = (r?: number): string | number => (r != null ? r : 'auto');
-  const toSpanVal = (s?: number): number => s ?? 1;
-
-  const style: React.CSSProperties = {
-    // ─── 기본 (fallback) ───
-    '--col': pos.col,
-    '--col-span': pos.colSpan,
-    '--row': toRowVal(pos.row),
-    '--row-span': toSpanVal(pos.rowSpan),
-
-    // ─── narrow (≤520px) 오버라이드 — 미지정 시 기본값으로 fallback ───
-    '--col-narrow': pos.responsive?.narrow?.col ?? pos.col,
-    '--col-span-narrow': pos.responsive?.narrow?.colSpan ?? pos.colSpan,
-    '--row-narrow': toRowVal(pos.responsive?.narrow?.row ?? pos.row),
-    '--row-span-narrow': toSpanVal(pos.responsive?.narrow?.rowSpan ?? pos.rowSpan),
-
-    // ─── normal (520~900px) 오버라이드 ───
-    '--col-normal': pos.responsive?.normal?.col ?? pos.col,
-    '--col-span-normal': pos.responsive?.normal?.colSpan ?? pos.colSpan,
-    '--row-normal': toRowVal(pos.responsive?.normal?.row ?? pos.row),
-    '--row-span-normal': toSpanVal(pos.responsive?.normal?.rowSpan ?? pos.rowSpan),
-
-    // ─── wide (>900px) 오버라이드 ───
-    '--col-wide': pos.responsive?.wide?.col ?? pos.col,
-    '--col-span-wide': pos.responsive?.wide?.colSpan ?? pos.colSpan,
-    '--row-wide': toRowVal(pos.responsive?.wide?.row ?? pos.row),
-    '--row-span-wide': toSpanVal(pos.responsive?.wide?.rowSpan ?? pos.rowSpan),
-
-    // 기본 렌더는 CSS 변수로 — CSS에서 @container 쿼리가 오버라이드 (섹션 11.5)
-    gridColumn: `var(--col) / span var(--col-span)`,
-    gridRow: `var(--row) / span var(--row-span)`,
-  } as React.CSSProperties;
-
-  return (
-    <div className="tpl-component" data-type={type} style={style}>
-      {renderByType(type, fields, data, config, rest)}
-    </div>
-  );
-}
-
-function renderByType(type: ComponentType, fields, data, config, rest) {
-  switch (type) {
-    case 'table':
-      return <FcTable fields={fields} data={data} loading={rest.loading} config={config} onRowSelect={rest.onRowSelect} />;
-    case 'search':
-      return <FcSearch fields={fields} onSearch={rest.onSearch} config={config} />;
-    case 'form':
-      return <FcForm fields={fields} config={config} loadRow={rest.selectedRow ?? undefined} />;
-    case 'button':
-      return <FcButton config={config} />;
-    case 'button-bar':
-      return <FcButtonBar config={config} />;
-    case 'pagination':
-      return <FcPagination total={rest.totalCount} page={rest.page} config={config} onPageChange={rest.onPageChange} />;
-    // title / divider / stats — 기존 DashboardCard의 렌더 로직 이전
-    default:
-      return <div className="tpl-unknown">{type}</div>;
-  }
-}
-```
-
-### 11.5 CSS (`dashboard.css`에 추가)
-
-```css
-/* ═══════════════════════════════════════════════════════════════════════════
-   대시보드 카드 — grid 기반 템플릿 렌더
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-/* 카드 본문 — container query 활성화 */
-.dash-card-body {
-  flex: 1;
-  overflow: auto;
-  padding: .5rem;
-  container-type: inline-size;
-  container-name: card;
-}
-
-/* 템플릿 컴포넌트 grid */
-.dash-card-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--grid-cols, 12), minmax(0, 1fr));
-  gap: var(--grid-gap, .5rem);
-  width: 100%;
-  align-content: start;
-}
-
-/* 각 컴포넌트 슬롯 */
-.dash-card-grid > .tpl-component {
-  min-width: 0;                          /* overflow 방지 (grid item 기본 min-width: auto 주의) */
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-/* ── 반응형 — 카드 너비 기준 ── */
-/* ★ 각 breakpoint에서 col / row 전부 오버라이드해야 responsive.row가 실제로 적용됨 (Finding 1) */
-@container card (max-width: 520px) {
-  .dash-card-grid {
-    gap: .35rem;
-  }
-  .dash-card-grid > .tpl-component {
-    grid-column: var(--col-narrow) / span var(--col-span-narrow);
-    grid-row: var(--row-narrow) / span var(--row-span-narrow);
-  }
-}
-
-@container card (min-width: 520.01px) and (max-width: 900px) {
-  .dash-card-grid {
-    gap: .45rem;
-  }
-  .dash-card-grid > .tpl-component {
-    grid-column: var(--col-normal) / span var(--col-span-normal);
-    grid-row: var(--row-normal) / span var(--row-span-normal);
-  }
-}
-
-@container card (min-width: 900.01px) {
-  .dash-card-grid {
-    gap: .55rem;
-  }
-  .dash-card-grid > .tpl-component {
-    grid-column: var(--col-wide) / span var(--col-span-wide);
-    grid-row: var(--row-wide) / span var(--row-span-wide);
-  }
-}
-
-/* 에러/로딩 상태 */
-.dash-card-error {
-  padding: 2rem;
-  text-align: center;
-  color: var(--v5-red);
-  font-size: .7rem;
-}
-.dash-card-loading {
-  padding: 2rem;
-  text-align: center;
-  color: var(--v5-text-muted);
-  font-size: .7rem;
-}
-```
-
-### 11.6 주의사항 — grid item min-width
-
-CSS grid item은 기본 `min-width: auto`라 안쪽 콘텐츠가 크면 컬럼을 밀어냄. 반드시 `min-width: 0`을 설정해야 **12열 비율이 유지됨**. (v12 grid 안정성 핵심)
-
-### 11.7 Canvas 템플릿 렌더 (kind === 'canvas')
-
-```tsx
-{template.kind === 'canvas' ? (
-  <div className="dash-card-canvas-wrapper">
-    {/* 기존 absolute 방식 유지 — scale 없이 실제 크기 */}
-    <div className="dash-card-canvas">
-      {sortedComponents.map((comp) => (
-        <AbsoluteComponent key={comp.id} component={comp} />
-      ))}
-    </div>
-  </div>
-) : (
-  <div className="dash-card-grid">{/* business */}</div>
-)}
-```
-
-`canvas` kind는 스크롤 가능한 자유 캔버스로 렌더. 반응형 없음.
-
----
-
-## 12. v5 grid CSS 변수
-
-### 12.1 수정 대상 파일
-
-`frontend/styles/v5-layout.css` (전역 토큰) 또는 `frontend/styles/dashboard.css` (대시보드 전용)
-
-### 12.2 추가 변수
-
-```css
-:root {
-  /* ─── grid 시스템 ─── */
-  --grid-cols: 12;
-  --grid-gap: .5rem;
-  --grid-gap-narrow: .35rem;
-  --grid-gap-normal: .45rem;
-  --grid-gap-wide: .55rem;
-
-  /* ─── card container breakpoints ─── */
-  --card-narrow-max: 520px;
-  --card-normal-max: 900px;
-  /* wide는 > 900px */
-
-  /* ─── grid 가이드 라인 (빌더 전용) ─── */
-  --grid-line: rgba(108, 92, 231, .08);
-  --grid-line-hover: rgba(108, 92, 231, .2);
-  --grid-drop-preview: rgba(108, 92, 231, .15);
-  --grid-drop-preview-border: rgba(108, 92, 231, .5);
-}
-
-.dark {
-  --grid-line: rgba(162, 155, 254, .1);
-  --grid-line-hover: rgba(162, 155, 254, .25);
-  --grid-drop-preview: rgba(162, 155, 254, .15);
-  --grid-drop-preview-border: rgba(162, 155, 254, .5);
-}
-```
-
-### 12.3 v5 토큰 호환성
-
-기존 `--v5-primary`, `--v5-cyan`, `--v5-glass` 등은 **그대로 유지**. grid 변수는 별도 네임스페이스(`--grid-*`)로 추가만.
-
----
-
-## 13. Template 마이그레이션 알고리즘
-
-### 13.1 필요성
-
-기존 DB의 `Template`은 `kind` 필드가 없고 `components[].position`이 `{ x, y, w, h }` 절대좌표. 새 모델로 전환하려면 변환 필요.
-
-### 13.2 변환 전략
-
-**수동 승인 필수 + 승인 후 자동 근사 변환 + 수동 미세 조정** (Finding 3 반영)
-
-레거시 Template(kind 필드가 없는 기존 DB 레코드)을 다루는 3원칙:
-
-1. **자동 business 변환 금지** — `kind` 없음 → `business`로 자동 부여하는 fallback 코드를 어디에도 두지 말 것. 한 번의 오판으로 control/flow 류가 grid로 망가지면 복구 어려움.
-2. **사용자 승인 다이얼로그 필수** — 레거시 Template을 빌더에서 열 때 반드시 `business / canvas / 취소` 선택 다이얼로그. 디폴트는 `isLikelyCanvasTemplate` 휴리스틱 결과를 따름 (섹션 13.3.1).
-3. **원본 보존** — 변환 후 저장 시 원본 absolute 데이터를 `migration.backup` 필드로 1회 보존 → 롤백 여지 확보.
-
-**이유**: 이전 스펙은 "프론트 런타임 자동 변환"을 권장했지만, control/flow 같은 canvas 성격 템플릿이 섞여 있을 때 자동 변환은 대규모 데이터 손상 위험. 수동 승인으로만 변환 경로를 열어두는 것이 안전.
-
-### 13.3 알고리즘 (의사코드)
-
-#### 13.3.1 canvas 후보 감지 — 변환 전에 반드시 실행
-
-```ts
-/**
- * 레거시 Template이 canvas(자유배치) 성격인지 휴리스틱 감지.
- * true면 자동 변환 금지, 사용자 다이얼로그에서 'canvas' 디폴트.
- *
- * 감지 규칙:
- * 1. 이름/카테고리/테이블명에 canvas 키워드
- * 2. y 좌표 분포가 흩어져 있음 (컴포넌트 ≥ 10개에 70% 이상이 각자 다른 row)
- * 3. controlFlow / edges 같은 자유배치 전용 필드 존재
- */
-export const CANVAS_KEYWORDS = [
-  'control', 'flow', 'workflow', 'bpm',
-  'canvas', 'node', 'diagram', 'graph',
-] as const;
-
-export function isLikelyCanvasTemplate(oldTpl: OldTemplate): boolean {
-  const tableName = (oldTpl.primaryTable ?? '').toLowerCase();
-  const category = (oldTpl.category ?? '').toLowerCase();
-  const name = (oldTpl.name ?? '').toLowerCase();
-
-  // 1. 키워드 매칭
-  if (CANVAS_KEYWORDS.some((k) =>
-    tableName.includes(k) || category.includes(k) || name.includes(k)
-  )) {
-    return true;
-  }
-
-  // 2. y 좌표 분포 — 컴포넌트가 많고 행 그룹핑이 안 되면 자유배치 가능성
-  const comps = oldTpl.views?.list?.components ?? [];
-  if (comps.length >= 10) {
-    const ys = comps.map((c) => (c.position as any).y ?? 0);
-    const uniqueBuckets = new Set(ys.map((y) => Math.round(y / 20) * 20));
-    if (uniqueBuckets.size >= comps.length * 0.7) {
-      return true;
-    }
-  }
-
-  // 3. 자유배치 전용 필드 존재
-  if ((oldTpl as any).controlFlow || (oldTpl as any).edges) {
-    return true;
-  }
-
-  return false;
-}
-```
-
-#### 13.3.2 변환 함수 (사용자 승인 후에만 호출)
-
-> ⚠️ **이 함수는 절대 자동으로 호출되면 안 된다.** 반드시 섹션 13.5의 사용자 다이얼로그에서 'business'를 선택한 뒤에만 호출할 것.
-
-```ts
-/**
- * 기존 absolute Template → 새 grid Template 변환.
- *
- * 알고리즘:
- * 1. kind를 'business'로 설정 (사용자가 명시적으로 승인했으므로)
- * 2. 캔버스 너비를 "모든 컴포넌트의 x + w 중 최댓값"으로 추정
- * 3. y 좌표로 컴포넌트를 정렬
- * 4. 같은 y 근처(±20px)는 같은 row로 묶음
- * 5. 각 row 내에서 x 순 정렬 → col 번호 부여 (px → 12-col 비례 매핑)
- * 6. w → colSpan 비례 매핑, 초과분 클램프
- * 7. responsive는 비워둠 (사용자가 빌더에서 설정)
- * 8. 원본 absolute는 migration.backup에 1회 보존 (롤백 여지)
- */
-export function migrateTemplateAbsoluteToGrid(oldTpl: OldTemplate): NewTemplate {
-  const views = {
-    list: migrateViewAbsoluteToGrid(oldTpl.views.list),
-    create: migrateViewAbsoluteToGrid(oldTpl.views.create),
-    edit: migrateViewAbsoluteToGrid(oldTpl.views.edit),
-  };
-
-  return {
-    ...oldTpl,
-    kind: 'business',
-    views,
-    migration: {
-      backup: {
-        views: oldTpl.views,                  // 원본 절대좌표 보존
-        migratedAt: new Date().toISOString(),
-        migratedFrom: 'absolute',
-      },
-    },
-  };
-}
-
-function migrateViewAbsoluteToGrid(view: OldViewConfig): NewViewConfig {
-  const components = view.components;
-  if (!components.length) return { ...view, components: [] };
-
-  // 1. 캔버스 너비 추정
-  const canvasW = Math.max(
-    ...components.map((c) => (c.position as any).x + (c.position as any).w)
-  );
-
-  // 2. y 정렬
-  const sorted = [...components].sort((a, b) => {
-    const ay = (a.position as any).y;
-    const by = (b.position as any).y;
-    return ay - by;
-  });
-
-  // 3. row 그룹핑 (y ± 20px 이내는 같은 row)
-  const rows: OldComponent[][] = [];
-  let currentRow: OldComponent[] = [];
-  let currentRowY = -Infinity;
-  const ROW_THRESHOLD = 20;
-
-  for (const comp of sorted) {
-    const y = (comp.position as any).y;
-    if (Math.abs(y - currentRowY) > ROW_THRESHOLD) {
-      if (currentRow.length) rows.push(currentRow);
-      currentRow = [comp];
-      currentRowY = y;
-    } else {
-      currentRow.push(comp);
-    }
-  }
-  if (currentRow.length) rows.push(currentRow);
-
-  // 4. 각 row 내에서 x 순 정렬 → col/colSpan 계산
-  const newComponents: NewComponent[] = [];
-  rows.forEach((rowComps, rowIdx) => {
-    const sortedRow = [...rowComps].sort((a, b) => {
-      return (a.position as any).x - (b.position as any).x;
-    });
-
-    sortedRow.forEach((comp) => {
-      const oldPos = comp.position as any;
-      const col = Math.max(1, Math.round((oldPos.x / canvasW) * 12) + 1);
-      const colSpanRaw = Math.max(1, Math.round((oldPos.w / canvasW) * 12));
-      const colSpan = Math.min(colSpanRaw, 13 - col); // 12 초과 방지
-
-      newComponents.push({
-        ...comp,
-        position: {
-          col,
-          colSpan,
-          row: rowIdx + 1,
-        } as GridPosition,
-      });
-    });
-  });
-
-  return {
-    ...view,
-    components: newComponents,
-  };
-}
-```
-
-### 13.4 실행 위치
-
-**자동 실행은 어디에서도 금지.** 반드시 사용자 승인 UI를 거침.
-
-- **옵션 A (권장)**: 프론트엔드 빌더 진입 시 사용자 다이얼로그 (섹션 13.5). `kind` 없는 Template을 처음 열 때 1회 `isLikelyCanvasTemplate` 검사 → 사용자에게 `business / canvas / 취소` 선택 요구. 선택 즉시 DB에 저장하지 않고 빌더에서 편집 후 사용자가 "저장"을 눌러야 DB 반영.
-- **옵션 B**: 백엔드 일괄 마이그레이션 스크립트 — **권장하지 않음.** 필요 시에만, 소량 batch + 운영자 수동 승인 + 실행 전 canvas 후보 리스트 출력 + 드라이런 필수. 일괄 변환은 한 번의 오판으로 대량 손상.
-
-**절대 금지 패턴** (구현자/리뷰어는 다음 코드 패턴을 보면 반드시 막을 것):
-
-```ts
-// ❌ 절대 하지 말 것 — Template 로드 fallback에서 자동 kind 부여
-async function getTemplate(id) {
-  const tpl = await db.fetch(id);
-  if (!tpl.kind) tpl.kind = 'business';                       // ❌ canvas 오판
-  if (!tpl.kind) return migrateTemplateAbsoluteToGrid(tpl);   // ❌ 자동 변환
-  return tpl;
-}
-```
-
-```ts
-// ✅ 올바른 패턴 — kind 없으면 그대로 반환, 빌더가 다이얼로그로 처리
-async function getTemplate(id) {
-  const tpl = await db.fetch(id);
-  return tpl;                   // kind undefined 그대로
-}
-// 빌더 진입 시:
-if (!tpl.kind) {
-  const choice = await showKindDialog(tpl);   // 섹션 13.5
-  // ...
-}
-```
-
-### 13.5 변환 프로세스 — 사용자 승인 다이얼로그
-
-```tsx
-// TemplateLibraryModal 또는 빌더 진입점
-async function openTemplate(templateId: string) {
-  const tpl = await getTemplateInfo(templateId);
-
-  // 1. kind가 이미 있으면 그대로 열기 (신규 Template)
-  if (tpl.kind) {
-    loadToBuilder(tpl);
-    return;
-  }
-
-  // 2. 레거시 Template — kind 결정 필수. 자동 변환 금지, 사용자 승인만.
-  const likelyCanvas = isLikelyCanvasTemplate(tpl);
-  const choice = await showKindDialog({
-    title: '레거시 Template — 레이아웃 모델 확정 필요',
-    message: likelyCanvas
-      ? `⚠️ 이 Template은 자유배치(canvas) 성격으로 보입니다 (control/flow/node 관련). ` +
-        `business(grid)로 변환하면 배치가 망가질 수 있습니다.`
-      : `이 Template을 어떤 모델로 저장하시겠습니까?\n` +
-        `- business: grid + 반응형 (권장, 업무 화면)\n` +
-        `- canvas: 절대좌표 자유배치 (control/flow 등)`,
-    // canvas 후보면 canvas 버튼을 디폴트로 강조
-    defaultChoice: likelyCanvas ? 'canvas' : 'business',
-    options: [
-      { value: 'business', label: 'business (grid로 변환)' },
-      { value: 'canvas',   label: 'canvas (absolute 유지)' },
-      { value: 'cancel',   label: '취소' },
-    ],
-  });
-
-  if (choice === 'cancel') return;
-
-  if (choice === 'business') {
-    // 사용자가 의식적으로 business를 선택한 경우에만 변환 실행
-    const migrated = migrateTemplateAbsoluteToGrid(tpl);
-    loadToBuilder(migrated);
-    toast.info(
-      'business(grid)로 변환했습니다. 배치를 확인·조정 후 저장하세요. ' +
-      '원본은 migration.backup에 보존됩니다.'
-    );
-  } else {
-    // canvas — 위치는 그대로 두고 kind만 부여
-    loadToBuilder({ ...tpl, kind: 'canvas' });
-    toast.info('canvas로 설정했습니다. 배치는 그대로 유지됩니다.');
-  }
-}
-```
-
-**중요**:
-- `openTemplate`은 DB에 자동 저장하지 않음. 사용자가 빌더에서 확인·수정 후 명시적으로 "저장" 버튼을 눌러야 DB 반영.
-- `choice === 'cancel'`이면 빌더를 열지 않고 현재 상태 유지.
-- 다이얼로그는 블로킹이어야 함 — 사용자가 선택하기 전에는 빌더 진입 불가.
-
-### 13.6 특수 케이스
-
-- **컴포넌트가 0개**: 그대로 유지, 사용자에게 빈 템플릿 안내
-- **모든 컴포넌트가 같은 위치**: row 1에 전부 배치 (겹침 발생 — 사용자가 빌더에서 수동 조정)
-- **`isLikelyCanvasTemplate === true`**: 다이얼로그에서 'canvas' 버튼을 디폴트로 강조. 사용자가 의식적으로 'business'를 선택하지 않는 한 변환 실행 금지
-- **변환 후 저장 시**: `migration.backup`에 원본 절대좌표 1회 보존해서 롤백 여지 확보 (섹션 13.3.2)
-- **CANVAS_KEYWORDS 관리**: `frontend/types/invyone-component.ts` 또는 별도 상수 파일 한 곳에 정의해서 빌더/마이그레이션이 같은 리스트를 참조. 새 canvas 화면 추가 시 이 리스트에 키워드만 추가
-- **drift 방지**: `kind`는 반드시 Template 루트 필드로만 저장 (컴포넌트별 플래그 금지). 하나의 Template 안에 business/canvas가 섞이는 것 금지
-
----
-
-## 14. 빌더 UX 상세
-
-### 14.1 그리드 가이드 (캔버스 배경)
-
-12열 수직 라인을 캔버스 배경에 상시 표시.
-
-```css
-.dev-canvas-grid {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: .5rem;
-  padding: 1rem;
-  min-height: 400px;
-  background-image:
-    linear-gradient(
-      to right,
-      var(--grid-line) 1px,
-      transparent 1px
-    );
-  background-size: calc(100% / 12) 100%;
-}
-
-/* 드래그 중 가이드 강조 */
-.dev-canvas-grid.dragging {
-  background-image:
-    linear-gradient(
-      to right,
-      var(--grid-line-hover) 1px,
-      transparent 1px
-    );
-}
-```
-
-### 14.2 드롭 프리뷰
-
-팔레트에서 드래그 중 → 가장 가까운 cell에 반투명 프리뷰 표시.
-
-```tsx
-function DropPreview() {
-  const preview = useBuilderState((s) => s.dropPreview);
-  if (!preview) return null;
-
-  return (
-    <div
-      className="dev-drop-preview"
-      style={{
-        gridColumn: `${preview.col} / span ${preview.colSpan}`,
-        gridRow: preview.row,
-      }}
-    >
-      <div className="dev-drop-preview-label">
-        {preview.type} · span {preview.colSpan}
-      </div>
-    </div>
-  );
-}
-```
-
-```css
-.dev-drop-preview {
-  background: var(--grid-drop-preview);
-  border: 2px dashed var(--grid-drop-preview-border);
-  border-radius: 6px;
-  min-height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-.dev-drop-preview-label {
-  font-size: .55rem;
-  font-weight: 600;
-  color: var(--v5-primary);
-  opacity: .8;
-}
-```
-
-### 14.3 반응형 프리뷰 토글 (상단 툴바)
-
-빌더 안에서 narrow/normal/wide 전환 가능.
-
-```tsx
-// BuilderToolbar.tsx에 추가
-const previewWidth = useBuilderState((s) => s.previewWidth);
-const setPreviewWidth = useBuilderState((s) => s.setPreviewWidth);
-
-<div className="dev-tb-group">
-  <span className="dev-tb-label">미리보기</span>
-  {(['narrow', 'normal', 'wide'] as const).map((w) => (
-    <button
-      key={w}
-      className={`dev-preview-tab${previewWidth === w ? ' active' : ''}`}
-      onClick={() => setPreviewWidth(w)}
-    >
-      {w === 'narrow' ? '좁음 (400px)'
-        : w === 'normal' ? '보통 (720px)'
-        : '넓음 (1100px)'}
-    </button>
-  ))}
-</div>
-```
-
-캔버스는 `max-width`를 설정 받아 실제로 해당 너비로 축소 → `@container` 쿼리가 작동.
-
-### 14.4 셀 충돌 처리
-
-같은 row/col 범위에 블록이 이미 있을 때:
-
-**선택한 방침**: **자동으로 다음 row로 밀기** (업무 담당자 UX에 친화적).
-
-```ts
-function computeNextAvailableRow(
-  newCol: number,
-  newColSpan: number,
-  blocks: Component[]
-): number {
-  const occupied = new Map<number, Set<number>>(); // row → 점유 col set
-  for (const block of blocks) {
-    const pos = block.position as GridPosition;
-    const row = pos.row ?? 1;
-    const set = occupied.get(row) ?? new Set();
-    for (let c = pos.col; c < pos.col + pos.colSpan; c++) {
-      set.add(c);
-    }
-    occupied.set(row, set);
-  }
-
-  let row = 1;
-  while (true) {
-    const set = occupied.get(row) ?? new Set();
-    let conflict = false;
-    for (let c = newCol; c < newCol + newColSpan; c++) {
-      if (set.has(c)) {
-        conflict = true;
-        break;
-      }
-    }
-    if (!conflict) return row;
-    row++;
-  }
-}
-```
-
-### 14.5 속성 패널 — Grid 편집
-
-`BuilderProps.tsx`에 grid 편집 섹션 추가:
-
-```tsx
-{isGridPosition(block.position) && (
-  <div className="dev-props-sec">
-    <div className="dev-props-sec-title">위치 (12열 grid)</div>
-
-    <label>
-      시작 컬럼 (col)
-      <input
-        type="number" min={1} max={12}
-        value={pos.col}
-        onChange={(e) => updateBlock(block.id, {
-          position: { ...pos, col: Number(e.target.value) },
-        })}
-      />
-    </label>
-
-    <label>
-      차지 컬럼 (colSpan)
-      <input
-        type="number" min={1} max={12}
-        value={pos.colSpan}
-        onChange={(e) => updateBlock(block.id, {
-          position: { ...pos, colSpan: Number(e.target.value) },
-        })}
-      />
-    </label>
-
-    <label>
-      행 (row)
-      <input
-        type="number" min={1}
-        value={pos.row ?? 1}
-        onChange={(e) => updateBlock(block.id, {
-          position: { ...pos, row: Number(e.target.value) },
-        })}
-      />
-    </label>
-
-    <div className="dev-props-sec-subtitle">반응형 오버라이드</div>
-    {(['narrow', 'normal', 'wide'] as const).map((bp) => (
-      <ResponsiveOverrideRow
-        key={bp}
-        breakpoint={bp}
-        override={pos.responsive?.[bp]}
-        onChange={(patch) => updateBlock(block.id, {
-          position: {
-            ...pos,
-            responsive: { ...pos.responsive, [bp]: patch },
-          },
-        })}
-      />
-    ))}
-  </div>
-)}
-```
-
-### 14.6 시각 피드백 요약
-
-| 상태 | 피드백 |
-|---|---|
-| 평상시 | 12열 가이드 라인 연하게 |
-| 드래그 중 | 가이드 라인 진하게 + 드롭 프리뷰 + 가장 가까운 cell 하이라이트 |
-| 리사이즈 중 | 블록 테두리 강조 + colSpan 숫자 플로팅 라벨 |
-| 선택됨 | 블록 외곽선 보라 + 핸들 표시 |
-| 충돌 | (자동 밀기 채택 — 충돌 표시 없음) |
-
----
-
-## 15. 등록/수정 팝업
-
-### 15.1 팝업도 grid 모델 사용 여부
-
-**결정**: 팝업도 **grid 사용**. 다만 팝업은 고정 크기(`ViewConfig.size`)라 `@container`는 옵션.
-
-### 15.2 팝업 구조
-
-```ts
-interface ViewConfig {
-  components: Component[];
-  extends?: 'create';
-  /** 팝업 크기 (create/edit 뷰용) */
-  size?: {
-    w: number;  // px
-    h: number;  // px
-  };
-}
-```
-
-`size.w`를 기준으로 narrow/normal/wide 판정:
-- `size.w <= 520` → narrow
-- `520 < size.w <= 900` → normal
-- `size.w > 900` → wide
-
-또는 팝업 자체에 `container-type: inline-size`를 걸어서 리사이즈 가능한 팝업에 대응.
-
-### 15.3 `FormConfig.columns`와의 관계
-
-**기존 `FormConfig.columns` (1~3) 유지**. 2단계 구조:
-
-```
-팝업 뷰 grid (12열)
-  └─ form 컴포넌트 (colSpan 12)
-       └─ form 내부 field grid (columns: 2, 즉 1fr 1fr)
-```
-
-팝업 뷰의 grid는 컴포넌트(form/table/button-bar 등) 단위. 폼 내부 필드 배치는 `FormConfig.columns`가 담당.
-
-### 15.4 팝업 렌더
-
-```tsx
-// 팝업 뷰 렌더 (BuilderCanvas.tsx의 팝업 분기)
-if (currentView !== "list") {
-  const view = template.views[currentView];
-  const popupSize = view.size ?? { w: 720, h: 600 };
-
-  return (
-    <div className="dev-popup-overlay">
-      <div
-        className="dev-popup-frame"
-        style={{ width: popupSize.w, height: popupSize.h }}
-      >
-        <div
-          className="dev-popup-grid"
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
-            gap: '.5rem',
-            padding: '1rem',
-            containerType: 'inline-size',
-            containerName: 'popup',
-          }}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-        >
-          {view.components.map((block) => (
-            <BuilderBlock key={block.id} block={block} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-### 15.5 팝업 크기 편집 UI
-
-속성 패널에서 팝업 전체 크기 편집 가능:
-
-```tsx
-{currentView !== 'list' && (
-  <div className="dev-props-sec">
-    <div className="dev-props-sec-title">팝업 크기</div>
-    <label>너비 <input type="number" value={view.size?.w ?? 720} /></label>
-    <label>높이 <input type="number" value={view.size?.h ?? 600} /></label>
-  </div>
-)}
-```
-
-### 15.6 M-D 구조 예시 (등록 팝업)
-
-```ts
-const createView: ViewConfig = {
-  size: { w: 960, h: 700 },
-  components: [
-    {
-      id: 'form_header',
-      type: 'form',
-      label: '주문 기본 정보',
-      position: { col: 1, colSpan: 12, row: 1 },
-      config: { columns: 3 /* FormConfig.columns */ },
-    },
-    {
-      id: 'title_items',
-      type: 'title',
-      label: '주문 품목',
-      position: { col: 1, colSpan: 12, row: 2 },
-      config: { text: '주문 품목', fontSize: '.85rem', fontWeight: '700', align: 'left' },
-    },
-    {
-      id: 'table_items',
-      type: 'table',
-      label: '품목 테이블',
-      position: { col: 1, colSpan: 12, row: 3 },
-      config: { /* inlineEdit: true */ },
-    },
-    {
-      id: 'buttonbar_actions',
-      type: 'button-bar',
-      label: '액션',
-      position: { col: 1, colSpan: 12, row: 4 },
-      config: { /* 저장/취소 */ },
-    },
-  ],
-};
-```
-
----
-
-## 16. Phase 3 / Phase 4 기존 문서 수정 지침
-
-### 16.1 `notes/gbpark/2026-04-10-phase3-developer-builder.md`
-
-#### 수정할 섹션
-
-| 기존 내용 | 변경 내용 |
-|---|---|
-| "빌더 캔버스는 자유배치" | "빌더 캔버스는 grid-snap (12열) — `template_kind: 'business'` 기본. `canvas` kind일 때만 자유배치" |
-| 블록 position `{ x, y, w, h }` | `GridPosition { col, colSpan, row?, rowSpan?, responsive? }` |
-| 드래그 시 픽셀 좌표 저장 | 드래그 시 가장 가까운 cell로 스냅, `col`/`colSpan` 저장 |
-| 리사이즈 = w/h 변경 | 리사이즈 = `colSpan` 변경 (cell 단위) |
-| 팔레트 드롭 시 `{x, y, w: 0, h: 0}` 추가 | 팔레트 드롭 시 `DEFAULT_COMPONENT_LAYOUTS[type]` 기본값 + row 자동 계산 |
-| "반응형 고려 안 함" | "반응형 = `@container` 카드 너비 기준, wide/normal/narrow 3단계" |
-| (없음) | **추가**: 반응형 프리뷰 토글 (상단 툴바, narrow/normal/wide 버튼) |
-| (없음) | **추가**: 12열 가이드 라인 렌더, 드롭 프리뷰, cell 충돌 자동 밀기 |
-
-#### 유지할 섹션
-
-- 팔레트 8종 구조
-- 속성 패널 구조 (fields on/off, dataSource, 포트 등)
-- 필드 설정 UI
-- 등록/수정 팝업 편집 UX (다만 grid 모델 사용으로 변경)
-
-### 16.2 `notes/gbpark/2026-04-10-phase4-dashboard-menu.md`
-
-#### 수정할 섹션
-
-| 기존 내용 | 변경 내용 |
-|---|---|
-| `DashboardCard`가 `canvasBounds + transform: scale`로 템플릿 렌더 | `DashboardCard`가 `display: grid + container-type: inline-size + @container 쿼리`로 템플릿 렌더 |
-| 카드 본문에 `position: absolute` 컴포넌트 배치 | 카드 본문에 `grid-column / grid-row`로 컴포넌트 배치 |
-| `ComponentRenderer`에서 `{ left, top, width, height }` 스타일 | `GridComponent`에서 `gridColumn / gridRow` 스타일 + CSS 변수로 반응형 주입 |
-| (없음) | **추가**: `kind === 'canvas'`일 때 absolute 유지하는 별도 렌더 분기 |
-| "카드 리사이즈 시 scale 재계산" | "카드 리사이즈 시 `@container`가 자동 반응 — JS 계산 불필요" |
-| 뷰포트 breakpoint 언급 (있다면) | 카드 컨테이너 breakpoint(narrow/normal/wide)로 변경 |
-
-#### 유지할 섹션
-
-- 대시보드 CRUD (목록/추가/삭제/이름변경)
-- **대시보드 캔버스 자체의 카드 배치는 자유배치 유지** (카드들의 absolute 위치 + 드래그/리사이즈)
-- 사이드바 메뉴 = 대시보드 구조
-- 템플릿 라이브러리 모달
-- 카드 접기/펴기, 설정 패널, 헤더/툴바
-
-#### 2레이어 명확화
-
-Phase 4 문서에 이 점을 명시 추가:
-
-> **두 레이어를 혼동하지 말 것**
->
-> - **레이어 1 — 대시보드 캔버스**: 카드들의 배치 = `absolute` 자유배치 (드래그/리사이즈)
-> - **레이어 2 — 카드 내부 Template**: 컴포넌트들의 배치 = `grid` + `@container` 반응형
->
-> 레이어 1(대시보드)은 자유배치가 맞음. 사용자가 카드를 원하는 위치에 두고 싶어하기 때문. 레이어 2(카드 내부)만 grid로 전환.
-
-### 16.3 수정 타이밍
-
-Phase 1 (이 문서 기반 React 이식) **완료 후** Phase 3/4 문서 업데이트. 이유:
-
-- 실제 구현하면서 세부가 바뀔 수 있음
-- 미리 고치면 문서가 잘못된 상태로 남을 수 있음
-- Phase 1 완료 시점에 "실제 코드 기준"으로 두 문서를 업데이트하는 게 정확도 높음
-
-### 16.4 새 문서 추가 여부
-
-Phase 3/4 문서를 대폭 수정해야 한다면 **새 문서**(`phase3-developer-builder-v2.md`, `phase4-dashboard-menu-v2.md`)로 만들고 기존은 `-legacy` 접미사 붙여 보존하는 방안도 고려. Phase 1 완료 시 판정.
-
----
-
-## 17. 참조
-
-### 메모리
-
-- `memory/project_template_builder.md` — 2026-04-10 갱신
-- `memory/feedback_responsive_container_based.md` — 신규 원칙
-- `memory/project_component_spec.md` — FieldConfig 규격
-- `memory/project_mockup_status.md` — 현재 mockup 상태
-
-### 코드 (검토/수정 지점)
-
-- `frontend/types/invyone-component.ts` — 섹션 8 스펙대로 재정의
-- `frontend/types/responsive.ts` — VEX 레거시, 폐기 판정
-- `frontend/types/screen-legacy-backup.ts` — VEX 원본 참조 (읽기 전용)
-- `frontend/components/builder/BuilderCanvas.tsx` — 섹션 9 스펙대로 재작성
-- `frontend/components/builder/BuilderBlock.tsx` — 섹션 9 스펙대로 재작성
-- `frontend/components/builder/hooks/useBlockDrag.ts` — 섹션 9.5, 9.6 스펙대로 재작성
-- `frontend/components/builder/hooks/useBuilderState.ts` — 섹션 9.8 스펙대로 시그니처 변경
-- `frontend/components/builder/BuilderProps.tsx` — 섹션 14.5 grid 편집 UI 추가
-- `frontend/components/dash/DashboardCard.tsx:165-202` — 섹션 11.2 스펙대로 scale 로직 삭제, 섹션 11.3 렌더 코드로 교체
-- `frontend/components/v2/V2Layout.tsx` — grid-cols-12 참조 (재활용 가능)
-- `frontend/styles/dashboard.css` — 섹션 11.5 CSS 추가
-- `frontend/styles/v5-layout.css` — 섹션 12 CSS 변수 추가
-
-### 설계 문서
-
-- `notes/gbpark/2026-04-08-invyone-component-spec.md` — 컴포넌트 규격 v1.0
-- `notes/gbpark/2026-04-09-invyone-architecture.md` — 아키텍처 결정
-- `notes/gbpark/2026-04-10-phase3-developer-builder.md` — Phase 1 후 섹션 16.1 지침대로 갱신
-- `notes/gbpark/2026-04-10-phase4-dashboard-menu.md` — Phase 1 후 섹션 16.2 지침대로 갱신
-
----
-
-## 18. 미확정 사항 (Phase 1 중 결정)
-
-- **row-span 실제 사용처** — 현재 타입에 선언만 돼있음. 실제로 row-span이 필요한 컴포넌트가 있을지 Phase 1 중 판정
-- **폼 내부 필드 배치 grid 통합 여부** — 현재 `FormConfig.columns`(1~3) 유지, 나중에 필드도 grid화할지 Phase 2 이후 검토
-- **`@container` 미지원 브라우저 대응** — 최신 브라우저(Chrome 105+, Safari 16+, Firefox 110+)만 지원할지, 폴리필/폴백 제공할지
-- **canvas kind 빌더 UX** — business 빌더와 같은 화면에서 모드 전환할지, 별도 진입점으로 할지
-- **Template 마이그레이션 실행 위치** — 백엔드 일괄 vs 프론트 런타임 (섹션 13.4)
-- **빌더 툴바 미리보기 토글 위치** — 헤더? 캔버스 상단? 속성 패널?
-
----
-
-## 19. 다음 액션
-
-1. ✅ 이 문서 작성 (완료)
-2. ✅ 리뷰 피드백 3건 반영 — 섹션 20 참조
-3. ⬜ `frontend/types/invyone-component.ts` 재정의 (섹션 8)
-4. ⬜ `frontend/styles/v5-layout.css` + `dashboard.css` 변수/스타일 추가 (섹션 11.5, 12)
-5. ⬜ `frontend/components/dash/DashboardCard.tsx` grid 렌더 전환 (섹션 11)
-6. ⬜ `frontend/components/builder/*` grid-snap 빌더 재작성 (섹션 9, 14)
-7. ⬜ 등록/수정 팝업 grid 적용 (섹션 15)
-8. ⬜ Template 마이그레이션 유틸 + 승인 다이얼로그 (섹션 13)
-9. ⬜ 기존 Template 전수 검증 (빌더에서 열어 kind 선택 → 결과 확인)
-10. ⬜ Phase 3/4 문서 업데이트 (섹션 16)
-
----
-
-## 20. 리뷰 피드백 반영 이력
-
-### 2026-04-10 — ChatGPT 3차 리뷰 반영
-
-외부 리뷰에서 지적된 3가지 이슈를 구현 착수 전에 문서에서 먼저 닫음.
-
-#### Finding 1 (High): `ResponsiveGridOverride`의 row/rowSpan이 런타임 CSS에 미반영
-
-- **문제**: 섹션 8.2 타입은 `ResponsiveGridOverride`에서 row/rowSpan도 override 허용. 섹션 10.3 수주관리 예시는 narrow/normal에서 form이 `row: 4`로 내려가도록 작성. 그러나 섹션 11.4 `GridComponent`는 CSS 변수로 col/colSpan만 주입했고, 섹션 11.5 `@container` 쿼리도 `grid-column`만 오버라이드 → 실제 렌더 시 narrow에서 form이 테이블 위치와 겹침. 문서상 가장 심각한 버그.
-- **해결**:
-  - 섹션 11.4 — `--row`, `--row-span` 및 `--row-narrow/normal/wide`, `--row-span-narrow/normal/wide` 8개 CSS 변수 추가 주입. `row`가 없을 땐 `'auto'` 문자열을 주입해 CSS grid auto placement가 작동하도록 함. `toRowVal` / `toSpanVal` 헬퍼 추가.
-  - 섹션 11.5 — 각 `@container` 쿼리에 `grid-row: var(--row-*) / span var(--row-span-*)` 라인 추가.
-  - 기본 `style.gridRow`를 `var(--row) / span var(--row-span)`으로 변경.
-
-#### Finding 2 (Medium): 빌더 셀 계산 공식 문서 내 불일치
-
-- **문제**: 섹션 9.3의 `pixelToGridCol`/`pixelToColSpan`은 gap을 고려했는데, 섹션 9.5 `startDrag`/9.6 `startResize` 예시는 `canvasW / 12`로 직접 계산해서 gap/padding을 무시 → 드롭 위치와 드래그/리사이즈 스냅 결과가 미세하게 어긋남.
-- **해결**:
-  - 섹션 9.3 — `getGridMetrics(canvasWidth, gap, padding)` 단일 기하학 계산 함수 추가. `pixelToGridCol`/`pixelToColSpan`/`pixelDeltaToColDelta` 전부 이 함수를 통함. `readCanvasGeometry(el)` 유틸로 DOM에서 gap/padding 읽기 일원화. 상단에 **"`canvasW / 12` 직접 계산 절대 금지"** 경고 박스 추가.
-  - 섹션 9.5 — `startDrag`에서 `readCanvasGeometry(canvasEl)`로 1회 읽고 `pixelDeltaToColDelta(dx, canvasWidth, gap, padding)` 호출로 교체.
-  - 섹션 9.6 — `startResize`도 동일하게 공용 함수 사용.
-
-#### Finding 3 (Medium): 레거시 Template 자동 변환 위험
-
-- **문제**: 섹션 13이 "`kind` 없는 Template → 자동 `business` + 프론트 런타임 변환 권장"으로 작성됨. control/flow 같은 canvas 성격 템플릿이 자동으로 business로 망가질 위험. 섹션 13.6에 주의는 있었지만 기본 흐름이 자동이라 구현자가 그대로 따르면 위험.
-- **해결**:
-  - 섹션 13.2 — 전략을 "자동 변환"에서 **"수동 승인 필수"** 로 전환. 3원칙(자동 금지, 승인 다이얼로그 필수, 원본 보존) 명시.
-  - 섹션 13.3 — `13.3.1 isLikelyCanvasTemplate` 휴리스틱 감지 함수 신규 (키워드·y 분포·controlFlow 필드). `13.3.2 migrateTemplateAbsoluteToGrid`에 "자동 호출 금지" 경고 + `migration.backup` 필드 원본 보존 추가. `CANVAS_KEYWORDS` 상수 분리.
-  - 섹션 13.4 — "옵션 B 런타임 자동 변환 권장" **삭제**. 옵션 A 승인 UI 권장, 옵션 B 일괄 스크립트 비권장. **절대 금지 패턴**/**올바른 패턴** 코드 대비 추가.
-  - 섹션 13.5 — `openTemplate` 함수를 "자동 변환 fallback"에서 "블로킹 다이얼로그 + 사용자 선택" 흐름으로 재작성. `isLikelyCanvasTemplate === true`면 canvas 버튼 디폴트 강조.
-  - 섹션 13.6 — `migration.backup`, `CANVAS_KEYWORDS` 중앙 관리, `kind`는 루트 필드만 (컴포넌트별 플래그 금지) 등 운영 규칙 추가.
-
-### 2026-04-10 — ChatGPT 4차 리뷰 반영
-
-3차 리뷰 반영 후 재검토에서 drag/resize만 공용 기하학 체계로 갔고 drop은 놓친 것이 지적됨. 남은 1건도 닫음.
-
-#### Finding 4 (Medium): `handleDrop`이 공용 기하학 함수 체계 밖
-
-- **문제**: 섹션 9.4의 `handleDrop`이 `pixelToGridCol(relX, rect.width)`만 호출 → gap/padding이 기본값(0)으로 계산됨. 섹션 9.3에서 정한 "`readCanvasGeometry`로 gap/padding 읽어서 일관 적용" 원칙이 drop만 예외였음. 결과적으로 **첫 배치 스냅과 이후 드래그/리사이즈 스냅이 미세하게 어긋남**.
-- **해결**:
-  - 섹션 9.4 — `handleDrop`도 `readCanvasGeometry(canvasEl)`로 gap/padding 읽고 `pixelToGridCol(relX, canvasWidth, gap, padding)` 4인자 호출로 교체. 드래그/리사이즈(9.5, 9.6)와 완전히 같은 경로.
-  - 섹션 9.4 상단 — **"drop/drag/resize는 모두 같은 공용 기하학 함수 체계(9.3)를 따른다"** 경고 블록 추가.
-
-### 검증 방법 (Phase 1 구현 중 돌려야 할 테스트)
-
-- **Finding 1**: 섹션 10.3의 수주관리 예시를 실제로 narrow(카드 너비 400px)에서 렌더했을 때, form이 row 4 위치(테이블 아래)에 오는지 확인. wide(1000px)에서는 form이 col 9부터 오른쪽에 오는지 확인.
-- **Finding 2**: 캔버스 padding=16px, gap=8px, 컨테이너 너비=800px일 때 `pixelDeltaToColDelta(200, 800, 8, 16)`이 정확히 `3` (3컬럼 이동)을 반환하는지 단위 테스트.
-- **Finding 3**: 기존 DB에서 `control_flow_*` 테이블을 primary로 갖는 Template을 빌더에서 열었을 때 canvas 버튼이 디폴트로 선택되고, 사용자가 `취소`를 누르면 DB 변경 없이 빌더 미진입. 사용자가 `business`를 의식적으로 선택하면 그때만 변환 실행 + `migration.backup`에 원본 보존.
-- **Finding 4**: 캔버스가 `padding: 16px; gap: 8px`인 상태에서, (a) 빈 캔버스의 특정 위치에 팔레트를 drop, (b) 다른 컴포넌트를 drop 후 같은 위치로 drag, (c) 또 다른 컴포넌트를 drop 후 해당 위치까지 resize — 이 세 경로가 **모두 같은 `col` / `colSpan` 값으로 수렴**하는지 확인. 셋 중 하나만 어긋나면 공용 함수 체계 어딘가에서 벗어난 것.
diff --git a/notes/gbpark/2026-04-10-template-redesign-phase1-log.md b/notes/gbpark/2026-04-10-template-redesign-phase1-log.md
deleted file mode 100644
index ec985d08..00000000
--- a/notes/gbpark/2026-04-10-template-redesign-phase1-log.md
+++ /dev/null
@@ -1,527 +0,0 @@
-# Template 모델 재설계 — Phase 1 구현 로그 (1차)
-
-**작업일**: 2026-04-10
-**작업자**: gbpark + Claude
-**기반 스펙**: `notes/gbpark/2026-04-10-template-model-redesign.md` (섹션 8~16, 19~20)
-**범위**: 스펙 섹션 19 "다음 액션" 중 **1~4번까지** (타입 재정의, CSS 변수, DashboardCard grid 전환, 빌더 grid-snap 전환)
-**남은 작업**: 5~8번 (팝업 grid 적용, 레거시 마이그레이션 다이얼로그, Template 전수 검증, Phase 3/4 문서 업데이트)
-
----
-
-## 0. 결과 요약
-
-| 항목 | 상태 |
-|---|---|
-| 작업 스코프 1~4번 | ✅ 완료 |
-| `npx tsc --noEmit` 작업 범위 에러 | 0건 |
-| Finding 1 (row 반응형) 코드 구조 확보 | ✅ (브라우저 시각 검증 남음) |
-| Finding 2 (공용 기하학 수식) 단위 검증 | ✅ `pixelDeltaToColDelta(200, 800, 8, 16) === 3` |
-| Finding 3 (레거시 변환 다이얼로그) | ⏸ 다음 턴 |
-| Finding 4 (drop/drag/resize 일관성) 코드 구조 확보 | ✅ (브라우저 시각 검증 남음) |
-| **원칙 3 임시 위반 잔존** | ⚠ `useBuilderState.ts:303-308` `fromTemplate` business fallback — 섹션 3.5 / 4.6 참조 |
-
----
-
-## 1. 수정/생성된 파일 목록
-
-### 타입
-- **수정** `frontend/types/invyone-component.ts`
-
-### 스타일
-- **수정** `frontend/styles/v5-layout.css`
-- **수정** `frontend/styles/dashboard.css`
-- **수정** `frontend/styles/developer.css`
-
-### DashboardCard (대시보드 카드 → grid 렌더)
-- **수정** `frontend/components/dash/DashboardCard.tsx`
-
-### Builder (빌더 grid-snap 전환)
-- **신규** `frontend/components/builder/hooks/gridMetrics.ts`
-- **수정** `frontend/components/builder/hooks/useBuilderState.ts`
-- **수정** `frontend/components/builder/hooks/useBlockDrag.ts`
-- **수정** `frontend/components/builder/BuilderCanvas.tsx`
-- **수정** `frontend/components/builder/BuilderBlock.tsx`
-- **수정** `frontend/components/builder/BuilderProps.tsx`
-- **수정** `frontend/components/builder/BuilderToolbar.tsx`
-- **수정** `frontend/components/builder/BuilderPalette.tsx`
-
----
-
-## 2. 스펙 작업 항목별 상세
-
-### 2.1 타입 재정의 — 섹션 8
-
-**파일**: `frontend/types/invyone-component.ts`
-
-#### 추가된 타입
-- `GridPosition { col, colSpan, row?, rowSpan?, responsive? }`
-- `AbsolutePosition { x, y, w, h }`
-- `ComponentPosition = GridPosition | AbsolutePosition`
-- `ResponsiveGridOverride { narrow?, normal?, wide? }` — 각 breakpoint는 `Partial<Omit<GridPosition, 'responsive'>>`
-- `TemplateKind = 'business' | 'canvas'`
-
-#### 삭제된 타입
-- 기존 `Position { x, y, w, h }` (주석은 "그리드 단위"였지만 실제는 픽셀)
-- 기존 `ResponsiveOverride { lg, md, sm }` (뷰포트 네이밍, 구현도 없었음)
-- `Component.responsive` 필드 (이제 `GridPosition.responsive` 안으로 이동)
-
-#### 추가된 타입 가드
-```ts
-export function isGridPosition(pos: ComponentPosition): pos is GridPosition {
-  return pos != null && typeof pos === 'object' && 'col' in pos && 'colSpan' in pos;
-}
-export function isAbsolutePosition(pos: ComponentPosition): pos is AbsolutePosition {
-  return pos != null && typeof pos === 'object' && 'x' in pos && 'y' in pos && 'w' in pos && 'h' in pos;
-}
-```
-
-#### `Component.position` → `ComponentPosition`
-- Template.kind에 따라 어느 쪽으로 해석되는지 주석으로 명시
-
-#### `Template.kind: TemplateKind` 필수 필드 추가
-- 레이아웃 모델 분기. `business`(기본) / `canvas`(예외)
-
-#### 신규 상수
-- `DEFAULT_COMPONENT_LAYOUTS: Record<ComponentType, GridPosition>` — 8종 팔레트 기본값 + responsive 디폴트. 수주관리 스펙(섹션 10.3)을 참고해 table: 8span wide / 12span narrow-normal, form: 4span wide / 12span narrow-normal 등
-- `CANVAS_KEYWORDS` — 레거시 canvas 휴리스틱 키워드 (섹션 13.3.1용, 마이그레이션 다이얼로그 구현 시 사용)
-
----
-
-### 2.2 CSS 변수 + grid 스타일 — 섹션 11.5, 12
-
-#### `frontend/styles/v5-layout.css`
-`:root`에 grid 네임스페이스 변수 세트 추가:
-```css
---grid-cols: 12;
---grid-gap: .5rem;
---grid-gap-narrow: .35rem;
---grid-gap-normal: .45rem;
---grid-gap-wide: .55rem;
---card-narrow-max: 520px;
---card-normal-max: 900px;
---grid-line: rgba(108,92,231,.08);
---grid-line-hover: rgba(108,92,231,.2);
---grid-drop-preview: rgba(108,92,231,.15);
---grid-drop-preview-border: rgba(108,92,231,.5);
-```
-`.dark`에도 대응하는 다크 테마 grid 토큰(보라 대신 라벤더 계열) 추가.
-v5 Cosmic 토큰(`--v5-*`)은 그대로 유지. grid 토큰은 독립 네임스페이스로만 추가.
-
-#### `frontend/styles/dashboard.css`
-`.dash-card-body`에 container query 활성화:
-```css
-.dash-card-body {
-  flex: 1; overflow: auto; padding: .5rem;
-  container-type: inline-size;
-  container-name: card;
-}
-```
-
-추가된 클래스:
-- `.dash-card-error`, `.dash-card-loading` — 에러/로딩 상태
-- `.dash-card-grid` — 12-col grid (business 렌더)
-- `.dash-card-grid > .tpl-component` — **`min-width: 0` 필수** (섹션 11.6, 12열 비율 유지의 핵심)
-- `.dash-card-canvas-wrapper` / `.dash-card-canvas` / `.dash-card-canvas > .tpl-component` — absolute 렌더 (canvas kind)
-
-`@container card` 쿼리 3단계:
-- `max-width: 520px` → narrow
-- `520.01px ~ 900px` → normal
-- `>900.01px` → wide
-
-★ 각 쿼리에서 `grid-column` + `grid-row` **둘 다** 오버라이드. Finding 1 대응 — row 오버라이드가 실제로 반응해야 narrow에서 form이 테이블 아래로 내려감.
-
-#### `frontend/styles/developer.css` — 빌더 그리드
-기존 `.dev-canvas-inner` (자유배치용, 1200×800 고정)는 유지하되, 새로 `.dev-canvas-grid` 추가:
-```css
-.dev-canvas-grid {
-  position: relative;
-  display: grid;
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-  gap: 8px;
-  padding: 16px;
-  min-height: 600px;
-  container-type: inline-size;
-  container-name: card;
-  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px);
-  background-size: calc((100% - 32px) / 12 + 8px) 100%;
-  background-position: 16px 0;
-  background-repeat: repeat-x;
-}
-.dev-canvas-grid.dragging { /* grid-line-hover */ }
-.dev-popup-grid { min-height: 320px; padding: 12px; }
-.dev-grid-warn { /* 비-grid 블록 잔존 시 경고 배너 */ }
-```
-
-`.dev-block` 블록은 `position: absolute` → `position: relative` (grid item)으로 전환. `min-width: 0`, `min-height: 48px`, `cursor: move` 추가.
-
-반응형 오버라이드 속성 패널 UI용 `.dev-resp-row`, `.dev-resp-label` 추가.
-
----
-
-### 2.3 DashboardCard grid 렌더 전환 — 섹션 11.2~11.7
-
-**파일**: `frontend/components/dash/DashboardCard.tsx`
-
-#### 삭제된 코드 (~40줄)
-- `canvasBounds` useMemo (캔버스 전체 박스 추정)
-- `bodyRef` / `scale` state
-- `ResizeObserver` + `transform: scale()` 계산 useEffect
-
-#### 추가된 상태
-- `templateKind: TemplateKind | null` — Template 로드 시 `tpl.kind` 복원
-
-#### 렌더 분기 (섹션 11.3, 11.7)
-```tsx
-{effectiveKind === 'canvas' ? (
-  <div className="dash-card-canvas-wrapper">
-    <div className="dash-card-canvas">
-      {sortedComponents.map(c => <AbsoluteComponent ... />)}
-    </div>
-  </div>
-) : (
-  <div className="dash-card-grid">
-    {sortedComponents.map(c => <GridComponent ... />)}
-  </div>
-)}
-```
-
-`effectiveKind`는 `templateKind`을 우선하되, kind 필드가 없는 레거시는 position 형태로 보수적 추정:
-- `GridPosition` → `business`
-- 그 외 (`{x,y,w,h}` 레거시) → `canvas`
-
-★ 이 추정은 **렌더 경로 선택만** 담당하고 **DB 쓰기 없음**. 섹션 13.2의 "자동 변환 금지" 원칙과 충돌하지 않음 (변환이 아니라 렌더 분기).
-
-#### `GridComponent` — business kind 전용
-섹션 11.4 Finding 1 반영. **12개 CSS 변수 전부 주입**:
-```tsx
-const r = pos.responsive ?? {};
-const style: React.CSSProperties = {
-  '--col': pos.col ?? 1,
-  '--col-span': pos.colSpan ?? 12,
-  '--row': toRowVal(pos.row),              // auto 문자열 허용
-  '--row-span': toSpanVal(pos.rowSpan),
-  '--col-narrow': r.narrow?.col ?? pos.col ?? 1,
-  '--col-span-narrow': r.narrow?.colSpan ?? pos.colSpan ?? 12,
-  '--row-narrow': toRowVal(r.narrow?.row ?? pos.row),
-  '--row-span-narrow': toSpanVal(r.narrow?.rowSpan ?? pos.rowSpan),
-  // ... normal/wide 동일
-};
-```
-`toRowVal(undefined) === 'auto'` — CSS grid auto placement 동작.
-
-#### `AbsoluteComponent` — canvas kind 전용
-`position.x/y/w/h` 그대로 `left/top/width/height`에 매핑.
-
-#### `renderByType()` — 타입별 렌더 공통화
-기존 `ComponentRenderer` switch 를 `renderByType(props)`로 분리. `wrapStyle` (absolute 박스)을 없애고 각 case에서 `width: 100%; height: 100%` 기준으로 렌더.
-
----
-
-### 2.4 빌더 grid-snap 전환 — 섹션 9, 14.5
-
-#### 2.4.1 `hooks/gridMetrics.ts` 신규
-
-**★ drop / drag / resize 모두 반드시 이 파일만 사용. `canvasW/12` 직접 계산 금지.**
-
-공용 함수:
-- `getGridMetrics(canvasWidth, gap, padding)` → `{ contentWidth, colWidth, step, padding, gap }`
-- `pixelToGridCol(pixelX, canvasWidth, gap, padding)` — 드롭 위치 계산용
-- `pixelToColSpan(pixelW, canvasWidth, gap, padding)`
-- `pixelDeltaToColDelta(pixelDelta, canvasWidth, gap, padding)` — drag/resize 증감용
-- `readCanvasGeometry(el)` → `{ canvasWidth, gap, padding }` — DOM에서 1회 읽기
-- `computeNextAvailableRow(newCol, newColSpan, blocks)` — 섹션 14.4 자동 밀기
-- `BUILDER_ROW_HEIGHT = 48` — row 이동 환산용
-
-#### 2.4.2 `useBuilderState.ts`
-
-새 상태 필드:
-- `templateKind: TemplateKind` (기본 `'business'`)
-- `previewWidth: 'narrow' | 'normal' | 'wide'` (기본 `'normal'`)
-
-새 액션:
-- `addBlock(type: ComponentType, position: GridPosition)` — 시그니처 교체
-- `setTemplateKind(kind)`
-- `setPreviewWidth(w)`
-
-삭제된 액션:
-- `moveBlock(id, x, y)`, `resizeBlock(id, w, h)` — grid에서는 `updateBlock` 에 position 객체 통째로 넘김
-
-삭제된 함수:
-- `defaultSize(type)` — 픽셀 크기 테이블. `DEFAULT_COMPONENT_LAYOUTS`가 대체
-
-`toTemplate()` — 반환 객체에 `kind: s.templateKind` 포함.
-
-`fromTemplate(tpl)` — **⚠ 원칙 3 임시 위반 상태** (line 303~308). `tpl.kind`이 `business`/`canvas`면 그대로 수용, 없으면 `business` 강제 디폴트. 스펙 섹션 13.4 "절대 금지 패턴"(`if (!tpl.kind) tpl.kind = 'business'`)과 형식만 다를 뿐 동일 동작.
-
-**주석-구현 불일치**: 주석(line 305)에는 "`isDirty=true`로 표시해 사용자가 확인 없이 저장하지 못하게 한다"고 적혔으나 실제 구현 line 325는 `isDirty: false`. 저장 차단 경로 자체가 없음.
-
-DB 저장은 여전히 사용자 "저장" 클릭 필요하지만, 레거시 Template에 새 블록 추가 후 저장 시 데이터 혼합 리스크 있음. 상세는 섹션 3.5, 해소 계획은 섹션 4.6 참조.
-
-#### 2.4.3 `BuilderCanvas.tsx` 재작성
-
-`handleDrop` — 공용 함수 경로:
-```tsx
-const canvasEl = e.currentTarget as HTMLElement;
-const { canvasWidth, gap, padding } = readCanvasGeometry(canvasEl);
-const rect = canvasEl.getBoundingClientRect();
-const relX = e.clientX - rect.left;
-const dropCol = pixelToGridCol(relX, canvasWidth, gap, padding);
-
-const defaultLayout = DEFAULT_COMPONENT_LAYOUTS[type];
-const col = Math.min(dropCol, 13 - defaultLayout.colSpan);
-const colSpan = Math.min(defaultLayout.colSpan, 13 - col);
-const row = computeNextAvailableRow(col, colSpan, blocks);
-
-addBlock(type, { col, colSpan, row, ...responsive });
-```
-
-분기:
-- `templateKind === 'canvas'` → placeholder (자유배치 빌더는 Phase 2 이후)
-- `templateKind === 'business'` + `currentView === 'list'` → `.dev-canvas-grid` 렌더
-- `templateKind === 'business'` + 팝업 뷰 → `.dev-canvas-grid.dev-popup-grid`를 `.dev-popup-frame` 안에 렌더
-
-`previewWidth`에 따라 `maxWidth` 적용 (`400 / 720 / 1100`px). `@container`가 실제로 반응.
-
-비-grid 블록이 잔존하면 `.dev-grid-warn` 배너로 경고.
-
-#### 2.4.4 `BuilderBlock.tsx`
-
-grid item 전환:
-```tsx
-const pos = block.position as GridPosition;
-<div
-  className={`dev-block${isSelected ? ' selected' : ''}`}
-  style={{
-    gridColumn: `${pos.col} / span ${pos.colSpan}`,
-    gridRow: pos.row != null ? `${pos.row} / span ${pos.rowSpan ?? 1}` : 'auto',
-  }}
-  ...
->
-```
-
-`isGridPosition` 아니면 `null` 반환 (canvas/legacy는 이번 단계에서 렌더 스킵).
-
-드래그 label에 `col N span M · row R` 표기 추가 — 사용자 피드백용.
-
-#### 2.4.5 `useBlockDrag.ts` 재작성
-
-`startDrag` / `startResize` 둘 다 세션 시작 시 1회 `readCanvasGeometry` 호출해서 `canvasWidth/gap/padding`을 캐시. `onMove`에서는 `pixelDeltaToColDelta(dx, ...)`만 호출.
-
-드래그:
-```ts
-const deltaCol = pixelDeltaToColDelta(dx, canvasWidth, gap, padding);
-const deltaRow = Math.round(dy / BUILDER_ROW_HEIGHT);
-const newCol = Math.max(1, Math.min(13 - cur.colSpan, origCol + deltaCol));
-const newRow = Math.max(1, origRow + deltaRow);
-updateBlock(id, { position: { ...cur, col: newCol, row: newRow } });
-```
-
-리사이즈:
-```ts
-const deltaCols = pixelDeltaToColDelta(dx, canvasWidth, gap, padding);
-const newSpan = Math.max(1, Math.min(13 - cur.col, origSpan + deltaCols));
-updateBlock(id, { position: { ...cur, colSpan: newSpan } });
-```
-
-★ 둘 다 `zustand.getState()`로 최신 block을 꺼내기 때문에 onMove 중 불필요한 재등록 없음.
-
-#### 2.4.6 `BuilderProps.tsx`
-
-위치 편집 UI를 `X/Y/W/H` → `col/colSpan/row/rowSpan`로 교체.
-
-반응형 오버라이드 섹션 신규 — narrow/normal/wide 각 breakpoint마다 `col/span/row/rowSpan` 4칸. 빈 값은 `undefined`(= 기본값 fallback).
-
-`isGridPosition` 아니면 "grid 위치가 아닙니다" 안내.
-
-#### 2.4.7 `BuilderToolbar.tsx`
-
-새 툴바 그룹 2개:
-1. **모델** — `business` / `canvas` 토글 → `setTemplateKind`
-2. **미리보기** — `narrow 400` / `보통 720` / `넓음 1100` 토글 → `setPreviewWidth`. `templateKind === 'business'`일 때만 표시
-
-`handleSave` 페이로드에 `kind: tpl.kind` 포함.
-
-#### 2.4.8 `BuilderPalette.tsx`
-
-클릭으로 추가 시에도 `DEFAULT_COMPONENT_LAYOUTS` + `computeNextAvailableRow` 사용. 기존 `{x:16, y:16, w:0, h:0}` 제거.
-
----
-
-## 3. 검증 결과
-
-### 3.1 타입체크
-```
-$ npx tsc --noEmit | grep -E "invyone-component|components/builder|components/dash/DashboardCard|components/dash/CardSettings"
-(0 matches)
-```
-내 작업 범위에서 에러 **0건**.
-
-전체 프로젝트 타입체크는 VEX 레거시(screen-management, v2-*, dataflow, admin dashboard widgets 등)에서 기존부터 누적된 ~2800건 에러가 있으나 이번 작업과 무관.
-
-### 3.2 Finding 2 단위 검증
-```js
-// getGridMetrics(800, 8, 16)
-// content = 800 - 32 = 768
-// totalGap = 88
-// colWidth = (768 - 88) / 12 = 56.666...
-// step = 64.666...
-// 200 / step = 3.093
-// round → 3
-
-pixelDeltaToColDelta(200, 800, 8, 16) === 3  ✅
-```
-
-### 3.3 Finding 1 구조 확보
-- `GridComponent`에서 `--row*`, `--row-span*` 8개 변수 주입 확인
-- `@container card` 3개 쿼리 모두 `grid-row: var(--row-*) / span var(--row-span-*)` 라인 포함
-- 브라우저 시각 검증은 사용자 몫 (수주관리 예시를 400px/1000px 카드에서 렌더했을 때 form 위치)
-
-### 3.4 Finding 4 구조 확보
-- `handleDrop`, `startDrag`, `startResize` 전부 `readCanvasGeometry` → `pixelToGridCol` / `pixelDeltaToColDelta` 경로
-- `canvasW / 12` 직접 계산 grep 결과: 0건
-
-### 3.5 Finding 3 — ⚠ 원칙 위반 잔존 (완료 아님)
-
-스펙 섹션 13.4 "절대 금지 패턴"이 코드에 남아 있는 상태. 다음 턴 6번으로 해소 이월.
-
-#### 위반 위치
-
-**파일**: `frontend/components/builder/hooks/useBuilderState.ts`
-**함수**: `fromTemplate(tpl)` (line 303~327)
-**핵심 라인**: 307~308
-
-```ts
-const kind: TemplateKind =
-  tpl.kind === "business" || tpl.kind === "canvas" ? tpl.kind : "business";
-```
-
-스펙 섹션 13.4 "절대 금지 패턴"의 `if (!tpl.kind) tpl.kind = 'business';` 와 형식만 삼항으로 바꾼 동일 동작.
-
-#### 주석-구현 불일치
-
-line 303~306 주석:
-```
-// kind 는 호출자(빌더 진입점)가 다이얼로그로 확정한 뒤 넘겨야 함.
-// 여기서는 tpl.kind 를 그대로 받고, 없으면 기본 business 로 두되 isDirty=true
-// 로 표시해 사용자가 확인 없이 저장하지 못하게 한다.
-```
-
-그러나 실제 line 325는 `isDirty: false`. **저장 차단 의도를 구현에 반영하지 못함.** 주석과 구현 중 어느 쪽이 정답인지 불분명 — 다음 턴에서 다이얼로그 도입으로 이 문제 자체를 없애는 것이 맞음.
-
-#### 현 시점 완화 요소 (사고 확률을 낮추는 요인)
-
-1. **DB 자동 저장 경로 없음** — 사용자가 "저장" 버튼을 명시적으로 클릭해야만 반영
-2. **빌더에서 레거시 블록 렌더 안 됨** — `BuilderBlock`이 `isGridPosition` 가드로 레거시 `{x,y,w,h}` 블록을 `null` 반환. 사용자 화면에 안 보이는 상태에서는 "저장" 누를 동기가 적음
-3. **대시보드는 `effectiveKind` 추정** — position 형태로 business/canvas 분기. 레거시는 canvas fallback → absolute 렌더, 데이터 손상은 없음
-
-#### 실제 리스크 시나리오
-
-1. 사용자가 기존 `{x,y,w,h}` 기반 레거시 Template을 빌더에서 열기 → `fromTemplate`가 `kind: 'business'` 강제 부여, `isDirty: false`
-2. 사용자가 "화면이 비었네" 하고 새 컴포넌트를 palette에서 drop → `blocks.list`에 grid 블록이 추가되면서 기존 레거시 `{x,y,w,h}` 블록들과 혼재
-3. 사용자가 "저장" 클릭 → `toTemplate`가 `kind: 'business'` + 혼합 blocks 배열을 DB에 기록
-4. **결과**: 원본 레거시 데이터가 business kind로 덮여쓰임, grid + absolute 포맷 혼합 상태. `migration.backup` 미적용이라 롤백 어려움
-
-#### 다음 턴 해소 방법 (섹션 4.6 ★0순위)
-
-1. `fromTemplate` 시그니처에 `kind: TemplateKind`를 **필수 파라미터**로 추가 — 호출자가 다이얼로그로 결정한 값만 넘김
-2. 빌더 진입점(`BuilderLayout` 또는 `TemplateLibraryModal`)에 `openTemplate(templateId)` 도입 — 내부에서 `isLikelyCanvasTemplate` 휴리스틱 + 블로킹 다이얼로그
-3. 사용자가 `business` 선택 시에만 `migrateTemplateAbsoluteToGrid(tpl)` + `migration.backup` 적용 후 `fromTemplate(migrated, 'business')` 호출
-4. 사용자가 `canvas` 선택 시 `fromTemplate({...tpl, kind: 'canvas'}, 'canvas')` 호출 — 위치 유지
-5. `fromTemplate` 내부의 `'business'` 강제 디폴트 삭제
-
-#### 임시 부분 수정 하지 않는 이유
-
-"`isDirty: true`만 고치면 되지 않냐" — **권장하지 않음**:
-- `isDirty` 플래그만으로는 저장 차단 확실하지 않음 (다른 경로로 isDirty 초기화될 수 있음)
-- `fromTemplate` 호출 경로는 빌더 진입 외에도 import/template library 등 여러 곳 → 부분 수정은 회귀 위험
-- 다음 턴에서 정공법으로 한 번에 처리하는 것이 안전. 이번 턴 완료 보고는 **이 섹션으로 상태 명시**만 수행
-
----
-
-## 4. 다음 턴에 해야 할 것 (스펙 5~8번)
-
-### 5. 등록/수정 팝업 grid 적용 — 섹션 15
-- `ViewConfig.size` 활용
-- 팝업도 `.dev-canvas-grid` 사용, `container-name: popup` 분기는 필요 시
-- 현재 `BuilderCanvas`에서 `dev-popup-grid`로 1차 적용 해둠 — 스펙 대로 정비 필요
-- `FormConfig.columns` 는 폼 내부 필드 배치용으로 유지 (2단계 구조)
-
-### 6. Template 마이그레이션 + 승인 다이얼로그 — 섹션 13 ★★ 최우선 (0순위)
-
-**★★★ 가장 먼저 해야 할 것 — `fromTemplate` 임시 위반 제거** (상세: 섹션 3.5):
-`useBuilderState.ts:307-308`의 `tpl.kind ?? 'business'` 폴백 삭제. `fromTemplate` 시그니처에 `kind: TemplateKind`를 **필수 파라미터**로 추가. 주석의 `isDirty=true` 의도도 함께 정리 (다이얼로그가 생기면 이 주석 자체가 불필요해짐).
-
-이어지는 구현 순서:
-
-1. `isLikelyCanvasTemplate(oldTpl)` 휴리스틱 (키워드 / y 분포 / controlFlow 필드 — 스펙 섹션 13.3.1)
-2. `migrateTemplateAbsoluteToGrid(oldTpl)` — `migration.backup` 원본 보존 (스펙 섹션 13.3.2)
-3. `openTemplate(templateId)` 블로킹 다이얼로그 (스펙 섹션 13.5)
-4. 빌더 진입점(`BuilderLayout` / `TemplateLibraryModal`)에서 `openTemplate` → 다이얼로그 → 확정된 `kind`로 `fromTemplate(tpl, kind)` 호출 체인 구성
-5. **절대 금지 패턴 재확인**: `if (!tpl.kind) tpl.kind = 'business'` 코드 어디에도 두지 말 것
-
-**순서 제안**: 5번(팝업) 전에 **6번부터 먼저 처리** — 원칙 위반 잔존 시간을 최소화. 5번 작업 중 사용자가 레거시 Template을 건드려 데이터가 망가지면 뒤늦게 후회.
-
-### 7. 기존 Template 전수 검증
-- DB에 있는 Template 목록을 빌더에서 하나씩 열어서 다이얼로그 동작 확인
-- canvas 디폴트 선택이 맞는지, 취소 시 DB 무변경, business 선택 시만 변환되고 `migration.backup` 저장되는지
-
-### 8. Phase 3/4 문서 업데이트 — 섹션 16
-- `notes/gbpark/2026-04-10-phase3-developer-builder.md` — 섹션 16.1 표대로 grid 기준으로 갱신
-- `notes/gbpark/2026-04-10-phase4-dashboard-menu.md` — 섹션 16.2 표대로 `@container` 기준으로 갱신 + 2레이어 명확화 블록 추가
-
-### 추가로 남은 사소한 것 (우선순위 낮음)
-- 빌더 `.dev-canvas-grid.dragging` 클래스 on/off 시각 피드백
-- `DropPreview` 컴포넌트 (섹션 14.2) — 드래그 중 가장 가까운 셀 프리뷰
-- Canvas kind 빌더 실제 UX (현재는 placeholder)
-
----
-
-## 5. 브라우저 실측 체크리스트 (사용자 몫)
-
-### Finding 1 — 반응형 row 오버라이드
-1. 빌더에서 `kind: business` 로 새 Template 만들기
-2. 수주관리 패턴 배치:
-   - search: col 1 span 12 row 1
-   - table: col 1 span 8 row 2 / narrow,normal span 12
-   - form: col 9 span 4 row 2 / narrow,normal col 1 span 12 row 3
-3. 저장 후 대시보드 카드에 꽂고 카드 크기 리사이즈
-4. 400px 폭에서 form이 테이블 **아래** row 3 위치에 오는지 확인
-5. 1000px 폭에서 form이 오른쪽 col 9~12에 오는지 확인
-6. 겹치면 Finding 1 버그 재발 → 즉시 보고
-
-### Finding 4 — drop/drag/resize 스냅 일치
-1. 빌더에서 캔버스 배경 그리드 라인이 12줄로 보이는지
-2. 팔레트 table 아이템을 정확히 같은 위치에 세 번 drop → 매번 같은 col/colSpan 인지 label 확인
-3. 한 블록을 drag로 몇 칸 이동 → col 값이 gap을 고려한 정확한 값인지
-4. 한 블록을 resize로 확장 → colSpan이 drop/drag와 같은 기준으로 증감하는지
-
-### 기타
-- **기존 DB Template 열기**: 현재 `{x,y,w,h}` 기반이므로 빌더에서 열면 `fromTemplate`의 default `business`로 들어감 → grid가 아니어서 BuilderBlock이 null 반환 → 화면이 비어 보일 수 있음. **레거시 변환 다이얼로그는 다음 턴**에서 구현. 당장 테스트는 **새 Template**으로 진행 권장.
-- 대시보드 카드에서 kind 없는 레거시 Template 을 꽂으면 `effectiveKind === 'canvas'`로 fallback → absolute 그대로 렌더 (기존 동작과 다름 없음, scale은 빠졌으니 카드 밖으로 넘칠 수 있음 → narrow 카드에서는 스크롤)
-
----
-
-## 6. 참조
-
-### 원본 스펙
-- `notes/gbpark/2026-04-10-template-model-redesign.md` — 섹션 0~20 전체
-
-### 관련 메모리
-- `memory/project_template_builder.md` — 2026-04-10 재설계 반영
-- `memory/feedback_responsive_container_based.md` — @container 원칙
-- `memory/project_component_spec.md` — FieldConfig 규격
-
-### 주요 코드 위치
-- 타입 정의: `frontend/types/invyone-component.ts`
-- Grid 공용 수식: `frontend/components/builder/hooks/gridMetrics.ts`
-- 카드 렌더: `frontend/components/dash/DashboardCard.tsx`
-- 빌더 캔버스: `frontend/components/builder/BuilderCanvas.tsx`
-- 빌더 상태: `frontend/components/builder/hooks/useBuilderState.ts`
-- 빌더 드래그: `frontend/components/builder/hooks/useBlockDrag.ts`
-- 빌더 속성 패널: `frontend/components/builder/BuilderProps.tsx`
-- 빌더 툴바: `frontend/components/builder/BuilderToolbar.tsx`
-
-### v5 디자인 토큰
-- `frontend/styles/v5-layout.css` — v5 Cosmic 토큰 + grid 네임스페이스 변수
-- `frontend/styles/dashboard.css` — `.dash-card-grid`, `@container` 쿼리
-- `frontend/styles/developer.css` — `.dev-canvas-grid`, 빌더 block/props 스타일
diff --git a/notes/gbpark/2026-04-11-card-engine-phase2.1-log.md b/notes/gbpark/2026-04-11-card-engine-phase2.1-log.md
deleted file mode 100644
index 7aa6b8b4..00000000
--- a/notes/gbpark/2026-04-11-card-engine-phase2.1-log.md
+++ /dev/null
@@ -1,273 +0,0 @@
-# INVYONE 카드 엔진 Phase 2.1 — 구현 로그
-
-**작업일**: 2026-04-11
-**작업자**: gbpark + Claude
-**이전 로그**: `notes/gbpark/2026-04-10-card-engine-phase1-log.md`
-**기반 스펙**: `notes/gbpark/2026-04-10-card-engine-final-spec.md`
-
----
-
-## 0. 요약
-
-Phase 2.1 = "수주관리 엔드투엔드 MVP". 네 가지 레이어(컴포넌트 → 화면 디자이너 → 템플릿 → 대시보드)가 전부 엔드투엔드로 기본 작동하는 상태를 목표.
-
-| Step | 제목 | 상태 |
-|---|---|---|
-| A | 레거시 타입 제거 (GridPosition 등) | ✅ |
-| B | 경량 7개 v2-* @container 모드 분기 | ✅ |
-| C | TemplateBuilder 실렌더링 + 백엔드 API + FieldConfig 편집 UI | ✅ |
-| D | DashboardCard 재작성 + 기존 dash 인프라 유지 | ✅ |
-| E | 수주관리 PoC (사용자 수동 검증) | ⏳ 사용자 검증 대기 |
-
-**tsc 결과**: 작업 범위 기준 에러 0. 전체 에러 카운트 3381 (Phase 1 완료 시점과 동일, 증가 없음).
-
----
-
-## 1. 방향 변경 (Step D) — 초기 지시와 다른 결정
-
-초기 Phase 2.1 지시문은 "frontend/store/dashboardStore.ts 신규 + localStorage 재작성" 이었으나,
-D-0 파악 결과 **이미 작동하는 백엔드 API 기반 대시보드 시스템**이 존재해 방향 변경:
-
-- ❌ **폐기**: localStorage 재작성, `store/dashboardStore.ts` 신규
-- ✅ **유지**: `stores/dashboardStore`, 백엔드 API (`lib/api/dashMenu.ts`), `DashboardSidebar`, `DashboardCanvas`, `TemplateLibraryModal`, `CardSettingsPanel`, `ControlMode` 전부 보존
-- ✅ **재작성**: `DashboardCard.tsx` 하나만 — 레거시 타입 제거 + FreePosition + Template 기반 CRUD
-
-이유: 기존 시스템은 이미 서버 DB 영속화, 제어 모드(Phase 3 예정 기능의 일부), 카드 설정 패널을 구현해 놓은 상태. 이를 폐기하면 수 주의 손실.
-
-### Phase 3 기능 처리 3단 전략 — 실제 사용 결과
-사용자가 준 전략은 (1) 필드명 수준 교체 → (2) 함수 단위 간소화 → (3) any 캐스팅. **실제로는 1단계조차 불필요했음**: `ControlMode/CardSettingsPanel/FlowViewer/RuleBuilder` 전부 `FieldConfig` 만 import 하고 카드의 `position.col/row` 같은 grid 필드에 접근하지 않음. DashboardCard 재작성만으로 Phase 3 기능은 아무 영향 없이 동작.
-
----
-
-## 2. 수정·생성 파일
-
-### 타입
-- **수정** `frontend/types/invyone-component.ts`
-  - 삭제: `GridPosition`, `AbsolutePosition`, `ComponentPosition`, `ResponsiveGridOverride`, `isGridPosition()`, `isAbsolutePosition()`, `TemplateKind`, `DEFAULT_COMPONENT_LAYOUTS`, `CANVAS_KEYWORDS`
-  - `Template.kind` 필드 제거
-  - `Template.views` 타입을 `TemplateViews` 로 교체 (자유배치 단일 모델)
-  - `Template.icon`, `Template.badge`, `Template.defaultSize`, `Template.inputs`, `Template.outputs` 추가 (Phase 1 log 에서 any 캐스팅으로 우회하던 것들)
-  - `Component.position` 필드를 `FreePosition?` 으로 정리 (Component 인터페이스 자체는 참조 0 이라 정리 수준)
-
-### 대시보드 카드
-- **재작성** `frontend/components/dash/DashboardCard.tsx` (646줄 → 386줄)
-  - 레거시 타입 의존 완전 제거
-  - `FcSearch + FcTable + FcPagination` 기본 CRUD UI
-  - 모달 기반 `FormOverlay` (등록/수정) + `FcForm`
-  - `fcInsert / fcUpdate / fcDelete` 와 백엔드 연결
-  - `containerType: inline-size + containerName: card` 부착 (내부 v2-* 가 폭 감지)
-  - Template 에 `views.list.components` 가 있으면 "Phase 2.2 에서 커스텀 배치 활성화" 안내 (현 Phase 범위 아님)
-
-- **수정** `frontend/styles/dashboard.css`
-  - `.dash-card-crud-actions`, `.dash-crud-btn(.primary/.danger)`, `.dash-crud-note` 추가
-  - `.dash-form-overlay / .dash-form-modal / .dash-form-head / .dash-form-body` 추가 (등록/수정 모달)
-  - 카드 @container 400px 이하에서 버튼 텍스트 숨김 (아이콘만)
-
-### 경량 컴포넌트 반응형 (Step B)
-- **신규** `frontend/lib/registry/hoc/withContainerQuery.css`
-  - `@container v2-button-primary (max-width: 120px)` → 버튼 텍스트 숨김
-  - `@container v2-input (max-width: 400px)` → 라벨 위로 (flex column)
-  - `@container v2-select (max-width: 400px)` → 동일
-  - `@container v2-date (max-width: 400px)` → range 세로 스택
-  - `@container v2-text-display (max-width: 300px)` → font-size 축소
-  - `@container v2-card-display (max-width: 480px)` → gridTemplateColumns 1fr 강제
-  - `@container v2-aggregation-widget (max-width: 480px)` → 2열 그리드
-- **수정** `frontend/lib/registry/hoc/withContainerQuery.tsx`
-  - `import "./withContainerQuery.css"` 추가 (HOC 사용 시 자동 적용)
-
-### TemplateBuilder (Step C)
-- **신규** `frontend/components/template-builder/LucideIcon.tsx`
-  - lucide-react 의 모든 아이콘을 이름 기반 동적 렌더링. 캐시로 반복 조회 최적화.
-- **신규** `frontend/components/template-builder/DesignPreview.tsx`
-  - 각 v2-* 컴포넌트의 디자인 모드 미리보기 (버튼, 입력, 테이블, 검색 등)
-  - Phase 2.2 에서 실제 런타임 컴포넌트로 교체 예정
-- **신규** `frontend/components/template-builder/FieldConfigPanel.tsx`
-  - 우측 "테이블" 탭: primaryTable 드롭다운 + FieldConfig 편집 UI
-  - `/api/meta/tables`, `/api/meta/tables/:name/fields` 호출
-  - 필드별 label / type / visible / required / searchable 토글
-- **신규** `frontend/components/template-builder/template-builder.css`
-  - DesignPreview 전용 스타일 (tpl-preview-*)
-- **수정** `frontend/components/template-builder/TemplateBuilder.tsx`
-  - `useRegistryPalette`: lucide 이름 보존 (short 문자열만 이모지, 긴 문자열은 lucide 렌더 대상)
-  - `PaletteIcon` 헬퍼로 팔레트 아이템의 아이콘 실렌더
-  - `CanvasBlock`: placeholder 텍스트 → `DesignPreview` 로 교체
-  - `SidePanel`: "테이블" 탭 추가 (`FieldConfigPanel` 호스트)
-  - `handleSave`: localStorage → 백엔드 API (`insertTemplate` / `updateTemplate`) 전환
-  - `handlePublish` + "게시" 버튼 (`publishTemplate`)
-  - `templateStatus` 배지 ("초안" / "게시됨")
-  - `serverTemplateId` state 로 insert/update 분기를 깔끔하게 (localStorage 복원 혼란 제거)
-  - `import "./template-builder.css"`
-
-- **수정** `frontend/components/template-builder/store/templateBuilderStore.ts`
-  - `toTemplate`: `kind: "business"` 제거, `views as unknown as` 캐스팅 제거, `icon/badge/defaultSize` 전달
-  - `fromTemplate`: `tpl.icon / tpl.badge / tpl.defaultSize` 를 `(tpl as any)` 캐스팅 없이 접근
-
-- **수정** `frontend/app/(main)/admin/builder/page.tsx`
-  - `useSearchParams` 로 `?id=<templateId>` 쿼리 파싱 → TemplateBuilder 에 templateId prop 전달
-  - `Suspense` 감싸기 (Next 15 요구)
-
----
-
-## 3. 주요 결정 사항 (사용자 협의)
-
-### 결정 1 — Step D 방향 (기존 인프라 유지)
-**옵션**: (a) localStorage 재작성 (지시문 그대로) / (b) 기존 백엔드 API 유지 + DashboardCard만 재작성 / (c) 하이브리드
-**결정**: **(b) 기존 유지 + 최소 수정**
-**이유**: 이미 작동하는 서버 기반 대시보드 시스템 보존 우선. localStorage 로 다운그레이드는 퇴보.
-
-### 결정 2 — Step E PoC 렌더 방식
-**옵션**: (a) TemplateRenderer + ComponentRegistry 로 v2-* 실 렌더 / (b) DefaultCardContent 유지 (FcTable/FcSearch/FcForm)
-**결정**: **(b) FcTable/FcSearch/FcForm 기본 CRUD**
-**이유**: v2-* 컴포넌트는 VEX ScreenDesigner 전제의 props 시그니처(`component: ComponentData`, `isDesignMode`, `form_data` 등)를 가져 INVYONE 대시보드 카드에 그대로 끼우려면 어댑터 필요. Phase 2.1 "기본이 돈다" MVP 범위 밖.
-**결과**: Template.views.list.components 에 배치가 있으면 "Phase 2.2 에서 활성화" 안내만 표시하고, 실질 렌더는 FcTable 기반.
-
-### 결정 3 — lucide 아이콘 렌더링
-**옵션**: (a) `import * as LucideIcons` 정적 import / (b) `dynamic-icon-imports` 동적 로드 / (c) 문자열/이모지 폴백만
-**결정**: **(a) 정적 import + 캐시**
-**이유**: tree-shaking 손실은 있지만 Phase 2.1 MVP 에서는 수용 가능. API 단순.
-
-### 결정 4 — 경량 7개 모드 분기 방식
-**옵션**: (a) 각 컴포넌트 파일마다 별도 CSS / (b) 공통 withContainerQuery.css 한 파일 / (c) HOC 확장 (JS ResizeObserver + data-mode)
-**결정**: **(b) 공통 CSS 한 파일**
-**이유**: 유지 간단. 컨테이너 이름으로 구분해 충돌 없음. 내부 DOM 에 영향 최소 (wrapper level 만). 완벽 구현은 Phase 2.2 에서 각 컴포넌트 개별 재작성 시.
-
----
-
-## 4. 사용자 수동 검증 체크리스트 (Phase 2.1 종료 조건)
-
-**Step E "수주관리 PoC" 는 사용자 수동 검증 영역**. 아래 순서로 진행.
-
-### (A) 빌드 + 기본 sanity
-1. `cd frontend && docker compose -f ../docker/dev/docker-compose.invyone.yml restart frontend backend-spring` (또는 로컬 `npm run dev`)
-2. 브라우저에서 접속
-3. 확인:
-   - [ ] `/test-card-responsive` 가 여전히 작동 (Phase 1 보장)
-   - [ ] 콘솔에 critical 에러 없음
-   - [ ] 다크 모드 UI 정상
-
-### (B) `/admin/builder` TemplateBuilder 검증
-1. `/admin/builder` 접속 → TemplateBuilder UI 표시
-2. 좌측 팔레트 확인:
-   - [ ] 컴포넌트 아이콘이 lucide 로 실제 렌더됨 (◼ 폴백 아님)
-3. 우측 "테이블" 탭 클릭:
-   - [ ] 기본 테이블 드롭다운에 테이블 목록 표시
-   - [ ] 테이블 선택 → 필드 목록 자동 로드
-   - [ ] 각 필드 label 편집, type 변경, 표시/필수/검색 토글 가능
-4. 캔버스 작업:
-   - [ ] 팔레트에서 컴포넌트 드래그 → 캔버스 드롭 → **placeholder 아닌 DesignPreview** 렌더
-   - [ ] v2-button-primary 는 파란 버튼 실 형태, v2-text-display 는 텍스트, v2-input 은 input 박스, v2-aggregation-widget 은 KPI, v2-table-list 는 3열 테이블 미리보기 등
-   - [ ] 블록 이동/리사이즈 동작
-5. 저장/게시:
-   - [ ] 상단 "템플릿 이름" 입력 → "저장" 클릭 → "템플릿이 등록되었습니다" 토스트
-   - [ ] 저장 후 상단 배지가 "초안" 상태
-   - [ ] "게시" 버튼 클릭 → "템플릿이 게시되었습니다" 토스트, 배지 "게시됨" 전환
-
-### (C) 수주관리 Template 작성 (PoC 핵심)
-1. `/admin/builder` 신규 세션 (URL 에 ?id 없음)
-2. 상단 툴바에서 템플릿 이름 "수주관리" 입력, 카테고리 "sales" 입력
-3. 우측 "테이블" 탭 → DB 에서 수주 관련 테이블 선택 (예: ORDER_MASTER 또는 존재하는 수주 테이블)
-4. FieldConfig 가 자동 로드되면, 필요한 필드만 visible=true, 검색 대상 searchable=true 로 토글
-5. 우측 "메타" 탭 → 아이콘 📋, 배지 "ERP · 영업"
-6. 캔버스에는 컴포넌트 배치 없음 (Phase 2.1 MVP 는 기본 CRUD, 자유배치는 Phase 2.2)
-7. "저장" → "게시"
-8. URL 이 `/admin/builder?id=tpl_xxx` 로 바뀌지 않아도 store.templateId 와 serverTemplateId 에 내부 저장됨 (URL 동기화는 Phase 2.2)
-
-### (D) 수주관리 대시보드 배치 + CRUD
-1. `/dashboard` (또는 사이드바에서 기존 대시보드 진입)
-2. "+ 새 대시보드" → "영업 대시보드" 생성
-3. 빈 캔버스에서 "+ 템플릿 추가" → 라이브러리 모달
-4. 확인:
-   - [ ] 모달에 "수주관리" 템플릿 표시 (published 만 노출)
-   - [ ] 카테고리 필터 "영업/CRM" 에도 표시
-5. 클릭 → 대시보드에 카드 배치됨
-6. 카드 헤더:
-   - [ ] 아이콘 + "수주관리" 이름 + "sales" 배지
-   - [ ] 새로고침 / 설정 / 접기 / 삭제 버튼 (editMode 일 때)
-7. 카드 본문:
-   - [ ] FcSearch 검색 필터
-   - [ ] [등록] [수정] [삭제] CRUD 액션 버튼 바
-   - [ ] FcTable 수주 목록 (fcList 호출)
-   - [ ] FcPagination
-8. CRUD 작동:
-   - [ ] "등록" 클릭 → FormOverlay 모달 → FcForm 입력 → 저장 → "등록되었습니다"
-   - [ ] 테이블 행 선택 → "수정" 클릭 → FormOverlay (기존 값 로드) → 수정 → 저장
-   - [ ] 행 선택 → "삭제" → confirm → 삭제 → 목록 새로고침
-9. 반응형 전환:
-   - [ ] 카드 우하단 핸들로 드래그 → 카드 폭 400px 이하 → CRUD 버튼 바의 텍스트 숨김 (아이콘만)
-   - [ ] FcSearch 의 입력 배치는 FcSearch 자체의 @container 쿼리에 의존 (Phase 2 이후 개별 확장)
-10. 새로고침 후:
-   - [ ] 대시보드 카드 위치/크기 유지 (백엔드 저장)
-
-### (E) ControlMode / CardSettingsPanel sanity
-1. 대시보드에서 "편집 모드" 진입 후 제어 모드 버튼 클릭
-   - [ ] 제어 모드 진입 (기존 Phase 3 기능)
-   - [ ] 카드의 레거시 타입 제거 때문에 깨진 건 없음
-2. 카드의 "설정" 버튼 클릭
-   - [ ] CardSettingsPanel 열림 (컬럼 표시/숨김 토글)
-
-### 실패 시 디버깅
-- 백엔드 응답 실패 → network 탭 확인, `docker compose logs backend-spring` 로 스택
-- fcDelete 가 실패 → pk 컬럼이 정확히 FieldConfig.pk = true 인지, 백엔드 /api/data/:table/delete 가 { [pk]: value } 포맷을 받는지 확인 필요
-- Template 게시 후 라이브러리 모달에 안 보임 → `getTemplateList({ status: 'published' })` 결과 확인
-
----
-
-## 5. Phase 2.2 이월 항목
-
-### 필수
-- [ ] **TemplateRenderer 실 구현**: Template.views.list.components 를 FreePosition + ComponentRegistry 기반으로 자유배치 렌더. v2-* 컴포넌트의 VEX 포맷 props 어댑터 필요
-- [ ] **v2-* 런타임 컴포넌트 props 표준화**: INVYONE DashboardCard 에서도 design 모드와 runtime 모드 양쪽 렌더 가능하도록
-- [ ] **경량 7개 컴포넌트 내부 DOM 기반 반응형 개선**: 현재 CSS 한 파일의 wrapper level 분기는 정확도 한계. 각 컴포넌트 개별 재작성 시 wide/narrow 모드 내부 로직 추가
-- [ ] **TemplateBuilder URL 동기화**: insertTemplate 성공 후 `/admin/builder?id=tpl_xxx` 로 URL 갱신 (`router.replace`)
-
-### 우선순위 2
-- [ ] 우선순위 2 v2-* 마이그레이션: BOM, 출하, 피벗, 타임라인, 프로세스/작업 표준, 결재 단계
-- [ ] 우선순위 3 v2-* 마이그레이션: 랙 구조, 번호 규칙, 카테고리 관리자, 구분선, 파일, 미디어
-
-### 선택
-- [ ] FieldConfigPanel 개선: options/ref/format/computed/sortable 등 나머지 FieldConfig 속성 편집
-- [ ] TemplateBuilder 팔레트 카테고리 필터 & 검색 개선
-- [ ] 자동 뷰 생성: 등록 버튼 추가 시 create 뷰 placeholder 자동 생성 (store 는 이미 감지 로직 있음)
-- [ ] Template 버전 관리 UI
-
----
-
-## 6. 알려진 한계
-
-1. **DashboardCard 는 아직 Template.views.list.components 를 실제로 렌더하지 않음** — 배치된 v2-* 컴포넌트는 무시되고 기본 CRUD(FcTable 등) 로 대체. Phase 2.2 에서 TemplateRenderer 구현 시 해소.
-2. **TemplateBuilder 캔버스의 DesignPreview 는 정적 미리보기** — 실제 데이터가 흐르지 않고 wire-frame 수준. 마찬가지로 Phase 2.2.
-3. **경량 7개 @container 쿼리는 wrapper level 만** — 내부 DOM 에 깊이 관여하지 않아 일부 컴포넌트는 narrow 모드가 시각적으로 거의 변화 없음. Phase 2.2 개별 재작성 시 보강.
-4. **Template.icon / badge / defaultSize** 는 백엔드 TEMPLATES 테이블의 컬럼이 아니라 views 또는 meta 안에 잠재적으로 섞일 수 있음. 현재는 Template 인터페이스에만 있고 저장 시 누락될 수 있음 — Phase 2.2 에서 테이블 스키마 확장 또는 views 안 embed 결정.
-5. **BlockProperties 의 config JSON 편집기는 텍스트 기반** — v2-* 컴포넌트별 config 패널 통합은 Phase 2.2.
-6. **templateId URL 동기화 부재** — 새 템플릿 저장 후에도 URL 은 `/admin/builder` 그대로. 브라우저 새로고침 시 신규 세션으로 초기화됨. Phase 2.2 에서 `router.replace` 로 동기화.
-
----
-
-## 7. 작업 범위 / 비작업 범위
-
-### 작업함
-- Step A: 레거시 타입 완전 제거 + DashboardCard 재작성
-- Step B: 경량 7개 반응형 CSS 추가
-- Step C: TemplateBuilder 실렌더링 (DesignPreview) + 백엔드 API + FieldConfig 편집 UI + 게시
-- Step D: 기존 인프라 유지 + DashboardCard 재작성 (=Step A 일부)
-
-### 작업 안 함 (Phase 2.2 이후)
-- TemplateRenderer 실 렌더링 (ComponentRegistry 어댑터)
-- v2-* 컴포넌트 props 표준화
-- 경량 7개 컴포넌트 내부 재작성 (모드 분기 정밀)
-- 우선순위 2/3 v2-* 마이그레이션
-- 대시보드 시스템 재작성 (localStorage → 이미 백엔드 기반이라 불필요)
-- AppLayout 전역 사이드바에 대시보드 목록 중복 (결정 2, 중복 방지)
-
----
-
-## 끝
-
-Phase 2.1 코드 작업 종료 (2026-04-11).
-`§4 사용자 수동 검증` 통과 후 Phase 2.1 전체 완료.
-
-Phase 2.2 는:
-1. TemplateRenderer 실 구현 (ComponentRegistry 어댑터)
-2. v2-* 우선순위 2/3 마이그레이션
-3. 경량 7개 모드 분기 정교화
-4. TemplateBuilder URL 동기화 + 기타 폴리싱
diff --git a/notes/gbpark/2026-04-11-card-engine-phase2.1-rework-log.md b/notes/gbpark/2026-04-11-card-engine-phase2.1-rework-log.md
deleted file mode 100644
index cf1742a4..00000000
--- a/notes/gbpark/2026-04-11-card-engine-phase2.1-rework-log.md
+++ /dev/null
@@ -1,256 +0,0 @@
-# INVYONE 카드 엔진 Phase 2.1 재작업 — 구현 로그
-
-**작업일**: 2026-04-11
-**작업자**: gbpark + Claude
-**이전 로그**: `notes/gbpark/2026-04-11-card-engine-phase2.1-log.md`
-**기반 스펙**: `notes/gbpark/2026-04-10-card-engine-final-spec.md`
-**레퍼런스 구현**: `frontend/app/test-card-responsive/page.tsx` (Phase 1 반응형 증명)
-
----
-
-## 0. 재작업 배경
-
-Phase 2.1 의 TemplateBuilder / TemplateRenderer 가 **카드 내부 자유배치 (FreePosition / position: absolute)** 로 구현되었는데, 이는 Phase 1 에서 `test-card-responsive/page.tsx` 로 "반응형 보장" 이라 증명했던 모델(자동 레이아웃 = Tailwind flex/grid + 세로 스택) 과 모순된다.
-
-결과적으로 카드 폭이 줄면 내부 블록이 px 좌표로 고정돼 **겹침 / 잘림 / 가로 스크롤** 이 발생. Phase 1 의 "반응형 된다" 는 약속이 runtime 에서 지켜지지 않음.
-
-→ Phase 2.1 전체를 폐기하지 않고, **빌더/렌더러/타입** 세 층을 자동 레이아웃 모델로 재작성하기로 결정 (Step D DashboardCard + Step B 경량 반응형 + Step C FieldConfigPanel 등 나머지는 그대로 유지).
-
-### 핵심 방향 전환
-
-| 항목 | Before (Phase 2.1 초안) | After (재작업) |
-|---|---|---|
-| 카드 내부 위치 모델 | `FreePosition { left, top, width, height }` | `order: number` + `row?: number` |
-| 렌더러 레이아웃 | `position: absolute` + CSS var | `flex flex-col gap-2` + row 그룹핑 `flex flex-row flex-wrap` |
-| 좁은 카드 폭 대응 | `@container card (max-width: 599px)` 에서 세로 스택 강제 (임시방편) | 처음부터 세로 스택. 카드 폭 변해도 자동 줄바꿈/분배 |
-| 빌더 캔버스 | absolute 자유배치 + 드래그/리사이즈 | 세로 리스트 + 드롭 존 + 드래그 재배열 |
-| 가로 나열 수단 | 좌표로 옆에 배치 | `row` 키 — 같은 숫자 키를 가진 **연속** 블록이 한 줄 |
-
-> **카드 자체의 대시보드 내 배치**는 여전히 `Card.position: FreePosition` (자유배치) 유지. 즉 **대시보드 → 카드** 는 자유배치, **카드 → 내부** 는 자동 레이아웃. 두 층의 모델이 다르다는 점이 이번 재작업의 요지.
-
----
-
-## 1. 수정·생성·삭제 파일
-
-### 타입
-- **수정** `frontend/types/invyone-component.ts`
-  - `TemplateComponent.position: FreePosition` 필드 제거
-  - `TemplateComponent.order: number` (필수) 추가 — 0 부터 시작하는 세로 스택 순서
-  - `TemplateComponent.row?: number` (선택) 추가 — 같은 키를 가진 연속 블록을 flex-row 로 묶는 그룹핑 키
-  - `FreePosition` 인터페이스 자체는 `Card.position` 에서 여전히 쓰이므로 유지
-
-### 런타임 렌더러
-- **재작성** `frontend/components/dash/TemplateRenderer.tsx`
-  - `absolute` + CSS variable 방식 완전 제거
-  - `flex flex-col gap-2 overflow-auto p-2` 로 세로 스택
-  - `groupByRow` 헬퍼: `order` 정렬 후 `row` 가 동일한 연속 블록들을 하나의 row 배열로 묶음. `undefined` row 는 항상 단독 행
-  - 각 row 는 `flex flex-row flex-wrap gap-2`, 각 블록 wrapper 는 `flex-1 min-w-0` 로 가로 자동 분배 + 폭 부족 시 줄바꿈
-  - `normalizeBlocks` 헬퍼: 구 포맷(`position` 기반, `order` 누락) 블록의 **런타임 호환 레이어**. `order` 가 없으면 배열 인덱스를 부여해 순서만 보장
-  - `ComponentSwitch` (v2-table-list / search-widget / button-primary / text-display / aggregation-widget + 기본 fallback) 는 기존 로직 유지. v2-button-primary 의 `h-full flex items-center justify-center` 래핑 제거 (고정 높이 전제 제거)
-- **삭제** `frontend/components/dash/TemplateRenderer.css`
-  - 모든 규칙이 `position: absolute` + `@container card (max-width: 599px)` narrow 강제 기반이었고, 재작성된 렌더러가 순수 Tailwind 로 자동 레이아웃을 처리하므로 불필요
-- **유지** `frontend/components/dash/DashboardCard.tsx`
-  - TemplateRenderer 호출부는 변경 없음
-  - `dash-card-body` 의 `containerType: inline-size + containerName: card` 도 유지 (`styles/dashboard.css` 의 `@container card` 규칙이 여전히 카드 헤더/미니뷰에서 활용됨)
-
-### 빌더
-- **재작성** `frontend/components/template-builder/store/templateBuilderStore.ts`
-  - `updateBlockPosition`, `gridSettings`, `setGridSettings`, `resetGrid`, `selectedIds`, `setSelectedIds` 전부 제거
-  - `addBlock(componentId, config?, opts?: { insertAt?: number })` — 시그니처에서 position 파라미터 제거, insertAt 옵션으로 삽입 위치 지정. 미지정 시 끝에 추가
-  - `removeBlock(id)` — 삭제 후 `reindex` 로 order 자동 재계산
-  - `moveBlockUp(id)` / `moveBlockDown(id)` — 한 칸 이동
-  - `reorderBlock(id, targetIndex)` — 임의 위치로 이동. 드래그 드롭이 사용
-  - `setBlockRow(id, row?)` — 우측 속성 패널에서 가로 나열 키 편집
-  - `cloneSnapshot` / `undo` / `redo` 에서 `position` 복제 코드 제거
-  - `fromTemplate`: `migrateBlocks` 헬퍼로 **구 포맷 자동 마이그레이션** — `position` 필드 drop, `order` 누락 시 인덱스 부여, 상대 순서 유지 후 `reindex`
-  - `toTemplate`: 그대로 (Template.views 구조는 변하지 않음, 내부 블록만 새 포맷으로 직렬화)
-  - `commitBlocks` 내부 헬퍼로 블록 변경 + 스냅샷 기록을 한 곳으로 집약
-- **재작성** `frontend/components/template-builder/TemplateBuilder.tsx`
-  - `CanvasDragState { move / resize }` 타입 + `handleBlockMouseDown` + `snapValue` + `MIN_BLOCK_SIZE` + `gridLines` + `GridSettings` 탭 전부 삭제
-  - `CanvasList` 추가 — 중앙 캔버스를 세로 리스트로 렌더. 최상단/각 블록 사이/최하단에 `DropZone` 삽입
-  - `DropZone` 추가 — `onDragOver`/`onDragEnter` 시 active 하이라이트, `onDrop` 시 `handleDropAt(index, e)` 호출
-  - `handleDropAt` 추가 — `dataTransfer` 에 팔레트 아이템이면 `addBlock(..., { insertAt: index })`, 블록 ID 면 `reorderBlock(blockId, index)`
-  - `BlockRow` 추가 — 각 블록을 `draggable` div 로 렌더. 드래그 핸들 아이콘 + 라벨 + `#순서` + `row` 배지 + `DesignPreview` 재사용 + 우측에 `↑` / `↓` / `✕` `IconButton` 세로 스택
-  - `IconButton` 추가 — 소형 아이콘 버튼 헬퍼
-  - `EmptyCanvas` 추가 — 빈 뷰 안내
-  - `BlockProperties` 재작성 — `LabeledNumber` 4개(`left`/`top`/`width`/`height`) 삭제, 대신 `↑ 위로`/`↓ 아래로` 버튼 + `#순서` 배지 + `row` 키 숫자 input + 기존 config JSON 편집기 + 삭제 버튼
-  - `SidePanel` 탭에서 "격자" 탭 제거 (props / table / meta 3개로 축소)
-  - `MetaForm` 에서도 `defaultSize` 편집 삭제 (자동 레이아웃에서 의미 없음)
-  - `Toolbar` 에서 `격자` / `스냅` 체크박스 삭제
-  - 드래그 MIME type 2종 정의: `application/x-template-component` (팔레트 → 캔버스), `application/x-template-block` (블록 재배열)
-  - `Delete` / `Ctrl+Z` / `Ctrl+Y` / `Ctrl+S` 단축키는 그대로 유지
-- **유지** `frontend/components/template-builder/DesignPreview.tsx`
-  - 원래부터 `block.position` 을 참조하지 않음. 변경 없음
-- **유지** `frontend/components/template-builder/FieldConfigPanel.tsx`, `LucideIcon.tsx`, `template-builder.css`
-- **유지** `frontend/app/(main)/admin/builder/page.tsx` — `templateId` prop 전달 방식 그대로
-
----
-
-## 2. 자동 레이아웃의 핵심 계약
-
-### 2.1 TemplateComponent 의 새 위치 필드
-
-```typescript
-export interface TemplateComponent {
-  id: string;
-  componentId: string;
-  /** 세로 스택 내 순서. 작을수록 위. 0부터 시작. */
-  order: number;
-  /** 같은 값 공유 → flex-row 그룹. undefined 면 단독 행. */
-  row?: number;
-  config: Record<string, any>;
-  // ...
-}
-```
-
-### 2.2 TemplateRenderer 의 레이아웃 규칙
-
-1. `template.views.list.components` 를 `normalizeBlocks` 로 정규화 (구 포맷 호환)
-2. `groupByRow` 로 `row` 가 동일한 연속 블록을 하나의 row 배열로 묶음
-3. 전체를 `flex flex-col gap-2 w-full h-full overflow-auto p-2` 로 감쌈
-4. 각 row 를 `flex flex-row flex-wrap gap-2 w-full` 로
-5. 각 블록 wrapper 는 `flex-1 min-w-0` — 가로 폭 자동 분배 + 내용 넘치면 줄바꿈
-
-> ★ `min-w-0` 이 없으면 flex 기본값 `min-width: auto` 때문에 자식(테이블 등) 이 자신의 content width 를 주장하며 overflow 를 일으킨다. 이 한 줄이 "카드 폭 줄여도 깨지지 않는다" 의 핵심.
-
-### 2.3 row 그룹핑 규칙 (사용자 정신 모델)
-
-- `row` 를 비워두면 단독 행 (기본, 가장 자주 쓰는 형태)
-- 같은 숫자를 연속 블록 N 개에 주면 한 줄 안에 가로 나열됨
-- 숫자값 자체는 의미 없음 — **키** 로만 작동
-- `order` 는 행 경계를 넘어 전역 순서를 결정. 같은 row 안에서도 `order` 가 작은 게 왼쪽
-
-### 2.4 빌더의 드롭 모델
-
-- 팔레트 아이템 드래그: `application/x-template-component` MIME, payload = `{ componentId, defaultConfig }`
-- 블록 재배열 드래그: `application/x-template-block` MIME, payload = `blockId`
-- 드롭 존 index 는 "이 자리에 삽입되면 **이동 후** 배열의 몇 번째가 되는가"
-- `handleDropAt(index, e)` 가 두 MIME 을 구분해 `addBlock` / `reorderBlock` 호출
-
----
-
-## 3. 구 포맷 호환 (이중 방어)
-
-DB 에 이미 저장된 Template 중 Phase 2.1 초안 빌더가 만든 것은 `position: { left, top, width, height }` 만 있고 `order` 가 없다. 두 층에서 자동 처리:
-
-| 층 | 헬퍼 | 동작 |
-|---|---|---|
-| **Store** (빌더 로드) | `migrateBlocks` in `templateBuilderStore.fromTemplate` | `position` 필드 drop, `order` 누락 시 인덱스 부여, 정렬 후 `reindex` — 빌더에서 열어 **저장** 버튼만 누르면 DB 가 새 포맷으로 이관됨 |
-| **Renderer** (런타임) | `normalizeBlocks` in `TemplateRenderer` | `order` 없으면 배열 인덱스 부여, `row` 없으면 undefined — 당장 마이그레이션 안 해도 대시보드 카드에서 순서대로 읽기는 정상 |
-
-즉 **구 포맷 Template 을 당장 삭제하지 않아도 시스템은 깨지지 않는다.** 다만 구 포맷은 layout 이 본래 의도와 다르게 재해석되므로(px 좌표가 무시되고 단순 세로 순서가 됨) 시각적으로 어색할 수 있다. → Step D (soft-delete) 는 정리 목적이며 기술 필수가 아니다.
-
----
-
-## 4. 검증 결과
-
-### 4.1 TypeScript
-
-```
-# 전체 에러
-npx tsc --noEmit 2>&1 | grep -c "error TS"
-# → 2791  (Phase 2.1 완료 시점 3381 에서 −590)
-
-# 내 작업 영역
-npx tsc --noEmit 2>&1 | grep -E "template-builder|TemplateRenderer|DashboardCard|invyone-component|DesignPreview|FieldConfigPanel"
-# → (빈 출력)
-```
-
-- 내 작업 영역 에러 **0**
-- 전체 카운트 감소의 원인은 `updateBlockPosition` / `gridSettings` / `selectedIds` 등 Phase 2.1 초안에서 노출하던 심볼 제거로 의존 측의 에러가 사라진 것. 증가 요소 없음
-
-### 4.2 잔존 참조 감사
-
-- `block.position` / `.position.left|top|width|height` 사용처: **0 건** (전역)
-- `template-builder` 디렉터리 내 `gridSettings` / `updateBlockPosition` / `selectedIds` / `FreePosition`: **0 건**
-- `dash` 디렉터리 내 동일 심볼: **0 건** (TemplateRenderer 의 주석 1 건만 — `FreePosition` 단어로 구 포맷을 설명하는 문구)
-- `@container card` 규칙은 `styles/dashboard.css` 에만 남아있으며, 카드 헤더/미니뷰 전용으로 여전히 유효
-
-### 4.3 사용자 브라우저 검증 (남은 체크리스트)
-
-tsc / grep 은 코드 정합성만 보장한다. 아래는 사용자 수동 확인 필요:
-
-- [ ] `/test-card-responsive` 는 여전히 작동 (Phase 1 기반)
-- [ ] `/admin/builder` — 빌더 진입, 세로 리스트 캔버스 표시, 좌측 팔레트 드래그 → 드롭 존 하이라이트 → 드롭 → 새 블록 삽입
-- [ ] 블록 드래그 → 드롭 존 → 순서 재배열 동작
-- [ ] 블록 속성 패널에서 `↑`/`↓` 이동, `row` 키 입력, `config` JSON 편집, 삭제
-- [ ] 수주관리 Template 생성 후 저장 → 게시
-- [ ] 대시보드에 카드 배치 → 카드 폭을 실제로 **800 → 400 → 260** 으로 줄여도 overflow 없이 flex-wrap 으로 재배치
-- [ ] `test-card-responsive` 와 시각적으로 동일한 반응형 동작 확인
-- [ ] ControlMode / CardSettingsPanel sanity (Phase 2.1 log §4-E 와 동일)
-
----
-
-## 5. 주요 결정 사항
-
-### 결정 1 — `row` 필드 의미 (숫자 키 vs bool flag)
-
-**옵션**: (a) `row?: boolean` — 직전 블록과 같은 row 에 붙임 / (b) `row?: number` — 같은 숫자 키끼리 그룹
-**결정**: **(b) 숫자 키**
-**이유**: 사용자가 3개 블록을 한 줄에 두고 가운데 블록만 제거하면, bool 방식은 옆 블록 관계가 깨진다. 숫자 키는 나머지 2 블록이 같은 키를 공유하므로 그대로 유지. 또 같은 키 블록을 순서만 바꿔도 그룹이 유지돼 재배열 UX 가 단순.
-
-### 결정 2 — 빌더 캔버스에서 row 그룹핑을 시각적으로 반영할지
-
-**옵션**: (a) 캔버스도 runtime 처럼 row 그룹핑 반영 (가로 배치 미리보기) / (b) 평면 세로 리스트 + row 값 배지만 표시
-**결정**: **(b) MVP 로 평면 세로 리스트**
-**이유**: 드롭 존 / 드래그 / 삽입/재배열 UX 는 평면 리스트가 훨씬 단순. runtime 의 실제 row 그룹핑은 대시보드 카드에서 확인. 빌더에서 가로 배치 미리보기는 Phase 2.2 이월 (우측 속성 패널에 실 렌더 미리보기 탭 등).
-
-### 결정 3 — 빌더 단축키 `Delete` 처리
-
-속성 패널 textarea 에서도 Delete 가 발동되지 않도록 `if (tag === "INPUT" || "TEXTAREA" || "SELECT") return` 유지. 기존 로직 그대로.
-
-### 결정 4 — DashboardCard 의 `containerName: 'card'` 유지
-
-초안에서는 TemplateRenderer.css 의 `@container card (max-width: 599px)` narrow 스택을 위해 필요했지만, 이제는 `styles/dashboard.css` 의 카드 헤더 / 미니뷰 규칙이 여전히 이 컨테이너를 사용. 제거 시 다른 규칙이 깨질 수 있어 유지.
-
-### 결정 5 — 구 포맷 Template 처리 (Step D)
-
-**옵션**: (a) soft-delete / (b) 유지 + 자동 마이그레이션 레이어
-**결정**: **(b) + (a) 사용자 승인 받으면 병행**
-**이유**: 기술적으로는 (b) 만으로 충분. (a) 는 "의미 없는 레이아웃" 을 청소하는 용도. 사용자가 명시 승인할 때만 DB UPDATE 실행 (`CLAUDE.md` DB 규칙).
-
----
-
-## 6. Phase 2.2 이월 항목
-
-### 재작업에서 미뤄둔 것
-- [ ] **빌더 캔버스의 row 그룹핑 시각화** — 평면 리스트가 아니라 실제 runtime 렌더 모양으로 미리보기
-- [ ] **가로 나열 UX 개선** — row 키를 숫자로 편집하지 않고, 드롭 위치(좌/우) 로 자동 부여
-- [ ] **undo/redo 범위** — 현재 블록 변경만 history 에 들어감. row 변경 / reorder 는 포함되지만, `updateBlock` (config 편집 이외) 은 commit 시점이 다름 — 추후 통합
-
-### Phase 2.1 에서 원래 이월한 것 (변경 없음)
-- [ ] TemplateRenderer 를 ComponentRegistry 어댑터로 v2-* 실제 렌더 (현재는 FcTable/FcSearch/FcButton 기반 MVP)
-- [ ] v2-* 컴포넌트 props 시그니처 표준화 (VEX `ComponentData` / `isDesignMode` 의존 제거)
-- [ ] 경량 7 개 컴포넌트 내부 DOM 기반 반응형 개선
-- [ ] TemplateBuilder URL 동기화 (저장 후 `?id=tpl_xxx` 반영)
-- [ ] 우선순위 2/3 v2-* 마이그레이션
-
----
-
-## 7. 알려진 한계 / 주의
-
-1. **빌더 캔버스는 평면 리스트** — 같은 row 키를 공유하는 블록들이 실제로 가로 배치되는 모습은 대시보드 카드에서만 볼 수 있음. 빌더에서는 row 배지만 표시
-2. **`row` 키는 연속 블록에만 유효** — 예를 들어 `[A(row=1), B(row=1), C(row=2), D(row=1)]` 이면 A/B 만 가로 묶이고, D 는 C 뒤 단독 행. C 와 D 사이에 row=2 블록이 끼면 row=1 그룹이 끊기도록 의도적으로 설계 (drag 이동 시 직관적인 결과를 위해)
-3. **구 포맷 Template 은 레이아웃 의미 손실** — `position` 필드가 drop 되므로 원래 자유배치했던 의도는 "순서대로 세로 쌓기" 로 바뀜. 시각적으로 어색할 수 있음 → Step D 가 존재하는 이유
-4. **DashboardCard 의 TemplateRenderer 호출 경로는 그대로** — Template.views.list.components 가 있으면 새 렌더러가, 없으면 기존 DashboardCard 의 기본 CRUD (FcSearch + FcTable + CRUD 버튼 바) 가 그대로 보여줌. 이 분기는 Phase 2.1 초안과 동일
-5. **Phase 1 의 `v2-table-list` ResizeObserver narrow 전환** 은 **카드 폭 기준** 으로 여전히 동작. 이번 재작업은 TemplateRenderer 의 *블록 배치* 만 바꿨고, 블록 안 컴포넌트(v2-table-list 등) 의 자체 반응형 로직은 건드리지 않음
-
----
-
-## 8. 사용자 Step D 승인 대기
-
-구 포맷 Template `tpl_80704df4029a` (수주123123) soft-delete 는 사용자 명시 승인 후 실행:
-
-```sql
--- 대상 서버: 사용자 확인 필요 (vexplor / vexplor_dev / testvex 중)
-UPDATE templates SET is_active='D' WHERE template_id='tpl_80704df4029a';
-```
-
-승인 없으면 자동 마이그레이션 레이어만으로도 시스템은 정상 동작. 어느 쪽이든 기능적 차이는 없다.
-
----
-
-## 끝
-
-Phase 2.1 재작업 코드 종료 (2026-04-11).
-사용자 브라우저 검증 (§4.3) 통과 후 Phase 2.1 전체 완료로 이월.
diff --git a/notes/gbpark/2026-04-13-builder-panel-mockup.html b/notes/gbpark/2026-04-13-builder-panel-mockup.html
new file mode 100644
index 00000000..ff00342b
--- /dev/null
+++ b/notes/gbpark/2026-04-13-builder-panel-mockup.html
@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="ko" class="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Builder Panel Mockup — Resizable + Field Display</title>
+<style>
+  *{margin:0;padding:0;box-sizing:border-box;}
+  :root{
+    --bg:#121218;--bg2:#1a1a22;--bg3:#22222c;
+    --fg:#e8e8ee;--fg2:#9898a8;--fg3:#5a5a6e;
+    --bd:#3a3a48;--bd2:#2a2a36;
+    --blue:#5b9ef5;--blue-bg:rgba(91,158,245,0.12);--blue-bd:rgba(91,158,245,0.3);
+    --amber:#f0c060;--amber-bg:rgba(240,192,96,0.12);
+    --green:#55c4a0;--green-bg:rgba(85,196,160,0.12);
+    --violet:#a88cee;--violet-bg:rgba(168,140,238,0.12);
+    --rose:#f07088;--rose-bg:rgba(240,112,136,0.12);
+    --cyan:#50c8c8;--cyan-bg:rgba(80,200,200,0.12);
+    --panel-w:280px;
+  }
+  html:not(.dark){
+    --bg:#f5f5f8;--bg2:#ededf2;--bg3:#e4e4ec;
+    --fg:#1a1a24;--fg2:#6a6a80;--fg3:#9898a8;
+    --bd:#d8d8e2;--bd2:#e4e4ec;
+    --blue:#3b7dd8;--blue-bg:rgba(59,125,216,0.08);--blue-bd:rgba(59,125,216,0.2);
+    --amber:#c09030;--amber-bg:rgba(192,144,48,0.08);
+    --green:#30a078;--green-bg:rgba(48,160,120,0.08);
+    --violet:#7860c0;--violet-bg:rgba(120,96,192,0.08);
+    --rose:#d05068;--rose-bg:rgba(208,80,104,0.08);
+    --cyan:#309898;--cyan-bg:rgba(48,152,152,0.08);
+  }
+  body{font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;background:var(--bg);color:var(--fg);height:100vh;display:flex;overflow:hidden;}
+
+  /* ===== 테마 토글 ===== */
+  .theme-toggle{position:fixed;top:12px;right:16px;z-index:100;display:flex;gap:6px;}
+  .theme-toggle button{padding:6px 14px;border-radius:6px;border:1px solid var(--bd);background:var(--bg2);color:var(--fg2);font-size:12px;cursor:pointer;transition:all .15s;}
+  .theme-toggle button:hover{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-bd);}
+  .theme-toggle button.active{background:var(--blue);color:#fff;border-color:var(--blue);}
+
+  /* ===== 좌측 패널 ===== */
+  .panel{
+    width:var(--panel-w);min-width:200px;max-width:450px;
+    background:var(--bg2);border-right:1px solid var(--bd2);
+    display:flex;flex-direction:column;height:100%;position:relative;
+    transition:background .2s;
+  }
+
+  /* 리사이즈 핸들 */
+  .resize-handle{
+    position:absolute;right:-3px;top:0;bottom:0;width:6px;
+    cursor:col-resize;z-index:10;
+    transition:background .15s;
+  }
+  .resize-handle:hover,.resize-handle.active{
+    background:var(--blue);opacity:0.5;
+  }
+
+  /* 패널 헤더 (테이블명) */
+  .panel-header{
+    padding:12px 14px 8px;display:flex;align-items:center;gap:8px;
+    border-bottom:1px solid var(--bd2);flex-shrink:0;
+  }
+  .panel-header .table-icon{
+    width:20px;height:20px;border-radius:4px;
+    background:var(--blue-bg);color:var(--blue);
+    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
+  }
+  .panel-header .table-name{font-size:13px;font-weight:700;flex:1;}
+  .panel-header .field-count{
+    font-size:11px;color:var(--fg3);background:var(--bg3);
+    padding:2px 8px;border-radius:10px;
+  }
+
+  /* 검색 */
+  .search-wrap{padding:8px 12px;flex-shrink:0;}
+  .search-wrap input{
+    width:100%;height:30px;padding:0 10px 0 32px;
+    border:1px solid var(--bd2);border-radius:6px;
+    background:var(--bg);color:var(--fg);font-size:12px;
+    outline:none;transition:border .15s;
+  }
+  .search-wrap input:focus{border-color:var(--blue-bd);}
+  .search-wrap{position:relative;}
+  .search-wrap svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--fg3);}
+
+  /* 스크롤 영역 */
+  .panel-scroll{flex:1;overflow-y:auto;padding:4px 0;}
+  .panel-scroll::-webkit-scrollbar{width:6px;}
+  .panel-scroll::-webkit-scrollbar-thumb{background:var(--bd);border-radius:3px;}
+
+  /* ===== 섹션 ===== */
+  .section{margin-bottom:4px;}
+  .section-header{
+    display:flex;align-items:center;gap:6px;
+    padding:6px 14px;font-size:11px;font-weight:700;
+    color:var(--fg3);text-transform:uppercase;letter-spacing:0.04em;
+    cursor:pointer;user-select:none;
+  }
+  .section-header:hover{color:var(--fg2);}
+  .section-divider{height:1px;background:var(--bd2);margin:6px 12px;}
+
+  /* ===== 필드 행 ===== */
+  .field-list{padding:0 8px 4px;}
+  .field-row{
+    display:flex;align-items:center;gap:10px;
+    padding:7px 10px;border-radius:5px;
+    cursor:grab;transition:all .12s;
+    border-left:3px solid transparent;
+    position:relative;
+  }
+  .field-row:hover{
+    background:var(--blue-bg);
+    border-left-color:var(--blue);
+  }
+  .field-row:active{cursor:grabbing;opacity:0.7;}
+  .field-row.placed{opacity:0.3;cursor:default;}
+
+  /* 타입 뱃지 */
+  .field-type{
+    font-size:10px;font-weight:700;
+    padding:2px 7px;border-radius:3px;
+    min-width:34px;text-align:center;
+    flex-shrink:0;letter-spacing:0.03em;
+  }
+  .field-type.txt{background:var(--blue-bg);color:var(--blue);}
+  .field-type.num{background:var(--amber-bg);color:var(--amber);}
+  .field-type.date{background:var(--green-bg);color:var(--green);}
+  .field-type.bool{background:var(--violet-bg);color:var(--violet);}
+
+  /* 타입별 hover 보더 */
+  .field-row.num:hover{border-left-color:var(--amber);background:var(--amber-bg);}
+  .field-row.date:hover{border-left-color:var(--green);background:var(--green-bg);}
+  .field-row.bool:hover{border-left-color:var(--violet);background:var(--violet-bg);}
+
+  /* 필드명 */
+  .field-info{flex:1;min-width:0;overflow:hidden;}
+  .field-label{
+    font-size:12.5px;font-weight:500;color:var(--fg);
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  }
+  .field-col{
+    font-size:10px;color:var(--fg3);margin-top:1px;
+    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+    display:none; /* 기본 숨김, 넓을 때 표시 */
+  }
+
+  /* 드래그 힌트 */
+  .field-grip{
+    color:var(--fg3);opacity:0;transition:opacity .12s;flex-shrink:0;
+  }
+  .field-row:hover .field-grip{opacity:0.5;}
+
+  /* ★ 패널 넓을 때 (280px+): 2줄 표시 */
+  @container panel (min-width: 280px){
+    .field-col{display:block;}
+  }
+  /* container query 미지원 폴백 — JS로 class 토글 */
+  .panel.wide .field-col{display:block;}
+
+  /* ===== 컴포넌트 카드 ===== */
+  .comp-list{padding:0 8px 4px;display:flex;flex-direction:column;gap:3px;}
+  .comp-card{
+    display:flex;align-items:center;gap:8px;
+    padding:7px 10px;border-radius:5px;
+    border:1px solid var(--bd2);
+    border-left:3px solid var(--comp-color,var(--bd));
+    background:var(--comp-bg,transparent);
+    cursor:grab;transition:all .12s;user-select:none;
+  }
+  .comp-card:hover{
+    border-color:var(--comp-color,var(--blue));
+    border-left-color:var(--comp-color,var(--blue));
+    background:var(--comp-hover,var(--blue-bg));
+    box-shadow:0 1px 6px rgba(0,0,0,0.08);
+  }
+  .comp-icon{
+    width:24px;height:24px;border-radius:5px;
+    display:flex;align-items:center;justify-content:center;
+    background:var(--comp-bg,var(--blue-bg));
+    color:var(--comp-color,var(--blue));
+    font-size:13px;flex-shrink:0;
+  }
+  .comp-name{font-size:12.5px;font-weight:600;flex:1;}
+  .comp-grip{color:var(--fg3);opacity:0;transition:opacity .12s;flex-shrink:0;}
+  .comp-card:hover .comp-grip{opacity:0.4;}
+
+  /* ===== 더보기 ===== */
+  .more-toggle{
+    display:flex;align-items:center;justify-content:center;gap:6px;
+    padding:7px;margin:4px 8px;border-radius:5px;
+    border:1px dashed var(--bd);color:var(--fg3);
+    font-size:12px;font-weight:600;cursor:pointer;transition:all .12s;
+  }
+  .more-toggle:hover{border-color:var(--blue-bd);color:var(--blue);background:var(--blue-bg);}
+  .more-count{font-size:10px;background:var(--bg3);padding:1px 7px;border-radius:8px;}
+
+  /* ===== 캔버스 (더미) ===== */
+  .canvas{flex:1;background:var(--bg);position:relative;display:flex;align-items:center;justify-content:center;}
+  .canvas-label{color:var(--fg3);font-size:14px;}
+
+  /* ===== 패널 너비 표시 ===== */
+  .width-indicator{
+    position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
+    font-size:10px;color:var(--fg3);background:var(--bg3);
+    padding:2px 10px;border-radius:10px;pointer-events:none;
+  }
+</style>
+</head>
+<body>
+
+<!-- 테마 토글 -->
+<div class="theme-toggle">
+  <button onclick="setTheme('dark')" class="active" id="btn-dark">Dark</button>
+  <button onclick="setTheme('light')" id="btn-light">Light</button>
+</div>
+
+<!-- 좌측 패널 -->
+<div class="panel" id="panel">
+  <div class="resize-handle" id="resizeHandle"></div>
+
+  <!-- 테이블 헤더 -->
+  <div class="panel-header">
+    <div class="table-icon">T</div>
+    <div class="table-name">USER_INFO</div>
+    <div class="field-count">30</div>
+  </div>
+
+  <!-- 검색 -->
+  <div class="search-wrap">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+    <input type="text" placeholder="필드 검색...">
+  </div>
+
+  <!-- 스크롤 영역 -->
+  <div class="panel-scroll">
+
+    <!-- 필드 리스트 -->
+    <div class="field-list" id="fieldList">
+      <!-- JS로 생성 -->
+    </div>
+
+    <div class="section-divider"></div>
+
+    <!-- 컴포넌트 -->
+    <div class="section">
+      <div class="section-header">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
+        <span>컴포넌트</span>
+      </div>
+      <div class="comp-list">
+        <div class="comp-card" style="--comp-color:var(--blue);--comp-bg:var(--blue-bg);--comp-hover:var(--blue-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg></div>
+          <span class="comp-name">데이터 조회/선택</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--rose);--comp-bg:var(--rose-bg);--comp-hover:var(--rose-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></div>
+          <span class="comp-name">버튼</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--violet);--comp-bg:var(--violet-bg);--comp-hover:var(--violet-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg></div>
+          <span class="comp-name">제목/텍스트</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--green);--comp-bg:var(--green-bg);--comp-hover:var(--green-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg></div>
+          <span class="comp-name">테이블</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--amber);--comp-bg:var(--amber-bg);--comp-hover:var(--amber-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
+          <span class="comp-name">통계 카드</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--fg3);--comp-bg:transparent;--comp-hover:rgba(128,128,128,0.06);">
+          <div class="comp-icon" style="background:var(--bg3);color:var(--fg3);"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg></div>
+          <span class="comp-name">구분선</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--cyan);--comp-bg:var(--cyan-bg);--comp-hover:var(--cyan-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg></div>
+          <span class="comp-name">영역</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--violet);--comp-bg:var(--violet-bg);--comp-hover:var(--violet-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 10H3"/><path d="M21 6H3"/><path d="M21 14H3"/><path d="M17 18H3"/></svg></div>
+          <span class="comp-name">입력 필드</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+        <div class="comp-card" style="--comp-color:var(--blue);--comp-bg:var(--blue-bg);--comp-hover:var(--blue-bg);">
+          <div class="comp-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg></div>
+          <span class="comp-name">검색</span>
+          <svg class="comp-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+        </div>
+      </div>
+
+      <div class="more-toggle">
+        <span>더보기</span>
+        <span class="more-count">9</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="width-indicator" id="widthLabel">280px</div>
+</div>
+
+<!-- 캔버스 -->
+<div class="canvas">
+  <span class="canvas-label">캔버스 — 패널 경계를 드래그해서 리사이즈</span>
+</div>
+
+<script>
+// 필드 데이터
+const fields = [
+  {label:'사번', col:'emp_no', type:'TXT'},
+  {label:'사용자ID', col:'user_id', type:'TXT'},
+  {label:'사용자패스워드', col:'user_password', type:'TXT'},
+  {label:'사용자이름', col:'user_name', type:'TXT'},
+  {label:'사용자 영어 이름', col:'user_name_en', type:'TXT'},
+  {label:'사용자 중국어 이름', col:'user_name_cn', type:'TXT'},
+  {label:'부서코드', col:'department_code', type:'TXT'},
+  {label:'부서이름', col:'department_name', type:'TXT'},
+  {label:'직급코드', col:'grade_code', type:'TXT'},
+  {label:'직급이름', col:'grade_name', type:'TXT'},
+  {label:'이메일', col:'email', type:'TXT'},
+  {label:'전화번호', col:'phone_number', type:'TXT'},
+  {label:'휴대폰 번호', col:'mobile_number', type:'TXT'},
+  {label:'사용자 유형 코드', col:'user_type_code', type:'TXT'},
+  {label:'사용자 유형 명', col:'user_type_name', type:'TXT'},
+  {label:'생성일', col:'created_date', type:'DATE'},
+  {label:'상태', col:'status', type:'TXT'},
+  {label:'퇴사일', col:'resign_date', type:'DATE'},
+  {label:'팩스번호', col:'fax_number', type:'TXT'},
+  {label:'협력사ID', col:'partner_id', type:'NUM'},
+  {label:'사진', col:'photo', type:'TXT'},
+  {label:'언어/지역', col:'locale', type:'TXT'},
+  {label:'회사코드', col:'company_code', type:'TXT'},
+  {label:'데이터 타입', col:'data_type', type:'TXT'},
+  {label:'자격증 번호', col:'cert_number', type:'TXT'},
+  {label:'차량번호', col:'car_number', type:'TXT'},
+  {label:'가입유형', col:'signup_type', type:'TXT'},
+  {label:'지점/지사 명', col:'branch_name', type:'TXT'},
+  {label:'부서이력', col:'department_history', type:'TXT'},
+  {label:'토큰 버전', col:'token_version', type:'NUM'},
+];
+
+const list = document.getElementById('fieldList');
+fields.forEach(f => {
+  const row = document.createElement('div');
+  row.className = `field-row ${f.type.toLowerCase()}`;
+  row.innerHTML = `
+    <span class="field-type ${f.type.toLowerCase()}">${f.type}</span>
+    <div class="field-info">
+      <div class="field-label">${f.label}</div>
+      <div class="field-col">${f.col}</div>
+    </div>
+    <svg class="field-grip" width="8" height="14" viewBox="0 0 8 14"><circle cx="2" cy="2" r="1" fill="currentColor"/><circle cx="6" cy="2" r="1" fill="currentColor"/><circle cx="2" cy="7" r="1" fill="currentColor"/><circle cx="6" cy="7" r="1" fill="currentColor"/><circle cx="2" cy="12" r="1" fill="currentColor"/><circle cx="6" cy="12" r="1" fill="currentColor"/></svg>
+  `;
+  list.appendChild(row);
+});
+
+// 리사이즈
+const panel = document.getElementById('panel');
+const handle = document.getElementById('resizeHandle');
+const label = document.getElementById('widthLabel');
+let resizing = false;
+
+handle.addEventListener('mousedown', e => {
+  resizing = true;
+  handle.classList.add('active');
+  document.body.style.cursor = 'col-resize';
+  document.body.style.userSelect = 'none';
+  e.preventDefault();
+});
+document.addEventListener('mousemove', e => {
+  if (!resizing) return;
+  const w = Math.min(450, Math.max(200, e.clientX));
+  panel.style.width = w + 'px';
+  label.textContent = w + 'px';
+  panel.classList.toggle('wide', w >= 280);
+});
+document.addEventListener('mouseup', () => {
+  if (!resizing) return;
+  resizing = false;
+  handle.classList.remove('active');
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+});
+
+// 초기 wide 체크
+panel.classList.toggle('wide', parseInt(getComputedStyle(panel).width) >= 280);
+
+// 테마 토글
+function setTheme(t) {
+  document.documentElement.classList.toggle('dark', t === 'dark');
+  document.getElementById('btn-dark').classList.toggle('active', t === 'dark');
+  document.getElementById('btn-light').classList.toggle('active', t === 'light');
+}
+</script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-04-14-builder-header-mockup.html b/notes/gbpark/2026-04-14-builder-header-mockup.html
new file mode 100644
index 00000000..c2e7f9a5
--- /dev/null
+++ b/notes/gbpark/2026-04-14-builder-header-mockup.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html lang="ko" class="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Builder Header v3 — 인비온 직각 + 구역 분리 + 구조 변경</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box;}
+:root{
+  --bg:#0a0a12;--bg2:#121218;--bg3:#1a1a22;--bg4:#22222c;
+  --fg:#e8e8ee;--fg2:#9898a8;--fg3:#5a5a6e;
+  --bd:#2a2a36;--bd-l:#3a3a48;
+  --purple:#6c5ce7;--purple-l:#a29bfe;--purple-bg:rgba(108,92,231,0.12);--purple-glow:rgba(162,155,254,0.25);
+  --cyan:#00cec9;--cyan-bg:rgba(0,206,201,0.1);
+  --pink:#fd79a8;
+  --glass:rgba(17,16,42,0.5);--glass-s:rgba(17,16,42,0.65);--glass-border:rgba(162,155,254,0.1);
+  --glow-sm:0 0 20px rgba(162,155,254,0.1);
+}
+html:not(.dark){
+  --bg:#f5f5f8;--bg2:#ededf2;--bg3:#e4e4ec;--bg4:#d8d8e2;
+  --fg:#1a1a24;--fg2:#6a6a80;--fg3:#9898a8;
+  --bd:#d8d8e2;--bd-l:#c8c8d2;
+  --purple:#6c5ce7;--purple-l:#6c5ce7;--purple-bg:rgba(108,92,231,0.07);--purple-glow:rgba(108,92,231,0.12);
+  --cyan:#00b3ad;--cyan-bg:rgba(0,179,173,0.06);
+  --pink:#e0608a;
+  --glass:rgba(255,255,255,0.6);--glass-s:rgba(255,255,255,0.8);--glass-border:rgba(108,92,231,0.08);
+  --glow-sm:0 0 15px rgba(108,92,231,0.06);
+}
+body{font-family:'Pretendard','Apple SD Gothic Neo',-apple-system,sans-serif;background:var(--bg);color:var(--fg);height:100vh;display:flex;flex-direction:column;overflow:hidden;}
+
+/* 테마 */
+.tm{position:fixed;bottom:12px;right:12px;z-index:999;display:flex;
+  background:var(--bg3);border:1px solid var(--bd);border-radius:6px;overflow:hidden;}
+.tm button{padding:4px 12px;border:none;font-size:10px;font-weight:600;
+  background:transparent;color:var(--fg3);cursor:pointer;transition:all .12s;}
+.tm button.on{background:var(--purple);color:#fff;}
+
+/* ═══════════════════════════════════════════════════════════════
+   헤더 — 인비온 직각 스타일 + 구역 분리
+   ═══════════════════════════════════════════════════════════════ */
+.hdr{
+  height:48px;display:flex;align-items:center;
+  flex-shrink:0;z-index:20;
+  background:var(--bg2);
+  border-bottom:1px solid var(--bd);
+}
+
+/* ── 구역: 보이는듯 안보이는듯한 구분 ── */
+.hdr-zone{
+  display:flex;align-items:center;height:100%;
+  padding:0 12px;
+  position:relative;
+}
+.hdr-zone::after{
+  content:'';position:absolute;right:0;top:25%;bottom:25%;
+  width:1px;background:var(--glass-border);
+}
+.hdr-zone:last-child::after{display:none;}
+.hdr-zone.grow{flex:1;min-width:0;}
+.hdr-zone.end{margin-left:auto;}
+.hdr-zone.end::after{display:none;}
+.hdr-zone.end::before{
+  content:'';position:absolute;left:0;top:25%;bottom:25%;
+  width:1px;background:var(--glass-border);
+}
+
+/* 브랜드 구역 */
+.brand{display:flex;align-items:center;gap:6px;}
+.brand-logo{font-size:13px;font-weight:900;letter-spacing:-0.03em;
+  background:linear-gradient(135deg,var(--purple),var(--cyan));
+  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
+.brand-tag{font-size:7.5px;font-weight:800;padding:2px 5px;
+  background:linear-gradient(135deg,var(--purple),var(--pink));
+  color:#fff;border-radius:3px;letter-spacing:0.05em;
+  box-shadow:0 0 8px rgba(108,92,231,0.2);}
+
+/* 직각 아이콘 버튼 — 탭과 동일한 플랫 스타일 */
+.sq-btn{
+  width:32px;height:32px;border-radius:6px;
+  border:none;
+  background:transparent;color:var(--fg3);
+  cursor:pointer;display:flex;align-items:center;justify-content:center;
+  transition:all .15s;flex-shrink:0;
+}
+.sq-btn:hover{color:var(--fg2);background:var(--bg3);}
+.sq-btn.active{color:var(--purple-l);background:var(--purple-bg);}
+
+/* 탭 구역 — 직각 탭 */
+.tab-group{
+  display:flex;gap:0;height:100%;align-items:stretch;
+}
+.tab-item{
+  display:flex;align-items:center;gap:5px;
+  padding:0 16px;border:none;
+  font-size:11.5px;font-weight:500;color:var(--fg3);
+  background:transparent;cursor:pointer;
+  transition:all .12s;white-space:nowrap;
+  position:relative;
+}
+.tab-item+.tab-item::before{
+  content:'';position:absolute;left:0;top:30%;bottom:30%;
+  width:1px;background:var(--glass-border);
+}
+.tab-item:hover{color:var(--fg2);background:var(--bg3);}
+.tab-item.active{
+  color:var(--purple-l);font-weight:700;
+  background:var(--purple-bg);
+}
+.tab-item.active::after{
+  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
+  background:linear-gradient(90deg,var(--purple),var(--cyan));
+  box-shadow:0 0 8px var(--purple-glow);
+}
+.tab-cnt{
+  font-size:9px;font-weight:700;
+  padding:1px 6px;border-radius:4px;
+  background:var(--bg4);color:var(--fg3);
+}
+.tab-item.active .tab-cnt{background:rgba(162,155,254,0.15);color:var(--purple-l);}
+
+/* 화면 정보 구역 */
+.info-title{font-size:12.5px;font-weight:700;color:var(--fg);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
+.info-table{
+  display:inline-flex;align-items:center;gap:4px;
+  font-size:10px;font-weight:600;font-family:ui-monospace,monospace;
+  color:var(--cyan);padding:2px 8px;border-radius:4px;
+  background:var(--cyan-bg);
+  border:1px solid rgba(0,206,201,0.12);
+  margin-left:8px;white-space:nowrap;flex-shrink:0;
+}
+
+/* 도구 버튼 — 탭과 동일한 플랫 스타일 */
+.tool-btn{
+  display:flex;align-items:center;gap:5px;
+  padding:5px 12px;border-radius:6px;
+  border:none;background:transparent;
+  font-size:11px;font-weight:500;color:var(--fg3);
+  cursor:pointer;transition:all .15s;white-space:nowrap;
+}
+.tool-btn:hover{color:var(--fg2);background:var(--bg3);}
+
+/* 저장 — 플랫 아이콘 + 보라 텍스트 (다른 버튼과 같은 톤, 색으로만 구분) */
+.save-btn{
+  display:flex;align-items:center;gap:5px;
+  padding:5px 12px;border-radius:6px;border:none;
+  font-size:11.5px;font-weight:700;
+  color:var(--purple-l);
+  background:transparent;
+  cursor:pointer;
+  transition:all .15s;flex-shrink:0;
+}
+.save-btn:hover{
+  background:var(--purple-bg);
+}
+.save-btn svg{opacity:0.7;}
+
+/* 탭 추가 애니메이션 */
+@keyframes tabIn{
+  from{opacity:0;max-width:0;padding:0;overflow:hidden;}
+  to{opacity:1;max-width:200px;padding:0 16px;}
+}
+
+/* 구역 내부 간격 */
+.hdr-zone .gap-2{display:flex;align-items:center;gap:6px;}
+.hdr-zone .gap-1{display:flex;align-items:center;gap:4px;}
+
+/* ═══════════════════════════════════════════════════════════════
+   캔버스 + 플로팅 도구
+   ═══════════════════════════════════════════════════════════════ */
+.canvas-area{flex:1;position:relative;background:var(--bg);display:flex;align-items:center;justify-content:center;}
+
+.float-tools{
+  position:absolute;top:10px;left:50%;transform:translateX(-50%);
+  display:flex;align-items:center;gap:0;
+  background:var(--bg2);
+  border:1px solid var(--glass-border);border-radius:8px;
+  box-shadow:var(--glow-sm),0 4px 20px rgba(0,0,0,0.15);
+  z-index:10;overflow:hidden;
+}
+.ft-cell{
+  display:flex;align-items:center;gap:5px;
+  padding:5px 12px;
+  position:relative;
+  font-size:10.5px;color:var(--fg2);cursor:pointer;
+  transition:all .12s;white-space:nowrap;
+}
+.ft-cell+.ft-toggles::before,.ft-toggles+.ft-cell::before{
+  content:'';position:absolute;left:0;top:20%;bottom:20%;
+  width:1px;background:var(--glass-border);
+}
+.ft-cell:hover{background:var(--bg3);color:var(--fg);}
+.ft-cell .sub{font-size:9.5px;color:var(--fg3);}
+.ft-cell svg{flex-shrink:0;}
+
+.ft-toggle{
+  width:28px;height:28px;border:none;
+  background:transparent;color:var(--fg3);
+  cursor:pointer;display:flex;align-items:center;justify-content:center;
+  transition:all .12s;
+}
+.ft-toggle:hover{color:var(--fg);background:var(--bg3);}
+.ft-toggle.on{color:var(--purple-l);background:var(--purple-bg);}
+.ft-toggles{
+  display:flex;position:relative;
+}
+
+.canvas-inner{
+  width:80%;max-width:900px;height:70%;
+  background:var(--bg2);border:1px solid var(--bd);border-radius:6px;
+  display:flex;align-items:center;justify-content:center;
+  color:var(--fg3);font-size:13px;
+}
+
+/* 비교 */
+.note{
+  position:fixed;bottom:12px;left:50%;transform:translateX(-50%);
+  background:var(--bg3);border:1px solid var(--bd);border-radius:8px;
+  padding:10px 18px;font-size:10.5px;color:var(--fg2);z-index:100;
+  max-width:700px;text-align:center;line-height:1.6;
+}
+.note b{color:var(--purple-l);}
+</style>
+</head>
+<body>
+
+<div class="tm">
+  <button onclick="setTheme('dark')" class="on" id="bd">Dark</button>
+  <button onclick="setTheme('light')" id="bl">Light</button>
+</div>
+
+<!-- ═══ 헤더 ═══ -->
+<div class="hdr">
+
+  <!-- 구역 1: 브랜드 -->
+  <div class="hdr-zone" style="padding:0 14px;">
+    <div class="brand">
+      <span class="brand-logo">INVYONE</span>
+      <span class="brand-tag">STUDIO</span>
+    </div>
+  </div>
+
+  <!-- 구역 2: 뒤로 + 패널 -->
+  <div class="hdr-zone">
+    <div class="gap-1">
+      <div class="sq-btn" title="목록으로">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
+      </div>
+      <div class="sq-btn active" title="패널">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
+      </div>
+    </div>
+  </div>
+
+  <!-- 구역 3: 탭 (헤더 안에 통합, 직각 분리) -->
+  <div class="hdr-zone" style="padding:0;">
+    <div class="tab-group" id="tabGroup">
+      <button class="tab-item active">
+        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+        목록 화면
+        <span class="tab-cnt">8</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- 구역 4: 화면 정보 (확장) -->
+  <div class="hdr-zone grow">
+    <span class="info-title">하이큐마그 기준정보 부서관리 사원 추가 모달</span>
+    <span class="info-table">
+      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>
+      user_info
+    </span>
+  </div>
+
+  <!-- 구역 5: 도구 아이콘 -->
+  <div class="hdr-zone">
+    <div class="gap-1">
+      <div class="sq-btn" title="라벨">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2H2v10l9.29 9.29c.94.94 2.48.94 3.42 0l6.58-6.58c.94-.94.94-2.48 0-3.42L12 2Z"/><path d="M7 7h.01"/></svg>
+      </div>
+      <div class="sq-btn" title="단축키">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8h.01"/><path d="M10 8h.01"/><path d="M14 8h.01"/><path d="M18 8h.01"/><path d="M7 16h10"/></svg>
+      </div>
+      <div class="sq-btn" title="미리보기">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
+      </div>
+    </div>
+  </div>
+
+  <!-- 구역 6: 다국어 + 저장 -->
+  <div class="hdr-zone end">
+    <div class="gap-2">
+      <button class="tool-btn">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/></svg>
+        다국어 생성
+      </button>
+      <button class="tool-btn">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        다국어 설정
+      </button>
+      <button class="save-btn">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+        저장
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ 캔버스 ═══ -->
+<div class="canvas-area">
+  <!-- 플로팅 도구 (직각 구역 분리 스타일) -->
+  <div class="float-tools">
+    <div class="ft-cell">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+      Full HD
+      <span class="sub">1920×1080</span>
+      <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="opacity:.4"><path d="m6 9 6 6 6-6"/></svg>
+    </div>
+    <div class="ft-toggles">
+      <button class="ft-toggle on" title="격자 표시">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
+      </button>
+      <button class="ft-toggle on" title="격자 스냅">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="canvas-inner">캔버스 영역</div>
+</div>
+
+<div class="note">
+  <b>탭은 동적:</b> 처음엔 "목록 화면"만. 등록/수정 버튼 배치 시 탭 자동 추가<br>
+  <button onclick="addTab('insert')" style="margin-top:4px;padding:3px 10px;border-radius:4px;border:1px solid var(--bd);background:var(--bg3);color:var(--fg2);font-size:10px;cursor:pointer;">+ 등록 버튼 배치</button>
+  <button onclick="addTab('update')" style="padding:3px 10px;border-radius:4px;border:1px solid var(--bd);background:var(--bg3);color:var(--fg2);font-size:10px;cursor:pointer;">+ 수정 버튼 배치</button>
+  <button onclick="resetTabs()" style="padding:3px 10px;border-radius:4px;border:1px solid var(--bd);background:var(--bg3);color:var(--fg2);font-size:10px;cursor:pointer;">초기화</button>
+</div>
+
+<script>
+function setTheme(t){
+  document.documentElement.classList.toggle('dark',t==='dark');
+  document.getElementById('bd').classList.toggle('on',t==='dark');
+  document.getElementById('bl').classList.toggle('on',t==='light');
+}
+function bindTabs(){
+  document.querySelectorAll('.tab-item').forEach(t=>{
+    t.onclick=()=>{
+      document.querySelectorAll('.tab-item').forEach(x=>x.classList.remove('active'));
+      t.classList.add('active');
+    };
+  });
+}
+bindTabs();
+
+const tabDefs={
+  insert:{icon:'<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>',label:'등록 팝업'},
+  update:{icon:'<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>',label:'수정 팝업'},
+};
+const addedTabs=new Set();
+function addTab(type){
+  if(addedTabs.has(type))return;
+  addedTabs.add(type);
+  const d=tabDefs[type];
+  const btn=document.createElement('button');
+  btn.className='tab-item';
+  btn.dataset.type=type;
+  btn.innerHTML=d.icon+' '+d.label;
+  btn.style.animation='tabIn .25s ease';
+  document.getElementById('tabGroup').appendChild(btn);
+  bindTabs();
+}
+function resetTabs(){
+  addedTabs.clear();
+  const g=document.getElementById('tabGroup');
+  g.querySelectorAll('[data-type]').forEach(el=>el.remove());
+}
+document.querySelectorAll('.ft-toggle').forEach(b=>b.addEventListener('click',()=>b.classList.toggle('on')));
+</script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-04-15-menu-mng-v5-mockup-b.html b/notes/gbpark/2026-04-15-menu-mng-v5-mockup-b.html
new file mode 100644
index 00000000..11cd1c6e
--- /dev/null
+++ b/notes/gbpark/2026-04-15-menu-mng-v5-mockup-b.html
@@ -0,0 +1,677 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>INVYONE — 메뉴 관리 (B · Soft Studio)</title>
+<style>
+/* ============ TOKENS ============ */
+:root{
+  --bg:#f4f2ee;            /* warm offwhite, 살짝 크림 */
+  --bg-tint:#ebe7e0;
+  --panel:#fbfaf7;
+  --panel-raise:#ffffff;
+  --sunk:#eeeae3;
+  --text:#1d1b22;
+  --text-2:#52505e;
+  --text-3:#8e8c9a;
+  --text-4:#bfbcc8;
+  --hair:rgba(29,27,34,.07);
+  --hair-2:rgba(29,27,34,.04);
+  --accent:#6c5ce7;
+  --accent-2:#a991ff;
+  --accent-soft:rgba(108,92,231,.08);
+  --accent-line:rgba(108,92,231,.18);
+  --peach:#e77c54;
+  --green:#16a34a;
+  --red:#dc2626;
+  --amber:#c87d18;
+  --shadow-xs:0 1px 1.5px rgba(29,27,34,.04);
+  --shadow-sm:0 1px 3px rgba(29,27,34,.04),0 8px 24px -12px rgba(29,27,34,.14);
+  --shadow-md:0 2px 6px rgba(29,27,34,.06),0 18px 38px -18px rgba(29,27,34,.22);
+  --inner-hi:inset 0 1px 0 rgba(255,255,255,.7);
+  --ring:0 0 0 3px rgba(108,92,231,.14);
+}
+html.dark{
+  --bg:#12121a;
+  --bg-tint:#0b0b12;
+  --panel:#1a1a24;
+  --panel-raise:#20202c;
+  --sunk:#15151e;
+  --text:#f1eef8;
+  --text-2:#a8a4b8;
+  --text-3:#7a7689;
+  --text-4:#4d4a5e;
+  --hair:rgba(255,255,255,.06);
+  --hair-2:rgba(255,255,255,.03);
+  --accent:#a991ff;
+  --accent-2:#c6b4ff;
+  --accent-soft:rgba(169,145,255,.1);
+  --accent-line:rgba(169,145,255,.2);
+  --peach:#ff9a73;
+  --green:#66e599;
+  --red:#ff6a7a;
+  --amber:#f2b45e;
+  --shadow-xs:0 1px 1.5px rgba(0,0,0,.5);
+  --shadow-sm:0 1px 3px rgba(0,0,0,.5),0 8px 28px -10px rgba(0,0,0,.7);
+  --shadow-md:0 2px 8px rgba(0,0,0,.55),0 22px 44px -18px rgba(0,0,0,.75);
+  --inner-hi:inset 0 1px 0 rgba(255,255,255,.05);
+  --ring:0 0 0 3px rgba(169,145,255,.22);
+}
+*{box-sizing:border-box;}
+html,body{margin:0;padding:0;height:100%;}
+body{
+  font-family:'Inter','Noto Sans KR',-apple-system,system-ui,sans-serif;
+  background:var(--bg);color:var(--text);
+  font-size:.8125rem;line-height:1.5;overflow:hidden;
+  -webkit-font-smoothing:antialiased;
+  font-feature-settings:"cv11","ss01";
+  transition:background .25s,color .25s;
+}
+
+/* ===== Subtle warm gradient on body ===== */
+body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
+  background:
+    radial-gradient(ellipse 800px 400px at 10% -10%,rgba(231,124,84,.08),transparent 60%),
+    radial-gradient(ellipse 700px 500px at 90% 120%,rgba(108,92,231,.06),transparent 60%);}
+html.dark body::before{background:
+    radial-gradient(ellipse 800px 400px at 10% -10%,rgba(255,154,115,.05),transparent 60%),
+    radial-gradient(ellipse 700px 500px at 90% 120%,rgba(169,145,255,.08),transparent 60%);}
+
+/* ===== SHELL ===== */
+.shell{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column;padding:10px;gap:10px;}
+
+/* ===== HEADER — 떠있는 카드 ===== */
+.hdr{display:flex;align-items:center;justify-content:space-between;
+  padding:0 .95rem;height:46px;flex-shrink:0;
+  background:var(--panel);border-radius:12px;box-shadow:var(--shadow-sm),var(--inner-hi);
+  border:1px solid var(--hair);}
+.hdr-l{display:flex;align-items:center;gap:1rem;}
+.logo-w{display:flex;align-items:center;gap:.45rem;}
+.logo-m{width:20px;height:20px;border-radius:6px;position:relative;overflow:hidden;
+  background:linear-gradient(135deg,var(--accent),var(--peach));
+  box-shadow:0 2px 8px -2px rgba(108,92,231,.5),inset 0 1px 0 rgba(255,255,255,.35);}
+html.dark .logo-m{box-shadow:0 2px 10px -2px rgba(169,145,255,.5),inset 0 1px 0 rgba(255,255,255,.2);}
+.logo-m::after{content:'';position:absolute;inset:4px;border-radius:2px;border:1.5px solid rgba(255,255,255,.95);border-right-color:transparent;border-bottom-color:transparent;}
+.logo{font-size:.88rem;font-weight:700;letter-spacing:-.025em;color:var(--text);}
+.bc{font-size:.74rem;color:var(--text-3);display:flex;align-items:center;gap:.45rem;}
+.bc .sep{color:var(--text-4);}
+.bc .cur{color:var(--text-2);font-weight:600;}
+
+.hdr-r{display:flex;align-items:center;gap:.5rem;}
+.kbd-hint{display:flex;align-items:center;gap:.3rem;font-size:.66rem;color:var(--text-3);padding:.25rem .5rem;
+  border-radius:6px;background:var(--sunk);border:1px solid var(--hair);}
+.kbd-hint kbd{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--text-2);font-weight:600;}
+.tt{display:flex;padding:2px;border-radius:8px;background:var(--sunk);border:1px solid var(--hair);}
+.tt button{padding:.25rem .6rem;border-radius:6px;border:none;background:transparent;color:var(--text-3);
+  font-family:inherit;font-size:.65rem;font-weight:600;cursor:pointer;letter-spacing:.01em;transition:all .15s;}
+.tt button.on{background:var(--panel-raise);color:var(--text);box-shadow:var(--shadow-xs);}
+.av{width:28px;height:28px;border-radius:50%;
+  background:linear-gradient(135deg,var(--accent) 0%,var(--peach) 100%);
+  color:white;display:flex;align-items:center;justify-content:center;font-size:.64rem;font-weight:700;
+  box-shadow:0 2px 8px -2px rgba(108,92,231,.4),var(--inner-hi);}
+html.dark .av{box-shadow:0 2px 10px -2px rgba(169,145,255,.4),var(--inner-hi);}
+
+/* ===== MAIN — 두 패널이 각각 떠있음 ===== */
+.main{flex:1;min-height:0;display:grid;grid-template-columns:312px 1fr;gap:10px;}
+
+/* ============ TREE PANE ============ */
+.tree-pane{display:flex;flex-direction:column;min-width:0;overflow:hidden;
+  background:var(--panel);border-radius:14px;border:1px solid var(--hair);
+  box-shadow:var(--shadow-sm),var(--inner-hi);}
+
+/* Title */
+.tp-top{padding:1rem 1rem .6rem;flex-shrink:0;}
+.tp-ttl{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.2rem;}
+.tp-ttl h3{margin:0;font-size:.92rem;font-weight:700;letter-spacing:-.02em;color:var(--text);}
+.tp-ttl .cnt{font-size:.66rem;color:var(--text-3);font-variant-numeric:tabular-nums;font-weight:500;}
+.tp-sub{font-size:.66rem;color:var(--text-3);}
+
+/* Type pills */
+.type-tabs{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--sunk);
+  border:1px solid var(--hair);margin:.1rem 1rem .7rem;flex-shrink:0;}
+.type-tab{flex:1;padding:.4rem .5rem;border-radius:6px;border:none;background:transparent;
+  font-family:inherit;font-size:.72rem;font-weight:600;color:var(--text-3);cursor:pointer;
+  display:flex;align-items:center;justify-content:center;gap:.4rem;transition:all .18s;letter-spacing:-.005em;}
+.type-tab:hover{color:var(--text-2);}
+.type-tab.on{color:var(--text);background:var(--panel-raise);box-shadow:var(--shadow-xs);}
+.type-tab .cnt{color:var(--text-3);font-variant-numeric:tabular-nums;font-size:.66rem;font-weight:500;}
+.type-tab.on .cnt{color:var(--accent);}
+
+/* Search */
+.tree-srch{position:relative;margin:0 1rem .7rem;flex-shrink:0;}
+.tree-srch svg{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--text-3);pointer-events:none;}
+.tree-srch input{width:100%;height:32px;padding:0 2.3rem 0 1.9rem;
+  border:1px solid var(--hair);border-radius:8px;background:var(--sunk);color:var(--text);
+  font-size:.73rem;font-family:inherit;outline:none;transition:all .15s;}
+.tree-srch input::placeholder{color:var(--text-3);}
+.tree-srch input:focus{border-color:var(--accent-line);background:var(--panel-raise);box-shadow:var(--ring);}
+.tree-srch .kb{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);
+  font-family:'JetBrains Mono',monospace;font-size:.56rem;padding:.1rem .32rem;
+  border-radius:4px;background:var(--panel-raise);color:var(--text-3);border:1px solid var(--hair);font-weight:600;}
+
+/* Tree body */
+.tree-body{flex:1;overflow-y:auto;padding:.15rem .55rem;}
+.tree-body::-webkit-scrollbar{width:6px;}
+.tree-body::-webkit-scrollbar-thumb{background:var(--text-4);border-radius:3px;opacity:.4;}
+
+.node{display:flex;align-items:center;gap:.4rem;padding:.36rem .55rem;cursor:pointer;
+  font-size:.74rem;color:var(--text-2);border-radius:7px;margin-bottom:1px;
+  transition:all .15s;position:relative;user-select:none;}
+.node:hover{background:var(--sunk);color:var(--text);}
+.node.sel{background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-line);}
+.node.sel .name{color:var(--accent);font-weight:600;}
+.node .caret{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;}
+.node .caret svg{width:8px;height:8px;transition:transform .18s cubic-bezier(.4,0,.2,1);}
+.node.open > .caret svg{transform:rotate(90deg);}
+.node.leaf .caret{opacity:0;}
+.node .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--text-4);}
+.node .dot.on{background:var(--green);box-shadow:0 0 0 2px rgba(22,163,74,.1);}
+html.dark .node .dot.on{background:var(--green);box-shadow:0 0 6px rgba(102,229,153,.3);}
+.node .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
+.node .meta{font-size:.6rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;
+  opacity:0;transition:opacity .15s;flex-shrink:0;max-width:130px;overflow:hidden;text-overflow:ellipsis;}
+.node:hover .meta,.node.sel .meta{opacity:.75;}
+
+.lvl-1{padding-left:.55rem;}
+.lvl-2{padding-left:1.55rem;}
+.lvl-3{padding-left:2.55rem;}
+
+.subtree{display:none;}
+.subtree.open{display:block;}
+
+/* Tree footer */
+.tree-ft{padding:.6rem .85rem;flex-shrink:0;border-top:1px solid var(--hair);}
+.tree-ft button{width:100%;height:32px;border-radius:8px;border:1px dashed var(--hair);background:transparent;
+  color:var(--text-2);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;
+  display:flex;align-items:center;justify-content:center;gap:.4rem;transition:all .2s;letter-spacing:-.005em;}
+.tree-ft button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);border-style:solid;}
+.tree-ft button svg{width:12px;height:12px;}
+
+/* ============ INSPECTOR PANE ============ */
+.insp{display:flex;flex-direction:column;min-width:0;overflow:hidden;
+  background:var(--panel);border-radius:14px;border:1px solid var(--hair);
+  box-shadow:var(--shadow-sm),var(--inner-hi);}
+
+/* Inspector header */
+.insp-hd{padding:1.05rem 1.4rem 1rem;flex-shrink:0;position:relative;
+  background:linear-gradient(180deg,var(--panel-raise),var(--panel));
+  border-bottom:1px solid var(--hair);border-radius:14px 14px 0 0;}
+.insp-path{display:flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--text-3);margin-bottom:.4rem;}
+.insp-path svg{width:9px;height:9px;color:var(--text-4);}
+.insp-path .cur{color:var(--accent);font-weight:600;}
+.insp-title-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
+.insp-title{display:flex;align-items:center;gap:.6rem;}
+.insp-title h2{margin:0;font-size:1.15rem;font-weight:700;letter-spacing:-.022em;color:var(--text);}
+.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .42rem;border-radius:5px;
+  font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
+  background:var(--sunk);color:var(--text-3);border:1px solid var(--hair);}
+.tag .td{width:5px;height:5px;border-radius:50%;background:var(--text-3);}
+.tag.on{color:var(--green);background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.18);}
+.tag.on .td{background:var(--green);}
+html.dark .tag.on{background:rgba(102,229,153,.08);border-color:rgba(102,229,153,.18);}
+.tag.scope{color:var(--peach);background:rgba(231,124,84,.08);border-color:rgba(231,124,84,.2);}
+.tag.scope .td{background:var(--peach);}
+html.dark .tag.scope{background:rgba(255,154,115,.08);border-color:rgba(255,154,115,.2);}
+
+.qck{display:flex;gap:.3rem;align-items:center;}
+.qck button{width:26px;height:26px;border-radius:6px;border:1px solid var(--hair);background:var(--panel);
+  color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
+.qck button:hover{border-color:var(--text-3);color:var(--text);background:var(--panel-raise);}
+.qck button svg{width:12px;height:12px;}
+
+/* Inspector body */
+.insp-body{flex:1;overflow-y:auto;padding:.25rem 1.4rem 1.5rem;}
+.insp-body::-webkit-scrollbar{width:8px;}
+.insp-body::-webkit-scrollbar-thumb{background:var(--text-4);border-radius:4px;opacity:.4;}
+
+.sect{padding:1.25rem 0;border-bottom:1px solid var(--hair-2);}
+.sect:last-child{border-bottom:none;}
+.sect-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.1rem;}
+.sect-ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
+  background:var(--accent-soft);color:var(--accent);flex-shrink:0;}
+.sect-ico svg{width:12px;height:12px;}
+.sect-hd{font-size:.8rem;font-weight:700;color:var(--text);letter-spacing:-.015em;}
+.sect-sub{font-size:.68rem;color:var(--text-3);margin:.1rem 0 .9rem 2.2rem;}
+
+.row{display:grid;grid-template-columns:130px 1fr;gap:1rem;align-items:center;padding:.42rem 0;padding-left:2.2rem;}
+.row.top{align-items:flex-start;}
+.row > label{font-size:.7rem;color:var(--text-2);font-weight:500;padding-top:.45rem;}
+.row.top > label{padding-top:.5rem;}
+.row > label .req{color:var(--red);font-weight:700;}
+.row > .val{min-width:0;}
+
+input.inp,select.inp,textarea.inp{width:100%;height:34px;padding:0 .75rem;
+  border:1px solid var(--hair);border-radius:8px;
+  background:var(--panel-raise);color:var(--text);font-size:.74rem;font-family:inherit;
+  outline:none;transition:all .15s;}
+html.dark input.inp,html.dark select.inp,html.dark textarea.inp{background:var(--sunk);}
+input.inp::placeholder,textarea.inp::placeholder{color:var(--text-3);}
+input.inp:hover,select.inp:hover,textarea.inp:hover{border-color:var(--text-4);}
+input.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--accent);background:var(--panel-raise);box-shadow:var(--ring);}
+input.inp[readonly]{background:var(--sunk);color:var(--text-3);cursor:default;}
+input.inp[readonly]:focus{box-shadow:none;border-color:var(--hair);}
+textarea.inp{height:auto;min-height:68px;padding:.5rem .75rem;resize:vertical;line-height:1.55;}
+.help{font-size:.66rem;color:var(--text-3);margin-top:.4rem;line-height:1.5;}
+
+select.inp{padding-right:2rem;appearance:none;-webkit-appearance:none;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8c9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+  background-repeat:no-repeat;background-position:right .6rem center;background-size:11px;}
+html.dark select.inp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7689' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");}
+
+/* Segmented */
+.seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--sunk);width:fit-content;
+  border:1px solid var(--hair);}
+.seg button{padding:.4rem .75rem;border:none;border-radius:6px;background:transparent;color:var(--text-3);
+  font-family:inherit;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s;
+  display:inline-flex;align-items:center;gap:.35rem;letter-spacing:-.005em;}
+.seg button:hover{color:var(--text-2);}
+.seg button.on{background:var(--panel-raise);color:var(--text);box-shadow:var(--shadow-xs);}
+.seg button.on svg{color:var(--accent);}
+.seg button svg{width:13px;height:13px;}
+
+/* Toggle */
+.tg{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;}
+.tg .sw{width:36px;height:20px;border-radius:999px;background:var(--text-4);position:relative;transition:background .25s;
+  box-shadow:inset 0 1px 2px rgba(29,27,34,.1);}
+html.dark .tg .sw{background:var(--text-4);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);}
+.tg .sw::after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;
+  top:2px;left:2px;transition:left .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.08);}
+.tg.on .sw{background:var(--accent);}
+.tg.on .sw::after{left:18px;}
+.tg .tg-l{font-size:.72rem;color:var(--text-2);font-weight:500;}
+.tg.on .tg-l{color:var(--text);font-weight:600;}
+
+.mono{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--text-3);letter-spacing:0;}
+
+/* Inspector footer */
+.insp-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  padding:.85rem 1.4rem;flex-shrink:0;border-top:1px solid var(--hair);
+  background:linear-gradient(180deg,var(--panel),var(--sunk));border-radius:0 0 14px 14px;}
+.insp-ft-l{display:flex;gap:.4rem;}
+.insp-ft-r{display:flex;gap:.4rem;align-items:center;}
+.unsaved{display:inline-flex;align-items:center;gap:.35rem;font-size:.66rem;color:var(--amber);font-weight:600;margin-right:.35rem;}
+.unsaved .d{width:6px;height:6px;border-radius:50%;background:var(--amber);
+  animation:pulse 1.6s ease-in-out infinite;}
+@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
+
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
+  height:32px;padding:0 .95rem;border-radius:8px;border:1px solid var(--hair);
+  background:var(--panel-raise);color:var(--text-2);
+  font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .18s;outline:none;
+  box-shadow:var(--shadow-xs),var(--inner-hi);}
+.btn:hover{border-color:var(--text-3);color:var(--text);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
+.btn:active{transform:translateY(0);}
+.btn svg{width:12px;height:12px;}
+.btn.primary{background:linear-gradient(180deg,var(--accent),#5a4cd1);color:white;border-color:transparent;
+  box-shadow:0 2px 6px -1px rgba(108,92,231,.4),inset 0 1px 0 rgba(255,255,255,.25);}
+html.dark .btn.primary{background:linear-gradient(180deg,var(--accent),#8d78e8);
+  box-shadow:0 2px 10px -1px rgba(169,145,255,.4),inset 0 1px 0 rgba(255,255,255,.15);}
+.btn.primary:hover{color:white;transform:translateY(-1px);
+  box-shadow:0 4px 14px -2px rgba(108,92,231,.5),inset 0 1px 0 rgba(255,255,255,.25);}
+html.dark .btn.primary:hover{box-shadow:0 4px 16px -2px rgba(169,145,255,.5),inset 0 1px 0 rgba(255,255,255,.15);}
+.btn.danger{color:var(--red);}
+.btn.danger:hover{border-color:var(--red);background:rgba(220,38,38,.06);color:var(--red);}
+.btn.ghost{border-color:transparent;background:transparent;box-shadow:none;}
+.btn.ghost:hover{background:var(--sunk);border-color:var(--hair);color:var(--text);transform:none;box-shadow:none;}
+.btn.sm{height:28px;padding:0 .65rem;font-size:.66rem;}
+
+@media(max-width:820px){
+  .shell{padding:6px;gap:6px;}
+  .main{grid-template-columns:1fr;}
+  .tree-pane{max-height:42vh;}
+}
+</style>
+</head>
+<body>
+
+<div class="shell">
+
+  <header class="hdr">
+    <div class="hdr-l">
+      <div class="logo-w">
+        <div class="logo-m"></div>
+        <div class="logo">INVYONE</div>
+      </div>
+      <div class="bc">
+        <span>관리자</span><span class="sep">/</span><span>시스템</span><span class="sep">/</span><span class="cur">메뉴 관리</span>
+      </div>
+    </div>
+    <div class="hdr-r">
+      <div class="kbd-hint"><span>검색</span><kbd>⌘K</kbd></div>
+      <div class="tt">
+        <button id="th-l" class="on" onclick="setTheme('light')">LIGHT</button>
+        <button id="th-d" onclick="setTheme('dark')">DARK</button>
+      </div>
+      <div class="av">GP</div>
+    </div>
+  </header>
+
+  <main class="main">
+
+    <aside class="tree-pane">
+      <div class="tp-top">
+        <div class="tp-ttl">
+          <h3>메뉴</h3>
+          <span class="cnt">· 55개</span>
+        </div>
+        <div class="tp-sub">스코프를 선택하고 트리에서 항목을 편집하세요</div>
+      </div>
+
+      <div class="type-tabs">
+        <button class="type-tab on" onclick="selType(this)">관리자 <span class="cnt">37</span></button>
+        <button class="type-tab" onclick="selType(this)">사용자 <span class="cnt">18</span></button>
+      </div>
+
+      <div class="tree-srch">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        <input placeholder="검색…"/>
+        <span class="kb">⌘K</span>
+      </div>
+
+      <div class="tree-body">
+
+        <div class="node lvl-1 open" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">시스템</span>
+          <span class="meta">10</span>
+        </div>
+        <div class="subtree open">
+          <div class="node lvl-2 leaf sel" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">메뉴 관리</span><span class="meta">/admin/menu</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">사용자 관리</span><span class="meta">/admin/userMng</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot"></span>
+            <span class="name">화면 관리</span><span class="meta">/admin/screenMng</span>
+          </div>
+          <div class="node lvl-2 open" onclick="toggleNode(this)">
+            <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+            <span class="dot on"></span>
+            <span class="name">공통 코드</span><span class="meta">3</span>
+          </div>
+          <div class="subtree open">
+            <div class="node lvl-3 leaf" onclick="selNode(this,event)">
+              <span class="caret"></span><span class="dot on"></span>
+              <span class="name">코드 그룹</span><span class="meta">/admin/code/groups</span>
+            </div>
+            <div class="node lvl-3 leaf" onclick="selNode(this,event)">
+              <span class="caret"></span><span class="dot on"></span>
+              <span class="name">코드 값</span><span class="meta">/admin/code/values</span>
+            </div>
+            <div class="node lvl-3 leaf" onclick="selNode(this,event)">
+              <span class="caret"></span><span class="dot"></span>
+              <span class="name">다국어</span><span class="meta">/admin/i18n</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="node lvl-1" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">업무</span><span class="meta">12</span>
+        </div>
+        <div class="subtree">
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">수주</span><span class="meta">/biz/orders</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">생산</span><span class="meta">/biz/production</span>
+          </div>
+        </div>
+
+        <div class="node lvl-1" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">AI Assistant</span><span class="meta">5</span>
+        </div>
+        <div class="subtree">
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">대시보드</span><span class="meta">/ai/dashboard</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">채팅</span><span class="meta">/ai/chat</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot"></span>
+            <span class="name">API 키</span><span class="meta">/ai/keys</span>
+          </div>
+        </div>
+
+        <div class="node lvl-1" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">리포트</span><span class="meta">7</span>
+        </div>
+        <div class="subtree">
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">생산 리포트</span><span class="meta">/report/production</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">품질 리포트</span><span class="meta">/report/quality</span>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="tree-ft">
+        <button>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+          새 메뉴 추가
+        </button>
+      </div>
+    </aside>
+
+    <section class="insp">
+
+      <div class="insp-hd">
+        <div class="insp-path">
+          <span>관리자</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg>
+          <span>시스템</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg>
+          <span class="cur">메뉴 관리</span>
+        </div>
+        <div class="insp-title-row">
+          <div class="insp-title">
+            <h2>메뉴 관리</h2>
+            <span class="tag on"><span class="td"></span>Active</span>
+            <span class="tag scope"><span class="td"></span>공용 *</span>
+            <span class="tag">L2</span>
+          </div>
+          <div class="qck">
+            <button title="미리보기"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg></button>
+            <button title="공유"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg></button>
+            <button title="히스토리"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg></button>
+          </div>
+        </div>
+      </div>
+
+      <div class="insp-body">
+
+        <div class="sect">
+          <div class="sect-head">
+            <span class="sect-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 7h16M4 12h16M4 17h10"/></svg></span>
+            <span class="sect-hd">기본 정보</span>
+          </div>
+          <div class="sect-sub">메뉴 이름과 다국어 키, 설명을 입력합니다.</div>
+          <div class="row">
+            <label>메뉴명<span class="req">*</span></label>
+            <div class="val"><input class="inp" value="메뉴 관리"/></div>
+          </div>
+          <div class="row">
+            <label>다국어 키</label>
+            <div class="val">
+              <select class="inp">
+                <option>menu.management</option>
+                <option>user.management</option>
+                <option>screen.management</option>
+              </select>
+            </div>
+          </div>
+          <div class="row top">
+            <label>설명</label>
+            <div class="val"><textarea class="inp">시스템 메뉴 트리를 관리하고 화면을 할당합니다</textarea></div>
+          </div>
+        </div>
+
+        <div class="sect">
+          <div class="sect-head">
+            <span class="sect-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg></span>
+            <span class="sect-hd">연결</span>
+          </div>
+          <div class="sect-sub">메뉴 클릭 시 어떤 콘텐츠로 이동할지 결정합니다.</div>
+          <div class="row">
+            <label>유형</label>
+            <div class="val">
+              <div class="seg">
+                <button class="on" onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M3 9h18M9 21V9"/></svg>
+                  화면
+                </button>
+                <button onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
+                  대시보드
+                </button>
+                <button onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/></svg>
+                  POP
+                </button>
+                <button onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>
+                  URL
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <label>화면 / URL</label>
+            <div class="val"><input class="inp" value="/admin/menu"/></div>
+          </div>
+          <div class="row">
+            <label>아이콘</label>
+            <div class="val"><input class="inp" value="Menu" placeholder="Lucide 아이콘 이름"/></div>
+          </div>
+        </div>
+
+        <div class="sect">
+          <div class="sect-head">
+            <span class="sect-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="m2 17 10 5 10-5M2 12l10 5 10-5"/></svg></span>
+            <span class="sect-hd">스코프 &amp; 표시</span>
+          </div>
+          <div class="sect-sub">어느 회사에 보이고, 어느 위치에 나타날지 설정합니다.</div>
+          <div class="row">
+            <label>회사</label>
+            <div class="val">
+              <select class="inp">
+                <option>공용 (*)</option>
+                <option>덕일하이텍</option>
+                <option>비엑스플로러</option>
+              </select>
+              <div class="help">하위 메뉴는 상위 스코프를 상속합니다.</div>
+            </div>
+          </div>
+          <div class="row">
+            <label>부모</label>
+            <div class="val"><input class="inp" value="시스템" readonly/></div>
+          </div>
+          <div class="row">
+            <label>순서</label>
+            <div class="val"><input class="inp" type="number" value="1" style="width:120px;"/></div>
+          </div>
+          <div class="row">
+            <label>상태</label>
+            <div class="val">
+              <label class="tg on" onclick="this.classList.toggle('on')">
+                <span class="sw"></span>
+                <span class="tg-l">활성</span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div class="sect">
+          <div class="sect-head">
+            <span class="sect-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span>
+            <span class="sect-hd">메타</span>
+          </div>
+          <div class="row">
+            <label>OBJID</label>
+            <div class="val"><span class="mono">mnu_00231</span></div>
+          </div>
+          <div class="row">
+            <label>수정</label>
+            <div class="val"><span class="mono">2026-04-12 14:23 · gbpark</span></div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="insp-ft">
+        <div class="insp-ft-l">
+          <button class="btn danger sm">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
+            삭제
+          </button>
+          <button class="btn ghost sm">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            복사
+          </button>
+        </div>
+        <div class="insp-ft-r">
+          <span class="unsaved"><span class="d"></span>저장되지 않음</span>
+          <button class="btn ghost">되돌리기</button>
+          <button class="btn primary">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12l5 5L20 7"/></svg>
+            저장
+          </button>
+        </div>
+      </div>
+
+    </section>
+
+  </main>
+</div>
+
+<script>
+function setTheme(t){
+  document.documentElement.classList.toggle('dark',t==='dark');
+  document.getElementById('th-l').classList.toggle('on',t==='light');
+  document.getElementById('th-d').classList.toggle('on',t==='dark');
+}
+function selType(el){el.parentElement.querySelectorAll('.type-tab').forEach(c=>c.classList.remove('on'));el.classList.add('on');}
+function selSeg(el){el.parentElement.querySelectorAll('button').forEach(c=>c.classList.remove('on'));el.classList.add('on');}
+function toggleNode(el){
+  el.classList.toggle('open');
+  const st=el.nextElementSibling;
+  if(st && st.classList.contains('subtree'))st.classList.toggle('open');
+}
+function selNode(el,e){
+  e.stopPropagation();
+  document.querySelectorAll('.node').forEach(n=>n.classList.remove('sel'));
+  el.classList.add('sel');
+  const name=el.querySelector('.name').textContent;
+  const url=el.querySelector('.meta').textContent;
+  document.querySelector('.insp-title h2').textContent=name;
+  document.querySelector('.insp-path .cur').textContent=name;
+  const inputs=document.querySelectorAll('.insp-body input.inp');
+  if(inputs[0])inputs[0].value=name;
+  if(inputs[2])inputs[2].value=url;
+}
+document.addEventListener('keydown',e=>{
+  if((e.metaKey||e.ctrlKey)&&e.key==='k'){e.preventDefault();document.querySelector('.tree-srch input').focus();}
+});
+</script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-04-15-menu-mng-v5-mockup-c.html b/notes/gbpark/2026-04-15-menu-mng-v5-mockup-c.html
new file mode 100644
index 00000000..28343514
--- /dev/null
+++ b/notes/gbpark/2026-04-15-menu-mng-v5-mockup-c.html
@@ -0,0 +1,990 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>INVYONE — 메뉴 관리 (C · Cascade, 심플 v3)</title>
+<style>
+:root{
+  --bg:#ffffff;
+  --text:#18181b;
+  --text-2:#52525b;
+  --text-3:#8e8c9a;
+  --text-4:#c7c5d3;
+  --border:#e6e4ec;
+  --border-2:#efedf3;
+  --sunk:#f6f5f9;
+  --accent:#6c5ce7;
+  --accent-soft:rgba(108,92,231,.08);
+  --accent-line:rgba(108,92,231,.2);
+  --green:#16a34a;
+  --red:#dc2626;
+  --amber:#d97706;
+  --ring:rgba(108,92,231,.16);
+}
+html.dark{
+  --bg:#0a0a12;
+  --text:#f3f2fa;
+  --text-2:#a5a3b8;
+  --text-3:#787689;
+  --text-4:#4a4859;
+  --border:#1e1d28;
+  --border-2:#161620;
+  --sunk:#13131c;
+  --accent:#a991ff;
+  --accent-soft:rgba(169,145,255,.09);
+  --accent-line:rgba(169,145,255,.22);
+  --green:#66e599;
+  --red:#ff6a7a;
+  --amber:#f2b45e;
+  --ring:rgba(169,145,255,.2);
+}
+*{box-sizing:border-box;}
+html,body{margin:0;padding:0;height:100%;}
+body{
+  font-family:'Inter','Noto Sans KR',-apple-system,system-ui,sans-serif;
+  background:var(--bg);color:var(--text);font-size:.875rem;line-height:1.5;overflow:hidden;
+  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";transition:background .2s;
+}
+.shell{height:100vh;display:flex;flex-direction:column;}
+
+/* ===== HEADER ===== */
+.hdr{display:flex;align-items:center;justify-content:space-between;
+  padding:0 1rem;height:46px;flex-shrink:0;
+  background:var(--bg);border-bottom:1px solid var(--border);}
+.hdr-l{display:flex;align-items:center;gap:1rem;min-width:0;}
+.logo{font-size:.88rem;font-weight:700;letter-spacing:-.025em;color:var(--accent);flex-shrink:0;}
+.path{display:flex;align-items:center;gap:.15rem;font-size:.73rem;min-width:0;overflow-x:auto;}
+.path::-webkit-scrollbar{display:none;}
+.path-seg{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:5px;
+  color:var(--text-3);white-space:nowrap;cursor:pointer;transition:all .12s;font-weight:500;}
+.path-seg:hover{background:var(--sunk);color:var(--text);}
+.path-seg.cur{color:var(--text);background:var(--accent-soft);font-weight:600;}
+.path-seg .step-n{font-family:'JetBrains Mono',monospace;font-size:.56rem;color:var(--text-3);font-weight:700;margin-right:.15rem;}
+.path-seg.cur .step-n{color:var(--accent);}
+.path-sep{color:var(--text-4);font-weight:300;flex-shrink:0;}
+
+.hdr-r{display:flex;align-items:center;gap:.45rem;flex-shrink:0;}
+.ghost-btn{display:inline-flex;align-items:center;gap:.3rem;height:28px;padding:0 .65rem;border-radius:6px;
+  border:1px solid var(--border);background:transparent;color:var(--text-2);font-family:inherit;
+  font-size:.7rem;font-weight:500;cursor:pointer;transition:all .15s;}
+.ghost-btn:hover{border-color:var(--text-3);color:var(--text);}
+.ghost-btn svg{width:11px;height:11px;}
+.ghost-btn kbd{font-family:'JetBrains Mono',monospace;font-size:.56rem;padding:.05rem .28rem;border-radius:3px;
+  background:var(--sunk);color:var(--text-3);border:1px solid var(--border);font-weight:600;margin-left:.25rem;}
+.tt{display:flex;padding:2px;border-radius:6px;background:var(--sunk);}
+.tt button{padding:.18rem .55rem;border-radius:4px;border:none;background:transparent;color:var(--text-3);
+  font-family:inherit;font-size:.62rem;font-weight:600;cursor:pointer;letter-spacing:.02em;}
+.tt button.on{background:var(--bg);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06);}
+html.dark .tt button.on{background:var(--sunk);box-shadow:0 1px 2px rgba(0,0,0,.3);}
+.av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:white;
+  display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;}
+
+/* ===== CASCADE ===== */
+.cascade{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;}
+.cascade::-webkit-scrollbar{height:8px;}
+.cascade::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
+
+.col{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border);background:var(--bg);
+  animation:colIn .35s cubic-bezier(.16,1,.3,1);}
+@keyframes colIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
+
+.col-hd{padding:1rem 1rem .6rem;flex-shrink:0;}
+.step-lbl{display:inline-flex;align-items:center;gap:.35rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;
+  color:var(--text-3);font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
+.step-lbl .num{padding:.06rem .32rem;border-radius:3px;background:var(--sunk);border:1px solid var(--border);color:var(--accent);}
+.col-hd h3{margin:.3rem 0 .1rem;font-size:.95rem;font-weight:700;letter-spacing:-.018em;}
+.col-hd p{margin:0;font-size:.64rem;color:var(--text-3);}
+
+/* ========= COL 1 : SCOPE — 큰 카드 세로 2개 (심플) ========= */
+.col-scope{width:280px;min-width:280px;background:var(--sunk);}
+.scope-list{padding:.3rem .6rem 1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;overflow-y:auto;}
+.scope-card{display:flex;flex-direction:column;gap:.5rem;padding:.85rem;border-radius:10px;
+  background:var(--bg);border:1px solid var(--border);cursor:pointer;transition:all .15s;}
+.scope-card:hover{border-color:var(--accent-line);}
+.scope-card.sel{background:var(--accent-soft);border-color:var(--accent);}
+.scope-top{display:flex;align-items:center;justify-content:space-between;}
+.scope-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
+  background:var(--sunk);color:var(--text-2);border:1px solid var(--border-2);}
+.scope-card.sel .scope-ico{background:var(--accent);color:white;border-color:transparent;}
+.scope-ico svg{width:15px;height:15px;}
+.scope-cnt{font-size:1.1rem;font-weight:800;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums;}
+.scope-card.sel .scope-cnt{color:var(--accent);}
+.scope-name{font-size:.82rem;font-weight:700;letter-spacing:-.01em;color:var(--text);}
+.scope-desc{font-size:.62rem;color:var(--text-3);line-height:1.4;}
+
+/* ========= COL 2 : TREE (L1 > L2 > L3 아코디언) ========= */
+.col-l1{width:400px;min-width:400px;background:var(--bg);}
+.col-l1 .col-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;}
+.col-l1 .col-hd > div:first-child{min-width:0;}
+.col-l1 .add-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:var(--bg);
+  color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;}
+.col-l1 .add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}
+.col-l1 .add-btn svg{width:12px;height:12px;}
+
+.tree-srch-wrap{padding:.2rem .75rem .55rem;flex-shrink:0;position:relative;}
+.tree-srch-wrap svg.s{position:absolute;left:1.3rem;top:50%;transform:translateY(-50%);width:11px;height:11px;color:var(--text-3);pointer-events:none;}
+.tree-srch-wrap input{width:100%;height:28px;padding:0 .55rem 0 1.85rem;border:1px solid var(--border);border-radius:6px;
+  background:var(--sunk);color:var(--text);font-size:.68rem;font-family:inherit;outline:none;transition:all .12s;}
+.tree-srch-wrap input:focus{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 2px var(--ring);}
+
+.tree-list{padding:.15rem .4rem 1rem;flex:1;overflow-y:auto;display:flex;flex-direction:column;}
+
+/* Tree node row */
+.t-row{display:flex;align-items:center;gap:.45rem;padding:.42rem .55rem;border-radius:6px;margin:1px .15rem;
+  cursor:pointer;transition:all .12s;position:relative;user-select:none;}
+.t-row:hover{background:var(--sunk);}
+.t-row.sel{background:var(--accent-soft);}
+.t-row.sel .t-name{color:var(--accent);font-weight:600;}
+.t-caret{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;border-radius:3px;transition:all .1s;}
+.t-caret:hover{background:var(--bg);color:var(--text);}
+.t-caret svg{width:9px;height:9px;transition:transform .18s cubic-bezier(.4,0,.2,1);}
+.t-row.open > .t-caret svg{transform:rotate(90deg);}
+.t-row.leaf .t-caret{opacity:0;pointer-events:none;}
+
+.t-ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
+  background:var(--sunk);color:var(--text-2);flex-shrink:0;border:1px solid var(--border-2);}
+.t-row.sel .t-ico{background:var(--accent);color:white;border-color:transparent;}
+.t-ico svg{width:12px;height:12px;}
+
+.t-body{flex:1;min-width:0;display:flex;flex-direction:column;}
+.t-name{font-size:.72rem;font-weight:500;color:var(--text);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.t-meta{font-size:.56rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.05rem;}
+
+.t-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--text-4);}
+.t-dot.on{background:var(--green);}
+
+.t-cnt{font-size:.58rem;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;flex-shrink:0;
+  padding:.08rem .4rem;border-radius:4px;background:var(--sunk);border:1px solid var(--border-2);}
+.t-row.sel .t-cnt{color:var(--accent);background:var(--bg);border-color:var(--accent-line);}
+
+/* L1: 크게 강조 */
+.t-row.l1{padding:.8rem .85rem;border-radius:10px;background:var(--bg);border:1px solid var(--border);margin:.35rem .15rem .12rem;gap:.65rem;}
+.t-row.l1:hover{border-color:var(--accent-line);background:var(--accent-soft);}
+.t-row.l1.sel{border-color:var(--accent);background:var(--accent-soft);}
+.t-row.l1 .t-caret{width:16px;height:16px;}
+.t-row.l1 .t-caret svg{width:10px;height:10px;}
+.t-row.l1 .t-ico{width:34px;height:34px;border-radius:9px;}
+.t-row.l1 .t-ico svg{width:16px;height:16px;}
+.t-row.l1 .t-name{font-size:.88rem;font-weight:700;letter-spacing:-.015em;}
+.t-row.l1.sel .t-name{font-weight:700;color:var(--accent);}
+.t-row.l1 .t-cnt{font-size:.64rem;padding:.15rem .5rem;font-weight:700;}
+
+/* L2,L3: 컴팩트 + connector line */
+.t-row.l2{padding-left:1.9rem;}
+.t-row.l3{padding-left:3rem;}
+.t-row.l2::before{content:'';position:absolute;left:1.3rem;top:0;bottom:0;width:1px;background:var(--border-2);}
+.t-row.l2::after{content:'';position:absolute;left:1.3rem;top:50%;width:.4rem;height:1px;background:var(--border);}
+.t-row.l3::before{content:'';position:absolute;left:2.4rem;top:0;bottom:0;width:1px;background:var(--border-2);}
+.t-row.l3::after{content:'';position:absolute;left:2.4rem;top:50%;width:.4rem;height:1px;background:var(--border);}
+/* 마지막 L2 밑 세로 라인 짧게 */
+.t-sub > .t-row:last-child.l2::before{bottom:50%;}
+.t-sub-inner > .t-row:last-child.l3::before{bottom:50%;}
+
+.t-sub{display:none;}
+.t-row.open + .t-sub{display:block;animation:tsIn .22s cubic-bezier(.16,1,.3,1);}
+.t-sub-inner{display:none;}
+.t-row.open + .t-sub-inner{display:block;animation:tsIn .22s cubic-bezier(.16,1,.3,1);}
+@keyframes tsIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
+
+/* ========= COL 3 : TABBED VIEW (Tree / Overview / Activity) ========= */
+.col-preview{flex:1;min-width:460px;background:var(--sunk);display:flex;flex-direction:column;overflow:hidden;}
+.prev-wrap{padding:1.2rem 1.4rem 2rem;max-width:820px;flex:1;overflow-y:auto;}
+
+/* View tabs — Col 3 최상단 */
+.view-tabs{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  padding:.65rem 1.4rem;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;}
+.vt-list{display:flex;padding:3px;border-radius:8px;background:var(--sunk);border:1px solid var(--border);}
+.vt-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border:none;border-radius:5px;
+  background:transparent;color:var(--text-3);font-family:inherit;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .12s;}
+.vt-btn:hover{color:var(--text-2);}
+.vt-btn.on{background:var(--bg);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.05);}
+html.dark .vt-btn.on{background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.4);}
+.vt-btn svg{width:12px;height:12px;}
+.vt-btn .cnt{font-variant-numeric:tabular-nums;color:var(--text-3);font-size:.6rem;font-weight:500;margin-left:.15rem;}
+.vt-btn.on .cnt{color:var(--accent);}
+.vt-right{display:flex;align-items:center;gap:.35rem;}
+
+.view-pane{display:none;}
+.view-pane.on{display:block;}
+
+/* ===== SETTINGS VIEW ===== */
+.sv-hero{padding-bottom:1.2rem;margin-bottom:.6rem;border-bottom:1px solid var(--border);}
+.sv-hero-top{display:flex;align-items:center;gap:.8rem;}
+.sv-hero-ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;
+  background:var(--accent);color:white;flex-shrink:0;box-shadow:0 2px 8px -2px rgba(108,92,231,.35);}
+html.dark .sv-hero-ico{color:#0a0a12;box-shadow:0 2px 10px -2px rgba(169,145,255,.35);}
+.sv-hero-ico svg{width:20px;height:20px;}
+.sv-hero-info{flex:1;min-width:0;}
+.sv-hero-path{font-size:.7rem;color:var(--text-3);margin-bottom:.2rem;}
+.sv-hero-path b{color:var(--text-2);font-weight:600;}
+.sv-hero-info h2{margin:0;font-size:1.4rem;font-weight:700;letter-spacing:-.025em;display:flex;align-items:center;gap:.55rem;}
+.sv-hero-tags{display:flex;gap:.35rem;}
+.sv-hero-meta{margin-top:.6rem;font-size:.66rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;display:flex;gap:1.2rem;}
+.sv-hero-meta b{color:var(--text-2);font-weight:600;}
+
+.sv-grid{display:grid;grid-template-columns:240px 1fr;gap:2rem;padding:1.5rem 0;border-bottom:1px solid var(--border-2);}
+.sv-grid:last-of-type{border-bottom:none;}
+.sv-side h4{margin:0 0 .35rem;font-size:.9rem;font-weight:700;letter-spacing:-.015em;color:var(--text);}
+.sv-side p{margin:0;font-size:.7rem;color:var(--text-3);line-height:1.55;}
+.sv-fields{display:flex;flex-direction:column;gap:.85rem;max-width:600px;}
+
+.sv-row{display:flex;flex-direction:column;gap:.35rem;}
+.sv-row label{font-size:.68rem;color:var(--text-2);font-weight:600;letter-spacing:-.005em;}
+.sv-row label .req{color:var(--red);}
+.sv-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
+.sv-row .help{font-size:.64rem;color:var(--text-3);line-height:1.5;}
+
+.sv input.inp,.sv select.inp,.sv textarea.inp{width:100%;height:36px;padding:0 .85rem;
+  border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);
+  font-size:.78rem;font-family:inherit;outline:none;transition:all .15s;}
+html.dark .sv input.inp,html.dark .sv select.inp,html.dark .sv textarea.inp{background:var(--sunk);}
+.sv input.inp:focus,.sv select.inp:focus,.sv textarea.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);}
+.sv input.inp[readonly]{background:var(--sunk);color:var(--text-3);}
+.sv textarea.inp{height:auto;min-height:72px;padding:.55rem .85rem;resize:vertical;line-height:1.55;}
+.sv select.inp{padding-right:2rem;appearance:none;-webkit-appearance:none;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8c9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+  background-repeat:no-repeat;background-position:right .65rem center;background-size:12px;}
+html.dark .sv select.inp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23787689' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");}
+
+.sv-seg{display:inline-flex;padding:3px;border-radius:9px;background:var(--sunk);border:1px solid var(--border);width:fit-content;}
+.sv-seg button{padding:.45rem .9rem;border:none;border-radius:6px;background:transparent;color:var(--text-3);
+  font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.35rem;}
+.sv-seg button.on{background:var(--bg);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.05);}
+html.dark .sv-seg button.on{background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.4);}
+.sv-seg button.on svg{color:var(--accent);}
+.sv-seg button svg{width:13px;height:13px;}
+
+.sv-tg{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;user-select:none;}
+.sv-tg .sw{width:38px;height:22px;border-radius:999px;background:var(--text-4);position:relative;transition:background .2s;
+  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
+.sv-tg .sw::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;
+  transition:left .22s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px rgba(0,0,0,.2);}
+.sv-tg.on .sw{background:var(--accent);}
+.sv-tg.on .sw::after{left:18px;}
+.sv-tg .tg-l{font-size:.76rem;color:var(--text-2);font-weight:500;}
+.sv-tg.on .tg-l{color:var(--text);font-weight:600;}
+
+.sv-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  padding:1.2rem 0 .5rem;margin-top:1rem;border-top:1px solid var(--border);}
+.sv-ft-l{display:flex;gap:.4rem;}
+.sv-ft-r{display:flex;gap:.4rem;align-items:center;}
+.sv-ft-r .unsaved{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--amber);font-weight:600;margin-right:.35rem;}
+.sv-ft-r .unsaved .d{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:pulse 1.6s ease-in-out infinite;}
+@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
+
+.sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
+  height:34px;padding:0 1rem;border-radius:8px;border:1px solid var(--border);
+  background:var(--bg);color:var(--text-2);font-family:inherit;font-size:.74rem;font-weight:600;
+  cursor:pointer;transition:all .15s;outline:none;}
+.sv-btn:hover{border-color:var(--text-3);color:var(--text);}
+.sv-btn svg{width:13px;height:13px;}
+.sv-btn.primary{background:var(--accent);color:white;border-color:var(--accent);
+  box-shadow:0 2px 6px -1px rgba(108,92,231,.35),inset 0 1px 0 rgba(255,255,255,.22);}
+.sv-btn.primary:hover{background:#5c4ed4;border-color:#5c4ed4;color:white;transform:translateY(-1px);
+  box-shadow:0 4px 12px -2px rgba(108,92,231,.4),inset 0 1px 0 rgba(255,255,255,.22);}
+html.dark .sv-btn.primary{color:#0a0a12;box-shadow:0 2px 10px -1px rgba(169,145,255,.35);}
+html.dark .sv-btn.primary:hover{background:#b8b2ff;border-color:#b8b2ff;color:#0a0a12;}
+.sv-btn.danger{color:var(--red);}
+.sv-btn.danger:hover{border-color:var(--red);background:rgba(220,38,38,.05);color:var(--red);}
+
+/* ===== TREE VIEW ===== */
+.tree-hero{margin-bottom:1rem;}
+.tree-hero h2{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.022em;display:flex;align-items:baseline;gap:.5rem;}
+.tree-hero h2 .size{font-size:.72rem;color:var(--text-3);font-weight:500;}
+.tree-hero .sub{font-size:.66rem;color:var(--text-3);margin-top:.3rem;}
+
+.tree-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.75rem;}
+.tree-bar-l{display:flex;gap:.35rem;}
+.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:5px;
+  font-size:.62rem;font-weight:600;color:var(--text-2);background:var(--bg);border:1px solid var(--border);cursor:pointer;transition:all .12s;}
+.chip:hover{border-color:var(--text-3);color:var(--text);}
+.chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);}
+.chip svg{width:11px;height:11px;}
+.tree-search{position:relative;}
+.tree-search svg{position:absolute;left:.55rem;top:50%;transform:translateY(-50%);width:11px;height:11px;color:var(--text-3);pointer-events:none;}
+.tree-search input{height:28px;width:200px;padding:0 .6rem 0 1.7rem;border:1px solid var(--border);border-radius:6px;
+  background:var(--bg);color:var(--text);font-size:.68rem;font-family:inherit;outline:none;transition:all .12s;}
+.tree-search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);}
+
+.tree{background:var(--bg);border:1px solid var(--border);border-radius:11px;overflow:hidden;}
+.tree-head{display:grid;grid-template-columns:1fr 120px 80px 70px;gap:.5rem;padding:.5rem .9rem;
+  border-bottom:1px solid var(--border);background:var(--sunk);
+  font-size:.5rem;font-weight:800;color:var(--text-3);letter-spacing:.14em;text-transform:uppercase;}
+.tree-body{padding:.25rem .3rem .4rem;}
+
+.tn{display:grid;grid-template-columns:1fr 120px 80px 70px;gap:.5rem;align-items:center;
+  padding:.4rem .6rem;margin:1px .2rem;border-radius:6px;cursor:pointer;transition:all .12s;position:relative;font-size:.72rem;}
+.tn:hover{background:var(--sunk);}
+.tn.sel{background:var(--accent-soft);}
+.tn.sel .tn-name{color:var(--accent);font-weight:600;}
+.tn-name-wrap{display:flex;align-items:center;gap:.4rem;min-width:0;position:relative;}
+.tn-caret{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;border-radius:3px;transition:all .12s;}
+.tn-caret:hover{background:var(--sunk);color:var(--text);}
+.tn-caret svg{width:9px;height:9px;transition:transform .18s cubic-bezier(.4,0,.2,1);}
+.tn.open > .tn-name-wrap > .tn-caret svg{transform:rotate(90deg);}
+.tn.leaf .tn-caret{opacity:0;}
+.tn-ico{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;
+  background:var(--sunk);color:var(--text-2);flex-shrink:0;}
+.tn.sel .tn-ico{background:var(--accent);color:white;}
+.tn-ico svg{width:11px;height:11px;}
+.tn-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500;}
+.tn-url{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.tn-url.empty{color:var(--text-4);font-style:italic;}
+.tn-status{display:inline-flex;align-items:center;gap:.3rem;font-size:.58rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
+.tn-status .d{width:5px;height:5px;border-radius:50%;background:var(--text-4);}
+.tn-status.on{color:var(--green);}
+.tn-status.on .d{background:var(--green);}
+.tn-act{display:flex;gap:.15rem;justify-content:flex-end;opacity:0;transition:opacity .12s;}
+.tn:hover .tn-act,.tn.sel .tn-act{opacity:1;}
+.tn-act button{width:22px;height:22px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;}
+.tn-act button:hover{border-color:var(--border);color:var(--text);background:var(--bg);}
+.tn-act button svg{width:11px;height:11px;}
+
+/* indentation + connector lines */
+.tn.lvl-1{padding-left:.6rem;}
+.tn.lvl-2{padding-left:1.6rem;}
+.tn.lvl-3{padding-left:2.7rem;}
+.tn.lvl-2::before,.tn.lvl-3::before{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--border-2);}
+.tn.lvl-2::before{left:1rem;}
+.tn.lvl-3::before{left:2rem;}
+.tn.lvl-2::after,.tn.lvl-3::after{content:'';position:absolute;top:50%;width:.4rem;height:1px;background:var(--border);}
+.tn.lvl-2::after{left:1rem;}
+.tn.lvl-3::after{left:2rem;}
+
+.tn-sub{display:none;}
+.tn.open + .tn-sub{display:block;animation:tnIn .2s cubic-bezier(.16,1,.3,1);}
+@keyframes tnIn{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
+
+.tree-foot{display:flex;align-items:center;justify-content:space-between;padding:.5rem .95rem;
+  border-top:1px solid var(--border);font-size:.6rem;color:var(--text-3);background:var(--sunk);}
+.tree-foot b{color:var(--text-2);font-weight:600;}
+
+/* Hero */
+.prev-hero{margin-bottom:1.2rem;}
+.prev-step{display:inline-flex;align-items:center;gap:.35rem;font-family:'JetBrains Mono',monospace;font-size:.56rem;
+  color:var(--text-3);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;}
+.prev-step .num{padding:.06rem .32rem;border-radius:3px;background:var(--bg);border:1px solid var(--border);color:var(--accent);}
+.prev-title{display:flex;align-items:baseline;gap:.65rem;}
+.prev-title h2{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.025em;}
+.prev-title .size{font-size:.72rem;color:var(--text-3);font-weight:500;}
+.prev-meta{display:flex;gap:1rem;margin-top:.55rem;font-size:.64rem;color:var(--text-3);}
+.prev-meta b{color:var(--text-2);font-weight:600;}
+
+/* Stats row */
+.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.2rem;}
+.stat-card{padding:.7rem .8rem;border-radius:9px;background:var(--bg);border:1px solid var(--border);}
+.stat-lbl{font-size:.52rem;font-weight:800;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem;}
+.stat-val{display:flex;align-items:baseline;gap:.35rem;}
+.stat-val .n{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums;}
+.stat-val .n.ok{color:var(--green);}
+.stat-val .n.off{color:var(--text-3);}
+.stat-val .u{font-size:.58rem;color:var(--text-3);font-weight:500;}
+
+/* Preview card — 실제 사이드바 미리보기 */
+.preview-card{background:var(--bg);border:1px solid var(--border);border-radius:11px;overflow:hidden;}
+.preview-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;
+  border-bottom:1px solid var(--border-2);background:var(--sunk);}
+.preview-head .lbl{font-size:.58rem;font-weight:800;color:var(--text-3);letter-spacing:.12em;text-transform:uppercase;}
+.preview-head .dots{display:flex;gap:4px;}
+.preview-head .dots span{width:8px;height:8px;border-radius:50%;background:var(--border);}
+.preview-body{padding:.6rem;display:flex;gap:1px;background:var(--border-2);min-height:320px;}
+
+/* mock sidebar */
+.mock-side{width:160px;padding:.7rem .5rem;background:var(--bg);display:flex;flex-direction:column;gap:2px;}
+.mock-side-lbl{font-size:.48rem;font-weight:800;color:var(--text-3);letter-spacing:.15em;text-transform:uppercase;padding:.3rem .55rem .15rem;}
+.mock-item{display:flex;align-items:center;gap:.45rem;padding:.4rem .55rem;border-radius:5px;
+  font-size:.66rem;color:var(--text-2);cursor:default;transition:background .1s;}
+.mock-item:hover{background:var(--sunk);}
+.mock-item.on{background:var(--accent-soft);color:var(--accent);font-weight:600;}
+.mock-item .mi{width:10px;height:10px;display:flex;align-items:center;justify-content:center;opacity:.7;}
+.mock-item .mi svg{width:10px;height:10px;}
+
+/* mock content area */
+.mock-cnt{flex:1;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:1rem;
+  color:var(--text-4);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
+  background-image:repeating-linear-gradient(45deg,var(--sunk) 0,var(--sunk) 1px,transparent 1px,transparent 8px);}
+
+/* Activity list */
+.activity{margin-top:1.2rem;}
+.activity-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
+.activity-hd h4{margin:0;font-size:.78rem;font-weight:700;letter-spacing:-.01em;}
+.activity-hd a{font-size:.64rem;color:var(--accent);text-decoration:none;font-weight:600;cursor:pointer;}
+.activity-hd a:hover{text-decoration:underline;}
+
+.act-list{background:var(--bg);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
+.act-row{display:flex;align-items:center;gap:.65rem;padding:.6rem .85rem;border-bottom:1px solid var(--border-2);font-size:.7rem;}
+.act-row:last-child{border-bottom:none;}
+.act-ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
+  background:var(--sunk);color:var(--text-2);border:1px solid var(--border-2);flex-shrink:0;}
+.act-ico svg{width:11px;height:11px;}
+.act-ico.edit{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line);}
+.act-ico.add{color:var(--green);background:rgba(22,163,74,.06);border-color:rgba(22,163,74,.2);}
+.act-ico.del{color:var(--red);background:rgba(220,38,38,.06);border-color:rgba(220,38,38,.2);}
+html.dark .act-ico.add{background:rgba(102,229,153,.06);border-color:rgba(102,229,153,.22);color:var(--green);}
+html.dark .act-ico.del{background:rgba(255,106,122,.06);border-color:rgba(255,106,122,.22);color:var(--red);}
+.act-body{flex:1;min-width:0;}
+.act-title{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.act-title b{font-weight:600;}
+.act-meta{font-size:.58rem;color:var(--text-3);margin-top:.08rem;font-family:'JetBrains Mono',monospace;}
+.act-time{font-size:.58rem;color:var(--text-3);font-variant-numeric:tabular-nums;flex-shrink:0;}
+
+@media(max-width:820px){
+  .col-scope,.col-l1{width:88vw;min-width:88vw;}
+  .col-preview{min-width:92vw;}
+  .stats{grid-template-columns:1fr 1fr;}
+}
+</style>
+</head>
+<body>
+
+<div class="shell">
+
+  <header class="hdr">
+    <div class="hdr-l">
+      <div class="logo">INVYONE</div>
+      <div class="path">
+        <span class="path-seg" data-col="c1"><span class="step-n">01</span>스코프</span>
+        <span class="path-sep">/</span>
+        <span class="path-seg" data-col="c2"><span class="step-n">02</span>관리자</span>
+        <span class="path-sep">/</span>
+        <span class="path-seg cur" data-col="c3"><span class="step-n">03</span>시스템 · 요약</span>
+      </div>
+    </div>
+    <div class="hdr-r">
+      <button class="ghost-btn">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        검색 <kbd>⌘K</kbd>
+      </button>
+      <div class="tt">
+        <button id="th-l" class="on" onclick="setTheme('light')">LIGHT</button>
+        <button id="th-d" onclick="setTheme('dark')">DARK</button>
+      </div>
+      <div class="av">GP</div>
+    </div>
+  </header>
+
+  <main class="cascade">
+
+    <!-- ========= COL 1 : SCOPE ========= -->
+    <section class="col col-scope" data-col="c1">
+      <div class="col-hd">
+        <div class="step-lbl"><span class="num">01</span>Scope</div>
+        <h3>스코프</h3>
+        <p>메뉴 타입을 선택하세요</p>
+      </div>
+      <div class="scope-list">
+        <div class="scope-card sel" onclick="selCard(this,'.scope-card')">
+          <div class="scope-top">
+            <div class="scope-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="m2 17 10 5 10-5M2 12l10 5 10-5"/></svg>
+            </div>
+            <div class="scope-cnt">37</div>
+          </div>
+          <div>
+            <div class="scope-name">관리자</div>
+            <div class="scope-desc">시스템·업무·리포트 관리 화면</div>
+          </div>
+        </div>
+        <div class="scope-card" onclick="selCard(this,'.scope-card')">
+          <div class="scope-top">
+            <div class="scope-ico">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+            </div>
+            <div class="scope-cnt">18</div>
+          </div>
+          <div>
+            <div class="scope-name">사용자</div>
+            <div class="scope-desc">최종 사용자 대시보드·업무</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ========= COL 2 : TREE (L1 > L2 > L3 아코디언) ========= -->
+    <section class="col col-l1" data-col="c2">
+      <div class="col-hd">
+        <div>
+          <div class="step-lbl"><span class="num">02</span>Tree</div>
+          <h3>관리자 메뉴</h3>
+          <p>5개 · 37개 항목 · depth 3</p>
+        </div>
+        <button class="add-btn" title="새 카테고리">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 5v14M5 12h14"/></svg>
+        </button>
+      </div>
+
+      <div class="tree-srch-wrap">
+        <svg class="s" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+        <input placeholder="트리 검색…"/>
+      </div>
+
+      <div class="tree-list">
+
+        <!-- L1: 시스템 (열림) -->
+        <div class="t-row l1 open sel" onclick="selTn2(this,event)">
+          <span class="t-caret" onclick="toggleTn2(event,this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="t-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg></span>
+          <div class="t-body"><div class="t-name">시스템</div></div>
+          <span class="t-cnt">10</span>
+        </div>
+        <div class="t-sub">
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span>
+            <span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">메뉴 관리</div><div class="t-meta">/admin/menu</div></div>
+          </div>
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span>
+            <span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">사용자 관리</div><div class="t-meta">/admin/userMng</div></div>
+          </div>
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span>
+            <span class="t-dot"></span>
+            <div class="t-body"><div class="t-name">화면 관리</div><div class="t-meta">/admin/screenMng</div></div>
+          </div>
+          <div class="t-row l2 open" onclick="selTn2(this,event)">
+            <span class="t-caret" onclick="toggleTn2(event,this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+            <span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">공통 코드</div><div class="t-meta">/admin/code</div></div>
+            <span class="t-cnt">3</span>
+          </div>
+          <div class="t-sub-inner">
+            <div class="t-row l3 leaf" onclick="selTn2(this,event)">
+              <span class="t-caret"></span>
+              <span class="t-dot on"></span>
+              <div class="t-body"><div class="t-name">코드 그룹</div><div class="t-meta">/admin/code/groups</div></div>
+            </div>
+            <div class="t-row l3 leaf" onclick="selTn2(this,event)">
+              <span class="t-caret"></span>
+              <span class="t-dot on"></span>
+              <div class="t-body"><div class="t-name">코드 값</div><div class="t-meta">/admin/code/values</div></div>
+            </div>
+            <div class="t-row l3 leaf" onclick="selTn2(this,event)">
+              <span class="t-caret"></span>
+              <span class="t-dot"></span>
+              <div class="t-body"><div class="t-name">다국어</div><div class="t-meta">/admin/i18n</div></div>
+            </div>
+          </div>
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span>
+            <span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">권한</div><div class="t-meta">/admin/roles</div></div>
+          </div>
+        </div>
+
+        <!-- L1: 업무 (닫힘) -->
+        <div class="t-row l1" onclick="selTn2(this,event)">
+          <span class="t-caret" onclick="toggleTn2(event,this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="t-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2 2 7l10 5 10-5-10-5z"/><path d="m2 17 10 5 10-5M2 12l10 5 10-5"/></svg></span>
+          <div class="t-body"><div class="t-name">업무</div></div>
+          <span class="t-cnt">12</span>
+        </div>
+        <div class="t-sub">
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span><span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">수주</div><div class="t-meta">/biz/orders</div></div>
+          </div>
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span><span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">생산</div><div class="t-meta">/biz/production</div></div>
+          </div>
+        </div>
+
+        <!-- L1: AI Assistant (닫힘) -->
+        <div class="t-row l1" onclick="selTn2(this,event)">
+          <span class="t-caret" onclick="toggleTn2(event,this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="t-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="m18 9-5 5-4-4-3 3"/></svg></span>
+          <div class="t-body"><div class="t-name">AI Assistant</div></div>
+          <span class="t-cnt">5</span>
+        </div>
+        <div class="t-sub">
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span><span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">대시보드</div><div class="t-meta">/ai/dashboard</div></div>
+          </div>
+          <div class="t-row l2 leaf" onclick="selTn2(this,event)">
+            <span class="t-caret"></span><span class="t-dot on"></span>
+            <div class="t-body"><div class="t-name">채팅</div><div class="t-meta">/ai/chat</div></div>
+          </div>
+        </div>
+
+        <!-- L1: 리포트 (닫힘) -->
+        <div class="t-row l1" onclick="selTn2(this,event)">
+          <span class="t-caret" onclick="toggleTn2(event,this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="t-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v4H4zM4 10h16v4H4zM4 16h16v4H4z"/></svg></span>
+          <div class="t-body"><div class="t-name">리포트</div></div>
+          <span class="t-cnt">7</span>
+        </div>
+        <div class="t-sub"></div>
+
+        <!-- L1: 자동화 (닫힘) -->
+        <div class="t-row l1" onclick="selTn2(this,event)">
+          <span class="t-caret" onclick="toggleTn2(event,this)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="t-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82 2 2 0 1 1-2.83 2.83 1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33 2 2 0 1 1-2.83-2.83 1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82 2 2 0 1 1 2.83-2.83 1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33 2 2 0 1 1 2.83 2.83 1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
+          <div class="t-body"><div class="t-name">자동화</div></div>
+          <span class="t-cnt">3</span>
+        </div>
+        <div class="t-sub"></div>
+
+      </div>
+    </section>
+
+    <!-- ========= COL 3 : TABBED VIEWS ========= -->
+    <section class="col col-preview" data-col="c3">
+
+      <div class="view-tabs">
+        <div class="vt-list">
+          <button class="vt-btn on" data-view="overview" onclick="selView(this)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+            Overview
+          </button>
+          <button class="vt-btn" data-view="settings" onclick="selView(this)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+            Settings
+          </button>
+          <button class="vt-btn" data-view="activity" onclick="selView(this)">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
+            Activity <span class="cnt">4</span>
+          </button>
+        </div>
+        <div class="vt-right">
+          <button class="ghost-btn" style="height:26px;font-size:.64rem;">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+            메뉴 추가
+          </button>
+        </div>
+      </div>
+
+      <div class="prev-wrap">
+
+
+        <!-- ========== OVERVIEW VIEW ========== -->
+        <div class="view-pane on" data-view="overview">
+
+        <div class="prev-hero">
+          <div class="prev-step"><span class="num">03</span>Overview</div>
+          <div class="prev-title">
+            <h2>시스템</h2>
+            <span class="size">10개 항목</span>
+          </div>
+          <div class="prev-meta">
+            <span>경로 <b>관리자 / 시스템</b></span>
+            <span>스코프 <b>공용 *</b></span>
+            <span>최근 수정 <b>2일 전</b></span>
+          </div>
+        </div>
+
+        <!-- STATS -->
+        <div class="stats">
+          <div class="stat-card">
+            <div class="stat-lbl">전체</div>
+            <div class="stat-val"><span class="n">10</span><span class="u">items</span></div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-lbl">활성</div>
+            <div class="stat-val"><span class="n ok">8</span><span class="u">/ 10</span></div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-lbl">비활성</div>
+            <div class="stat-val"><span class="n off">2</span><span class="u">disabled</span></div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-lbl">화면 연결</div>
+            <div class="stat-val"><span class="n">7</span><span class="u">screens</span></div>
+          </div>
+        </div>
+
+        <!-- PREVIEW -->
+        <div class="preview-card">
+          <div class="preview-head">
+            <span class="lbl">Sidebar Preview</span>
+            <div class="dots"><span></span><span></span><span></span></div>
+          </div>
+          <div class="preview-body">
+            <div class="mock-side">
+              <div class="mock-side-lbl">시스템</div>
+              <div class="mock-item on">
+                <span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h10"/></svg></span>
+                메뉴 관리
+              </div>
+              <div class="mock-item">
+                <span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></span>
+                사용자 관리
+              </div>
+              <div class="mock-item">
+                <span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M3 9h18M9 21V9"/></svg></span>
+                화면 관리
+              </div>
+              <div class="mock-item">
+                <span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 2v4M16 2v4M3 10h18"/></svg></span>
+                공통 코드
+              </div>
+              <div class="mock-item">
+                <span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg></span>
+                권한
+              </div>
+            </div>
+            <div class="mock-cnt">PREVIEW AREA</div>
+          </div>
+        </div>
+
+        </div><!-- /overview view -->
+
+        <!-- ========== SETTINGS VIEW ========== -->
+        <div class="view-pane sv" data-view="settings">
+          <div class="sv-hero">
+            <div class="sv-hero-top">
+              <div class="sv-hero-ico">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h10"/></svg>
+              </div>
+              <div class="sv-hero-info">
+                <div class="sv-hero-path">관리자 · 시스템 · <b>메뉴 관리</b></div>
+                <h2>
+                  <span id="sv-name">메뉴 관리</span>
+                  <span class="sv-hero-tags">
+                    <span class="chip on">Active</span>
+                    <span class="chip">공용 *</span>
+                    <span class="chip">L2</span>
+                  </span>
+                </h2>
+              </div>
+            </div>
+            <div class="sv-hero-meta">
+              <span>OBJID <b>mnu_00231</b></span>
+              <span>최근 수정 <b>2026-04-12 14:23 · gbpark</b></span>
+            </div>
+          </div>
+
+          <div class="sv-grid">
+            <div class="sv-side">
+              <h4>기본 정보</h4>
+              <p>메뉴 이름, 다국어 키, 사용자에게 표시되는 설명을 설정합니다.</p>
+            </div>
+            <div class="sv-fields">
+              <div class="sv-row">
+                <label>메뉴명<span class="req">*</span></label>
+                <input class="inp" id="sv-inp-name" value="메뉴 관리"/>
+              </div>
+              <div class="sv-row-2">
+                <div class="sv-row">
+                  <label>다국어 키</label>
+                  <select class="inp">
+                    <option>menu.management</option>
+                    <option>user.management</option>
+                    <option>screen.management</option>
+                  </select>
+                </div>
+                <div class="sv-row">
+                  <label>아이콘</label>
+                  <input class="inp" value="Menu" placeholder="Lucide 아이콘명"/>
+                </div>
+              </div>
+              <div class="sv-row">
+                <label>설명</label>
+                <textarea class="inp">시스템 메뉴 트리를 관리하고 화면을 할당합니다</textarea>
+              </div>
+            </div>
+          </div>
+
+          <div class="sv-grid">
+            <div class="sv-side">
+              <h4>연결</h4>
+              <p>메뉴 클릭 시 어떤 콘텐츠로 이동할지 결정합니다.</p>
+            </div>
+            <div class="sv-fields">
+              <div class="sv-row">
+                <label>유형</label>
+                <div class="sv-seg">
+                  <button class="on" onclick="selSvSeg(this)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M3 9h18M9 21V9"/></svg>
+                    화면
+                  </button>
+                  <button onclick="selSvSeg(this)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
+                    대시보드
+                  </button>
+                  <button onclick="selSvSeg(this)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/></svg>
+                    POP
+                  </button>
+                  <button onclick="selSvSeg(this)">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>
+                    URL
+                  </button>
+                </div>
+              </div>
+              <div class="sv-row">
+                <label>화면 / URL</label>
+                <input class="inp" id="sv-inp-url" value="/admin/menu"/>
+                <div class="help">화면 검색 또는 직접 URL 입력. 유형이 URL일 때만 외부 링크로 동작합니다.</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="sv-grid">
+            <div class="sv-side">
+              <h4>스코프 &amp; 표시</h4>
+              <p>어느 회사에서 보이고 트리 상 어디에 위치할지 결정합니다.</p>
+            </div>
+            <div class="sv-fields">
+              <div class="sv-row-2">
+                <div class="sv-row">
+                  <label>회사</label>
+                  <select class="inp">
+                    <option>공용 (*)</option>
+                    <option>덕일하이텍</option>
+                    <option>비엑스플로러</option>
+                  </select>
+                </div>
+                <div class="sv-row">
+                  <label>부모</label>
+                  <input class="inp" value="시스템" readonly/>
+                </div>
+              </div>
+              <div class="sv-row-2">
+                <div class="sv-row">
+                  <label>순서</label>
+                  <input class="inp" type="number" value="1"/>
+                </div>
+                <div class="sv-row">
+                  <label>상태</label>
+                  <label class="sv-tg on" onclick="this.classList.toggle('on')" style="height:36px;padding:0 .85rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);">
+                    <span class="sw"></span>
+                    <span class="tg-l">활성</span>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="sv-ft">
+            <div class="sv-ft-l">
+              <button class="sv-btn danger">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
+                삭제
+              </button>
+              <button class="sv-btn">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                복사
+              </button>
+            </div>
+            <div class="sv-ft-r">
+              <span class="unsaved"><span class="d"></span>저장되지 않음</span>
+              <button class="sv-btn">되돌리기</button>
+              <button class="sv-btn primary">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12l5 5L20 7"/></svg>
+                저장
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- ========== ACTIVITY VIEW ========== -->
+        <div class="view-pane" data-view="activity">
+          <div class="tree-hero">
+            <h2>활동 로그 <span class="size">· 최근 4건</span></h2>
+            <div class="sub">이 카테고리에서 최근 발생한 변경 이력입니다.</div>
+          </div>
+          <div class="act-list">
+            <div class="act-row">
+              <div class="act-ico edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="m18.5 2.5 3 3L12 15l-4 1 1-4z"/></svg></div>
+              <div class="act-body">
+                <div class="act-title"><b>gbpark</b> 메뉴명 수정 · <b>메뉴 관리</b></div>
+                <div class="act-meta">mnu_00231 · 메뉴관리 → 메뉴 관리</div>
+              </div>
+              <span class="act-time">2일 전</span>
+            </div>
+            <div class="act-row">
+              <div class="act-ico add"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M12 5v14M5 12h14"/></svg></div>
+              <div class="act-body">
+                <div class="act-title"><b>gbpark</b> 하위 메뉴 추가 · <b>공통 코드 / 다국어</b></div>
+                <div class="act-meta">mnu_00248 · /admin/i18n</div>
+              </div>
+              <span class="act-time">4일 전</span>
+            </div>
+            <div class="act-row">
+              <div class="act-ico edit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="m18.5 2.5 3 3L12 15l-4 1 1-4z"/></svg></div>
+              <div class="act-body">
+                <div class="act-title"><b>park</b> URL 변경 · <b>화면 관리</b></div>
+                <div class="act-meta">/admin/screen → /admin/screenMng</div>
+              </div>
+              <span class="act-time">6일 전</span>
+            </div>
+            <div class="act-row">
+              <div class="act-ico del"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg></div>
+              <div class="act-body">
+                <div class="act-title"><b>gbpark</b> 메뉴 비활성화 · <b>테스트</b></div>
+                <div class="act-meta">mnu_00197 · status: inactive</div>
+              </div>
+              <span class="act-time">1주 전</span>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+  </main>
+</div>
+
+<script>
+function setTheme(t){
+  document.documentElement.classList.toggle('dark',t==='dark');
+  document.getElementById('th-l').classList.toggle('on',t==='light');
+  document.getElementById('th-d').classList.toggle('on',t==='dark');
+}
+function selCard(el,selector){
+  el.parentElement.querySelectorAll(selector).forEach(r=>r.classList.remove('sel'));
+  el.classList.add('sel');
+}
+function selView(btn){
+  const v=btn.dataset.view;
+  document.querySelectorAll('.vt-btn').forEach(b=>b.classList.remove('on'));
+  btn.classList.add('on');
+  document.querySelectorAll('.view-pane').forEach(p=>p.classList.toggle('on',p.dataset.view===v));
+}
+function selTn(el){
+  document.querySelectorAll('.tn').forEach(t=>t.classList.remove('sel'));
+  el.classList.add('sel');
+}
+function toggleTn(e,el){
+  e.stopPropagation();
+  const tn=el.closest('.tn');
+  tn.classList.toggle('open');
+}
+function selTn2(el,e){
+  if(e)e.stopPropagation();
+  document.querySelectorAll('.t-row').forEach(t=>t.classList.remove('sel'));
+  el.classList.add('sel');
+  const isL2L3=el.classList.contains('l2')||el.classList.contains('l3');
+  const name=el.querySelector('.t-name')?.textContent||'';
+  const url=el.querySelector('.t-meta')?.textContent||'';
+  if(isL2L3){
+    // 자동으로 Settings 뷰 전환 + 필드 갱신
+    const svBtn=document.querySelector('.vt-btn[data-view="settings"]');
+    if(svBtn)selView(svBtn);
+    const svName=document.getElementById('sv-name');if(svName)svName.textContent=name;
+    const svIn=document.getElementById('sv-inp-name');if(svIn)svIn.value=name;
+    const svUrl=document.getElementById('sv-inp-url');if(svUrl&&url)svUrl.value=url;
+    const path=document.querySelector('.sv-hero-path');
+    if(path)path.innerHTML='관리자 · 시스템 · <b>'+name+'</b>';
+  }else{
+    // L1 선택 시 Overview
+    const ovBtn=document.querySelector('.vt-btn[data-view="overview"]');
+    if(ovBtn)selView(ovBtn);
+  }
+}
+function toggleTn2(e,el){
+  e.stopPropagation();
+  el.closest('.t-row').classList.toggle('open');
+}
+function selSvSeg(el){el.parentElement.querySelectorAll('button').forEach(b=>b.classList.remove('on'));el.classList.add('on');}
+document.querySelectorAll('.path-seg[data-col]').forEach(s=>s.addEventListener('click',()=>{
+  const el=document.querySelector('.col[data-col="'+s.dataset.col+'"]');
+  if(el)el.scrollIntoView({behavior:'smooth',inline:'start',block:'nearest'});
+}));
+</script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-04-15-menu-mng-v5-mockup.html b/notes/gbpark/2026-04-15-menu-mng-v5-mockup.html
new file mode 100644
index 00000000..0799ad18
--- /dev/null
+++ b/notes/gbpark/2026-04-15-menu-mng-v5-mockup.html
@@ -0,0 +1,588 @@
+<!doctype html>
+<html lang="ko">
+<head>
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1"/>
+<title>INVYONE — 메뉴 관리</title>
+<style>
+/* ========== TOKENS — 단순 무채색 + accent 1 ========== */
+:root{
+  --bg:#ffffff;
+  --panel:#ffffff;
+  --panel-2:#fafafa;
+  --sunk:#f5f5f7;
+  --text:#18181b;
+  --text-2:#52525b;
+  --text-3:#a1a1aa;
+  --text-4:#d4d4d8;
+  --border:#e4e4e7;
+  --border-2:#ededef;
+  --accent:#6c5ce7;
+  --accent-soft:#f3f1fe;
+  --accent-line:#d9d3fa;
+  --green:#16a34a;
+  --red:#dc2626;
+  --amber:#d97706;
+  --ring:rgba(108,92,231,.18);
+}
+html.dark{
+  --bg:#0b0b0f;
+  --panel:#111114;
+  --panel-2:#16161c;
+  --sunk:#1a1a21;
+  --text:#f4f4f5;
+  --text-2:#a1a1aa;
+  --text-3:#71717a;
+  --text-4:#52525b;
+  --border:#24242b;
+  --border-2:#1e1e25;
+  --accent:#a29bfe;
+  --accent-soft:rgba(162,155,254,.08);
+  --accent-line:rgba(162,155,254,.2);
+  --green:#4ade80;
+  --red:#ef4444;
+  --amber:#f59e0b;
+  --ring:rgba(162,155,254,.22);
+}
+*{box-sizing:border-box;}
+html,body{margin:0;padding:0;height:100%;}
+body{
+  font-family:'Inter','Noto Sans KR',-apple-system,system-ui,sans-serif;
+  background:var(--bg);color:var(--text);
+  font-size:.8125rem;line-height:1.5;overflow:hidden;
+  transition:background .2s,color .2s;
+  -webkit-font-smoothing:antialiased;
+  font-feature-settings:"cv11","ss01";
+}
+
+/* ===== SHELL ===== */
+.shell{height:100vh;display:flex;flex-direction:column;}
+
+/* ===== HEADER ===== */
+.hdr{display:flex;align-items:center;justify-content:space-between;
+  padding:0 1.25rem;height:48px;flex-shrink:0;
+  border-bottom:1px solid var(--border);background:var(--panel);}
+.hdr-l{display:flex;align-items:center;gap:1rem;}
+.logo{font-size:.85rem;font-weight:700;letter-spacing:-.02em;color:var(--accent);}
+.bc{font-size:.75rem;color:var(--text-3);display:flex;align-items:center;gap:.4rem;}
+.bc .sep{color:var(--text-4);}
+.bc .cur{color:var(--text);font-weight:500;}
+.hdr-r{display:flex;align-items:center;gap:.5rem;}
+.tt{display:flex;padding:2px;border-radius:6px;background:var(--sunk);}
+.tt button{padding:.2rem .55rem;border-radius:4px;border:none;background:transparent;color:var(--text-3);
+  font-family:inherit;font-size:.7rem;font-weight:500;cursor:pointer;}
+.tt button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.06);}
+html.dark .tt button.on{background:var(--panel-2);box-shadow:0 1px 2px rgba(0,0,0,.3);}
+.av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:white;
+  display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:600;}
+
+/* ===== PAGE BAR ===== */
+.pb{padding:1.5rem 1.75rem 1.1rem;flex-shrink:0;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
+.pb h1{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:-.015em;color:var(--text);}
+.pb .sub{font-size:.75rem;color:var(--text-3);margin-top:.2rem;}
+
+/* ===== MAIN ===== */
+.main{flex:1;min-height:0;display:grid;grid-template-columns:300px 1fr;}
+
+/* ======== TREE PANE ======== */
+.tree-pane{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border);background:var(--panel);}
+
+/* Type tabs — 상단 구분 없는 간결한 세그먼트 */
+.type{padding:.75rem 1rem .65rem;}
+.type-tabs{display:flex;gap:2px;padding:2px;border-radius:6px;background:var(--sunk);}
+.type-tab{flex:1;padding:.4rem .5rem;border-radius:4px;border:none;background:transparent;
+  font-family:inherit;font-size:.72rem;font-weight:500;color:var(--text-3);cursor:pointer;
+  display:flex;align-items:center;justify-content:center;gap:.4rem;transition:color .15s;}
+.type-tab:hover{color:var(--text-2);}
+.type-tab.on{color:var(--text);background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.05);font-weight:600;}
+html.dark .type-tab.on{background:var(--panel-2);}
+.type-tab .cnt{color:var(--text-3);font-variant-numeric:tabular-nums;font-size:.66rem;}
+.type-tab.on .cnt{color:var(--text-2);}
+
+/* Search */
+.tree-tb{padding:0 1rem .75rem;flex-shrink:0;}
+.tree-srch{position:relative;}
+.tree-srch svg{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--text-3);pointer-events:none;}
+.tree-srch input{width:100%;height:30px;padding:0 2.3rem 0 1.85rem;
+  border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--text);
+  font-size:.73rem;font-family:inherit;outline:none;transition:border .15s,box-shadow .15s;}
+.tree-srch input::placeholder{color:var(--text-3);}
+.tree-srch input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);}
+.tree-srch .kb{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);
+  font-family:'JetBrains Mono',monospace;font-size:.55rem;padding:.08rem .3rem;
+  border-radius:3px;background:var(--sunk);color:var(--text-3);border:1px solid var(--border-2);}
+
+/* Tree body */
+.tree-body{flex:1;overflow-y:auto;padding:.25rem .5rem 1rem;}
+.tree-body::-webkit-scrollbar{width:8px;}
+.tree-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
+
+.node{display:flex;align-items:center;gap:.4rem;padding:.32rem .5rem;cursor:pointer;
+  font-size:.74rem;color:var(--text-2);border-radius:5px;margin-bottom:1px;
+  transition:background .1s;position:relative;user-select:none;}
+.node:hover{background:var(--sunk);color:var(--text);}
+.node.sel{background:var(--accent-soft);color:var(--text);}
+.node.sel .name{color:var(--accent);font-weight:600;}
+html.dark .node.sel{background:var(--accent-soft);}
+html.dark .node.sel .name{color:var(--accent);}
+.node .caret{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);flex-shrink:0;}
+.node .caret svg{width:8px;height:8px;transition:transform .15s;}
+.node.open > .caret svg{transform:rotate(90deg);}
+.node.leaf .caret{opacity:0;}
+.node .dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;background:var(--text-4);}
+.node .dot.on{background:var(--green);}
+.node .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
+.node .meta{font-size:.62rem;color:var(--text-3);font-family:'JetBrains Mono',monospace;
+  opacity:0;transition:opacity .15s;flex-shrink:0;}
+.node:hover .meta,.node.sel .meta{opacity:1;}
+
+/* indent */
+.lvl-1{padding-left:.55rem;}
+.lvl-2{padding-left:1.5rem;}
+.lvl-3{padding-left:2.5rem;}
+
+.subtree{display:none;}
+.subtree.open{display:block;}
+
+/* Tree footer */
+.tree-ft{padding:.6rem 1rem .7rem;border-top:1px solid var(--border);flex-shrink:0;}
+.tree-ft button{width:100%;height:30px;border-radius:6px;border:1px solid var(--border);background:transparent;
+  color:var(--text-2);font-family:inherit;font-size:.72rem;font-weight:500;cursor:pointer;
+  display:flex;align-items:center;justify-content:center;gap:.4rem;transition:all .15s;}
+.tree-ft button:hover{border-color:var(--accent);color:var(--accent);}
+.tree-ft button svg{width:12px;height:12px;}
+
+/* ========= INSPECTOR ========= */
+.insp{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg);}
+
+.insp-hd{padding:1.3rem 1.75rem 1.1rem;flex-shrink:0;border-bottom:1px solid var(--border);}
+.insp-path{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--text-3);margin-bottom:.35rem;}
+.insp-path svg{width:9px;height:9px;color:var(--text-4);}
+.insp-path .cur{color:var(--text-2);font-weight:500;}
+.insp-title{display:flex;align-items:center;gap:.65rem;}
+.insp-title h2{margin:0;font-size:1.1rem;font-weight:600;letter-spacing:-.02em;color:var(--text);}
+.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .4rem;border-radius:4px;
+  font-size:.62rem;font-weight:500;
+  background:var(--sunk);color:var(--text-3);border:1px solid var(--border-2);
+  font-family:'JetBrains Mono',monospace;letter-spacing:0;}
+.tag .td{width:5px;height:5px;border-radius:50%;background:var(--text-3);}
+.tag.on{color:var(--green);background:rgba(22,163,74,.06);border-color:rgba(22,163,74,.18);}
+.tag.on .td{background:var(--green);}
+html.dark .tag.on{background:rgba(74,222,128,.06);border-color:rgba(74,222,128,.16);}
+
+/* Inspector body */
+.insp-body{flex:1;overflow-y:auto;padding:.5rem 1.75rem 2rem;}
+.insp-body::-webkit-scrollbar{width:8px;}
+.insp-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
+
+.sect{padding:1.25rem 0;border-bottom:1px solid var(--border);}
+.sect:last-child{border-bottom:none;}
+.sect-hd{font-size:.75rem;font-weight:600;color:var(--text);margin-bottom:.25rem;letter-spacing:-.01em;}
+.sect-sub{font-size:.7rem;color:var(--text-3);margin-bottom:1rem;}
+
+.row{display:grid;grid-template-columns:140px 1fr;gap:1rem;align-items:center;padding:.4rem 0;}
+.row.top{align-items:flex-start;}
+.row > label{font-size:.72rem;color:var(--text-2);font-weight:500;padding-top:.45rem;}
+.row.top > label{padding-top:.5rem;}
+.row > label .req{color:var(--red);}
+.row > .val{min-width:0;}
+
+input.inp,select.inp,textarea.inp{width:100%;height:32px;padding:0 .7rem;
+  border:1px solid var(--border);border-radius:6px;
+  background:var(--panel);color:var(--text);font-size:.73rem;font-family:inherit;
+  outline:none;transition:border .15s,box-shadow .15s;}
+input.inp::placeholder,textarea.inp::placeholder{color:var(--text-3);}
+input.inp:focus,select.inp:focus,textarea.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);}
+input.inp[readonly]{background:var(--sunk);color:var(--text-3);}
+input.inp[readonly]:focus{box-shadow:none;border-color:var(--border);}
+textarea.inp{height:auto;min-height:64px;padding:.45rem .7rem;resize:vertical;line-height:1.55;}
+.help{font-size:.68rem;color:var(--text-3);margin-top:.35rem;}
+
+select.inp{padding-right:2rem;appearance:none;-webkit-appearance:none;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
+  background-repeat:no-repeat;background-position:right .55rem center;background-size:12px;}
+html.dark select.inp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");}
+
+/* Segmented */
+.seg{display:inline-flex;padding:2px;border-radius:6px;background:var(--sunk);width:fit-content;}
+.seg button{padding:.32rem .65rem;border:none;border-radius:4px;background:transparent;color:var(--text-3);
+  font-family:inherit;font-size:.7rem;font-weight:500;cursor:pointer;transition:color .15s;
+  display:inline-flex;align-items:center;gap:.3rem;}
+.seg button:hover{color:var(--text-2);}
+.seg button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.05);font-weight:600;}
+html.dark .seg button.on{background:var(--panel-2);}
+.seg button svg{width:12px;height:12px;}
+
+/* Toggle */
+.tg{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;}
+.tg .sw{width:32px;height:18px;border-radius:999px;background:var(--border);position:relative;transition:background .2s;}
+.tg .sw::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;
+  top:2px;left:2px;transition:left .2s;box-shadow:0 1px 2px rgba(0,0,0,.15);}
+html.dark .tg .sw{background:var(--border);}
+html.dark .tg .sw::after{background:#d4d4d8;}
+.tg.on .sw{background:var(--accent);}
+.tg.on .sw::after{left:16px;background:#fff;}
+.tg .tg-l{font-size:.72rem;color:var(--text-2);font-weight:500;}
+.tg.on .tg-l{color:var(--text);}
+
+.mono{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text-3);}
+
+/* Inspector footer */
+.insp-ft{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  padding:.85rem 1.75rem;flex-shrink:0;border-top:1px solid var(--border);background:var(--panel);}
+.insp-ft-l{display:flex;gap:.4rem;}
+.insp-ft-r{display:flex;gap:.4rem;align-items:center;}
+
+.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
+  height:30px;padding:0 .85rem;border-radius:6px;border:1px solid var(--border);
+  background:var(--panel);color:var(--text-2);
+  font-family:inherit;font-size:.72rem;font-weight:500;cursor:pointer;transition:all .15s;outline:none;}
+.btn:hover{border-color:var(--text-3);color:var(--text);}
+.btn svg{width:12px;height:12px;}
+.btn.primary{background:var(--accent);color:white;border-color:var(--accent);font-weight:600;}
+.btn.primary:hover{background:#5c4ed4;border-color:#5c4ed4;color:white;}
+html.dark .btn.primary{color:#0b0b0f;}
+html.dark .btn.primary:hover{background:#b8b2ff;border-color:#b8b2ff;color:#0b0b0f;}
+.btn.danger{color:var(--red);}
+.btn.danger:hover{border-color:var(--red);background:rgba(220,38,38,.04);}
+.btn.ghost{border-color:transparent;background:transparent;}
+.btn.ghost:hover{background:var(--sunk);border-color:transparent;color:var(--text);}
+.btn.sm{height:26px;padding:0 .6rem;font-size:.65rem;}
+
+.unsaved{font-size:.68rem;color:var(--amber);font-weight:500;margin-right:.25rem;}
+
+@media(max-width:820px){
+  .main{grid-template-columns:1fr;}
+  .tree-pane{max-height:40vh;border-right:none;border-bottom:1px solid var(--border);}
+}
+</style>
+</head>
+<body>
+
+<div class="shell">
+
+  <header class="hdr">
+    <div class="hdr-l">
+      <div class="logo">INVYONE</div>
+      <div class="bc">
+        <span>관리자</span><span class="sep">/</span><span>시스템</span><span class="sep">/</span><span class="cur">메뉴 관리</span>
+      </div>
+    </div>
+    <div class="hdr-r">
+      <div class="tt">
+        <button id="th-l" class="on" onclick="setTheme('light')">Light</button>
+        <button id="th-d" onclick="setTheme('dark')">Dark</button>
+      </div>
+      <div class="av">GP</div>
+    </div>
+  </header>
+
+  <div class="pb">
+    <div>
+      <h1>메뉴 관리</h1>
+      <div class="sub">트리에서 선택하면 우측에서 편집합니다.</div>
+    </div>
+  </div>
+
+  <main class="main">
+
+    <aside class="tree-pane">
+      <div class="type">
+        <div class="type-tabs">
+          <button class="type-tab on" onclick="selType(this)">관리자 <span class="cnt">37</span></button>
+          <button class="type-tab" onclick="selType(this)">사용자 <span class="cnt">18</span></button>
+        </div>
+      </div>
+
+      <div class="tree-tb">
+        <div class="tree-srch">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
+          <input placeholder="검색…"/>
+          <span class="kb">⌘K</span>
+        </div>
+      </div>
+
+      <div class="tree-body">
+
+        <div class="node lvl-1 open" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">시스템</span>
+          <span class="meta">10</span>
+        </div>
+        <div class="subtree open">
+          <div class="node lvl-2 leaf sel" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">메뉴 관리</span><span class="meta">/admin/menu</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">사용자 관리</span><span class="meta">/admin/userMng</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot"></span>
+            <span class="name">화면 관리</span><span class="meta">/admin/screenMng</span>
+          </div>
+          <div class="node lvl-2 open" onclick="toggleNode(this)">
+            <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+            <span class="dot on"></span>
+            <span class="name">공통 코드</span><span class="meta">3</span>
+          </div>
+          <div class="subtree open">
+            <div class="node lvl-3 leaf" onclick="selNode(this,event)">
+              <span class="caret"></span><span class="dot on"></span>
+              <span class="name">코드 그룹</span><span class="meta">/admin/code/groups</span>
+            </div>
+            <div class="node lvl-3 leaf" onclick="selNode(this,event)">
+              <span class="caret"></span><span class="dot on"></span>
+              <span class="name">코드 값</span><span class="meta">/admin/code/values</span>
+            </div>
+            <div class="node lvl-3 leaf" onclick="selNode(this,event)">
+              <span class="caret"></span><span class="dot"></span>
+              <span class="name">다국어</span><span class="meta">/admin/i18n</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="node lvl-1" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">업무</span><span class="meta">12</span>
+        </div>
+        <div class="subtree">
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">수주</span><span class="meta">/biz/orders</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">생산</span><span class="meta">/biz/production</span>
+          </div>
+        </div>
+
+        <div class="node lvl-1" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">AI Assistant</span><span class="meta">5</span>
+        </div>
+        <div class="subtree">
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">대시보드</span><span class="meta">/ai/dashboard</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">채팅</span><span class="meta">/ai/chat</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot"></span>
+            <span class="name">API 키</span><span class="meta">/ai/keys</span>
+          </div>
+        </div>
+
+        <div class="node lvl-1" onclick="toggleNode(this)">
+          <span class="caret"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg></span>
+          <span class="dot on"></span>
+          <span class="name">리포트</span><span class="meta">7</span>
+        </div>
+        <div class="subtree">
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">생산 리포트</span><span class="meta">/report/production</span>
+          </div>
+          <div class="node lvl-2 leaf" onclick="selNode(this,event)">
+            <span class="caret"></span><span class="dot on"></span>
+            <span class="name">품질 리포트</span><span class="meta">/report/quality</span>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="tree-ft">
+        <button>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+          새 메뉴
+        </button>
+      </div>
+    </aside>
+
+    <section class="insp">
+
+      <div class="insp-hd">
+        <div class="insp-path">
+          <span>관리자</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg>
+          <span>시스템</span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m9 5 7 7-7 7"/></svg>
+          <span class="cur">메뉴 관리</span>
+        </div>
+        <div class="insp-title">
+          <h2>메뉴 관리</h2>
+          <span class="tag on"><span class="td"></span>Active</span>
+          <span class="tag">공용 *</span>
+          <span class="tag">L2</span>
+        </div>
+      </div>
+
+      <div class="insp-body">
+
+        <div class="sect">
+          <div class="sect-hd">기본 정보</div>
+          <div class="sect-sub">메뉴 이름과 다국어 키를 관리합니다.</div>
+          <div class="row">
+            <label>메뉴명<span class="req">*</span></label>
+            <div class="val"><input class="inp" value="메뉴 관리"/></div>
+          </div>
+          <div class="row">
+            <label>다국어 키</label>
+            <div class="val">
+              <select class="inp">
+                <option>menu.management</option>
+                <option>user.management</option>
+                <option>screen.management</option>
+              </select>
+            </div>
+          </div>
+          <div class="row top">
+            <label>설명</label>
+            <div class="val"><textarea class="inp">시스템 메뉴 트리를 관리하고 화면을 할당합니다</textarea></div>
+          </div>
+        </div>
+
+        <div class="sect">
+          <div class="sect-hd">연결</div>
+          <div class="sect-sub">메뉴 클릭 시 어떤 콘텐츠로 이동할지 결정합니다.</div>
+          <div class="row">
+            <label>유형</label>
+            <div class="val">
+              <div class="seg">
+                <button class="on" onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h18v18H3z"/><path d="M3 9h18M9 21V9"/></svg>
+                  화면
+                </button>
+                <button onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
+                  대시보드
+                </button>
+                <button onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/></svg>
+                  POP
+                </button>
+                <button onclick="selSeg(this)">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></svg>
+                  URL
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <label>화면 / URL</label>
+            <div class="val"><input class="inp" value="/admin/menu"/></div>
+          </div>
+          <div class="row">
+            <label>아이콘</label>
+            <div class="val"><input class="inp" value="Menu" placeholder="Lucide 아이콘 이름"/></div>
+          </div>
+        </div>
+
+        <div class="sect">
+          <div class="sect-hd">스코프 &amp; 표시</div>
+          <div class="sect-sub">어느 회사에서 보이고, 어느 위치에 나타날지 설정합니다.</div>
+          <div class="row">
+            <label>회사</label>
+            <div class="val">
+              <select class="inp">
+                <option>공용 (*)</option>
+                <option>덕일하이텍</option>
+                <option>비엑스플로러</option>
+              </select>
+              <div class="help">하위 메뉴는 상위 스코프를 상속합니다.</div>
+            </div>
+          </div>
+          <div class="row">
+            <label>부모</label>
+            <div class="val"><input class="inp" value="시스템" readonly/></div>
+          </div>
+          <div class="row">
+            <label>순서</label>
+            <div class="val"><input class="inp" type="number" value="1" style="width:120px;"/></div>
+          </div>
+          <div class="row">
+            <label>상태</label>
+            <div class="val">
+              <label class="tg on" onclick="this.classList.toggle('on')">
+                <span class="sw"></span>
+                <span class="tg-l">활성</span>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div class="sect">
+          <div class="sect-hd">메타</div>
+          <div class="row">
+            <label>OBJID</label>
+            <div class="val"><span class="mono">mnu_00231</span></div>
+          </div>
+          <div class="row">
+            <label>수정</label>
+            <div class="val"><span class="mono">2026-04-12 14:23 · gbpark</span></div>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="insp-ft">
+        <div class="insp-ft-l">
+          <button class="btn danger sm">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
+            삭제
+          </button>
+          <button class="btn ghost sm">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+            복사
+          </button>
+        </div>
+        <div class="insp-ft-r">
+          <span class="unsaved">● 저장되지 않음</span>
+          <button class="btn">취소</button>
+          <button class="btn primary">저장</button>
+        </div>
+      </div>
+
+    </section>
+
+  </main>
+</div>
+
+<script>
+function setTheme(t){
+  document.documentElement.classList.toggle('dark',t==='dark');
+  document.getElementById('th-l').classList.toggle('on',t==='light');
+  document.getElementById('th-d').classList.toggle('on',t==='dark');
+}
+function selType(el){el.parentElement.querySelectorAll('.type-tab').forEach(c=>c.classList.remove('on'));el.classList.add('on');}
+function selSeg(el){el.parentElement.querySelectorAll('button').forEach(c=>c.classList.remove('on'));el.classList.add('on');}
+function toggleNode(el){
+  el.classList.toggle('open');
+  const st=el.nextElementSibling;
+  if(st && st.classList.contains('subtree'))st.classList.toggle('open');
+}
+function selNode(el,e){
+  e.stopPropagation();
+  document.querySelectorAll('.node').forEach(n=>n.classList.remove('sel'));
+  el.classList.add('sel');
+  const name=el.querySelector('.name').textContent;
+  const url=el.querySelector('.meta').textContent;
+  document.querySelector('.insp-title h2').textContent=name;
+  document.querySelector('.insp-path .cur').textContent=name;
+  const inputs=document.querySelectorAll('.insp-body input.inp');
+  if(inputs[0])inputs[0].value=name;
+  if(inputs[2])inputs[2].value=url;
+}
+document.addEventListener('keydown',e=>{
+  if((e.metaKey||e.ctrlKey)&&e.key==='k'){e.preventDefault();document.querySelector('.tree-srch input').focus();}
+});
+</script>
+</body>
+</html>