From 3eda684787b3056526bac64cb82462dabde5a01d Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Wed, 22 Apr 2026 18:27:06 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=9E=90=20=EB=8C=80?=
 =?UTF-8?q?=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EA=B8=B0=EB=8A=A5=EA=B0=95?=
 =?UTF-8?q?=ED=99=94=20=EB=B0=8F=20=EC=9D=B8=EB=B9=84=EC=98=A8=20=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=9C=EB=94=94=EC=98=A4=20=EB=A9=94=EB=89=B4=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=9E=90=EC=9E=98=ED=95=9C=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../com/erp/service/EntityJoinService.java    |  140 +-
 frontend/app/(main)/admin/menu/page.tsx       |   13 +-
 frontend/app/form-popup/page.tsx              |  232 +++
 frontend/app/globals.css                      |   85 +-
 frontend/components/admin/MenuFormModal.tsx   |    5 +-
 frontend/components/admin/MenuIconPicker.tsx  |   28 +-
 .../admin/menu/MenuSettingsPanel.tsx          |   91 +-
 .../components/admin/menu/MenuTreePanel.tsx   |   38 +-
 frontend/components/dash/DashboardCanvas.tsx  |  690 +++++++--
 frontend/components/dash/DashboardCard.tsx    |  247 ++--
 frontend/components/dash/DashboardLayout.tsx  |   29 +-
 frontend/components/dash/TemplateRenderer.tsx |   54 +
 .../dash/TemplateResponsivePreview.tsx        |    1 +
 .../screen/OptimizedButtonComponent.tsx       |    2 +-
 frontend/components/screen/ScreenDesigner.tsx |  725 ++++++++-
 frontend/components/screen/ViewTabBar.tsx     |   21 +-
 .../ButtonDataflowConfigPanel.tsx             |    2 +-
 .../screen/panels/V2PropertiesPanel.tsx       |    7 +-
 .../components/screen/toolbar/SlimToolbar.tsx |   12 +-
 .../v2/config-panels/V2FieldConfigPanel.tsx   |  188 ++-
 frontend/lib/api/client.ts                    |    8 +-
 frontend/lib/api/dashboard.ts                 |   20 +-
 frontend/lib/layout/lineLayout.ts             |  104 +-
 .../lib/registry/DynamicComponentRenderer.tsx |   10 +-
 .../components/button/ButtonComponent.tsx     |   49 +
 .../components/button/ButtonConfigPanel.tsx   |    2 +-
 .../components/search/SearchComponent.tsx     |   40 +-
 .../components/search/SearchConfigPanel.tsx   |  103 +-
 .../components/table/TableComponent.tsx       |    9 +
 frontend/lib/utils/templateAdapter.ts         |   22 +
 frontend/styles/dashboard.css                 |  118 +-
 frontend/styles/v5-layout.css                 |  114 +-
 .../gbpark/2026-04-22-company-mng-mockup.html | 1315 +++++++++++++++++
 33 files changed, 3964 insertions(+), 560 deletions(-)
 create mode 100644 frontend/app/form-popup/page.tsx
 create mode 100644 notes/gbpark/2026-04-22-company-mng-mockup.html

diff --git a/backend-spring/src/main/java/com/erp/service/EntityJoinService.java b/backend-spring/src/main/java/com/erp/service/EntityJoinService.java
index 834459fe..f3b6e731 100644
--- a/backend-spring/src/main/java/com/erp/service/EntityJoinService.java
+++ b/backend-spring/src/main/java/com/erp/service/EntityJoinService.java
@@ -550,15 +550,147 @@ public class EntityJoinService extends BaseService {
         if (searchConditions == null || searchConditions.isEmpty()) return "";
         StringBuilder sb = new StringBuilder();
         for (Map.Entry<String, Object> e : searchConditions.entrySet()) {
-            if (e.getValue() == null) continue;
+            if (isKeywordSearchKey(e.getKey())) {
+                SearchCondition condition = normalizeSearchCondition(e.getValue());
+                if (condition == null || isBlankValue(condition.value())) continue;
+                appendKeywordSearchCondition(sb, params, tableName, condition);
+                continue;
+            }
             if (!IDENTIFIER_PATTERN.matcher(e.getKey()).matches()) continue;
+            SearchCondition condition = normalizeSearchCondition(e.getValue());
+            if (condition == null) continue;
             if (sb.length() > 0) sb.append(" AND ");
-            sb.append("main.\"").append(e.getKey()).append("\" = ?");
-            params.add(e.getValue());
+            appendSearchCondition(sb, params, e.getKey(), condition);
         }
         return sb.toString();
     }
 
+    @SuppressWarnings("unchecked")
+    private SearchCondition normalizeSearchCondition(Object rawValue) {
+        if (rawValue == null) return null;
+
+        if (rawValue instanceof Map<?, ?> rawMap) {
+            Map<String, Object> map = (Map<String, Object>) rawMap;
+            String operator = String.valueOf(map.getOrDefault("operator", "contains"));
+            Object value = map.get("value");
+
+            if (!"isEmpty".equalsIgnoreCase(operator)
+                    && !"isNotEmpty".equalsIgnoreCase(operator)
+                    && isBlankValue(value)) {
+                return null;
+            }
+
+            return new SearchCondition(operator, value);
+        }
+
+        if (isBlankValue(rawValue)) return null;
+        return new SearchCondition("equals", rawValue);
+    }
+
+    private void appendSearchCondition(StringBuilder sb,
+                                       List<Object> params,
+                                       String columnName,
+                                       SearchCondition condition) {
+        String op = condition.operator();
+        Object value = condition.value();
+        String colExpr = "main.\"" + columnName + "\"";
+
+        switch (op.toLowerCase()) {
+            case "contains" -> {
+                sb.append(colExpr).append("::text ILIKE ?");
+                params.add("%" + value + "%");
+            }
+            case "startswith" -> {
+                sb.append(colExpr).append("::text ILIKE ?");
+                params.add(value + "%");
+            }
+            case "endswith" -> {
+                sb.append(colExpr).append("::text ILIKE ?");
+                params.add("%" + value);
+            }
+            case "notequals" -> {
+                sb.append("COALESCE(").append(colExpr).append("::text, '') <> ?");
+                params.add(String.valueOf(value));
+            }
+            case "isempty" -> sb.append("(").append(colExpr).append(" IS NULL OR ")
+                    .append(colExpr).append("::text = '')");
+            case "isnotempty" -> sb.append("(").append(colExpr).append(" IS NOT NULL AND ")
+                    .append(colExpr).append("::text <> '')");
+            case "greaterthan" -> {
+                sb.append(colExpr).append("::text > ?");
+                params.add(String.valueOf(value));
+            }
+            case "lessthan" -> {
+                sb.append(colExpr).append("::text < ?");
+                params.add(String.valueOf(value));
+            }
+            case "equals", "=", "exact" -> {
+                sb.append(colExpr).append("::text = ?");
+                params.add(String.valueOf(value));
+            }
+            default -> {
+                sb.append(colExpr).append("::text ILIKE ?");
+                params.add("%" + value + "%");
+            }
+        }
+    }
+
+    private void appendKeywordSearchCondition(StringBuilder sb,
+                                              List<Object> params,
+                                              String tableName,
+                                              SearchCondition condition) {
+        List<String> columns = getKeywordSearchColumns(tableName);
+        if (columns.isEmpty()) return;
+
+        if (sb.length() > 0) sb.append(" AND ");
+        sb.append("(");
+        for (int i = 0; i < columns.size(); i++) {
+            if (i > 0) sb.append(" OR ");
+            sb.append("main.\"").append(columns.get(i)).append("\"::text ILIKE ?");
+            params.add("%" + String.valueOf(condition.value()) + "%");
+        }
+        sb.append(")");
+    }
+
+    private List<String> getKeywordSearchColumns(String tableName) {
+        validateIdentifier(tableName);
+
+        String sql = """
+                SELECT column_name
+                FROM information_schema.columns
+                WHERE table_schema = current_schema()
+                  AND table_name = ?
+                ORDER BY ordinal_position
+                """;
+
+        List<String> allColumns = jdbcTemplate.queryForList(sql, String.class, tableName);
+
+        return allColumns.stream()
+                .filter(Objects::nonNull)
+                .filter(col -> IDENTIFIER_PATTERN.matcher(col).matches())
+                .filter(col -> !Set.of(
+                        "company_code",
+                        "created_date",
+                        "updated_date",
+                        "created_at",
+                        "updated_at",
+                        "create_user",
+                        "update_user"
+                ).contains(col))
+                .toList();
+    }
+
+    private boolean isKeywordSearchKey(String key) {
+        return "keyword".equalsIgnoreCase(key)
+                || "search".equalsIgnoreCase(key)
+                || "searchterm".equalsIgnoreCase(key)
+                || "q".equalsIgnoreCase(key);
+    }
+
+    private boolean isBlankValue(Object value) {
+        return value == null || value.toString().isBlank() || "__ALL__".equals(value.toString());
+    }
+
     private void validateIdentifier(String name) {
         if (name == null || !IDENTIFIER_PATTERN.matcher(name).matches()) {
             throw new IllegalArgumentException("유효하지 않은 식별자: " + name);
@@ -586,4 +718,6 @@ public class EntityJoinService extends BaseService {
             return total == 0 ? 0.0 : (double) hits / total;
         }
     }
+
+    private record SearchCondition(String operator, Object value) {}
 }
diff --git a/frontend/app/(main)/admin/menu/page.tsx b/frontend/app/(main)/admin/menu/page.tsx
index dc5bb15f..8057336b 100644
--- a/frontend/app/(main)/admin/menu/page.tsx
+++ b/frontend/app/(main)/admin/menu/page.tsx
@@ -24,10 +24,9 @@ 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";
+type View = "overview" | "settings";
 
 export default function MenuPage() {
   const { refreshMenus } = useMenu();
@@ -412,15 +411,6 @@ export default function MenuPage() {
                   </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>
 
@@ -445,7 +435,6 @@ export default function MenuPage() {
                 </div>
               </div>
             )}
-            {view === "activity" && <MenuActivityPanel />}
           </section>
         </div>
       </LoadingOverlay>
diff --git a/frontend/app/form-popup/page.tsx b/frontend/app/form-popup/page.tsx
new file mode 100644
index 00000000..107b0635
--- /dev/null
+++ b/frontend/app/form-popup/page.tsx
@@ -0,0 +1,232 @@
+'use client';
+
+/**
+ * Form Popup — 등록/수정 팝업 창 (window.open 으로 열리는 별도 브라우저 창).
+ *
+ * URL: /form-popup?templateId={id}&mode={create|edit}&key={uniqueKey}
+ *
+ * 초기 데이터는 부모 창(DashboardCard)이 localStorage 에 임시 저장하고,
+ * 팝업이 mount 시 key 로 읽어 즉시 삭제한다. 저장 성공 시 부모 창에
+ * postMessage({ type: 'form-popup-saved', key, mode }) 를 보내고 자동 닫힘.
+ *
+ * (main) 레이아웃 바깥이라 헤더/사이드바 없이 깔끔한 팝업 UI.
+ */
+
+import { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import { toast } from 'sonner';
+import { X } from 'lucide-react';
+import { FcForm } from '@/components/fc';
+import { getTemplateInfo } from '@/lib/api/template';
+import { fcInsert, fcUpdate } from '@/lib/api/fcData';
+import {
+  TemplateRenderer,
+  type TemplateRenderContext,
+} from '@/components/dash/TemplateRenderer';
+import type { FieldConfig, Template } from '@/types/invyone-component';
+
+export default function FormPopupPage() {
+  return (
+    <Suspense fallback={<div className="p-6 text-sm">로딩 중...</div>}>
+      <FormPopupContent />
+    </Suspense>
+  );
+}
+
+function FormPopupContent() {
+  const params = useSearchParams();
+  const templateId = params.get('templateId') ?? '';
+  const mode = (params.get('mode') ?? 'create') as 'create' | 'edit';
+  const key = params.get('key') ?? '';
+
+  const [template, setTemplate] = useState<Template | null>(null);
+  const [fields, setFields] = useState<FieldConfig[]>([]);
+  const [primaryTable, setPrimaryTable] = useState('');
+  const [templateName, setTemplateName] = useState('');
+  const [formRow, setFormRow] = useState<Record<string, any> | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!templateId) {
+      setError('templateId 가 없습니다');
+      setLoaded(true);
+      return;
+    }
+
+    // localStorage 에서 부모가 넘겨준 초기 데이터 읽기 + 즉시 삭제 (1회성)
+    let seededName = '';
+    let seededTable = '';
+    try {
+      const raw = localStorage.getItem(`form-popup:${key}`);
+      if (raw) {
+        const data = JSON.parse(raw);
+        setFormRow(data.initialRow ?? {});
+        if (data.primaryTable) {
+          seededTable = String(data.primaryTable);
+          setPrimaryTable(seededTable);
+        }
+        if (data.templateName) {
+          seededName = String(data.templateName);
+          setTemplateName(seededName);
+        }
+        localStorage.removeItem(`form-popup:${key}`);
+      } else {
+        setFormRow({});
+      }
+    } catch {
+      setFormRow({});
+    }
+
+    getTemplateInfo(templateId)
+      .then((tpl) => {
+        if (tpl) {
+          setTemplate(tpl as Template);
+          if (Array.isArray((tpl as any).fields)) {
+            setFields((tpl as any).fields as FieldConfig[]);
+          }
+          if (!seededName) setTemplateName((tpl as any).name ?? '');
+          if (!seededTable) {
+            const pt =
+              (tpl as any).primary_table ?? (tpl as any).PRIMARY_TABLE ?? '';
+            setPrimaryTable(pt);
+          }
+        }
+        setLoaded(true);
+      })
+      .catch((err: any) => {
+        setError(err?.message ?? '템플릿 로드 실패');
+        setLoaded(true);
+      });
+  }, [templateId, key]);
+
+  const pkColumn = useMemo(() => {
+    const pkField = fields.find((f) => f.pk);
+    return pkField?.column ?? '';
+  }, [fields]);
+
+  const handleFormRowChange = useCallback((patch: Record<string, any>) => {
+    setFormRow((prev) => ({ ...(prev ?? {}), ...patch }));
+  }, []);
+
+  const handleSubmit = useCallback(
+    async (rowOverride?: Record<string, any>) => {
+      const row = rowOverride ?? formRow;
+      if (!row || !primaryTable) return;
+      try {
+        if (mode === 'create') {
+          await fcInsert(primaryTable, row);
+        } else {
+          if (!pkColumn) throw new Error('PK 컬럼이 없습니다');
+          const id = String(row[pkColumn] ?? '');
+          if (!id) throw new Error('PK 값이 비어있습니다');
+          await fcUpdate(primaryTable, id, row);
+        }
+        try {
+          window.opener?.postMessage(
+            { type: 'form-popup-saved', key, mode },
+            window.location.origin,
+          );
+        } catch {
+          /* opener 접근 실패해도 팝업은 닫음 */
+        }
+        window.close();
+      } catch (err: any) {
+        console.error('[FormPopup] 저장 실패:', err);
+        toast.error(err?.message ?? '저장 실패');
+      }
+    },
+    [formRow, primaryTable, pkColumn, mode, key],
+  );
+
+  const handleCancel = useCallback(() => {
+    window.close();
+  }, []);
+
+  const hasCustomView = useMemo(() => {
+    const view = (template?.views as any)?.[mode];
+    if (!view) return false;
+    if (Array.isArray(view)) return view.length > 0;
+    if (Array.isArray(view.blocks)) return view.blocks.length > 0;
+    if (Array.isArray(view.components)) return view.components.length > 0;
+    return false;
+  }, [template, mode]);
+
+  const context: TemplateRenderContext = useMemo(
+    () => ({
+      fields,
+      data: [],
+      loading: false,
+      primaryTable,
+      selectedRow: null,
+      totalCount: 0,
+      page: 1,
+      pageSize: 20,
+      searchParams: {},
+      onSearch: () => {},
+      onRowSelect: () => {},
+      onPageChange: () => {},
+      onAdd: () => {},
+      onEdit: () => {},
+      onDelete: () => {},
+      formRow: formRow ?? undefined,
+      onFormRowChange: handleFormRowChange,
+      onFormSubmit: () => handleSubmit(),
+      onFormCancel: handleCancel,
+    }),
+    [
+      fields,
+      primaryTable,
+      formRow,
+      handleFormRowChange,
+      handleSubmit,
+      handleCancel,
+    ],
+  );
+
+  if (!loaded) return <div className="p-6 text-sm">로딩 중...</div>;
+  if (error)
+    return (
+      <div className="p-6 text-sm text-destructive">⚠ {error}</div>
+    );
+  if (!template)
+    return (
+      <div className="p-6 text-sm text-destructive">
+        템플릿을 찾을 수 없습니다
+      </div>
+    );
+
+  const title = `${templateName || '템플릿'} ${mode === 'create' ? '등록' : '수정'}`;
+
+  return (
+    <div className="bg-background flex h-screen flex-col">
+      <div className="border-border flex items-center justify-between border-b px-4 py-2">
+        <span className="text-sm font-semibold">{title}</span>
+        <button
+          type="button"
+          onClick={handleCancel}
+          className="hover:bg-muted flex h-7 w-7 items-center justify-center rounded"
+          title="닫기 (Esc)"
+        >
+          <X size={14} />
+        </button>
+      </div>
+      <div className="flex-1 overflow-auto p-4">
+        {hasCustomView ? (
+          <TemplateRenderer
+            template={template}
+            context={context}
+            view={mode}
+          />
+        ) : (
+          <FcForm
+            fields={fields}
+            loadRow={formRow ?? {}}
+            onSubmit={(row) => handleSubmit(row)}
+            config={{ columns: 2 }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a44c94d9..822d2755 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -130,43 +130,45 @@
   --sidebar-ring: 245 75% 57%;
 }
 
-/* ===== Dark Theme (Deep Space) ===== */
+/* ===== Dark Theme (Neutral Dark) =====
+   2026-04-22: hue 240 → 220 으로 이동, 채도 확 낮춰서 중성 다크로.
+   primary/accent(보라·시안·핑크) 는 v5 정체성 유지. 배경/서피스만 무채색화. */
 .dark {
-  /* 배경: 딥 스페이스 — 보라빛 암흑 */
-  --background: 240 20% 3.5%;
-  --foreground: 240 10% 95%;
+  /* 배경: 중성 다크 */
+  --background: 220 6% 5%;
+  --foreground: 220 6% 95%;
 
-  /* 카드: 성운 표면 — 배경보다 약간 밝은 우주 공간 */
-  --card: 240 18% 7%;
-  --card-foreground: 240 10% 95%;
+  /* 카드: 배경보다 약간 밝은 중성 다크 */
+  --card: 220 6% 9%;
+  --card-foreground: 220 6% 95%;
 
-  /* 팝오버: 카드와 동일한 우주 공간 */
-  --popover: 240 18% 7%;
-  --popover-foreground: 240 10% 95%;
+  /* 팝오버: 카드와 동일 */
+  --popover: 220 6% 9%;
+  --popover-foreground: 220 6% 95%;
 
-  /* Primary: 코스믹 바이올렛-블루 — 성운 핵심 컬러 */
+  /* Primary: 코스믹 바이올렛-블루 — v5 정체성 유지 */
   --primary: 245 85% 68%;
   --primary-foreground: 0 0% 100%;
 
-  /* Secondary: 우주 먼지 — 깊은 슬레이트 */
-  --secondary: 240 15% 14%;
-  --secondary-foreground: 240 10% 90%;
+  /* Secondary: 중성 슬레이트 */
+  --secondary: 220 5% 15%;
+  --secondary-foreground: 220 6% 90%;
 
-  /* Muted: 암흑 성운 — 차분한 보라빛 회색 */
-  --muted: 240 12% 12%;
-  --muted-foreground: 240 8% 58%;
+  /* Muted: 차분한 중성 회색 */
+  --muted: 220 5% 13%;
+  --muted-foreground: 220 5% 58%;
 
-  /* Accent: 은하 표면 — secondary보다 약간 밝게 */
-  --accent: 240 15% 18%;
-  --accent-foreground: 240 10% 90%;
+  /* Accent: secondary 보다 약간 밝게 */
+  --accent: 220 5% 18%;
+  --accent-foreground: 220 6% 90%;
 
   /* Destructive: 초신성 레드 */
   --destructive: 0 75% 55%;
   --destructive-foreground: 0 0% 100%;
 
-  /* Border: 스타더스트 라인 */
-  --border: 240 12% 15%;
-  --input: 240 12% 15%;
+  /* Border: 중성 라인 */
+  --border: 220 5% 16%;
+  --input: 220 5% 16%;
   --ring: 245 85% 68%;
 
   /* Success: 오로라 그린 */
@@ -188,14 +190,14 @@
   --chart-4: 38 90% 62%;
   --chart-5: 340 78% 62%;
 
-  /* Sidebar: 이벤트 호라이즌 — 메인 배경보다 더 깊은 우주 */
-  --sidebar-background: 240 22% 5%;
-  --sidebar-foreground: 240 10% 90%;
+  /* Sidebar: 메인 배경보다 살짝 더 깊은 중성 다크 */
+  --sidebar-background: 220 6% 7%;
+  --sidebar-foreground: 220 6% 90%;
   --sidebar-primary: 245 85% 68%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 15% 14%;
-  --sidebar-accent-foreground: 240 10% 90%;
-  --sidebar-border: 240 12% 13%;
+  --sidebar-accent: 220 5% 15%;
+  --sidebar-accent-foreground: 220 6% 90%;
+  --sidebar-border: 220 5% 14%;
   --sidebar-ring: 245 85% 68%;
 }
 
@@ -209,6 +211,31 @@ body {
   background: hsl(var(--background));
 }
 
+/* ===== 다크모드 테마 컬러 워시 (2026-04-22) =====
+   중성 다크 배경 위에 primary 컬러를 3개의 거대 라디얼로 부드럽게 깔아
+   "전체에 은은하게 테마 컬러가 감도는" 느낌을 냄.
+   --v5-primary-rgb 참조 → data-color 프리셋(purple/blue/green/orange/pink/cyan)
+   바꾸면 자동으로 그 색으로 전환.
+   background-attachment: fixed 로 스크롤해도 viewport 기준 유지.
+   로그인은 .v5-cosmos 가 덮어서 자연 가려짐. */
+.dark body {
+  background:
+    /* 좌상단 스팟 */
+    radial-gradient(ellipse 1600px 1100px at 15% 10%,
+      rgba(var(--v5-primary-rgb), 0.05) 0%,
+      transparent 55%),
+    /* 우하단 스팟 */
+    radial-gradient(ellipse 1400px 1000px at 85% 95%,
+      rgba(var(--v5-primary-rgb), 0.035) 0%,
+      transparent 55%),
+    /* 중앙 얕은 wash — 가장자리 어두워짐 방지 */
+    radial-gradient(ellipse 1800px 1200px at 50% 50%,
+      rgba(var(--v5-primary-rgb), 0.018) 0%,
+      transparent 70%),
+    hsl(var(--background));
+  background-attachment: fixed;
+}
+
 /* Button 기본 커서 스타일 */
 button {
   cursor: pointer;
diff --git a/frontend/components/admin/MenuFormModal.tsx b/frontend/components/admin/MenuFormModal.tsx
index c97b745a..c06463f5 100644
--- a/frontend/components/admin/MenuFormModal.tsx
+++ b/frontend/components/admin/MenuFormModal.tsx
@@ -18,7 +18,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { toast } from "sonner";
 import { ChevronDown, Search } from "lucide-react";
-import { MENU_MANAGEMENT_KEYS } from "@/lib/utils/multilang";
+import { MENU_MANAGEMENT_KEYS, getMenuTextSync } from "@/lib/utils/multilang";
 import { ScreenDefinition } from "@/types/screen";
 import { MenuIconPicker } from "./MenuIconPicker";
 
@@ -62,8 +62,9 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
   // });
 
   // 다국어 텍스트 가져오기 함수
+  // 우선순위: 부모가 내려준 uiTexts > multilang defaultTexts(한국어) > fallback > key
   const getText = (key: string, fallback?: string): string => {
-    return uiTexts[key] || fallback || key;
+    return uiTexts[key] || getMenuTextSync(key, "KR") || fallback || key;
   };
 
   // console.log("🔍 MenuFormModal 컴포넌트 마운트됨");
diff --git a/frontend/components/admin/MenuIconPicker.tsx b/frontend/components/admin/MenuIconPicker.tsx
index 76919bc8..31263420 100644
--- a/frontend/components/admin/MenuIconPicker.tsx
+++ b/frontend/components/admin/MenuIconPicker.tsx
@@ -359,7 +359,8 @@ const KOREAN_KEYWORDS: Record<string, string[]> = {
 };
 
 interface IconEntry {
-  name: string;
+  name: string;           // 원본 Lucide 이름 (저장/검색 키)
+  displayName: string;    // UI 표시용 — KOREAN_KEYWORDS 첫 단어, 없으면 name
   component: IconComponent;
   keywords: string[];
 }
@@ -380,11 +381,18 @@ const ALL_ICONS: IconEntry[] = (() => {
     const koreanKw = KOREAN_KEYWORDS[name] || [];
     entries.push({
       name,
+      displayName: koreanKw[0] || name,
       component: comp as IconComponent,
       keywords: [...koreanKw, name.toLowerCase()],
     });
   }
-  return entries.sort((a, b) => a.name.localeCompare(b.name));
+  // 한글 표시명 기준으로 정렬하되, 한글 매핑이 없어 영문 name 인 항목은 뒤로
+  return entries.sort((a, b) => {
+    const aKo = a.displayName !== a.name;
+    const bKo = b.displayName !== b.name;
+    if (aKo !== bKo) return aKo ? -1 : 1;
+    return a.displayName.localeCompare(b.displayName, "ko");
+  });
 })();
 
 export function getIconComponent(iconName: string | null | undefined): IconComponent | null {
@@ -456,20 +464,20 @@ export const MenuIconPicker: React.FC<MenuIconPickerProps> = ({
   const SelectedIconComponent = selectedIcon?.component;
 
   return (
-    <div className="space-y-2">
-      <Label>{label}</Label>
+    <div className="menu-icon-picker space-y-2">
+      {label ? <Label>{label}</Label> : null}
       <div className="relative" ref={containerRef}>
         <Button
           type="button"
           variant="outline"
           onClick={() => setIsOpen(!isOpen)}
-          className="h-10 w-full justify-between text-sm"
+          className="menu-icon-picker-trigger h-10 w-full justify-between text-sm"
         >
           <div className="flex items-center gap-2">
             {SelectedIconComponent ? (
               <>
                 <SelectedIconComponent className="h-4 w-4" />
-                <span>{selectedIcon?.name}</span>
+                <span>{selectedIcon?.displayName ?? selectedIcon?.name}</span>
               </>
             ) : (
               <span className="text-muted-foreground">아이콘을 선택하세요 (선택사항)</span>
@@ -522,19 +530,19 @@ export const MenuIconPicker: React.FC<MenuIconPickerProps> = ({
                     <button
                       key={entry.name}
                       type="button"
-                      title={entry.name}
+                      title={`${entry.displayName} (${entry.name})`}
                       onClick={() => {
                         onChange(entry.name);
                         setIsOpen(false);
                         setSearchText("");
                       }}
                       className={cn(
-                        "flex flex-col items-center justify-center rounded-md p-2 transition-colors hover:bg-accent",
+                        "menu-icon-picker-option flex min-h-[68px] flex-col items-center justify-center rounded-md p-2 transition-colors hover:bg-accent",
                         value === entry.name && "bg-primary/10 ring-primary ring-1"
                       )}
                     >
-                      <IconComp className="h-5 w-5" />
-                      <span className="mt-1 max-w-full truncate text-[9px] leading-tight">{entry.name}</span>
+                      <IconComp className="h-5 w-5 shrink-0" />
+                      <span className="mt-1 max-w-full truncate text-[9px] leading-tight">{entry.displayName}</span>
                     </button>
                   );
                 })}
diff --git a/frontend/components/admin/menu/MenuSettingsPanel.tsx b/frontend/components/admin/menu/MenuSettingsPanel.tsx
index a5ae13dc..17a2a44c 100644
--- a/frontend/components/admin/menu/MenuSettingsPanel.tsx
+++ b/frontend/components/admin/menu/MenuSettingsPanel.tsx
@@ -3,7 +3,9 @@
 import React, { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { menuApi } from "@/lib/api/menu";
-import type { MenuItem, MenuFormData } from "@/lib/api/menu";
+import type { MenuItem, MenuFormData, LangKey } from "@/lib/api/menu";
+import { companyAPI } from "@/lib/api/company";
+import { MenuIconPicker } from "@/components/admin/MenuIconPicker";
 
 interface Props {
   menu: MenuItem;
@@ -13,6 +15,12 @@ interface Props {
   onOpenAdvanced: (menuId: string) => void;
 }
 
+interface CompanyOption {
+  company_code: string;
+  company_name: string;
+  status?: string;
+}
+
 interface FormState {
   menuNameKor: string;
   menuUrl: string;
@@ -42,10 +50,50 @@ export function MenuSettingsPanel({ menu, parentName, onSaved, onDelete, onOpenA
   const [form, setForm] = useState<FormState>(initial);
   const [saving, setSaving] = useState(false);
 
+  // 드롭다운 옵션 소스
+  const [companies, setCompanies] = useState<CompanyOption[]>([]);
+  const [langKeys, setLangKeys] = useState<LangKey[]>([]);
+
   useEffect(() => {
     setForm(toForm(menu));
   }, [menu]);
 
+  // 회사 목록 로드 (1회)
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const list = await companyAPI.getList({ status: "active" });
+        if (alive) setCompanies(list || []);
+      } catch {
+        /* silent - 기본값 사용 */
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  // 다국어 키 로드 (companyCode 변경 시 재로드, 활성 키만 필터)
+  useEffect(() => {
+    let alive = true;
+    (async () => {
+      try {
+        const resp = await menuApi.getLangKeys({
+          companyCode: form.companyCode || "*",
+        });
+        if (alive && resp.success && resp.data) {
+          setLangKeys(resp.data.filter((k) => k.isActive === "Y"));
+        }
+      } catch {
+        if (alive) setLangKeys([]);
+      }
+    })();
+    return () => {
+      alive = false;
+    };
+  }, [form.companyCode]);
+
   const isDirty =
     form.menuNameKor !== initial.menuNameKor ||
     form.menuUrl !== initial.menuUrl ||
@@ -148,21 +196,29 @@ export function MenuSettingsPanel({ menu, parentName, onSaved, onDelete, onOpenA
           <div className="v5-mm-sv-row-2">
             <div className="v5-mm-sv-row">
               <label>다국어 키</label>
-              <input
+              <select
                 className="v5-mm-inp"
                 value={form.langKey}
                 onChange={(e) => set("langKey", e.target.value)}
-                placeholder="예) menu.management"
-              />
+              >
+                <option value="">(사용 안 함)</option>
+                {langKeys.map((k) => (
+                  <option key={k.keyId} value={k.langKey}>
+                    {k.langKey}
+                    {k.description ? ` — ${k.description}` : ""}
+                  </option>
+                ))}
+              </select>
             </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 className="v5-mm-iconpicker-slot">
+                <MenuIconPicker
+                  value={form.menuIcon}
+                  onChange={(iconName) => set("menuIcon", iconName)}
+                  label=""
+                />
+              </div>
             </div>
           </div>
           <div className="v5-mm-sv-row">
@@ -204,12 +260,19 @@ export function MenuSettingsPanel({ menu, parentName, onSaved, onDelete, onOpenA
           <div className="v5-mm-sv-row-2">
             <div className="v5-mm-sv-row">
               <label>회사</label>
-              <input
+              <select
                 className="v5-mm-inp"
-                value={form.companyCode}
+                value={form.companyCode || "*"}
                 onChange={(e) => set("companyCode", e.target.value)}
-                placeholder="* 또는 회사 코드"
-              />
+              >
+                <option value="*">공용 (*)</option>
+                {companies.map((c) => (
+                  <option key={c.company_code} value={c.company_code}>
+                    {c.company_name}
+                    {c.company_code ? ` (${c.company_code})` : ""}
+                  </option>
+                ))}
+              </select>
             </div>
             <div className="v5-mm-sv-row">
               <label>부모</label>
diff --git a/frontend/components/admin/menu/MenuTreePanel.tsx b/frontend/components/admin/menu/MenuTreePanel.tsx
index c49d1638..47a242f8 100644
--- a/frontend/components/admin/menu/MenuTreePanel.tsx
+++ b/frontend/components/admin/menu/MenuTreePanel.tsx
@@ -184,24 +184,26 @@ const NodeRow: React.FC<RowProps> = ({
         </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}
-            />
-          ))}
+      {hasChildren && (
+        <div className={`v5-mm-sub${open ? " is-open" : ""}`}>
+          <div className="v5-mm-sub-inner">
+            {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>
         </div>
       )}
     </>
diff --git a/frontend/components/dash/DashboardCanvas.tsx b/frontend/components/dash/DashboardCanvas.tsx
index 72f4b74c..2b40ada8 100644
--- a/frontend/components/dash/DashboardCanvas.tsx
+++ b/frontend/components/dash/DashboardCanvas.tsx
@@ -1,13 +1,13 @@
-'use client';
+"use client";
 
-import { useRef, useCallback, useEffect, useState, forwardRef, type ReactNode } from 'react';
-import { Plus, Save, X } from 'lucide-react';
-import { useDashboardStore } from '@/stores/dashboardStore';
-import { useControlMode } from '@/components/control/hooks/useControlMode';
-import { deleteDashboardCard } from '@/lib/api/dashMenu';
-import { toast } from 'sonner';
-import { DashboardCard } from './DashboardCard';
-import { DashboardEmpty } from './DashboardEmpty';
+import { useRef, useCallback, useEffect, useState, forwardRef, type ReactNode } from "react";
+import { Plus, Save, X } from "lucide-react";
+import { useDashboardStore } from "@/stores/dashboardStore";
+import { useControlMode } from "@/components/control/hooks/useControlMode";
+import { deleteDashboardCard } from "@/lib/api/dashMenu";
+import { toast } from "sonner";
+import { DashboardCard } from "./DashboardCard";
+import { DashboardEmpty } from "./DashboardEmpty";
 
 /**
  * AnimatedFab — enter/exit 애니메이션을 가진 플로팅 액션 바.
@@ -31,7 +31,7 @@ function AnimatedFab({ show, children }: { show: boolean; children: ReactNode })
     }
   }, [show, rendered]);
   if (!rendered) return null;
-  return <div className={`ud-fab${closing ? ' closing' : ''}`}>{children}</div>;
+  return <div className={`ud-fab${closing ? "closing" : ""}`}>{children}</div>;
 }
 
 interface DashboardCanvasProps {
@@ -41,83 +41,411 @@ interface DashboardCanvasProps {
   controlMode?: boolean;
 }
 
-export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(function DashboardCanvas({
-  dashboardName,
-  onOpenLibrary,
-  onOpenSettings,
-  controlMode: controlActive,
-}, externalRef) {
+// ═══ 자유 배치 + 반응형을 위한 상수/유틸 ═══
+// 저장 단위: % (0~100). 기존 px 데이터는 로드 시 자동 변환됨.
+const SNAP_THRESHOLD = 8; // px — 스냅 걸리는 임계거리
+const MIN_CARD_W_PX = 220;
+const MIN_CARD_H_PX = 140;
+const INTERACTION_THRESHOLD = 4;
+
+type Dir = "" | "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw";
+
+// 값이 px 로 저장된 건지 판별 — % 는 0~100, px 는 150+ 가 일반
+function isValuePx(val: number): boolean {
+  return val > 100;
+}
+
+function pxToPct(px: number, container: number): number {
+  if (!container || container <= 0) return 0;
+  return (px / container) * 100;
+}
+
+function pctToPx(pct: number, container: number): number {
+  return (pct / 100) * container;
+}
+
+function round3(n: number): number {
+  return Math.round(n * 1000) / 1000;
+}
+
+// 카드 좌표를 항상 px 로 해석 (% 면 container 로 환산)
+function readCardPx(card: Record<string, unknown>, cw: number, ch: number) {
+  const x = Number(card.position_x ?? card.POSITION_X ?? 0);
+  const y = Number(card.position_y ?? card.POSITION_Y ?? 0);
+  const w = Number(card.width ?? card.WIDTH ?? 0);
+  const h = Number(card.height ?? card.HEIGHT ?? 0);
+  return {
+    x: isValuePx(x) ? x : pctToPx(x, cw),
+    y: isValuePx(y) ? y : pctToPx(y, ch),
+    w: isValuePx(w) ? w : pctToPx(w, cw),
+    h: isValuePx(h) ? h : pctToPx(h, ch),
+  };
+}
+
+export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(function DashboardCanvas(
+  { dashboardName, onOpenLibrary, onOpenSettings, controlMode: controlActive },
+  externalRef,
+) {
   const cards = useDashboardStore((s) => s.cards);
   const editMode = useDashboardStore((s) => s.editMode);
   const setEditMode = useDashboardStore((s) => s.setEditMode);
   const updateCard = useDashboardStore((s) => s.updateCard);
   const removeCard = useDashboardStore((s) => s.removeCard);
+  const setCards = useDashboardStore((s) => s.setCards);
   const activeDashboardId = useDashboardStore((s) => s.activeDashboardId);
   const toggleControlMode = useControlMode((s) => s.toggleControlMode);
   const internalRef = useRef<HTMLDivElement>(null);
   const canvasRef = (externalRef as React.RefObject<HTMLDivElement | null>) ?? internalRef;
+  const [canvasSize, setCanvasSize] = useState({ cw: 0, ch: 0 });
+
+  // 스냅 가이드 라인 (시각 피드백)
+  const [guides, setGuides] = useState<{ v: number[]; h: number[] }>({ v: [], h: [] });
+
   const dragRef = useRef<{
     cardId: string;
-    startX: number; startY: number;
-    origLeft: number; origTop: number;
-    origW: number; origH: number;
-    mode: 'drag' | 'resize';
+    startX: number;
+    startY: number;
+    origLeft: number;
+    origTop: number; // px
+    origW: number;
+    origH: number; // px
+    liveLeft: number;
+    liveTop: number;
+    liveW: number;
+    liveH: number;
+    hasMoved: boolean;
+    activated: boolean;
+    mode: "drag" | "resize";
+    dir: Dir;
     el: HTMLElement;
   } | null>(null);
 
-  // 캔버스 경계 clamp
-  const clamp = useCallback((l: number, t: number, w: number, h: number) => {
+  const getCanvasSize = useCallback(() => {
     const cv = canvasRef.current;
-    if (!cv) return { l, t, w, h };
-    const cw = cv.clientWidth;
-    const ch = cv.clientHeight;
-    w = Math.min(w, cw);
-    h = Math.min(h, ch);
-    l = Math.max(0, Math.min(l, cw - w));
-    t = Math.max(0, Math.min(t, ch - h));
-    return { l, t, w, h };
-  }, []);
+    const rect = cv?.getBoundingClientRect();
+    return {
+      cw: rect?.width || cv?.clientWidth || canvasSize.cw || 1000,
+      ch: rect?.height || cv?.clientHeight || canvasSize.ch || 600,
+    };
+  }, [canvasRef, canvasSize.ch, canvasSize.cw]);
 
-  // 마우스 다운 → 드래그/리사이즈 시작
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (!editMode) return;
-    const target = e.target as HTMLElement;
+  useEffect(() => {
+    const cv = canvasRef.current;
+    if (!cv) return;
 
-    // 버튼/입력/select 클릭은 무시 (단, 리사이즈 핸들은 통과)
-    const isResize = target.closest('[data-resize]') !== null;
-    if (!isResize) {
-      if (target.closest('button') || target.closest('input') || target.closest('select') || target.closest('textarea')) return;
-    }
-
-    // ★ wrapper div(data-card-id 가진 것)를 찾아야 함 — .dash-card는 그 안의 div
-    const wrapperEl = target.closest('[data-card-id]') as HTMLElement;
-    if (!wrapperEl) return;
-
-    const cardId = wrapperEl.dataset.cardId;
-    if (!cardId) return;
-
-    e.preventDefault();
-
-    dragRef.current = {
-      cardId,
-      startX: e.clientX,
-      startY: e.clientY,
-      origLeft: wrapperEl.offsetLeft,
-      origTop: wrapperEl.offsetTop,
-      origW: wrapperEl.offsetWidth,
-      origH: wrapperEl.offsetHeight,
-      mode: isResize ? 'resize' : 'drag',
-      el: wrapperEl,
+    const syncSize = () => {
+      const rect = cv.getBoundingClientRect();
+      setCanvasSize({
+        cw: rect.width || cv.clientWidth,
+        ch: rect.height || cv.clientHeight,
+      });
     };
 
-    // 시각 피드백은 내부 .dash-card에 적용
-    const cardEl = wrapperEl.querySelector('.dash-card') as HTMLElement | null;
-    if (cardEl) cardEl.classList.add(isResize ? 'resizing' : 'dragging');
-    document.body.style.cursor = isResize ? 'nwse-resize' : 'grabbing';
-    document.body.style.userSelect = 'none';
-  }, [editMode]);
+    syncSize();
+
+    const ro = new ResizeObserver(() => syncSize());
+    ro.observe(cv);
+    window.addEventListener("resize", syncSize);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", syncSize);
+    };
+  }, [canvasRef]);
+
+  // 카드 값 정규화 — px → %, 범위 clamp (5~100, x+w≤100, y+h≤100)
+  // px 데이터 마이그레이션과 오버플로우/NaN 보정을 동시에 처리.
+  // changed=false 면 setCards 안 부르므로 무한루프 방지.
+  useEffect(() => {
+    if (cards.length === 0) return;
+    const { cw, ch } = canvasSize;
+    if (cw <= 0 || ch <= 0) return;
+
+    let changed = false;
+    const migrated = cards.map((c) => {
+      const x = Number(c.position_x ?? c.POSITION_X ?? 5);
+      const y = Number(c.position_y ?? c.POSITION_Y ?? 5);
+      const w = Number(c.width ?? c.WIDTH ?? 40);
+      const h = Number(c.height ?? c.HEIGHT ?? 35);
+
+      // 1) px → %  (NaN 이면 기본값)
+      let nx = Number.isFinite(x) ? (isValuePx(x) ? pxToPct(x, cw) : x) : 5;
+      let ny = Number.isFinite(y) ? (isValuePx(y) ? pxToPct(y, ch) : y) : 5;
+      let nw = Number.isFinite(w) ? (isValuePx(w) ? pxToPct(w, cw) : w) : 40;
+      let nh = Number.isFinite(h) ? (isValuePx(h) ? pxToPct(h, ch) : h) : 35;
+
+      // 2) 범위 clamp — 카드가 항상 캔버스 안에 들어오도록
+      nw = Math.max(5, Math.min(nw, 100));
+      nh = Math.max(5, Math.min(nh, 100));
+      nx = Math.max(0, Math.min(nx, 100 - nw));
+      ny = Math.max(0, Math.min(ny, 100 - nh));
+
+      const changedThis =
+        !Number.isFinite(x) ||
+        !Number.isFinite(y) ||
+        !Number.isFinite(w) ||
+        !Number.isFinite(h) ||
+        Math.abs(nx - x) > 0.01 ||
+        Math.abs(ny - y) > 0.01 ||
+        Math.abs(nw - w) > 0.01 ||
+        Math.abs(nh - h) > 0.01;
+      if (changedThis) {
+        changed = true;
+        return { ...c, position_x: nx, position_y: ny, width: nw, height: nh };
+      }
+      return c;
+    });
+    if (changed) setCards(migrated);
+  }, [cards, canvasSize, setCards]);
+
+  // 드래그 clamp + 스냅 — 리턴은 px
+  const applyDragConstraints = useCallback(
+    (cardId: string, newLeft: number, newTop: number, w: number, h: number) => {
+      const { cw, ch } = getCanvasSize();
+      // 카드가 캔버스보다 크면(마이그레이션 미동작 등 edge) 왼쪽/위 경계로 강제 이동 금지 — origin 유지
+      const maxL = Math.max(0, cw - w);
+      const maxT = Math.max(0, ch - h);
+      let l = w > cw ? newLeft : Math.max(0, Math.min(newLeft, maxL));
+      let t = h > ch ? newTop : Math.max(0, Math.min(newTop, maxT));
+
+      const vGuides: number[] = [];
+      const hGuides: number[] = [];
+
+      // 1) 다른 카드 가장자리 스냅
+      for (const o of cards) {
+        const oid = o.card_id ?? o.CARD_ID;
+        if (oid === cardId) continue;
+        const { x: oL, y: oT, w: oW, h: oH } = readCardPx(o, cw, ch);
+        const oR = oL + oW;
+        const oB = oT + oH;
+
+        // X: left↔otherRight, right↔otherLeft, left↔otherLeft, right↔otherRight
+        if (Math.abs(l - oR) < SNAP_THRESHOLD) {
+          l = oR;
+          vGuides.push(l);
+        } else if (Math.abs(l + w - oL) < SNAP_THRESHOLD) {
+          l = oL - w;
+          vGuides.push(oL);
+        } else if (Math.abs(l - oL) < SNAP_THRESHOLD) {
+          l = oL;
+          vGuides.push(l);
+        } else if (Math.abs(l + w - oR) < SNAP_THRESHOLD) {
+          l = oR - w;
+          vGuides.push(oR);
+        }
+
+        // Y
+        if (Math.abs(t - oB) < SNAP_THRESHOLD) {
+          t = oB;
+          hGuides.push(t);
+        } else if (Math.abs(t + h - oT) < SNAP_THRESHOLD) {
+          t = oT - h;
+          hGuides.push(oT);
+        } else if (Math.abs(t - oT) < SNAP_THRESHOLD) {
+          t = oT;
+          hGuides.push(t);
+        } else if (Math.abs(t + h - oB) < SNAP_THRESHOLD) {
+          t = oB - h;
+          hGuides.push(oB);
+        }
+      }
+
+      // 2) 캔버스 경계 스냅 (0 / cw / ch)
+      if (Math.abs(l) < SNAP_THRESHOLD) {
+        l = 0;
+        vGuides.push(0);
+      }
+      if (Math.abs(l + w - cw) < SNAP_THRESHOLD) {
+        l = cw - w;
+        vGuides.push(cw);
+      }
+      if (Math.abs(t) < SNAP_THRESHOLD) {
+        t = 0;
+        hGuides.push(0);
+      }
+      if (Math.abs(t + h - ch) < SNAP_THRESHOLD) {
+        t = ch - h;
+        hGuides.push(ch);
+      }
+
+      // 3) 최종 clamp — 카드가 캔버스에 맞는 경우만 경계로 clamp, 오버플로우 카드는 그대로 두기
+      if (w <= cw) l = Math.max(0, Math.min(l, cw - w));
+      if (h <= ch) t = Math.max(0, Math.min(t, ch - h));
+
+      return { l, t, vGuides, hGuides };
+    },
+    [cards, getCanvasSize],
+  );
+
+  // 리사이즈 clamp (방향별) — 캔버스 경계를 벗어나지 않게, 최소 크기 보장
+  // 오버플로우 카드 edge: 이미 카드가 캔버스보다 크면 추가 확장은 금지, 축소는 자유롭게.
+  const applyResizeConstraints = useCallback(
+    (cardId: string, origL: number, origT: number, origW: number, origH: number, dx: number, dy: number, dir: Dir) => {
+      const { cw, ch } = getCanvasSize();
+      let l = origL,
+        t = origT,
+        w = origW,
+        h = origH;
+      const vGuides: number[] = [];
+      const hGuides: number[] = [];
+
+      if (dir.includes("e")) {
+        // 확장 한계: 캔버스 오른쪽 경계. 이미 넘치고 있으면 현재 origW 를 한계로 (확장 금지, 축소 허용)
+        const maxW = Math.max(origW, cw - origL);
+        w = Math.max(MIN_CARD_W_PX, Math.min(origW + dx, maxW));
+      }
+      if (dir.includes("s")) {
+        const maxH = Math.max(origH, ch - origT);
+        h = Math.max(MIN_CARD_H_PX, Math.min(origH + dy, maxH));
+      }
+      if (dir.includes("w")) {
+        // w 핸들: dx 만큼 left 증가 + width 감소. 왼쪽 경계(0) 허용 범위 내에서.
+        const minDx = origL > 0 ? -origL : 0; // 캔버스 안에 있을 때만 왼쪽으로 확장 허용
+        const maxShrink = origW - MIN_CARD_W_PX;
+        const clampedDx = Math.max(minDx, Math.min(dx, maxShrink));
+        l = origL + clampedDx;
+        w = origW - clampedDx;
+      }
+      if (dir.includes("n")) {
+        const minDy = origT > 0 ? -origT : 0;
+        const maxShrink = origH - MIN_CARD_H_PX;
+        const clampedDy = Math.max(minDy, Math.min(dy, maxShrink));
+        t = origT + clampedDy;
+        h = origH - clampedDy;
+      }
+
+      let left = l;
+      let top = t;
+      let right = l + w;
+      let bottom = t + h;
+
+      const snapValue = (value: number, targets: number[]) => {
+        let snapped = value;
+        let matched = false;
+        for (const target of targets) {
+          if (Math.abs(value - target) < SNAP_THRESHOLD) {
+            snapped = target;
+            matched = true;
+            break;
+          }
+        }
+        return { snapped, matched };
+      };
+
+      const xTargets = [0, cw];
+      const yTargets = [0, ch];
+      for (const o of cards) {
+        const oid = o.card_id ?? o.CARD_ID;
+        if (oid === cardId) continue;
+        const { x: oL, y: oT, w: oW, h: oH } = readCardPx(o, cw, ch);
+        xTargets.push(oL, oL + oW);
+        yTargets.push(oT, oT + oH);
+      }
+
+      if (dir.includes("e")) {
+        const { snapped, matched } = snapValue(right, xTargets);
+        if (matched && snapped - left >= MIN_CARD_W_PX) {
+          right = snapped;
+          vGuides.push(snapped);
+        }
+      }
+      if (dir.includes("w")) {
+        const { snapped, matched } = snapValue(left, xTargets);
+        if (matched && right - snapped >= MIN_CARD_W_PX) {
+          left = snapped;
+          vGuides.push(snapped);
+        }
+      }
+      if (dir.includes("s")) {
+        const { snapped, matched } = snapValue(bottom, yTargets);
+        if (matched && snapped - top >= MIN_CARD_H_PX) {
+          bottom = snapped;
+          hGuides.push(snapped);
+        }
+      }
+      if (dir.includes("n")) {
+        const { snapped, matched } = snapValue(top, yTargets);
+        if (matched && bottom - snapped >= MIN_CARD_H_PX) {
+          top = snapped;
+          hGuides.push(snapped);
+        }
+      }
+
+      l = left;
+      t = top;
+      w = right - left;
+      h = bottom - top;
+
+      return { l, t, w, h, vGuides, hGuides };
+    },
+    [cards, getCanvasSize],
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!editMode) return;
+      const target = e.target as HTMLElement;
+
+      const resizeEl = target.closest("[data-resize]") as HTMLElement | null;
+      const isResize = !!resizeEl;
+      if (!isResize) {
+        if (
+          target.closest("button") ||
+          target.closest("input") ||
+          target.closest("select") ||
+          target.closest("textarea")
+        )
+          return;
+        if (!target.closest(".dash-card")) return;
+      }
+
+      const wrapperEl = target.closest("[data-card-id]") as HTMLElement;
+      if (!wrapperEl) return;
+
+      const cardId = wrapperEl.dataset.cardId;
+      if (!cardId) return;
+
+      e.preventDefault();
+
+      const dir = (resizeEl?.dataset.resize ?? "") as Dir;
+      const canvasRect = canvasRef.current?.getBoundingClientRect();
+      const wrapperRect = wrapperEl.getBoundingClientRect();
+      const box =
+        canvasRect && wrapperRect.width > 0 && wrapperRect.height > 0
+          ? {
+              x: wrapperRect.left - canvasRect.left,
+              y: wrapperRect.top - canvasRect.top,
+              w: wrapperRect.width,
+              h: wrapperRect.height,
+            }
+          : {
+              x: wrapperEl.offsetLeft,
+              y: wrapperEl.offsetTop,
+              w: wrapperEl.offsetWidth,
+              h: wrapperEl.offsetHeight,
+            };
+
+      dragRef.current = {
+        cardId,
+        startX: e.clientX,
+        startY: e.clientY,
+        origLeft: box.x,
+        origTop: box.y,
+        origW: box.w,
+        origH: box.h,
+        liveLeft: box.x,
+        liveTop: box.y,
+        liveW: box.w,
+        liveH: box.h,
+        hasMoved: false,
+        activated: false,
+        mode: isResize ? "resize" : "drag",
+        dir: isResize ? dir : "",
+        el: wrapperEl,
+      };
+    },
+    [canvasRef, editMode],
+  );
 
-  // 마우스 이동
   useEffect(() => {
     const handleMouseMove = (e: MouseEvent) => {
       const d = dragRef.current;
@@ -125,17 +453,66 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
 
       const dx = e.clientX - d.startX;
       const dy = e.clientY - d.startY;
+      if (!d.hasMoved && Math.max(Math.abs(dx), Math.abs(dy)) < INTERACTION_THRESHOLD) return;
+      d.hasMoved = true;
+      if (!d.activated) {
+        d.activated = true;
+        const cardEl = d.el.querySelector(".dash-card") as HTMLElement | null;
+        if (cardEl) cardEl.classList.add(d.mode === "resize" ? "resizing" : "dragging");
+        d.el.style.left = d.origLeft + "px";
+        d.el.style.top = d.origTop + "px";
+        d.el.style.width = d.origW + "px";
+        d.el.style.height = d.origH + "px";
 
-      if (d.mode === 'drag') {
-        const c = clamp(d.origLeft + dx, d.origTop + dy, d.origW, d.origH);
-        d.el.style.left = c.l + 'px';
-        d.el.style.top = c.t + 'px';
+        const cursorMap: Record<string, string> = {
+          n: "ns-resize",
+          s: "ns-resize",
+          e: "ew-resize",
+          w: "ew-resize",
+          ne: "nesw-resize",
+          sw: "nesw-resize",
+          nw: "nwse-resize",
+          se: "nwse-resize",
+        };
+        document.body.style.cursor = d.mode === "resize" ? (cursorMap[d.dir] ?? "nwse-resize") : "grabbing";
+        document.body.style.userSelect = "none";
+      }
+
+      if (d.mode === "drag") {
+        const { l, t, vGuides, hGuides } = applyDragConstraints(
+          d.cardId,
+          d.origLeft + dx,
+          d.origTop + dy,
+          d.origW,
+          d.origH,
+        );
+        d.liveLeft = l;
+        d.liveTop = t;
+        d.liveW = d.origW;
+        d.liveH = d.origH;
+        d.el.style.left = l + "px";
+        d.el.style.top = t + "px";
+        setGuides({ v: vGuides, h: hGuides });
       } else {
-        const nw = Math.max(220, d.origW + dx);
-        const nh = Math.max(140, d.origH + dy);
-        const c = clamp(d.origLeft, d.origTop, nw, nh);
-        d.el.style.width = c.w + 'px';
-        d.el.style.height = c.h + 'px';
+        const { l, t, w, h, vGuides, hGuides } = applyResizeConstraints(
+          d.cardId,
+          d.origLeft,
+          d.origTop,
+          d.origW,
+          d.origH,
+          dx,
+          dy,
+          d.dir,
+        );
+        d.liveLeft = l;
+        d.liveTop = t;
+        d.liveW = w;
+        d.liveH = h;
+        d.el.style.left = l + "px";
+        d.el.style.top = t + "px";
+        d.el.style.width = w + "px";
+        d.el.style.height = h + "px";
+        setGuides({ v: vGuides, h: hGuides });
       }
     };
 
@@ -143,86 +520,129 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
       const d = dragRef.current;
       if (!d) return;
 
-      // 시각 피드백 제거 (.dash-card)
-      const cardEl = d.el.querySelector('.dash-card') as HTMLElement | null;
-      if (cardEl) cardEl.classList.remove('dragging', 'resizing');
-      document.body.style.cursor = '';
-      document.body.style.userSelect = '';
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
 
-      // 최종 위치를 store에 반영
-      updateCard(d.cardId, {
-        position_x: d.el.offsetLeft,
-        position_y: d.el.offsetTop,
-        width: d.el.offsetWidth,
-        height: d.el.offsetHeight,
-      });
+      if (!d.hasMoved) {
+        dragRef.current = null;
+        setGuides({ v: [], h: [] });
+        return;
+      }
+
+      const cardEl = d.el.querySelector(".dash-card") as HTMLElement | null;
+      if (cardEl) cardEl.classList.remove("dragging", "resizing");
+
+      // px → % 변환해서 store 에 저장 (다음 render 에서 % 로 다시 그려짐)
+      const { cw, ch } = getCanvasSize();
+      if (d.mode === "drag") {
+        const finalW = d.el.getBoundingClientRect().width || d.origW;
+        const finalH = d.el.getBoundingClientRect().height || d.origH;
+        updateCard(d.cardId, {
+          position_x: round3(pxToPct(d.liveLeft, cw)),
+          position_y: round3(pxToPct(d.liveTop, ch)),
+          width: round3(pxToPct(finalW, cw)),
+          height: round3(pxToPct(finalH, ch)),
+        });
+      } else {
+        updateCard(d.cardId, {
+          position_x: round3(pxToPct(d.liveLeft, cw)),
+          position_y: round3(pxToPct(d.liveTop, ch)),
+          width: round3(pxToPct(d.liveW, cw)),
+          height: round3(pxToPct(d.liveH, ch)),
+        });
+      }
 
       dragRef.current = null;
+      setGuides({ v: [], h: [] });
     };
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
     return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [clamp, updateCard]);
+  }, [applyDragConstraints, applyResizeConstraints, getCanvasSize, updateCard]);
 
-  const handleToggleCollapse = useCallback((cardId: string) => {
-    const card = cards.find((c) => (c.card_id ?? c.CARD_ID) === cardId);
-    if (!card) return;
-    const wasCollapsed = card.is_collapsed ?? card.IS_COLLAPSED ?? false;
-    updateCard(cardId, { is_collapsed: !wasCollapsed });
-  }, [cards, updateCard]);
+  const handleToggleCollapse = useCallback(
+    (cardId: string) => {
+      const card = cards.find((c) => (c.card_id ?? c.CARD_ID) === cardId);
+      if (!card) return;
+      const wasCollapsed = card.is_collapsed ?? card.IS_COLLAPSED ?? false;
+      updateCard(cardId, { is_collapsed: !wasCollapsed });
+    },
+    [cards, updateCard],
+  );
 
-  const handleRemove = useCallback(async (cardId: string) => {
-    if (!confirm('이 카드를 삭제하시겠습니까?')) return;
-    if (!activeDashboardId) {
-      toast.error('활성 대시보드가 없습니다');
-      return;
-    }
-    // 낙관적 UI: 먼저 로컬에서 제거 후 서버 호출. 실패 시 알림.
-    removeCard(cardId);
-    try {
-      await deleteDashboardCard(activeDashboardId, cardId);
-      toast.success('카드 삭제됨');
-    } catch (err) {
-      console.error('[Dashboard] 카드 삭제 실패', err);
-      toast.error('카드 삭제 실패 — 새로고침 후 다시 시도해주세요');
-    }
-  }, [activeDashboardId, removeCard]);
+  const handleRemove = useCallback(
+    async (cardId: string) => {
+      if (!confirm("이 카드를 삭제하시겠습니까?")) return;
+      if (!activeDashboardId) {
+        toast.error("활성 대시보드가 없습니다");
+        return;
+      }
+      removeCard(cardId);
+      try {
+        await deleteDashboardCard(activeDashboardId, cardId);
+        toast.success("카드 삭제됨");
+      } catch (err) {
+        console.error("[Dashboard] 카드 삭제 실패", err);
+        toast.error("카드 삭제 실패 — 새로고침 후 다시 시도해주세요");
+      }
+    },
+    [activeDashboardId, removeCard],
+  );
 
   const handleRequestSave = useCallback(() => {
-    // 헤더/FAB 공용 저장 트리거 — DashboardLayout 가 수신해 실제 저장 실행
-    window.dispatchEvent(new CustomEvent('dash:save'));
+    window.dispatchEvent(new CustomEvent("dash:save"));
   }, []);
 
+  const canvasClassName = ["dash-canvas", editMode && "edit-mode", controlActive && "control-mode"]
+    .filter(Boolean)
+    .join(" ");
+
   return (
-    <div
-      ref={canvasRef}
-      className={`dash-canvas${editMode ? ' edit-mode' : ''}${controlActive ? ' control-mode' : ''}`}
-      onMouseDown={controlActive ? undefined : handleMouseDown}
-    >
+    <div ref={canvasRef} className={canvasClassName} onMouseDown={controlActive ? undefined : handleMouseDown}>
       {cards.length === 0 ? (
         <DashboardEmpty dashboardName={dashboardName} onOpenLibrary={onOpenLibrary} />
       ) : (
         cards.map((card) => {
           const id = card.card_id ?? card.CARD_ID;
-          const x = Number(card.position_x ?? card.POSITION_X ?? 50);
-          const y = Number(card.position_y ?? card.POSITION_Y ?? 50);
-          const w = Number(card.width ?? card.WIDTH ?? 600);
-          const h = Number(card.height ?? card.HEIGHT ?? 400);
+          const xRaw = Number(card.position_x ?? card.POSITION_X ?? 5);
+          const yRaw = Number(card.position_y ?? card.POSITION_Y ?? 5);
+          const wRaw = Number(card.width ?? card.WIDTH ?? 40);
+          const hRaw = Number(card.height ?? card.HEIGHT ?? 35);
+
+          // 마이그레이션 전 px 데이터는 px 로 (곧 useEffect 가 % 로 전환), 그 외는 % 로 렌더
+          const asPx = isValuePx(xRaw) || isValuePx(yRaw) || isValuePx(wRaw) || isValuePx(hRaw);
+          const unit = asPx ? "px" : "%";
+
+          // % 렌더 시 안전망 clamp (NaN / 오버플로우 방어)
+          let x = xRaw,
+            y = yRaw,
+            w = wRaw,
+            h = hRaw;
+          if (!asPx) {
+            if (!Number.isFinite(x)) x = 5;
+            if (!Number.isFinite(y)) y = 5;
+            if (!Number.isFinite(w)) w = 40;
+            if (!Number.isFinite(h)) h = 35;
+            w = Math.max(5, Math.min(w, 100));
+            h = Math.max(5, Math.min(h, 100));
+            x = Math.max(0, Math.min(x, 100 - w));
+            y = Math.max(0, Math.min(y, 100 - h));
+          }
 
           return (
             <div
               key={id}
               data-card-id={id}
               style={{
-                position: 'absolute',
-                left: x + 'px',
-                top: y + 'px',
-                width: w + 'px',
-                height: h + 'px',
+                position: "absolute",
+                left: x + unit,
+                top: y + unit,
+                width: w + unit,
+                height: h + unit,
                 zIndex: 10,
               }}
             >
@@ -238,6 +658,14 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
         })
       )}
 
+      {/* 스냅 가이드 — 드래그 중 달라붙는 지점 시각 표시 */}
+      {guides.v.map((x, i) => (
+        <div key={`gv-${i}`} className="dash-snap-guide v" style={{ left: x + "px", top: 0, bottom: 0 }} />
+      ))}
+      {guides.h.map((y, i) => (
+        <div key={`gh-${i}`} className="dash-snap-guide h" style={{ top: y + "px", left: 0, right: 0 }} />
+      ))}
+
       {/* 편집 모드 FAB — 캔버스 우하단 */}
       <AnimatedFab show={editMode && !controlActive}>
         <span className="ud-fab-badge">
diff --git a/frontend/components/dash/DashboardCard.tsx b/frontend/components/dash/DashboardCard.tsx
index ab55d661..2c324f7d 100644
--- a/frontend/components/dash/DashboardCard.tsx
+++ b/frontend/components/dash/DashboardCard.tsx
@@ -4,12 +4,36 @@ import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { RefreshCw, ChevronDown, X, Settings } from 'lucide-react';
 import { toast } from 'sonner';
 import { getTemplateInfo } from '@/lib/api/template';
-import { fcList, fcInsert, fcUpdate, fcDelete } from '@/lib/api/fcData';
-import { FcForm } from '@/components/fc';
+import { fcList, fcDelete } from '@/lib/api/fcData';
 import type { FieldConfig, Template } from '@/types/invyone-component';
 import { CardMiniView } from './CardMiniView';
 import { TemplateRenderer, type TemplateRenderContext } from './TemplateRenderer';
 
+/**
+ * 뷰별 팝업 크기 계산 — 빌더(ScreenDesigner)가 저장한
+ * template.views.screenResolutions.{create|edit} 를 우선 사용.
+ * 없으면 공통 screenResolution, 그것도 없으면 900×700 폴백.
+ */
+function computePopupFeatures(
+  template: Template | null,
+  view: 'create' | 'edit',
+): string {
+  const viewsObj = (template?.views as any) ?? {};
+  const res =
+    viewsObj?.screenResolutions?.[view] ??
+    viewsObj?.screen_resolutions?.[view] ??
+    viewsObj?.screenResolution ??
+    viewsObj?.screen_resolution;
+  const width = Math.max(400, Math.round(Number(res?.width) || 900));
+  const height = Math.max(400, Math.round(Number(res?.height) || 700));
+  return `width=${width},height=${height},resizable=yes,scrollbars=yes`;
+}
+
+/** 팝업 고유 key + opener name — 여러 팝업 동시 허용 */
+function newPopupKey(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+}
+
 interface DashboardCardProps {
   card: Record<string, any>;
   editMode: boolean;
@@ -45,11 +69,9 @@ export function DashboardCard({
   const [loading, setLoading] = useState(false);
   const [selectedRow, setSelectedRow] = useState<Record<string, any> | null>(null);
 
-  // CRUD 모달: 'create' | 'edit' | null
-  const [formMode, setFormMode] = useState<'create' | 'edit' | null>(null);
-  const [formRow, setFormRow] = useState<Record<string, any> | null>(null);
-
   const mountedRef = useRef(true);
+  /** 이 카드가 연 팝업의 key 집합 — 저장 알림이 자기 카드에서 온 건지 구분용 */
+  const popupKeysRef = useRef<Set<string>>(new Set());
 
   // Template + fields 로드
   useEffect(() => {
@@ -137,24 +159,65 @@ export function DashboardCard({
     return pkField?.column ?? '';
   }, [fields]);
 
+  /** 공통 — 팝업 창 열기. 뷰별 해상도 + 초기 데이터 localStorage 시드 + 고유 key */
+  const openFormPopup = useCallback(
+    (mode: 'create' | 'edit', initialRow: Record<string, any>) => {
+      if (!templateId) {
+        toast.error('templateId 가 없습니다');
+        return;
+      }
+      if (!primaryTable) {
+        toast.error('primary_table 이 설정되어 있지 않습니다');
+        return;
+      }
+      const key = newPopupKey();
+      try {
+        localStorage.setItem(
+          `form-popup:${key}`,
+          JSON.stringify({
+            initialRow,
+            primaryTable,
+            templateName,
+          }),
+        );
+      } catch {
+        /* storage 실패해도 팝업은 열어줌 — 팝업 쪽에서 빈 데이터로 시작 */
+      }
+      popupKeysRef.current.add(key);
+      const url = `/form-popup?templateId=${encodeURIComponent(
+        String(templateId),
+      )}&mode=${mode}&key=${encodeURIComponent(key)}`;
+      const features = computePopupFeatures(template, mode);
+      const win = window.open(url, `popup-${key}`, features);
+      if (!win) {
+        toast.error('팝업이 차단되었습니다. 브라우저 팝업 허용을 확인하세요.');
+        popupKeysRef.current.delete(key);
+        try {
+          localStorage.removeItem(`form-popup:${key}`);
+        } catch {
+          /* ignore */
+        }
+      }
+    },
+    [templateId, primaryTable, templateName, template],
+  );
+
   // CRUD 액션
   const handleAdd = useCallback(() => {
     const defaults: Record<string, any> = {};
     for (const f of fields) {
       if (f.defaultValue !== undefined) defaults[f.column] = f.defaultValue;
     }
-    setFormRow(defaults);
-    setFormMode('create');
-  }, [fields]);
+    openFormPopup('create', defaults);
+  }, [fields, openFormPopup]);
 
   const handleEdit = useCallback(() => {
     if (!selectedRow) {
       toast.warning('수정할 행을 선택하세요');
       return;
     }
-    setFormRow({ ...selectedRow });
-    setFormMode('edit');
-  }, [selectedRow]);
+    openFormPopup('edit', { ...selectedRow });
+  }, [selectedRow, openFormPopup]);
 
   const handleDelete = useCallback(async () => {
     if (!selectedRow) {
@@ -179,99 +242,61 @@ export function DashboardCard({
     }
   }, [selectedRow, pkColumn, primaryTable, loadData]);
 
-  const handleSubmitForm = useCallback(
-    async (row: Record<string, any>) => {
-      try {
-        if (formMode === 'create') {
-          await fcInsert(primaryTable, row);
-          toast.success('등록되었습니다');
-        } else if (formMode === 'edit') {
-          if (!pkColumn) throw new Error('PK 컬럼이 없습니다');
-          const id = String(row[pkColumn] ?? '');
-          if (!id) throw new Error('PK 값이 비어있습니다');
-          await fcUpdate(primaryTable, id, row);
-          toast.success('수정되었습니다');
-        }
-        setFormMode(null);
-        setFormRow(null);
-        await loadData();
-      } catch (err: any) {
-        console.error('[DashboardCard] 저장 실패:', err);
-        toast.error(err?.message ?? '저장 실패');
-      }
-    },
-    [formMode, primaryTable, pkColumn, loadData],
-  );
+  /** 팝업 창에서 저장 성공 알림 받으면 리로드 */
+  useEffect(() => {
+    const handler = (ev: MessageEvent) => {
+      if (ev.origin !== window.location.origin) return;
+      const data = ev.data;
+      if (!data || data.type !== 'form-popup-saved') return;
+      const key = String(data.key ?? '');
+      if (!popupKeysRef.current.has(key)) return; // 다른 카드의 팝업이면 무시
+      popupKeysRef.current.delete(key);
+      loadData();
+      toast.success(data.mode === 'edit' ? '수정되었습니다' : '등록되었습니다');
+    };
+    window.addEventListener('message', handler);
+    return () => window.removeEventListener('message', handler);
+  }, [loadData]);
 
-  const closeForm = useCallback(() => {
-    setFormMode(null);
-    setFormRow(null);
-  }, []);
-
-  // 폼 row 패치 핸들러 (등록/수정 뷰 input 바인딩용)
-  const handleFormRowChange = useCallback((patch: Record<string, any>) => {
-    setFormRow((prev) => ({ ...(prev ?? {}), ...patch }));
-  }, []);
-
-  const handleFormSubmit = useCallback(() => {
-    if (formRow) handleSubmitForm(formRow);
-  }, [formRow, handleSubmitForm]);
-
-  // TemplateRenderer 로 전달할 공유 context
+  // TemplateRenderer 로 전달할 공유 context — 목록 뷰 전용.
+  // 등록/수정 폼 바인딩은 별도 팝업 창(/form-popup)이 독립 관리.
   const renderContext: TemplateRenderContext = useMemo(
     () => ({
       fields,
       data,
       loading,
+      primaryTable,
       selectedRow,
       totalCount,
       page,
       pageSize,
+      searchParams,
       onSearch: handleSearch,
       onRowSelect: handleRowSelect,
       onPageChange: handlePageChange,
       onAdd: handleAdd,
       onEdit: handleEdit,
       onDelete: handleDelete,
-      formRow: formRow ?? undefined,
-      onFormRowChange: handleFormRowChange,
-      onFormSubmit: handleFormSubmit,
-      onFormCancel: closeForm,
     }),
     [
       fields,
       data,
       loading,
+      primaryTable,
       selectedRow,
       totalCount,
       page,
       pageSize,
+      searchParams,
       handleSearch,
       handleRowSelect,
       handlePageChange,
       handleAdd,
       handleEdit,
       handleDelete,
-      formRow,
-      handleFormRowChange,
-      handleFormSubmit,
-      closeForm,
     ],
   );
 
-  // 등록/수정 뷰가 스튜디오에서 구성되어 있는지 체크 (있으면 TemplateRenderer로 렌더)
-  const hasCustomCreateView = useMemo(() => {
-    const cv = (template?.views as any)?.create;
-    if (Array.isArray(cv)) return cv.length > 0;
-    return Array.isArray(cv?.components) && cv.components.length > 0;
-  }, [template]);
-
-  const hasCustomEditView = useMemo(() => {
-    const ev = (template?.views as any)?.edit;
-    if (Array.isArray(ev)) return ev.length > 0;
-    return Array.isArray(ev?.components) && ev.components.length > 0;
-  }, [template]);
-
   return (
     <div className={`dash-card${isCollapsed ? ' collapsed' : ''}`}>
       <div className="dash-card-head">
@@ -358,77 +383,15 @@ export function DashboardCard({
         tableName={primaryTable}
       />
 
-      <div className="dash-resize-handle" data-resize="true" />
-
-      {formMode && formRow && template && (
-        <FormOverlay
-          title={`${templateName} ${formMode === 'create' ? '등록' : '수정'}`}
-          fields={fields}
-          initialRow={formRow}
-          onSubmit={handleSubmitForm}
-          onClose={closeForm}
-          template={template}
-          view={formMode}
-          hasCustomView={formMode === 'create' ? hasCustomCreateView : hasCustomEditView}
-          context={renderContext}
-        />
-      )}
-    </div>
-  );
-}
-
-interface FormOverlayProps {
-  title: string;
-  fields: FieldConfig[];
-  initialRow: Record<string, any>;
-  onSubmit: (row: Record<string, any>) => void;
-  onClose: () => void;
-  template: Template;
-  view: 'create' | 'edit';
-  hasCustomView: boolean;
-  context: TemplateRenderContext;
-}
-
-function FormOverlay({
-  title,
-  fields,
-  initialRow,
-  onSubmit,
-  onClose,
-  template,
-  view,
-  hasCustomView,
-  context,
-}: FormOverlayProps) {
-  return (
-    <div
-      className="dash-form-overlay"
-      onMouseDown={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="dash-form-modal">
-        <div className="dash-form-head">
-          <span className="dash-form-title">{title}</span>
-          <button className="dash-card-btn" onClick={onClose} title="닫기">
-            <X size={14} />
-          </button>
-        </div>
-        <div className="dash-form-body">
-          {hasCustomView ? (
-            // 스튜디오에서 구성한 등록/수정 뷰 → TemplateRenderer
-            <TemplateRenderer template={template} context={context} view={view} />
-          ) : (
-            // 기본 FcForm fallback (스튜디오에서 뷰 구성 안 한 경우)
-            <FcForm
-              fields={fields}
-              loadRow={initialRow}
-              onSubmit={onSubmit}
-              config={{ columns: 2 }}
-            />
-          )}
-        </div>
-      </div>
+      {/* 8방향 리사이즈 핸들 — edit mode 에서만 보임 (CSS 제어) */}
+      <div className="dash-resize-handle n" data-resize="n" />
+      <div className="dash-resize-handle s" data-resize="s" />
+      <div className="dash-resize-handle e" data-resize="e" />
+      <div className="dash-resize-handle w" data-resize="w" />
+      <div className="dash-resize-handle ne" data-resize="ne" />
+      <div className="dash-resize-handle nw" data-resize="nw" />
+      <div className="dash-resize-handle se" data-resize="se" />
+      <div className="dash-resize-handle sw" data-resize="sw" />
     </div>
   );
 }
diff --git a/frontend/components/dash/DashboardLayout.tsx b/frontend/components/dash/DashboardLayout.tsx
index 7430fe75..db333500 100644
--- a/frontend/components/dash/DashboardLayout.tsx
+++ b/frontend/components/dash/DashboardLayout.tsx
@@ -90,7 +90,15 @@ export function DashboardLayout({ dashboardId: singleDashboardId }: DashboardLay
     try {
       const cardList = await getDashboardCards(dashId);
       if (useDashboardStore.getState().activeDashboardId === dashId) {
-        setCards(cardList ?? []);
+        const normalized = (cardList ?? []).map((c: Record<string, any>) => ({
+          ...c,
+          position_x: c.position_x ?? c.POSITION_X,
+          position_y: c.position_y ?? c.POSITION_Y,
+          width: c.width ?? c.WIDTH,
+          height: c.height ?? c.HEIGHT,
+          is_collapsed: c.is_collapsed ?? c.IS_COLLAPSED ?? false,
+        }));
+        setCards(normalized);
       }
     } catch (err) {
       console.error('[Dashboard] Load cards failed:', err);
@@ -153,19 +161,18 @@ export function DashboardLayout({ dashboardId: singleDashboardId }: DashboardLay
     setActiveDashboard(id);
   };
 
-  // 템플릿 추가 (라이브러리 → 카드) — 화면 정중앙 배치 + 기존 카드 수만큼 stagger
+  // 템플릿 추가 (라이브러리 → 카드) — 화면 중앙 배치 + 기존 카드 수만큼 stagger
+  // 저장 단위: % (0~100). 캔버스 크기 무관하게 반응형으로 동작.
   const handleSelectTemplate = async (template: Record<string, any>) => {
     if (!activeDashboardId) return;
     const templateId = template.template_id ?? template.TEMPLATE_ID;
     try {
-      const cv = canvasRef.current;
-      const cw = cv?.clientWidth ?? 1000;
-      const ch = cv?.clientHeight ?? 600;
-      const w = Math.min(700, Math.max(320, cw - 40));
-      const h = Math.min(450, Math.max(240, ch - 40));
-      const stagger = (cards.length % 8) * 28;
-      const x = Math.max(16, Math.round((cw - w) / 2) + stagger);
-      const y = Math.max(16, Math.round((ch - h) / 2) + stagger);
+      // 기본 크기: 너비 45%, 높이 50%. stagger: 3% 씩 오프셋 (최대 8장 순환)
+      const w = 45;
+      const h = 50;
+      const stagger = (cards.length % 8) * 3;
+      const x = Math.max(2, Math.min(100 - w - 2, Math.round((100 - w) / 2) + stagger));
+      const y = Math.max(2, Math.min(100 - h - 2, Math.round((100 - h) / 2) + stagger));
 
       const result = await insertDashboardCard(activeDashboardId, {
         template_id: templateId,
@@ -255,7 +262,7 @@ export function DashboardLayout({ dashboardId: singleDashboardId }: DashboardLay
           <>
             {/* 편집/제어 툴바는 이제 헤더로 hoist. 캔버스 FAB 이 모드 내 액션 담당. */}
             {/* ★ flex container로 만들어야 안쪽 dash-canvas가 flex:1로 늘어남 */}
-            <div style={{ position: 'relative', flex: '1 1 auto', display: 'flex', flexDirection: 'column', minHeight: 0, minWidth: 0 }}>
+            <div style={{ position: 'relative', flex: '1 1 auto', display: 'flex', flexDirection: 'column', minHeight: 0, minWidth: 0, width: '100%', height: '100%' }}>
               <DashboardCanvas
                 ref={canvasRef}
                 dashboardName={dashName}
diff --git a/frontend/components/dash/TemplateRenderer.tsx b/frontend/components/dash/TemplateRenderer.tsx
index 0f62d613..0ac4fbe8 100644
--- a/frontend/components/dash/TemplateRenderer.tsx
+++ b/frontend/components/dash/TemplateRenderer.tsx
@@ -44,10 +44,13 @@ export interface TemplateRenderContext {
   fields: FieldConfig[];
   data: Record<string, any>[];
   loading: boolean;
+  primaryTable?: string;
   selectedRow: Record<string, any> | null;
   totalCount: number;
   page: number;
   pageSize: number;
+  /** 현재 검색 파라미터 — Search 컴포넌트가 onSearch 로 업데이트하면 Table 로 전달 */
+  searchParams: Record<string, any>;
   onSearch: (params: Record<string, any>) => void;
   onRowSelect: (row: Record<string, any>) => void;
   onPageChange: (args: { page: number; size: number }) => void;
@@ -170,6 +173,7 @@ function LineGridView({
       computeLayout(
         blocks.map((b) => ({
           id: b.id,
+          componentId: b.componentId,
           xPct: b.xPct,
           yPct: b.yPct,
           wPct: b.wPct,
@@ -310,6 +314,8 @@ function LineGridView({
           deficit: delta < 0 ? Math.round(-delta) : 0,
           surplus: delta > 0 ? Math.round(delta) : 0,
           template: gridTemplateRows,
+          xLines: layout.xLines.map((v) => +v.toFixed(4)),
+          yLines: layout.yLines.map((v) => +v.toFixed(4)),
         },
       );
       console.table(
@@ -344,6 +350,22 @@ function LineGridView({
           'color:#00cec9;font-weight:bold',
           `engine=line view=${view} blocks=${blocks.length} grid=${gridCount} overlay=${overlayCount} cols=${layout.cols.length} rows=${layout.rows.length} tolX=${layout.xToleranceUsed.toFixed(4)} tolY=${layout.yToleranceUsed.toFixed(4)} canvas=${canvas.baseWidth}x${canvas.baseHeight}`,
         );
+        console.table(
+          layout.cols.map((c) => ({
+            col: c.index + 1,
+            start: +c.startPct.toFixed(4),
+            end: +c.endPct.toFixed(4),
+            weight: +c.weight.toFixed(4),
+          })),
+        );
+        console.table(
+          layout.rows.map((r) => ({
+            row: r.index + 1,
+            start: +r.startPct.toFixed(4),
+            end: +r.endPct.toFixed(4),
+            weight: +r.weight.toFixed(4),
+          })),
+        );
         console.table(
           layout.blocks.map((bl) => {
             const b = byId.get(bl.blockId);
@@ -352,6 +374,8 @@ function LineGridView({
               cid: b?.componentId ?? '',
               role: b?.role ?? '',
               policy: b?.responsivePolicy ?? '',
+              xPct: b ? +b.xPct.toFixed(4) : '',
+              yPct: b ? +b.yPct.toFixed(4) : '',
               wPct: b ? +b.wPct.toFixed(3) : '',
               hPct: b ? +b.hPct.toFixed(3) : '',
               px_w: b ? Math.round(b.wPct * canvas.baseWidth) : '',
@@ -543,6 +567,21 @@ const LINE_CSS = `
     align-self: center;
   }
 
+  /* search — 가로는 cell 폭을 채우되, 세로는 content-size 유지.
+     row 가 조금 커져도 검색줄 전체가 100% 높이로 늘어나지 않게 한다. */
+  .itpl-line .itpl-slot[data-comp="search"] {
+    justify-content: center;
+    overflow: hidden;
+  }
+  .itpl-line .itpl-slot[data-comp="search"] > * {
+    flex: 0 0 auto;
+    width: 100%;
+    height: auto;
+    min-width: 0;
+    min-height: 0;
+    align-self: center;
+  }
+
   /* compact: cell final 높이가 preferred 대비 10% 이상 축소된 경우 부여.
      폰트/padding 을 소폭 줄여 잘림을 완화. outer scroll 은 만들지 않는다. */
   .itpl-line .itpl-slot.compact,
@@ -597,6 +636,11 @@ function BlockRenderer({
     height: number;
   };
 }) {
+  const resolvedTableName =
+    block.config?.selectedTable ||
+    block.config?.tableName ||
+    context.primaryTable;
+
   const def = ComponentRegistry.getComponent(block.componentId);
   if (!def?.component) {
     return (
@@ -646,6 +690,7 @@ function BlockRenderer({
       component={{
         id: block.id,
         componentType: block.componentId,
+        tableName: resolvedTableName,
         position,
         size: effectiveSize,
         componentConfig: block.config,
@@ -654,12 +699,21 @@ function BlockRenderer({
       }}
       componentConfig={block.config}
       config={block.config}
+      tableName={resolvedTableName}
       isDesignMode={false}
       isPreview={true}
       formData={context.formRow}
       onFormDataChange={(fieldName: string, value: any) =>
         context.onFormRowChange?.({ [fieldName]: value })
       }
+      onSearch={context.onSearch}
+      searchParams={context.searchParams}
+      onAdd={context.onAdd}
+      onEdit={context.onEdit}
+      onDelete={context.onDelete}
+      onFormSubmit={context.onFormSubmit}
+      onFormCancel={context.onFormCancel}
+      selectedRow={context.selectedRow}
       view={view}
     />
   );
diff --git a/frontend/components/dash/TemplateResponsivePreview.tsx b/frontend/components/dash/TemplateResponsivePreview.tsx
index fcdd4c1d..fd332483 100644
--- a/frontend/components/dash/TemplateResponsivePreview.tsx
+++ b/frontend/components/dash/TemplateResponsivePreview.tsx
@@ -41,6 +41,7 @@ const DEFAULT_CONTEXT: TemplateRenderContext = {
   totalCount: 0,
   page: 1,
   pageSize: 20,
+  searchParams: {},
   onSearch: () => {},
   onRowSelect: () => {},
   onPageChange: () => {},
diff --git a/frontend/components/screen/OptimizedButtonComponent.tsx b/frontend/components/screen/OptimizedButtonComponent.tsx
index d234bea4..d5d0ffdc 100644
--- a/frontend/components/screen/OptimizedButtonComponent.tsx
+++ b/frontend/components/screen/OptimizedButtonComponent.tsx
@@ -582,7 +582,7 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       delete: "삭제",
       edit: "수정",
       copy: "복사",
-      add: "추가",
+      add: "등록",
       search: "검색",
       reset: "초기화",
       submit: "제출",
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index f07e11ea..1e1e85d5 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -7,6 +7,7 @@ import { cn } from "@/lib/utils";
 // shadcn Tabs 사용 없음. 필요 시 아래 import 재활성화.
 // import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,6 +16,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import {
   ScreenDefinition,
   ComponentData,
@@ -174,6 +182,279 @@ const panelConfigs: PanelConfig[] = [
   },
 ];
 
+const DEFAULT_SCREEN_RESOLUTION = SCREEN_RESOLUTIONS[0];
+
+function normalizeScreenResolution(
+  resolution?: Partial<ScreenResolution> | null,
+): ScreenResolution {
+  if (!resolution?.width || !resolution?.height) {
+    return DEFAULT_SCREEN_RESOLUTION;
+  }
+
+  const preset = SCREEN_RESOLUTIONS.find(
+    (item) =>
+      item.width === resolution.width &&
+      item.height === resolution.height,
+  );
+  if (preset) return preset;
+
+  return {
+    width: resolution.width,
+    height: resolution.height,
+    name:
+      resolution.name ||
+      `사용자 정의 (${resolution.width}×${resolution.height})`,
+    category: resolution.category || "custom",
+  };
+}
+
+function buildAutoFitResolution(
+  components: ComponentData[],
+  fallback: ScreenResolution,
+): ScreenResolution {
+  if (!components.length) return fallback;
+
+  const bounds = components.reduce(
+    (acc, comp) => {
+      const x = comp.position?.x ?? 0;
+      const y = comp.position?.y ?? 0;
+      const width = comp.size?.width ?? 0;
+      const height = comp.size?.height ?? 0;
+
+      return {
+        maxRight: Math.max(acc.maxRight, x + width),
+        maxBottom: Math.max(acc.maxBottom, y + height),
+      };
+    },
+    { maxRight: 0, maxBottom: 0 },
+  );
+
+  const width = Math.max(480, Math.ceil(bounds.maxRight + 80));
+  const height = Math.max(360, Math.ceil(bounds.maxBottom + 100));
+
+  return {
+    width,
+    height,
+    name: `자동 맞춤 (${width}×${height})`,
+    category: "custom",
+  };
+}
+
+const AUTO_CRUD_EXCLUDED_COLUMNS = new Set([
+  "created_at",
+  "created_by",
+  "updated_at",
+  "updated_by",
+  "deleted_at",
+  "deleted_by",
+]);
+
+function getAutoCrudFieldHeight(widgetType?: string): number {
+  switch (widgetType) {
+    case "textarea":
+      return 110;
+    case "file":
+      return 160;
+    case "checkbox":
+    case "radio":
+      return 72;
+    default:
+      return 56;
+  }
+}
+
+function buildAutoCrudView(
+  table: TableInfo,
+  view: "create" | "edit",
+  layerId: number,
+): ComponentData[] {
+  const popupPaddingX = 40;
+  const popupPaddingY = 44;
+  const columnGap = 28;
+  const rowGap = 18;
+  const fieldWidth = 340;
+  const footerTopGap = 28;
+
+  const columns = (table.columns ?? []).filter((column) => {
+    const columnName = String(column.columnName || "").toLowerCase();
+    if (!columnName) return false;
+    if (AUTO_CRUD_EXCLUDED_COLUMNS.has(columnName)) return false;
+    return true;
+  });
+
+  const rowHeights: number[] = [];
+  columns.forEach((column, index) => {
+    const rowIndex = Math.floor(index / 2);
+    const widgetType = column.widgetType || column.inputType || "text";
+    const fieldHeight = getAutoCrudFieldHeight(widgetType);
+    rowHeights[rowIndex] = Math.max(rowHeights[rowIndex] ?? 0, fieldHeight);
+  });
+
+  const fieldComponents = columns.map((column, index) => {
+    const widgetType = column.widgetType || column.inputType || "text";
+    const v2Mapping = createV2ConfigFromColumn({
+      widgetType,
+      columnName: column.columnName,
+      columnLabel: column.columnLabel,
+      codeCategory: column.codeCategory,
+      inputType: column.inputType,
+      required: column.required,
+      detailSettings: column.detailSettings,
+      referenceTable: column.referenceTable,
+      referenceColumn: column.referenceColumn,
+      displayColumn: column.displayColumn,
+    });
+
+    const colIndex = index % 2;
+    const rowIndex = Math.floor(index / 2);
+    const fieldHeight = getAutoCrudFieldHeight(widgetType);
+    const offsetY = rowHeights
+      .slice(0, rowIndex)
+      .reduce((sum, height) => sum + height + rowGap, popupPaddingY);
+
+    return {
+      id: generateComponentId(),
+      type: "component",
+      label: column.columnLabel || column.columnName,
+      tableName: table.tableName,
+      columnName: column.columnName,
+      required: column.required,
+      readonly: false,
+      componentType: v2Mapping.componentType,
+      position: {
+        x: popupPaddingX + colIndex * (fieldWidth + columnGap),
+        y: offsetY,
+        z: 1,
+      },
+      size: { width: fieldWidth, height: fieldHeight },
+      layerId,
+      style: {
+        labelDisplay: true,
+        labelFontSize: "13px",
+        labelColor: "#111827",
+        labelFontWeight: "500",
+        labelMarginBottom: "8px",
+      },
+      componentConfig: {
+        type: v2Mapping.componentType,
+        ...v2Mapping.componentConfig,
+      },
+    } as ComponentData;
+  });
+
+  const footerY =
+    popupPaddingY +
+    rowHeights.reduce((sum, height) => sum + height + rowGap, 0) +
+    footerTopGap;
+
+  const closeButton: ComponentData = {
+    id: generateComponentId(),
+    type: "component",
+    label: "닫기",
+    componentType: "button",
+    position: { x: popupPaddingX, y: footerY, z: 1 },
+    size: { width: 110, height: 36 },
+    layerId,
+    componentConfig: {
+      text: "닫기",
+      variant: "outline",
+      actionType: "close",
+      borderRadius: "8px",
+    },
+  } as ComponentData;
+
+  const saveButton: ComponentData = {
+    id: generateComponentId(),
+    type: "component",
+    label: view === "create" ? "등록" : "저장",
+    componentType: "button",
+    position: { x: popupPaddingX + fieldWidth * 2 + columnGap - 130, y: footerY, z: 1 },
+    size: { width: 130, height: 36 },
+    layerId,
+    componentConfig: {
+      text: view === "create" ? "등록" : "저장",
+      variant: "primary",
+      actionType: "save",
+      borderRadius: "8px",
+    },
+  } as ComponentData;
+
+  return [...fieldComponents, closeButton, saveButton];
+}
+
+function inferPrimaryTableFromComponents(
+  components: ComponentData[] | undefined | null,
+): string {
+  const queue: any[] = [...(components ?? [])];
+
+  while (queue.length > 0) {
+    const comp = queue.shift();
+    if (!comp || typeof comp !== "object") continue;
+
+    const cfgBuckets = [
+      comp.componentConfig,
+      comp.component_config,
+      comp.config,
+      comp.properties,
+      comp.options,
+    ];
+
+    const candidates: any[] = [
+      comp.tableName,
+      comp.table_name,
+      comp.selectedTable,
+    ];
+    for (const cfg of cfgBuckets) {
+      if (!cfg || typeof cfg !== "object") continue;
+      candidates.push(
+        cfg.selectedTable,
+        cfg.tableName,
+        cfg.table_name,
+        cfg.sourceTable,
+        cfg.table,
+        cfg.mainTable,
+        cfg.main_table,
+        cfg.dataSource?.table,
+        cfg.dataSource?.tableName,
+      );
+    }
+
+    const found = candidates.find(
+      (value) => typeof value === "string" && value.trim().length > 0,
+    );
+    if (found) return found as string;
+
+    if (Array.isArray(comp.children)) queue.push(...comp.children);
+    if (Array.isArray(comp.components)) queue.push(...comp.components);
+
+    const overrides = comp.overrides;
+    if (overrides && typeof overrides === "object") {
+      if (Array.isArray(overrides.components)) queue.push(...overrides.components);
+      const leftComps = overrides.leftPanel?.components;
+      if (Array.isArray(leftComps)) queue.push(...leftComps);
+      const rightComps = overrides.rightPanel?.components;
+      if (Array.isArray(rightComps)) queue.push(...rightComps);
+      if (Array.isArray(overrides.tabs)) {
+        for (const tab of overrides.tabs) {
+          if (Array.isArray(tab?.components)) queue.push(...tab.components);
+        }
+      }
+    }
+
+    for (const cfg of cfgBuckets) {
+      if (!cfg || typeof cfg !== "object") continue;
+      if (Array.isArray(cfg.components)) queue.push(...cfg.components);
+      if (Array.isArray(cfg.tabs)) {
+        for (const tab of cfg.tabs) {
+          if (Array.isArray(tab?.components)) queue.push(...tab.components);
+        }
+      }
+    }
+  }
+
+  return "";
+}
+
 export default function ScreenDesigner({ 
   selectedScreen, 
   onBackToList, 
@@ -212,9 +493,15 @@ export default function ScreenDesigner({
     create: [],
     edit: [],
   });
+  const autoSeededCrudViewsRef = useRef<Record<ViewType, boolean>>({
+    list: true,
+    create: false,
+    edit: false,
+  });
 
   // 🆕 화면에 할당된 메뉴 OBJID
   const [menuObjid, setMenuObjid] = useState<number | undefined>(undefined);
+  const [templatePrimaryTableName, setTemplatePrimaryTableName] = useState("");
 
   // 메뉴 할당 모달 상태
   const [showMenuAssignmentModal, setShowMenuAssignmentModal] = useState(false);
@@ -228,8 +515,21 @@ export default function ScreenDesigner({
 
   // 해상도 설정 상태
   const [screenResolution, setScreenResolution] = useState<ScreenResolution>(
-    SCREEN_RESOLUTIONS[0], // 기본값: Full HD
+    DEFAULT_SCREEN_RESOLUTION, // 기본값: Full HD
   );
+  const [, setViewScreenResolutions] = useState<Record<ViewType, ScreenResolution>>({
+    list: DEFAULT_SCREEN_RESOLUTION,
+    create: DEFAULT_SCREEN_RESOLUTION,
+    edit: DEFAULT_SCREEN_RESOLUTION,
+  });
+  const viewScreenResolutionsRef = useRef<Record<ViewType, ScreenResolution>>({
+    list: DEFAULT_SCREEN_RESOLUTION,
+    create: DEFAULT_SCREEN_RESOLUTION,
+    edit: DEFAULT_SCREEN_RESOLUTION,
+  });
+  const [showCustomResolutionDialog, setShowCustomResolutionDialog] = useState(false);
+  const [customResolutionWidth, setCustomResolutionWidth] = useState(String(DEFAULT_SCREEN_RESOLUTION.width));
+  const [customResolutionHeight, setCustomResolutionHeight] = useState(String(DEFAULT_SCREEN_RESOLUTION.height));
 
   // 🆕 패널 상태 관리 (usePanelState 훅)
   const { panelStates, togglePanel, openPanel, closePanel, closeAllPanels, updatePanelPosition, updatePanelSize } =
@@ -257,21 +557,6 @@ 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),
@@ -526,6 +811,42 @@ export default function ScreenDesigner({
   const [tables, setTables] = useState<TableInfo[]>([]);
   const [tableRefreshCounter, setTableRefreshCounter] = useState(0);
   const [searchTerm, setSearchTerm] = useState("");
+  const currentScreenTableName =
+    selectedScreen?.table_name || templatePrimaryTableName || "";
+
+  const updateViewResolution = useCallback(
+    (view: ViewType, resolution: Partial<ScreenResolution> | null | undefined) => {
+      const normalized = normalizeScreenResolution(resolution);
+      viewScreenResolutionsRef.current = {
+        ...viewScreenResolutionsRef.current,
+        [view]: normalized,
+      };
+      setViewScreenResolutions(viewScreenResolutionsRef.current);
+      if (activeView === view) {
+        setScreenResolution(normalized);
+      }
+      return normalized;
+    },
+    [activeView],
+  );
+
+  const applyCurrentViewResolution = useCallback(
+    (resolution: Partial<ScreenResolution> | null | undefined) => {
+      return updateViewResolution(activeView, resolution);
+    },
+    [activeView, updateViewResolution],
+  );
+
+  const fitCurrentViewResolutionToContent = useCallback(() => {
+    if (layout.components.length === 0) {
+      toast.info("현재 뷰에 맞출 컴포넌트가 없습니다.");
+      return;
+    }
+
+    const fitted = buildAutoFitResolution(layout.components, screenResolution);
+    applyCurrentViewResolution(fitted);
+    toast.success("현재 뷰 해상도를 내용 크기에 맞췄습니다.");
+  }, [applyCurrentViewResolution, layout.components, screenResolution]);
 
   // 🆕 검색어로 필터링된 테이블 목록
   const filteredTables = useMemo(() => {
@@ -538,6 +859,120 @@ export default function ScreenDesigner({
     );
   }, [tables, searchTerm]);
 
+  const ensureAutoCrudView = useCallback(
+    (targetView: "create" | "edit") => {
+      if (autoSeededCrudViewsRef.current[targetView]) return;
+      if ((viewLayoutsRef.current[targetView] ?? []).length > 0) {
+        autoSeededCrudViewsRef.current[targetView] = true;
+        return;
+      }
+
+      const primaryTable = tables[0];
+      if (!primaryTable?.columns?.length) return;
+
+      const currentLayerId = activeLayerIdRef.current || 1;
+      const autoComponents = buildAutoCrudView(primaryTable, targetView, currentLayerId);
+      viewLayoutsRef.current[targetView] = autoComponents;
+      autoSeededCrudViewsRef.current[targetView] = true;
+      updateViewResolution(
+        targetView,
+        buildAutoFitResolution(
+          autoComponents,
+          viewScreenResolutionsRef.current[targetView] ?? DEFAULT_SCREEN_RESOLUTION,
+        ),
+      );
+
+      setLayout((prev) =>
+        activeView === targetView
+          ? { ...prev, components: autoComponents }
+          : { ...prev },
+      );
+
+      toast.success(
+        `${targetView === "create" ? "등록" : "수정"} 폼 초안이 자동 생성되었습니다.`,
+      );
+    },
+    [activeView, tables, updateViewResolution],
+  );
+
+  // ── 3뷰 전환 (Phase G) ──
+  const switchView = useCallback((newView: ViewType) => {
+    if (newView === activeView) return;
+    // 현재 뷰의 컴포넌트를 캐시에 저장
+    viewLayoutsRef.current[activeView] = [...layout.components];
+    updateViewResolution(activeView, screenResolution);
+
+    let nextComponents = viewLayoutsRef.current[newView] || [];
+    if (
+      nextComponents.length === 0 &&
+      (newView === "create" || newView === "edit")
+    ) {
+      const primaryTable = tables[0];
+      if (primaryTable?.columns?.length) {
+        nextComponents = buildAutoCrudView(
+          primaryTable,
+          newView,
+          activeLayerIdRef.current || 1,
+        );
+        viewLayoutsRef.current[newView] = nextComponents;
+        autoSeededCrudViewsRef.current[newView] = true;
+        updateViewResolution(
+          newView,
+          buildAutoFitResolution(
+            nextComponents,
+            viewScreenResolutionsRef.current[newView] ?? DEFAULT_SCREEN_RESOLUTION,
+          ),
+        );
+      }
+    }
+
+    setScreenResolution(
+      normalizeScreenResolution(viewScreenResolutionsRef.current[newView]),
+    );
+    setLayout((prev) => ({ ...prev, components: nextComponents }));
+    setActiveView(newView);
+    // 선택 상태 초기화
+    setSelectedComponent(null);
+    setSelectedTabComponentInfo(null);
+    setSelectedPanelComponentInfo(null);
+  }, [activeView, layout.components, screenResolution, tables, updateViewResolution]);
+
+  /**
+   * 동적 뷰 탭 표시 — list 는 루트로 항상 표시.
+   * create(등록) / edit(수정) 탭은 목록 뷰에 해당 actionType 버튼이
+   * 배치됐을 때만 노출. 버튼 삭제 시 탭도 사라지고, 활성 뷰가 숨겨지면
+   * list 로 자동 복귀한다.
+   */
+  const visibleViews = useMemo<ViewType[]>(() => {
+    const listComponents =
+      activeView === "list"
+        ? layout.components
+        : (viewLayoutsRef.current.list ?? []);
+
+    const actions = new Set<string>();
+    for (const c of listComponents as any[]) {
+      if (!c?.componentType?.startsWith?.("button")) continue;
+      const at =
+        c?.componentConfig?.actionType ??
+        c?.componentConfig?.action?.type ??
+        c?.component_config?.actionType ??
+        c?.config?.actionType;
+      if (at) actions.add(String(at));
+    }
+
+    const v: ViewType[] = ["list"];
+    if (actions.has("add")) v.push("create");
+    if (actions.has("edit")) v.push("edit");
+    return v;
+  }, [activeView, layout.components]);
+
+  // 활성 뷰가 visibleViews 에서 사라지면 list 로 되돌림
+  useEffect(() => {
+    if (!visibleViews.includes(activeView)) {
+      switchView("list");
+    }
+  }, [visibleViews, activeView, switchView]);
+
   // 그룹 생성 다이얼로그
   const [showGroupCreateDialog, setShowGroupCreateDialog] = useState(false);
 
@@ -676,7 +1111,7 @@ export default function ScreenDesigner({
   const placedColumns = useMemo(() => {
     const placed = new Set<string>();
     // 🔧 화면의 메인 테이블명을 fallback으로 사용
-    const screenTableName = selectedScreen?.table_name;
+    const screenTableName = currentScreenTableName;
 
     const collectColumns = (components: ComponentData[]) => {
       components.forEach((comp) => {
@@ -701,7 +1136,7 @@ export default function ScreenDesigner({
 
     collectColumns(layout.components);
     return placed;
-  }, [layout.components, selectedScreen?.table_name]);
+  }, [layout.components, currentScreenTableName]);
 
   // 히스토리에 저장
   const saveToHistory = useCallback(
@@ -833,8 +1268,12 @@ export default function ScreenDesigner({
       if (prevIndex > 0) {
         const newIndex = prevIndex - 1;
         setHistory((prevHistory) => {
-          if (prevHistory[newIndex]) {
-            setLayout(prevHistory[newIndex]);
+          const snap = prevHistory[newIndex];
+          if (snap) {
+            setLayout(snap);
+            // 현재 활성 뷰 캐시도 동기화 — 없으면 다음 저장 시
+            // viewLayoutsRef 가 옛값을 들고 있다가 반대 방향으로 덮어씀
+            viewLayoutsRef.current[activeView] = [...(snap.components ?? [])];
           }
           return prevHistory;
         });
@@ -842,7 +1281,7 @@ export default function ScreenDesigner({
       }
       return prevIndex;
     });
-  }, []);
+  }, [activeView]);
 
   // 다시실행
   const redo = useCallback(() => {
@@ -851,15 +1290,17 @@ export default function ScreenDesigner({
       setHistory((prevHistory) => {
         if (prevIndex < prevHistory.length - 1) {
           newIndex = prevIndex + 1;
-          if (prevHistory[newIndex]) {
-            setLayout(prevHistory[newIndex]);
+          const snap = prevHistory[newIndex];
+          if (snap) {
+            setLayout(snap);
+            viewLayoutsRef.current[activeView] = [...(snap.components ?? [])];
           }
         }
         return prevHistory;
       });
       return newIndex;
     });
-  }, []);
+  }, [activeView]);
 
   // 컴포넌트 속성 업데이트
   const updateComponentProperty = useCallback(
@@ -1307,7 +1748,7 @@ export default function ScreenDesigner({
         screenId: selectedScreen?.screen_id,
         screenName: selectedScreen?.screen_name,
         dataSourceType: selectedScreen?.data_source_type,
-        tableName: selectedScreen?.table_name,
+        tableName: currentScreenTableName,
         restApiConnectionId: selectedScreen?.rest_api_connection_id,
         restApiEndpoint: selectedScreen?.rest_api_endpoint,
         restApiJsonPath: selectedScreen?.rest_api_json_path,
@@ -1321,18 +1762,18 @@ export default function ScreenDesigner({
       // 3. restApiConnectionId가 있는 경우
       const isRestApi =
         selectedScreen?.data_source_type === "restapi" ||
-        selectedScreen?.table_name?.startsWith("restapi_") ||
-        selectedScreen?.table_name?.startsWith("_restapi_") ||
+        currentScreenTableName?.startsWith("restapi_") ||
+        currentScreenTableName?.startsWith("_restapi_") ||
         !!selectedScreen?.rest_api_connection_id;
 
       console.log("🔍 [ScreenDesigner] REST API 여부:", { isRestApi });
 
-      if (isRestApi && (selectedScreen?.rest_api_connection_id || selectedScreen?.table_name)) {
+      if (isRestApi && (selectedScreen?.rest_api_connection_id || currentScreenTableName)) {
         try {
           // 연결 ID 추출 (restApiConnectionId가 없으면 tableName에서 추출)
           let connectionId = selectedScreen?.rest_api_connection_id;
-          if (!connectionId && selectedScreen?.table_name) {
-            const match = selectedScreen.table_name.match(/restapi_(\d+)/);
+          if (!connectionId && currentScreenTableName) {
+            const match = currentScreenTableName.match(/restapi_(\d+)/);
             connectionId = match ? parseInt(match[1]) : undefined;
           }
 
@@ -1389,7 +1830,7 @@ export default function ScreenDesigner({
       }
 
       // 데이터베이스 데이터 소스인 경우 (기존 로직)
-      const tableName = selectedScreen?.table_name;
+      const tableName = currentScreenTableName;
       if (!tableName) {
         setTables([]);
         return;
@@ -1479,7 +1920,7 @@ export default function ScreenDesigner({
 
     loadScreenDataSource();
   }, [
-    selectedScreen?.table_name,
+    currentScreenTableName,
     selectedScreen?.screen_name,
     selectedScreen?.data_source_type,
     selectedScreen?.rest_api_connection_id,
@@ -1601,6 +2042,13 @@ export default function ScreenDesigner({
               SCREEN_RESOLUTIONS.find((r) => r.name === "Full HD (1920×1080)") ||
               SCREEN_RESOLUTIONS[0];
             setScreenResolution(defaultResolution);
+            const resetResolutions = {
+              list: defaultResolution,
+              create: defaultResolution,
+              edit: defaultResolution,
+            };
+            viewScreenResolutionsRef.current = resetResolutions;
+            setViewScreenResolutions(resetResolutions);
             const emptyLayout = {
               components: [],
               gridSettings: {
@@ -1617,9 +2065,15 @@ export default function ScreenDesigner({
             setLayout(emptyLayout);
             setHistory([emptyLayout]);
             setHistoryIndex(0);
+            setTemplatePrimaryTableName("");
             viewLayoutsRef.current.list = [];
             viewLayoutsRef.current.create = [];
             viewLayoutsRef.current.edit = [];
+            autoSeededCrudViewsRef.current = {
+              list: true,
+              create: false,
+              edit: false,
+            };
             setActiveView("list");
             return;
           }
@@ -1645,14 +2099,34 @@ export default function ScreenDesigner({
               SCREEN_RESOLUTIONS[0];
             setScreenResolution(defaultResolution);
           }
+          const loadedViewResolutions = {
+            list: normalizeScreenResolution(result.viewScreenResolutions?.list ?? result.screenResolution),
+            create: normalizeScreenResolution(result.viewScreenResolutions?.create ?? result.screenResolution),
+            edit: normalizeScreenResolution(result.viewScreenResolutions?.edit ?? result.screenResolution),
+          };
+          viewScreenResolutionsRef.current = loadedViewResolutions;
+          setViewScreenResolutions(loadedViewResolutions);
+          setScreenResolution(loadedViewResolutions.list);
+
+          const inferredPrimaryTable =
+            result.primaryTable ||
+            inferPrimaryTableFromComponents(loadedLayout.components) ||
+            inferPrimaryTableFromComponents(result.viewLayouts.create) ||
+            inferPrimaryTableFromComponents(result.viewLayouts.edit);
 
           setLayout(loadedLayout);
           setHistory([loadedLayout]);
           setHistoryIndex(0);
+          setTemplatePrimaryTableName(inferredPrimaryTable ?? "");
 
           viewLayoutsRef.current.list = loadedLayout.components ?? [];
           viewLayoutsRef.current.create = result.viewLayouts.create ?? [];
           viewLayoutsRef.current.edit = result.viewLayouts.edit ?? [];
+          autoSeededCrudViewsRef.current = {
+            list: true,
+            create: (result.viewLayouts.create ?? []).length > 0,
+            edit: (result.viewLayouts.edit ?? []).length > 0,
+          };
           setActiveView("list");
         } catch (error) {
           console.error("[ScreenDesigner] 템플릿 로드 실패:", error);
@@ -1664,6 +2138,14 @@ export default function ScreenDesigner({
     }
 
     if (selectedScreen?.screen_id) {
+      setTemplatePrimaryTableName("");
+      const resetViewResolutions = {
+        list: DEFAULT_SCREEN_RESOLUTION,
+        create: DEFAULT_SCREEN_RESOLUTION,
+        edit: DEFAULT_SCREEN_RESOLUTION,
+      };
+      viewScreenResolutionsRef.current = resetViewResolutions;
+      setViewScreenResolutions(resetViewResolutions);
       // 현재 화면 ID를 전역 변수로 설정 (파일 업로드 시 사용)
       if (typeof window !== "undefined") {
         (window as any).__CURRENT_SCREEN_ID__ = selectedScreen.screen_id;
@@ -1766,6 +2248,16 @@ export default function ScreenDesigner({
               setScreenResolution(defaultResolution);
               // console.log("🔧 기본 해상도 적용:", defaultResolution);
             }
+            const baseResolution = normalizeScreenResolution(
+              layoutToUse.screenResolution ?? DEFAULT_SCREEN_RESOLUTION,
+            );
+            const screenViewResolutions = {
+              list: baseResolution,
+              create: baseResolution,
+              edit: baseResolution,
+            };
+            viewScreenResolutionsRef.current = screenViewResolutions;
+            setViewScreenResolutions(screenViewResolutions);
 
             // 🔍 디버깅: 로드된 버튼 컴포넌트의 action 확인
             const buttonComponents = layoutWithDefaultGrid.components.filter((c: any) =>
@@ -1787,6 +2279,13 @@ export default function ScreenDesigner({
 
             // ── 3뷰: list 뷰 캐시 동기화 + 뷰를 list 로 리셋 ──
             viewLayoutsRef.current.list = layoutWithDefaultGrid.components;
+            viewLayoutsRef.current.create = [];
+            viewLayoutsRef.current.edit = [];
+            autoSeededCrudViewsRef.current = {
+              list: true,
+              create: false,
+              edit: false,
+            };
             setActiveView("list");
 
             // 파일 컴포넌트 데이터 복원 (비동기)
@@ -1807,6 +2306,30 @@ export default function ScreenDesigner({
     }
   }, [selectedScreen?.screen_id, selectedScreen?.template_id]);
 
+  useEffect(() => {
+    ensureAutoCrudView("create");
+    ensureAutoCrudView("edit");
+  }, [ensureAutoCrudView]);
+
+  useEffect(() => {
+    if (!selectedScreen?.template_id) return;
+    if (currentScreenTableName) return;
+
+    const inferredTableName =
+      inferPrimaryTableFromComponents(layout.components) ||
+      inferPrimaryTableFromComponents(viewLayoutsRef.current.list) ||
+      inferPrimaryTableFromComponents(viewLayoutsRef.current.create) ||
+      inferPrimaryTableFromComponents(viewLayoutsRef.current.edit);
+
+    if (inferredTableName) {
+      setTemplatePrimaryTableName(inferredTableName);
+    }
+  }, [
+    currentScreenTableName,
+    layout.components,
+    selectedScreen?.template_id,
+  ]);
+
   // 스페이스바 키 이벤트 처리 (Pan 모드) + 전역 마우스 이벤트
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -2232,16 +2755,23 @@ export default function ScreenDesigner({
 
       // 해상도 정보를 포함한 레이아웃 데이터 생성
       // 현재 선택된 테이블을 화면의 기본 테이블로 저장
-      const currentMainTableName = tables.length > 0 ? tables[0].tableName : null;
+      const currentMainTableName =
+        tables.length > 0
+          ? tables[0].tableName
+          : currentScreenTableName ||
+            inferPrimaryTableFromComponents(viewLayoutsRef.current.list);
 
       // ── 3뷰 저장: 현재 뷰의 컴포넌트를 캐시에 동기화 ──
       viewLayoutsRef.current[activeView] = updatedComponents;
+      updateViewResolution(activeView, screenResolution);
       const listComponents = activeView === "list" ? updatedComponents : (viewLayoutsRef.current.list || []);
+      const listResolution =
+        viewScreenResolutionsRef.current.list ?? DEFAULT_SCREEN_RESOLUTION;
 
       const layoutWithResolution = {
         ...layout,
         components: listComponents, // 목록 뷰 = 메인 components (하위 호환)
-        screenResolution: screenResolution,
+        screenResolution: listResolution,
         mainTableName: currentMainTableName,
       };
 
@@ -2275,6 +2805,7 @@ export default function ScreenDesigner({
             create: v2Views.create,
             edit: v2Views.edit,
           },
+          viewScreenResolutions: viewScreenResolutionsRef.current,
         });
         toast.success("템플릿이 저장되었습니다.");
         if (onScreenUpdate && currentMainTableName) {
@@ -2315,7 +2846,7 @@ export default function ScreenDesigner({
     } finally {
       setIsSaving(false);
     }
-  }, [selectedScreen, layout, screenResolution, tables, onScreenUpdate, activeView]);
+  }, [selectedScreen, layout, screenResolution, tables, onScreenUpdate, activeView, currentScreenTableName, updateViewResolution]);
 
   // POP 미리보기 핸들러 (새 창에서 열기)
   const handlePopPreview = useCallback(() => {
@@ -6181,11 +6712,28 @@ export default function ScreenDesigner({
         if (layout.components.length > 0 && hasTarget) {
           setIsSaving(true);
           try {
-            const currentMainTableName = tables.length > 0 ? tables[0].tableName : null;
+            const currentMainTableName =
+              tables.length > 0
+                ? tables[0].tableName
+                : currentScreenTableName ||
+                  inferPrimaryTableFromComponents(viewLayoutsRef.current.list);
+
+            // ── 3뷰 저장: 현재 뷰의 컴포넌트를 캐시에 동기화 ──
+            // (activeView 가 create/edit 인 상태로 Ctrl+S 저장 시 layout.components 가
+            //  list 위치로 덮여쓰이는 버그 방지 — 반드시 list 캐시에서 꺼내야 함)
+            viewLayoutsRef.current[activeView] = [...layout.components];
+            updateViewResolution(activeView, screenResolution);
+            const listComponentsForSave =
+              activeView === "list"
+                ? layout.components
+                : (viewLayoutsRef.current.list || []);
+            const listResolution =
+              viewScreenResolutionsRef.current.list ?? DEFAULT_SCREEN_RESOLUTION;
 
             const layoutWithResolution = {
               ...layout,
-              screenResolution: screenResolution,
+              components: listComponentsForSave,
+              screenResolution: listResolution,
               mainTableName: currentMainTableName,
             };
 
@@ -6214,6 +6762,7 @@ export default function ScreenDesigner({
                 primaryTable: currentMainTableName ?? selectedScreen.table_name ?? "",
                 layout: layoutWithResolution,
                 v2Views,
+                viewScreenResolutions: viewScreenResolutionsRef.current,
               });
               toast.success("템플릿이 저장되었습니다.");
               if (onScreenUpdate && currentMainTableName) {
@@ -6617,6 +7166,7 @@ export default function ScreenDesigner({
             activeView={activeView}
             onViewChange={switchView}
             viewCounts={viewCounts}
+            visibleViews={visibleViews}
           />
           {/* 메인 컨테이너 (패널들 + 캔버스) */}
           <div className="flex flex-1 overflow-hidden">
@@ -6636,7 +7186,7 @@ export default function ScreenDesigner({
                     };
                     e.dataTransfer.setData("application/json", JSON.stringify(dragData));
                   }}
-                  selectedTableName={selectedScreen?.table_name}
+                  selectedTableName={currentScreenTableName}
                   placedColumns={placedColumns}
                   onTableSelect={handleTableSelect}
                   showTableSelector={true}
@@ -7190,6 +7740,8 @@ export default function ScreenDesigner({
                         ? <Tablet size={13} />
                         : screenResolution?.category === "mobile"
                           ? <Smartphone size={13} />
+                          : screenResolution?.category === "custom"
+                            ? <Settings size={13} />
                           : <Monitor size={13} />}
                       {screenResolution?.name || "Full HD"}
                       <span className="ft-sub">{screenResolution ? `${screenResolution.width}×${screenResolution.height}` : "1920×1080"}</span>
@@ -7199,7 +7751,7 @@ export default function ScreenDesigner({
                   <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">
+                      <DropdownMenuItem key={resolution.name} onClick={() => applyCurrentViewResolution(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>
@@ -7208,7 +7760,7 @@ export default function ScreenDesigner({
                     <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">
+                      <DropdownMenuItem key={resolution.name} onClick={() => applyCurrentViewResolution(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>
@@ -7217,12 +7769,31 @@ export default function ScreenDesigner({
                     <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">
+                      <DropdownMenuItem key={resolution.name} onClick={() => applyCurrentViewResolution(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>
                     ))}
+                    <div className="res-sep" />
+                    <DropdownMenuItem
+                      onClick={fitCurrentViewResolutionToContent}
+                      className="res-item"
+                    >
+                      <Zap size={14} className="res-item-icon" />
+                      <span className="res-item-name">현재 뷰 맞춤</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setCustomResolutionWidth(String(screenResolution.width));
+                        setCustomResolutionHeight(String(screenResolution.height));
+                        setShowCustomResolutionDialog(true);
+                      }}
+                      className="res-item"
+                    >
+                      <Settings size={14} className="res-item-icon" />
+                      <span className="res-item-name">사용자 정의</span>
+                    </DropdownMenuItem>
                   </DropdownMenuContent>
                 </DropdownMenu>
                 <div className="ft-toggles">
@@ -7699,7 +8270,7 @@ export default function ScreenDesigner({
                                 onDragStart={(e) => startComponentDrag(component, e)}
                                 onDragEnd={endDrag}
                                 selectedScreen={selectedScreen}
-                                tableName={selectedScreen?.table_name} // 🆕 디자인 모드에서도 옵션 로딩을 위해 전달
+                                tableName={currentScreenTableName} // 🆕 템플릿/일반 화면 공통 메인 테이블 전달
                                 menuObjid={menuObjid} // 🆕 메뉴 OBJID 전달
                                 // onZoneComponentDrop 제거
                                 onZoneClick={handleZoneClick}
@@ -7867,7 +8438,7 @@ export default function ScreenDesigner({
                                           onDragStart={(e) => startComponentDrag(child, e)}
                                           onDragEnd={endDrag}
                                           selectedScreen={selectedScreen}
-                                          tableName={selectedScreen?.table_name} // 🆕 디자인 모드에서도 옵션 로딩을 위해 전달
+                                          tableName={currentScreenTableName} // 🆕 템플릿/일반 화면 공통 메인 테이블 전달
                                           // onZoneComponentDrop 제거
                                           onZoneClick={handleZoneClick}
                                           // 설정 변경 핸들러 (자식 컴포넌트용)
@@ -8088,7 +8659,7 @@ export default function ScreenDesigner({
                                             component={relativeButton}
                                             isDesignMode={true}
                                             formData={{}}
-                                            tableName={selectedScreen?.table_name}
+                                            tableName={currentScreenTableName}
                                             onDataflowComplete={() => {}}
                                           />
                                         </div>
@@ -8222,6 +8793,70 @@ export default function ScreenDesigner({
             buttonCount={groupState.selectedComponents.length}
             onConfirm={handleGroupConfirm}
           />
+          <Dialog
+            open={showCustomResolutionDialog}
+            onOpenChange={setShowCustomResolutionDialog}
+          >
+            <DialogContent className="sm:max-w-md">
+              <DialogHeader>
+                <DialogTitle>
+                  {activeView === "list"
+                    ? "목록 화면"
+                    : activeView === "create"
+                      ? "등록 팝업"
+                      : "수정 팝업"}{" "}
+                  해상도
+                </DialogTitle>
+              </DialogHeader>
+              <div className="grid grid-cols-2 gap-3 py-2">
+                <div className="space-y-2">
+                  <label className="text-sm">너비</label>
+                  <Input
+                    type="number"
+                    min="1"
+                    value={customResolutionWidth}
+                    onChange={(e) => setCustomResolutionWidth(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm">높이</label>
+                  <Input
+                    type="number"
+                    min="1"
+                    value={customResolutionHeight}
+                    onChange={(e) => setCustomResolutionHeight(e.target.value)}
+                  />
+                </div>
+              </div>
+              <DialogFooter>
+                <Button
+                  variant="outline"
+                  onClick={() => setShowCustomResolutionDialog(false)}
+                >
+                  취소
+                </Button>
+                <Button
+                  onClick={() => {
+                    const width = Number(customResolutionWidth);
+                    const height = Number(customResolutionHeight);
+                    if (!width || !height || width < 1 || height < 1) {
+                      toast.error("너비와 높이를 올바르게 입력하세요.");
+                      return;
+                    }
+                    applyCurrentViewResolution({
+                      width,
+                      height,
+                      name: `사용자 정의 (${width}×${height})`,
+                      category: "custom",
+                    });
+                    setShowCustomResolutionDialog(false);
+                  }}
+                >
+                  적용
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
           {/* 모달들 */}
           {/* 메뉴 할당 모달 */}
           {showMenuAssignmentModal && selectedScreen && (
@@ -8295,4 +8930,4 @@ export default function ScreenDesigner({
       </LayerProvider>
     </ScreenPreviewProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/components/screen/ViewTabBar.tsx b/frontend/components/screen/ViewTabBar.tsx
index 4f032c77..ca347178 100644
--- a/frontend/components/screen/ViewTabBar.tsx
+++ b/frontend/components/screen/ViewTabBar.tsx
@@ -23,15 +23,30 @@ interface ViewTabBarProps {
   onViewChange: (view: ViewType) => void;
   /** 각 뷰에 컴포넌트가 있는지 (뱃지 표시용) */
   viewCounts?: Record<ViewType, number>;
+  /**
+   * 표시할 뷰 탭. 생략 시 전체 표시.
+   * list 는 항상 포함 (루트). create/edit 는 목록 뷰에
+   * 해당 actionType 버튼이 배치됐을 때만 포함되는 식으로
+   * 부모에서 결정한다.
+   */
+  visibleViews?: ViewType[];
 }
 
-export function ViewTabBar({ activeView, onViewChange, viewCounts }: ViewTabBarProps) {
-  const activeTab = VIEW_TABS.find((t) => t.id === activeView);
+export function ViewTabBar({
+  activeView,
+  onViewChange,
+  viewCounts,
+  visibleViews,
+}: ViewTabBarProps) {
+  const tabs = visibleViews
+    ? VIEW_TABS.filter((t) => visibleViews.includes(t.id))
+    : VIEW_TABS;
+  const activeTab = tabs.find((t) => t.id === activeView);
 
   return (
     <div className="view-tab-bar">
       <div className="view-tab-group">
-        {VIEW_TABS.map((tab) => {
+        {tabs.map((tab) => {
           const count = viewCounts?.[tab.id] ?? 0;
           const isActive = tab.id === activeView;
 
diff --git a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
index 1add3f89..8409a4b2 100644
--- a/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ButtonDataflowConfigPanel.tsx
@@ -188,7 +188,7 @@ export const ButtonDataflowConfigPanel: React.FC<ButtonDataflowConfigPanelProps>
       delete: "삭제",
       edit: "수정",
       copy: "복사",
-      add: "추가",
+      add: "등록",
       search: "검색",
       reset: "초기화",
       submit: "제출",
diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index d0c9f6ce..386dbff9 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -244,7 +244,12 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
           extraProps.inputType = dbInputType;
           extraProps.tableName = resolvedTableName;
           extraProps.columnName = resolvedColumnName;
-          extraProps.screenTableName = resolvedTableName;
+          extraProps.screenTableName = currentTableName || resolvedTableName;
+          extraProps.tables = allTables.map((table: any) => ({
+            tableName: table.tableName || table.table_name,
+            displayName: table.displayName || table.display_name || table.table_comment,
+            tableComment: table.tableComment || table.table_comment,
+          }));
         }
         if (componentId === "v2-input") {
           extraProps.allComponents = allComponents;
diff --git a/frontend/components/screen/toolbar/SlimToolbar.tsx b/frontend/components/screen/toolbar/SlimToolbar.tsx
index cd213f89..940bd551 100644
--- a/frontend/components/screen/toolbar/SlimToolbar.tsx
+++ b/frontend/components/screen/toolbar/SlimToolbar.tsx
@@ -76,6 +76,12 @@ interface SlimToolbarProps {
   activeView?: ViewType;
   onViewChange?: (view: ViewType) => void;
   viewCounts?: Record<ViewType, number>;
+  /**
+   * 표시할 뷰 탭. 생략 시 전체 표시.
+   * list 는 루트로 항상 포함. create/edit 는 목록 뷰에 해당
+   * actionType(add/edit) 버튼이 배치됐을 때만 부모가 포함시킨다.
+   */
+  visibleViews?: ViewType[];
 }
 
 export const SlimToolbar: React.FC<SlimToolbarProps> = ({
@@ -100,7 +106,11 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
   activeView = "list",
   onViewChange,
   viewCounts,
+  visibleViews,
 }) => {
+  const tabs = visibleViews
+    ? VIEW_TABS.filter((t) => visibleViews.includes(t.id))
+    : VIEW_TABS;
   return (
     <div className="slim-toolbar hdr">
       {/* Zone 1: Brand */}
@@ -133,7 +143,7 @@ export const SlimToolbar: React.FC<SlimToolbarProps> = ({
       {/* Zone 3: View tabs inline */}
       <div className="hdr-zone" style={{ padding: 0 }}>
         <div className="tab-group">
-          {VIEW_TABS.map((tab) => {
+          {tabs.map((tab) => {
             const count = viewCounts?.[tab.id] ?? 0;
             const isActive = tab.id === activeView;
             return (
diff --git a/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx b/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx
index ecc8563a..b867402c 100644
--- a/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/V2FieldConfigPanel.tsx
@@ -67,6 +67,12 @@ const USER_FIELD_OPTIONS = [
   { value: "userName", label: "사용자명" },
 ] as const;
 
+const DATA_ROLE_OPTIONS = [
+  { value: "primary", label: "주 테이블", desc: "이 화면의 메인 데이터예요" },
+  { value: "reference", label: "참조 테이블", desc: "다른 테이블 값을 읽어와요" },
+  { value: "child", label: "하위 테이블", desc: "상세/매핑 같은 하위 데이터예요" },
+] as const;
+
 interface ColumnOption {
   columnName: string;
   columnLabel: string;
@@ -220,15 +226,21 @@ export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
 }) => {
   const fieldType = resolveFieldType(config, componentType, metaInputType);
   const isSelectGroup = ["select", "category", "entity"].includes(fieldType);
+  const primaryTableName = screenTableName || tableName || "";
+  const dataRole = (config.dataRole || "primary") as "primary" | "reference" | "child";
+  const selectedSourceTable = dataRole === "primary" ? primaryTableName : config.sourceTable || "";
+  const hasReferenceSource = dataRole !== "primary";
 
   // ─── 채번 관련 상태 (테이블 기반) ───
   const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
   const [loadingRules, setLoadingRules] = useState(false);
-  const numberingTableName = screenTableName || tableName;
+  const numberingTableName = primaryTableName;
 
   // ─── 셀렉트 관련 상태 ───
   const [entityColumns, setEntityColumns] = useState<ColumnOption[]>([]);
   const [loadingColumns, setLoadingColumns] = useState(false);
+  const [sourceColumns, setSourceColumns] = useState<ColumnOption[]>([]);
+  const [loadingSourceColumns, setLoadingSourceColumns] = useState(false);
   const [categoryValues, setCategoryValues] = useState<CategoryValueOption[]>([]);
   const [loadingCategoryValues, setLoadingCategoryValues] = useState(false);
   const [filterColumns, setFilterColumns] = useState<ColumnOption[]>([]);
@@ -240,6 +252,26 @@ export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
     onChange({ ...config, [field]: value });
   };
 
+  const loadColumnsForTable = useCallback(async (tblName: string): Promise<ColumnOption[]> => {
+    if (!tblName) return [];
+
+    const resp = await apiClient.get(`/table-management/tables/${tblName}/columns?size=500`);
+    const data = resp.data.data || resp.data;
+    const cols = data.columns || data || [];
+
+    return cols.map((col: any) => ({
+      columnName: col.columnName || col.column_name || col.name,
+      columnLabel:
+        col.displayName ||
+        col.display_name ||
+        col.columnLabel ||
+        col.column_label ||
+        col.columnName ||
+        col.column_name ||
+        col.name,
+    }));
+  }, []);
+
   // ─── 필드 타입 전환 핸들러 ───
   const handleFieldTypeChange = (newType: FieldType) => {
     const newIsSelect = ["select", "category", "entity"].includes(newType);
@@ -278,6 +310,20 @@ export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
     }
   };
 
+  const handleDataRoleChange = (nextRole: "primary" | "reference" | "child") => {
+    const nextConfig: Record<string, any> = { ...config, dataRole: nextRole };
+
+    if (nextRole === "primary") {
+      nextConfig.sourceTable = primaryTableName || "";
+      nextConfig.sourceColumn = config.sourceColumn || columnName || config.columnName || "";
+    } else {
+      nextConfig.sourceTable = config.sourceTable || "";
+      nextConfig.sourceColumn = config.sourceColumn || "";
+    }
+
+    onChange(nextConfig);
+  };
+
   // ─── 채번 규칙 로드 (테이블 기반) ───
   useEffect(() => {
     if (fieldType !== "numbering") return;
@@ -298,20 +344,34 @@ export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
     if (!tblName) { setEntityColumns([]); return; }
     setLoadingColumns(true);
     try {
-      const resp = await apiClient.get(`/table-management/tables/${tblName}/columns?size=500`);
-      const data = resp.data.data || resp.data;
-      const cols = data.columns || data || [];
-      setEntityColumns(cols.map((col: any) => ({
-        columnName: col.columnName || col.column_name || col.name,
-        columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
-      })));
+      setEntityColumns(await loadColumnsForTable(tblName));
     } catch { setEntityColumns([]); } finally { setLoadingColumns(false); }
-  }, []);
+  }, [loadColumnsForTable]);
 
   useEffect(() => {
     if (fieldType === "entity" && config.entityTable) loadEntityColumns(config.entityTable);
   }, [fieldType, config.entityTable, loadEntityColumns]);
 
+  useEffect(() => {
+    if (!selectedSourceTable) {
+      setSourceColumns([]);
+      return;
+    }
+
+    const load = async () => {
+      setLoadingSourceColumns(true);
+      try {
+        setSourceColumns(await loadColumnsForTable(selectedSourceTable));
+      } catch {
+        setSourceColumns([]);
+      } finally {
+        setLoadingSourceColumns(false);
+      }
+    };
+
+    load();
+  }, [selectedSourceTable, loadColumnsForTable]);
+
   // ─── 카테고리 값 로드 ───
   const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
     if (!catTable || !catColumn) { setCategoryValues([]); return; }
@@ -352,17 +412,11 @@ export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
     const load = async () => {
       setLoadingFilterColumns(true);
       try {
-        const resp = await apiClient.get(`/table-management/tables/${filterTargetTable}/columns?size=500`);
-        const data = resp.data.data || resp.data;
-        const cols = data.columns || data || [];
-        setFilterColumns(cols.map((col: any) => ({
-          columnName: col.columnName || col.column_name || col.name,
-          columnLabel: col.displayName || col.display_name || col.columnLabel || col.column_label || col.columnName || col.column_name || col.name,
-        })));
+        setFilterColumns(await loadColumnsForTable(filterTargetTable));
       } catch { setFilterColumns([]); } finally { setLoadingFilterColumns(false); }
     };
     load();
-  }, [filterTargetTable]);
+  }, [filterTargetTable, loadColumnsForTable]);
 
   // ─── 옵션 관리 (select static) ───
   const options = config.options || [];
@@ -407,6 +461,106 @@ export const V2FieldConfigPanel: React.FC<V2FieldConfigPanelProps> = ({
       </div>
 
       {/* ═══ 2단계: 유형별 상세 설정 ═══ */}
+      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
+        <div className="flex items-center gap-2">
+          <Database className="h-4 w-4 text-primary" />
+          <span className="text-sm font-medium">데이터 소속</span>
+        </div>
+
+        <div className="grid grid-cols-3 gap-2">
+          {DATA_ROLE_OPTIONS.map((option) => {
+            const isSelected = dataRole === option.value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => handleDataRoleChange(option.value)}
+                className={cn(
+                  "rounded-md border px-3 py-2 text-left transition-colors",
+                  isSelected
+                    ? "border-primary bg-primary/5 ring-1 ring-primary/20"
+                    : "border-border hover:border-primary/40 hover:bg-background/60",
+                )}
+              >
+                <div className={cn("text-xs font-medium", isSelected ? "text-primary" : "text-foreground")}>
+                  {option.label}
+                </div>
+                <div className="mt-0.5 text-[10px] leading-tight text-muted-foreground">{option.desc}</div>
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="rounded-md border bg-background p-3 space-y-3">
+          <div className="space-y-1">
+            <p className="text-xs text-muted-foreground">데이터 테이블</p>
+            {hasReferenceSource ? (
+              <Select
+                value={config.sourceTable || ""}
+                onValueChange={(value) => {
+                  onChange({ ...config, dataRole, sourceTable: value, sourceColumn: "" });
+                }}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder="참조할 테이블 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tables.map((t) => (
+                    <SelectItem key={t.tableName} value={t.tableName}>
+                      {t.displayName || t.tableComment ? `${t.displayName || t.tableComment} (${t.tableName})` : t.tableName}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <div className="rounded-md border bg-muted/40 px-3 py-2 text-sm">
+                {primaryTableName || "먼저 화면 메인 테이블을 연결해주세요"}
+              </div>
+            )}
+          </div>
+
+          <div className="space-y-1">
+            <p className="text-xs text-muted-foreground">데이터 컬럼</p>
+            {hasReferenceSource ? (
+              <Select
+                value={config.sourceColumn || ""}
+                onValueChange={(value) => updateConfig("sourceColumn", value)}
+                disabled={!selectedSourceTable || loadingSourceColumns}
+              >
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder={!selectedSourceTable ? "먼저 테이블 선택" : "컬럼 선택"} />
+                </SelectTrigger>
+                <SelectContent>
+                  {sourceColumns.map((column) => (
+                    <SelectItem key={column.columnName} value={column.columnName}>
+                      {column.columnLabel}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <div className="rounded-md border bg-muted/40 px-3 py-2 text-sm">
+                {columnName || config.columnName || config.fieldKey || "-"}
+              </div>
+            )}
+          </div>
+
+          {hasReferenceSource && loadingSourceColumns && (
+            <div className="text-muted-foreground flex items-center gap-2 text-xs">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              참조 컬럼 목록 로딩 중...
+            </div>
+          )}
+
+          {hasReferenceSource && selectedSourceTable && !loadingSourceColumns && sourceColumns.length === 0 && (
+            <p className="text-[10px] text-amber-600">선택한 테이블의 컬럼 정보를 불러올 수 없어요.</p>
+          )}
+
+          <p className="text-[11px] text-muted-foreground">
+            주 테이블은 현재 화면의 메인 데이터고, 참조/하위는 다른 테이블 값을 직접 연결할 때 써요.
+          </p>
+        </div>
+      </div>
 
       {/* ─── 텍스트/숫자/여러줄: 기본 설정 ─── */}
       {(fieldType === "text" || fieldType === "number" || fieldType === "textarea") && (
diff --git a/frontend/lib/api/client.ts b/frontend/lib/api/client.ts
index 8c868392..2cc546f0 100644
--- a/frontend/lib/api/client.ts
+++ b/frontend/lib/api/client.ts
@@ -274,9 +274,11 @@ apiClient.interceptors.request.use(
         if (newToken) {
           config.headers.Authorization = `Bearer ${newToken}`;
         } else {
-          // 갱신 실패 시 인증 없는 요청을 보내면 TOKEN_MISSING 401 → 즉시 redirectToLogin 연쇄 장애
-          // 요청 자체를 차단하여 호출부의 try/catch에서 처리하도록 함
-          authLog("TOKEN_REFRESH_FAIL", `요청 인터셉터에서 갱신 실패 → 요청 차단 (${config.url})`);
+          // 갱신 실패 = 세션 복구 불가. 로그인 페이지로 즉시 이동해야 호출부가
+          // 무한 로딩에 빠지지 않음. redirectToLogin 은 isRedirecting 플래그로
+          // 중복 호출을 막으므로 동시 요청이 여러 건이어도 안전함.
+          authLog("TOKEN_REFRESH_FAIL", `요청 인터셉터에서 갱신 실패 → 로그인 리다이렉트 (${config.url})`);
+          redirectToLogin();
           return Promise.reject(new Error("TOKEN_REFRESH_FAILED"));
         }
       }
diff --git a/frontend/lib/api/dashboard.ts b/frontend/lib/api/dashboard.ts
index c3e3112c..11188c59 100644
--- a/frontend/lib/api/dashboard.ts
+++ b/frontend/lib/api/dashboard.ts
@@ -174,27 +174,35 @@ export const dashboardApi = {
 
   /**
    * 내 대시보드 목록 조회
+   *
+   * 백엔드 DashboardController: GET /api/dashboards
+   * - user_id/company_code 는 request attribute 에서 자동 주입되므로 별도 파라미터 불필요
+   * - 응답 구조: { success, data: { list:[], total_count, limit, page, total_page } }
    */
   async getMyDashboards(query: DashboardListQuery = {}) {
     const params = new URLSearchParams();
 
     if (query.page) params.append("page", query.page.toString());
     if (query.limit) params.append("limit", query.limit.toString());
-    if (query.search) params.append("search", query.search);
-    if (query.category) params.append("category", query.category);
+    if (query.search) params.append("keyword", query.search);
 
     const queryString = params.toString();
-    const endpoint = `/dashboard/my${queryString ? `?${queryString}` : ""}`;
+    const endpoint = `/dashboards${queryString ? `?${queryString}` : ""}`;
 
-    const result = await apiRequest<{ dashboards: Dashboard[] }>(endpoint);
+    const result = await apiRequest<{ list: Dashboard[]; total_count?: number; total_page?: number; page?: number; limit?: number }>(endpoint);
 
     if (!result.success) {
       throw new Error(result.message || "내 대시보드 목록 조회에 실패했습니다.");
     }
 
     return {
-      dashboards: result.data?.dashboards || [],
-      pagination: result.pagination,
+      dashboards: result.data?.list || [],
+      pagination: {
+        total: result.data?.total_count,
+        totalPage: result.data?.total_page,
+        page: result.data?.page,
+        limit: result.data?.limit,
+      },
     };
   },
 
diff --git a/frontend/lib/layout/lineLayout.ts b/frontend/lib/layout/lineLayout.ts
index 3b30c81e..30658e2c 100644
--- a/frontend/lib/layout/lineLayout.ts
+++ b/frontend/lib/layout/lineLayout.ts
@@ -35,6 +35,10 @@ export const LAYOUT_CONSTANTS = {
   OVERLAP_THRESHOLD: 0.15,
   /** snap 오차 > tolerance * 이 값 이면 overlay */
   SNAP_ERROR_MULT: 2,
+  /** 같은 윗선(row band)으로 볼 bottom 차이 허용치 */
+  ROW_BAND_TOLERANCE: 0.012,
+  /** row band 자동 정렬 대상으로 보는 최대 높이 비율 */
+  ROW_LIKE_MAX_HEIGHT: 0.12,
 } as const;
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -43,6 +47,7 @@ export const LAYOUT_CONSTANTS = {
 
 export interface LayoutBlockInput {
   id: string;
+  componentId?: string;
   xPct: number;
   yPct: number;
   wPct: number;
@@ -63,6 +68,8 @@ export interface LayoutOptions {
   snapErrorMult?: number;
   /** 세로 축 사이징 — 'fr' 는 비율 grid, 'auto' 는 content-size */
   rowSizing?: 'fr' | 'auto';
+  /** 한 줄 control 은 세로 span 을 1행으로 축소할 componentId 목록 */
+  intrinsicRowSpanIds?: string[];
 }
 
 export interface GridTrack {
@@ -321,9 +328,13 @@ export function computeLayout(
   const thinTh = opts.thinTrackThreshold ?? LAYOUT_CONSTANTS.THIN_TRACK_THRESHOLD;
   const overlapTh = opts.overlapThreshold ?? LAYOUT_CONSTANTS.OVERLAP_THRESHOLD;
   const snapMult = opts.snapErrorMult ?? LAYOUT_CONSTANTS.SNAP_ERROR_MULT;
+  const intrinsicRowSpanIds = new Set(
+    opts.intrinsicRowSpanIds ?? ['search', 'button', 'button-bar', 'pagination'],
+  );
+  const normalizedBlocks = normalizeRowBands(blocks);
 
   // 0. 빈 입력 처리
-  if (!Array.isArray(blocks) || blocks.length === 0) {
+  if (!Array.isArray(normalizedBlocks) || normalizedBlocks.length === 0) {
     return {
       xLines: [0, 1],
       yLines: [0, 1],
@@ -338,7 +349,7 @@ export function computeLayout(
   // 1. forced overlay 분리 (grid 선 추출에서 제외)
   const candidates: LayoutBlockInput[] = [];
   const forced: LayoutBlockInput[] = [];
-  for (const b of blocks) {
+  for (const b of normalizedBlocks) {
     if (b.forceOverlay) forced.push(b);
     else candidates.push(b);
   }
@@ -366,11 +377,11 @@ export function computeLayout(
   // 4. 입력 순서를 그대로 유지하며 span 매핑
   //    grid 확정된 블록은 gridOk 에 따로 쌓아두고, overlap 판정에 사용.
   const byId = new Map<string, BlockLayout>();
-  const ordered: BlockLayout[] = new Array(blocks.length);
+  const ordered: BlockLayout[] = new Array(normalizedBlocks.length);
   const gridOk: { input: LayoutBlockInput; layout: BlockLayout; inputIdx: number }[] = [];
 
-  for (let i = 0; i < blocks.length; i++) {
-    const b = blocks[i];
+  for (let i = 0; i < normalizedBlocks.length; i++) {
+    const b = normalizedBlocks[i];
 
     if (b.forceOverlay) {
       const layout = makeOverlay(b, 0, 'forced');
@@ -394,8 +405,20 @@ export function computeLayout(
 
     const colStart = l.idx + 1;
     const colEnd = r.idx + 1;
-    const rowStart = t.idx + 1;
-    const rowEnd = bt.idx + 1;
+    let rowStart = t.idx + 1;
+    let rowEnd = bt.idx + 1;
+
+    // 한 줄 control 은 저장된 큰 bounding box 때문에 여러 row 를 점유해도,
+    // 실제 렌더는 한 줄 높이로 보이는 경우가 많다. 이런 컴포넌트는 centerY
+    // 기준 단일 row span 으로 축소해 중간 공백 row 가 커지는 문제를 막는다.
+    const componentId = b.componentId;
+    if (componentId && intrinsicRowSpanIds.has(componentId) && rowEnd > rowStart + 1) {
+      const centerY = b.yPct + b.hPct / 2;
+      let centerIdx = nearestLine(centerY, yLines).idx;
+      centerIdx = Math.max(0, Math.min(centerIdx, yLines.length - 2));
+      rowStart = centerIdx + 1;
+      rowEnd = rowStart + 1;
+    }
 
     if (colEnd <= colStart || rowEnd <= rowStart) {
       const layout = makeOverlay(b, snapError, 'invalid-span');
@@ -447,6 +470,44 @@ export function computeLayout(
   };
 }
 
+function normalizeRowBands(blocks: LayoutBlockInput[]): LayoutBlockInput[] {
+  const tol = LAYOUT_CONSTANTS.ROW_BAND_TOLERANCE;
+  const maxHeight = LAYOUT_CONSTANTS.ROW_LIKE_MAX_HEIGHT;
+  const cloned = blocks.map((b) => ({ ...b }));
+  const rowLikes = cloned
+    .filter((b) => !b.forceOverlay && b.hPct <= maxHeight)
+    .sort((a, b) => a.yPct - b.yPct || a.xPct - b.xPct);
+
+  let i = 0;
+  while (i < rowLikes.length) {
+    const seedTop = rowLikes[i].yPct;
+    const band: LayoutBlockInput[] = [rowLikes[i]];
+    let j = i + 1;
+    while (j < rowLikes.length && Math.abs(rowLikes[j].yPct - seedTop) <= tol) {
+      band.push(rowLikes[j]);
+      j++;
+    }
+
+    if (band.length >= 2) {
+      const bottoms = band.map((b) => b.yPct + b.hPct);
+      const minBottom = Math.min(...bottoms);
+      const maxBottom = Math.max(...bottoms);
+
+      // 같은 윗선에서 시작한 작은 높이 블록은 bottom 차이가 조금 나도
+      // 하나의 row band 로 본다. 더 긴 블록 쪽으로 맞춰 새 가로선 분리를 막는다.
+      if (maxBottom - minBottom <= tol) {
+        for (const block of band) {
+          block.hPct = Math.max(0, maxBottom - block.yPct);
+        }
+      }
+    }
+
+    i = j;
+  }
+
+  return cloned;
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // 내부 유틸
 // ─────────────────────────────────────────────────────────────────────────────
@@ -485,7 +546,7 @@ export interface RowClassifyOptions {
   rigidRoles?: string[];
   /** rigid 판정 componentId (기본 ['button','button-bar','pagination']) */
   rigidComponentIds?: string[];
-  /** elastic 판정 componentId (기본 table/container/form/search/tabs/split-panel/accordion) */
+  /** elastic 판정 componentId (기본 table/container/form/tabs/split-panel/accordion) */
   elasticComponentIds?: string[];
   /** floor (px) */
   rigidFloor?: number;   // default 40
@@ -493,6 +554,10 @@ export interface RowClassifyOptions {
   elasticFloor?: number; // default 80
   /** gap row 의 floor (px). 기본 0 (거의 0 까지 줄일 수 있다). */
   gapFloor?: number;
+  /** gap row 의 preferred 상한 (px). 큰 공백 행이 카드 내부를 과도하게 먹지 않게 한다. */
+  gapPreferredCap?: number;
+  /** 단일 제어 컴포넌트의 preferred share 상한 (px) */
+  intrinsicPreferredCaps?: Partial<Record<string, number>>;
 }
 
 export interface RowPlan {
@@ -528,7 +593,6 @@ export function classifyRows(
       'table',
       'container',
       'form',
-      'search',
       'tabs',
       'split-panel',
       'accordion',
@@ -538,6 +602,14 @@ export function classifyRows(
   const semiFloor = opts.semiFloor ?? 56;
   const elasticFloor = opts.elasticFloor ?? 80;
   const gapFloor = opts.gapFloor ?? 0;
+  const gapPreferredCap = opts.gapPreferredCap ?? 24;
+  const intrinsicPreferredCaps = {
+    search: 44,
+    button: 40,
+    'button-bar': 40,
+    pagination: 40,
+    ...(opts.intrinsicPreferredCaps ?? {}),
+  };
 
   const byId = new Map<string, RowClassifyBlockInfo>();
   for (const b of blocks) byId.set(b.id, b);
@@ -555,7 +627,7 @@ export function classifyRows(
   }
 
   for (const bl of layout.blocks) {
-    if (bl.mode !== 'grid') continue;
+    if (bl.mode === 'overlay') continue;
     const b = byId.get(bl.blockId);
     if (!b) continue;
     const rs = (bl.rowStart ?? 1) - 1;
@@ -563,7 +635,12 @@ export function classifyRows(
     const span = re - rs;
     if (span <= 0) continue;
     const designH = Math.max(0, b.hPct * baseHeight);
-    const share = designH / span;
+    const intrinsicCap =
+      b.componentId != null ? intrinsicPreferredCaps[b.componentId] : undefined;
+    const share =
+      intrinsicCap != null
+        ? Math.min(designH / span, intrinsicCap)
+        : designH / span;
 
     let kind: BlockKind;
     if (b.componentId && elasticIds.has(b.componentId)) kind = 'elastic';
@@ -598,7 +675,10 @@ export function classifyRows(
       // gap 의 preferred 는 디자인 원본 yLines 간격 (= weight * baseHeight).
       // 블록이 없으니 maxShare 는 0 이다.
       const designH = Math.max(0, layout.rows[i].weight * baseHeight);
-      preferredPx = Math.max(floorPx, Math.round(designH));
+      preferredPx = Math.max(
+        floorPx,
+        Math.min(Math.round(designH), gapPreferredCap),
+      );
     } else {
       floorPx =
         type === 'rigid'
diff --git a/frontend/lib/registry/DynamicComponentRenderer.tsx b/frontend/lib/registry/DynamicComponentRenderer.tsx
index e9b28985..0524b2f8 100644
--- a/frontend/lib/registry/DynamicComponentRenderer.tsx
+++ b/frontend/lib/registry/DynamicComponentRenderer.tsx
@@ -517,7 +517,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
   // DB input_type이 "text" 등 비-카테고리로 변경된 경우 이 분기를 건너뜀
   const savedInputType = (component as any).componentConfig?.inputType || (component as any).inputType;
   const webType = (component as any).componentConfig?.webType;
-  const tableName = (component as any).tableName;
+  const tableName =
+    (component as any).tableName ||
+    (component as any).componentConfig?.tableName ||
+    props.tableName;
   const columnName = (component as any).columnName;
 
   // DB input_type 확인: 데이터타입관리에서 변경한 최신 값이 레이아웃 저장값보다 우선
@@ -980,7 +983,10 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           // 🆕 엔티티 검색 컴포넌트는 componentConfig.tableName 유지, 그 외는 화면 테이블명 사용
           // 🆕 component.tableName도 확인 (V2 레이아웃에서 overrides.tableName이 복원됨)
           tableName: useConfigTableName
-            ? component.component_config?.tableName || (component as any).tableName || tableName
+            ? component.component_config?.tableName ||
+              (component as any).componentConfig?.tableName ||
+              (component as any).tableName ||
+              props.tableName
             : tableName,
           menuId, // 🆕 메뉴 ID
           menuObjid, // 🆕 메뉴 OBJID (메뉴 스코프)
diff --git a/frontend/lib/registry/components/button/ButtonComponent.tsx b/frontend/lib/registry/components/button/ButtonComponent.tsx
index 112efe7b..d7ba6bfa 100644
--- a/frontend/lib/registry/components/button/ButtonComponent.tsx
+++ b/frontend/lib/registry/components/button/ButtonComponent.tsx
@@ -182,6 +182,19 @@ export const ButtonComponent: React.FC<ButtonComponentProps> = ({
     buttonStyle.outlineOffset = "2px";
   }
 
+  // 템플릿 컨텍스트가 내려주는 액션 콜백 — actionType 에 따라 해당 콜백 호출
+  const p2 = props as any;
+  const ctxOnAdd: (() => void) | undefined =
+    typeof p2.onAdd === "function" ? p2.onAdd : undefined;
+  const ctxOnEdit: (() => void) | undefined =
+    typeof p2.onEdit === "function" ? p2.onEdit : undefined;
+  const ctxOnDelete: (() => void) | undefined =
+    typeof p2.onDelete === "function" ? p2.onDelete : undefined;
+  const ctxOnFormSubmit: (() => void) | undefined =
+    typeof p2.onFormSubmit === "function" ? p2.onFormSubmit : undefined;
+  const ctxOnFormCancel: (() => void) | undefined =
+    typeof p2.onFormCancel === "function" ? p2.onFormCancel : undefined;
+
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (disabled) return;
@@ -192,6 +205,32 @@ export const ButtonComponent: React.FC<ButtonComponentProps> = ({
     if (componentConfig.confirm && !window.confirm(componentConfig.confirm)) {
       return;
     }
+
+    // actionType 기반 분기 — 매칭되는 게 있으면 그걸 호출하고,
+    // 아니면 기존 onClick 폴백 (빌더/커스텀 경로)
+    const at = componentConfig.actionType;
+    switch (at) {
+      case "add":
+        if (ctxOnAdd) return ctxOnAdd();
+        break;
+      case "edit":
+        if (ctxOnEdit) return ctxOnEdit();
+        break;
+      case "delete":
+        if (ctxOnDelete) return ctxOnDelete();
+        break;
+      case "save":
+      case "submit":
+        if (ctxOnFormSubmit) return ctxOnFormSubmit();
+        break;
+      case "cancel":
+      case "close":
+        if (ctxOnFormCancel) return ctxOnFormCancel();
+        break;
+      // search / reset / navigate / popup / approval / custom 은 다음 단계
+      default:
+        break;
+    }
     onClick?.();
   };
 
@@ -262,6 +301,16 @@ export const ButtonComponent: React.FC<ButtonComponentProps> = ({
     displayMode: _62,
     iconTextPosition: _63,
     iconGap: _64,
+    // 템플릿 컨텍스트 액션 콜백 — DOM 에 흘리지 않음
+    onAdd: _65,
+    onEdit: _66,
+    onDelete: _67,
+    onFormSubmit: _68,
+    onFormCancel: _69,
+    onSearch: _70,
+    searchParams: _71,
+    selectedRow: _72,
+    view: _73,
     ...domProps
   } = props as any;
   /* eslint-enable @typescript-eslint/no-unused-vars */
diff --git a/frontend/lib/registry/components/button/ButtonConfigPanel.tsx b/frontend/lib/registry/components/button/ButtonConfigPanel.tsx
index ee06c57f..459327dd 100644
--- a/frontend/lib/registry/components/button/ButtonConfigPanel.tsx
+++ b/frontend/lib/registry/components/button/ButtonConfigPanel.tsx
@@ -98,7 +98,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
           <option value="save">저장 (save)</option>
           <option value="edit">수정 (edit)</option>
           <option value="delete">삭제 (delete)</option>
-          <option value="add">추가 (add)</option>
+          <option value="add">등록 (add)</option>
           <option value="cancel">취소 (cancel)</option>
           <option value="close">닫기 (close)</option>
           <option value="navigate">이동 (navigate)</option>
diff --git a/frontend/lib/registry/components/search/SearchComponent.tsx b/frontend/lib/registry/components/search/SearchComponent.tsx
index 21d7e5fd..c1232dcd 100644
--- a/frontend/lib/registry/components/search/SearchComponent.tsx
+++ b/frontend/lib/registry/components/search/SearchComponent.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { SearchConfig } from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
@@ -58,24 +58,46 @@ export const SearchComponent: React.FC<SearchComponentProps> = ({
   const placeholder = componentConfig.placeholder ?? "검색어를 입력하세요";
   const layout = componentConfig.layout ?? "inline";
   const showResetButton = componentConfig.showResetButton ?? true;
+  const autoSearch = componentConfig.autoSearch ?? false;
   const searchButtonText = componentConfig.searchButtonText ?? "검색";
   const helperText = componentConfig.helperText;
 
-  const [keyword, setKeyword] = useState("");
+  const onSearch =
+    typeof (props as any).onSearch === "function"
+      ? ((props as any).onSearch as (params: Record<string, any>) => void)
+      : undefined;
 
-  const handleSearch = () => {
-    if (isDesignMode) return;
-    // TODO: DataPort 연결 (Phase F)
-    // v2EventBus.emit('search:executed', { keyword })
+  const [keyword, setKeyword] = useState("");
+  const fillWrapper = isDesignMode === true;
+
+  const emit = (kw: string) => {
+    if (isDesignMode || !onSearch) return;
+    const trimmed = kw.trim();
+    onSearch(trimmed ? { keyword: trimmed } : {});
   };
 
+  const handleSearch = () => emit(keyword);
+
   const handleReset = () => {
     setKeyword("");
+    emit("");
   };
 
+  // autoSearch: 300ms 디바운스
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!autoSearch || isDesignMode) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => emit(keyword), 300);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keyword, autoSearch, isDesignMode]);
+
   const containerStyle: React.CSSProperties = {
     width: "100%",
-    height: "100%",
+    ...(fillWrapper ? { height: "100%" } : { height: "auto" }),
     display: "flex",
     flexDirection: layout === "inline" ? "row" : "column",
     alignItems: layout === "inline" ? "center" : "stretch",
@@ -83,6 +105,7 @@ export const SearchComponent: React.FC<SearchComponentProps> = ({
     padding: "6px 8px",
     boxSizing: "border-box",
     background: "transparent",
+    alignSelf: fillWrapper ? "stretch" : "center",
     ...(component as any).style,
     ...style,
   };
@@ -191,6 +214,9 @@ export const SearchComponent: React.FC<SearchComponentProps> = ({
     // 기타 noise
     disabled: _58,
     required: _59,
+    // Search ↔ Table 연동 props — DOM 에 흘리지 않음
+    onSearch: _60,
+    searchParams: _61,
     ...domProps
   } = props as any;
   /* eslint-enable @typescript-eslint/no-unused-vars */
diff --git a/frontend/lib/registry/components/search/SearchConfigPanel.tsx b/frontend/lib/registry/components/search/SearchConfigPanel.tsx
index efda0887..bdfd8020 100644
--- a/frontend/lib/registry/components/search/SearchConfigPanel.tsx
+++ b/frontend/lib/registry/components/search/SearchConfigPanel.tsx
@@ -1,6 +1,17 @@
 "use client";
 
 import React, { useCallback, useMemo, useState, useEffect } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { cn } from "@/lib/utils";
 import type { SearchConfig } from "./types";
 
 /**
@@ -91,25 +102,89 @@ export const SearchConfigPanel: React.FC<SearchConfigPanelProps> = ({
   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";
 
+  const [tableComboOpen, setTableComboOpen] = useState(false);
+  const selectedOption = tableOptions.find((t) => t.value === connectedTable);
+
   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>
+          <Popover open={tableComboOpen} onOpenChange={setTableComboOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                role="combobox"
+                aria-expanded={tableComboOpen}
+                className={cn(sel, "flex items-center justify-between text-left")}
+              >
+                <span className={cn("truncate", !connectedTable && "text-muted-foreground")}>
+                  {selectedOption?.label ?? connectedTable ?? "선택..."}
+                </span>
+                <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
+              </button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[260px] p-0" align="start">
+              <Command
+                filter={(value, search) => {
+                  if (!search) return 1;
+                  return value.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
+                }}
+              >
+                <CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
+                <CommandList className="max-h-[300px]">
+                  <CommandEmpty className="py-4 text-center text-xs text-muted-foreground">
+                    일치하는 테이블 없음
+                  </CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem
+                      value=""
+                      onSelect={() => {
+                        onTableChange?.("");
+                        patch({ selectedTable: "" } as any);
+                        setTableComboOpen(false);
+                      }}
+                      className="text-xs"
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-3 w-3",
+                          !connectedTable ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                      <span className="text-muted-foreground">선택...</span>
+                    </CommandItem>
+                    {tableOptions.map((t) => (
+                      <CommandItem
+                        key={t.value}
+                        value={`${t.value} ${t.label}`}
+                        onSelect={() => {
+                          onTableChange?.(t.value);
+                          patch({ selectedTable: t.value } as any);
+                          setTableComboOpen(false);
+                        }}
+                        className="text-xs"
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-3 w-3 shrink-0",
+                            connectedTable === t.value ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                        <span className="flex-1 truncate">{t.label}</span>
+                        {t.label !== t.value && (
+                          <span className="ml-2 shrink-0 text-[0.6rem] text-muted-foreground truncate max-w-[100px]">
+                            {t.value}
+                          </span>
+                        )}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
           {connectedTable && tableColumns && tableColumns.length > 0 && (
             <button
               type="button"
diff --git a/frontend/lib/registry/components/table/TableComponent.tsx b/frontend/lib/registry/components/table/TableComponent.tsx
index 36a1d461..4b3ea382 100644
--- a/frontend/lib/registry/components/table/TableComponent.tsx
+++ b/frontend/lib/registry/components/table/TableComponent.tsx
@@ -110,6 +110,12 @@ export const TableComponent: React.FC<TableComponentProps> = ({
   const showToolbar = componentConfig.showToolbar ?? true;
   const emptyMessage = componentConfig.emptyMessage ?? "데이터가 없습니다";
 
+  // ─── 외부 검색 파라미터 (Search 컴포넌트가 onSearch 로 업데이트) ───
+  const externalSearch =
+    (props as any).searchParams && typeof (props as any).searchParams === "object"
+      ? ((props as any).searchParams as Record<string, any>)
+      : undefined;
+
   // ─── 데이터 fetch ───
   const tableData = useTableData({
     tableName,
@@ -117,6 +123,7 @@ export const TableComponent: React.FC<TableComponentProps> = ({
     pageSize: isDesignMode
       ? Math.min(componentConfig.pagination?.pageSize ?? DESIGN_PREVIEW_ROWS, DESIGN_PREVIEW_ROWS)
       : componentConfig.pagination?.pageSize ?? 20,
+    search: isDesignMode ? undefined : externalSearch,
   });
 
   // ─── 행 선택 ───
@@ -170,6 +177,8 @@ export const TableComponent: React.FC<TableComponentProps> = ({
     splitRatio: _63, groupBy: _64, pivotRows: _65, pivotColumns: _66, pivotValues: _67,
     emptyMessage: _68, showToolbar: _69, showExcel: _70, showRefresh: _71,
     disabled: _72, required: _73,
+    // Search ↔ Table 연동 props — DOM 에 흘리지 않음
+    onSearch: _74, searchParams: _75,
     ...domProps
   } = props as any;
   /* eslint-enable @typescript-eslint/no-unused-vars */
diff --git a/frontend/lib/utils/templateAdapter.ts b/frontend/lib/utils/templateAdapter.ts
index 9e05ffdd..c0dec5b9 100644
--- a/frontend/lib/utils/templateAdapter.ts
+++ b/frontend/lib/utils/templateAdapter.ts
@@ -31,6 +31,12 @@ export interface TemplateSavePayload {
     create?: Record<string, any>[];
     edit?: Record<string, any>[];
   };
+  /** 뷰별 해상도 */
+  viewScreenResolutions?: {
+    list?: Record<string, any>;
+    create?: Record<string, any>;
+    edit?: Record<string, any>;
+  };
   /** 템플릿 수준 필드 규격 (아직 미사용, 확장용) */
   fields?: Record<string, any>[];
   /** DataPort 연결 (아직 미사용, 확장용) */
@@ -49,6 +55,11 @@ export async function saveTemplate(p: TemplateSavePayload): Promise<void> {
     edit: p.v2Views?.edit ?? [],
     gridSettings: p.layout.gridSettings,
     screenResolution: p.layout.screenResolution,
+    screenResolutions: p.viewScreenResolutions ?? {
+      list: p.layout.screenResolution,
+      create: p.layout.screenResolution,
+      edit: p.layout.screenResolution,
+    },
     mainTableName: p.primaryTable,
   };
   const payload: Record<string, any> = {
@@ -97,6 +108,11 @@ export interface LoadedTemplate {
   };
   primaryTable: string;
   screenResolution?: Record<string, any>;
+  viewScreenResolutions?: {
+    list?: Record<string, any>;
+    create?: Record<string, any>;
+    edit?: Record<string, any>;
+  };
 }
 
 function parseJsonMaybe(raw: any): any {
@@ -128,6 +144,11 @@ export async function loadTemplateAsLayout(
   const listV2 = Array.isArray(viewsObj.list) ? viewsObj.list : [];
   const createV2 = Array.isArray(viewsObj.create) ? viewsObj.create : [];
   const editV2 = Array.isArray(viewsObj.edit) ? viewsObj.edit : [];
+  const viewScreenResolutions = viewsObj.screenResolutions ?? {
+    list: viewsObj.screenResolution,
+    create: viewsObj.screenResolution,
+    edit: viewsObj.screenResolution,
+  };
 
   const legacyListLayout = convertV2ToLegacy({
     components: listV2,
@@ -157,5 +178,6 @@ export async function loadTemplateAsLayout(
     primaryTable:
       template.primary_table ?? template.PRIMARY_TABLE ?? viewsObj.mainTableName ?? "",
     screenResolution: viewsObj.screenResolution,
+    viewScreenResolutions,
   };
 }
diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css
index cb0d8823..1aa40972 100644
--- a/frontend/styles/dashboard.css
+++ b/frontend/styles/dashboard.css
@@ -81,6 +81,7 @@
 /* ── 콘텐츠 영역 ── */
 .dash-content {
   flex: 1 1 auto;
+  width: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
@@ -124,7 +125,12 @@
 
 /* ── 캔버스 ── */
 .dash-canvas {
+  display: block;
+  align-self: stretch;
   flex: 1 1 auto;
+  width: 100%;
+  min-width: 100%;
+  height: 100%;
   position: relative;
   padding: 0;
   min-height: 0;
@@ -145,7 +151,7 @@
   background: var(--v5-surface-solid);
   border: 1px solid var(--v5-border);
   border-radius: 16px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 20px rgba(var(--v5-primary-rgb),.10);
+  box-shadow: 0 1px 2px rgba(0,0,0,.06);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -155,19 +161,30 @@
 .dark .dash-card {
   background: var(--v5-surface-solid);
   border-color: var(--v5-border);
-  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 0 20px rgba(var(--v5-primary-rgb),.15);
+  box-shadow: 0 1px 2px rgba(0,0,0,.3);
+}
+.dark .dash-card { box-shadow: 0 2px 8px rgba(0,0,0,0.24); }
+.dash-card:hover { border-color: var(--v5-border); box-shadow: inherit; }
+.dash-canvas.edit-mode .dash-card {
+  cursor: move;
+  border-style: solid;
+  border-color: rgba(var(--v5-primary-rgb),.3);
+}
+.dash-canvas.edit-mode .dash-card-head,
+.dash-canvas.edit-mode .dash-mini-body,
+.dash-canvas.edit-mode .dash-card-body {
+  cursor: move;
+  user-select: none;
+}
+.dash-canvas.edit-mode .dash-card-body > * {
+  pointer-events: none;
 }
-.dark .dash-card { box-shadow: 0 8px 32px rgba(0,0,0,0.4), var(--v5-glow-sm); }
-.dash-card:hover { border-color: rgba(var(--v5-primary-rgb),.25);
-  box-shadow: 0 12px 40px rgba(0,0,0,0.08), var(--v5-glow-md); }
-.dash-canvas.edit-mode .dash-card { cursor: move;
-  border-style: solid; border-color: rgba(var(--v5-primary-rgb),.3); }
 .dash-card.dragging {
-  box-shadow: 0 24px 60px rgba(var(--v5-primary-rgb),.35), var(--v5-glow-lg, var(--v5-glow-md));
+  box-shadow: 0 0 0 1px rgba(var(--v5-primary-rgb),.35);
   border-color: var(--v5-primary); z-index: 50;
 }
 .dash-card.resizing {
-  box-shadow: 0 24px 60px rgba(var(--v5-cyan-rgb),.3), var(--v5-glow-lg, var(--v5-glow-md));
+  box-shadow: 0 0 0 1px rgba(var(--v5-cyan-rgb),.38);
   border-color: var(--v5-cyan); z-index: 50;
 }
 
@@ -293,19 +310,65 @@
   overflow: hidden;
 }
 
-/* 리사이즈 핸들 */
+/* 리사이즈 핸들 — 8방향 (edit mode 에서만 표시)
+   ★ DashboardCard 가 <div className="dash-resize-handle {dir}" data-resize="{dir}"/> 8개 렌더
+*/
 .dash-resize-handle {
-  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
-  cursor: nwse-resize; display: none; align-items: center; justify-content: center;
-  color: var(--v5-text-muted); opacity: .6; transition: opacity .2s;
+  position: absolute; display: none; z-index: 20;
+  color: var(--v5-text-muted); opacity: 0; transition: opacity .2s;
+  pointer-events: none;
 }
-.dash-resize-handle:hover { opacity: 1; color: var(--v5-primary); }
-.dash-canvas.edit-mode .dash-resize-handle { display: flex; }
-.dash-resize-handle::before {
-  content: ''; position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px;
-  background: linear-gradient(135deg, transparent 50%, currentColor 50%, currentColor 60%,
-    transparent 60%, transparent 70%, currentColor 70%, currentColor 80%, transparent 80%);
+.dash-canvas.edit-mode .dash-resize-handle { display: block; }
+.dash-canvas.edit-mode [data-card-id]:hover .dash-resize-handle {
+  opacity: .55;
+  pointer-events: auto;
 }
+.dash-canvas.edit-mode .dash-resize-handle:hover { opacity: 1; color: var(--v5-primary); }
+
+/* 변(edge) 핸들 — 카드 전체 변을 다 먹지 않도록 중앙 짧은 구간만 활성화 */
+.dash-resize-handle.n { top: -3px; left: calc(50% - 36px); width: 72px; height: 6px; cursor: ns-resize; }
+.dash-resize-handle.s { bottom: -3px; left: calc(50% - 36px); width: 72px; height: 6px; cursor: ns-resize; }
+.dash-resize-handle.e { right: -3px; top: calc(50% - 36px); width: 6px; height: 72px; cursor: ew-resize; }
+.dash-resize-handle.w { left: -3px; top: calc(50% - 36px); width: 6px; height: 72px; cursor: ew-resize; }
+
+/* 코너(corner) 핸들 — 16x16 정사각형, 대각 커서 */
+.dash-resize-handle.ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
+.dash-resize-handle.nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
+.dash-resize-handle.se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
+.dash-resize-handle.sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
+
+/* 코너 시각 표식 */
+.dash-resize-handle.ne::before,
+.dash-resize-handle.nw::before,
+.dash-resize-handle.se::before,
+.dash-resize-handle.sw::before {
+  content: ''; position: absolute; width: 8px; height: 8px;
+  border: 2px solid currentColor; border-radius: 2px; background: var(--v5-surface-solid);
+}
+.dash-resize-handle.ne::before { top: 0; right: 0; }
+.dash-resize-handle.nw::before { top: 0; left: 0; }
+.dash-resize-handle.se::before { bottom: 0; right: 0; }
+.dash-resize-handle.sw::before { bottom: 0; left: 0; }
+
+/* 스냅 가이드 라인 — 드래그 중 다른 카드/캔버스 경계에 달라붙을 때 시각 표시 */
+.dash-snap-guide {
+  position: absolute; pointer-events: none; z-index: 100;
+  opacity: .95;
+  border-radius: 999px;
+  background:
+    linear-gradient(90deg,
+      rgba(var(--v5-primary-rgb), 0),
+      rgba(var(--v5-primary-rgb), .9) 18%,
+      rgba(var(--v5-cyan-rgb), .95) 50%,
+      rgba(var(--v5-primary-rgb), .9) 82%,
+      rgba(var(--v5-primary-rgb), 0)
+    );
+  box-shadow:
+    0 0 0 1px rgba(var(--v5-cyan-rgb), .22),
+    0 0 14px rgba(var(--v5-cyan-rgb), .28);
+}
+.dash-snap-guide.v { width: 2px; }
+.dash-snap-guide.h { height: 2px; }
 
 /* 접힌 카드 */
 .dash-card.collapsed .dash-card-body { display: none; }
@@ -743,21 +806,28 @@
   color: rgb(var(--v5-primary-rgb));
   background: transparent;
 }
-.ud-htool.on::before {
+/* 언더라인 — 상시 존재, on/off 전환 시 양방향 scaleX transition */
+.ud-htool::before {
   content: '';
   position: absolute;
   left: 14px; right: 14px; bottom: 4px;
   height: 2px;
   background: rgb(var(--v5-primary-rgb));
   border-radius: 2px;
+  transform: scaleX(0);
   transform-origin: left center;
-  animation: ud-htool-underline .35s var(--v5-ease-move) both;
+  opacity: 0;
+  transition:
+    transform .35s var(--v5-ease-move),
+    opacity .3s var(--v5-ease-move),
+    background-color .22s var(--v5-ease-move),
+    box-shadow .22s var(--v5-ease-move);
   pointer-events: none;
   box-shadow: 0 0 8px rgba(var(--v5-primary-rgb), .45);
 }
-@keyframes ud-htool-underline {
-  from { transform: scaleX(0); opacity: 0; }
-  to   { transform: scaleX(1); opacity: 1; }
+.ud-htool.on::before {
+  transform: scaleX(1);
+  opacity: 1;
 }
 .ud-htool.on:hover { filter: brightness(1.1); }
 
diff --git a/frontend/styles/v5-layout.css b/frontend/styles/v5-layout.css
index 8f1e6855..e9482f1b 100644
--- a/frontend/styles/v5-layout.css
+++ b/frontend/styles/v5-layout.css
@@ -110,15 +110,15 @@
   --v5-green-rgb:85,239,196;
   --v5-amber-rgb:255,234,167;
 
-  --v5-bg:#06050e; --v5-bg-subtle:#0c0b18;
-  --v5-surface:rgba(17,16,42,0.5); --v5-surface-solid:#11102a;
-  --v5-surface-hover:#191840;
-  --v5-text:#eae8f4; --v5-text-sec:#8d8ba8; --v5-text-muted:#5a587a;
+  --v5-bg:#0a0b0d; --v5-bg-subtle:#111215;
+  --v5-surface:rgba(23,24,27,0.5); --v5-surface-solid:#17181b;
+  --v5-surface-hover:#1f2025;
+  --v5-text:#ebecee; --v5-text-sec:#8e8f92; --v5-text-muted:#5a5b5e;
   --v5-primary:rgb(var(--v5-primary-rgb)); --v5-primary-light:#c8c4ff; --v5-primary-glow:rgba(var(--v5-primary-rgb),0.25);
   --v5-cyan:rgb(var(--v5-cyan-rgb)); --v5-cyan-glow:rgba(var(--v5-cyan-rgb),0.15);
   --v5-pink:rgb(var(--v5-pink-rgb)); --v5-red:rgb(var(--v5-red-rgb)); --v5-green:rgb(var(--v5-green-rgb)); --v5-amber:rgb(var(--v5-amber-rgb));
-  --v5-border:rgba(var(--v5-primary-rgb),0.1); --v5-border-subtle:rgba(255,255,255,0.04);
-  --v5-glass:rgba(17,16,42,0.45); --v5-glass-strong:rgba(17,16,42,0.65);
+  --v5-border:rgba(255,255,255,0.08); --v5-border-subtle:rgba(255,255,255,0.04);
+  --v5-glass:rgba(23,24,27,0.45); --v5-glass-strong:rgba(23,24,27,0.65);
   --v5-glass-border:rgba(var(--v5-primary-rgb),0.12);
   --v5-glow-sm:0 0 20px rgba(var(--v5-primary-rgb),0.1);
   --v5-glow-md:0 0 40px rgba(var(--v5-primary-rgb),0.18);
@@ -870,7 +870,7 @@ html:not(.dark) .v5-side{
   --v5-mm-text:#1a1825;
   --v5-mm-text-sec:#4e4c5e;
   --v5-mm-text-muted:#8a8899;
-  --v5-mm-accent:#6c5ce7;
+  --v5-mm-accent:rgb(var(--v5-primary-rgb));
   --v5-mm-accent-soft:rgba(var(--v5-primary-rgb),.08);
   --v5-mm-accent-line:rgba(var(--v5-primary-rgb),.22);
   --v5-mm-ring:rgba(var(--v5-primary-rgb),.14);
@@ -879,20 +879,22 @@ html:not(.dark) .v5-side{
   --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-surface-solid(#17181b) 와 톤 맞춤.
+     보라빛은 제거하고 테마색은 accent-* 토큰으로만 은은히 들어옴. */
+  --v5-mm-bg:#0a0a0c;
+  --v5-mm-panel:#161618;
+  --v5-mm-sunk:#111113;
+  --v5-mm-hover:#1c1c1f;
+  --v5-mm-faint:#4a4a4e;
+  --v5-mm-border:#26262a;
+  --v5-mm-border-2:#1c1c20;
+  --v5-mm-text:#f2f2f4;
+  --v5-mm-text-sec:#a5a5ac;
+  --v5-mm-text-muted:#72727a;
+  --v5-mm-accent:rgb(var(--v5-primary-rgb));
+  --v5-mm-accent-soft:rgba(var(--v5-primary-rgb),.09);
+  --v5-mm-accent-line:rgba(var(--v5-primary-rgb),.22);
+  --v5-mm-ring:rgba(var(--v5-primary-rgb),.22);
   --v5-mm-green:#5eeabc;
   --v5-mm-red:#ff6a7a;
   --v5-mm-amber:#f2b45e;
@@ -966,9 +968,10 @@ html:not(.dark) .v5-side{
 .dark .v5-mm-node.on{background:rgba(var(--v5-primary-rgb),.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{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
+  color:var(--v5-mm-text-muted);flex-shrink:0;border-radius:6px;transition:all .1s;margin:-4px 0;}
+.v5-mm-caret:hover{background:var(--v5-mm-hover);color:var(--v5-mm-text);}
+.dark .v5-mm-caret:hover{background:rgba(255,255,255,.06);}
 .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;}
@@ -1000,7 +1003,7 @@ html:not(.dark) .v5-side{
 .dark .v5-mm-node.l1:hover{border-color:rgba(var(--v5-primary-rgb),.2);background:rgba(var(--v5-primary-rgb),.05);}
 .v5-mm-node.l1.on{border-color:var(--v5-mm-accent);background:rgba(var(--v5-primary-rgb),.08);}
 .dark .v5-mm-node.l1.on{background:rgba(var(--v5-primary-rgb),.08);}
-.v5-mm-node.l1 .v5-mm-caret{width:18px;height:18px;}
+.v5-mm-node.l1 .v5-mm-caret{width:28px;height:28px;border-radius:8px;}
 .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;}
@@ -1011,32 +1014,27 @@ html:not(.dark) .v5-side{
 /* 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);}
+/* 가로 stub — 세로선은 .v5-mm-sub 컨테이너가 통합으로 그려 노드 간 끊김 없음 */
+.v5-mm-node.l2::after{content:'';position:absolute;left:1.4rem;top:50%;width:.7rem;height:1px;background:var(--v5-mm-border);}
+.v5-mm-node.l3::after{content:'';position:absolute;left:2.5rem;top:50%;width:.7rem;height:1px;background:var(--v5-mm-border);}
+.dark .v5-mm-node.l2::after,
+.dark .v5-mm-node.l3::after{background:rgba(255,255,255,.22);}
 
-/* 서브트리 펼침 — 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;}
+/* 서브트리 — grid-template-rows 트릭으로 펼침/접힘 양방향 애니메이션 */
+.v5-mm-sub{
+  display:grid;grid-template-rows:0fr;opacity:0;position:relative;
+  transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1),opacity .22s ease;
 }
-.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;}
+.v5-mm-sub.is-open{grid-template-rows:1fr;opacity:1;}
+.v5-mm-sub > .v5-mm-sub-inner{overflow:hidden;min-height:0;}
+
+/* 통합 세로선 — L2 기본, 중첩 시 L3 들여쓰기 */
+.v5-mm-sub::before{
+  content:'';position:absolute;left:1.4rem;top:0;bottom:0;width:1px;
+  background:var(--v5-mm-border-2);pointer-events:none;
 }
+.v5-mm-sub .v5-mm-sub::before{left:2.5rem;}
+.dark .v5-mm-sub::before{background:rgba(255,255,255,.18);}
 
 /* caret 회전 부드럽게 */
 .v5-mm-caret svg{transition:transform .28s cubic-bezier(.34,1.56,.64,1);}
@@ -1220,6 +1218,20 @@ 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;}
 
+/* MenuIconPicker 슬롯 — 내부 shadcn Button(h-10=40px) 을 v5-mm-inp 높이(36px) 로 정렬 */
+.v5-mm-iconpicker-slot > .space-y-2{margin-top:0;}
+.v5-mm-iconpicker-slot .menu-icon-picker-trigger{
+  height:36px!important;min-height:36px!important;
+  border-radius:8px!important;font-size:.78rem!important;
+}
+.v5-mm-iconpicker-slot .menu-icon-picker-option{
+  height:auto!important;min-height:68px!important;
+  border-radius:8px!important;font-size:inherit!important;
+}
+.v5-mm-iconpicker-slot .menu-icon-picker-option svg{
+  width:20px;height:20px;flex-shrink:0;
+}
+
 .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;}
@@ -1253,10 +1265,12 @@ select.v5-mm-inp{padding-right:2rem;appearance:none;-webkit-appearance:none;
 .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(var(--v5-primary-rgb),.35),inset 0 1px 0 rgba(255,255,255,.22);}
-.v5-mm-btn.primary:hover{background:#5c4ed4;border-color:#5c4ed4;transform:translateY(-1px);
+.v5-mm-btn.primary:hover{background:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 88%,#000);
+  border-color:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 88%,#000);transform:translateY(-1px);
   box-shadow:0 4px 12px -2px rgba(var(--v5-primary-rgb),.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);}
+.dark .v5-mm-btn.primary:hover{background:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 85%,#fff);
+  border-color:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 85%,#fff);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(var(--v5-red-rgb),.05);}
 .v5-mm-btn.sm{height:28px;padding:0 .7rem;font-size:.66rem;}
diff --git a/notes/gbpark/2026-04-22-company-mng-mockup.html b/notes/gbpark/2026-04-22-company-mng-mockup.html
new file mode 100644
index 00000000..16054d22
--- /dev/null
+++ b/notes/gbpark/2026-04-22-company-mng-mockup.html
@@ -0,0 +1,1315 @@
+<!doctype html>
+<html lang="ko" class="dark" data-color="purple">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<title>INVYONE · 회사·조직 관리 — 데이터스키마 기준 레이아웃 (v5 목업)</title>
+<style>
+/* =====================================================
+   v5 토큰 — v5-layout.css 에서 관련 부분만 추림
+   (라이트 기본, .dark 변형 정의)
+   ===================================================== */
+:root{
+  --v5-primary-rgb:108,92,231;
+  --v5-cyan-rgb:0,206,201;
+  --v5-pink-rgb:253,121,168;
+  --v5-red-rgb:255,71,87;
+  --v5-green-rgb:0,184,148;
+  --v5-amber-rgb:253,203,110;
+
+  --v5-primary:rgb(var(--v5-primary-rgb));
+  --v5-cyan:rgb(var(--v5-cyan-rgb));
+  --v5-pink:rgb(var(--v5-pink-rgb));
+
+  --v5-surface-solid:#ffffff;
+  --v5-glow-sm:0 0 10px rgba(var(--v5-primary-rgb),0.18);
+  --v5-glow-md:0 0 22px rgba(var(--v5-primary-rgb),0.22);
+
+  /* 회사·조직 관리 전용 토큰 (v5-cm-*) — 메뉴관리 v5-mm-* 와 동일 패턴 */
+  --v5-cm-bg:#ffffff;
+  --v5-cm-panel:#ffffff;
+  --v5-cm-sunk:#f5f5f8;
+  --v5-cm-hover:#faf9fc;
+  --v5-cm-faint:#c9c7d5;
+  --v5-cm-border:#e5e3ec;
+  --v5-cm-border-2:#eeedf3;
+  --v5-cm-text:#1a1825;
+  --v5-cm-text-sec:#4e4c5e;
+  --v5-cm-text-muted:#8a8899;
+  --v5-cm-accent:rgb(var(--v5-primary-rgb));
+  --v5-cm-accent-soft:rgba(var(--v5-primary-rgb),.08);
+  --v5-cm-accent-line:rgba(var(--v5-primary-rgb),.22);
+  --v5-cm-ring:rgba(var(--v5-primary-rgb),.14);
+  --v5-cm-green:#0a9975;
+  --v5-cm-red:#dc2626;
+  --v5-cm-amber:#c87d18;
+  --v5-cm-cyan:#0891b2;
+}
+html.dark{
+  --v5-cm-bg:#0a0a0c;
+  --v5-cm-panel:#161618;
+  --v5-cm-sunk:#111113;
+  --v5-cm-hover:#1c1c1f;
+  --v5-cm-faint:#4a4a4e;
+  --v5-cm-border:#26262a;
+  --v5-cm-border-2:#1c1c20;
+  --v5-cm-text:#f2f2f4;
+  --v5-cm-text-sec:#a5a5ac;
+  --v5-cm-text-muted:#72727a;
+  --v5-cm-accent:rgb(var(--v5-primary-rgb));
+  --v5-cm-accent-soft:rgba(var(--v5-primary-rgb),.09);
+  --v5-cm-accent-line:rgba(var(--v5-primary-rgb),.22);
+  --v5-cm-ring:rgba(var(--v5-primary-rgb),.22);
+  --v5-cm-green:#5eeabc;
+  --v5-cm-red:#ff6a7a;
+  --v5-cm-amber:#f2b45e;
+  --v5-cm-cyan:#22d3ee;
+}
+
+*{box-sizing:border-box;}
+html,body{height:100%;margin:0;}
+body{
+  font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI",Roboto,Arial,sans-serif;
+  background:var(--v5-cm-bg);color:var(--v5-cm-text);
+  font-size:13px;-webkit-font-smoothing:antialiased;
+}
+
+/* ====== 상단 브레드크럼 헤더 ====== */
+.v5-shell-hd{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:1.1rem 1.4rem .9rem;
+  border-bottom:1px solid var(--v5-cm-border);
+  background:var(--v5-cm-panel);
+}
+.v5-shell-hd h1{
+  margin:0;font-size:1.1rem;font-weight:700;letter-spacing:-.02em;color:var(--v5-cm-text);
+}
+.v5-shell-hd p{
+  margin:.3rem 0 0;font-size:.72rem;color:var(--v5-cm-text-muted);
+}
+.v5-shell-hd .bc{
+  font-family:"JetBrains Mono",monospace;font-size:.6rem;
+  color:var(--v5-cm-text-muted);letter-spacing:.1em;text-transform:uppercase;
+  margin-bottom:.35rem;
+}
+.v5-shell-hd .bc b{color:var(--v5-cm-text-sec);font-weight:600;}
+.v5-shell-hd .hd-tools{display:flex;gap:.4rem;align-items:center;}
+.v5-theme-switch{
+  display:inline-flex;gap:.2rem;padding:3px;border-radius:8px;
+  background:var(--v5-cm-sunk);border:1px solid var(--v5-cm-border);
+}
+.v5-theme-switch button{
+  width:24px;height:24px;border:none;background:transparent;border-radius:5px;cursor:pointer;
+  display:inline-flex;align-items:center;justify-content:center;color:var(--v5-cm-text-muted);
+  transition:all .15s;
+}
+.v5-theme-switch button:hover{color:var(--v5-cm-text);}
+.v5-theme-switch button.on{background:var(--v5-cm-panel);color:var(--v5-cm-accent);box-shadow:0 1px 2px rgba(0,0,0,.06);}
+.v5-color-dots{display:inline-flex;gap:.3rem;margin-left:.25rem;}
+.v5-color-dots button{
+  width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;
+  transition:transform .15s;
+}
+.v5-color-dots button:hover{transform:scale(1.12);}
+.v5-color-dots button.on{border-color:var(--v5-cm-text);}
+
+/* ====== 3컬럼 cascade — Scope(회사) / Schema Nav / Detail ====== */
+.v5-cm{
+  display:grid;
+  grid-template-columns:clamp(240px,17vw,320px) clamp(240px,17vw,300px) minmax(0,1fr);
+  height:calc(100vh - 58px);min-height:0;
+}
+.v5-cm-col{
+  display:flex;flex-direction:column;overflow:hidden;
+  border-right:1px solid var(--v5-cm-border);
+  background:var(--v5-cm-panel);
+  animation:v5-cm-colIn .35s cubic-bezier(.16,1,.3,1);
+}
+.v5-cm-col:last-child{border-right:none;}
+@keyframes v5-cm-colIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
+
+.v5-cm-col-hd{
+  padding:1rem 1rem .6rem;flex-shrink:0;
+  display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;
+}
+.v5-cm-step{
+  display:inline-flex;align-items:center;gap:.35rem;
+  font-family:"JetBrains Mono",monospace;font-size:.56rem;
+  color:var(--v5-cm-text-muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
+}
+.v5-cm-step .num{
+  padding:.06rem .32rem;border-radius:3px;background:var(--v5-cm-sunk);
+  border:1px solid var(--v5-cm-border);color:var(--v5-cm-accent);
+}
+.v5-cm-col-hd h3{margin:.3rem 0 .1rem;font-size:.95rem;font-weight:700;letter-spacing:-.018em;color:var(--v5-cm-text);}
+.v5-cm-col-hd p{margin:0;font-size:.64rem;color:var(--v5-cm-text-muted);}
+.v5-cm-hd-add{
+  width:28px;height:28px;border-radius:7px;border:1px solid var(--v5-cm-border);
+  background:var(--v5-cm-panel);color:var(--v5-cm-text-sec);cursor:pointer;
+  display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;
+}
+.v5-cm-hd-add:hover{border-color:var(--v5-cm-accent);color:var(--v5-cm-accent);background:var(--v5-cm-sunk);}
+.v5-cm-hd-add svg{width:12px;height:12px;}
+
+/* ========= COL 1 — 회사 SCOPE ========= */
+.v5-cm-col-scope{background:var(--v5-cm-sunk);}
+.v5-cm-scope-srch{padding:.2rem .75rem .55rem;flex-shrink:0;position:relative;}
+.v5-cm-scope-srch > svg{
+  position:absolute;left:1.3rem;top:50%;transform:translateY(-50%);
+  width:11px;height:11px;color:var(--v5-cm-text-muted);pointer-events:none;
+}
+.v5-cm-scope-srch input{
+  width:100%;height:30px;padding:0 .55rem 0 1.85rem;
+  border:1px solid var(--v5-cm-border);border-radius:7px;
+  background:var(--v5-cm-panel);color:var(--v5-cm-text);
+  font-size:.68rem;font-family:inherit;outline:none;transition:all .12s;
+}
+.v5-cm-scope-srch input:focus{
+  border-color:var(--v5-cm-accent);
+  box-shadow:0 0 0 2px rgba(var(--v5-primary-rgb),.14);
+}
+.v5-cm-scope-list{
+  padding:.3rem .6rem 1rem;display:flex;flex-direction:column;gap:.4rem;
+  flex:1;overflow-y:auto;
+}
+.v5-cm-scope{
+  display:flex;flex-direction:column;gap:.55rem;padding:.8rem;border-radius:10px;
+  background:var(--v5-cm-panel);border:1px solid var(--v5-cm-border);
+  cursor:pointer;transition:all .15s;
+}
+.v5-cm-scope:hover{border-color:rgba(var(--v5-primary-rgb),.2);}
+.v5-cm-scope.on{background:rgba(var(--v5-primary-rgb),.08);border-color:var(--v5-cm-accent);}
+.v5-cm-scope-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
+.v5-cm-scope-ico{
+  width:30px;height:30px;border-radius:8px;
+  display:flex;align-items:center;justify-content:center;
+  background:var(--v5-cm-sunk);color:var(--v5-cm-text-sec);border:1px solid var(--v5-cm-border-2);flex-shrink:0;
+}
+.v5-cm-scope.on .v5-cm-scope-ico{background:var(--v5-cm-accent);color:white;border-color:transparent;}
+.v5-cm-scope-ico svg{width:15px;height:15px;}
+.v5-cm-scope-badges{display:flex;gap:.25rem;align-items:center;}
+.v5-cm-scope-cnt{
+  font-size:.68rem;font-weight:700;color:var(--v5-cm-text-muted);
+  font-variant-numeric:tabular-nums;
+  padding:.12rem .45rem;border-radius:5px;
+  background:var(--v5-cm-sunk);border:1px solid var(--v5-cm-border-2);
+}
+.v5-cm-scope.on .v5-cm-scope-cnt{color:var(--v5-cm-accent);background:var(--v5-cm-panel);border-color:rgba(var(--v5-primary-rgb),.2);}
+.v5-cm-scope-name{font-size:.9rem;font-weight:700;letter-spacing:-.015em;color:var(--v5-cm-text);}
+.v5-cm-scope.on .v5-cm-scope-name{color:var(--v5-cm-accent);}
+.v5-cm-scope-code{
+  font-size:.62rem;color:var(--v5-cm-text-muted);font-family:"JetBrains Mono",monospace;
+}
+.v5-cm-scope.on{animation:v5-cm-scopePop .4s cubic-bezier(.34,1.56,.64,1);}
+@keyframes v5-cm-scopePop{0%{transform:scale(.96);}60%{transform:scale(1.02);}100%{transform:scale(1);}}
+
+/* ========= COL 2 — 스키마 NAV (데이터스키마 기준 섹션 리스트) ========= */
+.v5-cm-col-nav{background:var(--v5-cm-panel);}
+.v5-cm-nav-list{padding:.5rem .5rem 1rem;display:flex;flex-direction:column;gap:.2rem;flex:1;overflow-y:auto;}
+.v5-cm-nav{
+  display:flex;align-items:center;gap:.6rem;padding:.7rem .75rem;border-radius:8px;cursor:pointer;
+  transition:all .12s;border:1px solid transparent;
+}
+.v5-cm-nav:hover{background:var(--v5-cm-sunk);}
+.v5-cm-nav.on{background:rgba(var(--v5-primary-rgb),.08);border-color:rgba(var(--v5-primary-rgb),.22);}
+.v5-cm-nav-ico{
+  width:28px;height:28px;border-radius:7px;
+  display:flex;align-items:center;justify-content:center;flex-shrink:0;
+  background:var(--v5-cm-sunk);color:var(--v5-cm-text-sec);border:1px solid var(--v5-cm-border-2);
+}
+.v5-cm-nav.on .v5-cm-nav-ico{background:var(--v5-cm-accent);color:white;border-color:transparent;}
+.v5-cm-nav-ico svg{width:14px;height:14px;}
+.v5-cm-nav-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;}
+.v5-cm-nav-name{font-size:.85rem;font-weight:600;color:var(--v5-cm-text);letter-spacing:-.008em;}
+.v5-cm-nav.on .v5-cm-nav-name{color:var(--v5-cm-accent);font-weight:700;}
+.v5-cm-nav-meta{font-size:.6rem;color:var(--v5-cm-text-muted);font-family:"JetBrains Mono",monospace;}
+.v5-cm-nav-cnt{
+  font-size:.66rem;font-weight:700;color:var(--v5-cm-text-muted);font-variant-numeric:tabular-nums;
+  padding:.12rem .45rem;border-radius:5px;background:var(--v5-cm-sunk);
+  border:1px solid var(--v5-cm-border-2);flex-shrink:0;
+}
+.v5-cm-nav.on .v5-cm-nav-cnt{color:var(--v5-cm-accent);background:var(--v5-cm-panel);border-color:rgba(var(--v5-primary-rgb),.22);}
+
+.v5-cm-nav-section-title{
+  padding:.55rem .75rem .2rem;
+  font-family:"JetBrains Mono",monospace;
+  font-size:.5rem;letter-spacing:.16em;font-weight:800;text-transform:uppercase;
+  color:var(--v5-cm-text-muted);
+}
+
+/* ========= COL 3 — DETAIL ========= */
+.v5-cm-col-detail{background:var(--v5-cm-sunk);overflow:hidden;}
+.v5-cm-vt{
+  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  padding:.65rem 1.4rem;border-bottom:1px solid var(--v5-cm-border);
+  background:var(--v5-cm-panel);flex-shrink:0;
+}
+.v5-cm-vt-hero{display:flex;align-items:center;gap:.6rem;}
+.v5-cm-vt-ico{
+  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
+  background:var(--v5-cm-accent);color:white;
+  box-shadow:0 2px 8px -2px rgba(var(--v5-primary-rgb),.35);
+}
+.v5-cm-vt-ico svg{width:15px;height:15px;}
+.v5-cm-vt-title{font-size:.92rem;font-weight:700;letter-spacing:-.015em;color:var(--v5-cm-text);}
+.v5-cm-vt-meta{font-size:.6rem;color:var(--v5-cm-text-muted);font-family:"JetBrains Mono",monospace;}
+
+/* pane 전환 — 애니메이션 */
+.v5-cm-pane{display:none;padding:1.2rem 1.4rem 2rem;overflow-y:auto;height:100%;}
+.v5-cm-pane.on{display:block;animation:v5-cm-paneIn .38s cubic-bezier(.16,1,.3,1);}
+@keyframes v5-cm-paneIn{
+  from{opacity:0;transform:translateY(8px);filter:blur(3px);}
+  to{opacity:1;transform:none;filter:none;}
+}
+
+/* 섹션 헤더 */
+.v5-cm-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:.5rem;flex-wrap:wrap;}
+.v5-cm-sec-hd-left{min-width:0;}
+.v5-cm-sec-hd h2{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--v5-cm-text);display:flex;align-items:center;gap:.55rem;}
+.v5-cm-sec-hd p{margin:.3rem 0 0;font-size:.7rem;color:var(--v5-cm-text-muted);}
+
+.v5-cm-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-cm-sunk);color:var(--v5-cm-text-muted);border:1px solid var(--v5-cm-border);
+  font-family:"JetBrains Mono",monospace;
+}
+.v5-cm-chip.schema{color:var(--v5-cm-cyan);background:rgba(var(--v5-cyan-rgb),.08);border-color:rgba(var(--v5-cyan-rgb),.24);}
+.v5-cm-chip.on{color:var(--v5-cm-green);background:rgba(var(--v5-green-rgb),.08);border-color:rgba(var(--v5-green-rgb),.22);}
+
+/* 통계 카드 4개 */
+.v5-cm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.2rem;}
+.v5-cm-stat{padding:.75rem .85rem;border-radius:9px;background:var(--v5-cm-panel);border:1px solid var(--v5-cm-border);transition:all .15s;}
+.v5-cm-stat:hover{border-color:rgba(var(--v5-primary-rgb),.22);transform:translateY(-1px);box-shadow:var(--v5-glow-sm);}
+.v5-cm-stat-lbl{font-size:.52rem;font-weight:800;color:var(--v5-cm-text-muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem;}
+.v5-cm-stat-val{display:flex;align-items:baseline;gap:.35rem;}
+.v5-cm-stat-val .n{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--v5-cm-text);font-variant-numeric:tabular-nums;}
+.v5-cm-stat-val .n.ok{color:var(--v5-cm-green);}
+.v5-cm-stat-val .u{font-size:.58rem;color:var(--v5-cm-text-muted);font-weight:500;}
+
+/* 툴바 */
+.v5-cm-toolbar{display:flex;align-items:center;gap:.4rem;margin-bottom:.7rem;flex-wrap:wrap;}
+.v5-cm-search{flex:1;min-width:200px;position:relative;}
+.v5-cm-search > svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--v5-cm-text-muted);pointer-events:none;}
+.v5-cm-search input{
+  width:100%;height:34px;padding:0 .7rem 0 2rem;
+  border:1px solid var(--v5-cm-border);border-radius:8px;
+  background:var(--v5-cm-panel);color:var(--v5-cm-text);
+  font-size:.75rem;font-family:inherit;outline:none;transition:all .15s;
+}
+.v5-cm-search input:focus{border-color:var(--v5-cm-accent);box-shadow:0 0 0 3px rgba(var(--v5-primary-rgb),.14);}
+
+/* 버튼 — v5-mm-btn 과 동일 */
+.v5-cm-btn{
+  display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
+  height:34px;padding:0 .9rem;border-radius:8px;border:1px solid var(--v5-cm-border);
+  background:var(--v5-cm-panel);color:var(--v5-cm-text-sec);
+  font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;outline:none;
+}
+.v5-cm-btn:hover{border-color:var(--v5-cm-text-muted);color:var(--v5-cm-text);}
+.v5-cm-btn svg{width:12px;height:12px;}
+.v5-cm-btn.primary{background:var(--v5-cm-accent);color:white;border-color:var(--v5-cm-accent);
+  box-shadow:0 2px 6px -1px rgba(var(--v5-primary-rgb),.35),inset 0 1px 0 rgba(255,255,255,.22);}
+.v5-cm-btn.primary:hover{
+  background:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 88%,#000);
+  border-color:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 88%,#000);
+  transform:translateY(-1px);box-shadow:0 4px 12px -2px rgba(var(--v5-primary-rgb),.4);
+}
+html.dark .v5-cm-btn.primary:hover{
+  background:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 85%,#fff);
+  border-color:color-mix(in srgb,rgb(var(--v5-primary-rgb)) 85%,#fff);color:var(--v5-cm-bg);
+}
+.v5-cm-btn.ghost{background:transparent;}
+.v5-cm-btn.danger{color:var(--v5-cm-red);}
+.v5-cm-btn.danger:hover{border-color:var(--v5-cm-red);background:rgba(var(--v5-red-rgb),.06);}
+
+/* 테이블 — 스키마별 CRUD 공통 뷰 */
+.v5-cm-table-wrap{
+  border:1px solid var(--v5-cm-border);border-radius:10px;
+  background:var(--v5-cm-panel);overflow:hidden;
+}
+table.v5-cm-tbl{width:100%;border-collapse:collapse;font-size:.75rem;}
+.v5-cm-tbl thead th{
+  background:var(--v5-cm-sunk);color:var(--v5-cm-text-sec);
+  font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
+  padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--v5-cm-border);
+}
+.v5-cm-tbl tbody td{
+  padding:.65rem .85rem;border-bottom:1px solid var(--v5-cm-border-2);color:var(--v5-cm-text);
+  font-variant-numeric:tabular-nums;
+}
+.v5-cm-tbl tbody tr{transition:background .1s;cursor:pointer;}
+.v5-cm-tbl tbody tr:hover{background:var(--v5-cm-hover);}
+.v5-cm-tbl tbody tr.on{background:rgba(var(--v5-primary-rgb),.06);}
+.v5-cm-tbl tbody tr:last-child td{border-bottom:none;}
+.v5-cm-tbl .code{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--v5-cm-text-sec);}
+.v5-cm-tbl .muted{color:var(--v5-cm-text-muted);}
+.v5-cm-tbl .row-actions{display:flex;gap:.2rem;justify-content:flex-end;}
+.v5-cm-ibtn{
+  width:26px;height:26px;border-radius:5px;border:1px solid transparent;
+  background:transparent;color:var(--v5-cm-text-muted);cursor:pointer;
+  display:inline-flex;align-items:center;justify-content:center;transition:all .12s;
+}
+.v5-cm-ibtn:hover{border-color:var(--v5-cm-border);color:var(--v5-cm-text);background:var(--v5-cm-sunk);}
+.v5-cm-ibtn svg{width:12px;height:12px;}
+.v5-cm-ibtn.danger:hover{color:var(--v5-cm-red);border-color:rgba(var(--v5-red-rgb),.25);background:rgba(var(--v5-red-rgb),.05);}
+
+/* 부서 트리 */
+.v5-cm-tree{
+  border:1px solid var(--v5-cm-border);border-radius:10px;
+  background:var(--v5-cm-panel);overflow:hidden;padding:.35rem .25rem;min-height:280px;
+}
+.v5-cm-tree-node{
+  display:flex;align-items:center;gap:.55rem;padding:.45rem .7rem;border-radius:7px;cursor:pointer;
+  transition:background .1s;position:relative;
+}
+.v5-cm-tree-node:hover{background:var(--v5-cm-sunk);}
+.v5-cm-tree-node.on{background:rgba(var(--v5-primary-rgb),.08);}
+.v5-cm-tree-node.on .v5-cm-tree-name{color:var(--v5-cm-accent);font-weight:700;}
+.v5-cm-tree-caret{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;color:var(--v5-cm-text-muted);flex-shrink:0;}
+.v5-cm-tree-caret svg{width:9px;height:9px;transition:transform .2s;}
+.v5-cm-tree-node.open > .v5-cm-tree-caret svg{transform:rotate(90deg);}
+.v5-cm-tree-ico{
+  width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;
+  background:var(--v5-cm-sunk);color:var(--v5-cm-text-sec);border:1px solid var(--v5-cm-border-2);flex-shrink:0;
+}
+.v5-cm-tree-ico svg{width:12px;height:12px;}
+.v5-cm-tree-name{flex:1;font-size:.8rem;color:var(--v5-cm-text);font-weight:500;}
+.v5-cm-tree-cnt{font-size:.62rem;color:var(--v5-cm-text-muted);font-variant-numeric:tabular-nums;}
+.v5-cm-tree-sub{padding-left:1.3rem;}
+
+/* 폼 */
+.v5-cm-form-grid{
+  display:grid;grid-template-columns:clamp(180px,18vw,240px) minmax(0,1fr);gap:1.5rem;
+  padding:1rem 0;border-bottom:1px solid var(--v5-cm-border-2);
+}
+.v5-cm-form-grid:last-of-type{border-bottom:none;}
+.v5-cm-form-side h4{margin:0 0 .25rem;font-size:.88rem;font-weight:700;letter-spacing:-.015em;color:var(--v5-cm-text);}
+.v5-cm-form-side p{margin:0;font-size:.66rem;color:var(--v5-cm-text-muted);line-height:1.55;}
+.v5-cm-form-fields{display:flex;flex-direction:column;gap:.75rem;}
+.v5-cm-form-row{display:flex;flex-direction:column;gap:.3rem;}
+.v5-cm-form-row label{font-size:.66rem;color:var(--v5-cm-text-sec);font-weight:600;}
+.v5-cm-form-row label .req{color:var(--v5-cm-red);}
+.v5-cm-form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
+.v5-cm-inp{
+  width:100%;height:34px;padding:0 .75rem;
+  border:1px solid var(--v5-cm-border);border-radius:8px;
+  background:var(--v5-cm-panel);color:var(--v5-cm-text);
+  font-size:.76rem;font-family:inherit;outline:none;transition:all .15s;
+}
+html.dark .v5-cm-inp{background:var(--v5-cm-sunk);}
+.v5-cm-inp:focus{border-color:var(--v5-cm-accent);box-shadow:0 0 0 3px rgba(var(--v5-primary-rgb),.14);}
+textarea.v5-cm-inp{height:auto;min-height:68px;padding:.5rem .75rem;resize:vertical;line-height:1.55;}
+
+/* 토글 */
+.v5-cm-tg{
+  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;user-select:none;height:34px;padding:0 .75rem;
+  border:1px solid var(--v5-cm-border);border-radius:8px;background:var(--v5-cm-panel);width:fit-content;
+}
+html.dark .v5-cm-tg{background:var(--v5-cm-sunk);}
+.v5-cm-tg .sw{width:36px;height:20px;border-radius:999px;background:var(--v5-cm-faint);position:relative;transition:background .25s;}
+.v5-cm-tg .sw::after{content:'';position:absolute;width:16px;height:16px;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-cm-tg.on .sw{background:var(--v5-cm-accent);}
+.v5-cm-tg.on .sw::after{left:18px;}
+.v5-cm-tg .lbl{font-size:.74rem;color:var(--v5-cm-text-sec);font-weight:500;}
+.v5-cm-tg.on .lbl{color:var(--v5-cm-text);font-weight:600;}
+
+/* 권한 매트릭스 (메뉴-권한 체크) */
+.v5-cm-matrix{
+  border:1px solid var(--v5-cm-border);border-radius:10px;background:var(--v5-cm-panel);overflow:auto;max-height:520px;
+}
+.v5-cm-matrix table{width:100%;border-collapse:collapse;font-size:.72rem;}
+.v5-cm-matrix th,.v5-cm-matrix td{padding:.55rem .75rem;text-align:left;border-bottom:1px solid var(--v5-cm-border-2);}
+.v5-cm-matrix thead th{
+  position:sticky;top:0;background:var(--v5-cm-sunk);
+  font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v5-cm-text-sec);
+  z-index:1;
+}
+.v5-cm-matrix .matrix-cell{text-align:center;}
+.v5-cm-chk{
+  width:16px;height:16px;border-radius:4px;border:1px solid var(--v5-cm-border);background:var(--v5-cm-panel);
+  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .12s;
+}
+.v5-cm-chk.on{background:var(--v5-cm-accent);border-color:var(--v5-cm-accent);color:white;}
+.v5-cm-chk svg{width:10px;height:10px;opacity:0;transition:opacity .12s;}
+.v5-cm-chk.on svg{opacity:1;}
+
+.v5-cm-matrix .muted-row td{background:var(--v5-cm-sunk);}
+
+/* 사이드 풋 액션 */
+.v5-cm-footer{
+  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
+  margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--v5-cm-border);
+}
+.v5-cm-unsaved{display:inline-flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--v5-cm-amber);font-weight:600;}
+.v5-cm-unsaved .d{width:6px;height:6px;border-radius:50%;background:var(--v5-cm-amber);animation:v5-cm-pulse 1.6s ease-in-out infinite;}
+@keyframes v5-cm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
+
+/* 빈 상태 */
+.v5-cm-empty{
+  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
+  padding:4rem 1rem;color:var(--v5-cm-text-muted);font-size:.75rem;text-align:center;
+}
+.v5-cm-empty svg{width:40px;height:40px;opacity:.35;}
+
+/* ====== responsive ====== */
+@media(max-width:1280px){
+  .v5-cm-form-grid{grid-template-columns:minmax(0,1fr);gap:.8rem;}
+  .v5-cm-stats{grid-template-columns:repeat(2,1fr);}
+}
+@media(max-width:1024px){
+  .v5-cm{grid-template-columns:220px 240px 1fr;}
+}
+@media(max-width:800px){
+  .v5-cm{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;}
+  .v5-cm-col{border-right:none;border-bottom:1px solid var(--v5-cm-border);max-height:40vh;}
+  .v5-cm-col:last-child{border-bottom:none;max-height:none;}
+  .v5-cm-stats{grid-template-columns:repeat(2,1fr);}
+}
+</style>
+</head>
+
+<body>
+
+<!-- ===== 상단 헤더 ===== -->
+<div class="v5-shell-hd">
+  <div>
+    <div class="bc">관리자 <b>/</b> 회사 · 조직 관리</div>
+    <h1>회사 · 조직 관리</h1>
+    <p>데이터스키마 단위로 회사 본체·부서·권한 그룹을 한 화면에서 관리합니다.</p>
+  </div>
+  <div class="hd-tools">
+    <div class="v5-theme-switch" id="modeSwitch">
+      <button data-mode="light" title="라이트">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
+      </button>
+      <button data-mode="dark" class="on" title="다크">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
+      </button>
+    </div>
+    <div class="v5-color-dots" id="colorDots">
+      <button class="on" data-color="purple" style="background:#6c5ce7" title="보라"></button>
+      <button data-color="blue" style="background:#3b82f6" title="파랑"></button>
+      <button data-color="green" style="background:#10b981" title="초록"></button>
+      <button data-color="orange" style="background:#f97316" title="오렌지"></button>
+      <button data-color="pink" style="background:#ec4899" title="핑크"></button>
+      <button data-color="cyan" style="background:#0891b2" title="시안"></button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 3컬럼 ===== -->
+<main class="v5-cm">
+
+  <!-- COL 1 : 회사 선택 -->
+  <aside class="v5-cm-col v5-cm-col-scope">
+    <div class="v5-cm-col-hd">
+      <div>
+        <div class="v5-cm-step"><span class="num">01</span>Scope</div>
+        <h3>회사 선택</h3>
+        <p>관리할 회사를 고르세요</p>
+      </div>
+      <button class="v5-cm-hd-add" 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="v5-cm-scope-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="회사 검색…" />
+    </div>
+    <div class="v5-cm-scope-list" id="scopeList">
+      <div class="v5-cm-scope on">
+        <div class="v5-cm-scope-top">
+          <div class="v5-cm-scope-ico">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h1M9 13h1M9 17h1M14 9h1M14 13h1M14 17h1"/></svg>
+          </div>
+          <div class="v5-cm-scope-badges">
+            <span class="v5-cm-chip on">ACTIVE</span>
+            <span class="v5-cm-scope-cnt">본사</span>
+          </div>
+        </div>
+        <div>
+          <div class="v5-cm-scope-name">중고모아</div>
+          <div class="v5-cm-scope-code">JGM01 · company_mng:objid=1</div>
+        </div>
+      </div>
+
+      <div class="v5-cm-scope">
+        <div class="v5-cm-scope-top">
+          <div class="v5-cm-scope-ico">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l7-4 7 4v14M9 9h1M9 13h1M9 17h1M14 9h1M14 13h1M14 17h1"/></svg>
+          </div>
+          <div class="v5-cm-scope-badges">
+            <span class="v5-cm-chip on">ACTIVE</span>
+            <span class="v5-cm-scope-cnt">42</span>
+          </div>
+        </div>
+        <div>
+          <div class="v5-cm-scope-name">테스트 상사</div>
+          <div class="v5-cm-scope-code">TEST_CO · company_mng:objid=2</div>
+        </div>
+      </div>
+
+      <div class="v5-cm-scope">
+        <div class="v5-cm-scope-top">
+          <div class="v5-cm-scope-ico">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l7-4 7 4v14"/></svg>
+          </div>
+          <div class="v5-cm-scope-badges">
+            <span class="v5-cm-chip">INACTIVE</span>
+            <span class="v5-cm-scope-cnt">8</span>
+          </div>
+        </div>
+        <div>
+          <div class="v5-cm-scope-name">샘플 제조</div>
+          <div class="v5-cm-scope-code">SAMPLE_MFG · objid=3</div>
+        </div>
+      </div>
+
+      <div class="v5-cm-scope">
+        <div class="v5-cm-scope-top">
+          <div class="v5-cm-scope-ico">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l7-4 7 4v14"/></svg>
+          </div>
+          <div class="v5-cm-scope-badges">
+            <span class="v5-cm-chip on">ACTIVE</span>
+            <span class="v5-cm-scope-cnt">17</span>
+          </div>
+        </div>
+        <div>
+          <div class="v5-cm-scope-name">파트너A</div>
+          <div class="v5-cm-scope-code">PARTNER_A · objid=4</div>
+        </div>
+      </div>
+    </div>
+  </aside>
+
+  <!-- COL 2 : 스키마 내비 -->
+  <nav class="v5-cm-col v5-cm-col-nav">
+    <div class="v5-cm-col-hd">
+      <div>
+        <div class="v5-cm-step"><span class="num">02</span>Schema</div>
+        <h3>데이터 스키마</h3>
+        <p>중고모아 · 관련 테이블 6 개</p>
+      </div>
+    </div>
+
+    <div class="v5-cm-nav-list" id="navList">
+
+      <div class="v5-cm-nav-section-title">회사 본체</div>
+
+      <div class="v5-cm-nav on" data-pane="company">
+        <div class="v5-cm-nav-ico">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l7-4 7 4v14"/></svg>
+        </div>
+        <div class="v5-cm-nav-body">
+          <div class="v5-cm-nav-name">회사 기본정보</div>
+          <div class="v5-cm-nav-meta">COMPANY_MNG</div>
+        </div>
+        <span class="v5-cm-nav-cnt">1</span>
+      </div>
+
+      <div class="v5-cm-nav-section-title">조직 · 인사</div>
+
+      <div class="v5-cm-nav" data-pane="dept">
+        <div class="v5-cm-nav-ico">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3l4 4-4 4-4-4 4-4zM3 21h18M7 21v-6M17 21v-6"/></svg>
+        </div>
+        <div class="v5-cm-nav-body">
+          <div class="v5-cm-nav-name">부서 구조</div>
+          <div class="v5-cm-nav-meta">DEPT_INFO</div>
+        </div>
+        <span class="v5-cm-nav-cnt">12</span>
+      </div>
+
+      <div class="v5-cm-nav" data-pane="userdept">
+        <div class="v5-cm-nav-ico">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        </div>
+        <div class="v5-cm-nav-body">
+          <div class="v5-cm-nav-name">사용자 ↔ 부서</div>
+          <div class="v5-cm-nav-meta">USER_DEPT</div>
+        </div>
+        <span class="v5-cm-nav-cnt">148</span>
+      </div>
+
+      <div class="v5-cm-nav-section-title">권한</div>
+
+      <div class="v5-cm-nav" data-pane="authgroup">
+        <div class="v5-cm-nav-ico">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        </div>
+        <div class="v5-cm-nav-body">
+          <div class="v5-cm-nav-name">권한 그룹</div>
+          <div class="v5-cm-nav-meta">AUTHORITY_MASTER</div>
+        </div>
+        <span class="v5-cm-nav-cnt">7</span>
+      </div>
+
+      <div class="v5-cm-nav" data-pane="authuser">
+        <div class="v5-cm-nav-ico">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="m19 8 2 2 4-4"/></svg>
+        </div>
+        <div class="v5-cm-nav-body">
+          <div class="v5-cm-nav-name">권한 ↔ 사용자</div>
+          <div class="v5-cm-nav-meta">AUTHORITY_SUB_USER</div>
+        </div>
+        <span class="v5-cm-nav-cnt">148</span>
+      </div>
+
+      <div class="v5-cm-nav" data-pane="authmenu">
+        <div class="v5-cm-nav-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"/><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>
+        </div>
+        <div class="v5-cm-nav-body">
+          <div class="v5-cm-nav-name">메뉴 권한 매트릭스</div>
+          <div class="v5-cm-nav-meta">AUTHORITY_SUB_MENU</div>
+        </div>
+        <span class="v5-cm-nav-cnt">84</span>
+      </div>
+    </div>
+  </nav>
+
+  <!-- COL 3 : DETAIL -->
+  <section class="v5-cm-col v5-cm-col-detail">
+
+    <div class="v5-cm-vt">
+      <div class="v5-cm-vt-hero">
+        <div class="v5-cm-vt-ico" id="vtIco">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l7-4 7 4v14"/></svg>
+        </div>
+        <div>
+          <div class="v5-cm-vt-title" id="vtTitle">회사 기본정보</div>
+          <div class="v5-cm-vt-meta" id="vtMeta">COMPANY_MNG · 중고모아 (JGM01)</div>
+        </div>
+      </div>
+      <div style="display:flex;gap:.4rem;">
+        <button class="v5-cm-btn ghost">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
+          내보내기
+        </button>
+        <button class="v5-cm-btn primary">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
+          신규
+        </button>
+      </div>
+    </div>
+
+    <!-- ===== PANE 1: 회사 기본정보 (단일 폼) ===== -->
+    <div class="v5-cm-pane on" data-pane="company">
+      <div class="v5-cm-sec-hd">
+        <div class="v5-cm-sec-hd-left">
+          <h2>
+            중고모아
+            <span class="v5-cm-chip on">ACTIVE</span>
+            <span class="v5-cm-chip schema">COMPANY_MNG</span>
+          </h2>
+          <p>회사 본체 레코드. 스키마 단건이며 하위 부서/권한이 이 레코드를 참조합니다.</p>
+        </div>
+      </div>
+
+      <div class="v5-cm-stats">
+        <div class="v5-cm-stat">
+          <div class="v5-cm-stat-lbl">부서</div>
+          <div class="v5-cm-stat-val"><span class="n">12</span><span class="u">DEPT_INFO</span></div>
+        </div>
+        <div class="v5-cm-stat">
+          <div class="v5-cm-stat-lbl">사용자</div>
+          <div class="v5-cm-stat-val"><span class="n">148</span><span class="u">active</span></div>
+        </div>
+        <div class="v5-cm-stat">
+          <div class="v5-cm-stat-lbl">권한 그룹</div>
+          <div class="v5-cm-stat-val"><span class="n">7</span><span class="u">AUTH</span></div>
+        </div>
+        <div class="v5-cm-stat">
+          <div class="v5-cm-stat-lbl">디스크</div>
+          <div class="v5-cm-stat-val"><span class="n ok">38%</span><span class="u">/ 100GB</span></div>
+        </div>
+      </div>
+
+      <div class="v5-cm-form-grid">
+        <div class="v5-cm-form-side">
+          <h4>식별 · 기본</h4>
+          <p>회사 코드는 생성 후 변경 불가. 모든 하위 스키마가 이 코드를 외래키로 사용합니다.</p>
+        </div>
+        <div class="v5-cm-form-fields">
+          <div class="v5-cm-form-row-2">
+            <div class="v5-cm-form-row">
+              <label>회사 코드 <span class="req">*</span></label>
+              <input class="v5-cm-inp" value="JGM01" readonly />
+            </div>
+            <div class="v5-cm-form-row">
+              <label>사업자 번호</label>
+              <input class="v5-cm-inp" value="123-45-67890" />
+            </div>
+          </div>
+          <div class="v5-cm-form-row">
+            <label>회사명 <span class="req">*</span></label>
+            <input class="v5-cm-inp" value="중고모아 주식회사" />
+          </div>
+          <div class="v5-cm-form-row-2">
+            <div class="v5-cm-form-row">
+              <label>대표자</label>
+              <input class="v5-cm-inp" value="홍길동" />
+            </div>
+            <div class="v5-cm-form-row">
+              <label>업종</label>
+              <input class="v5-cm-inp" value="IT · 소프트웨어 개발" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="v5-cm-form-grid">
+        <div class="v5-cm-form-side">
+          <h4>연락처 · 주소</h4>
+          <p>송장·세금계산서에 기재되는 공식 주소입니다.</p>
+        </div>
+        <div class="v5-cm-form-fields">
+          <div class="v5-cm-form-row-2">
+            <div class="v5-cm-form-row">
+              <label>전화</label>
+              <input class="v5-cm-inp" value="02-1234-5678" />
+            </div>
+            <div class="v5-cm-form-row">
+              <label>이메일</label>
+              <input class="v5-cm-inp" value="contact@junggomoa.com" />
+            </div>
+          </div>
+          <div class="v5-cm-form-row">
+            <label>주소</label>
+            <input class="v5-cm-inp" value="서울특별시 강남구 테헤란로 123" />
+          </div>
+        </div>
+      </div>
+
+      <div class="v5-cm-form-grid">
+        <div class="v5-cm-form-side">
+          <h4>운영 · 상태</h4>
+          <p>비활성으로 전환 시 해당 회사 사용자의 로그인이 차단됩니다.</p>
+        </div>
+        <div class="v5-cm-form-fields">
+          <div class="v5-cm-form-row-2">
+            <div class="v5-cm-form-row">
+              <label>상태</label>
+              <label class="v5-cm-tg on" onclick="this.classList.toggle('on')">
+                <span class="sw"></span>
+                <span class="lbl">활성</span>
+              </label>
+            </div>
+            <div class="v5-cm-form-row">
+              <label>도메인</label>
+              <input class="v5-cm-inp" value="v1.invion.com" />
+            </div>
+          </div>
+          <div class="v5-cm-form-row">
+            <label>비고</label>
+            <textarea class="v5-cm-inp" placeholder="내부 메모">본사. 2026-01-01 개업.</textarea>
+          </div>
+        </div>
+      </div>
+
+      <div class="v5-cm-footer">
+        <div style="display:flex;gap:.4rem;">
+          <button class="v5-cm-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>
+        </div>
+        <div style="display:flex;gap:.4rem;align-items:center;">
+          <span class="v5-cm-unsaved"><span class="d"></span>저장되지 않음</span>
+          <button class="v5-cm-btn">되돌리기</button>
+          <button class="v5-cm-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>
+
+    <!-- ===== PANE 2: 부서 구조 (트리 + 편집) ===== -->
+    <div class="v5-cm-pane" data-pane="dept">
+      <div class="v5-cm-sec-hd">
+        <div class="v5-cm-sec-hd-left">
+          <h2>
+            부서 구조
+            <span class="v5-cm-chip schema">DEPT_INFO</span>
+          </h2>
+          <p>회사 코드 JGM01 하위의 계층 구조. 드래그로 이동·재배치 가능.</p>
+        </div>
+      </div>
+
+      <div class="v5-cm-toolbar">
+        <div class="v5-cm-search">
+          <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="부서 검색…" />
+        </div>
+        <button class="v5-cm-btn">전체 펼치기</button>
+        <button class="v5-cm-btn primary">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
+          부서 추가
+        </button>
+      </div>
+
+      <div class="v5-cm-tree">
+        <div class="v5-cm-tree-node open">
+          <span class="v5-cm-tree-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="v5-cm-tree-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 21h18M5 21V7l7-4 7 4v14"/></svg></span>
+          <span class="v5-cm-tree-name">중고모아 (본사)</span>
+          <span class="v5-cm-tree-cnt">148명</span>
+        </div>
+        <div class="v5-cm-tree-sub">
+          <div class="v5-cm-tree-node on">
+            <span class="v5-cm-tree-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="v5-cm-tree-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></span>
+            <span class="v5-cm-tree-name">경영지원본부</span>
+            <span class="v5-cm-tree-cnt">24명</span>
+          </div>
+          <div class="v5-cm-tree-sub">
+            <div class="v5-cm-tree-node">
+              <span class="v5-cm-tree-caret"></span>
+              <span class="v5-cm-tree-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg></span>
+              <span class="v5-cm-tree-name">인사팀</span>
+              <span class="v5-cm-tree-cnt">6명</span>
+            </div>
+            <div class="v5-cm-tree-node">
+              <span class="v5-cm-tree-caret"></span>
+              <span class="v5-cm-tree-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg></span>
+              <span class="v5-cm-tree-name">재무팀</span>
+              <span class="v5-cm-tree-cnt">8명</span>
+            </div>
+            <div class="v5-cm-tree-node">
+              <span class="v5-cm-tree-caret"></span>
+              <span class="v5-cm-tree-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/></svg></span>
+              <span class="v5-cm-tree-name">총무팀</span>
+              <span class="v5-cm-tree-cnt">10명</span>
+            </div>
+          </div>
+          <div class="v5-cm-tree-node">
+            <span class="v5-cm-tree-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="v5-cm-tree-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></span>
+            <span class="v5-cm-tree-name">개발본부</span>
+            <span class="v5-cm-tree-cnt">68명</span>
+          </div>
+          <div class="v5-cm-tree-node">
+            <span class="v5-cm-tree-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="v5-cm-tree-ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg></span>
+            <span class="v5-cm-tree-name">영업본부</span>
+            <span class="v5-cm-tree-cnt">56명</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ===== PANE 3: 사용자↔부서 매핑 (표) ===== -->
+    <div class="v5-cm-pane" data-pane="userdept">
+      <div class="v5-cm-sec-hd">
+        <div class="v5-cm-sec-hd-left">
+          <h2>사용자 ↔ 부서 매핑 <span class="v5-cm-chip schema">USER_DEPT</span></h2>
+          <p>사용자가 어느 부서(들)에 소속되어 있는지 관리합니다. 멀티 부서 지원.</p>
+        </div>
+      </div>
+
+      <div class="v5-cm-toolbar">
+        <div class="v5-cm-search">
+          <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="사용자 ID, 이름 검색…" />
+        </div>
+        <button class="v5-cm-btn">부서 필터</button>
+        <button class="v5-cm-btn primary">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
+          매핑 추가
+        </button>
+      </div>
+
+      <div class="v5-cm-table-wrap">
+        <table class="v5-cm-tbl">
+          <thead>
+            <tr>
+              <th style="width:120px">USER_ID</th>
+              <th>이름</th>
+              <th>소속 부서</th>
+              <th>직책</th>
+              <th>상태</th>
+              <th style="width:96px;text-align:right">작업</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="code">gbpark</td>
+              <td>박기범</td>
+              <td>개발본부 / 플랫폼팀</td>
+              <td class="muted">팀장</td>
+              <td><span class="v5-cm-chip on">ACTIVE</span></td>
+              <td>
+                <div class="row-actions">
+                  <button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>
+                  <button class="v5-cm-ibtn 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>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="code">plm_admin</td>
+              <td>이현수</td>
+              <td>경영지원본부 / 총무팀</td>
+              <td class="muted">사원</td>
+              <td><span class="v5-cm-chip on">ACTIVE</span></td>
+              <td>
+                <div class="row-actions">
+                  <button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>
+                  <button class="v5-cm-ibtn 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>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="code">dev_kim</td>
+              <td>김철수</td>
+              <td>개발본부 / 프론트팀, <span class="muted">영업본부(겸)</span></td>
+              <td class="muted">선임</td>
+              <td><span class="v5-cm-chip on">ACTIVE</span></td>
+              <td>
+                <div class="row-actions">
+                  <button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>
+                  <button class="v5-cm-ibtn 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>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <td class="code">sales_park</td>
+              <td>박영미</td>
+              <td>영업본부 / 국내영업팀</td>
+              <td class="muted">대리</td>
+              <td><span class="v5-cm-chip">INACTIVE</span></td>
+              <td>
+                <div class="row-actions">
+                  <button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button>
+                  <button class="v5-cm-ibtn 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>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- ===== PANE 4: 권한 그룹 ===== -->
+    <div class="v5-cm-pane" data-pane="authgroup">
+      <div class="v5-cm-sec-hd">
+        <div class="v5-cm-sec-hd-left">
+          <h2>권한 그룹 <span class="v5-cm-chip schema">AUTHORITY_MASTER</span></h2>
+          <p>회사별 역할 묶음. 각 그룹이 메뉴 권한 집합 + 소속 사용자 리스트를 가집니다.</p>
+        </div>
+      </div>
+
+      <div class="v5-cm-toolbar">
+        <div class="v5-cm-search">
+          <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="그룹명 검색…" />
+        </div>
+        <button class="v5-cm-btn primary">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
+          그룹 추가
+        </button>
+      </div>
+
+      <div class="v5-cm-table-wrap">
+        <table class="v5-cm-tbl">
+          <thead>
+            <tr>
+              <th style="width:140px">AUTH_CODE</th>
+              <th>그룹명</th>
+              <th style="width:88px">메뉴</th>
+              <th style="width:88px">사용자</th>
+              <th style="width:100px">상태</th>
+              <th style="width:96px;text-align:right">작업</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="on">
+              <td class="code">SUPER_ADMIN</td>
+              <td>시스템 관리자</td>
+              <td>전체</td>
+              <td>3</td>
+              <td><span class="v5-cm-chip on">ACTIVE</span></td>
+              <td><div class="row-actions"><button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button></div></td>
+            </tr>
+            <tr>
+              <td class="code">HR_MANAGER</td>
+              <td>인사 관리자</td>
+              <td>14</td>
+              <td>4</td>
+              <td><span class="v5-cm-chip on">ACTIVE</span></td>
+              <td><div class="row-actions"><button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button></div></td>
+            </tr>
+            <tr>
+              <td class="code">DEV_LEADER</td>
+              <td>개발팀장</td>
+              <td>22</td>
+              <td>7</td>
+              <td><span class="v5-cm-chip on">ACTIVE</span></td>
+              <td><div class="row-actions"><button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button></div></td>
+            </tr>
+            <tr>
+              <td class="code">SALES_USER</td>
+              <td>영업 일반 사용자</td>
+              <td>18</td>
+              <td>52</td>
+              <td><span class="v5-cm-chip on">ACTIVE</span></td>
+              <td><div class="row-actions"><button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button></div></td>
+            </tr>
+            <tr>
+              <td class="code">READONLY</td>
+              <td>조회 전용</td>
+              <td>36</td>
+              <td>82</td>
+              <td><span class="v5-cm-chip">INACTIVE</span></td>
+              <td><div class="row-actions"><button class="v5-cm-ibtn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></button></div></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- ===== PANE 5: 권한↔사용자 ===== -->
+    <div class="v5-cm-pane" data-pane="authuser">
+      <div class="v5-cm-sec-hd">
+        <div class="v5-cm-sec-hd-left">
+          <h2>권한 ↔ 사용자 <span class="v5-cm-chip schema">AUTHORITY_SUB_USER</span></h2>
+          <p>선택한 권한 그룹에 어떤 사용자가 속하는지. 그룹 선택 후 일괄 편집 가능.</p>
+        </div>
+      </div>
+
+      <div class="v5-cm-form-grid" style="padding-top:.4rem;">
+        <div class="v5-cm-form-side">
+          <h4>편집 대상 그룹</h4>
+          <p>먼저 권한 그룹을 선택하세요. 우측 목록이 해당 그룹 소속으로 바뀝니다.</p>
+        </div>
+        <div class="v5-cm-form-fields">
+          <div class="v5-cm-form-row">
+            <label>그룹</label>
+            <select class="v5-cm-inp">
+              <option>SUPER_ADMIN — 시스템 관리자</option>
+              <option selected>HR_MANAGER — 인사 관리자</option>
+              <option>DEV_LEADER — 개발팀장</option>
+              <option>SALES_USER — 영업 일반 사용자</option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div class="v5-cm-table-wrap" style="margin-top:.5rem;">
+        <table class="v5-cm-tbl">
+          <thead>
+            <tr>
+              <th style="width:44px"></th>
+              <th style="width:140px">USER_ID</th>
+              <th>이름</th>
+              <th>소속 부서</th>
+              <th style="width:120px">할당일</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="code">plm_admin</td>
+              <td>이현수</td>
+              <td>경영지원본부 / 총무팀</td>
+              <td class="code muted">2026-03-11</td>
+            </tr>
+            <tr>
+              <td><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="code">hr_kim</td>
+              <td>김미선</td>
+              <td>경영지원본부 / 인사팀</td>
+              <td class="code muted">2026-03-11</td>
+            </tr>
+            <tr>
+              <td><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="code">hr_lee</td>
+              <td>이수진</td>
+              <td>경영지원본부 / 인사팀</td>
+              <td class="code muted">2026-02-20</td>
+            </tr>
+            <tr>
+              <td><span class="v5-cm-chk"></span></td>
+              <td class="code">tempuser</td>
+              <td class="muted">(미할당)</td>
+              <td class="muted">—</td>
+              <td class="muted">—</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- ===== PANE 6: 메뉴 권한 매트릭스 ===== -->
+    <div class="v5-cm-pane" data-pane="authmenu">
+      <div class="v5-cm-sec-hd">
+        <div class="v5-cm-sec-hd-left">
+          <h2>메뉴 권한 매트릭스 <span class="v5-cm-chip schema">AUTHORITY_SUB_MENU</span></h2>
+          <p>각 권한 그룹이 어떤 메뉴·액션을 허용하는지 체크. 저장 시 REL_MENU_AUTH 에 upsert.</p>
+        </div>
+      </div>
+
+      <div class="v5-cm-matrix">
+        <table>
+          <thead>
+            <tr>
+              <th style="width:40%">메뉴</th>
+              <th class="matrix-cell">SUPER_ADMIN</th>
+              <th class="matrix-cell">HR_MANAGER</th>
+              <th class="matrix-cell">DEV_LEADER</th>
+              <th class="matrix-cell">SALES_USER</th>
+              <th class="matrix-cell">READONLY</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="muted-row"><td colspan="6" style="font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v5-cm-text-muted);">시스템 관리</td></tr>
+            <tr>
+              <td>메뉴 관리</td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+            </tr>
+            <tr>
+              <td>회사 · 조직 관리</td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+            </tr>
+            <tr class="muted-row"><td colspan="6" style="font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v5-cm-text-muted);">영업 관리</td></tr>
+            <tr>
+              <td>수주 관리</td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+            </tr>
+            <tr>
+              <td>견적 관리</td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+            </tr>
+            <tr class="muted-row"><td colspan="6" style="font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--v5-cm-text-muted);">생산 관리</td></tr>
+            <tr>
+              <td>작업지시</td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+            </tr>
+            <tr>
+              <td>BOM 관리</td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk"></span></td>
+              <td class="matrix-cell"><span class="v5-cm-chk on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l5 5L20 7"/></svg></span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="v5-cm-footer">
+        <span style="font-size:.7rem;color:var(--v5-cm-text-muted);">변경된 셀 · <b style="color:var(--v5-cm-text-sec)">0</b> 개</span>
+        <div style="display:flex;gap:.4rem;">
+          <button class="v5-cm-btn">되돌리기</button>
+          <button class="v5-cm-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>
+
+  </section>
+</main>
+
+<script>
+// 1) 좌측 회사 scope 선택
+document.getElementById("scopeList").addEventListener("click",(e)=>{
+  const card = e.target.closest(".v5-cm-scope");
+  if(!card) return;
+  document.querySelectorAll(".v5-cm-scope").forEach(c=>c.classList.remove("on"));
+  card.classList.add("on");
+  // 상단 hero meta 갱신
+  const name = card.querySelector(".v5-cm-scope-name").textContent;
+  const code = card.querySelector(".v5-cm-scope-code").textContent;
+  const meta = document.getElementById("vtMeta");
+  // pane 현재 기준 유지
+  const cur = document.querySelector(".v5-cm-pane.on");
+  if(cur){
+    const schema = cur.querySelector(".v5-cm-chip.schema")?.textContent || "";
+    meta.textContent = `${schema} · ${name}`;
+  }
+});
+
+// 2) 스키마 nav 선택
+document.getElementById("navList").addEventListener("click",(e)=>{
+  const item = e.target.closest(".v5-cm-nav");
+  if(!item) return;
+  document.querySelectorAll(".v5-cm-nav").forEach(n=>n.classList.remove("on"));
+  item.classList.add("on");
+  const key = item.dataset.pane;
+  document.querySelectorAll(".v5-cm-pane").forEach(p=>p.classList.remove("on"));
+  const target = document.querySelector(`.v5-cm-pane[data-pane="${key}"]`);
+  if(target) target.classList.add("on");
+  // hero 갱신
+  document.getElementById("vtTitle").textContent = item.querySelector(".v5-cm-nav-name").textContent;
+  const schema = item.querySelector(".v5-cm-nav-meta").textContent;
+  const activeCompany = document.querySelector(".v5-cm-scope.on .v5-cm-scope-name")?.textContent || "";
+  document.getElementById("vtMeta").textContent = `${schema} · ${activeCompany}`;
+});
+
+// 3) 체크박스 토글 (매트릭스·사용자 체크)
+document.addEventListener("click",(e)=>{
+  const chk = e.target.closest(".v5-cm-chk");
+  if(!chk) return;
+  chk.classList.toggle("on");
+});
+
+// 4) 테마 모드 전환
+document.getElementById("modeSwitch").addEventListener("click",(e)=>{
+  const btn = e.target.closest("button[data-mode]");
+  if(!btn) return;
+  const mode = btn.dataset.mode;
+  document.documentElement.classList.toggle("dark", mode === "dark");
+  document.querySelectorAll("#modeSwitch button").forEach(b=>b.classList.toggle("on", b===btn));
+});
+
+// 5) 컬러 팔레트 전환 (data-color 만 바꾸면 v5-primary-rgb 교체)
+const PALETTE = {
+  purple: "108,92,231",
+  blue:   "59,130,246",
+  green:  "16,185,129",
+  orange: "249,115,22",
+  pink:   "236,72,153",
+  cyan:   "8,145,178",
+};
+document.getElementById("colorDots").addEventListener("click",(e)=>{
+  const btn = e.target.closest("button[data-color]");
+  if(!btn) return;
+  const color = btn.dataset.color;
+  document.documentElement.style.setProperty("--v5-primary-rgb", PALETTE[color]);
+  document.querySelectorAll("#colorDots button").forEach(b=>b.classList.toggle("on", b===btn));
+});
+
+// 6) 부서 트리 caret 토글 (간단)
+document.querySelectorAll(".v5-cm-tree-node").forEach(node=>{
+  node.addEventListener("click",(e)=>{
+    if(e.target.closest(".row-actions")) return;
+    node.classList.toggle("open");
+  });
+});
+</script>
+</body>
+</html>