From 3883031c0b71e4096be32ee6e3b6c5ab62906cda Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Thu, 14 May 2026 17:41:50 +0900
Subject: [PATCH] =?UTF-8?q?feat(studio):=20Phase=20G=20=E2=80=94=20KPI=20s?=
 =?UTF-8?q?tats=20/=20chart=20/=20cardList=20/=20groupedTable=20+=20canoni?=
 =?UTF-8?q?cal=20container=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

INV Studio 데이터 뷰 시리즈. 솔루션 개발 단계라 backward-compat alias 없이 깔끔하게.

Backend:
- TableManagementController + Service: /aggregate, /aggregate-group, /select-rows endpoint 추가
  sanitize + hasColumn 검증 + buildAggregateWhere 공유 헬퍼

Frontend canonical view components (신규):
- stats: DB-first KPI editor (CPSegment 메타 chip, 컬럼 dropdown, 디자인 모드 debounce 350ms preview)
- chart: recharts (bar / horizontalBar / line / donut)
- card-list: title/subtitles/metrics 카드 카탈로그 (list / grid 레이아웃)
- grouped-table: 클라이언트 측 groupBy + 그룹 헤더 row

Canonical container (Phase G.2 / G.2.5 / G.2.6):
- containerType='tabs' 활성 탭만 mount, ChildSlot 으로 자식 렌더
- ScreenDesigner.handleComponentDrop 가 canonical container tabs 도 인식
- 우측 V2PropertiesPanel 4-way 분기: tab child / panel child / selected / empty
  nested path update + saveToHistory, delete handler 동기화

Shared utilities:
- useDbColumns hook (모듈 캐시), ColumnPicker (CPSelect 기반)
- OptionFilterRow 자연어 카드 형식 (컬럼 dropdown / 조건 select / 값 입력)
- _shared/use-table-rows.ts (cardList + groupedTable 공용 fetch)
- IconPicker: 한글 키워드 80+ alias, 휠 스크롤 fix, 360px 상한, 결과 80→300

stats DB-first UX (Phase G.4.x):
- DB / 정적 모드 이분법 제거 — 항상 dataSource 시작
- collapsed: 라벨 input + KpiMetaSegment chip (테이블 · 집계 · 컬럼 · 필터수)
- expanded: 데이터 / 필터 / 외형 / 고급 flat CP rows
- useSlideToggle hook 으로 펼침/닫힘 양방향 애니메이션
- 변화량 (delta) 수동 입력 UI 제거 — 향후 DB 자동 계산 영역
- 카드 fetch state 명시: loading / error / 대기 중 / 테이블 미설정

기타:
- ScreenDesigner.tsx → InvyoneStudio.tsx rename (활성 빌더 파일)
- 모든 hardcoded #6c5ce7 fallback 제거, hsl(var(--primary)) 토큰만 사용 (light/dark/테마 자동 적응)
- StatsDefinition default_config 도 DB-first placeholder (value: 0 박지 않음)

Docs:
- notes/gbpark/2026-05-14-studio-data-view-roadmap.md (G.0 ~ G.4.2 진행 기록)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../controller/TableManagementController.java |   51 +
 .../erp/service/TableManagementService.java   |  363 +++
 frontend/app/(main)/admin/builder/page.tsx    |    6 +-
 .../admin/screenMng/screenMngList/page.tsx    |    4 +-
 .../{ScreenDesigner.tsx => InvyoneStudio.tsx} |  347 ++-
 .../components/screen/ScreenSettingModal.tsx  |    8 +-
 .../config-panels/button-config/ActionTab.tsx |   20 +-
 .../screen/config-panels/button/DataTab.tsx   |   20 +-
 .../screen/panels/ComponentsPanel.tsx         |    3 +-
 .../screen/panels/V2PropertiesPanel.tsx       |    4 -
 .../v2/config-panels/InvFieldConfigPanel.tsx  |   74 +-
 frontend/lib/api/stats.ts                     |  160 ++
 .../lib/registry/DynamicWebTypeRenderer.tsx   |   84 +-
 .../components/_shared/ColumnPicker.tsx       |   81 +
 .../registry/components/_shared/FilterRow.tsx |  260 +++
 .../components/_shared/use-table-rows.ts      |  211 ++
 .../card-list/CardListComponent.tsx           |  346 +++
 .../components/card-list/CardListRenderer.tsx |   23 +
 .../card-list/InvCardListConfigPanel.tsx      |  472 ++++
 .../registry/components/card-list/index.ts    |   44 +
 .../registry/components/card-list/types.ts    |   47 +
 .../components/chart/ChartComponent.tsx       |  295 +++
 .../components/chart/ChartRenderer.tsx        |   27 +
 .../components/chart/InvChartConfigPanel.tsx  |  264 +++
 .../lib/registry/components/chart/index.ts    |   51 +
 .../lib/registry/components/chart/types.ts    |   48 +
 .../components/chart/use-chart-data.ts        |  208 ++
 .../registry/components/common/IconPicker.tsx |  323 ++-
 .../components/common/useDbColumns.ts         |   89 +
 .../container/ContainerComponent.tsx          |  325 ++-
 .../container/InvContainerConfigPanel.tsx     |   14 +
 .../registry/components/container/types.ts    |   36 +
 .../grouped-table/GroupedTableComponent.tsx   |  329 +++
 .../grouped-table/GroupedTableRenderer.tsx    |   23 +
 .../InvGroupedTableConfigPanel.tsx            |  362 +++
 .../components/grouped-table/index.ts         |   48 +
 .../components/grouped-table/types.ts         |   44 +
 frontend/lib/registry/components/index.ts     |    3 +
 .../components/input/InputComponent.tsx       |   69 +-
 .../components/input/select-pickers.tsx       |   38 +-
 .../components/stats/InvStatsConfigPanel.tsx  |  736 ++++--
 .../components/stats/StatsComponent.tsx       |  141 +-
 .../lib/registry/components/stats/index.ts    |   12 +-
 .../lib/registry/components/stats/types.ts    |   34 +-
 .../components/stats/use-stats-data.ts        |  259 +++
 .../lib/utils/getComponentConfigPanel.tsx     |    8 +-
 .../2026-05-14-container-twin/index.html      | 1519 +++++++++++++
 .../2026-05-14-invyone-intro/agent-demo.html  | 1984 +++++++++++++++++
 .../2026-05-14-invyone-intro/index.html       |  747 +++++++
 .../2026-05-14-invyone-intro/studio-demo.html | 1611 +++++++++++++
 .../2026-05-14-studio-data-view-roadmap.md    | 1611 +++++++++++++
 51 files changed, 13555 insertions(+), 331 deletions(-)
 rename frontend/components/screen/{ScreenDesigner.tsx => InvyoneStudio.tsx} (95%)
 create mode 100644 frontend/lib/api/stats.ts
 create mode 100644 frontend/lib/registry/components/_shared/ColumnPicker.tsx
 create mode 100644 frontend/lib/registry/components/_shared/FilterRow.tsx
 create mode 100644 frontend/lib/registry/components/_shared/use-table-rows.ts
 create mode 100644 frontend/lib/registry/components/card-list/CardListComponent.tsx
 create mode 100644 frontend/lib/registry/components/card-list/CardListRenderer.tsx
 create mode 100644 frontend/lib/registry/components/card-list/InvCardListConfigPanel.tsx
 create mode 100644 frontend/lib/registry/components/card-list/index.ts
 create mode 100644 frontend/lib/registry/components/card-list/types.ts
 create mode 100644 frontend/lib/registry/components/chart/ChartComponent.tsx
 create mode 100644 frontend/lib/registry/components/chart/ChartRenderer.tsx
 create mode 100644 frontend/lib/registry/components/chart/InvChartConfigPanel.tsx
 create mode 100644 frontend/lib/registry/components/chart/index.ts
 create mode 100644 frontend/lib/registry/components/chart/types.ts
 create mode 100644 frontend/lib/registry/components/chart/use-chart-data.ts
 create mode 100644 frontend/lib/registry/components/common/useDbColumns.ts
 create mode 100644 frontend/lib/registry/components/grouped-table/GroupedTableComponent.tsx
 create mode 100644 frontend/lib/registry/components/grouped-table/GroupedTableRenderer.tsx
 create mode 100644 frontend/lib/registry/components/grouped-table/InvGroupedTableConfigPanel.tsx
 create mode 100644 frontend/lib/registry/components/grouped-table/index.ts
 create mode 100644 frontend/lib/registry/components/grouped-table/types.ts
 create mode 100644 frontend/lib/registry/components/stats/use-stats-data.ts
 create mode 100644 notes/gbpark/2026-05-14-container-twin/index.html
 create mode 100644 notes/gbpark/2026-05-14-invyone-intro/agent-demo.html
 create mode 100644 notes/gbpark/2026-05-14-invyone-intro/index.html
 create mode 100644 notes/gbpark/2026-05-14-invyone-intro/studio-demo.html
 create mode 100644 notes/gbpark/2026-05-14-studio-data-view-roadmap.md

diff --git a/backend-spring/src/main/java/com/erp/controller/TableManagementController.java b/backend-spring/src/main/java/com/erp/controller/TableManagementController.java
index 76346b8a..46c1e909 100644
--- a/backend-spring/src/main/java/com/erp/controller/TableManagementController.java
+++ b/backend-spring/src/main/java/com/erp/controller/TableManagementController.java
@@ -325,6 +325,57 @@ public class TableManagementController {
                 "테이블 데이터를 성공적으로 조회했습니다."));
     }
 
+    /** POST /api/table-management/tables/:tableName/aggregate
+     *  body: { aggregation: "count"|"sum"|..., columnName?: string, filters?: [...] }
+     *  → { value: number }
+     */
+    @PostMapping("/tables/{tableName}/aggregate")
+    public ResponseEntity<ApiResponse<Map<String, Object>>> aggregateTableData(
+            @PathVariable String tableName,
+            @RequestBody Map<String, Object> options) {
+        try {
+            return ResponseEntity.ok(ApiResponse.success(
+                    tableManagementService.aggregateTableData(tableName, options == null ? Map.of() : options),
+                    "테이블 집계를 성공적으로 조회했습니다."));
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(400).body(ApiResponse.error(e.getMessage()));
+        }
+    }
+
+    /** POST /api/table-management/tables/:tableName/aggregate-group
+     *  body: { aggregation, groupBy, valueColumn?, filters?, limit?, orderDir? }
+     *  → { rows: [{ group, value }, ...] }
+     */
+    @PostMapping("/tables/{tableName}/aggregate-group")
+    public ResponseEntity<ApiResponse<Map<String, Object>>> aggregateTableGroup(
+            @PathVariable String tableName,
+            @RequestBody Map<String, Object> options) {
+        try {
+            return ResponseEntity.ok(ApiResponse.success(
+                    tableManagementService.aggregateTableGroup(tableName, options == null ? Map.of() : options),
+                    "테이블 그룹 집계를 성공적으로 조회했습니다."));
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(400).body(ApiResponse.error(e.getMessage()));
+        }
+    }
+
+    /** POST /api/table-management/tables/:tableName/select-rows
+     *  body: { columns?, filters?, orderBy?, limit?, offset? }
+     *  → { rows: [{...}, ...] }
+     */
+    @PostMapping("/tables/{tableName}/select-rows")
+    public ResponseEntity<ApiResponse<Map<String, Object>>> selectTableRows(
+            @PathVariable String tableName,
+            @RequestBody Map<String, Object> options) {
+        try {
+            return ResponseEntity.ok(ApiResponse.success(
+                    tableManagementService.selectTableRows(tableName, options == null ? Map.of() : options),
+                    "테이블 row 를 성공적으로 조회했습니다."));
+        } catch (IllegalArgumentException e) {
+            return ResponseEntity.status(400).body(ApiResponse.error(e.getMessage()));
+        }
+    }
+
     /** POST /api/table-management/tables/:tableName/record (단일 레코드) */
     @PostMapping("/tables/{tableName}/record")
     public ResponseEntity<ApiResponse<Map<String, Object>>> getTableRecord(
diff --git a/backend-spring/src/main/java/com/erp/service/TableManagementService.java b/backend-spring/src/main/java/com/erp/service/TableManagementService.java
index eb8d0d1e..4e67c56d 100644
--- a/backend-spring/src/main/java/com/erp/service/TableManagementService.java
+++ b/backend-spring/src/main/java/com/erp/service/TableManagementService.java
@@ -455,6 +455,369 @@ public class TableManagementService extends BaseService {
         return result;
     }
 
+    // ──────────────────────────────────────────────────
+    // 동적 테이블 집계 (count / sum / avg / min / max / distinctCount)
+    // ──────────────────────────────────────────────────
+
+    private static final Set<String> AGG_TYPES = Set.of(
+            "count", "sum", "avg", "min", "max", "distinctCount"
+    );
+
+    private static final Set<String> FILTER_OPS = Set.of(
+            "=", "!=", ">", "<", ">=", "<=",
+            "like", "in", "notIn", "isNull", "isNotNull"
+    );
+
+    /**
+     * 단일 집계 값 계산.
+     *
+     * count           — column 없이도 동작 (COUNT(*))
+     * sum/avg/min/max — column 필수
+     * distinctCount   — column 필수 (COUNT(DISTINCT col))
+     */
+    public Map<String, Object> aggregateTableData(String tableName, Map<String, Object> options) {
+        String safeTable = sanitize(tableName);
+        if (safeTable.isBlank() || !checkTableExists(safeTable)) {
+            throw new IllegalArgumentException("테이블이 존재하지 않습니다: " + tableName);
+        }
+
+        String aggregation = options.get("aggregation") instanceof String s ? s : "count";
+        if (!AGG_TYPES.contains(aggregation)) {
+            throw new IllegalArgumentException("지원하지 않는 집계 타입: " + aggregation);
+        }
+
+        String columnName = options.get("columnName") instanceof String s ? s : null;
+        String safeColumn = columnName != null ? sanitize(columnName) : "";
+
+        boolean columnRequired = !"count".equals(aggregation);
+        if (columnRequired) {
+            if (safeColumn.isBlank()) {
+                throw new IllegalArgumentException(aggregation + " 은 columnName 이 필요합니다.");
+            }
+            if (!hasColumn(safeTable, safeColumn)) {
+                throw new IllegalArgumentException("컬럼이 존재하지 않습니다: " + tableName + "." + columnName);
+            }
+        } else if (!safeColumn.isBlank() && !hasColumn(safeTable, safeColumn)) {
+            // count + columnName 가 들어왔지만 실제 없는 컬럼이면 명확히 거절
+            throw new IllegalArgumentException("컬럼이 존재하지 않습니다: " + tableName + "." + columnName);
+        }
+
+        List<Map<String, Object>> filters = normalizeAggregateFilters(options.get("filters"));
+
+        List<Object> values = new ArrayList<>();
+        String where = buildAggregateWhere(safeTable, filters, values);
+
+        String selectExpr;
+        if ("count".equals(aggregation)) {
+            selectExpr = !safeColumn.isBlank()
+                    ? String.format("COUNT(\"%s\")", safeColumn)
+                    : "COUNT(*)";
+        } else if ("distinctCount".equals(aggregation)) {
+            selectExpr = String.format("COUNT(DISTINCT \"%s\")", safeColumn);
+        } else {
+            // sum / avg / min / max — 숫자 캐스팅 (avg 만 numeric, 나머지는 컬럼 타입 그대로)
+            String upper = aggregation.toUpperCase();
+            if ("AVG".equals(upper) || "SUM".equals(upper)) {
+                selectExpr = String.format("%s(CAST(\"%s\" AS NUMERIC))", upper, safeColumn);
+            } else {
+                selectExpr = String.format("%s(\"%s\")", upper, safeColumn);
+            }
+        }
+
+        String sql = String.format("SELECT %s AS agg_value FROM \"%s\" main %s",
+                selectExpr, safeTable, where);
+
+        Number raw = jdbcTemplate.queryForObject(sql, Number.class, values.toArray());
+        double value = raw != null ? raw.doubleValue() : 0d;
+
+        Map<String, Object> result = new LinkedHashMap<>();
+        result.put("value", value);
+        return result;
+    }
+
+    private String buildAggregateWhere(String safeTable, List<Map<String, Object>> filters, List<Object> values) {
+        if (filters == null || filters.isEmpty()) return "";
+        List<String> clauses = new ArrayList<>();
+        for (Map<String, Object> f : filters) {
+            if (f == null) continue;
+            String col = f.get("column") instanceof String s ? s : null;
+            String op = f.get("operator") instanceof String s ? s : "=";
+            if (col == null || col.isBlank()) continue;
+            String safeCol = sanitize(col);
+            if (safeCol.isBlank() || !hasColumn(safeTable, safeCol)) continue;
+            if (!FILTER_OPS.contains(op)) continue;
+
+            Object val = f.get("value");
+
+            switch (op) {
+                case "isNull":
+                    clauses.add(String.format("\"%s\" IS NULL", safeCol));
+                    break;
+                case "isNotNull":
+                    clauses.add(String.format("\"%s\" IS NOT NULL", safeCol));
+                    break;
+                case "in":
+                case "notIn": {
+                    List<Object> list = toList(val);
+                    if (list.isEmpty()) continue;
+                    String marks = list.stream().map(v -> "?").collect(Collectors.joining(", "));
+                    String kw = "in".equals(op) ? "IN" : "NOT IN";
+                    clauses.add(String.format("\"%s\" %s (%s)", safeCol, kw, marks));
+                    values.addAll(list);
+                    break;
+                }
+                case "like":
+                    if (isEmptyAggregateFilterValue(val)) continue;
+                    clauses.add(String.format("\"%s\"::text ILIKE ?", safeCol));
+                    values.add("%" + val + "%");
+                    break;
+                default:
+                    if (isEmptyAggregateFilterValue(val)) continue;
+                    clauses.add(String.format("\"%s\" %s ?", safeCol, op));
+                    values.add(val);
+            }
+        }
+        return clauses.isEmpty() ? "" : "WHERE " + String.join(" AND ", clauses);
+    }
+
+    private List<Map<String, Object>> normalizeAggregateFilters(Object rawFilters) {
+        if (!(rawFilters instanceof List<?> rawList) || rawList.isEmpty()) {
+            return Collections.emptyList();
+        }
+        List<Map<String, Object>> out = new ArrayList<>();
+        for (Object item : rawList) {
+            if (item instanceof Map<?, ?> rawMap) {
+                Map<String, Object> normalized = new LinkedHashMap<>();
+                for (Map.Entry<?, ?> entry : rawMap.entrySet()) {
+                    if (entry.getKey() instanceof String key) {
+                        normalized.put(key, entry.getValue());
+                    }
+                }
+                if (!normalized.isEmpty()) out.add(normalized);
+            }
+        }
+        return out;
+    }
+
+    private boolean isEmptyAggregateFilterValue(Object val) {
+        if (val == null) return true;
+        if (val instanceof String s) return s.isBlank();
+        if (val instanceof Collection<?> c) return c.isEmpty();
+        return false;
+    }
+
+    private List<Object> toList(Object val) {
+        if (val == null) return List.of();
+        if (val instanceof List<?> l) {
+            List<Object> out = new ArrayList<>();
+            for (Object o : l) {
+                if (o == null) continue;
+                if (o instanceof String s && s.isBlank()) continue;
+                out.add(o);
+            }
+            return out;
+        }
+        if (val instanceof String s) {
+            if (s.isBlank()) return List.of();
+            return Arrays.stream(s.split(","))
+                    .map(String::trim)
+                    .filter(p -> !p.isEmpty())
+                    .map(p -> (Object) p)
+                    .collect(Collectors.toList());
+        }
+        return List.of(val);
+    }
+
+    // ──────────────────────────────────────────────────
+    // 그룹별 집계 (Phase G.3 — canonical chart 용)
+    // ──────────────────────────────────────────────────
+
+    /**
+     * groupBy 컬럼별로 집계 결과 반환. canonical chart 컴포넌트가 bar / line / donut /
+     * horizontalBar 모두에서 같은 endpoint 를 사용.
+     *
+     * body 예:
+     *   { "groupBy": "status", "aggregation": "count", "filters": [...] }
+     *   { "groupBy": "dept_code", "aggregation": "sum", "valueColumn": "amount", "limit": 12 }
+     *
+     * response:
+     *   { "rows": [{ "group": "재직", "value": 35 }, { "group": "휴직", "value": 4 }] }
+     */
+    public Map<String, Object> aggregateTableGroup(String tableName, Map<String, Object> options) {
+        String safeTable = sanitize(tableName);
+        if (safeTable.isBlank() || !checkTableExists(safeTable)) {
+            throw new IllegalArgumentException("테이블이 존재하지 않습니다: " + tableName);
+        }
+
+        String groupBy = options.get("groupBy") instanceof String s ? s : null;
+        String safeGroupBy = groupBy != null ? sanitize(groupBy) : "";
+        if (safeGroupBy.isBlank() || !hasColumn(safeTable, safeGroupBy)) {
+            throw new IllegalArgumentException("groupBy 컬럼이 존재하지 않습니다: " + tableName + "." + groupBy);
+        }
+
+        String aggregation = options.get("aggregation") instanceof String s ? s : "count";
+        if (!AGG_TYPES.contains(aggregation)) {
+            throw new IllegalArgumentException("지원하지 않는 집계 타입: " + aggregation);
+        }
+
+        String valueColumn = options.get("valueColumn") instanceof String s ? s : null;
+        if (valueColumn == null && options.get("columnName") instanceof String s) valueColumn = s;
+        String safeValueCol = valueColumn != null ? sanitize(valueColumn) : "";
+
+        boolean columnRequired = !"count".equals(aggregation);
+        if (columnRequired) {
+            if (safeValueCol.isBlank()) {
+                throw new IllegalArgumentException(aggregation + " 은 valueColumn 이 필요합니다.");
+            }
+            if (!hasColumn(safeTable, safeValueCol)) {
+                throw new IllegalArgumentException("valueColumn 이 존재하지 않습니다: " + tableName + "." + valueColumn);
+            }
+        } else if (!safeValueCol.isBlank() && !hasColumn(safeTable, safeValueCol)) {
+            throw new IllegalArgumentException("valueColumn 이 존재하지 않습니다: " + tableName + "." + valueColumn);
+        }
+
+        List<Map<String, Object>> filters = normalizeAggregateFilters(options.get("filters"));
+
+        int limit = toInt(options.get("limit"), 50);
+        if (limit < 1) limit = 50;
+        if (limit > 500) limit = 500;
+
+        String orderDir = options.get("orderDir") instanceof String s
+                && ("asc".equalsIgnoreCase(s) || "desc".equalsIgnoreCase(s))
+                ? s.toUpperCase()
+                : "DESC";
+
+        List<Object> values = new ArrayList<>();
+        String where = buildAggregateWhere(safeTable, filters, values);
+
+        String selectExpr;
+        if ("count".equals(aggregation)) {
+            selectExpr = !safeValueCol.isBlank()
+                    ? String.format("COUNT(\"%s\")", safeValueCol)
+                    : "COUNT(*)";
+        } else if ("distinctCount".equals(aggregation)) {
+            selectExpr = String.format("COUNT(DISTINCT \"%s\")", safeValueCol);
+        } else {
+            String upper = aggregation.toUpperCase();
+            if ("AVG".equals(upper) || "SUM".equals(upper)) {
+                selectExpr = String.format("%s(CAST(\"%s\" AS NUMERIC))", upper, safeValueCol);
+            } else {
+                selectExpr = String.format("%s(\"%s\")", upper, safeValueCol);
+            }
+        }
+
+        String sql = String.format(
+                "SELECT \"%s\" AS group_value, %s AS agg_value " +
+                        "FROM \"%s\" main %s " +
+                        "GROUP BY \"%s\" " +
+                        "ORDER BY agg_value %s NULLS LAST " +
+                        "LIMIT %d",
+                safeGroupBy, selectExpr, safeTable, where, safeGroupBy, orderDir, limit);
+
+        List<Map<String, Object>> rawRows = jdbcTemplate.queryForList(sql, values.toArray());
+        List<Map<String, Object>> rows = new ArrayList<>();
+        for (Map<String, Object> r : rawRows) {
+            Object groupVal = r.get("group_value");
+            Object aggVal = r.get("agg_value");
+            double value = aggVal instanceof Number ? ((Number) aggVal).doubleValue() : 0d;
+            Map<String, Object> out = new LinkedHashMap<>();
+            out.put("group", groupVal);
+            out.put("value", value);
+            rows.add(out);
+        }
+
+        Map<String, Object> result = new LinkedHashMap<>();
+        result.put("rows", rows);
+        return result;
+    }
+
+    // ──────────────────────────────────────────────────
+    // 가벼운 select-rows (Phase G.3.1 — card-list / grouped-table 용)
+    // ──────────────────────────────────────────────────
+
+    /**
+     * OptionFilter 호환 필터 + orderBy + limit/offset 로 임의 컬럼들의 row 들을 반환.
+     * `getTableData` 는 페이지네이션 + ILIKE search 가 묶여 있어 view 컴포넌트가
+     * 사용하기 무겁다. 본 메서드는 raw rows 만 깔끔하게 반환.
+     *
+     * body 예:
+     *   { "columns": ["user_name", "dept_code"], "filters": [...], "limit": 50 }
+     *   { "groupBy 없이 단순 다중 컬럼", "orderBy": [{ "column": "created_date", "direction": "desc" }] }
+     *
+     * response:
+     *   { "rows": [{...}, {...}] }
+     */
+    public Map<String, Object> selectTableRows(String tableName, Map<String, Object> options) {
+        String safeTable = sanitize(tableName);
+        if (safeTable.isBlank() || !checkTableExists(safeTable)) {
+            throw new IllegalArgumentException("테이블이 존재하지 않습니다: " + tableName);
+        }
+
+        @SuppressWarnings("unchecked")
+        List<Object> rawColumns = options.get("columns") instanceof List<?> raw
+                ? (List<Object>) raw : Collections.emptyList();
+
+        List<String> safeColumns = new ArrayList<>();
+        for (Object c : rawColumns) {
+            if (!(c instanceof String s)) continue;
+            String safe = sanitize(s);
+            if (safe.isBlank()) continue;
+            if (!hasColumn(safeTable, safe)) continue;
+            safeColumns.add(safe);
+        }
+
+        String selectExpr;
+        if (safeColumns.isEmpty()) {
+            selectExpr = "main.*";
+        } else {
+            selectExpr = safeColumns.stream()
+                    .map(c -> "\"" + c + "\"")
+                    .collect(Collectors.joining(", "));
+        }
+
+        List<Map<String, Object>> filters = normalizeAggregateFilters(options.get("filters"));
+
+        List<Object> values = new ArrayList<>();
+        String where = buildAggregateWhere(safeTable, filters, values);
+
+        // orderBy: [{ column, direction }]
+        List<Map<String, Object>> orderBy = normalizeAggregateFilters(options.get("orderBy"));
+
+        List<String> orderClauses = new ArrayList<>();
+        for (Map<String, Object> ob : orderBy) {
+            if (ob == null) continue;
+            String col = ob.get("column") instanceof String s ? s : null;
+            if (col == null) continue;
+            String safeCol = sanitize(col);
+            if (safeCol.isBlank() || !hasColumn(safeTable, safeCol)) continue;
+            String dir = ob.get("direction") instanceof String s
+                    && "desc".equalsIgnoreCase(s) ? "DESC" : "ASC";
+            orderClauses.add(String.format("\"%s\" %s", safeCol, dir));
+        }
+        String order = "";
+        if (!orderClauses.isEmpty()) {
+            order = "ORDER BY " + String.join(", ", orderClauses);
+        } else if (hasColumn(safeTable, "created_date")) {
+            order = "ORDER BY main.created_date DESC";
+        }
+
+        int limit = toInt(options.get("limit"), 50);
+        if (limit < 1) limit = 50;
+        if (limit > 500) limit = 500;
+        int offset = toInt(options.get("offset"), 0);
+        if (offset < 0) offset = 0;
+
+        String sql = String.format(
+                "SELECT %s FROM \"%s\" main %s %s LIMIT %d OFFSET %d",
+                selectExpr, safeTable, where, order, limit, offset);
+
+        List<Map<String, Object>> rows = jdbcTemplate.queryForList(sql, values.toArray());
+
+        Map<String, Object> result = new LinkedHashMap<>();
+        result.put("rows", rows);
+        return result;
+    }
+
     @Transactional
     public Map<String, Object> addTableData(String tableName, Map<String, Object> data) {
         String safeTable = sanitize(tableName);
diff --git a/frontend/app/(main)/admin/builder/page.tsx b/frontend/app/(main)/admin/builder/page.tsx
index 9912ba99..1c0d80bf 100644
--- a/frontend/app/(main)/admin/builder/page.tsx
+++ b/frontend/app/(main)/admin/builder/page.tsx
@@ -3,10 +3,10 @@
 // INVYONE 스튜디오 진입 페이지 (templates 테이블 기반)
 // - 템플릿 목록 + 새 템플릿 생성 → templates 테이블 CRUD
 // - URL ?id=<template_id> 로 바로 진입
-// - ScreenDesigner 는 template_id 를 통해 templates API 로 저장/로드
+// - InvyoneStudio 는 template_id 를 통해 templates API 로 저장/로드
 import { Suspense, useState, useEffect, useCallback } from "react";
 import { useSearchParams, useRouter } from "next/navigation";
-import ScreenDesigner from "@/components/screen/ScreenDesigner";
+import InvyoneStudio from "@/components/screen/InvyoneStudio";
 import type { ScreenDefinition } from "@/types/screen";
 import { getTemplateList, deleteTemplate } from "@/lib/api/template";
 import { createTemplate } from "@/lib/utils/templateAdapter";
@@ -442,7 +442,7 @@ function BuilderInner() {
 
   return (
     <div className="ide-builder h-[calc(100vh-4rem)] w-full overflow-hidden bg-background">
-      <ScreenDesigner
+      <InvyoneStudio
         selectedScreen={selectedScreen}
         onBackToList={handleBackToList}
         onScreenUpdate={(updatedFields) => {
diff --git a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
index b7dd0f0e..73ee4914 100644
--- a/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
+++ b/frontend/app/(main)/admin/screenMng/screenMngList/page.tsx
@@ -5,7 +5,7 @@ import { useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Plus, RefreshCw, Search, X, LayoutGrid, LayoutList, TestTube2, Database, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import ScreenDesigner from "@/components/screen/ScreenDesigner";
+import InvyoneStudio from "@/components/screen/InvyoneStudio";
 import TemplateManager from "@/components/screen/TemplateManager";
 import { ScreenGroupTreeView } from "@/components/screen/ScreenGroupTreeView";
 import { ScreenRelationFlow } from "@/components/screen/ScreenRelationFlow";
@@ -138,7 +138,7 @@ export default function ScreenManagementPage() {
   if (isDesignMode) {
     return (
       <div className="fixed inset-0 z-50 bg-background">
-        <ScreenDesigner 
+        <InvyoneStudio
           selectedScreen={selectedScreen} 
           onBackToList={() => goToStep("list")} 
           onScreenUpdate={(updatedFields) => {
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/InvyoneStudio.tsx
similarity index 95%
rename from frontend/components/screen/ScreenDesigner.tsx
rename to frontend/components/screen/InvyoneStudio.tsx
index 1b22a78c..457d13fb 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/InvyoneStudio.tsx
@@ -147,7 +147,7 @@ import { type ViewType } from "./ViewTabBar";
 // 컴포넌트 초기화 (새 시스템)
 import "@/lib/registry/components";
 
-interface ScreenDesignerProps {
+interface InvyoneStudioProps {
   selectedScreen: ScreenDefinition | null;
   onBackToList: () => void;
   onScreenUpdate?: (updatedScreen: Partial<ScreenDefinition>) => void;
@@ -453,13 +453,13 @@ function inferPrimaryTableFromComponents(
   return "";
 }
 
-export default function ScreenDesigner({ 
+export default function InvyoneStudio({
   selectedScreen, 
   onBackToList, 
   onScreenUpdate,
   isPop = false,
   defaultDevicePreview = "tablet"
-}: ScreenDesignerProps) {
+}: InvyoneStudioProps) {
   // POP 모드 여부에 따른 API 분기
   const USE_POP_API = isPop;
 
@@ -3855,7 +3855,11 @@ export default function ScreenDesigner({
           }
 
           const compType = (targetComponent as any)?.componentType;
-          if (targetComponent && (compType === "tabs-widget" || compType === "v2-tabs-widget")) {
+          // 🆕 canonical container 의 `containerType: "tabs"` 도 동일 분기로 처리 (Phase G.2.5)
+          const isCanonicalTabs =
+            compType === "container" &&
+            ((targetComponent as any)?.componentConfig?.containerType ?? "section") === "tabs";
+          if (targetComponent && (compType === "tabs-widget" || compType === "v2-tabs-widget" || isCanonicalTabs)) {
             const currentConfig = (targetComponent as any).componentConfig || {};
             const tabs = currentConfig.tabs || [];
 
@@ -3871,6 +3875,7 @@ export default function ScreenDesigner({
               componentId: component.id,
               componentType: componentType,
               componentName: component.name,
+              kind: isCanonicalTabs ? "canonical-container" : compType,
               isNested: !!parentSplitPanelId,
               parentSplitPanelId,
               parentPanelSide,
@@ -8774,7 +8779,339 @@ export default function ScreenDesigner({
                   }}
                 />
                 <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
-                  {selectedComponent ? (
+                  {/*
+                    Phase G.2.6 — 우측 properties 패널 선택 우선순위:
+                      1) selectedTabComponentInfo  (canonical container 의 탭 자식 / 옛 v2-tabs-widget 자식 모두)
+                      2) selectedPanelComponentInfo (분할 패널 안의 자식)
+                      3) selectedComponent (최상위 컴포넌트)
+                      4) 안내 메시지
+                    1·2 분기는 옛 좌측 disabled 패널 (`{false && ...}`) 의 동일 로직을 이식.
+                    nested setNestedValue 로 깊은 path (`componentConfig.dataSource.tableName`,
+                    `size.width`, `style.labelDisplay` 등) 모두 처리. 정상 컴포넌트 편집과
+                    같이 saveToHistory 까지 호출.
+                  */}
+                  {selectedTabComponentInfo ? (
+                    (() => {
+                      const tabComp = selectedTabComponentInfo.component;
+
+                      const tabComponentAsComponentData = {
+                        id: tabComp.id,
+                        type: "component",
+                        componentType: tabComp.componentType,
+                        label: tabComp.label,
+                        position: tabComp.position || { x: 0, y: 0 },
+                        size: tabComp.size || { width: 200, height: 100 },
+                        componentConfig: tabComp.componentConfig || {},
+                        style: tabComp.style || {},
+                      } as unknown as ComponentData;
+
+                      const setNestedValue = (obj: any, pathStr: string, val: any): any => {
+                        const result = JSON.parse(JSON.stringify(obj));
+                        const parts = pathStr.split(".");
+                        let current = result;
+                        for (let i = 0; i < parts.length - 1; i++) {
+                          const part = parts[i];
+                          if (!current[part] || typeof current[part] !== "object") {
+                            current[part] = {};
+                          }
+                          current = current[part];
+                        }
+                        current[parts[parts.length - 1]] = val;
+                        return result;
+                      };
+
+                      const updateTabsComponent = (tabsComponent: any, tabId: string, componentId: string, path: string, value: any) => {
+                        const currentConfig = JSON.parse(JSON.stringify(tabsComponent.componentConfig || {}));
+                        const tabs = currentConfig.tabs || [];
+                        const updatedTabs = tabs.map((tab: any) => {
+                          if (tab.id !== tabId) return tab;
+                          return {
+                            ...tab,
+                            components: (tab.components || []).map((comp: any) => {
+                              if (comp.id !== componentId) return comp;
+                              return path === "style"
+                                ? { ...comp, style: value }
+                                : setNestedValue(comp, path, value);
+                            }),
+                          };
+                        });
+                        return {
+                          ...tabsComponent,
+                          componentConfig: { ...currentConfig, tabs: updatedTabs },
+                        };
+                      };
+
+                      const updateTabChildProperty = (componentId: string, path: string, value: any) => {
+                        const { tabsComponentId, tabId, parentSplitPanelId, parentPanelSide } =
+                          selectedTabComponentInfo;
+
+                        setLayout((prevLayout) => {
+                          let newLayout;
+                          let updatedTabs: any[] | undefined;
+
+                          if (parentSplitPanelId && parentPanelSide) {
+                            newLayout = {
+                              ...prevLayout,
+                              components: prevLayout.components.map((c) => {
+                                if (c.id !== parentSplitPanelId) return c;
+                                const splitConfig = (c as any).componentConfig || {};
+                                const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                                const panelConfig = splitConfig[panelKey] || {};
+                                const panelComponents = panelConfig.components || [];
+                                const tabsComponent = panelComponents.find((pc: any) => pc.id === tabsComponentId);
+                                if (!tabsComponent) return c;
+                                const updatedTabsComponent = updateTabsComponent(
+                                  tabsComponent, tabId, componentId, path, value,
+                                );
+                                updatedTabs = updatedTabsComponent.componentConfig.tabs;
+                                return {
+                                  ...c,
+                                  componentConfig: {
+                                    ...splitConfig,
+                                    [panelKey]: {
+                                      ...panelConfig,
+                                      components: panelComponents.map((pc: any) =>
+                                        pc.id === tabsComponentId ? updatedTabsComponent : pc,
+                                      ),
+                                    },
+                                  },
+                                };
+                              }),
+                            };
+                          } else {
+                            const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
+                            if (!tabsComponent) return prevLayout;
+                            const updatedTabsComponent = updateTabsComponent(
+                              tabsComponent, tabId, componentId, path, value,
+                            );
+                            updatedTabs = updatedTabsComponent.componentConfig.tabs;
+                            newLayout = {
+                              ...prevLayout,
+                              components: prevLayout.components.map((c) =>
+                                c.id === tabsComponentId ? updatedTabsComponent : c,
+                              ),
+                            };
+                          }
+
+                          if (updatedTabs) {
+                            const updatedComp = updatedTabs
+                              .find((t: any) => t.id === tabId)
+                              ?.components?.find((c: any) => c.id === componentId);
+                            if (updatedComp) {
+                              setSelectedTabComponentInfo((prev) =>
+                                prev ? { ...prev, component: updatedComp } : null,
+                              );
+                            }
+                          }
+
+                          saveToHistory(newLayout);
+                          return newLayout;
+                        });
+                      };
+
+                      const deleteTabChild = (componentId: string) => {
+                        const { tabsComponentId, tabId, parentSplitPanelId, parentPanelSide } =
+                          selectedTabComponentInfo;
+
+                        const filterOut = (tabsComponent: any) => {
+                          const currentConfig = tabsComponent.componentConfig || {};
+                          const tabs = currentConfig.tabs || [];
+                          const updatedTabs = tabs.map((tab: any) =>
+                            tab.id === tabId
+                              ? { ...tab, components: (tab.components || []).filter((c: any) => c.id !== componentId) }
+                              : tab,
+                          );
+                          return {
+                            ...tabsComponent,
+                            componentConfig: { ...currentConfig, tabs: updatedTabs },
+                          };
+                        };
+
+                        setLayout((prevLayout) => {
+                          let newLayout;
+                          if (parentSplitPanelId && parentPanelSide) {
+                            newLayout = {
+                              ...prevLayout,
+                              components: prevLayout.components.map((c) => {
+                                if (c.id !== parentSplitPanelId) return c;
+                                const splitConfig = (c as any).componentConfig || {};
+                                const panelKey = parentPanelSide === "left" ? "leftPanel" : "rightPanel";
+                                const panelConfig = splitConfig[panelKey] || {};
+                                const panelComponents = panelConfig.components || [];
+                                const tabsComponent = panelComponents.find((pc: any) => pc.id === tabsComponentId);
+                                if (!tabsComponent) return c;
+                                const updatedTabsComponent = filterOut(tabsComponent);
+                                return {
+                                  ...c,
+                                  componentConfig: {
+                                    ...splitConfig,
+                                    [panelKey]: {
+                                      ...panelConfig,
+                                      components: panelComponents.map((pc: any) =>
+                                        pc.id === tabsComponentId ? updatedTabsComponent : pc,
+                                      ),
+                                    },
+                                  },
+                                };
+                              }),
+                            };
+                          } else {
+                            const tabsComponent = prevLayout.components.find((c) => c.id === tabsComponentId);
+                            if (!tabsComponent) return prevLayout;
+                            const updatedTabsComponent = filterOut(tabsComponent);
+                            newLayout = {
+                              ...prevLayout,
+                              components: prevLayout.components.map((c) =>
+                                c.id === tabsComponentId ? updatedTabsComponent : c,
+                              ),
+                            };
+                          }
+                          setSelectedTabComponentInfo(null);
+                          saveToHistory(newLayout);
+                          return newLayout;
+                        });
+                      };
+
+                      return (
+                        <V2PropertiesPanel
+                          selectedComponent={tabComponentAsComponentData}
+                          tables={tables as any}
+                          onUpdateProperty={updateTabChildProperty}
+                          onDeleteComponent={deleteTabChild}
+                          currentTable={tables.length > 0 ? (tables[0] as any) : undefined}
+                          currentTableName={selectedScreen?.table_name}
+                          currentScreenCompanyCode={selectedScreen?.company_code}
+                          onStyleChange={(style) => {
+                            updateTabChildProperty(tabComp.id, "style", style);
+                          }}
+                          allComponents={layout.components}
+                          menuObjid={menuObjid}
+                        />
+                      );
+                    })()
+                  ) : selectedPanelComponentInfo ? (
+                    (() => {
+                      const panelComp = selectedPanelComponentInfo.component;
+                      const { splitPanelId, panelSide } = selectedPanelComponentInfo;
+                      const panelKey = panelSide === "left" ? "leftPanel" : "rightPanel";
+
+                      const panelComponentAsComponentData = {
+                        id: panelComp.id,
+                        type: "component",
+                        componentType: panelComp.componentType,
+                        label: panelComp.label,
+                        position: panelComp.position || { x: 0, y: 0 },
+                        size: panelComp.size || { width: 200, height: 100 },
+                        componentConfig: panelComp.componentConfig || {},
+                        style: panelComp.style || {},
+                      } as unknown as ComponentData;
+
+                      const setNestedValue = (obj: any, pathStr: string, val: any): any => {
+                        const result = JSON.parse(JSON.stringify(obj));
+                        const parts = pathStr.split(".");
+                        let current = result;
+                        for (let i = 0; i < parts.length - 1; i++) {
+                          const part = parts[i];
+                          if (!current[part] || typeof current[part] !== "object") {
+                            current[part] = {};
+                          }
+                          current = current[part];
+                        }
+                        current[parts[parts.length - 1]] = val;
+                        return result;
+                      };
+
+                      const updatePanelChildProperty = (componentId: string, path: string, value: any) => {
+                        setLayout((prevLayout) => {
+                          const splitPanelComponent = prevLayout.components.find(
+                            (c: any) => c.id === splitPanelId,
+                          );
+                          if (!splitPanelComponent) return prevLayout;
+                          const currentConfig = (splitPanelComponent as any).componentConfig || {};
+                          const panelConfig = currentConfig[panelKey] || {};
+                          const components = panelConfig.components || [];
+                          const targetIdx = components.findIndex((c: any) => c.id === componentId);
+                          if (targetIdx === -1) return prevLayout;
+                          const targetComp = components[targetIdx];
+                          const updatedComp =
+                            path === "style"
+                              ? { ...targetComp, style: value }
+                              : setNestedValue(targetComp, path, value);
+                          const updatedComponents = [
+                            ...components.slice(0, targetIdx),
+                            updatedComp,
+                            ...components.slice(targetIdx + 1),
+                          ];
+                          const updatedSplitPanel = {
+                            ...splitPanelComponent,
+                            componentConfig: {
+                              ...currentConfig,
+                              [panelKey]: { ...panelConfig, components: updatedComponents },
+                            },
+                          };
+                          setSelectedPanelComponentInfo((prev) =>
+                            prev ? { ...prev, component: updatedComp } : null,
+                          );
+                          const newLayout = {
+                            ...prevLayout,
+                            components: prevLayout.components.map((c: any) =>
+                              c.id === splitPanelId ? updatedSplitPanel : c,
+                            ),
+                          };
+                          saveToHistory(newLayout);
+                          return newLayout;
+                        });
+                      };
+
+                      const deletePanelChild = (componentId: string) => {
+                        setLayout((prevLayout) => {
+                          const splitPanelComponent = prevLayout.components.find(
+                            (c: any) => c.id === splitPanelId,
+                          );
+                          if (!splitPanelComponent) return prevLayout;
+                          const currentConfig = (splitPanelComponent as any).componentConfig || {};
+                          const panelConfig = currentConfig[panelKey] || {};
+                          const components = panelConfig.components || [];
+                          const updatedSplitPanel = {
+                            ...splitPanelComponent,
+                            componentConfig: {
+                              ...currentConfig,
+                              [panelKey]: {
+                                ...panelConfig,
+                                components: components.filter((c: any) => c.id !== componentId),
+                              },
+                            },
+                          };
+                          setSelectedPanelComponentInfo(null);
+                          const newLayout = {
+                            ...prevLayout,
+                            components: prevLayout.components.map((c: any) =>
+                              c.id === splitPanelId ? updatedSplitPanel : c,
+                            ),
+                          };
+                          saveToHistory(newLayout);
+                          return newLayout;
+                        });
+                      };
+
+                      return (
+                        <V2PropertiesPanel
+                          selectedComponent={panelComponentAsComponentData}
+                          tables={tables as any}
+                          onUpdateProperty={updatePanelChildProperty}
+                          onDeleteComponent={deletePanelChild}
+                          currentTable={tables.length > 0 ? (tables[0] as any) : undefined}
+                          currentTableName={selectedScreen?.table_name}
+                          currentScreenCompanyCode={selectedScreen?.company_code}
+                          onStyleChange={(style) => {
+                            updatePanelChildProperty(panelComp.id, "style", style);
+                          }}
+                          allComponents={layout.components}
+                          menuObjid={menuObjid}
+                        />
+                      );
+                    })()
+                  ) : selectedComponent ? (
                     <V2PropertiesPanel
                       selectedComponent={selectedComponent || undefined}
                       tables={tables}
diff --git a/frontend/components/screen/ScreenSettingModal.tsx b/frontend/components/screen/ScreenSettingModal.tsx
index 861621fa..44c732e0 100644
--- a/frontend/components/screen/ScreenSettingModal.tsx
+++ b/frontend/components/screen/ScreenSettingModal.tsx
@@ -79,7 +79,7 @@ import { screenApi } from "@/lib/api/screen";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import { getNodeFlows, createNodeFlow, NodeFlow } from "@/lib/api/nodeFlows";
 import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
-import ScreenDesigner from "@/components/screen/ScreenDesigner";
+import InvyoneStudio from "@/components/screen/InvyoneStudio";
 import { TableSettingModal } from "@/components/screen/TableSettingModal";
 import {
   Select,
@@ -701,11 +701,11 @@ export function ScreenSettingModal({
       </DialogContent>
     </Dialog>
 
-    {/* ScreenDesigner 전체 화면 - Dialog 중첩 시 오버레이 컴포지팅으로 깜빡임 발생하여 직접 렌더링 */}
-    {/* ScreenDesigner 자체 SlimToolbar에 "목록으로" 닫기 버튼이 있으므로 별도 X 버튼 불필요 */}
+    {/* InvyoneStudio 전체 화면 - Dialog 중첩 시 오버레이 컴포지팅으로 깜빡임 발생하여 직접 렌더링 */}
+    {/* InvyoneStudio 자체 SlimToolbar에 "목록으로" 닫기 버튼이 있으므로 별도 X 버튼 불필요 */}
     {showDesignerModal && (
       <div className="bg-background fixed inset-0 z-[1000] flex flex-col">
-        <ScreenDesigner
+        <InvyoneStudio
           selectedScreen={{
             screen_id: currentScreenId,
             screen_code: `screen_${currentScreenId}`,
diff --git a/frontend/components/screen/config-panels/button-config/ActionTab.tsx b/frontend/components/screen/config-panels/button-config/ActionTab.tsx
index 03708d07..1da9a587 100644
--- a/frontend/components/screen/config-panels/button-config/ActionTab.tsx
+++ b/frontend/components/screen/config-panels/button-config/ActionTab.tsx
@@ -3179,15 +3179,25 @@ export const ActionTab: React.FC<ButtonTabProps> = ({
                     {/* 추가 데이터 제공 가능한 컴포넌트 (조건부 컨테이너, 셀렉트박스 등) */}
                     {allComponents
                       .filter((comp: any) => {
-                        const type = comp.componentType || comp.type || "";
+                        const type = comp.componentType || comp.component_type || comp.type || "";
+                        const cfg = comp.componentConfig || comp.component_config || {};
+                        const isCanonicalChoice =
+                          type === "input" &&
+                          (cfg.kind === "choice" ||
+                            cfg.type === "single" ||
+                            cfg.type === "multi" ||
+                            ["list", "code", "entity", "tags", "status", "boolean"].includes(cfg.format) ||
+                            ["static", "select", "category", "code", "entity", "distinct", "db", "api"].includes(cfg.source));
                         // 소스/타겟과 다른 컴포넌트 중 값을 제공할 수 있는 타입
-                        return ["conditional-container", "select", "combobox"].some((t) =>
-                          type.includes(t),
+                        return (
+                          isCanonicalChoice ||
+                          ["conditional-container", "select", "combobox"].some((t) => type.includes(t))
                         );
                       })
                       .map((comp: any) => {
-                        const compType = comp.componentType || comp.type || "unknown";
-                        const compLabel = comp.label || comp.componentConfig?.controlLabel || comp.id;
+                        const compType = comp.componentType || comp.component_type || comp.type || "unknown";
+                        const cfg = comp.componentConfig || comp.component_config || {};
+                        const compLabel = comp.label || cfg.controlLabel || cfg.label || comp.id;
                         return (
                           <SelectItem key={comp.id} value={comp.id}>
                             <div className="flex items-center gap-2">
diff --git a/frontend/components/screen/config-panels/button/DataTab.tsx b/frontend/components/screen/config-panels/button/DataTab.tsx
index 44ab13a5..55bf0732 100644
--- a/frontend/components/screen/config-panels/button/DataTab.tsx
+++ b/frontend/components/screen/config-panels/button/DataTab.tsx
@@ -386,14 +386,24 @@ export const DataTab: React.FC<DataTabProps> = ({
                   </SelectItem>
                   {allComponents
                     .filter((comp: any) => {
-                      const type = comp.componentType || comp.type || "";
-                      return ["conditional-container", "select", "combobox"].some((t) =>
-                        type.includes(t),
+                      const type = comp.componentType || comp.component_type || comp.type || "";
+                      const cfg = comp.componentConfig || comp.component_config || {};
+                      const isCanonicalChoice =
+                        type === "input" &&
+                        (cfg.kind === "choice" ||
+                          cfg.type === "single" ||
+                          cfg.type === "multi" ||
+                          ["list", "code", "entity", "tags", "status", "boolean"].includes(cfg.format) ||
+                          ["static", "select", "category", "code", "entity", "distinct", "db", "api"].includes(cfg.source));
+                      return (
+                        isCanonicalChoice ||
+                        ["conditional-container", "select", "combobox"].some((t) => type.includes(t))
                       );
                     })
                     .map((comp: any) => {
-                      const compType = comp.componentType || comp.type || "unknown";
-                      const compLabel = comp.label || comp.componentConfig?.controlLabel || comp.id;
+                      const compType = comp.componentType || comp.component_type || comp.type || "unknown";
+                      const cfg = comp.componentConfig || comp.component_config || {};
+                      const compLabel = comp.label || cfg.controlLabel || cfg.label || comp.id;
                       return (
                         <SelectItem key={comp.id} value={comp.id}>
                           <div className="flex items-center gap-2">
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index 36e954d6..e9e43139 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -333,7 +333,8 @@ export function ComponentsPanel({
 
   // ── 기본/고급 ID 분류 ──
   const BASIC_IDS = new Set([
-    "table", "search", "input", "button", "stats", "title", "divider", "container",
+    "table", "search", "input", "button", "stats", "chart", "card-list", "grouped-table",
+    "title", "divider", "container",
     "v2-repeater",
   ]);
   const ADVANCED_IDS = new Set([
diff --git a/frontend/components/screen/panels/V2PropertiesPanel.tsx b/frontend/components/screen/panels/V2PropertiesPanel.tsx
index 0abb33a8..f51f5120 100644
--- a/frontend/components/screen/panels/V2PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/V2PropertiesPanel.tsx
@@ -402,10 +402,6 @@ export const V2PropertiesPanel: React.FC<V2PropertiesPanelProps> = ({
       // 새로운 통합 입력 컴포넌트 (옛 V2 입력/선택은 input canonical 로 흡수되어 목록에서 제거됨)
       "input",
       "v2-entity-select",
-      "v2-checkbox",
-      "v2-radio",
-      "v2-textarea",
-      "v2-file",
     ];
 
     // 현재 컴포넌트가 입력 필드인지 확인
diff --git a/frontend/components/v2/config-panels/InvFieldConfigPanel.tsx b/frontend/components/v2/config-panels/InvFieldConfigPanel.tsx
index 1f76ed61..0a4c55b4 100644
--- a/frontend/components/v2/config-panels/InvFieldConfigPanel.tsx
+++ b/frontend/components/v2/config-panels/InvFieldConfigPanel.tsx
@@ -4,10 +4,10 @@
  * V2 통합 필드 설정 패널 (INVYONE Studio 컨셉 적용)
  *
  *   분류 체계 (시안 panel-input-new 컨셉)
- *     kind = 입력 / 선택  (type 의 group 으로 자동 결정)
+ *     kind = 입력 / 선택·태그  (type 의 group 으로 자동 결정)
  *     type
  *       입력 : 글자(text) · 숫자(number) · 여러 줄(textarea) · 채번(numbering)
- *       선택 : 직접 목록(select) · 카테고리(category) · 테이블 참조(entity)
+ *       선택·태그 : 단일 선택(single) · 다중값(multi: 목록/코드/엔티티/태그)
  *     format = text 안에서만 자유/이메일/전화/URL/사업자번호/통화
  *
  *   화면 구조
@@ -57,13 +57,13 @@ import type { CPCrumbType, CPFormatItem } from "./_shared/cp";
 type Kind = "input" | "choice" | "auto" | "attach";
 type Type =
   | "text" | "number" | "money" | "date"           // 입력
-  | "single" | "multi"                              // 선택
+  | "single" | "multi"                              // 선택/태그
   | "autonum" | "formula" | "audit"                 // 자동
   | "file";                                         // 첨부
 
 const KINDS: { id: Kind; name: string; icon: React.ReactNode }[] = [
   { id: "input",  name: "입력", icon: <span style={{ fontSize: 11 }}>✎</span> },
-  { id: "choice", name: "선택", icon: <span style={{ fontSize: 11 }}>☷</span> },
+  { id: "choice", name: "선택·태그", icon: <span style={{ fontSize: 11 }}>☷</span> },
   { id: "auto",   name: "자동", icon: <span style={{ fontSize: 11 }}>⚡</span> },
   { id: "attach", name: "첨부", icon: <span style={{ fontSize: 11 }}>📎</span> },
 ];
@@ -76,8 +76,8 @@ const TYPES_BY_KIND: Record<Kind, (CPCrumbType & { id: Type })[]> = {
     { id: "date",   name: "날짜", desc: "날짜·시간",   icon: "📅", col: "TIMESTAMP" },
   ],
   choice: [
-    { id: "single", name: "단일", desc: "하나만 선택", icon: "◉", col: "VARCHAR" },
-    { id: "multi",  name: "다중", desc: "여러 개 선택", icon: "☷", col: "JSON" },
+    { id: "single", name: "단일 선택", desc: "목록에서 하나", icon: "◉", col: "VARCHAR" },
+    { id: "multi",  name: "다중값", desc: "태그·여러 항목", icon: "☷", col: "JSON" },
   ],
   auto: [
     { id: "autonum", name: "채번", desc: "자동 일련번호",  icon: "№",  col: "VARCHAR" },
@@ -118,17 +118,17 @@ const FORMATS_BY_TYPE: Record<Type, CPFormatItem[]> = {
     { id: "range",    name: "기간",       desc: "시작 ~ 끝",         icon: "↔" },
   ],
   single: [
-    { id: "list",    name: "고정 목록", desc: "여기서 정의",       icon: "▾" },
+    { id: "list",    name: "고정 목록", desc: "여기서 정의",       icon: "LS" },
     { id: "code",    name: "공통코드",  desc: "코드 테이블",       icon: "CD" },
     { id: "entity",  name: "엔티티",    desc: "다른 테이블 (FK)",  icon: "FK" },
     { id: "status",  name: "상태",      desc: "색·라벨",           icon: "●" },
     { id: "boolean", name: "예/아니오", desc: "둘 중 하나",        icon: "◐" },
   ],
   multi: [
-    { id: "tags",   name: "태그",      desc: "자유 다중", icon: "#" },
-    { id: "list",   name: "고정 목록", desc: "체크박스",   icon: "☑" },
-    { id: "code",   name: "공통코드",  desc: "여러 코드", icon: "CD" },
-    { id: "entity", name: "엔티티",    desc: "다대다",     icon: "FK" },
+    { id: "tags",   name: "태그 입력", desc: "직접 입력",       icon: "TG" },
+    { id: "list",   name: "고정 목록", desc: "여러 항목 선택",  icon: "CB" },
+    { id: "code",   name: "공통코드",  desc: "여러 코드 선택",  icon: "CD" },
+    { id: "entity", name: "엔티티",    desc: "여러 참조 선택",  icon: "FK" },
   ],
   autonum: [{ id: "autonum", name: "채번", desc: "ORD-2025-####", icon: "№" }],
   formula: [{ id: "formula", name: "계산", desc: "qty * price",    icon: "ƒx" }],
@@ -247,7 +247,7 @@ function resolveTriple(
   }
 
   // 2. 컴포넌트 ID 가 명시적으로 별도면 그쪽으로
-  if (componentType === "v2-file" || config.fieldType === "file") {
+  if (config.fieldType === "file") {
     const a = config.accept || "";
     if (a.startsWith("image/")) return { kind: "attach", type: "file", format: "image" };
     if (a.includes("pdf") || a.includes("docx") || a.includes(".doc"))
@@ -323,6 +323,7 @@ const TYPE_VOLATILE_FIELDS = [
   "fieldType", "inputType", "source", "multiple",
   "step", "min", "max", "rows", "tags", "accept",
   "unit", "thousands", "mode", "mask",
+  "boolStyle", "trueLabel", "falseLabel",
   "autoGeneration", "computed", "readonly",
   // type 별 옵션 (select options / text length / date 옵션)
   "options", "minLength", "maxLength",
@@ -405,6 +406,8 @@ function applyTriple(
     } else if (format === "boolean") {
       next.fieldType = "checkbox";
       next.multiple = false;
+      next.mode = "toggle";
+      next.boolStyle = "switch";
     }
     return next;
   }
@@ -1704,7 +1707,7 @@ function BooleanOptions({
 }) {
   return (
     <>
-      <Hint>실제 동작은 v2-checkbox / boolean 컴포넌트로 위임. 라벨/표시 모드만 여기서.</Hint>
+      <Hint>canonical input 이 직접 처리합니다. 표시 형태와 라벨만 설정합니다.</Hint>
       <CPRow label="표시 형태">
         <CPSegment
           value={config.boolStyle || "switch"}
@@ -1867,7 +1870,7 @@ function FileOptions({
 }) {
   return (
     <>
-      <Hint>실제 업로드 동작은 v2-file 컴포넌트로 위임. 정책/제한만 여기서.</Hint>
+      <Hint>canonical input 의 파일 필드로 업로드합니다. 허용 형식과 제한만 설정합니다.</Hint>
       <CPRow label="허용 형식">
         <CPText
           mono
@@ -2036,21 +2039,24 @@ function SelectAdvancedOptions({
   updateConfig: (k: string, v: any) => void;
   multi?: boolean;
 }) {
+  const isTagsFormat = multi && config.format === "tags";
+
   return (
     <>
-      <CPRow label="선택 방식">
-        <CPSelect value={config.mode || "dropdown"} onChange={(v) => updateConfig("mode", v)}>
-          <option value="dropdown">드롭다운</option>
-          <option value="combobox">검색 가능 드롭다운</option>
-          {!multi && <option value="radio">라디오 버튼</option>}
-          {multi && <option value="check">체크박스</option>}
-          {multi && <option value="swap">스왑(좌우 이동)</option>}
-          {multi && <option value="tag">태그 선택</option>}
-          {!multi && <option value="toggle">토글</option>}
-        </CPSelect>
-      </CPRow>
+      {!isTagsFormat && (
+        <CPRow label="선택 방식">
+          <CPSelect value={config.mode || "dropdown"} onChange={(v) => updateConfig("mode", v)}>
+            <option value="dropdown">드롭다운</option>
+            <option value="combobox">검색 가능 드롭다운</option>
+            {!multi && <option value="radio">라디오 버튼</option>}
+            {multi && <option value="check">체크박스</option>}
+            {multi && <option value="swap">스왑(좌우 이동)</option>}
+            {!multi && <option value="toggle">토글</option>}
+          </CPSelect>
+        </CPRow>
+      )}
       {multi && (
-        <CPRow label="최대 개수">
+        <CPRow label={isTagsFormat ? "최대 태그 개수" : "최대 개수"}>
           <CPNumber
             value={config.maxSelect ?? ""}
             onChange={(v) => updateConfig("maxSelect", v)}
@@ -2059,12 +2065,16 @@ function SelectAdvancedOptions({
           />
         </CPRow>
       )}
-      <CPRow label="검색 기능">
-        <CPSwitch value={!!config.searchable} onChange={(v) => updateConfig("searchable", v)} />
-      </CPRow>
-      <CPRow label="선택 초기화">
-        <CPSwitch value={config.allowClear !== false} onChange={(v) => updateConfig("allowClear", v)} />
-      </CPRow>
+      {!isTagsFormat && (
+        <>
+          <CPRow label="검색 기능">
+            <CPSwitch value={!!config.searchable} onChange={(v) => updateConfig("searchable", v)} />
+          </CPRow>
+          <CPRow label="선택 초기화">
+            <CPSwitch value={config.allowClear !== false} onChange={(v) => updateConfig("allowClear", v)} />
+          </CPRow>
+        </>
+      )}
     </>
   );
 }
diff --git a/frontend/lib/api/stats.ts b/frontend/lib/api/stats.ts
new file mode 100644
index 00000000..de071a28
--- /dev/null
+++ b/frontend/lib/api/stats.ts
@@ -0,0 +1,160 @@
+import { apiClient } from "./client";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+
+export type StatsAggregation =
+  | "count"
+  | "sum"
+  | "avg"
+  | "min"
+  | "max"
+  | "distinctCount";
+
+/**
+ * AggregateRequest — 백엔드 `/api/table-management/tables/{tableName}/aggregate` body.
+ *
+ * filters 는 `OptionFilter[]` 와 동일한 모양으로 보낸다. 단, `value_type` / `field_ref` /
+ * `user_field` 는 호출자가 미리 실제 값으로 치환해서 `value` 만 남긴 상태여야 한다 — 백엔드는
+ * 그 외 필드를 무시한다.
+ */
+export interface AggregateRequest {
+  aggregation: StatsAggregation;
+  columnName?: string;
+  filters?: Array<Pick<OptionFilter, "column" | "operator" | "value">>;
+}
+
+export interface AggregateResponse {
+  value: number;
+}
+
+/**
+ * aggregateTableStat — 단일 stat 카드 값을 백엔드에서 계산해 가져온다.
+ *
+ * 디자인 모드 / 빈 tableName 가드는 호출자가 책임진다.
+ * 실패 시 axios error 가 그대로 throw 됨 — 상위 hook 에서 카드 단위 fallback.
+ */
+export async function aggregateTableStat(
+  tableName: string,
+  request: AggregateRequest,
+): Promise<AggregateResponse> {
+  const res = await apiClient.post(
+    `/table-management/tables/${encodeURIComponent(tableName)}/aggregate`,
+    request,
+  );
+  const body = res.data;
+  // ApiResponse<{ value: number }> wrapper. value 는 number 또는 numeric string 가능.
+  const payload = (body?.data ?? body) as { value?: unknown };
+  const raw = payload?.value;
+  const value =
+    typeof raw === "number"
+      ? raw
+      : typeof raw === "string" && raw.trim() !== ""
+        ? Number(raw)
+        : 0;
+  return { value: Number.isFinite(value) ? value : 0 };
+}
+
+/**
+ * AggregateGroupRequest — Phase G.3 canonical chart 컴포넌트가 사용하는
+ * `/aggregate-group` body.
+ *
+ * 백엔드가 `GROUP BY <groupBy>` 후 각 그룹마다 단일 집계 값을 계산해 row 배열로 반환.
+ * `valueColumn` 는 `aggregation === "count"` 일 때 생략 가능. distinctCount / sum /
+ * avg / min / max 는 valueColumn 필수 (백엔드 측 가드).
+ */
+export interface AggregateGroupRequest {
+  aggregation: StatsAggregation;
+  groupBy: string;
+  valueColumn?: string;
+  filters?: Array<Pick<OptionFilter, "column" | "operator" | "value">>;
+  limit?: number;
+  orderDir?: "asc" | "desc";
+}
+
+export interface AggregateGroupRow {
+  /** GROUP BY 컬럼의 raw 값. null 가능. */
+  group: string | number | null;
+  /** 집계 결과 (숫자). */
+  value: number;
+}
+
+export interface AggregateGroupResponse {
+  rows: AggregateGroupRow[];
+}
+
+/**
+ * aggregateTableGroup — 그룹별 집계.
+ *
+ * 호출자는 디자인 모드 / 빈 tableName / 빈 groupBy 가드를 책임진다. 실패는 axios
+ * error 로 throw 된다.
+ */
+export async function aggregateTableGroup(
+  tableName: string,
+  request: AggregateGroupRequest,
+): Promise<AggregateGroupResponse> {
+  const res = await apiClient.post(
+    `/table-management/tables/${encodeURIComponent(tableName)}/aggregate-group`,
+    request,
+  );
+  const body = res.data;
+  const payload = (body?.data ?? body) as { rows?: unknown };
+  const rawRows = Array.isArray(payload?.rows) ? (payload!.rows as any[]) : [];
+  const rows: AggregateGroupRow[] = rawRows.map((r) => {
+    const v = r?.value;
+    const num =
+      typeof v === "number"
+        ? v
+        : typeof v === "string" && v.trim() !== ""
+          ? Number(v)
+          : 0;
+    return {
+      group: r?.group ?? null,
+      value: Number.isFinite(num) ? num : 0,
+    };
+  });
+  return { rows };
+}
+
+/**
+ * SelectRowsRequest — Phase G.3.1 canonical cardList / groupedTable 가 사용하는
+ * `/select-rows` body.
+ *
+ * 단순 SELECT — 필터 / 정렬 / limit 만 적용해서 raw row 들을 받는다. column 단일
+ * 집계가 아니라 multi-column row 가 필요한 view 컴포넌트용.
+ */
+export interface SelectRowsOrderBy {
+  column: string;
+  direction?: "asc" | "desc";
+}
+
+export interface SelectRowsRequest {
+  columns?: string[];
+  filters?: Array<Pick<OptionFilter, "column" | "operator" | "value">>;
+  orderBy?: SelectRowsOrderBy[];
+  limit?: number;
+  offset?: number;
+}
+
+export interface SelectRowsResponse {
+  rows: Record<string, any>[];
+}
+
+/**
+ * selectTableRows — multi-column row 들을 받아오는 가벼운 SELECT.
+ *
+ * 호출자는 디자인 모드 / 빈 tableName 가드를 책임진다. 실패는 axios error 로 throw.
+ */
+export async function selectTableRows(
+  tableName: string,
+  request: SelectRowsRequest,
+): Promise<SelectRowsResponse> {
+  const res = await apiClient.post(
+    `/table-management/tables/${encodeURIComponent(tableName)}/select-rows`,
+    request,
+  );
+  const body = res.data;
+  const payload = (body?.data ?? body) as { rows?: unknown };
+  const rawRows = Array.isArray(payload?.rows)
+    ? (payload!.rows as Record<string, any>[])
+    : [];
+  return { rows: rawRows };
+}
diff --git a/frontend/lib/registry/DynamicWebTypeRenderer.tsx b/frontend/lib/registry/DynamicWebTypeRenderer.tsx
index c816bd13..89545118 100644
--- a/frontend/lib/registry/DynamicWebTypeRenderer.tsx
+++ b/frontend/lib/registry/DynamicWebTypeRenderer.tsx
@@ -6,6 +6,7 @@ import { DynamicComponentProps } from "./types";
 // import { getWidgetComponentByWebType, getWidgetComponentByName } from "@/components/screen/widgets/types"; // 임시 비활성화
 import { useWebTypes } from "@/hooks/admin/useWebTypes";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { getV2MappingFromWebType } from "@/lib/utils/webTypeMapping";
 
 type DynamicWebTypeRendererProps = Omit<DynamicComponentProps, "web_type" | "props"> & {
   web_type?: string;
@@ -13,6 +14,37 @@ type DynamicWebTypeRendererProps = Omit<DynamicComponentProps, "web_type" | "pro
   props?: Record<string, any>;
 };
 
+const CANONICAL_INPUT_WEB_TYPES = new Set([
+  "text",
+  "email",
+  "password",
+  "tel",
+  "url",
+  "color",
+  "number",
+  "decimal",
+  "slider",
+  "date",
+  "datetime",
+  "time",
+  "daterange",
+  "select",
+  "dropdown",
+  "radio",
+  "checkbox",
+  "boolean",
+  "textarea",
+  "text_area",
+  "code",
+  "category",
+  "entity",
+  "file",
+  "image",
+  "img",
+  "picture",
+  "photo",
+]);
+
 /**
  * 동적 웹타입 렌더러 컴포넌트
  * 레지스트리에서 웹타입을 조회하여 동적으로 렌더링합니다.
@@ -77,36 +109,48 @@ export const DynamicWebTypeRenderer: React.FC<DynamicWebTypeRendererProps> = ({
     };
   }, [props, mergedConfig, webType, onEvent]);
 
-  // file / image / img / picture / photo — canonical `input` 으로 라우팅 (Phase D.4).
-  // FileUploadComponent / ImageWidget 의 직접 import 는 끊고, InputComponent 가 자체
-  // FilePicker 로 처리. 옛 컴포넌트 파일 자체 삭제는 사용처 0건 확인 후 별도 phase.
-  if (
-    webType === "file" ||
-    webType === "image" ||
-    webType === "img" ||
-    webType === "picture" ||
-    webType === "photo" ||
-    props.component?.type === "file"
-  ) {
+  // 입력 webType 은 WebTypeRegistry 의 old widget 보다 먼저 canonical `input` 으로 라우팅.
+  // entity 도 검색 모달이 아니라 code-name option source 로 처리한다.
+  if (CANONICAL_INPUT_WEB_TYPES.has(webType) || props.component?.type === "file") {
     try {
       const { InputComponent } = require("@/lib/registry/components/input/InputComponent");
       const isImage = webType === "image" || webType === "img" || webType === "picture" || webType === "photo";
-      const fileConfig = {
-        type: "file",
-        format: isImage ? "image" : "file",
-        accept: isImage ? "image/*" : "*/*",
-        multiple: !isImage,
-        showPreview: isImage,
-      };
+      const mappedWebType =
+        webType === "picture" || webType === "photo" ? "image" : webType === "text_area" ? "textarea" : webType;
+      const mapped = getV2MappingFromWebType(mappedWebType);
+      const canonicalConfig =
+        mapped.componentType === "input"
+          ? mapped.config
+          : { kind: "input", type: "text", format: "free" };
+      const fileConfig = isImage
+        ? {
+            kind: "attach",
+            type: "file",
+            format: "image",
+            accept: "image/*",
+            multiple: false,
+            maxFiles: 1,
+            showPreview: true,
+          }
+        : props.component?.type === "file"
+          ? {
+              kind: "attach",
+              type: "file",
+              format: "file",
+              accept: "*/*",
+              multiple: true,
+              maxFiles: 10,
+            }
+          : {};
       return (
         <InputComponent
           {...props}
           {...finalProps}
-          config={{ ...fileConfig, ...mergedConfig }}
+          config={{ ...canonicalConfig, ...fileConfig, ...mergedConfig, webType, web_type: webType }}
         />
       );
     } catch (error) {
-      console.error("canonical input (file) 로드 실패:", error);
+      console.error("canonical input 로드 실패:", error);
     }
   }
 
diff --git a/frontend/lib/registry/components/_shared/ColumnPicker.tsx b/frontend/lib/registry/components/_shared/ColumnPicker.tsx
new file mode 100644
index 00000000..0855113b
--- /dev/null
+++ b/frontend/lib/registry/components/_shared/ColumnPicker.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+/**
+ * ColumnPicker — 테이블의 컬럼 dropdown (cp 톤, CPSelect 기반).
+ *
+ * tableName 이 있으면 useDbColumns 로 컬럼 목록 자동 로드. 현재 값이 목록에 없으면
+ * "사용자 정의" option 으로 보존. tableName 미설정 시 free-text input 으로 폴백.
+ *
+ * 사용처: stats / chart / cardList / groupedTable 의 컬럼 선택 (집계 컬럼,
+ * 그룹 컬럼, 정렬 컬럼, 필드 매핑, 필터 컬럼 등).
+ */
+
+import React from "react";
+import { CPSelect, CPText } from "@/components/v2/config-panels/_shared/cp";
+import {
+  useDbColumns,
+  type DbColumnOption,
+} from "@/lib/registry/components/common/useDbColumns";
+
+export interface ColumnPickerProps {
+  tableName?: string;
+  value?: string;
+  onChange: (v: string | undefined) => void;
+  placeholder?: string;
+  /** 외부에서 미리 받은 컬럼 (tableName 없을 때 fallback 옵션) */
+  columnOptions?: DbColumnOption[];
+  /** 필터 옵션 — 특정 data_type 만 허용 (예: numeric 만) */
+  filter?: (col: DbColumnOption) => boolean;
+}
+
+export const ColumnPicker: React.FC<ColumnPickerProps> = ({
+  tableName,
+  value,
+  onChange,
+  placeholder = "컬럼 선택…",
+  columnOptions,
+  filter,
+}) => {
+  const fromHook = useDbColumns(tableName);
+  const cols: DbColumnOption[] = React.useMemo(() => {
+    const base =
+      columnOptions && columnOptions.length > 0
+        ? columnOptions
+        : fromHook.columns;
+    return filter ? base.filter(filter) : base;
+  }, [columnOptions, fromHook.columns, filter]);
+  const loading = fromHook.loading && cols.length === 0;
+  const hasCols = cols.length > 0;
+  const currentValid = !value || cols.some((c) => c.value === value);
+
+  if (!hasCols) {
+    // 테이블 미설정 / 컬럼 없음 — free-text 폴백
+    return (
+      <CPText
+        value={value ?? ""}
+        onChange={(v) => onChange(v || undefined)}
+        placeholder={loading ? "컬럼 로딩 중…" : tableName ? "컬럼 없음" : placeholder}
+      />
+    );
+  }
+
+  return (
+    <CPSelect
+      value={currentValid ? value ?? "" : (value as string)}
+      onChange={(v) => onChange(v || undefined)}
+      placeholder={loading ? "로딩…" : placeholder}
+    >
+      <option value="">{placeholder}</option>
+      {!currentValid && value && (
+        <option value={value}>{value} (사용자 정의)</option>
+      )}
+      {cols.map((c) => (
+        <option key={c.value} value={c.value}>
+          {c.label && c.label !== c.value
+            ? `${c.label} (${c.value})`
+            : c.value}
+        </option>
+      ))}
+    </CPSelect>
+  );
+};
diff --git a/frontend/lib/registry/components/_shared/FilterRow.tsx b/frontend/lib/registry/components/_shared/FilterRow.tsx
new file mode 100644
index 00000000..a27770ac
--- /dev/null
+++ b/frontend/lib/registry/components/_shared/FilterRow.tsx
@@ -0,0 +1,260 @@
+"use client";
+
+import React from "react";
+import { Trash2 } from "lucide-react";
+import { CPSelect, CPText } from "@/components/v2/config-panels/_shared/cp";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+import { ColumnPicker } from "./ColumnPicker";
+import type { DbColumnOption } from "@/lib/registry/components/common/useDbColumns";
+
+// 추가 시 fade-in keyframe (한 번만 inject)
+const FILTER_ROW_KEYFRAMES = `
+@keyframes filter-row-fade-in {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}`;
+
+function useFilterRowKeyframesOnce() {
+  React.useEffect(() => {
+    const id = "filter-row-keyframes";
+    if (typeof document === "undefined" || document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = FILTER_ROW_KEYFRAMES;
+    document.head.appendChild(style);
+  }, []);
+}
+
+/**
+ * 공용 FilterRow — Phase G.4 / G.5: 자연어 카드 형식으로 재설계.
+ *
+ *  ┌──────────────────────────────────────────── 🗑 ─┐
+ *  │ 컬럼 [상태 (status) ▾]                          │
+ *  │ 조건 [= ▾]   값 종류 [고정값 ▾]                 │
+ *  │ 값   [재직                                ]   │
+ *  └──────────────────────────────────────────────┘
+ *
+ * 각 row 가 CPSelect / CPText 로 cp 톤 일관. wrap 으로 좁아도 깔끔.
+ * 사용처: stats / chart / cardList / groupedTable 의 OptionFilter 빌더.
+ */
+
+const FILTER_OP_LABELS: Array<{ value: OptionFilter["operator"]; label: string }> = [
+  { value: "=", label: "같음 (=)" },
+  { value: "!=", label: "같지 않음 (≠)" },
+  { value: ">", label: "크다 (>)" },
+  { value: "<", label: "작다 (<)" },
+  { value: ">=", label: "크거나 같다 (≥)" },
+  { value: "<=", label: "작거나 같다 (≤)" },
+  { value: "like", label: "포함 (LIKE)" },
+  { value: "in", label: "여러 값 중 하나 (IN)" },
+  { value: "notIn", label: "여러 값 제외 (NOT IN)" },
+  { value: "isNull", label: "값이 없음 (NULL)" },
+  { value: "isNotNull", label: "값이 있음 (NOT NULL)" },
+];
+
+const VALUE_TYPE_LABELS: Array<{ value: NonNullable<OptionFilter["value_type"]>; label: string }> = [
+  { value: "static", label: "고정값" },
+  { value: "field", label: "폼 필드" },
+  { value: "user", label: "사용자 컨텍스트" },
+];
+
+const USER_FIELD_LABELS: Array<{ value: NonNullable<OptionFilter["user_field"]>; label: string }> = [
+  { value: "companyCode", label: "회사 코드" },
+  { value: "userId", label: "사용자 ID" },
+  { value: "deptCode", label: "부서 코드" },
+  { value: "userName", label: "사용자명" },
+];
+
+export interface FilterRowProps {
+  filter: OptionFilter;
+  onChange: (p: Partial<OptionFilter>) => void;
+  onRemove: () => void;
+  /** 테이블 이름 — 있으면 컬럼 select 자동 채움 */
+  tableName?: string;
+  /** 외부에서 미리 받은 컬럼 (tableName 없을 때 fallback) */
+  columnOptions?: DbColumnOption[];
+}
+
+export const OptionFilterRow: React.FC<FilterRowProps> = ({
+  filter,
+  onChange,
+  onRemove,
+  tableName,
+  columnOptions,
+}) => {
+  useFilterRowKeyframesOnce();
+  const valueType = filter.value_type ?? "static";
+  const op = filter.operator ?? "=";
+  const hideValue = op === "isNull" || op === "isNotNull";
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        border: "1px solid var(--cp-border-subtle)",
+        borderRadius: 5,
+        background: "var(--cp-bg-subtle)",
+        padding: "8px 10px 8px 10px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        animation: "filter-row-fade-in .18s ease-out",
+      }}
+    >
+      {/* 삭제 버튼 — 우측 상단 */}
+      <button
+        type="button"
+        onClick={onRemove}
+        title="필터 삭제"
+        style={{
+          position: "absolute",
+          top: 6,
+          right: 6,
+          width: 20,
+          height: 20,
+          padding: 0,
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: "var(--cp-text-muted)",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 4,
+          transition: "color .15s ease, background-color .15s ease",
+        }}
+        onMouseEnter={(e) => {
+          const b = e.currentTarget as HTMLButtonElement;
+          b.style.color = "hsl(var(--destructive))";
+          b.style.background = "hsl(var(--destructive) / 0.10)";
+        }}
+        onMouseLeave={(e) => {
+          const b = e.currentTarget as HTMLButtonElement;
+          b.style.color = "var(--cp-text-muted)";
+          b.style.background = "transparent";
+        }}
+      >
+        <Trash2 size={12} />
+      </button>
+
+      {/* row 1: 컬럼 */}
+      <FieldRow label="컬럼">
+        <ColumnPicker
+          tableName={tableName}
+          columnOptions={columnOptions}
+          value={filter.column}
+          onChange={(v) => onChange({ column: v ?? "" })}
+          placeholder="컬럼 선택…"
+        />
+      </FieldRow>
+
+      {/* row 2: 조건 + (필요시) 값 종류 */}
+      <FieldRow label="조건">
+        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+          <div style={{ flex: "1 1 140px", minWidth: 120 }}>
+            <CPSelect
+              value={op}
+              onChange={(v) => onChange({ operator: v as OptionFilter["operator"] })}
+            >
+              {FILTER_OP_LABELS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </CPSelect>
+          </div>
+          {!hideValue && (
+            <div style={{ flex: "1 1 120px", minWidth: 100 }}>
+              <CPSelect
+                value={valueType}
+                onChange={(v) =>
+                  onChange({
+                    value_type: v as OptionFilter["value_type"],
+                    value: v === "static" ? filter.value : undefined,
+                    field_ref: v === "field" ? filter.field_ref : undefined,
+                    user_field: v === "user" ? filter.user_field : undefined,
+                  })
+                }
+              >
+                {VALUE_TYPE_LABELS.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+              </CPSelect>
+            </div>
+          )}
+        </div>
+      </FieldRow>
+
+      {/* row 3: 값 (hideValue 면 안 보임) */}
+      {!hideValue && (
+        <FieldRow label="값">
+          {valueType === "static" ? (
+            <CPText
+              value={(filter.value as string | undefined) ?? ""}
+              onChange={(v) => onChange({ value: v })}
+              placeholder={
+                op === "in" || op === "notIn"
+                  ? "쉼표로 구분 — 예: 재직, 휴직, 퇴사"
+                  : "고정값 입력 — 예: 재직"
+              }
+            />
+          ) : valueType === "field" ? (
+            <CPText
+              value={filter.field_ref ?? ""}
+              onChange={(v) => onChange({ field_ref: v })}
+              placeholder="폼 필드명 — 화면의 어떤 입력값을 따라갈지"
+            />
+          ) : (
+            <CPSelect
+              value={filter.user_field ?? "companyCode"}
+              onChange={(v) => onChange({ user_field: v as OptionFilter["user_field"] })}
+            >
+              {USER_FIELD_LABELS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </CPSelect>
+          )}
+        </FieldRow>
+      )}
+    </div>
+  );
+};
+
+// ───────────────────────────────────────────────────────
+// FieldRow — 라벨 + 값 한 줄 (cp Row 톤, label 폭 고정)
+// ───────────────────────────────────────────────────────
+function FieldRow({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "40px minmax(0, 1fr)",
+        alignItems: "center",
+        columnGap: 8,
+        minWidth: 0,
+      }}
+    >
+      <span
+        style={{
+          fontSize: 10.5,
+          fontWeight: 700,
+          color: "var(--cp-text-sec)",
+          letterSpacing: "-0.005em",
+        }}
+      >
+        {label}
+      </span>
+      <div style={{ minWidth: 0 }}>{children}</div>
+    </div>
+  );
+}
diff --git a/frontend/lib/registry/components/_shared/use-table-rows.ts b/frontend/lib/registry/components/_shared/use-table-rows.ts
new file mode 100644
index 00000000..83987a7a
--- /dev/null
+++ b/frontend/lib/registry/components/_shared/use-table-rows.ts
@@ -0,0 +1,211 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  selectTableRows,
+  type SelectRowsOrderBy,
+  type SelectRowsResponse,
+} from "@/lib/api/stats";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+
+/**
+ * useTableRows — Phase G.3.1 view 컴포넌트 (card-list / grouped-table) 공통 fetch hook.
+ *
+ *   - 디자인 모드: API 호출 0. preview row 반환
+ *   - dataSource.tableName 없으면 preview
+ *   - request key 캐시
+ *   - version counter race guard
+ *   - 카드/탭 단위 error 격리
+ *   - `OptionFilter.value_type` 의 field / user 는 formData / userContext 로 치환
+ */
+
+export interface TableRowsDataSource {
+  tableName?: string;
+  columns?: string[];
+  filters?: OptionFilter[];
+  orderBy?: SelectRowsOrderBy[];
+  limit?: number;
+}
+
+export interface UseTableRowsOptions {
+  isDesignMode?: boolean;
+  formData?: Record<string, unknown>;
+  userContext?: {
+    companyCode?: string;
+    userId?: string;
+    deptCode?: string;
+    userName?: string;
+  };
+  refreshKey?: number | string;
+  /** preview 모드의 가짜 row 개수 (기본 4) */
+  previewCount?: number;
+  /** preview row 생성기 — 컴포넌트별 맞춤 가능 */
+  previewBuilder?: (index: number) => Record<string, any>;
+}
+
+export interface TableRowsState {
+  rows: Record<string, any>[];
+  loading: boolean;
+  error?: string;
+  /** dataSource 미완성으로 preview 만 보여주는 중인지 */
+  isPreview: boolean;
+}
+
+function defaultPreview(count: number): Record<string, any>[] {
+  const out: Record<string, any>[] = [];
+  for (let i = 0; i < count; i++) {
+    out.push({
+      __preview: true,
+      __index: i,
+      title: `샘플 ${i + 1}`,
+      subtitle: `미리보기 항목 ${i + 1}`,
+      value: (i + 1) * 7,
+    });
+  }
+  return out;
+}
+
+function resolveFilters(
+  filters: OptionFilter[] | undefined,
+  formData: Record<string, unknown> | undefined,
+  userContext: UseTableRowsOptions["userContext"],
+): { resolved: Array<{ column: string; operator: string; value?: unknown }>; ok: boolean } {
+  if (!filters || filters.length === 0) return { resolved: [], ok: true };
+  const out: Array<{ column: string; operator: string; value?: unknown }> = [];
+  for (const f of filters) {
+    if (!f || !f.column) continue;
+    const op = f.operator ?? "=";
+    if (op === "isNull" || op === "isNotNull") {
+      out.push({ column: f.column, operator: op });
+      continue;
+    }
+    let value: unknown = f.value;
+    const valueType = f.value_type ?? "static";
+    if (valueType === "field") {
+      const ref = f.field_ref;
+      if (!ref) return { resolved: [], ok: false };
+      value = formData?.[ref];
+      if (value === undefined) return { resolved: [], ok: false };
+    } else if (valueType === "user") {
+      const uf = f.user_field;
+      if (!uf) return { resolved: [], ok: false };
+      value = userContext?.[uf];
+      if (value === undefined || value === "") return { resolved: [], ok: false };
+    }
+    if (value === undefined || value === null) continue;
+    out.push({ column: f.column, operator: op, value });
+  }
+  return { resolved: out, ok: true };
+}
+
+function buildRequestKey(
+  ds: TableRowsDataSource,
+  filters: Array<{ column: string; operator: string; value?: unknown }>,
+): string {
+  return JSON.stringify({
+    t: ds.tableName,
+    c: ds.columns ?? null,
+    o: ds.orderBy ?? null,
+    l: ds.limit ?? 50,
+    f: filters,
+  });
+}
+
+function isReady(ds: TableRowsDataSource | undefined): boolean {
+  return !!(ds && ds.tableName);
+}
+
+export function useTableRows(
+  dataSource: TableRowsDataSource | undefined,
+  opts: UseTableRowsOptions = {},
+): TableRowsState {
+  const { isDesignMode, formData, userContext, refreshKey, previewCount, previewBuilder } = opts;
+
+  const previewRows = useMemo<Record<string, any>[]>(() => {
+    const n = Math.max(2, Math.min(12, previewCount ?? 4));
+    if (previewBuilder) {
+      const out: Record<string, any>[] = [];
+      for (let i = 0; i < n; i++) out.push(previewBuilder(i));
+      return out;
+    }
+    return defaultPreview(n);
+  }, [previewCount, previewBuilder]);
+
+  const [state, setState] = useState<TableRowsState>({
+    rows: previewRows,
+    loading: false,
+    isPreview: true,
+  });
+
+  const plan = useMemo(() => {
+    if (!isReady(dataSource)) return { skip: true as const };
+    const { resolved, ok } = resolveFilters(dataSource!.filters, formData, userContext);
+    if (!ok) return { skip: true as const, pending: true as const };
+    const reqKey = buildRequestKey(dataSource!, resolved);
+    return {
+      skip: false as const,
+      reqKey,
+      req: {
+        tableName: dataSource!.tableName!,
+        columns: dataSource!.columns,
+        filters: resolved,
+        orderBy: dataSource!.orderBy,
+        limit: dataSource!.limit ?? 50,
+      },
+    };
+  }, [dataSource, formData, userContext]);
+
+  const cacheRef = useRef<Map<string, Record<string, any>[]>>(new Map());
+  const versionRef = useRef(0);
+
+  useEffect(() => {
+    if (isDesignMode) {
+      cacheRef.current.clear();
+      setState({ rows: previewRows, loading: false, isPreview: true });
+      return;
+    }
+    if (plan.skip) {
+      setState({ rows: previewRows, loading: false, isPreview: true });
+      return;
+    }
+
+    versionRef.current += 1;
+    const myVersion = versionRef.current;
+    let cancelled = false;
+
+    if (refreshKey !== undefined) cacheRef.current.clear();
+
+    const cached = cacheRef.current.get(plan.reqKey!);
+    if (cached !== undefined && refreshKey === undefined) {
+      setState({ rows: cached, loading: false, isPreview: false });
+      return;
+    }
+
+    setState((prev) => ({ ...prev, loading: true, error: undefined }));
+
+    (async () => {
+      try {
+        const res: SelectRowsResponse = await selectTableRows(plan.req!.tableName, {
+          columns: plan.req!.columns,
+          filters: plan.req!.filters as any,
+          orderBy: plan.req!.orderBy,
+          limit: plan.req!.limit,
+        });
+        if (cancelled || versionRef.current !== myVersion) return;
+        cacheRef.current.set(plan.reqKey!, res.rows);
+        setState({ rows: res.rows, loading: false, isPreview: false });
+      } catch (err: any) {
+        if (cancelled || versionRef.current !== myVersion) return;
+        const msg = err?.response?.data?.message || err?.message || "데이터 로드 실패";
+        setState({ rows: [], loading: false, isPreview: false, error: String(msg) });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plan, isDesignMode, refreshKey, previewRows]);
+
+  return state;
+}
diff --git a/frontend/lib/registry/components/card-list/CardListComponent.tsx b/frontend/lib/registry/components/card-list/CardListComponent.tsx
new file mode 100644
index 00000000..ef5b2f30
--- /dev/null
+++ b/frontend/lib/registry/components/card-list/CardListComponent.tsx
@@ -0,0 +1,346 @@
+"use client";
+
+import React from "react";
+import type { ComponentRendererProps } from "@/types/component";
+import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { useTableRows } from "../_shared/use-table-rows";
+import type { CardListConfig, CardListLayout, CardListMetric } from "./types";
+
+/**
+ * CardList — canonical 카드 리스트 컴포넌트 (Phase G.3.1)
+ *
+ * 테이블 row 들을 반복 카드로 출력. titleField / subtitleFields / metricFields 를
+ * 자유 조합. 디자인 모드 / dataSource 미완성: 정적 preview 4 장.
+ */
+
+const VALID_LAYOUTS: CardListLayout[] = ["list", "grid"];
+
+export interface CardListComponentProps extends ComponentRendererProps {
+  config?: CardListConfig;
+}
+
+const cellToText = (v: unknown): string => {
+  if (v === null || v === undefined || v === "") return "—";
+  if (typeof v === "number") return v.toLocaleString();
+  if (typeof v === "boolean") return v ? "✓" : "✗";
+  if (v instanceof Date) return v.toLocaleString();
+  return String(v);
+};
+
+export const CardListComponent: React.FC<CardListComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  config,
+  className,
+  style,
+  ...props
+}) => {
+  const p = props as any;
+  const fromProps: Partial<CardListConfig> = {};
+  if (typeof p.title === "string") fromProps.title = p.title;
+  if (typeof p.layout === "string" && (VALID_LAYOUTS as string[]).includes(p.layout))
+    fromProps.layout = p.layout as CardListLayout;
+  if (typeof p.columns === "number") fromProps.columns = p.columns;
+  if (p.dataSource && typeof p.dataSource === "object") fromProps.dataSource = p.dataSource;
+  if (typeof p.titleField === "string") fromProps.titleField = p.titleField;
+  if (Array.isArray(p.subtitleFields)) fromProps.subtitleFields = p.subtitleFields;
+  if (Array.isArray(p.metricFields)) fromProps.metricFields = p.metricFields;
+  if (typeof p.emptyText === "string") fromProps.emptyText = p.emptyText;
+
+  const componentConfig = {
+    ...config,
+    ...((component as any).config ?? {}),
+    ...((component as any).componentConfig ?? {}),
+    ...fromProps,
+  } as CardListConfig;
+
+  const layout: CardListLayout = (VALID_LAYOUTS as string[]).includes(
+    componentConfig.layout as string,
+  )
+    ? (componentConfig.layout as CardListLayout)
+    : "list";
+  const columns = componentConfig.columns;
+  const title = componentConfig.title;
+  const titleField = componentConfig.titleField;
+  const subtitleFields = componentConfig.subtitleFields ?? [];
+  const metricFields: CardListMetric[] = componentConfig.metricFields ?? [];
+  const emptyText = componentConfig.emptyText ?? "데이터 없음";
+  const previewTitleField = titleField ?? "title";
+  const previewSubtitleField = subtitleFields[0];
+  const previewMetricField = metricFields[0]?.column;
+
+  const userContext = React.useMemo(
+    () => ({
+      companyCode: (p.companyCode as string) || undefined,
+      userId: (p.userId as string) || undefined,
+      deptCode: (p.deptCode as string) || undefined,
+      userName: (p.userName as string) || undefined,
+    }),
+    [p.companyCode, p.userId, p.deptCode, p.userName],
+  );
+
+  const previewBuilder = React.useCallback(
+    (i: number) => ({
+      __preview: true,
+      [previewTitleField]: `샘플 카드 ${i + 1}`,
+      ...(previewSubtitleField ? { [previewSubtitleField]: `부제 ${i + 1}` } : {}),
+      ...(previewMetricField
+        ? { [previewMetricField]: (i + 1) * 7 }
+        : { count: (i + 1) * 7 }),
+    }),
+    [previewMetricField, previewSubtitleField, previewTitleField],
+  );
+
+  const { rows, loading, error, isPreview } = useTableRows(componentConfig.dataSource, {
+    isDesignMode,
+    formData: (p.formData as Record<string, unknown>) || undefined,
+    userContext,
+    refreshKey: (p.refreshKey as number | string | undefined) || undefined,
+    previewCount: 4,
+    previewBuilder,
+  });
+
+  const containerStyle: React.CSSProperties = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    background: "hsl(var(--card))",
+    border: "1px solid hsl(var(--border))",
+    borderRadius: 8,
+    padding: 12,
+    minHeight: 160,
+    ...((component as any).style ?? {}),
+    ...style,
+  };
+
+  if (isDesignMode && isSelected) {
+    containerStyle.outline = "2px solid hsl(var(--primary))";
+    containerStyle.outlineOffset = "2px";
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  const {
+    selectedScreen: _1, onZoneComponentDrop: _2, onZoneClick: _3,
+    componentConfig: _4, component: _5, isSelected: _6,
+    onClick: _7, onDragStart: _8, onDragEnd: _9,
+    size: _10, position: _11, style: _12,
+    screenId: _13, tableName: _14, onRefresh: _15, onClose: _16,
+    web_type: _17, autoGeneration: _18, isInteractive: _19,
+    formData: _20, onFormDataChange: _21,
+    menuId: _22, menuObjid: _23, onSave: _24,
+    userId: _25, userName: _26, companyCode: _27, deptCode: _27b,
+    isInModal: _28, readonly: _29, originalData: _30,
+    selectedRows: _36, selectedRowsData: _37, onSelectedRowsChange: _38,
+    sortBy: _39, sortOrder: _40, tableDisplayData: _41,
+    flowSelectedData: _42, flowSelectedStepId: _43, onFlowSelectedDataChange: _44,
+    onConfigChange: _45, refreshKey: _46, flowRefreshKey: _47, onFlowRefresh: _48,
+    isPreview: _49, groupedData: _50,
+    title: _51, layout: _52, columns: _53, dataSource: _54,
+    titleField: _55, subtitleFields: _56, metricFields: _57, emptyText: _58,
+    disabled: _59, required: _60,
+    ...domProps
+  } = props as any;
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  const listContainerStyle: React.CSSProperties =
+    layout === "grid"
+      ? {
+          display: "grid",
+          gap: 8,
+          gridTemplateColumns: columns
+            ? `repeat(auto-fit, minmax(max(200px, calc((100% - ${
+                (columns - 1) * 8
+              }px) / ${columns})), 1fr))`
+            : "repeat(auto-fit, minmax(200px, 1fr))",
+          flex: 1,
+          minHeight: 0,
+          overflow: "auto",
+        }
+      : {
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+          flex: 1,
+          minHeight: 0,
+          overflow: "auto",
+        };
+
+  const renderCard = (row: Record<string, any>, idx: number) => {
+    const titleText = titleField ? cellToText(row[titleField]) : `행 ${idx + 1}`;
+    return (
+      <div
+        key={idx}
+        style={{
+          padding: "8px 10px",
+          border: "1px solid hsl(var(--border))",
+          borderRadius: 6,
+          background: "hsl(var(--card))",
+          display: "flex",
+          flexDirection: layout === "grid" ? "column" : "row",
+          alignItems: layout === "grid" ? "stretch" : "center",
+          gap: 8,
+          minWidth: 0,
+        }}
+      >
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: 13,
+              fontWeight: 700,
+              color: "hsl(var(--foreground))",
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {titleText}
+          </div>
+          {subtitleFields.map((col, sIdx) => (
+            <div
+              key={sIdx}
+              style={{
+                fontSize: 11,
+                color: "hsl(var(--muted-foreground))",
+                marginTop: 2,
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}
+            >
+              {cellToText(row[col])}
+            </div>
+          ))}
+        </div>
+        {metricFields.length > 0 && (
+          <div
+            style={{
+              display: "flex",
+              gap: 6,
+              flexShrink: 0,
+              flexWrap: "wrap",
+              justifyContent: layout === "grid" ? "flex-start" : "flex-end",
+            }}
+          >
+            {metricFields.map((m, mIdx) => {
+              const v = cellToText(row[m.column]);
+              return (
+                <div
+                  key={mIdx}
+                  style={{
+                    display: "inline-flex",
+                    flexDirection: "column",
+                    alignItems: "flex-end",
+                    padding: "3px 8px",
+                    borderRadius: 4,
+                    background: m.emphasis
+                      ? "rgba(var(--v5-primary-rgb), 0.12)"
+                      : "hsl(var(--muted))",
+                    border: "1px solid hsl(var(--border))",
+                  }}
+                >
+                  {m.label && (
+                    <span
+                      style={{ fontSize: 9, color: "hsl(var(--muted-foreground))" }}
+                    >
+                      {m.label}
+                    </span>
+                  )}
+                  <span
+                    style={{
+                      fontSize: 12,
+                      fontWeight: 700,
+                      color: m.emphasis
+                        ? "var(--v5-primary, hsl(var(--primary)))"
+                        : "hsl(var(--foreground))",
+                    }}
+                  >
+                    {v}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div
+      style={containerStyle}
+      className={className}
+      onClick={handleClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      {...filterDOMProps(domProps)}
+    >
+      {(title || isPreview || loading) && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: 12,
+            fontWeight: 700,
+            color: "hsl(var(--foreground))",
+            marginBottom: 6,
+            flexShrink: 0,
+          }}
+        >
+          <span>{title || (isPreview ? "카드 리스트 (미리보기)" : "")}</span>
+          {loading && (
+            <span style={{ fontSize: 10, color: "hsl(var(--muted-foreground))", fontWeight: 500 }}>
+              로딩…
+            </span>
+          )}
+        </div>
+      )}
+      <div style={listContainerStyle}>
+        {error ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flex: 1,
+              fontSize: 12,
+              color: "hsl(var(--muted-foreground))",
+            }}
+          >
+            데이터 로드 실패: {error}
+          </div>
+        ) : rows.length === 0 ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flex: 1,
+              fontSize: 12,
+              color: "hsl(var(--muted-foreground))",
+            }}
+          >
+            {emptyText}
+          </div>
+        ) : (
+          rows.map((row, idx) => renderCard(row, idx))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const CardListWrapper: React.FC<CardListComponentProps> = (props) => {
+  return <CardListComponent {...props} />;
+};
diff --git a/frontend/lib/registry/components/card-list/CardListRenderer.tsx b/frontend/lib/registry/components/card-list/CardListRenderer.tsx
new file mode 100644
index 00000000..7a94cb5f
--- /dev/null
+++ b/frontend/lib/registry/components/card-list/CardListRenderer.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { CardListDefinition } from "./index";
+import { CardListComponent } from "./CardListComponent";
+
+/**
+ * CardList 렌더러 (Phase G.3.1) — id "card-list" 자가 등록.
+ */
+export class CardListRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = CardListDefinition;
+
+  render(): React.ReactElement {
+    return <CardListComponent {...this.props} renderer={this} />;
+  }
+}
+
+CardListRenderer.registerSelf();
+
+if (process.env.NODE_ENV === "development") {
+  CardListRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/card-list/InvCardListConfigPanel.tsx b/frontend/lib/registry/components/card-list/InvCardListConfigPanel.tsx
new file mode 100644
index 00000000..d394efae
--- /dev/null
+++ b/frontend/lib/registry/components/card-list/InvCardListConfigPanel.tsx
@@ -0,0 +1,472 @@
+"use client";
+
+/**
+ * InvCardListConfigPanel — canonical card-list 설정 패널 (Phase G.3.1, cp 톤)
+ *
+ * 흐름:
+ *   ① 기본 — 제목 + 레이아웃 (list / grid)
+ *   ② 데이터 소스 — 테이블 + 정렬 컬럼 + limit
+ *   ③ 필드 매핑 — title / subtitles / metrics
+ *   ④ 필터 — OptionFilter 빌더
+ */
+
+import React from "react";
+import { Plus, Trash2 } from "lucide-react";
+import {
+  CPSection,
+  CPRow,
+  CPText,
+  CPSelect,
+  CPSegment,
+  CPNumber,
+  CPSwitch,
+  Hint,
+} from "@/components/v2/config-panels/_shared/cp";
+import { useDbTables } from "../common/useDbTables";
+import { OptionFilterRow } from "../_shared/FilterRow";
+import type { OptionFilter } from "../input/use-option-loader";
+import type {
+  CardListConfig,
+  CardListDataSource,
+  CardListLayout,
+  CardListMetric,
+} from "./types";
+
+export interface InvCardListConfigPanelProps {
+  config?: CardListConfig;
+  onChange?: (config: CardListConfig) => void;
+  selectedComponent?: { id: string; config?: CardListConfig; [k: string]: any };
+}
+
+export const InvCardListConfigPanel: React.FC<InvCardListConfigPanelProps> = ({
+  config,
+  onChange,
+  selectedComponent,
+}) => {
+  const current: CardListConfig =
+    (config as CardListConfig) || (selectedComponent?.config as CardListConfig) || {};
+  const patch = (p: Partial<CardListConfig>) => onChange?.({ ...current, ...p });
+
+  const ds = current.dataSource ?? {};
+  const patchDataSource = (p: Partial<CardListDataSource>) => {
+    const next = { ...ds, ...p };
+    if (
+      !next.tableName &&
+      (!next.filters || next.filters.length === 0) &&
+      (!next.orderBy || next.orderBy.length === 0)
+    ) {
+      patch({ dataSource: undefined });
+    } else {
+      patch({ dataSource: next });
+    }
+  };
+
+  const filters = ds.filters ?? [];
+  const subtitles = current.subtitleFields ?? [];
+  const metrics: CardListMetric[] = current.metricFields ?? [];
+
+  const updateFilter = (idx: number, f: Partial<OptionFilter>) => {
+    const next = filters.map((it, i) => (i === idx ? { ...it, ...f } : it));
+    patchDataSource({ filters: next });
+  };
+  const addFilter = () =>
+    patchDataSource({
+      filters: [...filters, { column: "", operator: "=", value_type: "static", value: "" } as OptionFilter],
+    });
+  const removeFilter = (idx: number) =>
+    patchDataSource({ filters: filters.filter((_, i) => i !== idx).length === 0 ? undefined : filters.filter((_, i) => i !== idx) });
+
+  const updateSubtitle = (idx: number, v: string) => {
+    const next = subtitles.map((it, i) => (i === idx ? v : it));
+    patch({ subtitleFields: next });
+  };
+  const addSubtitle = () => patch({ subtitleFields: [...subtitles, ""] });
+  const removeSubtitle = (idx: number) =>
+    patch({
+      subtitleFields: subtitles.filter((_, i) => i !== idx).length === 0
+        ? undefined
+        : subtitles.filter((_, i) => i !== idx),
+    });
+
+  const updateMetric = (idx: number, m: Partial<CardListMetric>) => {
+    const next = metrics.map((it, i) => (i === idx ? { ...it, ...m } : it));
+    patch({ metricFields: next });
+  };
+  const addMetric = () => patch({ metricFields: [...metrics, { column: "" }] });
+  const removeMetric = (idx: number) => {
+    const next = metrics.filter((_, i) => i !== idx);
+    patch({ metricFields: next.length === 0 ? undefined : next });
+  };
+
+  const orderByCol = ds.orderBy?.[0]?.column || "";
+  const orderByDir = ds.orderBy?.[0]?.direction || "desc";
+
+  const { options: tableOptions } = useDbTables();
+
+  return (
+    <div style={{ fontFamily: "var(--v5-font-sans)", color: "var(--cp-text)", padding: "0 12px" }}>
+      {/* ── ① 기본 ─────────────────────────── */}
+      <CPSection title="① 기본">
+        <CPRow label="제목" help="비우면 제목 영역 숨김">
+          <CPText
+            value={current.title || ""}
+            onChange={(v) => patch({ title: v || undefined })}
+            placeholder="부서별 카드"
+          />
+        </CPRow>
+        <CPRow label="레이아웃">
+          <CPSegment
+            value={current.layout || "list"}
+            onChange={(v) => patch({ layout: v as CardListLayout })}
+            options={[
+              { value: "list", label: "리스트" },
+              { value: "grid", label: "그리드" },
+            ]}
+          />
+        </CPRow>
+        {(current.layout ?? "list") === "grid" && (
+          <CPRow label="그리드 컬럼" help="비우면 auto-fit. 1 ~ 6 권장">
+            <CPNumber
+              value={current.columns ?? undefined}
+              onChange={(v) => patch({ columns: v ?? undefined })}
+              min={1}
+              max={8}
+              placeholder="auto"
+            />
+          </CPRow>
+        )}
+        <CPRow label="빈 결과 문구">
+          <CPText
+            value={current.emptyText || ""}
+            onChange={(v) => patch({ emptyText: v || undefined })}
+            placeholder="데이터 없음"
+          />
+        </CPRow>
+      </CPSection>
+
+      {/* ── ② 데이터 소스 ─────────────────────────── */}
+      <CPSection title="② 데이터 소스">
+        <CPRow label="테이블">
+          <CPSelect
+            value={ds.tableName || ""}
+            onChange={(v) => patchDataSource({ tableName: v || undefined })}
+          >
+            <option value="">선택...</option>
+            {tableOptions.map((t) => (
+              <option key={t.value} value={t.value}>
+                {t.label}
+              </option>
+            ))}
+          </CPSelect>
+        </CPRow>
+        <CPRow label="정렬 컬럼" help="비우면 created_date desc (있을 때) 또는 PK 순">
+          <CPText
+            value={orderByCol}
+            onChange={(v) =>
+              patchDataSource({
+                orderBy: v
+                  ? [{ column: v, direction: orderByDir as "asc" | "desc" }]
+                  : undefined,
+              })
+            }
+            placeholder="created_date"
+          />
+        </CPRow>
+        {orderByCol && (
+          <CPRow label="정렬 방향">
+            <CPSegment
+              value={orderByDir}
+              onChange={(v) =>
+                patchDataSource({
+                  orderBy: [{ column: orderByCol, direction: v as "asc" | "desc" }],
+                })
+              }
+              options={[
+                { value: "desc", label: "내림차순" },
+                { value: "asc", label: "오름차순" },
+              ]}
+            />
+          </CPRow>
+        )}
+        <CPRow label="최대 행 수" help="1 ~ 500. 기본 50">
+          <CPNumber
+            value={ds.limit ?? 50}
+            onChange={(v) => patchDataSource({ limit: v ?? 50 })}
+            min={1}
+            max={500}
+          />
+        </CPRow>
+      </CPSection>
+
+      {/* ── ③ 필드 매핑 ─────────────────────────── */}
+      <CPSection title="③ 필드 매핑" desc="카드 한 장에 보일 컬럼들">
+        <CPRow label="제목 컬럼">
+          <CPText
+            value={current.titleField || ""}
+            onChange={(v) => patch({ titleField: v || undefined })}
+            placeholder="dept_name"
+          />
+        </CPRow>
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginTop: 6,
+          }}
+        >
+          <span style={{ fontSize: 10.5, color: "var(--cp-text-sec)", fontWeight: 700 }}>
+            부제 컬럼 {subtitles.length > 0 && `(${subtitles.length})`}
+          </span>
+          <button
+            type="button"
+            onClick={addSubtitle}
+            style={{
+              padding: "2px 6px",
+              fontSize: 10,
+              background: "var(--cp-bg-subtle)",
+              border: "1px solid var(--cp-border)",
+              borderRadius: 3,
+              cursor: "pointer",
+              color: "var(--cp-text)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 3,
+            }}
+          >
+            <Plus size={9} /> 추가
+          </button>
+        </div>
+        {subtitles.length === 0 ? (
+          <Hint>부제 없음</Hint>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 4 }}>
+            {subtitles.map((col, idx) => (
+              <SubtitleRow
+                key={idx}
+                value={col}
+                onChange={(v) => updateSubtitle(idx, v)}
+                onRemove={() => removeSubtitle(idx)}
+              />
+            ))}
+          </div>
+        )}
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginTop: 10,
+          }}
+        >
+          <span style={{ fontSize: 10.5, color: "var(--cp-text-sec)", fontWeight: 700 }}>
+            metric 칩 {metrics.length > 0 && `(${metrics.length})`}
+          </span>
+          <button
+            type="button"
+            onClick={addMetric}
+            style={{
+              padding: "2px 6px",
+              fontSize: 10,
+              background: "var(--cp-bg-subtle)",
+              border: "1px solid var(--cp-border)",
+              borderRadius: 3,
+              cursor: "pointer",
+              color: "var(--cp-text)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 3,
+            }}
+          >
+            <Plus size={9} /> 추가
+          </button>
+        </div>
+        {metrics.length === 0 ? (
+          <Hint>metric 칩 없음 — 카드 우측/하단 숫자 강조 영역 빈 상태</Hint>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 4 }}>
+            {metrics.map((m, idx) => (
+              <MetricRow
+                key={idx}
+                metric={m}
+                onChange={(p) => updateMetric(idx, p)}
+                onRemove={() => removeMetric(idx)}
+              />
+            ))}
+          </div>
+        )}
+      </CPSection>
+
+      {/* ── ④ 필터 ─────────────────────────── */}
+      <CPSection title={`④ 필터 ${filters.length > 0 ? `(${filters.length})` : ""}`}>
+        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 5 }}>
+          <button
+            type="button"
+            onClick={addFilter}
+            style={{
+              padding: "3px 8px",
+              fontSize: 10.5,
+              background: "var(--cp-bg-subtle)",
+              border: "1px solid var(--cp-border)",
+              borderRadius: 4,
+              cursor: "pointer",
+              color: "var(--cp-text)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 3,
+            }}
+          >
+            <Plus size={10} /> 추가
+          </button>
+        </div>
+        {filters.length === 0 ? (
+          <Hint>필터 없음 — 테이블 전체 row</Hint>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            {filters.map((f, idx) => (
+              <OptionFilterRow
+                key={idx}
+                filter={f}
+                onChange={(p) => updateFilter(idx, p)}
+                onRemove={() => removeFilter(idx)}
+                tableName={ds.tableName}
+              />
+            ))}
+          </div>
+        )}
+      </CPSection>
+    </div>
+  );
+};
+
+InvCardListConfigPanel.displayName = "InvCardListConfigPanel";
+
+function SubtitleRow({
+  value,
+  onChange,
+  onRemove,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+  onRemove: () => void;
+}) {
+  return (
+    <div style={{ display: "grid", gridTemplateColumns: "1fr 18px", gap: 4, alignItems: "center" }}>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="컬럼명"
+        style={{
+          height: 22,
+          padding: "0 6px",
+          fontSize: 11,
+          fontFamily: "var(--v5-font-sans)",
+          background: "var(--cp-surface)",
+          border: "1px solid var(--cp-border)",
+          borderRadius: 3,
+          color: "var(--cp-text)",
+          outline: "none",
+          minWidth: 0,
+        }}
+      />
+      <button
+        type="button"
+        onClick={onRemove}
+        style={{
+          width: 18,
+          height: 18,
+          padding: 0,
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: "var(--cp-text-muted)",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        aria-label="삭제"
+      >
+        <Trash2 size={11} />
+      </button>
+    </div>
+  );
+}
+
+function MetricRow({
+  metric,
+  onChange,
+  onRemove,
+}: {
+  metric: CardListMetric;
+  onChange: (p: Partial<CardListMetric>) => void;
+  onRemove: () => void;
+}) {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 60px 18px",
+        gap: 4,
+        alignItems: "center",
+      }}
+    >
+      <input
+        type="text"
+        value={metric.column}
+        onChange={(e) => onChange({ column: e.target.value })}
+        placeholder="컬럼명"
+        style={inputBase()}
+      />
+      <input
+        type="text"
+        value={metric.label || ""}
+        onChange={(e) => onChange({ label: e.target.value || undefined })}
+        placeholder="라벨"
+        style={inputBase()}
+      />
+      <span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}>
+        <CPSwitch value={!!metric.emphasis} onChange={(v) => onChange({ emphasis: v })} />
+        <span style={{ fontSize: 9, color: "var(--cp-text-muted)" }}>강조</span>
+      </span>
+      <button
+        type="button"
+        onClick={onRemove}
+        style={{
+          width: 18,
+          height: 18,
+          padding: 0,
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: "var(--cp-text-muted)",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        aria-label="metric 삭제"
+      >
+        <Trash2 size={11} />
+      </button>
+    </div>
+  );
+}
+
+function inputBase(): React.CSSProperties {
+  return {
+    height: 22,
+    padding: "0 6px",
+    fontSize: 11,
+    fontFamily: "var(--v5-font-sans)",
+    background: "var(--cp-surface)",
+    border: "1px solid var(--cp-border)",
+    borderRadius: 3,
+    color: "var(--cp-text)",
+    outline: "none",
+    minWidth: 0,
+  };
+}
+
+export default InvCardListConfigPanel;
diff --git a/frontend/lib/registry/components/card-list/index.ts b/frontend/lib/registry/components/card-list/index.ts
new file mode 100644
index 00000000..936b4beb
--- /dev/null
+++ b/frontend/lib/registry/components/card-list/index.ts
@@ -0,0 +1,44 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { CardListWrapper } from "./CardListComponent";
+import { InvCardListConfigPanel } from "./InvCardListConfigPanel";
+import type { CardListConfig } from "./types";
+
+/**
+ * CardList — canonical 카드 리스트 컴포넌트 (Phase G.3.1)
+ *
+ * 테이블 row 들을 카드 카탈로그처럼 반복 출력. titleField / subtitleFields /
+ * metricFields 조합으로 다양한 도메인 (부서별 카드 / 사용자 카드 / 품목 카드) 표현.
+ */
+
+const DEFAULT_CONFIG: Partial<CardListConfig> = {
+  layout: "list",
+};
+
+export const CardListDefinition = createComponentDefinition({
+  id: "card-list",
+  name: "카드 리스트",
+  name_eng: "Card List",
+  description: "테이블 row 들을 카드 카탈로그 형태로 반복 출력",
+  category: ComponentCategory.DISPLAY,
+  web_type: "text",
+  component: CardListWrapper,
+  default_config: DEFAULT_CONFIG as Record<string, any>,
+  default_size: { width: 360, height: 280 },
+  config_panel: InvCardListConfigPanel,
+  icon: "LayoutList",
+  tags: ["카드", "list", "card", "catalog", "view"],
+  version: "1.0.0",
+  author: "INVYONE",
+  documentation:
+    "notes/gbpark/2026-05-14-studio-data-view-roadmap.md#phase-g31-progress",
+  dataPorts: {
+    inputs: [{ name: "data", type: "rows" }],
+  },
+});
+
+export type { CardListConfig, CardListLayout, CardListMetric, CardListDataSource } from "./types";
+export { CardListComponent, CardListWrapper } from "./CardListComponent";
+export { InvCardListConfigPanel } from "./InvCardListConfigPanel";
diff --git a/frontend/lib/registry/components/card-list/types.ts b/frontend/lib/registry/components/card-list/types.ts
new file mode 100644
index 00000000..d937776d
--- /dev/null
+++ b/frontend/lib/registry/components/card-list/types.ts
@@ -0,0 +1,47 @@
+"use client";
+
+import type { ComponentConfig } from "@/types/component";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+import type { SelectRowsOrderBy } from "@/lib/api/stats";
+
+/**
+ * canonical card-list 설정 타입 (Phase G.3.1)
+ *
+ * 한 테이블에서 가져온 row 들을 카드 카탈로그처럼 반복 출력. 카드 한 장당
+ * `titleField` 가 위에, `subtitleFields` 가 아래 작은 글씨로, `metricFields` 는
+ * 우측 또는 하단에 숫자 / 라벨 칩으로 표시.
+ */
+
+export type CardListLayout = "list" | "grid";
+
+export interface CardListMetric {
+  /** 표시할 column 이름 */
+  column: string;
+  /** 카드 위 보일 라벨 (없으면 column 그대로) */
+  label?: string;
+  /** primary color glow 강조 (기본 false) */
+  emphasis?: boolean;
+}
+
+export interface CardListDataSource {
+  tableName?: string;
+  filters?: OptionFilter[];
+  orderBy?: SelectRowsOrderBy[];
+  limit?: number;
+}
+
+export interface CardListConfig extends ComponentConfig {
+  title?: string;
+  layout?: CardListLayout;
+  /** grid 모드일 때 한 줄 카드 수 (default auto-fit 200px). 명시하면 컬럼 상한 */
+  columns?: number;
+  dataSource?: CardListDataSource;
+  /** 카드 제목으로 쓸 컬럼 */
+  titleField?: string;
+  /** 카드 부제 컬럼들 — 위에서부터 라인별 표시 */
+  subtitleFields?: string[];
+  /** 카드 우측/하단의 metric 칩들 */
+  metricFields?: CardListMetric[];
+  /** 빈 결과일 때 표시 문구 (기본: "데이터 없음") */
+  emptyText?: string;
+}
diff --git a/frontend/lib/registry/components/chart/ChartComponent.tsx b/frontend/lib/registry/components/chart/ChartComponent.tsx
new file mode 100644
index 00000000..a4075a00
--- /dev/null
+++ b/frontend/lib/registry/components/chart/ChartComponent.tsx
@@ -0,0 +1,295 @@
+"use client";
+
+import React from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { ComponentRendererProps } from "@/types/component";
+import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { useChartData } from "./use-chart-data";
+import type { ChartConfig, ChartType } from "./types";
+
+/**
+ * Chart — canonical 차트 컴포넌트 (Phase G.3)
+ *
+ * `dataSource.tableName + groupBy + aggregation` 으로 `/aggregate-group` 호출,
+ * recharts 위에서 4종 차트 (bar / horizontalBar / line / donut) 렌더.
+ *
+ * 디자인 모드: API 호출 안 함. 정적 preview row 4 개로 모양만 보여줌.
+ * dataSource 미완성: 같은 preview 로 fallback.
+ * 운영 모드 fetch 실패: error message 표시.
+ */
+
+const VALID_TYPES: ChartType[] = ["bar", "horizontalBar", "line", "donut"];
+
+const DEFAULT_PALETTE = [
+  "#6c5ce7", // primary purple
+  "#00cec9", // cyan
+  "#fd79a8", // pink
+  "#fdcb6e", // amber
+  "#74b9ff", // soft blue
+  "#55efc4", // mint
+  "#a29bfe", // lavender
+  "#ffeaa7", // pale yellow
+];
+
+export interface ChartComponentProps extends ComponentRendererProps {
+  config?: ChartConfig;
+}
+
+export const ChartComponent: React.FC<ChartComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  config,
+  className,
+  style,
+  ...props
+}) => {
+  const p = props as any;
+  const fromProps: Partial<ChartConfig> = {};
+  if (typeof p.chartType === "string" && (VALID_TYPES as string[]).includes(p.chartType))
+    fromProps.chartType = p.chartType as ChartType;
+  if (typeof p.title === "string") fromProps.title = p.title;
+  if (p.dataSource && typeof p.dataSource === "object") fromProps.dataSource = p.dataSource;
+  if (typeof p.includeEmptyGroup === "boolean") fromProps.includeEmptyGroup = p.includeEmptyGroup;
+  if (typeof p.barColor === "string") fromProps.barColor = p.barColor;
+  if (Array.isArray(p.donutPalette)) fromProps.donutPalette = p.donutPalette;
+  if (typeof p.showAxis === "boolean") fromProps.showAxis = p.showAxis;
+  if (typeof p.showLegend === "boolean") fromProps.showLegend = p.showLegend;
+
+  const componentConfig = {
+    ...config,
+    ...((component as any).config ?? {}),
+    ...((component as any).componentConfig ?? {}),
+    ...fromProps,
+  } as ChartConfig;
+
+  const chartType: ChartType = (VALID_TYPES as string[]).includes(
+    componentConfig.chartType as string,
+  )
+    ? (componentConfig.chartType as ChartType)
+    : "bar";
+
+  const title = componentConfig.title;
+  const barColor = componentConfig.barColor || "#6c5ce7";
+  const donutPalette =
+    componentConfig.donutPalette && componentConfig.donutPalette.length > 0
+      ? componentConfig.donutPalette
+      : DEFAULT_PALETTE;
+  const showAxis = componentConfig.showAxis ?? true;
+  const showLegend = componentConfig.showLegend ?? true;
+
+  const userContext = React.useMemo(
+    () => ({
+      companyCode: (p.companyCode as string) || undefined,
+      userId: (p.userId as string) || undefined,
+      deptCode: (p.deptCode as string) || undefined,
+      userName: (p.userName as string) || undefined,
+    }),
+    [p.companyCode, p.userId, p.deptCode, p.userName],
+  );
+
+  const { rows, loading, error, isPreview } = useChartData(componentConfig.dataSource, {
+    isDesignMode,
+    formData: (p.formData as Record<string, unknown>) || undefined,
+    userContext,
+    refreshKey: (p.refreshKey as number | string | undefined) || undefined,
+    includeEmptyGroup: componentConfig.includeEmptyGroup,
+  });
+
+  const containerStyle: React.CSSProperties = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    background: "hsl(var(--card))",
+    border: "1px solid hsl(var(--border))",
+    borderRadius: 8,
+    padding: 12,
+    minHeight: 200,
+    ...((component as any).style ?? {}),
+    ...style,
+  };
+
+  if (isDesignMode && isSelected) {
+    containerStyle.outline = "2px solid hsl(var(--primary))";
+    containerStyle.outlineOffset = "2px";
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  const {
+    selectedScreen: _1, onZoneComponentDrop: _2, onZoneClick: _3,
+    componentConfig: _4, component: _5, isSelected: _6,
+    onClick: _7, onDragStart: _8, onDragEnd: _9,
+    size: _10, position: _11, style: _12,
+    screenId: _13, tableName: _14, onRefresh: _15, onClose: _16,
+    web_type: _17, autoGeneration: _18, isInteractive: _19,
+    formData: _20, onFormDataChange: _21,
+    menuId: _22, menuObjid: _23, onSave: _24,
+    userId: _25, userName: _26, companyCode: _27, deptCode: _27b,
+    isInModal: _28, readonly: _29, originalData: _30,
+    selectedRows: _36, selectedRowsData: _37, onSelectedRowsChange: _38,
+    sortBy: _39, sortOrder: _40, tableDisplayData: _41,
+    flowSelectedData: _42, flowSelectedStepId: _43, onFlowSelectedDataChange: _44,
+    onConfigChange: _45, refreshKey: _46, flowRefreshKey: _47, onFlowRefresh: _48,
+    isPreview: _49, groupedData: _50,
+    chartType: _51, title: _52, dataSource: _53,
+    includeEmptyGroup: _54, barColor: _55, donutPalette: _56,
+    showAxis: _57, showLegend: _58,
+    disabled: _59, required: _60,
+    ...domProps
+  } = props as any;
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  // recharts 데이터 형식 (group/value → name/value)
+  const data = React.useMemo(
+    () =>
+      rows.map((r) => ({
+        name: r.group === null || r.group === "" ? "—" : String(r.group),
+        value: r.value,
+      })),
+    [rows],
+  );
+
+  const renderChart = (): React.ReactNode => {
+    if (data.length === 0) {
+      return (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flex: 1,
+            color: "hsl(var(--muted-foreground))",
+            fontSize: 12,
+          }}
+        >
+          {error ? `데이터 로드 실패: ${error}` : "표시할 데이터가 없습니다."}
+        </div>
+      );
+    }
+
+    switch (chartType) {
+      case "donut":
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={data}
+                dataKey="value"
+                nameKey="name"
+                innerRadius="55%"
+                outerRadius="85%"
+                paddingAngle={2}
+              >
+                {data.map((_, i) => (
+                  <Cell key={i} fill={donutPalette[i % donutPalette.length]} />
+                ))}
+              </Pie>
+              <Tooltip />
+              {showLegend && <Legend verticalAlign="bottom" height={24} />}
+            </PieChart>
+          </ResponsiveContainer>
+        );
+      case "horizontalBar":
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data} layout="vertical" margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+              {showAxis && <XAxis type="number" stroke="hsl(var(--muted-foreground))" fontSize={11} />}
+              {showAxis && (
+                <YAxis dataKey="name" type="category" stroke="hsl(var(--muted-foreground))" fontSize={11} width={80} />
+              )}
+              <Tooltip />
+              <Bar dataKey="value" fill={barColor} radius={[0, 4, 4, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        );
+      case "line":
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={data} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+              {showAxis && <XAxis dataKey="name" stroke="hsl(var(--muted-foreground))" fontSize={11} />}
+              {showAxis && <YAxis stroke="hsl(var(--muted-foreground))" fontSize={11} />}
+              <Tooltip />
+              <Line type="monotone" dataKey="value" stroke={barColor} strokeWidth={2} dot={{ r: 3 }} />
+            </LineChart>
+          </ResponsiveContainer>
+        );
+      case "bar":
+      default:
+        return (
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data} margin={{ top: 8, right: 16, left: 8, bottom: 8 }}>
+              <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
+              {showAxis && <XAxis dataKey="name" stroke="hsl(var(--muted-foreground))" fontSize={11} />}
+              {showAxis && <YAxis stroke="hsl(var(--muted-foreground))" fontSize={11} />}
+              <Tooltip />
+              <Bar dataKey="value" fill={barColor} radius={[4, 4, 0, 0]} />
+            </BarChart>
+          </ResponsiveContainer>
+        );
+    }
+  };
+
+  return (
+    <div
+      style={containerStyle}
+      className={className}
+      onClick={handleClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      {...filterDOMProps(domProps)}
+    >
+      {(title || isPreview || loading) && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: 12,
+            fontWeight: 700,
+            color: "hsl(var(--foreground))",
+            marginBottom: 6,
+            flexShrink: 0,
+          }}
+        >
+          <span>{title || (isPreview ? "차트 (미리보기)" : "")}</span>
+          {loading && (
+            <span style={{ fontSize: 10, color: "hsl(var(--muted-foreground))", fontWeight: 500 }}>
+              로딩…
+            </span>
+          )}
+        </div>
+      )}
+      <div style={{ flex: 1, minHeight: 0 }}>{renderChart()}</div>
+    </div>
+  );
+};
+
+export const ChartWrapper: React.FC<ChartComponentProps> = (props) => {
+  return <ChartComponent {...props} />;
+};
diff --git a/frontend/lib/registry/components/chart/ChartRenderer.tsx b/frontend/lib/registry/components/chart/ChartRenderer.tsx
new file mode 100644
index 00000000..8c736b0d
--- /dev/null
+++ b/frontend/lib/registry/components/chart/ChartRenderer.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { ChartDefinition } from "./index";
+import { ChartComponent } from "./ChartComponent";
+
+/**
+ * Chart 렌더러 (Phase G.3)
+ *
+ * AutoRegisteringComponentRenderer 상속으로 ComponentRegistry 에 "chart" 자동 등록.
+ * 기존 `frontend/lib/registry/components/ChartRenderer.tsx` (placeholder, 미사용)
+ * 와는 별개. index.ts 가 import 하는 경로는 본 파일.
+ */
+export class ChartRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = ChartDefinition;
+
+  render(): React.ReactElement {
+    return <ChartComponent {...this.props} renderer={this} />;
+  }
+}
+
+ChartRenderer.registerSelf();
+
+if (process.env.NODE_ENV === "development") {
+  ChartRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/chart/InvChartConfigPanel.tsx b/frontend/lib/registry/components/chart/InvChartConfigPanel.tsx
new file mode 100644
index 00000000..e89123a8
--- /dev/null
+++ b/frontend/lib/registry/components/chart/InvChartConfigPanel.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+/**
+ * InvChartConfigPanel — canonical 차트 컴포넌트 (id: chart) cp 톤 설정 패널 (Phase G.3)
+ *
+ * 흐름:
+ *   ① 기본 — 제목 + 차트 종류 (CPVisualGrid 4종)
+ *   ② 데이터 소스 — 테이블 / groupBy / 집계 / valueColumn
+ *   ③ 필터 — OptionFilter 빌더 (stats 와 같은 패턴 재사용)
+ *   ④ 표시 옵션 — 최대 그룹 / 정렬 방향 / 빈 그룹 / 축 / 범례 / 색
+ *
+ * Reference: notes/gbpark/2026-04-28-cp-panel-standard.md
+ */
+
+import React from "react";
+import { Plus, BarChart3, BarChart2, PieChart as PieIcon, LineChart as LineIcon } from "lucide-react";
+import {
+  CPSection,
+  CPRow,
+  CPText,
+  CPSelect,
+  CPSegment,
+  CPNumber,
+  CPColor,
+  CPVisualGrid,
+  CPSwitch,
+  Hint,
+} from "@/components/v2/config-panels/_shared/cp";
+import { useDbTables } from "../common/useDbTables";
+import { OptionFilterRow } from "../_shared/FilterRow";
+import { ColumnPicker } from "../_shared/ColumnPicker";
+import type { OptionFilter } from "../input/use-option-loader";
+import type { ChartConfig, ChartType, ChartDataSource } from "./types";
+import type { StatsAggregation } from "../stats/types";
+
+const CHART_TYPES: Array<{ value: ChartType; label: string; preview: React.ReactNode; desc: string }> = [
+  { value: "bar", label: "막대", preview: <BarChart3 size={18} />, desc: "세로 막대 그래프" },
+  { value: "horizontalBar", label: "가로 막대", preview: <BarChart2 size={18} style={{ transform: "rotate(90deg)" }} />, desc: "가로 막대 그래프" },
+  { value: "line", label: "선", preview: <LineIcon size={18} />, desc: "추세선" },
+  { value: "donut", label: "도넛", preview: <PieIcon size={18} />, desc: "도넛형 비율" },
+];
+
+const AGGREGATION_OPTS: Array<{ value: StatsAggregation; label: string }> = [
+  { value: "count", label: "건수" },
+  { value: "distinctCount", label: "고유 건수" },
+  { value: "sum", label: "합계" },
+  { value: "avg", label: "평균" },
+  { value: "min", label: "최소" },
+  { value: "max", label: "최대" },
+];
+
+export interface InvChartConfigPanelProps {
+  config?: ChartConfig;
+  onChange?: (config: ChartConfig) => void;
+  selectedComponent?: { id: string; config?: ChartConfig; [k: string]: any };
+}
+
+export const InvChartConfigPanel: React.FC<InvChartConfigPanelProps> = ({
+  config,
+  onChange,
+  selectedComponent,
+}) => {
+  const current: ChartConfig =
+    (config as ChartConfig) || (selectedComponent?.config as ChartConfig) || {};
+  const patch = (p: Partial<ChartConfig>) => onChange?.({ ...current, ...p });
+
+  const ds = current.dataSource ?? {};
+  const patchDataSource = (p: Partial<ChartDataSource>) => {
+    const next = { ...ds, ...p };
+    if (!next.tableName && !next.groupBy && (!next.filters || next.filters.length === 0) && !next.valueColumn) {
+      patch({ dataSource: undefined });
+    } else {
+      patch({ dataSource: next });
+    }
+  };
+
+  const aggregation: StatsAggregation = ds.aggregation ?? "count";
+  const needsValueColumn = aggregation !== "count";
+
+  const filters = ds.filters ?? [];
+  const updateFilter = (idx: number, f: Partial<OptionFilter>) => {
+    const next = filters.map((it, i) => (i === idx ? { ...it, ...f } : it));
+    patchDataSource({ filters: next });
+  };
+  const addFilter = () => {
+    patchDataSource({
+      filters: [
+        ...filters,
+        { column: "", operator: "=", value_type: "static", value: "" } as OptionFilter,
+      ],
+    });
+  };
+  const removeFilter = (idx: number) => {
+    const next = filters.filter((_, i) => i !== idx);
+    patchDataSource({ filters: next.length === 0 ? undefined : next });
+  };
+
+  const { options: tableOptions } = useDbTables();
+
+  return (
+    <div style={{ fontFamily: "var(--v5-font-sans)", color: "var(--cp-text)", padding: "0 12px" }}>
+      {/* ── ① 기본 ─────────────────────────── */}
+      <CPSection title="① 기본">
+        <CPRow label="제목" help="비우면 제목 영역 숨김">
+          <CPText
+            value={current.title || ""}
+            onChange={(v) => patch({ title: v || undefined })}
+            placeholder="부서별 인원"
+          />
+        </CPRow>
+        <div style={{ marginTop: 8 }}>
+          <CPRow label="차트 종류" />
+          <CPVisualGrid
+            cols={4}
+            cardHeight={56}
+            value={current.chartType || "bar"}
+            onChange={(v) => patch({ chartType: v as ChartType })}
+            options={CHART_TYPES}
+          />
+        </div>
+      </CPSection>
+
+      {/* ── ② 데이터 소스 ─────────────────────────── */}
+      <CPSection title="② 데이터 소스" desc="GROUP BY 컬럼별 집계 결과를 차트로 표시">
+        <CPRow label="테이블">
+          <CPSelect
+            value={ds.tableName || ""}
+            onChange={(v) => patchDataSource({ tableName: v || undefined })}
+          >
+            <option value="">선택...</option>
+            {tableOptions.map((t) => (
+              <option key={t.value} value={t.value}>
+                {t.label}
+              </option>
+            ))}
+          </CPSelect>
+        </CPRow>
+        <CPRow label="그룹 컬럼" help="이 컬럼 값별로 묶어 집계">
+          <ColumnPicker
+            tableName={ds.tableName}
+            value={ds.groupBy}
+            onChange={(v) => patchDataSource({ groupBy: v || undefined })}
+            placeholder="그룹 컬럼 선택…"
+          />
+        </CPRow>
+        <CPRow label="집계">
+          <CPSelect
+            value={aggregation}
+            onChange={(v) => patchDataSource({ aggregation: (v as StatsAggregation) || "count" })}
+          >
+            {AGGREGATION_OPTS.map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </CPSelect>
+        </CPRow>
+        {(needsValueColumn || ds.valueColumn) && (
+          <CPRow label="값 컬럼" help={needsValueColumn ? "필수" : "(count 는 비워도 됨)"}>
+            <ColumnPicker
+              tableName={ds.tableName}
+              value={ds.valueColumn}
+              onChange={(v) => patchDataSource({ valueColumn: v || undefined })}
+              placeholder="값 컬럼 선택…"
+            />
+          </CPRow>
+        )}
+      </CPSection>
+
+      {/* ── ③ 필터 ─────────────────────────── */}
+      <CPSection title={`③ 필터 ${filters.length > 0 ? `(${filters.length})` : ""}`}>
+        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 5 }}>
+          <button
+            type="button"
+            onClick={addFilter}
+            style={{
+              padding: "3px 8px",
+              fontSize: 10.5,
+              background: "var(--cp-bg-subtle)",
+              border: "1px solid var(--cp-border)",
+              borderRadius: 4,
+              cursor: "pointer",
+              color: "var(--cp-text)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 3,
+            }}
+          >
+            <Plus size={10} /> 추가
+          </button>
+        </div>
+        {filters.length === 0 ? (
+          <Hint>필터 없음 — 테이블 전체 그룹별 집계</Hint>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            {filters.map((f, idx) => (
+              <OptionFilterRow
+                key={idx}
+                filter={f}
+                onChange={(p) => updateFilter(idx, p)}
+                onRemove={() => removeFilter(idx)}
+                tableName={ds.tableName}
+              />
+            ))}
+          </div>
+        )}
+      </CPSection>
+
+      {/* ── ④ 표시 옵션 ─────────────────────────── */}
+      <CPSection title="④ 표시 옵션">
+        <CPRow label="최대 그룹 수" help="1 ~ 500. 기본 12">
+          <CPNumber
+            value={ds.limit ?? 12}
+            onChange={(v) => patchDataSource({ limit: v ?? 12 })}
+            min={1}
+            max={500}
+          />
+        </CPRow>
+        <CPRow label="정렬">
+          <CPSegment
+            value={ds.orderDir ?? "desc"}
+            onChange={(v) => patchDataSource({ orderDir: v as "asc" | "desc" })}
+            options={[
+              { value: "desc", label: "값 큰 순" },
+              { value: "asc", label: "값 작은 순" },
+            ]}
+          />
+        </CPRow>
+        <CPRow label="빈 그룹 포함">
+          <CPSwitch
+            value={!!current.includeEmptyGroup}
+            onChange={(v) => patch({ includeEmptyGroup: v })}
+          />
+        </CPRow>
+        <CPRow label="축 표시">
+          <CPSwitch
+            value={current.showAxis ?? true}
+            onChange={(v) => patch({ showAxis: v })}
+          />
+        </CPRow>
+        {(current.chartType ?? "bar") === "donut" && (
+          <CPRow label="범례 표시">
+            <CPSwitch
+              value={current.showLegend ?? true}
+              onChange={(v) => patch({ showLegend: v })}
+            />
+          </CPRow>
+        )}
+        {(current.chartType ?? "bar") !== "donut" && (
+          <CPRow label="막대/선 색">
+            <CPColor
+              value={current.barColor || "#6c5ce7"}
+              onChange={(v) => patch({ barColor: v || undefined })}
+            />
+          </CPRow>
+        )}
+      </CPSection>
+    </div>
+  );
+};
+
+InvChartConfigPanel.displayName = "InvChartConfigPanel";
+
+export default InvChartConfigPanel;
diff --git a/frontend/lib/registry/components/chart/index.ts b/frontend/lib/registry/components/chart/index.ts
new file mode 100644
index 00000000..afb29004
--- /dev/null
+++ b/frontend/lib/registry/components/chart/index.ts
@@ -0,0 +1,51 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { ChartWrapper } from "./ChartComponent";
+import { InvChartConfigPanel } from "./InvChartConfigPanel";
+import type { ChartConfig } from "./types";
+
+/**
+ * Chart — canonical 차트 컴포넌트 (Phase G.3)
+ *
+ * 4종 차트 (bar / horizontalBar / line / donut) 통합. `dataSource.tableName +
+ * groupBy + aggregation` 으로 백엔드 `/aggregate-group` endpoint 호출 → recharts
+ * 위에서 렌더.
+ *
+ * 관련 문서:
+ *   notes/gbpark/2026-05-14-studio-data-view-roadmap.md (Phase G.3 Progress)
+ */
+
+const DEFAULT_CONFIG: Partial<ChartConfig> = {
+  chartType: "bar",
+  showAxis: true,
+  showLegend: true,
+};
+
+export const ChartDefinition = createComponentDefinition({
+  id: "chart",
+  name: "차트",
+  name_eng: "Chart",
+  description: "테이블 데이터를 막대 / 도넛 / 선 / 가로막대 차트로 표시",
+  category: ComponentCategory.DISPLAY,
+  web_type: "text",
+  component: ChartWrapper,
+  default_config: DEFAULT_CONFIG as Record<string, any>,
+  default_size: { width: 480, height: 280 },
+  config_panel: InvChartConfigPanel,
+  icon: "BarChart3",
+  tags: ["차트", "chart", "graph", "bar", "donut", "line", "aggregation"],
+  version: "1.0.0",
+  author: "INVYONE",
+  documentation:
+    "notes/gbpark/2026-05-14-studio-data-view-roadmap.md#phase-g3-progress",
+  // ─── INVYONE DataPort 선언 (Phase G.0 wiring 비활성 유지) ───
+  dataPorts: {
+    inputs: [{ name: "data", type: "rows" }],
+  },
+});
+
+export type { ChartConfig, ChartType, ChartDataSource } from "./types";
+export { ChartComponent, ChartWrapper } from "./ChartComponent";
+export { InvChartConfigPanel } from "./InvChartConfigPanel";
diff --git a/frontend/lib/registry/components/chart/types.ts b/frontend/lib/registry/components/chart/types.ts
new file mode 100644
index 00000000..6334a911
--- /dev/null
+++ b/frontend/lib/registry/components/chart/types.ts
@@ -0,0 +1,48 @@
+"use client";
+
+import type { ComponentConfig } from "@/types/component";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+import type { StatsAggregation } from "@/lib/registry/components/stats/types";
+
+/**
+ * canonical chart 컴포넌트 설정 타입 (Phase G.3)
+ *
+ * recharts 기반 4종 차트 (bar / horizontalBar / line / donut) 의 공통 컨피그.
+ * 데이터 모델은 `tableName + groupBy + aggregation` 으로 일관 — 백엔드의
+ * `/aggregate-group` endpoint 응답을 그대로 차트로 그린다.
+ */
+
+export type ChartType = "bar" | "horizontalBar" | "line" | "donut";
+
+export interface ChartDataSource {
+  tableName?: string;
+  groupBy?: string;
+  aggregation?: StatsAggregation;
+  /** count 외 집계 (sum / avg / min / max / distinctCount) 에 사용 */
+  valueColumn?: string;
+  /** OptionFilter 와 동일한 모양 — runtime hook 이 value_type 치환 후 백엔드에 전달 */
+  filters?: OptionFilter[];
+  /** 표시할 최대 그룹 수 (기본 12). 백엔드는 1~500 까지 허용 */
+  limit?: number;
+  /** "desc" = 값 큰 순, "asc" = 값 작은 순 (기본 desc) */
+  orderDir?: "asc" | "desc";
+}
+
+export interface ChartConfig extends ComponentConfig {
+  /** 차트 종류 */
+  chartType?: ChartType;
+  /** 차트 제목 (선택) */
+  title?: string;
+  /** 데이터 소스 — 없으면 디자인 placeholder 만 표시 */
+  dataSource?: ChartDataSource;
+  /** 빈 그룹 (null / "") 도 표시할지 여부. 기본 false (필터 아웃) */
+  includeEmptyGroup?: boolean;
+  /** bar / horizontalBar / line 의 막대/선 색상 (기본 primary) */
+  barColor?: string;
+  /** donut 슬라이스 팔레트 (없으면 기본 6색) */
+  donutPalette?: string[];
+  /** Y 축 / X 축 라벨 표시 여부 (기본 true) */
+  showAxis?: boolean;
+  /** 범례 표시 여부 (기본 true, donut 만 의미) */
+  showLegend?: boolean;
+}
diff --git a/frontend/lib/registry/components/chart/use-chart-data.ts b/frontend/lib/registry/components/chart/use-chart-data.ts
new file mode 100644
index 00000000..ab7e3564
--- /dev/null
+++ b/frontend/lib/registry/components/chart/use-chart-data.ts
@@ -0,0 +1,208 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { aggregateTableGroup, type AggregateGroupRow } from "@/lib/api/stats";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+import type { ChartDataSource } from "./types";
+
+/**
+ * use-chart-data — Phase G.3
+ *
+ * canonical chart 의 `dataSource` 가 채워져 있으면 `/aggregate-group` endpoint 를
+ * 호출해 그룹별 집계 row 배열을 반환한다.
+ *
+ *   - 디자인 모드: fetch 0건. preview rows 로 fallback
+ *   - request key 캐시 (같은 호출 중복 발생 안함)
+ *   - version counter race guard
+ *   - 실패 시 throw 안 하고 error state 로 반환 — 컴포넌트가 fallback 표시
+ *
+ * use-stats-data 와 같은 패턴 (StatsItem 단위 → 차트 단위 한 개) 으로 구현.
+ */
+
+export interface UseChartDataOptions {
+  isDesignMode?: boolean;
+  formData?: Record<string, unknown>;
+  userContext?: {
+    companyCode?: string;
+    userId?: string;
+    deptCode?: string;
+    userName?: string;
+  };
+  refreshKey?: number | string;
+  /** preview 모드 row 수 (디자인 모드 / dataSource 미설정 시) — 기본 4 */
+  previewCount?: number;
+  /** 빈 그룹 (null/"") 필터링 — `ChartConfig.includeEmptyGroup` 와 연동 */
+  includeEmptyGroup?: boolean;
+}
+
+export interface ChartDataState {
+  rows: AggregateGroupRow[];
+  loading: boolean;
+  error?: string;
+  /** dataSource 가 아직 채워지지 않아 preview 만 보여주고 있는지 */
+  isPreview: boolean;
+}
+
+const DEFAULT_PREVIEW: AggregateGroupRow[] = [
+  { group: "A", value: 28 },
+  { group: "B", value: 19 },
+  { group: "C", value: 12 },
+  { group: "D", value: 6 },
+];
+
+function resolveFilters(
+  filters: OptionFilter[] | undefined,
+  formData: Record<string, unknown> | undefined,
+  userContext: UseChartDataOptions["userContext"],
+): { resolved: Array<{ column: string; operator: string; value?: unknown }>; ok: boolean } {
+  if (!filters || filters.length === 0) return { resolved: [], ok: true };
+  const out: Array<{ column: string; operator: string; value?: unknown }> = [];
+  for (const f of filters) {
+    if (!f || !f.column) continue;
+    const op = f.operator ?? "=";
+    if (op === "isNull" || op === "isNotNull") {
+      out.push({ column: f.column, operator: op });
+      continue;
+    }
+    let value: unknown = f.value;
+    const valueType = f.value_type ?? "static";
+    if (valueType === "field") {
+      const ref = f.field_ref;
+      if (!ref) return { resolved: [], ok: false };
+      value = formData?.[ref];
+      if (value === undefined) return { resolved: [], ok: false };
+    } else if (valueType === "user") {
+      const uf = f.user_field;
+      if (!uf) return { resolved: [], ok: false };
+      value = userContext?.[uf];
+      if (value === undefined || value === "") return { resolved: [], ok: false };
+    }
+    if (value === undefined || value === null) continue;
+    out.push({ column: f.column, operator: op, value });
+  }
+  return { resolved: out, ok: true };
+}
+
+function buildRequestKey(
+  ds: ChartDataSource,
+  filters: Array<{ column: string; operator: string; value?: unknown }>,
+  includeEmptyGroup?: boolean,
+): string {
+  return JSON.stringify({
+    t: ds.tableName,
+    g: ds.groupBy,
+    a: ds.aggregation ?? "count",
+    vc: ds.valueColumn ?? "",
+    l: ds.limit ?? 12,
+    o: ds.orderDir ?? "desc",
+    f: filters,
+    e: !!includeEmptyGroup,
+  });
+}
+
+function isDataSourceReady(ds: ChartDataSource | undefined): boolean {
+  if (!ds || !ds.tableName || !ds.groupBy) return false;
+  const agg = ds.aggregation ?? "count";
+  if (agg === "count") return true;
+  return !!ds.valueColumn;
+}
+
+export function useChartData(
+  dataSource: ChartDataSource | undefined,
+  opts: UseChartDataOptions = {},
+): ChartDataState {
+  const { isDesignMode, formData, userContext, refreshKey, previewCount, includeEmptyGroup } = opts;
+
+  const previewRows = useMemo<AggregateGroupRow[]>(() => {
+    const n = previewCount ?? DEFAULT_PREVIEW.length;
+    return DEFAULT_PREVIEW.slice(0, Math.max(2, Math.min(8, n)));
+  }, [previewCount]);
+
+  const [state, setState] = useState<ChartDataState>({
+    rows: previewRows,
+    loading: false,
+    isPreview: true,
+  });
+
+  const plan = useMemo(() => {
+    if (!isDataSourceReady(dataSource)) return { skip: true as const };
+    const { resolved, ok } = resolveFilters(dataSource!.filters, formData, userContext);
+    if (!ok) return { skip: true as const, pending: true as const };
+    const reqKey = buildRequestKey(dataSource!, resolved, includeEmptyGroup);
+    return {
+      skip: false as const,
+      reqKey,
+      req: {
+        tableName: dataSource!.tableName!,
+        aggregation: dataSource!.aggregation ?? "count",
+        groupBy: dataSource!.groupBy!,
+        valueColumn: dataSource!.valueColumn,
+        filters: resolved,
+        limit: dataSource!.limit ?? 12,
+        orderDir: dataSource!.orderDir ?? "desc",
+      },
+    };
+  }, [dataSource, formData, userContext, includeEmptyGroup]);
+
+  const cacheRef = useRef<Map<string, AggregateGroupRow[]>>(new Map());
+  const versionRef = useRef(0);
+
+  useEffect(() => {
+    if (isDesignMode) {
+      cacheRef.current.clear();
+      setState({ rows: previewRows, loading: false, isPreview: true });
+      return;
+    }
+
+    if (plan.skip) {
+      setState({ rows: previewRows, loading: false, isPreview: true });
+      return;
+    }
+
+    versionRef.current += 1;
+    const myVersion = versionRef.current;
+    let cancelled = false;
+
+    if (refreshKey !== undefined) {
+      cacheRef.current.clear();
+    }
+
+    const cached = cacheRef.current.get(plan.reqKey!);
+    if (cached !== undefined && refreshKey === undefined) {
+      setState({ rows: cached, loading: false, isPreview: false });
+      return;
+    }
+
+    setState((prev) => ({ ...prev, loading: true, error: undefined }));
+
+    (async () => {
+      try {
+        const { rows } = await aggregateTableGroup(plan.req!.tableName, {
+          aggregation: plan.req!.aggregation as any,
+          groupBy: plan.req!.groupBy,
+          valueColumn: plan.req!.valueColumn,
+          filters: plan.req!.filters as any,
+          limit: plan.req!.limit,
+          orderDir: plan.req!.orderDir,
+        });
+        if (cancelled || versionRef.current !== myVersion) return;
+        const filtered = includeEmptyGroup
+          ? rows
+          : rows.filter((r) => r.group !== null && r.group !== "");
+        cacheRef.current.set(plan.reqKey!, filtered);
+        setState({ rows: filtered, loading: false, isPreview: false });
+      } catch (err: any) {
+        if (cancelled || versionRef.current !== myVersion) return;
+        const msg = err?.response?.data?.message || err?.message || "차트 데이터 로드 실패";
+        setState({ rows: [], loading: false, isPreview: false, error: String(msg) });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [plan, isDesignMode, refreshKey, previewRows, includeEmptyGroup]);
+
+  return state;
+}
diff --git a/frontend/lib/registry/components/common/IconPicker.tsx b/frontend/lib/registry/components/common/IconPicker.tsx
index e637120f..4f4e661f 100644
--- a/frontend/lib/registry/components/common/IconPicker.tsx
+++ b/frontend/lib/registry/components/common/IconPicker.tsx
@@ -33,6 +33,262 @@ const POPULAR = [
   "BarChart3", "PieChart", "TrendingUp", "DollarSign", "ShoppingCart", "Package",
 ];
 
+/**
+ * 한글 키워드 → 아이콘 매핑 (검색 시 alias 로 사용).
+ * lucide 영문 이름과 함께 매치. 자주 쓰일만한 도메인 키워드 위주.
+ */
+const ICON_KO: Record<string, string[]> = {
+  // 사용자 / 사원
+  User: ["사용자", "유저", "사람", "회원", "사원"],
+  Users: ["사용자", "유저", "사원", "회원", "그룹", "팀", "사람들"],
+  UserPlus: ["사용자추가", "사원추가", "회원가입", "등록"],
+  UserMinus: ["사용자삭제", "사원삭제", "탈퇴"],
+  UserCheck: ["사용자승인", "사원승인", "인증"],
+  UserX: ["사용자거부", "사원거부", "차단"],
+  UserCog: ["사용자설정", "권한"],
+  Contact: ["연락처", "주소록"],
+  Briefcase: ["가방", "업무", "직장", "프로젝트", "근무"],
+  Building: ["건물", "회사", "조직"],
+  Building2: ["빌딩", "회사", "지점", "사업장"],
+
+  // 액션
+  Plus: ["추가", "더하기", "생성", "신규"],
+  Minus: ["빼기", "제거", "감소"],
+  Edit: ["편집", "수정", "변경"],
+  Edit2: ["편집", "수정", "변경"],
+  Edit3: ["편집", "수정"],
+  Pencil: ["연필", "수정", "편집", "쓰기"],
+  Trash: ["휴지통", "삭제", "버리기"],
+  Trash2: ["휴지통", "삭제", "제거"],
+  Save: ["저장", "보관"],
+  Check: ["체크", "확인", "완료", "승인"],
+  CheckCircle: ["완료", "성공", "확인"],
+  CheckCircle2: ["완료", "성공"],
+  X: ["닫기", "취소", "엑스"],
+  XCircle: ["닫기", "실패", "취소"],
+  Copy: ["복사"],
+  Clipboard: ["클립보드", "복사", "붙여넣기"],
+  Send: ["전송", "보내기", "발송"],
+  Printer: ["인쇄", "프린트"],
+  Share: ["공유", "공유하기"],
+  Share2: ["공유"],
+  Link: ["링크", "연결"],
+  Link2: ["링크", "연결"],
+  Unlink: ["연결끊기"],
+  Power: ["전원", "켜기", "끄기"],
+  LogIn: ["로그인", "입장"],
+  LogOut: ["로그아웃", "나가기", "퇴장"],
+
+  // 검색 / 필터
+  Search: ["검색", "찾기", "조회", "탐색"],
+  Filter: ["필터", "거르기", "조건"],
+  SlidersHorizontal: ["조정", "필터", "설정"],
+  ListFilter: ["필터", "정렬"],
+
+  // 화살표 / 이동
+  ArrowLeft: ["왼쪽", "뒤로", "이전"],
+  ArrowRight: ["오른쪽", "다음", "앞으로"],
+  ArrowUp: ["위", "상승"],
+  ArrowDown: ["아래", "하강"],
+  ArrowUpDown: ["정렬", "위아래"],
+  ChevronLeft: ["왼쪽", "이전"],
+  ChevronRight: ["오른쪽", "다음"],
+  ChevronUp: ["위"],
+  ChevronDown: ["아래", "펼침", "드롭다운"],
+  ChevronsLeft: ["맨앞", "처음"],
+  ChevronsRight: ["맨뒤", "마지막"],
+  ChevronsUpDown: ["펼침접힘"],
+  MoveLeft: ["이동", "왼쪽"],
+  MoveRight: ["이동", "오른쪽"],
+
+  // 시간
+  Calendar: ["달력", "캘린더", "날짜", "일정"],
+  CalendarDays: ["달력", "일정"],
+  CalendarCheck: ["일정확인", "예약"],
+  CalendarClock: ["일정", "예약시간"],
+  Clock: ["시계", "시간"],
+  Clock3: ["시간"],
+  Clock4: ["시간"],
+  Timer: ["타이머", "시간측정"],
+  AlarmClock: ["알람", "알람시계"],
+  Hourglass: ["모래시계", "대기"],
+
+  // 파일 / 폴더 / 문서
+  File: ["파일", "문서"],
+  FileText: ["문서", "텍스트"],
+  FileSpreadsheet: ["스프레드시트", "엑셀"],
+  FileImage: ["이미지파일"],
+  FileVideo: ["동영상파일"],
+  FilePlus: ["파일추가"],
+  FileMinus: ["파일삭제"],
+  FileX: ["파일닫기"],
+  FileCheck: ["파일확인"],
+  Files: ["파일들", "여러파일"],
+  Folder: ["폴더", "디렉토리"],
+  FolderOpen: ["열린폴더"],
+  FolderPlus: ["폴더추가"],
+  FolderMinus: ["폴더삭제"],
+  Archive: ["아카이브", "보관", "압축"],
+
+  // 다운로드 / 업로드
+  Download: ["다운로드", "내려받기"],
+  Upload: ["업로드", "올리기"],
+  CloudDownload: ["클라우드다운로드"],
+  CloudUpload: ["클라우드업로드"],
+  CloudOff: ["오프라인"],
+  Cloud: ["클라우드"],
+
+  // 시각
+  Eye: ["눈", "보기", "표시", "조회"],
+  EyeOff: ["숨기기", "안보기"],
+
+  // 보안
+  Lock: ["잠금", "자물쇠", "보안"],
+  Unlock: ["잠금해제"],
+  Shield: ["방패", "보안", "보호"],
+  ShieldCheck: ["보안인증"],
+  Key: ["열쇠", "키", "비밀번호"],
+  KeyRound: ["키"],
+
+  // 통신
+  Mail: ["메일", "이메일", "편지"],
+  MailOpen: ["메일열기"],
+  MailPlus: ["메일작성"],
+  MessageSquare: ["메시지", "댓글"],
+  MessageCircle: ["메시지"],
+  Phone: ["전화", "폰"],
+  PhoneCall: ["통화"],
+  Smartphone: ["스마트폰", "휴대폰"],
+  Bell: ["알림", "벨", "종"],
+  BellOff: ["알림끄기"],
+
+  // 위치
+  MapPin: ["위치", "지도", "핀"],
+  Map: ["지도"],
+  Navigation: ["네비게이션", "방향"],
+  Home: ["홈", "집", "메인"],
+  Building3: ["건물"],
+  Compass: ["나침반"],
+  Globe: ["지구", "글로벌", "전세계"],
+
+  // 상태 / 좋아요
+  Star: ["별", "즐겨찾기", "별점"],
+  Heart: ["하트", "좋아요", "즐겨찾기"],
+  ThumbsUp: ["좋아요", "추천"],
+  ThumbsDown: ["싫어요"],
+  Bookmark: ["북마크", "즐겨찾기"],
+  Award: ["수상", "메달", "상"],
+  Trophy: ["트로피", "우승"],
+  Flag: ["깃발", "신고", "표시"],
+
+  // 화폐 / 결제
+  DollarSign: ["달러", "돈", "금액", "매출"],
+  CircleDollarSign: ["달러"],
+  Banknote: ["지폐", "돈", "현금"],
+  Wallet: ["지갑"],
+  CreditCard: ["카드", "신용카드", "결제"],
+  Receipt: ["영수증"],
+  Coins: ["동전", "돈"],
+  Percent: ["퍼센트", "비율", "할인"],
+
+  // 카트 / 쇼핑
+  ShoppingCart: ["카트", "장바구니", "쇼핑"],
+  ShoppingBag: ["쇼핑백", "주문"],
+  Store: ["상점", "매장"],
+  Tag: ["태그", "라벨", "꼬리표"],
+  Tags: ["태그", "라벨"],
+
+  // 박스 / 패키지
+  Package: ["패키지", "상자", "포장", "재고"],
+  PackageOpen: ["박스열기", "배송", "포장"],
+  PackagePlus: ["박스추가", "입고"],
+  PackageMinus: ["박스삭제", "출고"],
+  Box: ["박스", "상자"],
+  Boxes: ["박스", "재고"],
+  Truck: ["트럭", "배송"],
+  Container: ["컨테이너", "보관"],
+  Warehouse: ["창고", "재고"],
+
+  // 차트 / 통계
+  BarChart: ["막대그래프", "차트", "통계"],
+  BarChart2: ["막대차트"],
+  BarChart3: ["막대그래프", "차트", "통계", "KPI"],
+  BarChart4: ["막대차트"],
+  PieChart: ["파이차트", "비율", "원그래프"],
+  LineChart: ["선그래프", "추세"],
+  AreaChart: ["영역차트"],
+  TrendingUp: ["상승", "증가", "추세"],
+  TrendingDown: ["하강", "감소"],
+  Activity: ["활동", "추적"],
+  Gauge: ["게이지", "측정"],
+
+  // 설정 / 도구
+  Settings: ["설정", "환경설정", "옵션"],
+  Settings2: ["설정"],
+  Cog: ["설정", "톱니"],
+  Sliders: ["조정", "슬라이더"],
+  Wrench: ["렌치", "도구", "수리"],
+  Hammer: ["망치", "도구"],
+
+  // 새로고침
+  RefreshCw: ["새로고침", "재로드"],
+  RefreshCcw: ["새로고침"],
+  RotateCw: ["회전"],
+  RotateCcw: ["회전"],
+
+  // 정보 / 경고
+  Info: ["정보", "안내"],
+  AlertCircle: ["경고", "주의"],
+  AlertTriangle: ["경고", "위험"],
+  AlertOctagon: ["위험", "중지"],
+  HelpCircle: ["도움말", "물음표"],
+  CircleAlert: ["경고"],
+
+  // 메뉴
+  Menu: ["메뉴", "햄버거"],
+  MoreHorizontal: ["더보기", "추가메뉴"],
+  MoreVertical: ["더보기"],
+  List: ["목록", "리스트"],
+  ListChecks: ["체크리스트"],
+  Grid: ["그리드", "격자"],
+  Grid3x3: ["그리드"],
+  LayoutGrid: ["그리드", "레이아웃"],
+
+  // 데이터 / DB
+  Database: ["데이터베이스", "DB", "저장소"],
+  Server: ["서버"],
+  HardDrive: ["하드드라이브", "저장소"],
+  Cpu: ["CPU", "프로세서"],
+  Cable: ["케이블", "연결"],
+
+  // 일정 / 작업
+  ClipboardList: ["체크리스트", "할일"],
+  ClipboardCheck: ["완료", "확인"],
+  CheckSquare: ["체크박스", "완료"],
+  Square: ["사각형", "박스"],
+
+  // 기타 자주 쓰이는
+  Hash: ["해시", "번호", "샵"],
+  AtSign: ["골뱅이", "이메일", "아이디"],
+  Bookmark2: ["북마크"],
+  Pin: ["핀", "고정"],
+  PinOff: ["고정해제"],
+  Sun: ["해", "라이트모드"],
+  Moon: ["달", "다크모드"],
+  Zap: ["번개", "빠른"],
+  Sparkles: ["반짝", "특수효과"],
+  Gift: ["선물"],
+  Crown: ["왕관", "VIP"],
+  Bot: ["로봇", "봇", "자동화"],
+  Code: ["코드", "개발"],
+  Terminal: ["터미널", "콘솔"],
+  Bug: ["버그", "벌레", "오류"],
+  ListTodo: ["할일", "투두"],
+  GitBranch: ["분기", "브랜치"],
+  Workflow: ["워크플로우", "흐름"],
+  Network: ["네트워크"],
+};
+
 interface IconPickerProps {
   value?: string;
   onChange: (iconName: string) => void;
@@ -44,35 +300,48 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
   const [search, setSearch] = useState("");
   const [focused, setFocused] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
   const [popoverPos, setPopoverPos] = useState<{
     top: number;
     left: number;
     width: number;
+    maxHeight: number;
   } | null>(null);
 
   // 트리거 위치 잡고 popover 열기 (Portal 사용 — 부모 overflow:hidden 영향 회피)
   const handleToggle = () => {
     if (!open && triggerRef.current) {
       const rect = triggerRef.current.getBoundingClientRect();
+      const top = rect.bottom + 2;
+      // popover 높이 = 화면 안에 들어맞게. 너무 크지 않게 360 상한.
+      const maxHeight = Math.min(360, window.innerHeight - top - 16);
       setPopoverPos({
-        top: rect.bottom + 2,
+        top,
         left: rect.left,
         width: rect.width,
+        maxHeight: Math.max(180, maxHeight),
       });
     }
     setOpen((v) => !v);
   };
 
-  // popover 떠 있는 동안 외부 scroll / resize 발생 시 닫기
-  // (좌표 따라가는 대신 닫음 — 사용자가 다시 열면 새 좌표)
+  // popover 떠 있는 동안 외부 scroll / resize 발생 시 닫기. 단, popover 안의
+  // 그리드 자체 스크롤은 제외 — 휠로 아이콘 목록 스크롤 시 닫히지 않게.
   useEffect(() => {
     if (!open) return;
-    const close = () => setOpen(false);
-    window.addEventListener("scroll", close, true);
-    window.addEventListener("resize", close);
+    const onScroll = (e: Event) => {
+      const target = e.target;
+      if (target instanceof Node && popoverRef.current?.contains(target)) {
+        return; // popover 내부 스크롤은 무시
+      }
+      setOpen(false);
+    };
+    const onResize = () => setOpen(false);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
     return () => {
-      window.removeEventListener("scroll", close, true);
-      window.removeEventListener("resize", close);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
     };
   }, [open]);
 
@@ -80,11 +349,24 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
     if (!search.trim()) {
       const popularSet = new Set(POPULAR);
       const popular = ICON_ENTRIES.filter(([n]) => popularSet.has(n));
-      const rest = ICON_ENTRIES.filter(([n]) => !popularSet.has(n)).slice(0, 80 - popular.length);
+      const rest = ICON_ENTRIES.filter(([n]) => !popularSet.has(n)).slice(0, 300 - popular.length);
       return [...popular, ...rest];
     }
-    const q = search.toLowerCase();
-    return ICON_ENTRIES.filter(([name]) => name.toLowerCase().includes(q)).slice(0, 80);
+    const raw = search.trim();
+    const q = raw.toLowerCase();
+    const hasHangul = /[가-힣]/.test(raw);
+    return ICON_ENTRIES.filter(([name]) => {
+      // 영문 lucide 이름 매치
+      if (name.toLowerCase().includes(q)) return true;
+      // 한글 alias 매치 (한글 검색 시점 우선)
+      const aliases = ICON_KO[name];
+      if (aliases) {
+        for (const ko of aliases) {
+          if (hasHangul ? ko.includes(raw) : ko.toLowerCase().includes(q)) return true;
+        }
+      }
+      return false;
+    }).slice(0, 300);
   }, [search]);
 
   const SelectedIcon = value ? (LucideIcons as any)[value] : null;
@@ -105,7 +387,7 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
           background: "var(--cp-surface)",
           border: `1px solid ${
             focused
-              ? "rgba(var(--v5-primary-rgb), 0.5)"
+              ? "hsl(var(--primary) / 0.5)"
               : "var(--cp-border)"
           }`,
           borderRadius: 6,
@@ -116,7 +398,7 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
           gap: 6,
           fontFamily: "var(--v5-font-sans)",
           boxShadow: focused
-            ? "0 0 0 3px rgba(var(--v5-primary-rgb), 0.12)"
+            ? "0 0 0 3px hsl(var(--primary) / 0.12)"
             : undefined,
           transition: "border-color .14s ease, box-shadow .14s ease",
           textAlign: "left",
@@ -151,17 +433,21 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
 
       {open && popoverPos && createPortal(
         <div
+          ref={popoverRef}
           style={{
             position: "fixed",
             top: popoverPos.top,
             left: popoverPos.left,
             width: popoverPos.width,
+            height: popoverPos.maxHeight,
             background: "var(--cp-surface)",
             border: "1px solid var(--cp-border)",
             borderRadius: 6,
             boxShadow: "0 4px 12px rgba(0, 0, 0, 0.12)",
             zIndex: 9999,
             overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
           }}
         >
           {/* 검색 */}
@@ -175,7 +461,7 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
               type="text"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              placeholder="아이콘 검색..."
+              placeholder="아이콘 검색 (한/영) — 사원, users…"
               autoFocus
               style={{
                 width: "100%",
@@ -192,15 +478,16 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
             />
           </div>
 
-          {/* 그리드 */}
+          {/* 그리드 — popover 안에서 flex 로 늘어나며 휠 스크롤 활성 */}
           <div
             style={{
               display: "grid",
               gridTemplateColumns: "repeat(6, 1fr)",
               gap: 2,
               padding: 6,
-              maxHeight: 200,
               overflowY: "auto",
+              minHeight: 0,
+              flex: 1,
             }}
           >
             {/* 선택 해제 */}
@@ -239,11 +526,11 @@ export const IconPicker: React.FC<IconPickerProps> = ({ value, onChange, classNa
                   style={{
                     height: 28,
                     background: active
-                      ? "rgba(var(--v5-primary-rgb), 0.10)"
+                      ? "hsl(var(--primary) / 0.10)"
                       : "transparent",
                     border: "none",
                     cursor: "pointer",
-                    color: active ? "var(--v5-primary)" : "var(--cp-text)",
+                    color: active ? "hsl(var(--primary))" : "var(--cp-text)",
                     borderRadius: 4,
                     display: "flex",
                     alignItems: "center",
diff --git a/frontend/lib/registry/components/common/useDbColumns.ts b/frontend/lib/registry/components/common/useDbColumns.ts
new file mode 100644
index 00000000..71522286
--- /dev/null
+++ b/frontend/lib/registry/components/common/useDbColumns.ts
@@ -0,0 +1,89 @@
+"use client";
+
+/**
+ * useDbColumns — DB 테이블의 컬럼 목록을 mount/tableName 변경 시 lazy 로드.
+ *
+ * 사용처: stats / chart / cardList / groupedTable 의 컬럼 선택 dropdown.
+ * 모듈 스코프 Map 캐시로 같은 테이블 중복 요청 방지.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+
+export interface DbColumnOption {
+  value: string;
+  label: string;
+  data_type?: string;
+}
+
+const cache = new Map<string, DbColumnOption[]>();
+const inflight = new Map<string, Promise<DbColumnOption[]>>();
+
+export interface UseDbColumnsResult {
+  columns: DbColumnOption[];
+  loading: boolean;
+  error?: string;
+}
+
+export function useDbColumns(tableName?: string): UseDbColumnsResult {
+  const [columns, setColumns] = useState<DbColumnOption[]>(() =>
+    tableName ? cache.get(tableName) ?? [] : [],
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    let cancelled = false;
+    setError(undefined);
+    if (!tableName) {
+      setColumns([]);
+      setLoading(false);
+      return;
+    }
+    const cached = cache.get(tableName);
+    if (cached) {
+      setColumns(cached);
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    const promise =
+      inflight.get(tableName) ??
+      (async () => {
+        const { tableManagementApi } = await import("@/lib/api/tableManagement");
+        const res = await tableManagementApi.getColumnList(tableName, 1000);
+        const rows = (res?.success ? res.data?.columns ?? [] : []) as any[];
+        const opts: DbColumnOption[] = rows
+          .map((c) => ({
+            value: c?.column_name ?? c?.columnName ?? "",
+            label:
+              (c?.display_name ?? c?.displayName ?? "") ||
+              c?.column_name ||
+              c?.columnName ||
+              "",
+            data_type: c?.data_type ?? c?.dataType,
+          }))
+          .filter((o) => !!o.value);
+        cache.set(tableName, opts);
+        return opts;
+      })();
+    inflight.set(tableName, promise);
+    promise
+      .then((opts) => {
+        if (cancelled) return;
+        setColumns(opts);
+      })
+      .catch((e) => {
+        if (cancelled) return;
+        setError(e?.message ?? "컬럼 목록 로드 실패");
+      })
+      .finally(() => {
+        inflight.delete(tableName);
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [tableName]);
+
+  return useMemo(() => ({ columns, loading, error }), [columns, loading, error]);
+}
diff --git a/frontend/lib/registry/components/container/ContainerComponent.tsx b/frontend/lib/registry/components/container/ContainerComponent.tsx
index ce03a509..e6c95d31 100644
--- a/frontend/lib/registry/components/container/ContainerComponent.tsx
+++ b/frontend/lib/registry/components/container/ContainerComponent.tsx
@@ -2,14 +2,24 @@
 
 import React, { useState } from "react";
 import { ComponentRendererProps } from "@/types/component";
-import { ContainerConfig, ContainerType, ContainerTab } from "./types";
+import {
+  ContainerConfig,
+  ContainerType,
+  ContainerTab,
+  ContainerChildComponent,
+} from "./types";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 
 /**
  * Container — 통합 레이아웃 컨테이너 컴포넌트
  *
- * containerType 으로 탭/섹션/아코디언/반복/조건부 분기. Phase C-2 최소 구현으로
- * 각 모드는 **스켈레톤 렌더**. 내부 자식 배치는 Phase F 에서 정교화.
+ * containerType 으로 탭/섹션/아코디언/반복/조건부 분기.
+ *
+ *   - Phase C-2 최소 구현: 각 모드는 스켈레톤 렌더.
+ *   - Phase G.2: `containerType === "tabs"` 만 활성 탭의 자식 컴포넌트들을
+ *     `DynamicComponentRenderer` 로 렌더. 비활성 탭은 렌더하지 않음 (성능).
+ *     section / accordion / repeater / conditional 은 여전히 스켈레톤 — 별도 phase.
  */
 
 const VALID_TYPES: ContainerType[] = [
@@ -135,34 +145,199 @@ export const ContainerComponent: React.FC<ContainerComponentProps> = ({
       { id: "tab2", label: "탭 2" },
       { id: "tab3", label: "탭 3" },
     ];
+    // 디자인 모드에서 setActiveTab 도 허용 (사용자가 탭별 미리보기 전환).
+    const handleSelect = (id: string) => setActiveTab(id);
+    const currentTab = tabs.find((t) => t.id === activeTab) ?? tabs[0];
+    const activeTabId = currentTab?.id ?? "";
     return (
       <>
-        <div style={{
-          display: "flex", gap: "0", borderBottom: "1px solid hsl(var(--border))",
-          background: "hsl(var(--muted))", flexShrink: 0,
-        }}>
+        <div
+          style={{
+            display: "flex",
+            gap: "0",
+            borderBottom: "1px solid hsl(var(--border))",
+            background: "hsl(var(--muted))",
+            flexShrink: 0,
+          }}
+        >
           {tabs.map((tab) => (
-            <button key={tab.id} type="button" onClick={() => !isDesignMode && setActiveTab(tab.id)}
+            <button
+              key={tab.id}
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleSelect(tab.id);
+              }}
               style={{
-                padding: "8px 16px", fontSize: "12px", fontWeight: activeTab === tab.id ? 700 : 500,
-                color: activeTab === tab.id ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))",
-                background: activeTab === tab.id ? "hsl(var(--card))" : "transparent",
-                border: "none", borderBottom: activeTab === tab.id ? "2px solid hsl(var(--primary))" : "2px solid transparent",
-                cursor: isDesignMode ? "default" : "pointer",
-              }}>
+                padding: "8px 16px",
+                fontSize: "12px",
+                fontWeight: activeTabId === tab.id ? 700 : 500,
+                color:
+                  activeTabId === tab.id
+                    ? "hsl(var(--primary))"
+                    : "hsl(var(--muted-foreground))",
+                background: activeTabId === tab.id ? "hsl(var(--card))" : "transparent",
+                border: "none",
+                borderBottom:
+                  activeTabId === tab.id
+                    ? "2px solid hsl(var(--primary))"
+                    : "2px solid transparent",
+                cursor: "pointer",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+              }}
+            >
+              {tab.icon && <span aria-hidden>{tab.icon}</span>}
               {tab.label}
             </button>
           ))}
         </div>
-        <div style={{ flex: 1, padding, minHeight: 0, overflow: "auto" }}>
-          <div style={{ color: "hsl(var(--muted-foreground))", fontSize: "11px", textAlign: "center", padding: "20px" }}>
-            [{activeTab}] 탭 컨텐츠 영역
-          </div>
+        {/*
+          탭 body — 디자인 모드 빌더에서 drop / 선택을 받는 영역.
+          data 속성 3개로 ScreenDesigner.handleComponentDrop 의 기존 tabs 분기가 그대로
+          canonical container 도 인식하게 한다 (별도 코드 패스 추가 없음).
+        */}
+        <div
+          data-tabs-container="true"
+          data-container-kind="canonical"
+          data-component-id={(component as any)?.id ?? ""}
+          data-active-tab-id={activeTabId}
+          style={{ flex: 1, padding, minHeight: 0, overflow: "auto" }}
+          onClick={(e) => {
+            // 빈 탭 안내 영역까지 포함해 body 클릭 시 탭 자식 선택 해제.
+            // ChildSlot click 은 stopPropagation 하므로 자식 선택과 충돌하지 않는다.
+            if (!isDesignMode) return;
+            if (typeof p.onSelectTabComponent === "function") {
+              e.stopPropagation();
+              p.onSelectTabComponent(activeTabId, "", null);
+            }
+          }}
+        >
+          {renderTabChildren(currentTab)}
         </div>
       </>
     );
   };
 
+  /**
+   * 활성 탭 한 개의 자식 컴포넌트만 렌더. 비활성 탭은 mount 자체를 하지 않음
+   * (성능 + side-effect 격리). 자식이 비어 있으면 디자인 모드 drop-zone, 운영
+   * 모드 빈 영역.
+   */
+  const renderTabChildren = (tab: ContainerTab | undefined): React.ReactNode => {
+    const childList: ContainerChildComponent[] = tab?.components ?? [];
+    const tabId = tab?.id ?? "";
+    const containerId = (component as any)?.id ?? "";
+    const onSelectChild = typeof p.onSelectTabComponent === "function"
+      ? p.onSelectTabComponent
+      : undefined;
+    const selectedChildId: string | undefined =
+      typeof p.selectedTabComponentId === "string" ? p.selectedTabComponentId : undefined;
+    const onUpdateContainerComponent = typeof p.onUpdateComponent === "function"
+      ? p.onUpdateComponent
+      : undefined;
+
+    if (childList.length === 0) {
+      if (isDesignMode) {
+        return (
+          <div
+            style={{
+              border: "1px dashed hsl(var(--border))",
+              borderRadius: 4,
+              padding: "24px",
+              textAlign: "center",
+              color: "hsl(var(--muted-foreground))",
+              fontSize: "11px",
+              minHeight: 80,
+            }}
+          >
+            이 탭이 비어 있습니다. 좌측 팔레트에서 컴포넌트를 끌어다 놓으세요.
+          </div>
+        );
+      }
+      return null;
+    }
+
+    /**
+     * 탭에서 특정 자식 삭제. ScreenDesigner 의 onUpdateComponent 가 있으면 그쪽으로
+     * 상위 layout 업데이트를 위임. 없으면 no-op (운영 모드 등).
+     */
+    const handleRemoveChild = (childId: string) => {
+      if (!onUpdateContainerComponent) return;
+      const nextTabs = (componentConfig.tabs ?? []).map((t) =>
+        t.id === tabId
+          ? { ...t, components: (t.components ?? []).filter((c) => c.id !== childId) }
+          : t,
+      );
+      onUpdateContainerComponent({
+        ...(component as any),
+        componentConfig: {
+          ...((component as any).componentConfig ?? {}),
+          tabs: nextTabs,
+        },
+      });
+      // 선택 해제
+      onSelectChild?.(tabId, "", null);
+    };
+
+    // 운영 모드는 단순 vertical stack. 빌더의 자유 배치 (size/position) 는 G.2
+    // 범위 밖. 차후 phase 에서 builder layout 모드 추가 시 같은 components 배열
+    // 위에 좌표 / order 를 얹는 식으로 확장.
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          minHeight: 0,
+        }}
+      >
+        {childList.map((child) => {
+          const isChildSelected = !!selectedChildId && child.id === selectedChildId;
+          return (
+            <ChildSlot
+              key={child.id}
+              child={child}
+              isDesignMode={isDesignMode}
+              isSelected={isChildSelected}
+              containerId={containerId}
+              tabId={tabId}
+              onSelect={
+                onSelectChild
+                  ? (e) => {
+                      e.stopPropagation();
+                      onSelectChild(tabId, child.id, child);
+                    }
+                  : undefined
+              }
+              onRemove={onUpdateContainerComponent ? () => handleRemoveChild(child.id) : undefined}
+              passProps={{
+                formData: p.formData,
+                onFormDataChange: p.onFormDataChange,
+                userId: p.userId,
+                userName: p.userName,
+                companyCode: p.companyCode,
+                screenId: p.screenId,
+                menuId: p.menuId,
+                menuObjid: p.menuObjid,
+                tableName: p.tableName,
+                selectedRows: p.selectedRows,
+                selectedRowsData: p.selectedRowsData,
+                onSelectedRowsChange: p.onSelectedRowsChange,
+                refreshKey: p.refreshKey,
+                onRefresh: p.onRefresh,
+                isInModal: p.isInModal,
+                parentTabId: tabId,
+                parentTabsComponentId: containerId,
+              }}
+            />
+          );
+        })}
+      </div>
+    );
+  };
+
   // ─── section ───────────────────────────────────────────────────────────
   const [collapsed, setCollapsed] = useState(componentConfig.defaultCollapsed ?? false);
 
@@ -290,6 +465,120 @@ export const ContainerComponent: React.FC<ContainerComponentProps> = ({
   );
 };
 
+/**
+ * ChildSlot — 탭 내부 단일 자식을 `DynamicComponentRenderer` 로 렌더하는 어댑터.
+ *
+ * `ContainerChildComponent` 의 `componentType / componentConfig / size` 를 renderer
+ * 가 기대하는 shape (`component: { componentType, componentConfig }`) 으로 정규화.
+ * 디자인 모드에서는 클릭 선택 / hover 삭제 버튼 / 선택 outline 을 제공.
+ */
+const ChildSlot: React.FC<{
+  child: ContainerChildComponent;
+  isDesignMode: boolean;
+  isSelected?: boolean;
+  containerId?: string;
+  tabId?: string;
+  onSelect?: (e: React.MouseEvent) => void;
+  onRemove?: () => void;
+  passProps: Record<string, any>;
+}> = ({ child, isDesignMode, isSelected, containerId, tabId, onSelect, onRemove, passProps }) => {
+  const [hover, setHover] = React.useState(false);
+
+  const componentForRenderer = React.useMemo(
+    () => ({
+      id: child.id,
+      componentType: child.componentType,
+      type: child.componentType,
+      componentConfig: child.componentConfig ?? {},
+      // legacy snake_case 호환 — DynamicComponentRenderer 가 둘 다 읽음
+      component_type: child.componentType,
+      component_config: child.componentConfig ?? {},
+      // size 가 있으면 inline style 으로 박스 폭만 통제 (기본은 부모 폭 100%)
+      size: child.size,
+    }),
+    [child.id, child.componentType, child.componentConfig, child.size],
+  );
+
+  const wrapStyle: React.CSSProperties = {
+    width: child.size?.width ?? "100%",
+    height: child.size?.height,
+    minHeight: 0,
+    flexShrink: 0,
+    position: "relative",
+    cursor: isDesignMode && onSelect ? "pointer" : undefined,
+    outline:
+      isDesignMode && isSelected
+        ? "2px solid hsl(var(--primary))"
+        : isDesignMode && hover
+          ? "1px dashed hsl(var(--primary))"
+          : "none",
+    outlineOffset: 2,
+    borderRadius: 4,
+  };
+
+  return (
+    <div
+      style={wrapStyle}
+      data-tab-child-id={child.id}
+      data-parent-tab-id={tabId}
+      data-parent-tabs-id={containerId}
+      onClick={isDesignMode && onSelect ? onSelect : undefined}
+      onMouseEnter={isDesignMode ? () => setHover(true) : undefined}
+      onMouseLeave={isDesignMode ? () => setHover(false) : undefined}
+    >
+      {isDesignMode && (isSelected || hover) && onRemove && (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          title="이 탭 자식 삭제"
+          style={{
+            position: "absolute",
+            top: 4,
+            right: 4,
+            zIndex: 5,
+            width: 22,
+            height: 22,
+            padding: 0,
+            border: "1px solid hsl(var(--border))",
+            borderRadius: 4,
+            background: "hsl(var(--card))",
+            color: "hsl(var(--destructive))",
+            cursor: "pointer",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: 12,
+            lineHeight: 1,
+            boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
+          }}
+        >
+          ✕
+        </button>
+      )}
+      {/*
+        디자인 모드에서는 자식 컴포넌트의 자체 클릭 핸들러가 ChildSlot 의 선택 click 을
+        가로채지 않도록 pointer-events 차단. 운영 모드에서는 자식이 정상 동작.
+      */}
+      <div
+        style={{
+          pointerEvents: isDesignMode ? "none" : undefined,
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        <DynamicComponentRenderer
+          component={componentForRenderer as any}
+          isDesignMode={isDesignMode}
+          {...passProps}
+        />
+      </div>
+    </div>
+  );
+};
+
 export const ContainerWrapper: React.FC<ContainerComponentProps> = (props) => {
   return <ContainerComponent {...props} />;
 };
diff --git a/frontend/lib/registry/components/container/InvContainerConfigPanel.tsx b/frontend/lib/registry/components/container/InvContainerConfigPanel.tsx
index 2c208ed2..855ffa79 100644
--- a/frontend/lib/registry/components/container/InvContainerConfigPanel.tsx
+++ b/frontend/lib/registry/components/container/InvContainerConfigPanel.tsx
@@ -194,6 +194,20 @@ export const InvContainerConfigPanel: React.FC<InvContainerConfigPanelProps> = (
                     }}
                     placeholder="탭 라벨"
                   />
+                  <span
+                    title="이 탭에 배치된 컴포넌트 수"
+                    style={{
+                      fontSize: 9.5,
+                      color: "var(--cp-text-muted)",
+                      fontFamily: "var(--v5-font-mono)",
+                      minWidth: 28,
+                      textAlign: "right",
+                    }}
+                  >
+                    {(tab.components?.length ?? 0) > 0
+                      ? `${tab.components!.length}개`
+                      : "·"}
+                  </span>
                   <CPIconBtn
                     tone="danger"
                     size={20}
diff --git a/frontend/lib/registry/components/container/types.ts b/frontend/lib/registry/components/container/types.ts
index aea1c70b..f6ef2570 100644
--- a/frontend/lib/registry/components/container/types.ts
+++ b/frontend/lib/registry/components/container/types.ts
@@ -29,9 +29,45 @@ export type ContainerType =
 
 export type SectionVariant = "card" | "paper" | "plain";
 
+/**
+ * 탭 / 컨테이너 내부에 배치되는 단일 자식 컴포넌트 디스크립터.
+ *
+ * Phase G.2 (Tabbed Data View) 에서 탭마다 다른 child 를 렌더하기 위한
+ * 최소 shape. `DynamicComponentRenderer` 가 받는 `componentType / componentConfig`
+ * 형식과 1:1 매칭. 빌더가 캔버스에서 컴포넌트를 추가하면 이 모양으로 저장된다.
+ *
+ * 의도적으로 `TemplateComponent` 전체보다 작게 유지 — order / row / responsive /
+ * parentId 등은 빌더의 자유 배치 layout 영역이며 탭 child 렌더에는 불필요.
+ */
+export interface ContainerChildComponent {
+  id: string;
+  /** ComponentRegistry ID — 예: "table", "stats", "search", "button", "input" */
+  componentType: string;
+  /** 컴포넌트별 설정. 로우코드 원칙상 느슨한 Record */
+  componentConfig?: Record<string, any>;
+  /** 빌더에서 표시되는 라벨 (선택) */
+  label?: string;
+  /** 탭 내부 자유 배치용 (선택) — runtime 은 무시 가능 */
+  size?: { width?: number | string; height?: number | string };
+}
+
 export interface ContainerTab {
   id: string;
   label: string;
+  /** 탭 헤더 좌측 아이콘 (lucide 이름 또는 이모지, 선택) */
+  icon?: string;
+  /**
+   * 이 탭이 활성화되었을 때 렌더할 자식 컴포넌트들 (Phase G.2).
+   * 비어 있으면 디자인 모드에서 drop-zone fallback, 운영 모드에서 빈 영역.
+   */
+  components?: ContainerChildComponent[];
+  /**
+   * 탭 별 데이터 소스 / 필터 / view type (Phase G.2 forward compat).
+   * runtime 은 현재 무시. 빌더 / 차후 phase 에서 의미 부여.
+   */
+  dataSources?: unknown[];
+  filters?: unknown[];
+  viewType?: string;
 }
 
 export interface ContainerConfig extends ComponentConfig {
diff --git a/frontend/lib/registry/components/grouped-table/GroupedTableComponent.tsx b/frontend/lib/registry/components/grouped-table/GroupedTableComponent.tsx
new file mode 100644
index 00000000..807bf992
--- /dev/null
+++ b/frontend/lib/registry/components/grouped-table/GroupedTableComponent.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import React from "react";
+import type { ComponentRendererProps } from "@/types/component";
+import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { useTableRows } from "../_shared/use-table-rows";
+import type {
+  GroupedTableColumn,
+  GroupedTableConfig,
+  GroupedTableDataSource,
+} from "./types";
+
+/**
+ * GroupedTable — canonical 그룹 테이블 컴포넌트 (Phase G.3.1)
+ *
+ * 백엔드 `/select-rows` 응답을 클라이언트 측에서 `groupBy` 키로 묶고, 그룹 헤더 +
+ * 안쪽 row 들로 두 단계 표 렌더. 운영 모드 / dataSource 완성 / fetch 성공 시
+ * 실제 row 사용. 디자인 모드 / 미완성: 정적 preview.
+ */
+
+const cellToText = (v: unknown): string => {
+  if (v === null || v === undefined || v === "") return "—";
+  if (typeof v === "number") return v.toLocaleString();
+  if (typeof v === "boolean") return v ? "✓" : "✗";
+  if (v instanceof Date) return v.toLocaleString();
+  return String(v);
+};
+
+export interface GroupedTableComponentProps extends ComponentRendererProps {
+  config?: GroupedTableConfig;
+}
+
+export const GroupedTableComponent: React.FC<GroupedTableComponentProps> = ({
+  component,
+  isDesignMode = false,
+  isSelected = false,
+  onClick,
+  onDragStart,
+  onDragEnd,
+  config,
+  className,
+  style,
+  ...props
+}) => {
+  const p = props as any;
+  const fromProps: Partial<GroupedTableConfig> = {};
+  if (typeof p.title === "string") fromProps.title = p.title;
+  if (p.dataSource && typeof p.dataSource === "object") fromProps.dataSource = p.dataSource;
+  if (typeof p.groupBy === "string") fromProps.groupBy = p.groupBy;
+  if (Array.isArray(p.columns)) fromProps.columns = p.columns;
+  if (typeof p.sortGroups === "string") fromProps.sortGroups = p.sortGroups;
+  if (typeof p.emptyText === "string") fromProps.emptyText = p.emptyText;
+
+  const componentConfig = {
+    ...config,
+    ...((component as any).config ?? {}),
+    ...((component as any).componentConfig ?? {}),
+    ...fromProps,
+  } as GroupedTableConfig;
+
+  const title = componentConfig.title;
+  const groupBy = componentConfig.groupBy;
+  const columns: GroupedTableColumn[] = componentConfig.columns ?? [];
+  const sortGroups = componentConfig.sortGroups ?? "none";
+  const emptyText = componentConfig.emptyText ?? "데이터 없음";
+  const previewGroupBy = groupBy ?? "group";
+  const previewFirstColumn = columns[0]?.column ?? "name";
+  const previewSecondColumn = columns[1]?.column ?? "value";
+
+  const userContext = React.useMemo(
+    () => ({
+      companyCode: (p.companyCode as string) || undefined,
+      userId: (p.userId as string) || undefined,
+      deptCode: (p.deptCode as string) || undefined,
+      userName: (p.userName as string) || undefined,
+    }),
+    [p.companyCode, p.userId, p.deptCode, p.userName],
+  );
+
+  const previewBuilder = React.useCallback(
+    (i: number) => ({
+      __preview: true,
+      [previewGroupBy]: `그룹 ${Math.floor(i / 2) + 1}`,
+      [previewFirstColumn]: `샘플 ${i + 1}`,
+      [previewSecondColumn]: (i + 1) * 5,
+    }),
+    [previewFirstColumn, previewGroupBy, previewSecondColumn],
+  );
+
+  const { rows, loading, error, isPreview } = useTableRows(componentConfig.dataSource, {
+    isDesignMode,
+    formData: (p.formData as Record<string, unknown>) || undefined,
+    userContext,
+    refreshKey: (p.refreshKey as number | string | undefined) || undefined,
+    previewCount: 6,
+    previewBuilder,
+  });
+
+  // 클라이언트 측 group-by
+  const grouped = React.useMemo(() => {
+    if (!groupBy) {
+      return [{ key: "__all", values: rows }];
+    }
+    const map = new Map<string, Record<string, any>[]>();
+    const order: string[] = [];
+    for (const row of rows) {
+      const raw = row[groupBy];
+      const key = raw === null || raw === undefined || raw === "" ? "—" : String(raw);
+      if (!map.has(key)) {
+        map.set(key, []);
+        order.push(key);
+      }
+      map.get(key)!.push(row);
+    }
+    let keys = order;
+    if (sortGroups === "asc") keys = [...order].sort((a, b) => a.localeCompare(b, "ko"));
+    else if (sortGroups === "desc") keys = [...order].sort((a, b) => b.localeCompare(a, "ko"));
+    return keys.map((k) => ({ key: k, values: map.get(k)! }));
+  }, [rows, groupBy, sortGroups]);
+
+  // 표시할 컬럼들 — 비어있으면 row 첫 항목의 모든 키 사용 (groupBy 자체는 제외)
+  const effectiveColumns: GroupedTableColumn[] = React.useMemo(() => {
+    if (columns.length > 0) return columns;
+    const sample = rows[0] ?? {};
+    return Object.keys(sample)
+      .filter((k) => k !== groupBy && !k.startsWith("__"))
+      .map((k) => ({ column: k }));
+  }, [columns, rows, groupBy]);
+
+  const containerStyle: React.CSSProperties = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    boxSizing: "border-box",
+    background: "hsl(var(--card))",
+    border: "1px solid hsl(var(--border))",
+    borderRadius: 8,
+    padding: 12,
+    minHeight: 180,
+    ...((component as any).style ?? {}),
+    ...style,
+  };
+  if (isDesignMode && isSelected) {
+    containerStyle.outline = "2px solid hsl(var(--primary))";
+    containerStyle.outlineOffset = "2px";
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  const {
+    selectedScreen: _1, onZoneComponentDrop: _2, onZoneClick: _3,
+    componentConfig: _4, component: _5, isSelected: _6,
+    onClick: _7, onDragStart: _8, onDragEnd: _9,
+    size: _10, position: _11, style: _12,
+    screenId: _13, tableName: _14, onRefresh: _15, onClose: _16,
+    web_type: _17, autoGeneration: _18, isInteractive: _19,
+    formData: _20, onFormDataChange: _21,
+    menuId: _22, menuObjid: _23, onSave: _24,
+    userId: _25, userName: _26, companyCode: _27, deptCode: _27b,
+    isInModal: _28, readonly: _29, originalData: _30,
+    selectedRows: _36, selectedRowsData: _37, onSelectedRowsChange: _38,
+    sortBy: _39, sortOrder: _40, tableDisplayData: _41,
+    flowSelectedData: _42, flowSelectedStepId: _43, onFlowSelectedDataChange: _44,
+    onConfigChange: _45, refreshKey: _46, flowRefreshKey: _47, onFlowRefresh: _48,
+    isPreview: _49, groupedData: _50,
+    title: _51, dataSource: _52, groupBy: _53,
+    columns: _54, sortGroups: _55, emptyText: _56,
+    disabled: _57, required: _58,
+    ...domProps
+  } = props as any;
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+
+  return (
+    <div
+      style={containerStyle}
+      className={className}
+      onClick={handleClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      {...filterDOMProps(domProps)}
+    >
+      {(title || isPreview || loading) && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            fontSize: 12,
+            fontWeight: 700,
+            color: "hsl(var(--foreground))",
+            marginBottom: 6,
+            flexShrink: 0,
+          }}
+        >
+          <span>{title || (isPreview ? "그룹 테이블 (미리보기)" : "")}</span>
+          {loading && (
+            <span style={{ fontSize: 10, color: "hsl(var(--muted-foreground))", fontWeight: 500 }}>
+              로딩…
+            </span>
+          )}
+        </div>
+      )}
+      <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
+        {error ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: 80,
+              fontSize: 12,
+              color: "hsl(var(--muted-foreground))",
+            }}
+          >
+            데이터 로드 실패: {error}
+          </div>
+        ) : rows.length === 0 || effectiveColumns.length === 0 ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minHeight: 80,
+              fontSize: 12,
+              color: "hsl(var(--muted-foreground))",
+            }}
+          >
+            {emptyText}
+          </div>
+        ) : (
+          <table
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              fontSize: 11.5,
+              fontFamily: "var(--v5-font-sans)",
+            }}
+          >
+            <thead>
+              <tr style={{ background: "hsl(var(--muted))" }}>
+                {effectiveColumns.map((c, i) => (
+                  <th
+                    key={i}
+                    style={{
+                      padding: "6px 8px",
+                      fontSize: 10.5,
+                      fontWeight: 700,
+                      textAlign: c.align ?? "left",
+                      color: "hsl(var(--muted-foreground))",
+                      borderBottom: "1px solid hsl(var(--border))",
+                      width: c.width,
+                    }}
+                  >
+                    {c.label ?? c.column}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {grouped.map((g, gi) => (
+                <React.Fragment key={gi}>
+                  {groupBy && (
+                    <tr style={{ background: "hsl(var(--accent))" }}>
+                      <td
+                        colSpan={effectiveColumns.length}
+                        style={{
+                          padding: "5px 8px",
+                          fontSize: 11,
+                          fontWeight: 700,
+                          color: "var(--v5-primary, hsl(var(--primary)))",
+                          borderBottom: "1px solid hsl(var(--border))",
+                        }}
+                      >
+                        {g.key}
+                        <span
+                          style={{
+                            marginLeft: 8,
+                            fontSize: 10,
+                            fontWeight: 500,
+                            color: "hsl(var(--muted-foreground))",
+                          }}
+                        >
+                          ({g.values.length}건)
+                        </span>
+                      </td>
+                    </tr>
+                  )}
+                  {g.values.map((row, ri) => (
+                    <tr
+                      key={ri}
+                      style={{
+                        borderBottom: "1px solid hsl(var(--border))",
+                      }}
+                    >
+                      {effectiveColumns.map((c, ci) => (
+                        <td
+                          key={ci}
+                          style={{
+                            padding: "5px 8px",
+                            textAlign: c.align ?? "left",
+                            color: "hsl(var(--foreground))",
+                            whiteSpace: "nowrap",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                          }}
+                        >
+                          {cellToText(row[c.column])}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export const GroupedTableWrapper: React.FC<GroupedTableComponentProps> = (props) => {
+  return <GroupedTableComponent {...props} />;
+};
diff --git a/frontend/lib/registry/components/grouped-table/GroupedTableRenderer.tsx b/frontend/lib/registry/components/grouped-table/GroupedTableRenderer.tsx
new file mode 100644
index 00000000..25fc2d72
--- /dev/null
+++ b/frontend/lib/registry/components/grouped-table/GroupedTableRenderer.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { GroupedTableDefinition } from "./index";
+import { GroupedTableComponent } from "./GroupedTableComponent";
+
+/**
+ * GroupedTable 렌더러 (Phase G.3.1) — id "grouped-table" 자가 등록.
+ */
+export class GroupedTableRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = GroupedTableDefinition;
+
+  render(): React.ReactElement {
+    return <GroupedTableComponent {...this.props} renderer={this} />;
+  }
+}
+
+GroupedTableRenderer.registerSelf();
+
+if (process.env.NODE_ENV === "development") {
+  GroupedTableRenderer.enableHotReload();
+}
diff --git a/frontend/lib/registry/components/grouped-table/InvGroupedTableConfigPanel.tsx b/frontend/lib/registry/components/grouped-table/InvGroupedTableConfigPanel.tsx
new file mode 100644
index 00000000..f6900180
--- /dev/null
+++ b/frontend/lib/registry/components/grouped-table/InvGroupedTableConfigPanel.tsx
@@ -0,0 +1,362 @@
+"use client";
+
+/**
+ * InvGroupedTableConfigPanel — canonical grouped-table 설정 패널 (Phase G.3.1)
+ *
+ *   ① 기본 — 제목 + 빈 결과 문구
+ *   ② 데이터 소스 — 테이블 / 정렬 / limit
+ *   ③ 그룹 — groupBy 컬럼 + 그룹 정렬
+ *   ④ 컬럼 — 표시할 컬럼 목록 (label / width / align)
+ *   ⑤ 필터 — OptionFilter 빌더
+ */
+
+import React from "react";
+import { Plus, Trash2 } from "lucide-react";
+import {
+  CPSection,
+  CPRow,
+  CPText,
+  CPSelect,
+  CPSegment,
+  CPNumber,
+  Hint,
+} from "@/components/v2/config-panels/_shared/cp";
+import { useDbTables } from "../common/useDbTables";
+import { OptionFilterRow } from "../_shared/FilterRow";
+import type { OptionFilter } from "../input/use-option-loader";
+import type {
+  GroupedTableConfig,
+  GroupedTableColumn,
+  GroupedTableDataSource,
+} from "./types";
+
+export interface InvGroupedTableConfigPanelProps {
+  config?: GroupedTableConfig;
+  onChange?: (config: GroupedTableConfig) => void;
+  selectedComponent?: { id: string; config?: GroupedTableConfig; [k: string]: any };
+}
+
+export const InvGroupedTableConfigPanel: React.FC<InvGroupedTableConfigPanelProps> = ({
+  config,
+  onChange,
+  selectedComponent,
+}) => {
+  const current: GroupedTableConfig =
+    (config as GroupedTableConfig) || (selectedComponent?.config as GroupedTableConfig) || {};
+  const patch = (p: Partial<GroupedTableConfig>) => onChange?.({ ...current, ...p });
+
+  const ds = current.dataSource ?? {};
+  const patchDataSource = (p: Partial<GroupedTableDataSource>) => {
+    const next = { ...ds, ...p };
+    if (
+      !next.tableName &&
+      (!next.filters || next.filters.length === 0) &&
+      (!next.orderBy || next.orderBy.length === 0)
+    ) {
+      patch({ dataSource: undefined });
+    } else {
+      patch({ dataSource: next });
+    }
+  };
+
+  const filters = ds.filters ?? [];
+  const columns: GroupedTableColumn[] = current.columns ?? [];
+
+  const orderByCol = ds.orderBy?.[0]?.column || "";
+  const orderByDir = ds.orderBy?.[0]?.direction || "desc";
+
+  const updateFilter = (idx: number, f: Partial<OptionFilter>) => {
+    const next = filters.map((it, i) => (i === idx ? { ...it, ...f } : it));
+    patchDataSource({ filters: next });
+  };
+  const addFilter = () =>
+    patchDataSource({
+      filters: [
+        ...filters,
+        { column: "", operator: "=", value_type: "static", value: "" } as OptionFilter,
+      ],
+    });
+  const removeFilter = (idx: number) => {
+    const next = filters.filter((_, i) => i !== idx);
+    patchDataSource({ filters: next.length === 0 ? undefined : next });
+  };
+
+  const updateColumn = (idx: number, c: Partial<GroupedTableColumn>) => {
+    const next = columns.map((it, i) => (i === idx ? { ...it, ...c } : it));
+    patch({ columns: next });
+  };
+  const addColumn = () => patch({ columns: [...columns, { column: "" }] });
+  const removeColumn = (idx: number) => {
+    const next = columns.filter((_, i) => i !== idx);
+    patch({ columns: next.length === 0 ? undefined : next });
+  };
+
+  const { options: tableOptions } = useDbTables();
+
+  return (
+    <div style={{ fontFamily: "var(--v5-font-sans)", color: "var(--cp-text)", padding: "0 12px" }}>
+      {/* ── ① 기본 ─────────────────────────── */}
+      <CPSection title="① 기본">
+        <CPRow label="제목">
+          <CPText
+            value={current.title || ""}
+            onChange={(v) => patch({ title: v || undefined })}
+            placeholder="날짜별 근태"
+          />
+        </CPRow>
+        <CPRow label="빈 결과 문구">
+          <CPText
+            value={current.emptyText || ""}
+            onChange={(v) => patch({ emptyText: v || undefined })}
+            placeholder="데이터 없음"
+          />
+        </CPRow>
+      </CPSection>
+
+      {/* ── ② 데이터 소스 ─────────────────────────── */}
+      <CPSection title="② 데이터 소스">
+        <CPRow label="테이블">
+          <CPSelect
+            value={ds.tableName || ""}
+            onChange={(v) => patchDataSource({ tableName: v || undefined })}
+          >
+            <option value="">선택...</option>
+            {tableOptions.map((t) => (
+              <option key={t.value} value={t.value}>
+                {t.label}
+              </option>
+            ))}
+          </CPSelect>
+        </CPRow>
+        <CPRow label="정렬 컬럼" help="비우면 created_date desc 또는 PK 순">
+          <CPText
+            value={orderByCol}
+            onChange={(v) =>
+              patchDataSource({
+                orderBy: v
+                  ? [{ column: v, direction: orderByDir as "asc" | "desc" }]
+                  : undefined,
+              })
+            }
+            placeholder="attendance_date"
+          />
+        </CPRow>
+        {orderByCol && (
+          <CPRow label="정렬 방향">
+            <CPSegment
+              value={orderByDir}
+              onChange={(v) =>
+                patchDataSource({
+                  orderBy: [{ column: orderByCol, direction: v as "asc" | "desc" }],
+                })
+              }
+              options={[
+                { value: "desc", label: "내림차순" },
+                { value: "asc", label: "오름차순" },
+              ]}
+            />
+          </CPRow>
+        )}
+        <CPRow label="최대 행 수" help="1 ~ 500. 기본 100">
+          <CPNumber
+            value={ds.limit ?? 100}
+            onChange={(v) => patchDataSource({ limit: v ?? 100 })}
+            min={1}
+            max={500}
+          />
+        </CPRow>
+      </CPSection>
+
+      {/* ── ③ 그룹 ─────────────────────────── */}
+      <CPSection title="③ 그룹">
+        <CPRow label="그룹 컬럼" help="이 컬럼 값별로 row 묶음">
+          <CPText
+            value={current.groupBy || ""}
+            onChange={(v) => patch({ groupBy: v || undefined })}
+            placeholder="attendance_date, dept_code, ..."
+          />
+        </CPRow>
+        <CPRow label="그룹 정렬">
+          <CPSegment
+            value={current.sortGroups ?? "none"}
+            onChange={(v) => patch({ sortGroups: v as "none" | "asc" | "desc" })}
+            options={[
+              { value: "none", label: "원본 순" },
+              { value: "asc", label: "오름차순" },
+              { value: "desc", label: "내림차순" },
+            ]}
+          />
+        </CPRow>
+      </CPSection>
+
+      {/* ── ④ 컬럼 ─────────────────────────── */}
+      <CPSection title={`④ 컬럼 ${columns.length > 0 ? `(${columns.length})` : "(자동)"}`}>
+        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 5 }}>
+          <button
+            type="button"
+            onClick={addColumn}
+            style={{
+              padding: "3px 8px",
+              fontSize: 10.5,
+              background: "var(--cp-bg-subtle)",
+              border: "1px solid var(--cp-border)",
+              borderRadius: 4,
+              cursor: "pointer",
+              color: "var(--cp-text)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 3,
+            }}
+          >
+            <Plus size={10} /> 추가
+          </button>
+        </div>
+        {columns.length === 0 ? (
+          <Hint>컬럼 미지정 — row 의 모든 컬럼 자동 표시</Hint>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            {columns.map((c, idx) => (
+              <ColumnRow
+                key={idx}
+                column={c}
+                onChange={(p) => updateColumn(idx, p)}
+                onRemove={() => removeColumn(idx)}
+              />
+            ))}
+          </div>
+        )}
+      </CPSection>
+
+      {/* ── ⑤ 필터 ─────────────────────────── */}
+      <CPSection title={`⑤ 필터 ${filters.length > 0 ? `(${filters.length})` : ""}`}>
+        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 5 }}>
+          <button
+            type="button"
+            onClick={addFilter}
+            style={{
+              padding: "3px 8px",
+              fontSize: 10.5,
+              background: "var(--cp-bg-subtle)",
+              border: "1px solid var(--cp-border)",
+              borderRadius: 4,
+              cursor: "pointer",
+              color: "var(--cp-text)",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 3,
+            }}
+          >
+            <Plus size={10} /> 추가
+          </button>
+        </div>
+        {filters.length === 0 ? (
+          <Hint>필터 없음 — 테이블 전체 row</Hint>
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+            {filters.map((f, idx) => (
+              <OptionFilterRow
+                key={idx}
+                filter={f}
+                onChange={(p) => updateFilter(idx, p)}
+                onRemove={() => removeFilter(idx)}
+                tableName={ds.tableName}
+              />
+            ))}
+          </div>
+        )}
+      </CPSection>
+    </div>
+  );
+};
+
+InvGroupedTableConfigPanel.displayName = "InvGroupedTableConfigPanel";
+
+function ColumnRow({
+  column,
+  onChange,
+  onRemove,
+}: {
+  column: GroupedTableColumn;
+  onChange: (p: Partial<GroupedTableColumn>) => void;
+  onRemove: () => void;
+}) {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1.2fr 1fr 60px 70px 18px",
+        gap: 4,
+        alignItems: "center",
+      }}
+    >
+      <input
+        type="text"
+        value={column.column}
+        onChange={(e) => onChange({ column: e.target.value })}
+        placeholder="컬럼명"
+        style={inputBase()}
+      />
+      <input
+        type="text"
+        value={column.label || ""}
+        onChange={(e) => onChange({ label: e.target.value || undefined })}
+        placeholder="라벨"
+        style={inputBase()}
+      />
+      <input
+        type="text"
+        value={column.width || ""}
+        onChange={(e) => onChange({ width: e.target.value || undefined })}
+        placeholder="auto"
+        style={inputBase()}
+      />
+      <select
+        value={column.align || "left"}
+        onChange={(e) =>
+          onChange({ align: e.target.value as GroupedTableColumn["align"] })
+        }
+        style={{ ...inputBase(), height: 22 }}
+      >
+        <option value="left">왼쪽</option>
+        <option value="center">가운데</option>
+        <option value="right">오른쪽</option>
+      </select>
+      <button
+        type="button"
+        onClick={onRemove}
+        style={{
+          width: 18,
+          height: 18,
+          padding: 0,
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          color: "var(--cp-text-muted)",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+        aria-label="컬럼 삭제"
+      >
+        <Trash2 size={11} />
+      </button>
+    </div>
+  );
+}
+
+function inputBase(): React.CSSProperties {
+  return {
+    height: 22,
+    padding: "0 6px",
+    fontSize: 11,
+    fontFamily: "var(--v5-font-sans)",
+    background: "var(--cp-surface)",
+    border: "1px solid var(--cp-border)",
+    borderRadius: 3,
+    color: "var(--cp-text)",
+    outline: "none",
+    minWidth: 0,
+  };
+}
+
+export default InvGroupedTableConfigPanel;
diff --git a/frontend/lib/registry/components/grouped-table/index.ts b/frontend/lib/registry/components/grouped-table/index.ts
new file mode 100644
index 00000000..a9cb5219
--- /dev/null
+++ b/frontend/lib/registry/components/grouped-table/index.ts
@@ -0,0 +1,48 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { GroupedTableWrapper } from "./GroupedTableComponent";
+import { InvGroupedTableConfigPanel } from "./InvGroupedTableConfigPanel";
+import type { GroupedTableConfig } from "./types";
+
+/**
+ * GroupedTable — canonical 그룹 테이블 (Phase G.3.1)
+ *
+ * `groupBy` 컬럼으로 row 를 묶어 그룹 헤더 + 안쪽 row 로 표시. 근태 / 일자별 /
+ * 부서별 view 같이 한 화면에서 그룹화된 결과를 보고 싶을 때.
+ */
+
+const DEFAULT_CONFIG: Partial<GroupedTableConfig> = {
+  sortGroups: "none",
+};
+
+export const GroupedTableDefinition = createComponentDefinition({
+  id: "grouped-table",
+  name: "그룹 테이블",
+  name_eng: "Grouped Table",
+  description: "row 들을 그룹 키로 묶어 헤더 + 안쪽 row 로 두 단계 표 렌더",
+  category: ComponentCategory.DATA,
+  web_type: "text",
+  component: GroupedTableWrapper,
+  default_config: DEFAULT_CONFIG as Record<string, any>,
+  default_size: { width: 540, height: 300 },
+  config_panel: InvGroupedTableConfigPanel,
+  icon: "Table2",
+  tags: ["그룹", "테이블", "table", "group", "rows"],
+  version: "1.0.0",
+  author: "INVYONE",
+  documentation:
+    "notes/gbpark/2026-05-14-studio-data-view-roadmap.md#phase-g31-progress",
+  dataPorts: {
+    inputs: [{ name: "data", type: "rows" }],
+  },
+});
+
+export type {
+  GroupedTableConfig,
+  GroupedTableColumn,
+  GroupedTableDataSource,
+} from "./types";
+export { GroupedTableComponent, GroupedTableWrapper } from "./GroupedTableComponent";
+export { InvGroupedTableConfigPanel } from "./InvGroupedTableConfigPanel";
diff --git a/frontend/lib/registry/components/grouped-table/types.ts b/frontend/lib/registry/components/grouped-table/types.ts
new file mode 100644
index 00000000..cdfb75fc
--- /dev/null
+++ b/frontend/lib/registry/components/grouped-table/types.ts
@@ -0,0 +1,44 @@
+"use client";
+
+import type { ComponentConfig } from "@/types/component";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+import type { SelectRowsOrderBy } from "@/lib/api/stats";
+
+/**
+ * canonical grouped-table 설정 타입 (Phase G.3.1)
+ *
+ * 같은 테이블의 row 들을 클라이언트 측에서 `groupBy` 로 묶어, 그룹 헤더 row + 안쪽
+ * child row 들의 두 단계 표로 렌더. 근태 / 일자별 / 부서별 / 카테고리별 view 처럼
+ * 한 화면에 row 묶음을 보고 싶을 때 사용.
+ */
+
+export interface GroupedTableColumn {
+  /** 표시할 컬럼 이름 */
+  column: string;
+  /** 헤더 라벨 (없으면 column 그대로) */
+  label?: string;
+  /** 너비 (`100px` 또는 `auto`). 없으면 균등 분배 */
+  width?: string;
+  /** 정렬 (text/number/center) */
+  align?: "left" | "right" | "center";
+}
+
+export interface GroupedTableDataSource {
+  tableName?: string;
+  filters?: OptionFilter[];
+  orderBy?: SelectRowsOrderBy[];
+  limit?: number;
+}
+
+export interface GroupedTableConfig extends ComponentConfig {
+  title?: string;
+  dataSource?: GroupedTableDataSource;
+  /** 그룹 키 컬럼. 같은 값을 가진 row 들이 하나의 헤더 row 아래 묶임 */
+  groupBy?: string;
+  /** 표 컬럼들. 비우면 모든 컬럼 표시 */
+  columns?: GroupedTableColumn[];
+  /** 그룹 정렬 — 기본 자연 순 (등장 순) */
+  sortGroups?: "asc" | "desc" | "none";
+  /** 빈 결과 문구 */
+  emptyText?: string;
+}
diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index bb0a8a15..ef139319 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -97,6 +97,9 @@ import "./button/ButtonRenderer";   // v2-button-primary + button-primary + rela
 import "./search/SearchRenderer";   // v2-table-search-widget + table-search-widget + autocomplete-search-input 흡수
 import "./input/InputRenderer";     // 20+ 레거시 입력 컴포넌트 흡수 (옛 V2 입력/선택 포함, Phase D.2 에서 V2 측 폐기)
 import "./stats/StatsRenderer";     // v2-aggregation-widget + v2-status-count + v2-card-display + legacy 흡수
+import "./chart/ChartRenderer";     // Phase G.3 — canonical 차트 (bar / horizontalBar / line / donut, recharts 기반)
+import "./card-list/CardListRenderer";    // Phase G.3.1 — canonical 카드 리스트
+import "./grouped-table/GroupedTableRenderer"; // Phase G.3.1 — canonical 그룹 테이블
 // form 컴포넌트는 롤백됨 (2026-04-11): "폼" 은 별도 컴포넌트가 아닌
 // 화면 디자이너의 3뷰 탭(목록/등록 팝업/수정 팝업) 구조로 처리할 예정.
 // 관련: notes/gbpark/2026-04-11-component-unification-plan.md §3.2
diff --git a/frontend/lib/registry/components/input/InputComponent.tsx b/frontend/lib/registry/components/input/InputComponent.tsx
index 02274591..9e768198 100644
--- a/frontend/lib/registry/components/input/InputComponent.tsx
+++ b/frontend/lib/registry/components/input/InputComponent.tsx
@@ -642,8 +642,9 @@ export const InputComponent: React.FC<InputComponentProps> = ({
               <TagPicker
                 value={arrValue}
                 onChange={(v) => propagate(v)}
-                placeholder={placeholder || "태그 입력 후 Enter"}
-                maxSelect={(componentConfig as any).maxSelect}
+                placeholder={placeholder && placeholder !== "입력하세요" ? placeholder : "태그 입력 후 Enter"}
+                maxSelect={(componentConfig as any).maxSelect ?? (componentConfig as any).maxTags}
+                separator={(componentConfig as any).tagSeparator || ","}
                 disabled={disabled}
                 readonly={readonly}
                 className="border-0 bg-transparent rounded-none"
@@ -722,19 +723,69 @@ export const InputComponent: React.FC<InputComponentProps> = ({
         );
       }
       case "checkbox": {
-        // single.boolean 영역. mode=toggle (기본 권장) 이면 TogglePicker, 그 외 단일 체크박스.
+        // single.boolean 영역. canonical input 이 직접 switch / checkbox / yes-no 버튼을 렌더한다.
         const cbMode = (componentConfig as any).mode;
-        if (cbMode === "toggle") {
+        const boolStyle = (componentConfig as any).boolStyle || (cbMode === "toggle" ? "switch" : "checkbox");
+        const trueLabel = (componentConfig as any).trueLabel || "예";
+        const falseLabel = (componentConfig as any).falseLabel || "아니오";
+        const checked =
+          value === true ||
+          value === 1 ||
+          (typeof value === "string" && ["true", "y", "yes", "1"].includes(value.toLowerCase()));
+        const lockEdit = disabled || readonly;
+
+        if (boolStyle === "switch" || cbMode === "toggle") {
           return (
             <TogglePicker
               value={value}
               onChange={(v) => propagate(v)}
+              trueLabel={trueLabel}
+              falseLabel={falseLabel}
               disabled={disabled}
               readonly={readonly}
               className="border-0 bg-transparent rounded-none"
             />
           );
         }
+        if (boolStyle === "yesno") {
+          const buttonBase: React.CSSProperties = {
+            minWidth: "52px",
+            height: "28px",
+            borderRadius: "6px",
+            border: "1px solid var(--input-border, rgba(148, 163, 184, 0.35))",
+            fontSize: "13px",
+            cursor: lockEdit ? "not-allowed" : "pointer",
+            opacity: lockEdit ? 0.6 : 1,
+          };
+          return (
+            <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "0 8px", height: "100%" }}>
+              <button
+                type="button"
+                disabled={lockEdit}
+                onClick={() => !lockEdit && propagate(true)}
+                style={{
+                  ...buttonBase,
+                  background: checked ? "var(--primary, #3b82f6)" : "transparent",
+                  color: checked ? "var(--primary-foreground, #ffffff)" : "inherit",
+                }}
+              >
+                {trueLabel}
+              </button>
+              <button
+                type="button"
+                disabled={lockEdit}
+                onClick={() => !lockEdit && propagate(false)}
+                style={{
+                  ...buttonBase,
+                  background: !checked ? "var(--primary, #3b82f6)" : "transparent",
+                  color: !checked ? "var(--primary-foreground, #ffffff)" : "inherit",
+                }}
+              >
+                {falseLabel}
+              </button>
+            </div>
+          );
+        }
         return (
           <label
             style={{
@@ -743,17 +794,17 @@ export const InputComponent: React.FC<InputComponentProps> = ({
               gap: "6px",
               fontSize: "13px",
               padding: "0 8px",
-              cursor: disabled ? "not-allowed" : "pointer",
+              cursor: lockEdit ? "not-allowed" : "pointer",
+              opacity: lockEdit ? 0.7 : 1,
             }}
           >
             <input
               type="checkbox"
-              checked={!!value}
+              checked={checked}
               onChange={(e) => propagate(e.target.checked)}
-              disabled={disabled}
-              readOnly={readonly}
+              disabled={lockEdit}
             />
-            <span>{placeholder || label || "체크"}</span>
+            <span>{checked ? trueLabel : falseLabel}</span>
           </label>
         );
       }
diff --git a/frontend/lib/registry/components/input/select-pickers.tsx b/frontend/lib/registry/components/input/select-pickers.tsx
index b58d9648..b51dccea 100644
--- a/frontend/lib/registry/components/input/select-pickers.tsx
+++ b/frontend/lib/registry/components/input/select-pickers.tsx
@@ -541,12 +541,16 @@ export const TagPicker = React.forwardRef<HTMLDivElement, TagPickerProps>(
     const tags: string[] = Array.isArray(value) ? value : [];
     const lockEdit = !!disabled || !!readonly;
 
-    const addTag = (tag: string) => {
-      const trimmed = tag.trim();
-      if (!trimmed) return;
-      if (tags.includes(trimmed)) return;
-      if (maxSelect && tags.length >= maxSelect) return;
-      onChange?.([...tags, trimmed]);
+    const commitTags = (raw: string) => {
+      const parts = separator ? raw.split(separator) : [raw];
+      const next = [...tags];
+      for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed || next.includes(trimmed)) continue;
+        if (maxSelect && next.length >= maxSelect) break;
+        next.push(trimmed);
+      }
+      if (next.length !== tags.length) onChange?.(next);
     };
 
     const removeTag = (idx: number) => {
@@ -557,7 +561,7 @@ export const TagPicker = React.forwardRef<HTMLDivElement, TagPickerProps>(
       if (e.key === "Enter" || (separator && e.key === separator)) {
         e.preventDefault();
         if (input.trim()) {
-          addTag(input);
+          commitTags(input);
           setInput("");
         }
       } else if (e.key === "Backspace" && input === "" && tags.length > 0) {
@@ -570,9 +574,11 @@ export const TagPicker = React.forwardRef<HTMLDivElement, TagPickerProps>(
         ref={ref}
         className={cn(
           "flex h-full w-full flex-wrap items-center gap-1 px-2 py-1 text-sm",
+          "content-start",
           lockEdit && "cursor-not-allowed",
           className,
         )}
+        style={{ alignItems: "flex-start" }}
       >
         {tags.map((tag, i) => (
           <span
@@ -596,10 +602,24 @@ export const TagPicker = React.forwardRef<HTMLDivElement, TagPickerProps>(
           <input
             type="text"
             value={input}
-            onChange={(e) => setInput(e.target.value)}
+            onChange={(e) => {
+              const next = e.target.value;
+              if (separator && next.includes(separator)) {
+                commitTags(next);
+                setInput("");
+                return;
+              }
+              setInput(next);
+            }}
             onKeyDown={handleKeyDown}
+            onBlur={() => {
+              if (input.trim()) {
+                commitTags(input);
+                setInput("");
+              }
+            }}
             placeholder={tags.length === 0 ? placeholder : ""}
-            className="min-w-[80px] flex-1 bg-transparent text-sm outline-none"
+            className="min-w-[80px] flex-1 bg-transparent text-sm leading-6 outline-none"
             disabled={lockEdit}
           />
         )}
diff --git a/frontend/lib/registry/components/stats/InvStatsConfigPanel.tsx b/frontend/lib/registry/components/stats/InvStatsConfigPanel.tsx
index ee8ed74f..47ad67a7 100644
--- a/frontend/lib/registry/components/stats/InvStatsConfigPanel.tsx
+++ b/frontend/lib/registry/components/stats/InvStatsConfigPanel.tsx
@@ -3,18 +3,35 @@
 /**
  * InvStatsConfigPanel — 통합 "통계 카드" (id: stats) cp 톤 설정 패널
  *
+ * Phase G.4.2 — **DB-first KPI editor**.
+ *
+ * stats 는 KPI / 집계 컴포넌트다. 본 역할:
+ *   - 테이블 선택
+ *   - 집계 선택
+ *   - (필요 시) 집계 컬럼 선택
+ *   - 필터 적용
+ *   - 결과 숫자 표시
+ *
+ * 그래서 항목 default 자체가 `{ label, dataSource: { aggregation: "count" } }` 이며,
+ * fallback value / 변화량 (delta) 는 모두 "고급" 섹션 안의 보조 옵션이다. 메인 흐름에
+ * 직접 노출되지 않는다.
+ *
  * 흐름:
  *   ① 기본 — 제목
- *   ② 데이터 소스 — 테이블 (CPSelect)
- *   ③ 배치 + 스타일 — orientation (CPSegment) + grid 열수 + style (CPVisualGrid 시각)
- *   ④ 색상 프리셋 — 4개 swatch grid (한 번 클릭 → items[] 의 색 일괄 적용)
- *   ⑤ 항목 list — dense + 펼침 (라벨+값 한 줄, 펼치면 icon/색/델타)
+ *   ② 배치 + 스타일
+ *   ③ 색상 프리셋
+ *   ④ KPI 항목 list — collapsed row 가 핵심 KPI 메타 (라벨 / 테이블 / 집계 / 필터수)
+ *     · 펼치면: 데이터 → 필터 → 외형 → 고급 (flat CP rows, 카드-속-카드 X)
  *
  * Reference: notes/gbpark/2026-04-28-cp-panel-standard.md
  */
 
 import React, { useState } from "react";
-import { Plus, TrendingUp, TrendingDown, Minus } from "lucide-react";
+import {
+  Plus,
+  Filter as FilterIcon,
+  ChevronRight,
+} from "lucide-react";
 import {
   CPSection,
   CPRow,
@@ -25,15 +42,29 @@ import {
   CPColor,
   CPVisualGrid,
   Hint,
+  SectionLabel,
 } from "@/components/v2/config-panels/_shared/cp";
 import { IconPicker } from "../common/IconPicker";
 import { useDbTables } from "../common/useDbTables";
-import {
-  RowNumberBadge,
-  RowExpandChevron,
-  RowDeleteBtn,
-} from "../common/row-helpers";
-import type { StatsConfig, StatsItem } from "./types";
+import { RowNumberBadge, RowDeleteBtn } from "../common/row-helpers";
+import { OptionFilterRow } from "../_shared/FilterRow";
+import { ColumnPicker } from "../_shared/ColumnPicker";
+import type { OptionFilter } from "../input/use-option-loader";
+import type {
+  StatsConfig,
+  StatsItem,
+  StatItemDataSource,
+  StatsAggregation,
+} from "./types";
+
+const AGGREGATION_OPTS: Array<{ value: StatsAggregation; label: string }> = [
+  { value: "count", label: "건수" },
+  { value: "distinctCount", label: "고유" },
+  { value: "sum", label: "합계" },
+  { value: "avg", label: "평균" },
+  { value: "min", label: "최소" },
+  { value: "max", label: "최대" },
+];
 
 const COLOR_PRESETS = [
   { id: "blue", name: "블루", colors: ["#3b82f6", "#60a5fa", "#2563eb", "#1d4ed8"] },
@@ -42,6 +73,11 @@ const COLOR_PRESETS = [
   { id: "dark", name: "다크", colors: ["#1e3a5f", "#1e3f28", "#5c3c0a", "#5c1a1a"] },
 ];
 
+const blankItem = (n: number): StatsItem => ({
+  label: `항목 ${n}`,
+  dataSource: { aggregation: "count" },
+});
+
 export interface InvStatsConfigPanelProps {
   config?: StatsConfig;
   onChange?: (config: StatsConfig) => void;
@@ -52,13 +88,69 @@ export interface InvStatsConfigPanelProps {
   onTableChange?: (tableName: string) => void;
 }
 
+// Phase G.4.2 — KPI 패널 keyframes (한 번만 inject). cp 패널 표준 톤 .18s ease-out.
+const KEYFRAMES = `
+@keyframes stats-kpi-slide-down {
+  from { opacity: 0; transform: translateY(-2px); max-height: 0; }
+  to   { opacity: 1; transform: translateY(0);    max-height: 1200px; }
+}
+@keyframes stats-kpi-slide-up {
+  from { opacity: 1; transform: translateY(0);    max-height: 1200px; }
+  to   { opacity: 0; transform: translateY(-2px); max-height: 0; }
+}
+@keyframes stats-kpi-fade-in {
+  from { opacity: 0; transform: translateY(-1px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes stats-kpi-pop-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}`;
+
+const SLIDE_DURATION_MS = 180;
+
+function useKeyframesOnce() {
+  React.useEffect(() => {
+    const id = "stats-kpi-keyframes";
+    if (typeof document === "undefined" || document.getElementById(id)) return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = KEYFRAMES;
+    document.head.appendChild(style);
+  }, []);
+}
+
+/**
+ * useSlideToggle — open 변화 시 닫힘 애니메이션이 끝날 때까지 dom 유지.
+ * open true → render true (즉시)
+ * open false → closing true → SLIDE_DURATION 후 render false
+ */
+function useSlideToggle(open: boolean) {
+  const [render, setRender] = React.useState(open);
+  const [closing, setClosing] = React.useState(false);
+  React.useEffect(() => {
+    if (open) {
+      setRender(true);
+      setClosing(false);
+      return;
+    }
+    if (!render) return;
+    setClosing(true);
+    const t = setTimeout(() => {
+      setRender(false);
+      setClosing(false);
+    }, SLIDE_DURATION_MS);
+    return () => clearTimeout(t);
+  }, [open, render]);
+  return { render, closing };
+}
+
 export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
   config,
   onChange,
   selectedComponent,
-  screenTableName,
-  onTableChange,
 }) => {
+  useKeyframesOnce();
   const current: StatsConfig =
     (config as StatsConfig) || (selectedComponent?.config as StatsConfig) || {};
 
@@ -72,12 +164,7 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
   };
 
   const addItem = () => {
-    patch({
-      items: [
-        ...items,
-        { label: `항목 ${items.length + 1}`, value: 0 },
-      ],
-    });
+    patch({ items: [...items, blankItem(items.length + 1)] });
   };
 
   const removeItem = (idx: number) => {
@@ -88,7 +175,6 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
 
   const orientation = current.orientation || "horizontal";
   const styleMode = current.style || "card";
-  const sourceTable = current.sourceTable || screenTableName || "";
 
   return (
     <div style={{ fontFamily: "var(--v5-font-sans)", color: "var(--cp-text)", padding: "0 12px" }}>
@@ -103,28 +189,8 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
         </CPRow>
       </CPSection>
 
-      {/* ── ② 데이터 소스 ─────────────────────────── */}
-      <CPSection title="② 데이터 소스" desc="집계할 DB 테이블 (선택)">
-        <CPRow label="테이블">
-          <CPSelect
-            value={sourceTable}
-            onChange={(v) => {
-              onTableChange?.(v);
-              patch({ sourceTable: v || undefined });
-            }}
-          >
-            <option value="">선택...</option>
-            {tableOptions.map((t) => (
-              <option key={t.value} value={t.value}>
-                {t.label}
-              </option>
-            ))}
-          </CPSelect>
-        </CPRow>
-      </CPSection>
-
-      {/* ── ③ 배치 + 스타일 ─────────────────────────── */}
-      <CPSection title="③ 배치 + 스타일" desc="항목을 어떻게 보여줄지">
+      {/* ── ② 배치 + 스타일 ─────────────────────────── */}
+      <CPSection title="② 배치 + 스타일" desc="항목을 어떻게 보여줄지">
         <CPRow label="배치">
           <CPSegment
             value={orientation}
@@ -178,26 +244,18 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
         </div>
       </CPSection>
 
-      {/* ── ④ 색상 프리셋 ─────────────────────────── */}
-      <CPSection title="④ 색상 프리셋" desc="모든 항목에 일괄 적용">
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(2, 1fr)",
-            gap: 6,
-          }}
-        >
+      {/* ── ③ 색상 프리셋 ─────────────────────────── */}
+      <CPSection title="③ 색상 프리셋" desc="모든 항목에 일괄 적용">
+        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 6 }}>
           {COLOR_PRESETS.map((preset) => (
             <button
               key={preset.id}
               type="button"
               onClick={() => {
                 if (items.length === 0) {
-                  // 항목이 없으면 4개 만들고 색 적용
                   patch({
                     items: preset.colors.map((c, i) => ({
-                      label: `항목 ${i + 1}`,
-                      value: 0,
+                      ...blankItem(i + 1),
                       color: c,
                     })),
                   });
@@ -223,7 +281,7 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
               }}
               onMouseEnter={(e) => {
                 (e.currentTarget as HTMLButtonElement).style.borderColor =
-                  "rgba(var(--v5-primary-rgb), 0.4)";
+                  "hsl(var(--primary) / 0.4)";
                 (e.currentTarget as HTMLButtonElement).style.background =
                   "var(--cp-surface-hover, var(--cp-surface))";
               }}
@@ -248,33 +306,20 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
                   />
                 ))}
               </span>
-              <span
-                style={{
-                  fontSize: 10.5,
-                  fontWeight: 600,
-                  color: "var(--cp-text-sec)",
-                  letterSpacing: "-0.005em",
-                }}
-              >
+              <span style={{ fontSize: 10.5, fontWeight: 600, color: "var(--cp-text-sec)", letterSpacing: "-0.005em" }}>
                 {preset.name}
               </span>
             </button>
           ))}
         </div>
         <Hint>
-          항목이 없으면 4개 자동 생성 + 색 적용. 있으면 기존 항목 색만 일괄 변경.
+          항목이 없으면 KPI 4개 자동 생성 + 색 적용. 있으면 기존 항목 색만 일괄 변경.
         </Hint>
       </CPSection>
 
-      {/* ── ⑤ 항목 list ─────────────────────────── */}
-      <CPSection title="⑤ 항목" desc={`${items.length}개`}>
-        <div
-          style={{
-            display: "flex",
-            justifyContent: "flex-end",
-            marginBottom: 5,
-          }}
-        >
+      {/* ── ④ KPI 항목 ─────────────────────────── */}
+      <CPSection title="④ KPI 항목" desc={`${items.length}개`}>
+        <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 5 }}>
           <button
             type="button"
             onClick={addItem}
@@ -290,6 +335,19 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
               display: "inline-flex",
               alignItems: "center",
               gap: 4,
+              transition: "background-color .15s ease, border-color .15s ease, color .15s ease",
+            }}
+            onMouseEnter={(e) => {
+              const b = e.currentTarget as HTMLButtonElement;
+              b.style.borderColor = "hsl(var(--primary) / 0.4)";
+              b.style.color = "hsl(var(--primary))";
+              b.style.background = "hsl(var(--primary) / 0.06)";
+            }}
+            onMouseLeave={(e) => {
+              const b = e.currentTarget as HTMLButtonElement;
+              b.style.borderColor = "var(--cp-border)";
+              b.style.color = "var(--cp-text)";
+              b.style.background = "var(--cp-bg-subtle)";
             }}
           >
             <Plus size={10} /> 추가
@@ -298,7 +356,7 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
 
         {items.length === 0 ? (
           <Hint>
-            항목이 없습니다. [+ 추가] 또는 위 [색상 프리셋] 클릭으로 4개 자동 생성.
+            KPI 항목이 없습니다. [+ 추가] 또는 위 [색상 프리셋] 클릭으로 4개 자동 생성.
           </Hint>
         ) : (
           <div
@@ -315,6 +373,7 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
                 index={idx}
                 item={item}
                 isLast={idx === items.length - 1}
+                tableOptions={tableOptions}
                 onChange={(p) => updateItem(idx, p)}
                 onRemove={() => removeItem(idx)}
               />
@@ -329,7 +388,7 @@ export const InvStatsConfigPanel: React.FC<InvStatsConfigPanelProps> = ({
 InvStatsConfigPanel.displayName = "InvStatsConfigPanel";
 
 // ───────────────────────────────────────────────────────
-// CardPreview / ChipPreview / BigNumberPreview — 표시 스타일 미리보기
+// preview cards (시각 스타일 미리보기)
 // ───────────────────────────────────────────────────────
 function CardPreview() {
   return (
@@ -359,8 +418,8 @@ function ChipPreview() {
         alignItems: "center",
         gap: 4,
         padding: "2px 8px",
-        background: "rgba(var(--v5-primary-rgb), 0.15)",
-        color: "var(--v5-primary, #6c5ce7)",
+        background: "hsl(var(--primary) / 0.15)",
+        color: "hsl(var(--primary))",
         borderRadius: 999,
         fontSize: 9,
         fontWeight: 700,
@@ -381,23 +440,60 @@ function BigNumberPreview() {
 }
 
 // ───────────────────────────────────────────────────────
-// ItemEditRow — 항목 한 줄 (라벨+값 + 펼침: icon/색/델타)
+// ItemEditRow — Phase G.4.2 DB-first KPI row
 // ───────────────────────────────────────────────────────
 function ItemEditRow({
   index,
   item,
   isLast,
+  tableOptions,
   onChange,
   onRemove,
 }: {
   index: number;
   item: StatsItem;
   isLast: boolean;
+  tableOptions: { value: string; label: string }[];
   onChange: (p: Partial<StatsItem>) => void;
   onRemove: () => void;
 }) {
   const [hover, setHover] = useState(false);
   const [expanded, setExpanded] = useState(false);
+  const expandAnim = useSlideToggle(expanded);
+
+  const ds = item.dataSource ?? { aggregation: "count" };
+  const aggregation: StatsAggregation = ds.aggregation ?? "count";
+  const needsColumn = aggregation !== "count";
+  const filters = ds.filters ?? [];
+  const filterCount = filters.length;
+
+  // 항상 dataSource 가 있도록 보장 (G.4.2 — DB-first). 새 항목은 default 가 이미 채워져
+  // 있지만, 옛 데이터 (value 만 있는 legacy item) 도 inline 편집 가능하게.
+  const patchDs = (p: Partial<StatItemDataSource>) => {
+    const next = { ...ds, ...p };
+    if (!next.tableName && (!next.filters || next.filters.length === 0) && !next.columnName && !next.aggregation) {
+      // 모두 비면 dataSource 제거 (사용자가 명시적으로 비웠다는 의도)
+      onChange({ dataSource: undefined });
+    } else {
+      onChange({ dataSource: next });
+    }
+  };
+
+  const updateFilter = (i: number, f: Partial<OptionFilter>) => {
+    const next = filters.map((it, k) => (k === i ? { ...it, ...f } : it));
+    patchDs({ filters: next });
+  };
+  const addFilter = () =>
+    patchDs({
+      filters: [
+        ...filters,
+        { column: "", operator: "=", value_type: "static", value: "" } as OptionFilter,
+      ],
+    });
+  const removeFilter = (i: number) => {
+    const next = filters.filter((_, k) => k !== i);
+    patchDs({ filters: next.length === 0 ? undefined : next });
+  };
 
   return (
     <div
@@ -405,66 +501,194 @@ function ItemEditRow({
       onMouseLeave={() => setHover(false)}
       style={{
         borderBottom: isLast ? "none" : "1px solid var(--cp-border-subtle)",
-        background: hover ? "var(--cp-surface-hover, var(--cp-surface))" : "transparent",
-        transition: "background .12s ease",
+        // expanded 강조는 close animation 동안 유지하기 위해 render 기준 (slide-up
+        // 끝나야 비활성). 배경은 옅은 hover tint 만.
+        background:
+          hover && !expandAnim.render
+            ? "hsl(var(--primary) / 0.025)"
+            : "transparent",
+        borderLeft: `2px solid ${
+          expandAnim.render ? "hsl(var(--primary))" : "transparent"
+        }`,
+        transition:
+          "background-color .15s ease, border-left-color .15s ease",
         fontFamily: "var(--v5-font-sans)",
+        animation: "stats-kpi-fade-in .18s ease-out",
       }}
     >
-      {/* 한 줄: # · color dot · 라벨 · 값 · 펼침 · 삭제 */}
+      {/* collapsed KPI — 단일 padded 컨테이너 + flex column gap. 일관된 간격. */}
       <div
         style={{
-          display: "grid",
-          gridTemplateColumns: "16px 10px 1fr 80px 18px 22px",
-          alignItems: "center",
-          columnGap: 6,
           padding: "5px 8px",
-          minHeight: 28,
+          display: "flex",
+          flexDirection: "column",
+          gap: 4,
         }}
       >
-        <RowNumberBadge n={index + 1} />
-        <span
-          aria-hidden
-          style={{
-            width: 8,
-            height: 8,
-            borderRadius: 2,
-            background: item.color || "var(--cp-border-strong, var(--cp-border))",
-            boxShadow: item.color ? `0 0 4px ${item.color}55` : "none",
-          }}
-        />
-        <input
-          type="text"
-          value={item.label}
-          onChange={(e) => onChange({ label: e.target.value })}
-          placeholder="라벨"
-          style={inputStyle()}
-        />
-        <input
-          type="text"
-          value={item.value?.toString() ?? ""}
-          onChange={(e) => {
-            const v = e.target.value;
-            onChange({ value: isNaN(Number(v)) || v === "" ? v : Number(v) });
-          }}
-          placeholder="값"
-          style={inputStyle({ mono: true })}
-        />
-        <RowExpandChevron
-          expanded={expanded}
-          onToggle={() => setExpanded((x) => !x)}
-        />
-        <RowDeleteBtn onClick={onRemove} visible={hover} />
-      </div>
-
-      {expanded && (
+        {/* 1줄 — 라벨 input + 삭제 (펼침 chevron 제거; 메타 chip 클릭으로 토글) */}
         <div
           style={{
-            padding: "4px 8px 8px 30px",
-            display: "flex",
-            flexDirection: "column",
-            gap: 6,
+            display: "grid",
+            gridTemplateColumns: "16px minmax(0, 1fr) 22px",
+            alignItems: "center",
+            columnGap: 6,
           }}
         >
+          <RowNumberBadge n={index + 1} />
+          <input
+            type="text"
+            value={item.label}
+            onChange={(e) => onChange({ label: e.target.value })}
+            placeholder="라벨"
+            style={inputStyle()}
+            title="KPI 라벨"
+          />
+          <RowDeleteBtn onClick={onRemove} visible={hover} />
+        </div>
+        {/* 2줄 — 메타 chip 클릭 = expand 토글. 라벨 column 과 동일 grid 로 정렬 */}
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "16px minmax(0, 1fr) 22px",
+            alignItems: "center",
+            columnGap: 6,
+          }}
+        >
+          <span />
+          <KpiMetaSegment
+            tableValue={ds.tableName}
+            tableLabel={
+              ds.tableName
+                ? tableOptions.find((t) => t.value === ds.tableName)?.label ?? ds.tableName
+                : undefined
+            }
+            aggregationLabel={
+              AGGREGATION_OPTS.find((o) => o.value === aggregation)?.label ?? aggregation
+            }
+            columnName={ds.columnName}
+            filterCount={filterCount}
+            expanded={expandAnim.render}
+            onClick={() => setExpanded((x) => !x)}
+          />
+          <span />
+        </div>
+      </div>
+
+      {expandAnim.render && (
+        <div
+          className="stats-kpi-expand"
+          style={{
+            padding: "4px 10px 8px 26px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+            overflow: "hidden",
+            animation: expandAnim.closing
+              ? "stats-kpi-slide-up .18s ease-out forwards"
+              : "stats-kpi-slide-down .18s ease-out",
+          }}
+        >
+          {/* ── 데이터 ───────────────────────────── */}
+          <SectionLabel text="데이터" />
+          <CPRow label="테이블">
+            <CPSelect
+              value={ds.tableName || ""}
+              onChange={(v) => patchDs({ tableName: v || undefined })}
+            >
+              <option value="">선택...</option>
+              {tableOptions.map((t) => (
+                <option key={t.value} value={t.value}>
+                  {t.label}
+                </option>
+              ))}
+            </CPSelect>
+          </CPRow>
+          <CPRow label="집계">
+            <CPSelect
+              value={aggregation}
+              onChange={(v) => patchDs({ aggregation: (v as StatsAggregation) || "count" })}
+            >
+              {AGGREGATION_OPTS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </CPSelect>
+          </CPRow>
+          {(needsColumn || ds.columnName) && (
+            <CPRow label="컬럼" help={needsColumn ? "필수" : "(count 는 비워도 됨)"}>
+              <ColumnPicker
+                tableName={ds.tableName}
+                value={ds.columnName}
+                onChange={(v) => patchDs({ columnName: v || undefined })}
+              />
+            </CPRow>
+          )}
+          {!ds.tableName && (
+            <Hint>
+              테이블을 선택하면 운영 모드에서 DB 집계 값이 자동 표시됩니다. 디자인 모드는 항상 "—".
+            </Hint>
+          )}
+
+          {/* ── 필터 ───────────────────────────── */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginTop: 8,
+            }}
+          >
+            <SectionLabel text={`필터${filterCount > 0 ? ` (${filterCount})` : ""}`} />
+            <button
+              type="button"
+              onClick={addFilter}
+              style={{
+                padding: "2px 6px",
+                fontSize: 10,
+                background: "var(--cp-surface)",
+                border: "1px solid var(--cp-border)",
+                borderRadius: 3,
+                cursor: "pointer",
+                color: "var(--cp-text)",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 3,
+                transition:
+                  "background-color .15s ease, border-color .15s ease, color .15s ease",
+              }}
+              onMouseEnter={(e) => {
+                const b = e.currentTarget as HTMLButtonElement;
+                b.style.borderColor = "hsl(var(--primary) / 0.4)";
+                b.style.color = "hsl(var(--primary))";
+              }}
+              onMouseLeave={(e) => {
+                const b = e.currentTarget as HTMLButtonElement;
+                b.style.borderColor = "var(--cp-border)";
+                b.style.color = "var(--cp-text)";
+              }}
+            >
+              <Plus size={9} /> 추가
+            </button>
+          </div>
+          {filterCount === 0 ? (
+            <Hint>필터 없음 — 테이블 전체 집계</Hint>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+              {filters.map((f, i) => (
+                <OptionFilterRow
+                  key={i}
+                  filter={f}
+                  onChange={(p) => updateFilter(i, p)}
+                  onRemove={() => removeFilter(i)}
+                  tableName={ds.tableName}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* ── 외형 ───────────────────────────── */}
+          <SectionLabel text="외형" />
           <CPRow label="아이콘">
             <IconPicker
               value={item.icon || ""}
@@ -477,59 +701,216 @@ function ItemEditRow({
               onChange={(v) => onChange({ color: v || undefined })}
             />
           </CPRow>
-          <CPRow label="변화량" help="예: +12.4% / -3 / 0">
+
+          {/* ── 고급 ───────────────────────────── */}
+          <AdvancedSection item={item} onChange={onChange} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ───────────────────────────────────────────────────────
+// KpiMetaSegment — CPSegment 톤의 메타 요약 (테이블 | 집계 | 컬럼 | 필터)
+// 한 컨테이너 + vertical divider. 클릭 시 expand 토글.
+// ───────────────────────────────────────────────────────
+function KpiMetaSegment({
+  tableValue,
+  tableLabel: tableLabelProp,
+  aggregationLabel,
+  columnName,
+  filterCount,
+  expanded,
+  onClick,
+}: {
+  /** 원본 table 이름 (영문 / 식별자) — tooltip 용 */
+  tableValue?: string;
+  /** 표시용 라벨 (사용자정보 등). 없으면 value 그대로 또는 "테이블 미설정" */
+  tableLabel?: string;
+  aggregationLabel: string;
+  columnName?: string;
+  filterCount: number;
+  expanded?: boolean;
+  onClick: () => void;
+}) {
+  const tableMissing = !tableValue;
+  const tableLabel = tableLabelProp ?? tableValue ?? "테이블 미설정";
+
+  const cells: Array<{
+    key: string;
+    content: React.ReactNode;
+    color: string;
+    weight: number;
+    italic?: boolean;
+  }> = [
+    {
+      key: "table",
+      content: tableLabel,
+      color: tableMissing ? "var(--cp-text-muted)" : "var(--cp-text)",
+      weight: tableMissing ? 500 : 600,
+      italic: tableMissing,
+    },
+    {
+      key: "agg",
+      content: aggregationLabel,
+      color: "hsl(var(--primary))",
+      weight: 700,
+    },
+  ];
+  if (columnName) {
+    cells.push({
+      key: "col",
+      content: columnName,
+      color: "var(--cp-text-sec)",
+      weight: 500,
+    });
+  }
+  cells.push({
+    key: "filter",
+    content: (
+      <span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}>
+        <FilterIcon size={9} />
+        {filterCount}
+      </span>
+    ),
+    color:
+      filterCount > 0 ? "hsl(var(--primary))" : "var(--cp-text-muted)",
+    weight: filterCount > 0 ? 700 : 500,
+  });
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={`${tableLabel}${
+        tableValue && tableValue !== tableLabel ? ` (${tableValue})` : ""
+      } · ${aggregationLabel}${columnName ? ` · ${columnName}` : ""} · 필터 ${filterCount}`}
+      style={{
+        display: "inline-flex",
+        alignItems: "stretch",
+        minHeight: 22,
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        fontFamily: "var(--v5-font-mono)",
+        fontSize: 10,
+        padding: 0,
+        textAlign: "left",
+      }}
+    >
+      {cells.map((cell, i) => (
+        <span
+          key={cell.key}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            padding: "0 10px",
+            color: cell.color,
+            fontWeight: cell.weight,
+            fontStyle: cell.italic ? "italic" : "normal",
+            borderLeft:
+              i === 0 ? "none" : "1px solid var(--cp-border-subtle)",
+            wordBreak: "break-all",
+            minWidth: 0,
+            transition: "color .15s ease",
+            opacity: expanded ? 0.85 : 1,
+          }}
+        >
+          {cell.content}
+        </span>
+      ))}
+    </button>
+  );
+}
+
+// ───────────────────────────────────────────────────────
+// AdvancedSection — fallback value + delta (collapsible, default closed)
+// ───────────────────────────────────────────────────────
+function AdvancedSection({
+  item,
+  onChange,
+}: {
+  item: StatsItem;
+  onChange: (p: Partial<StatsItem>) => void;
+}) {
+  const hasFallback = item.value !== undefined && item.value !== "";
+  const [open, setOpen] = useState(hasFallback);
+  const advAnim = useSlideToggle(open);
+
+  return (
+    <div style={{ marginTop: 4 }}>
+      <button
+        type="button"
+        onClick={() => setOpen((x) => !x)}
+        style={{
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "4px 0",
+          border: "none",
+          background: "transparent",
+          cursor: "pointer",
+          fontSize: 11,
+          fontWeight: 700,
+          letterSpacing: "-0.005em",
+          color: "var(--cp-text-sec)",
+          fontFamily: "var(--v5-font-sans)",
+          transition: "color .15s ease",
+        }}
+        onMouseEnter={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.color =
+            "var(--cp-text)";
+        }}
+        onMouseLeave={(e) => {
+          (e.currentTarget as HTMLButtonElement).style.color =
+            "var(--cp-text-sec)";
+        }}
+      >
+        <span>
+          고급
+          {hasFallback && (
+            <span style={{ marginLeft: 6, fontSize: 9, fontWeight: 600, color: "var(--cp-text-muted)" }}>
+              · fallback
+            </span>
+          )}
+        </span>
+        <span
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 18,
+            height: 18,
+            color: "var(--cp-text-sec)",
+            transition: "transform .18s ease-out, color .15s ease",
+            // close animation 끝날 때까지 회전 유지 (render 기준)
+            transform: advAnim.render ? "rotate(90deg)" : "rotate(0deg)",
+          }}
+        >
+          <ChevronRight size={14} strokeWidth={2.2} />
+        </span>
+      </button>
+      {advAnim.render && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 6,
+            marginTop: 4,
+            overflow: "hidden",
+            animation: advAnim.closing
+              ? "stats-kpi-slide-up .18s ease-out forwards"
+              : "stats-kpi-slide-down .18s ease-out",
+          }}
+        >
+          <CPRow label="Fallback 값" help="디자인 모드 / API 실패 시 보여줄 임시 값. 비우면 —">
             <CPText
-              value={item.delta || ""}
-              onChange={(v) => onChange({ delta: v || undefined })}
-              placeholder="+12%"
-            />
-          </CPRow>
-          <CPRow label="변화 방향">
-            <CPSegment
-              value={item.deltaDirection || "neutral"}
+              value={item.value?.toString() ?? ""}
               onChange={(v) =>
-                onChange({ deltaDirection: v as StatsItem["deltaDirection"] })
+                onChange({ value: v === "" ? undefined : isNaN(Number(v)) ? v : Number(v) })
               }
-              options={[
-                {
-                  value: "up",
-                  label: (
-                    <span
-                      style={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 2,
-                        color: "#10b981",
-                      }}
-                    >
-                      <TrendingUp size={11} /> 상승
-                    </span>
-                  ),
-                },
-                {
-                  value: "neutral",
-                  label: (
-                    <span style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
-                      <Minus size={11} /> 보통
-                    </span>
-                  ),
-                },
-                {
-                  value: "down",
-                  label: (
-                    <span
-                      style={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 2,
-                        color: "#ef4444",
-                      }}
-                    >
-                      <TrendingDown size={11} /> 하락
-                    </span>
-                  ),
-                },
-              ]}
+              placeholder="비우면 —"
             />
           </CPRow>
         </div>
@@ -538,6 +919,9 @@ function ItemEditRow({
   );
 }
 
+// ───────────────────────────────────────────────────────
+// inline input/select styles (compact, collapsed row 용)
+// ───────────────────────────────────────────────────────
 function inputStyle({ mono = false }: { mono?: boolean } = {}): React.CSSProperties {
   return {
     height: 22,
diff --git a/frontend/lib/registry/components/stats/StatsComponent.tsx b/frontend/lib/registry/components/stats/StatsComponent.tsx
index 7082ee88..64fe2fcd 100644
--- a/frontend/lib/registry/components/stats/StatsComponent.tsx
+++ b/frontend/lib/registry/components/stats/StatsComponent.tsx
@@ -1,16 +1,18 @@
 "use client";
 
 import React from "react";
+import * as LucideIcons from "lucide-react";
 import { ComponentRendererProps } from "@/types/component";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { StatsConfig, StatsItem, StatsOrientation, StatsStyle } from "./types";
+import { useStatsData } from "./use-stats-data";
 
 /**
  * Stats — 통합 통계/KPI 카드 컴포넌트
  *
- * items 배열을 받아 각각을 카드/칩/빅넘버 형태로 렌더. 실제 데이터 집계는
- * 상위 컴포넌트 또는 DataPort 로 받음. Phase B-2 는 **표시 로직만**, 연결은
- * Phase F 에서.
+ * items 배열을 받아 각각을 카드/칩/빅넘버 형태로 렌더. Phase G.1 부터 각 항목의
+ * `dataSource.tableName` 이 있으면 백엔드 `/aggregate` 결과로 값을 채우고, 없으면
+ * 기존 정적 `item.value` 를 그대로 사용. 디자인 모드에서는 API 호출 안 함.
  */
 
 const VALID_ORIENTATIONS: StatsOrientation[] = ["horizontal", "vertical", "grid"];
@@ -51,11 +53,33 @@ export const StatsComponent: React.FC<StatsComponentProps> = ({
     ...fromProps,
   } as StatsConfig;
 
+  // Phase G.4.2 — DB-first default. 정적 value 박지 않음. dataSource 는 비어
+  // 있어도 디자인 모드에서 "—" 로 표시. 운영 모드에서 사용자가 테이블/집계 채우면
+  // 자동 동작.
   const items: StatsItem[] = componentConfig.items ?? [
-    { label: "항목 1", value: 0 },
-    { label: "항목 2", value: 0 },
-    { label: "항목 3", value: 0 },
+    { label: "항목 1", dataSource: { aggregation: "count" } },
+    { label: "항목 2", dataSource: { aggregation: "count" } },
+    { label: "항목 3", dataSource: { aggregation: "count" } },
   ];
+
+  // Phase G.1 — dataSource 가 있는 항목은 백엔드에서 가져온다.
+  const userContext = React.useMemo(
+    () => ({
+      companyCode: (p.companyCode as string) || undefined,
+      userId: (p.userId as string) || undefined,
+      deptCode: (p.deptCode as string) || undefined,
+      userName: (p.userName as string) || undefined,
+    }),
+    // 단순 값들이라 deps 직접 나열
+    [p.companyCode, p.userId, p.deptCode, p.userName],
+  );
+  const statsData = useStatsData(items, {
+    isDesignMode,
+    formData: (p.formData as Record<string, unknown>) || undefined,
+    userContext,
+    refreshKey: (p.refreshKey as number | string | undefined) || undefined,
+  });
+
   const orientation: StatsOrientation = componentConfig.orientation ?? "horizontal";
   const statsStyle: StatsStyle = componentConfig.style ?? "card";
   // columns 미지정 시 undefined → auto-fit 이 폭에 맞춰 자동 결정 (5개면 5열 등).
@@ -190,8 +214,69 @@ export const StatsComponent: React.FC<StatsComponentProps> = ({
   } = props as any;
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
+  const formatValue = (raw: unknown): string => {
+    if (raw === null || raw === undefined || raw === "") return "—";
+    if (typeof raw === "number") {
+      // 정수면 그대로, 소수는 소숫점 둘째자리까지 컷
+      if (Number.isInteger(raw)) return raw.toLocaleString();
+      return raw.toLocaleString(undefined, { maximumFractionDigits: 2 });
+    }
+    return String(raw);
+  };
+
+  const renderIcon = (
+    iconName: string | undefined,
+    size: number,
+    color: string,
+  ): React.ReactNode => {
+    if (!iconName) return null;
+    const Icon = (LucideIcons as unknown as Record<string, React.ElementType | undefined>)[
+      iconName
+    ];
+    if (Icon) {
+      return React.createElement(Icon, {
+        size,
+        strokeWidth: 2,
+        style: { color, flexShrink: 0 },
+        "aria-hidden": true,
+      });
+    }
+    return (
+      <span style={{ lineHeight: 1, color, flexShrink: 0 }} aria-hidden="true">
+        {iconName}
+      </span>
+    );
+  };
+
   const renderItem = (item: StatsItem, idx: number) => {
-    const displayValue = item.value ?? 0;
+    const key = item.id != null ? String(item.id) : String(idx);
+    const fetched = statsData[key];
+    const hasDataSource = !!item.dataSource?.tableName;
+
+    let displayValue: React.ReactNode;
+    let stateNote: { text: string; tone: "muted" | "error" } | null = null;
+
+    if (hasDataSource) {
+      if (fetched?.loading) {
+        displayValue = "…";
+        stateNote = { text: "로딩 중", tone: "muted" };
+      } else if (fetched?.error) {
+        displayValue = "—";
+        stateNote = { text: fetched.error, tone: "error" };
+      } else if (fetched?.value !== undefined) {
+        displayValue = formatValue(fetched.value);
+      } else {
+        // fetch 아직 안 됨. fallback 있으면 표시, 아니면 "—"
+        displayValue = item.value !== undefined ? formatValue(item.value) : "—";
+        // 카드 안에 안내 (디자인 진단 도움)
+        stateNote = { text: "대기 중 / 미실행", tone: "muted" };
+      }
+    } else {
+      // dataSource 미완성: fallback 또는 dim 안내
+      displayValue = item.value !== undefined ? formatValue(item.value) : "—";
+      stateNote = { text: "테이블 미설정", tone: "muted" };
+    }
+
     const color = item.color ?? "hsl(var(--primary))";
 
     if (statsStyle === "chip") {
@@ -208,7 +293,7 @@ export const StatsComponent: React.FC<StatsComponentProps> = ({
             fontSize: "12px",
           }}
         >
-          {item.icon && <span>{item.icon}</span>}
+          {renderIcon(item.icon, 13, color)}
           <span style={{ color: "hsl(var(--muted-foreground))" }}>{item.label}</span>
           <strong style={{ color }}>{displayValue}</strong>
         </div>
@@ -237,7 +322,7 @@ export const StatsComponent: React.FC<StatsComponentProps> = ({
               letterSpacing: "0.05em",
             }}
           >
-            {item.icon && `${item.icon} `}
+            {renderIcon(item.icon, 12, "hsl(var(--muted-foreground))")}
             {item.label}
           </span>
           <span
@@ -250,6 +335,24 @@ export const StatsComponent: React.FC<StatsComponentProps> = ({
           >
             {displayValue}
           </span>
+          {stateNote && (
+            <span
+              style={{
+                fontSize: "10px",
+                color:
+                  stateNote.tone === "error"
+                    ? "hsl(var(--destructive))"
+                    : "hsl(var(--muted-foreground))",
+                maxWidth: "100%",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+              title={stateNote.text}
+            >
+              {stateNote.text}
+            </span>
+          )}
           {item.delta && (
             <span
               style={{
@@ -294,7 +397,7 @@ export const StatsComponent: React.FC<StatsComponentProps> = ({
             fontWeight: 600,
           }}
         >
-          {item.icon && `${item.icon} `}
+          {renderIcon(item.icon, 12, "hsl(var(--muted-foreground))")}
           {item.label}
         </span>
         <span
@@ -307,6 +410,24 @@ export const StatsComponent: React.FC<StatsComponentProps> = ({
         >
           {displayValue}
         </span>
+        {stateNote && (
+          <span
+            style={{
+              fontSize: "10px",
+              color:
+                stateNote.tone === "error"
+                  ? "hsl(var(--destructive))"
+                  : "hsl(var(--muted-foreground))",
+              maxWidth: "100%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+            title={stateNote.text}
+          >
+            {stateNote.text}
+          </span>
+        )}
         {item.delta && (
           <span
             style={{
diff --git a/frontend/lib/registry/components/stats/index.ts b/frontend/lib/registry/components/stats/index.ts
index fab7f413..8fa94778 100644
--- a/frontend/lib/registry/components/stats/index.ts
+++ b/frontend/lib/registry/components/stats/index.ts
@@ -20,7 +20,8 @@ import type { StatsConfig } from "./types";
  * 변형:
  *   - style: card | chip | bigNumber
  *   - orientation: horizontal | vertical | grid
- *   - items: 각 KPI 항목 (라벨, 값, 아이콘, 색상, 변화량)
+
+ *   - items: 각 KPI 항목 (라벨, DB 바인딩, 아이콘, 색상, 선택 fallback / 변화량)
  *
  * 관련 문서:
  *   notes/gbpark/2026-04-11-component-unification-plan.md §3.6
@@ -29,10 +30,13 @@ import type { StatsConfig } from "./types";
 const DEFAULT_CONFIG: Partial<StatsConfig> = {
   orientation: "horizontal",
   style: "card",
+  // Phase G.4.2 — DB-first 기본. 새 stats 컴포넌트는 각 항목이 dataSource 를 가지고
+  // 시작. 정적 value 는 박지 않는다 — 디자인 모드에서 자연스럽게 "—" 표시되고
+  // 사용자가 테이블/필터를 채우면 운영 모드에서 KPI 가 자동 동작.
   items: [
-    { label: "항목 1", value: 0, icon: "📊" },
-    { label: "항목 2", value: 0, icon: "📈" },
-    { label: "항목 3", value: 0, icon: "💰" },
+    { label: "항목 1", icon: "BarChart3", dataSource: { aggregation: "count" } },
+    { label: "항목 2", icon: "TrendingUp", dataSource: { aggregation: "count" } },
+    { label: "항목 3", icon: "DollarSign", dataSource: { aggregation: "count" } },
   ],
 };
 
diff --git a/frontend/lib/registry/components/stats/types.ts b/frontend/lib/registry/components/stats/types.ts
index 6e46050c..db9f5230 100644
--- a/frontend/lib/registry/components/stats/types.ts
+++ b/frontend/lib/registry/components/stats/types.ts
@@ -1,6 +1,7 @@
 "use client";
 
 import { ComponentConfig } from "@/types/component";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
 
 /**
  * Stats 컴포넌트 통합 설정 타입
@@ -10,18 +11,41 @@ import { ComponentConfig } from "@/types/component";
  * 를 흡수.
  */
 
-export type StatsAggregation = "count" | "sum" | "avg" | "min" | "max";
+export type StatsAggregation =
+  | "count"
+  | "sum"
+  | "avg"
+  | "min"
+  | "max"
+  | "distinctCount";
 export type StatsOrientation = "horizontal" | "vertical" | "grid";
 export type StatsStyle = "card" | "chip" | "bigNumber";
 
+/**
+ * StatItemDataSource — 항목 단위 데이터 바인딩 (Phase G.1)
+ *
+ * tableName 이 비어 있으면 fetch 를 건너뛰고 정적 `value` 사용.
+ * `filters` 는 canonical `OptionFilter` 와 동일한 모양 — runtime hook 이
+ * `value_type` (`field` / `user`) 를 formData / userContext 로 치환한 후 백엔드에
+ * 전달.
+ */
+export interface StatItemDataSource {
+  tableName?: string;
+  aggregation?: StatsAggregation;
+  columnName?: string;
+  filters?: OptionFilter[];
+}
+
 export interface StatsItem {
+  /** 항목 id (안정적 hook 키). 없으면 index 사용 */
+  id?: string;
   /** 라벨 */
   label: string;
-  /** 집계 대상 컬럼 */
+  /** 집계 대상 컬럼 (레거시 static 호환 — Phase G.1 부터는 dataSource 권장) */
   column?: string;
-  /** 집계 방식 */
+  /** 집계 방식 (레거시 static 호환) */
   aggregation?: StatsAggregation;
-  /** 고정 값 (column 없이 직접 지정) */
+  /** 고정 값 (column 없이 직접 지정 — dataSource 결과가 우선) */
   value?: string | number;
   /** 라벨 앞 아이콘 (이모지 또는 lucide 이름) */
   icon?: string;
@@ -33,6 +57,8 @@ export interface StatsItem {
   delta?: string;
   /** 변화 방향: up / down / neutral */
   deltaDirection?: "up" | "down" | "neutral";
+  /** Phase G.1 — DB 기반 데이터 바인딩 */
+  dataSource?: StatItemDataSource;
 }
 
 export interface StatsConfig extends ComponentConfig {
diff --git a/frontend/lib/registry/components/stats/use-stats-data.ts b/frontend/lib/registry/components/stats/use-stats-data.ts
new file mode 100644
index 00000000..070d5d37
--- /dev/null
+++ b/frontend/lib/registry/components/stats/use-stats-data.ts
@@ -0,0 +1,259 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { aggregateTableStat } from "@/lib/api/stats";
+import type { OptionFilter } from "@/lib/registry/components/input/use-option-loader";
+import type { StatItemDataSource, StatsItem } from "./types";
+
+/**
+ * use-stats-data — Phase G.1 + G.4.x preview-in-design
+ *
+ * Stats 항목 중 `dataSource.tableName` 이 설정된 것만 백엔드 `/aggregate` 로 값을
+ * 가져온다. **디자인 모드에서도 미리보기 fetch** 함 (사용자가 카드 설정 즉시 결과
+ * 확인할 수 있도록). 다만 typing 폭주 방지를 위해 350ms debounce.
+ *
+ *   - 키: `item.id ?? String(idx)`
+ *   - request key 캐시 (같은 호출이 중복으로 가지 않음)
+ *   - race guard: 새 effect 가 시작되면 이전 결과 무시
+ *   - 카드 단위 error state: 한 카드 실패가 다른 카드를 죽이지 않음
+ *   - debounce: 디자인 모드 350ms, 운영 모드 0ms (즉시)
+ *
+ * formData / userContext 가 들어오면 `OptionFilter.value_type` 의 `field` / `user`
+ * 를 실제 값으로 치환한 후 백엔드에 보낸다.
+ */
+
+const DESIGN_DEBOUNCE_MS = 350;
+
+export interface UseStatsDataOptions {
+  isDesignMode?: boolean;
+  formData?: Record<string, unknown>;
+  userContext?: {
+    companyCode?: string;
+    userId?: string;
+    deptCode?: string;
+    userName?: string;
+  };
+  /** 외부에서 강제 재조회 트리거 (refreshKey 변경 시 모든 항목 다시 fetch) */
+  refreshKey?: number | string;
+}
+
+export interface StatsValueState {
+  value?: number;
+  error?: string;
+  loading?: boolean;
+}
+
+export type StatsDataMap = Record<string, StatsValueState>;
+
+type StatsFetchPlanItem =
+  | { key: string; skip: true; pending?: boolean }
+  | {
+      key: string;
+      skip: false;
+      reqKey: string;
+      req: {
+        tableName: string;
+        aggregation: NonNullable<StatItemDataSource["aggregation"]>;
+        columnName?: string;
+        filters: Array<{ column: string; operator: string; value?: unknown }>;
+      };
+    };
+
+const ITEM_KEY = (item: StatsItem, idx: number): string =>
+  item.id != null ? String(item.id) : String(idx);
+
+/**
+ * OptionFilter 의 value_type 을 formData / userContext 로 치환해서 백엔드용 필터로
+ * 변환. 치환에 실패한 항목은 (필수 컨텍스트 누락) drop 한다 — 의도와 다른 전체 결과를
+ * 내는 것보다 카드 에러가 안전.
+ */
+function resolveFilters(
+  filters: OptionFilter[] | undefined,
+  formData: Record<string, unknown> | undefined,
+  userContext: UseStatsDataOptions["userContext"],
+): { resolved: Array<{ column: string; operator: string; value?: unknown }>; ok: boolean } {
+  if (!filters || filters.length === 0) return { resolved: [], ok: true };
+
+  const out: Array<{ column: string; operator: string; value?: unknown }> = [];
+  for (const f of filters) {
+    if (!f || !f.column) continue;
+    const op = f.operator ?? "=";
+
+    if (op === "isNull" || op === "isNotNull") {
+      out.push({ column: f.column, operator: op });
+      continue;
+    }
+
+    let value: unknown = f.value;
+    const valueType = f.value_type ?? "static";
+    if (valueType === "field") {
+      const ref = f.field_ref;
+      if (!ref) return { resolved: [], ok: false };
+      value = formData?.[ref];
+      if (value === undefined) return { resolved: [], ok: false };
+    } else if (valueType === "user") {
+      const uf = f.user_field;
+      if (!uf) return { resolved: [], ok: false };
+      value = userContext?.[uf];
+      if (value === undefined || value === "") return { resolved: [], ok: false };
+    }
+
+    // value 가 명시적으로 null / undefined 면 비교 필터는 의미 없음 → skip
+    // (isNull / isNotNull 은 위에서 이미 처리됨)
+    if (value === undefined || value === null) {
+      continue;
+    }
+
+    out.push({ column: f.column, operator: op, value });
+  }
+  return { resolved: out, ok: true };
+}
+
+/**
+ * 항목의 fetch request key 를 만든다 — 같은 키면 캐시.
+ */
+function buildRequestKey(
+  ds: StatItemDataSource,
+  filters: Array<{ column: string; operator: string; value?: unknown }>,
+): string {
+  return JSON.stringify({
+    t: ds.tableName,
+    a: ds.aggregation ?? "count",
+    c: ds.columnName ?? "",
+    f: filters,
+  });
+}
+
+/**
+ * dataSource 가 fetch 가능한 상태인지 (tableName + 필수 columnName) 검사.
+ */
+function isDataSourceReady(ds: StatItemDataSource | undefined): boolean {
+  if (!ds || !ds.tableName) return false;
+  const agg = ds.aggregation ?? "count";
+  if (agg === "count") return true;
+  return !!ds.columnName;
+}
+
+export function useStatsData(
+  items: StatsItem[],
+  opts: UseStatsDataOptions = {},
+): StatsDataMap {
+  const { isDesignMode, formData, userContext, refreshKey } = opts;
+  const [state, setState] = useState<StatsDataMap>({});
+
+  // 요청 키 직렬화 — 항목 / formData / userContext / refreshKey 가 의미 있게 바뀔
+  // 때만 effect 재실행. items 객체 동등성 X.
+  const planSig = useMemo(() => {
+    const plan: StatsFetchPlanItem[] = items.map((it, idx) => {
+      const key = ITEM_KEY(it, idx);
+      if (!isDataSourceReady(it.dataSource)) return { key, skip: true };
+      const { resolved, ok } = resolveFilters(
+        it.dataSource!.filters,
+        formData,
+        userContext,
+      );
+      if (!ok) return { key, skip: true, pending: true };
+      const reqKey = buildRequestKey(it.dataSource!, resolved);
+      return {
+        key,
+        skip: false,
+        reqKey,
+        req: {
+          tableName: it.dataSource!.tableName!,
+          aggregation: it.dataSource!.aggregation ?? "count",
+          columnName: it.dataSource!.columnName,
+          filters: resolved,
+        },
+      };
+    });
+    return JSON.stringify(plan);
+  }, [items, formData, userContext]);
+
+  const cacheRef = useRef<Map<string, number>>(new Map());
+  const versionRef = useRef(0);
+
+  useEffect(() => {
+    const plan: StatsFetchPlanItem[] = JSON.parse(planSig);
+    if (plan.every((p) => p.skip)) {
+      setState((prev) => (Object.keys(prev).length > 0 ? {} : prev));
+      return;
+    }
+
+    versionRef.current += 1;
+    const myVersion = versionRef.current;
+    let cancelled = false;
+
+    if (refreshKey !== undefined) {
+      cacheRef.current.clear();
+    }
+
+    // loading 표시 (skip 항목 제외, 캐시 hit 은 즉시 값으로)
+    setState((prev) => {
+      const next: StatsDataMap = { ...prev };
+      let changed = false;
+      for (const p of plan) {
+        if (p.skip) {
+          if (p.pending && next[p.key]) {
+            delete next[p.key];
+            changed = true;
+          }
+          continue;
+        }
+        const cached = cacheRef.current.get(p.reqKey);
+        if (cached !== undefined && refreshKey === undefined) {
+          if (next[p.key]?.value !== cached || next[p.key]?.loading || next[p.key]?.error) {
+            next[p.key] = { value: cached };
+            changed = true;
+          }
+        } else {
+          if (!next[p.key]?.loading || next[p.key]?.error) {
+            next[p.key] = { ...next[p.key], loading: true, error: undefined };
+            changed = true;
+          }
+        }
+      }
+      return changed ? next : prev;
+    });
+
+    // 디자인 모드는 typing 폭주 방지용 debounce. 운영 모드는 즉시.
+    const debounceMs = isDesignMode ? DESIGN_DEBOUNCE_MS : 0;
+    const timer = setTimeout(() => {
+      (async () => {
+        for (const p of plan) {
+          if (p.skip) continue;
+          const cached = cacheRef.current.get(p.reqKey);
+          if (cached !== undefined && refreshKey === undefined) continue;
+
+          try {
+            const { value } = await aggregateTableStat(p.req.tableName, {
+              aggregation: p.req.aggregation,
+              columnName: p.req.columnName,
+              filters: p.req.filters as any,
+            });
+            if (cancelled || versionRef.current !== myVersion) return;
+            cacheRef.current.set(p.reqKey, value);
+            setState((prev) => ({
+              ...prev,
+              [p.key]: { value, loading: false },
+            }));
+          } catch (err: any) {
+            if (cancelled || versionRef.current !== myVersion) return;
+            const msg = err?.response?.data?.message || err?.message || "집계 실패";
+            setState((prev) => ({
+              ...prev,
+              [p.key]: { ...prev[p.key], loading: false, error: String(msg) },
+            }));
+          }
+        }
+      })();
+    }, debounceMs);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [planSig, isDesignMode, refreshKey]);
+
+  return state;
+}
diff --git a/frontend/lib/utils/getComponentConfigPanel.tsx b/frontend/lib/utils/getComponentConfigPanel.tsx
index bcab8cac..94aee9ad 100644
--- a/frontend/lib/utils/getComponentConfigPanel.tsx
+++ b/frontend/lib/utils/getComponentConfigPanel.tsx
@@ -116,8 +116,12 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "stats-card": () => import("@/components/screen/config-panels/StatsCardConfigPanel"),
   "progress": () => import("@/components/screen/config-panels/ProgressBarConfigPanel"),
   "progress-bar": () => import("@/components/screen/config-panels/ProgressBarConfigPanel"),
-  "chart": () => import("@/components/screen/config-panels/ChartConfigPanel"),
-  "chart-basic": () => import("@/components/screen/config-panels/ChartConfigPanel"),
+  // Phase G.3 — canonical chart (recharts 기반). 옛 placeholder ChartConfigPanel 은 미사용.
+  "chart": () => import("@/lib/registry/components/chart/InvChartConfigPanel"),
+  "chart-basic": () => import("@/lib/registry/components/chart/InvChartConfigPanel"),
+  // Phase G.3.1 — canonical card-list / grouped-table
+  "card-list": () => import("@/lib/registry/components/card-list/InvCardListConfigPanel"),
+  "grouped-table": () => import("@/lib/registry/components/grouped-table/InvGroupedTableConfigPanel"),
   "alert": () => import("@/components/screen/config-panels/AlertConfigPanel"),
   "alert-info": () => import("@/components/screen/config-panels/AlertConfigPanel"),
   "badge": () => import("@/components/screen/config-panels/BadgeConfigPanel"),
diff --git a/notes/gbpark/2026-05-14-container-twin/index.html b/notes/gbpark/2026-05-14-container-twin/index.html
new file mode 100644
index 00000000..da5be2ee
--- /dev/null
+++ b/notes/gbpark/2026-05-14-container-twin/index.html
@@ -0,0 +1,1519 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>컨테이너 디지털트윈 — 적재 시뮬레이터</title>
+<style>
+  :root {
+    --bg: #0a0a1f;
+    --surface: #11102a;
+    --surface-2: #1a1933;
+    --border: rgba(255,255,255,0.08);
+    --text: #e8e8f0;
+    --text-dim: #9a9ab0;
+    --primary: #6c5ce7;
+    --cyan: #00cec9;
+    --pink: #fd79a8;
+    --warn: #ff6b6b;
+    --ok: #51cf66;
+    --glow-sm: 0 0 12px rgba(108, 92, 231, 0.35);
+    --glow-md: 0 0 24px rgba(108, 92, 231, 0.45);
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body {
+    height: 100%; background: var(--bg); color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 13px; overflow: hidden;
+  }
+  .app {
+    display: grid;
+    grid-template-columns: 340px 1fr;
+    grid-template-rows: 1fr 240px;
+    height: 100vh; gap: 12px; padding: 12px;
+  }
+  .panel {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 12px; overflow: hidden;
+  }
+  .panel.input { grid-row: 1 / 3; overflow-y: auto; padding: 20px; }
+  .panel.viewer {
+    grid-column: 2; grid-row: 1; position: relative;
+    background: radial-gradient(ellipse at center, #15143a 0%, #08081a 70%);
+  }
+  .panel.result { grid-column: 2; grid-row: 2; padding: 16px; }
+
+  h1 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
+  .subtitle { font-size: 11px; color: var(--text-dim); margin-bottom: 22px; }
+
+  .section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
+  .section:last-child { border-bottom: none; padding-bottom: 0; }
+
+  .section-title {
+    font-size: 11px; font-weight: 600; margin-bottom: 12px; color: var(--text);
+    text-transform: uppercase; letter-spacing: 0.06em;
+  }
+
+  .field { margin-bottom: 10px; }
+  .field:last-child { margin-bottom: 0; }
+  .field label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 5px; }
+
+  .field input, .field select {
+    width: 100%; background: var(--surface-2);
+    border: 1px solid var(--border); border-radius: 6px;
+    color: var(--text); padding: 7px 10px;
+    font-size: 12px; font-family: inherit; outline: none;
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+  .field input:focus, .field select:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(108,92,231,0.2);
+  }
+
+  .field-row { display: flex; gap: 6px; }
+  .field-row .field { flex: 1; margin-bottom: 10px; }
+
+  .toggle-row { display: flex; gap: 6px; flex-wrap: wrap; }
+  .toggle-row button {
+    flex: 1; min-width: 0;
+    background: var(--surface-2); border: 1px solid var(--border);
+    color: var(--text-dim); padding: 6px 8px; border-radius: 6px;
+    cursor: pointer; font-size: 11px; font-family: inherit;
+    transition: all 0.15s; white-space: nowrap;
+  }
+  .toggle-row button:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
+  .toggle-row button.active {
+    background: var(--primary); color: white;
+    border-color: var(--primary); box-shadow: var(--glow-sm);
+  }
+
+  .hint { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
+
+  .liner-swatches {
+    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
+  }
+  .liner-swatches button {
+    aspect-ratio: 1; border: 2px solid transparent;
+    border-radius: 8px; cursor: pointer;
+    position: relative; padding: 0;
+    transition: all 0.15s;
+  }
+  .liner-swatches button:hover { transform: scale(1.05); }
+  .liner-swatches button.active {
+    border-color: white;
+    box-shadow: 0 0 0 2px var(--primary), var(--glow-sm);
+  }
+  .liner-swatches button .lbl {
+    position: absolute; bottom: 2px; left: 50%;
+    transform: translateX(-50%);
+    font-size: 8px; font-weight: 700;
+    color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.7);
+    letter-spacing: 0.02em;
+  }
+
+  .result-grid {
+    display: grid; grid-template-columns: repeat(4, 1fr);
+    gap: 12px; height: 100%;
+  }
+  .stat {
+    background: var(--surface-2); border-radius: 10px;
+    padding: 14px 16px; display: flex; flex-direction: column;
+    justify-content: center; position: relative; overflow: hidden;
+  }
+  .stat::before {
+    content: ''; position: absolute; top: 0; left: 0;
+    width: 3px; height: 100%; background: var(--primary);
+    box-shadow: var(--glow-sm);
+  }
+  .stat.cyan::before { background: var(--cyan); box-shadow: 0 0 12px rgba(0,206,201,0.45); }
+  .stat.pink::before { background: var(--pink); box-shadow: 0 0 12px rgba(253,121,168,0.45); }
+
+  .stat-label {
+    font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
+    color: var(--text-dim); display: flex; align-items: center;
+    justify-content: space-between;
+  }
+  .stat-value {
+    font-size: 28px; font-weight: 700; color: var(--text);
+    line-height: 1.1; margin-top: 8px; font-variant-numeric: tabular-nums;
+  }
+  .stat-unit { font-size: 12px; color: var(--text-dim); margin-left: 4px; font-weight: 400; }
+  .stat-sub { font-size: 11px; color: var(--text-dim); margin-top: 6px; font-variant-numeric: tabular-nums; }
+
+  .bar {
+    width: 100%; height: 4px; background: rgba(255,255,255,0.06);
+    border-radius: 2px; overflow: hidden; margin-top: 8px;
+  }
+  .bar-fill {
+    height: 100%; background: var(--primary);
+    box-shadow: var(--glow-sm);
+    transition: width 0.35s ease, background 0.2s;
+  }
+  .bar-fill.cyan { background: var(--cyan); box-shadow: 0 0 8px rgba(0,206,201,0.45); }
+  .bar-fill.pink { background: var(--pink); box-shadow: 0 0 8px rgba(253,121,168,0.45); }
+  .bar-fill.warn { background: var(--warn); box-shadow: 0 0 12px rgba(255,107,107,0.5); }
+
+  .viewer-overlay {
+    position: absolute; top: 14px; left: 14px; z-index: 10;
+    display: flex; gap: 6px;
+  }
+  .viewer-overlay button {
+    background: rgba(17,16,42,0.92); border: 1px solid var(--border);
+    color: var(--text-dim); padding: 7px 12px; border-radius: 6px;
+    cursor: pointer; font-size: 11px; font-family: inherit;
+    transition: all 0.15s;
+  }
+  .viewer-overlay button:hover { color: var(--text); }
+  .viewer-overlay button.active {
+    background: var(--primary); color: white;
+    border-color: var(--primary); box-shadow: var(--glow-sm);
+  }
+
+  .viewer-info {
+    position: absolute; bottom: 14px; left: 14px; z-index: 10;
+    font-size: 11px; color: var(--text-dim);
+    background: rgba(17,16,42,0.9); border: 1px solid var(--border);
+    padding: 7px 11px; border-radius: 6px;
+  }
+
+  .viewer-spec {
+    position: absolute; top: 14px; right: 14px; z-index: 10;
+    font-size: 11px; color: var(--text-dim);
+    background: rgba(17,16,42,0.9); border: 1px solid var(--border);
+    padding: 8px 12px; border-radius: 6px;
+    text-align: right; line-height: 1.5;
+    font-variant-numeric: tabular-nums;
+  }
+  .viewer-spec b { color: var(--text); font-weight: 600; }
+
+  #canvas { display: block; width: 100%; height: 100%; }
+
+  .badge {
+    border-radius: 4px; padding: 2px 6px;
+    font-size: 9px; font-weight: 700;
+    letter-spacing: 0.04em; text-transform: uppercase;
+    display: inline-block;
+  }
+  .badge.warn { background: rgba(255, 107, 107, 0.18); color: var(--warn); border: 1px solid rgba(255, 107, 107, 0.35); }
+  .badge.ok { background: rgba(81, 207, 102, 0.15); color: var(--ok); border: 1px solid rgba(81, 207, 102, 0.3); }
+
+  .panel.input::-webkit-scrollbar { width: 6px; }
+  .panel.input::-webkit-scrollbar-track { background: transparent; }
+  .panel.input::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
+</style>
+</head>
+<body>
+<div class="app">
+  <aside class="panel input">
+    <h1>컨테이너 디지털트윈</h1>
+    <div class="subtitle">파레트·박스 적재 시뮬레이션 (Lv1)</div>
+
+    <div class="section">
+      <div class="section-title">컨테이너</div>
+      <div class="field">
+        <label>규격</label>
+        <select id="containerType">
+          <option value="20DC">20ft Dry Container</option>
+          <option value="40DC" selected>40ft Dry Container</option>
+          <option value="40HC">40ft High Cube</option>
+          <option value="45HC">45ft High Cube</option>
+        </select>
+      </div>
+      <div class="field">
+        <label>선사 도색</label>
+        <div class="liner-swatches" id="linerSwatches"></div>
+      </div>
+      <div class="field">
+        <label>컨테이너 번호</label>
+        <input type="text" id="containerNum" value="INVU 1234567" maxlength="12" />
+      </div>
+      <div class="field">
+        <label>문 열림</label>
+        <div class="toggle-row" id="doorToggle">
+          <button data-door="0" class="active">닫힘</button>
+          <button data-door="1">한쪽</button>
+          <button data-door="2">양쪽</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">파레트</div>
+      <div class="field">
+        <label>규격</label>
+        <select id="palletType">
+          <option value="T11" selected>T11 (1100×1100, KS 표준)</option>
+          <option value="T12">T12 (1200×1000, ISO)</option>
+          <option value="T9">T9 (1100×900)</option>
+          <option value="EUR">EUR (1200×800, 유럽)</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">화물 박스</div>
+      <div class="field-row">
+        <div class="field">
+          <label>가로 W (mm)</label>
+          <input type="number" id="boxW" value="400" min="50" max="2400" />
+        </div>
+        <div class="field">
+          <label>세로 D (mm)</label>
+          <input type="number" id="boxD" value="300" min="50" max="2400" />
+        </div>
+      </div>
+      <div class="field-row">
+        <div class="field">
+          <label>높이 H (mm)</label>
+          <input type="number" id="boxH" value="250" min="50" max="2697" />
+        </div>
+        <div class="field">
+          <label>단중 (kg)</label>
+          <input type="number" id="boxKg" value="15" min="0" step="0.1" />
+        </div>
+      </div>
+      <div class="field">
+        <label>최대 적재 단수</label>
+        <input type="number" id="maxStack" value="0" min="0" />
+        <div class="hint">0 = 무제한 (컨테이너 높이까지)</div>
+      </div>
+      <div class="field">
+        <label>박스 종류</label>
+        <div class="toggle-row" id="boxStyleToggle">
+          <button data-style="carton" class="active">카톤</button>
+          <button data-style="drum">드럼</button>
+          <button data-style="sack">자루</button>
+          <button data-style="gradient">단별</button>
+          <button data-style="solid">단색</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="section">
+      <div class="section-title">표시 옵션</div>
+      <div class="field">
+        <label>벽 표시</label>
+        <div class="toggle-row" id="wallsToggle">
+          <button data-walls="all" class="active">전체</button>
+          <button data-walls="cut">단면</button>
+          <button data-walls="none">없음</button>
+        </div>
+      </div>
+      <div class="field">
+        <label>그림자</label>
+        <div class="toggle-row" id="shadowToggle">
+          <button data-shadow="on" class="active">켜기</button>
+          <button data-shadow="off">끄기</button>
+        </div>
+      </div>
+    </div>
+  </aside>
+
+  <main class="panel viewer">
+    <div class="viewer-overlay">
+      <button id="viewIso" class="active">3D</button>
+      <button id="viewTop">위에서</button>
+      <button id="viewSide">옆에서</button>
+      <button id="viewFront">정면</button>
+    </div>
+    <div class="viewer-spec" id="viewerSpec"></div>
+    <div class="viewer-info">마우스: 회전 · 휠: 확대 · Shift+드래그: 이동</div>
+    <canvas id="canvas"></canvas>
+  </main>
+
+  <section class="panel result">
+    <div class="result-grid">
+      <div class="stat">
+        <div class="stat-label">파레트 / 박스 수</div>
+        <div class="stat-value"><span id="palletCount">0</span><span class="stat-unit">pal</span></div>
+        <div class="stat-sub"><span id="boxCount">0</span>개 박스 · 파레트당 <span id="boxPerPallet">0</span> (<span id="boxLayout">—</span>)</div>
+      </div>
+      <div class="stat cyan">
+        <div class="stat-label">바닥 면적 활용</div>
+        <div class="stat-value"><span id="floorPct">0</span><span class="stat-unit">%</span></div>
+        <div class="bar"><div class="bar-fill cyan" id="floorBar" style="width:0%"></div></div>
+      </div>
+      <div class="stat pink">
+        <div class="stat-label">부피 활용</div>
+        <div class="stat-value"><span id="volPct">0</span><span class="stat-unit">%</span></div>
+        <div class="stat-sub"><span id="volTotal">0</span> / <span id="volMax">0</span> m³</div>
+        <div class="bar"><div class="bar-fill pink" id="volBar" style="width:0%"></div></div>
+      </div>
+      <div class="stat" id="weightStat">
+        <div class="stat-label">무게 (Max 대비) <span id="weightBadge"></span></div>
+        <div class="stat-value"><span id="weightPct">0</span><span class="stat-unit">%</span></div>
+        <div class="stat-sub"><span id="weightTotal">0</span> / <span id="weightMax">0</span> kg</div>
+        <div class="bar"><div class="bar-fill" id="weightBar" style="width:0%"></div></div>
+      </div>
+    </div>
+  </section>
+</div>
+
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.161.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.161.0/examples/jsm/"
+  }
+}
+</script>
+<script type="module">
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+import { RoundedBoxGeometry } from 'three/addons/geometries/RoundedBoxGeometry.js';
+
+const CONTAINERS = {
+  '20DC': { name: '20ft DC',  L: 5898,  W: 2352, H: 2393, maxKg: 28200, tare: 2200 },
+  '40DC': { name: '40ft DC',  L: 12032, W: 2352, H: 2393, maxKg: 26680, tare: 3800 },
+  '40HC': { name: '40ft HC',  L: 12032, W: 2352, H: 2697, maxKg: 26580, tare: 3900 },
+  '45HC': { name: '45ft HC',  L: 13556, W: 2352, H: 2697, maxKg: 26000, tare: 4800 },
+};
+const PALLETS = {
+  'T11': { W: 1100, D: 1100, H: 144, kg: 15 },
+  'T12': { W: 1200, D: 1000, H: 144, kg: 17 },
+  'T9':  { W: 1100, D: 900,  H: 144, kg: 13 },
+  'EUR': { W: 1200, D: 800,  H: 144, kg: 25 },
+};
+const LINERS = {
+  'NONE':    { base: '#5a5a6a', text: '#dddddd', name: '무도색' },
+  'INVYONE': { base: '#6c5ce7', text: '#ffffff', name: 'INVYONE' },
+  'MAERSK':  { base: '#0d9eb8', text: '#ffffff', name: 'MAERSK' },
+  'MSC':     { base: '#e8b736', text: '#222222', name: 'MSC' },
+  'COSCO':   { base: '#c8161d', text: '#ffffff', name: 'COSCO' },
+  'ONE':     { base: '#e91e63', text: '#ffffff', name: 'ONE' },
+  'HMM':     { base: '#ff8c1a', text: '#ffffff', name: 'HMM' },
+  'EVERGREEN': { base: '#2e7d32', text: '#ffffff', name: 'EVERGREEN' },
+};
+
+// ===== State =====
+const state = {
+  liner: 'INVYONE',
+  doors: 0,
+  boxStyle: 'carton',
+  walls: 'all',
+  shadows: true,
+  view: 'iso',
+};
+
+// ===== Renderer + Scene =====
+const canvas = document.getElementById('canvas');
+const viewer = canvas.parentElement;
+const scene = new THREE.Scene();
+
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setClearColor(0x000000, 0);
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.0;
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+
+const camera = new THREE.PerspectiveCamera(45, 1, 100, 100000);
+
+const controls = new OrbitControls(camera, canvas);
+controls.enableDamping = true;
+controls.dampingFactor = 0.08;
+controls.minDistance = 1500;
+controls.maxDistance = 60000;
+
+// PMREM environment for nice PBR reflections
+const pmrem = new THREE.PMREMGenerator(renderer);
+pmrem.compileEquirectangularShader();
+scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
+
+scene.add(new THREE.AmbientLight(0xffffff, 0.25));
+
+const sun = new THREE.DirectionalLight(0xffffff, 2.5);
+sun.position.set(8000, 14000, 6000);
+sun.castShadow = true;
+sun.shadow.mapSize.set(2048, 2048);
+sun.shadow.camera.near = 1000;
+sun.shadow.camera.far = 40000;
+sun.shadow.camera.left = -10000;
+sun.shadow.camera.right = 10000;
+sun.shadow.camera.top = 10000;
+sun.shadow.camera.bottom = -10000;
+sun.shadow.bias = -0.0005;
+sun.shadow.normalBias = 5;
+scene.add(sun);
+
+const fill = new THREE.DirectionalLight(0x6c5ce7, 0.4);
+fill.position.set(-5000, 4000, -5000);
+scene.add(fill);
+
+const grid = new THREE.GridHelper(30000, 60, 0x2a2a55, 0x1a1a3a);
+grid.position.y = -25;
+scene.add(grid);
+
+// 큰 그라운드 (shadow catcher 역할)
+const ground = new THREE.Mesh(
+  new THREE.PlaneGeometry(40000, 40000),
+  new THREE.ShadowMaterial({ opacity: 0.45 })
+);
+ground.rotation.x = -Math.PI / 2;
+ground.position.y = -0.5;
+ground.receiveShadow = true;
+scene.add(ground);
+
+const containerGroup = new THREE.Group();
+const cargoGroup = new THREE.Group();
+scene.add(containerGroup);
+scene.add(cargoGroup);
+
+// ===== Texture cache =====
+const texCache = new Map();
+function cached(key, build) {
+  if (!texCache.has(key)) texCache.set(key, build());
+  return texCache.get(key);
+}
+
+function makeContainerSideTex(linerKey) {
+  const liner = LINERS[linerKey];
+  const W = 4096, H = 1024;
+  const cv = document.createElement('canvas');
+  cv.width = W; cv.height = H;
+  const ctx = cv.getContext('2d');
+
+  // 베이스
+  ctx.fillStyle = liner.base;
+  ctx.fillRect(0, 0, W, H);
+
+  // 상하 보강 라인 (corner casting)
+  ctx.fillStyle = 'rgba(0,0,0,0.45)';
+  ctx.fillRect(0, 0, W, 36);
+  ctx.fillRect(0, H - 36, W, 36);
+
+  // 로고 텍스트 (선사명)
+  ctx.fillStyle = liner.text;
+  ctx.font = 'bold 260px Impact, "Arial Black", sans-serif';
+  ctx.fillText(liner.name, 160, 580);
+
+  // 작은 마킹
+  ctx.font = '500 56px Arial';
+  ctx.fillStyle = liner.text;
+  ctx.globalAlpha = 0.88;
+  ctx.fillText('MAX. GROSS  30,480 kg', 160, 760);
+  ctx.fillText('TARE  3,800 kg', 160, 830);
+  ctx.fillText('CU.CAP.  67.6 m³', 160, 900);
+  ctx.globalAlpha = 1;
+
+  // ISO 식별 코드 (오른쪽 끝)
+  ctx.font = 'bold 80px Arial';
+  ctx.fillStyle = liner.text;
+  ctx.globalAlpha = 0.75;
+  ctx.fillText('22G1', W - 320, 130);
+  ctx.globalAlpha = 1;
+
+  // 미세한 사용감 (새 컨테이너 톤)
+  for (let i = 0; i < 80; i++) {
+    const x = Math.random() * W;
+    const y = Math.random() * H;
+    const r = Math.random() * 25;
+    ctx.fillStyle = `rgba(${100 + Math.random() * 40}, ${70 + Math.random() * 25}, ${50 + Math.random() * 20}, ${Math.random() * 0.05})`;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
+  return tex;
+}
+
+function makeContainerEndTex(linerKey, containerNum) {
+  const liner = LINERS[linerKey];
+  const S = 2048;
+  const cv = document.createElement('canvas');
+  cv.width = S; cv.height = S;
+  const ctx = cv.getContext('2d');
+
+  ctx.fillStyle = liner.base;
+  ctx.fillRect(0, 0, S, S);
+
+  // 세로 골판 (문은 BoxGeometry라 진짜 메쉬가 아니라 텍스처로 표현)
+  const stripes = 50;
+  const sw = S / stripes;
+  for (let i = 0; i < stripes; i++) {
+    const x = i * sw;
+    const g = ctx.createLinearGradient(x, 0, x + sw, 0);
+    g.addColorStop(0,    'rgba(0,0,0,0.40)');
+    g.addColorStop(0.18, 'rgba(0,0,0,0.15)');
+    g.addColorStop(0.5,  'rgba(255,255,255,0.18)');
+    g.addColorStop(0.82, 'rgba(0,0,0,0.15)');
+    g.addColorStop(1,    'rgba(0,0,0,0.40)');
+    ctx.fillStyle = g;
+    ctx.fillRect(x, 0, sw, S);
+  }
+  // 문 가운데 세로 분할선
+  ctx.fillStyle = 'rgba(0,0,0,0.6)';
+  ctx.fillRect(S / 2 - 8, 0, 16, S);
+
+  // 컨테이너 번호 박스 (상단)
+  ctx.fillStyle = 'white';
+  ctx.fillRect(120, 120, S - 240, 280);
+  ctx.fillStyle = 'black';
+  ctx.font = 'bold 192px "Courier New", monospace';
+  ctx.textBaseline = 'middle';
+  ctx.fillText(containerNum, 180, 260);
+
+  // 22G1 사이즈 코드
+  ctx.fillStyle = 'white';
+  ctx.fillRect(1640, 460, 280, 140);
+  ctx.fillStyle = 'black';
+  ctx.font = 'bold 112px Arial';
+  ctx.fillText('22G1', 1676, 530);
+
+  // 가운데 큰 선사명
+  ctx.fillStyle = liner.text;
+  ctx.font = 'bold 220px Impact, "Arial Black", sans-serif';
+  ctx.textBaseline = 'alphabetic';
+  ctx.fillText(liner.name, 160, 1160);
+
+  // 미세한 사용감
+  for (let i = 0; i < 50; i++) {
+    const x = Math.random() * S;
+    const y = Math.random() * S;
+    const r = Math.random() * 20;
+    ctx.fillStyle = `rgba(${100 + Math.random() * 40}, ${70 + Math.random() * 25}, ${50 + Math.random() * 20}, ${Math.random() * 0.06})`;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
+  return tex;
+}
+
+function makeCorrugatedNormalTex(stripes = 40, w = 1024, h = 256) {
+  const cv = document.createElement('canvas');
+  cv.width = w; cv.height = h;
+  const ctx = cv.getContext('2d');
+  const img = ctx.createImageData(w, h);
+  const data = img.data;
+  const sw = w / stripes;
+  // 한 골판 = sin 1 cycle. 표면 z = sin(2π * t), normal x = -cos(2π * t)
+  // 가장자리 부근에 골이 가장 깊게(어두운 줄) 들어가게 살짝 비대칭
+  for (let x = 0; x < w; x++) {
+    const t = (x % sw) / sw;
+    const nx = -Math.cos(2 * Math.PI * t);
+    const r = Math.floor((nx + 1) * 127.5);
+    for (let y = 0; y < h; y++) {
+      const i = (y * w + x) * 4;
+      data[i] = r;
+      data[i + 1] = 128;
+      data[i + 2] = 255;
+      data[i + 3] = 255;
+    }
+  }
+  ctx.putImageData(img, 0, 0);
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.NoColorSpace;
+  tex.anisotropy = 8;
+  return tex;
+}
+
+function makeCartonNormalTex() {
+  const cv = document.createElement('canvas');
+  cv.width = 256; cv.height = 256;
+  const ctx = cv.getContext('2d');
+  ctx.fillStyle = '#8080ff';
+  ctx.fillRect(0, 0, 256, 256);
+  // 테이프 부분이 살짝 돌출되도록 위/아래 가장자리만 normal 변화
+  const top = ctx.createLinearGradient(0, 112, 0, 120);
+  top.addColorStop(0, 'rgb(128,165,255)');
+  top.addColorStop(1, 'rgb(128,128,255)');
+  ctx.fillStyle = top;
+  ctx.fillRect(0, 112, 256, 8);
+  const bot = ctx.createLinearGradient(0, 136, 0, 144);
+  bot.addColorStop(0, 'rgb(128,128,255)');
+  bot.addColorStop(1, 'rgb(128,91,255)');
+  ctx.fillStyle = bot;
+  ctx.fillRect(0, 136, 256, 8);
+  // 라벨 가장자리도 살짝
+  ctx.strokeStyle = 'rgb(128,200,255)';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(18, 165, 90, 60);
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.NoColorSpace;
+  return tex;
+}
+
+function makeContainerBackTex(linerKey) {
+  const liner = LINERS[linerKey];
+  const S = 2048;
+  const cv = document.createElement('canvas');
+  cv.width = S; cv.height = S;
+  const ctx = cv.getContext('2d');
+  ctx.fillStyle = liner.base;
+  ctx.fillRect(0, 0, S, S);
+
+  // 작은 선사명 (위) — 골판은 메쉬가 표현
+  ctx.fillStyle = liner.text;
+  ctx.font = 'bold 160px Impact, "Arial Black", sans-serif';
+  ctx.fillText(liner.name, 160, 400);
+
+  // 미세한 사용감
+  for (let i = 0; i < 40; i++) {
+    const x = Math.random() * S;
+    const y = Math.random() * S;
+    const r = Math.random() * 18;
+    ctx.fillStyle = `rgba(${100 + Math.random() * 40}, ${70 + Math.random() * 25}, ${50 + Math.random() * 20}, ${Math.random() * 0.05})`;
+    ctx.beginPath();
+    ctx.arc(x, y, r, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
+  return tex;
+}
+
+function makeCartonTex() {
+  const cv = document.createElement('canvas');
+  cv.width = 256; cv.height = 256;
+  const ctx = cv.getContext('2d');
+  // 베이스
+  ctx.fillStyle = '#c4986b';
+  ctx.fillRect(0, 0, 256, 256);
+  // 가로 결
+  for (let y = 0; y < 256; y += 3) {
+    ctx.fillStyle = `rgba(${80 + Math.random() * 30}, ${50 + Math.random() * 20}, ${25 + Math.random() * 15}, ${0.06 + Math.random() * 0.06})`;
+    ctx.fillRect(0, y, 256, 1);
+  }
+  // 점 노이즈
+  for (let i = 0; i < 2500; i++) {
+    const x = Math.random() * 256;
+    const y = Math.random() * 256;
+    ctx.fillStyle = `rgba(${90 + Math.random() * 50}, ${60 + Math.random() * 30}, ${30 + Math.random() * 20}, ${Math.random() * 0.4})`;
+    ctx.fillRect(x, y, 1, 1);
+  }
+  // 가운데 테이프
+  ctx.fillStyle = 'rgba(225, 205, 165, 0.7)';
+  ctx.fillRect(0, 116, 256, 24);
+  ctx.strokeStyle = 'rgba(160, 130, 90, 0.4)';
+  ctx.lineWidth = 1;
+  ctx.strokeRect(0, 116, 256, 24);
+  // 라벨
+  ctx.fillStyle = 'white';
+  ctx.fillRect(18, 165, 90, 60);
+  ctx.strokeStyle = '#aaa';
+  ctx.strokeRect(18, 165, 90, 60);
+  // 바코드
+  ctx.fillStyle = 'black';
+  for (let i = 0; i < 28; i++) {
+    if (Math.random() > 0.4) {
+      ctx.fillRect(22 + i * 2.6, 175, Math.random() > 0.6 ? 1 : 2, 30);
+    }
+  }
+  ctx.font = '7px Arial';
+  ctx.fillText('SKU-' + Math.floor(Math.random() * 99999), 22, 218);
+  // FRAGILE 스탬프
+  ctx.save();
+  ctx.translate(180, 50);
+  ctx.rotate(-0.2);
+  ctx.fillStyle = 'rgba(180, 30, 30, 0.65)';
+  ctx.font = 'bold 18px Arial';
+  ctx.fillText('FRAGILE', 0, 0);
+  ctx.strokeStyle = 'rgba(180, 30, 30, 0.65)';
+  ctx.lineWidth = 2;
+  ctx.strokeRect(-4, -16, 80, 22);
+  ctx.restore();
+
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  return tex;
+}
+
+// 골판 패널 — 실제 vertex displacement (사인파)
+function makeCorrugatedPanelGeom(W, H, stripesCount, depth = 18) {
+  const segX = stripesCount * 6;
+  const segY = 4;
+  const geom = new THREE.PlaneGeometry(W, H, segX, segY);
+  const pos = geom.attributes.position;
+  const stripeW = W / stripesCount;
+  for (let i = 0; i < pos.count; i++) {
+    const x = pos.getX(i);
+    const t = ((x + W / 2) % stripeW) / stripeW;
+    const z = Math.sin(t * Math.PI * 2) * depth / 2;
+    pos.setZ(i, z);
+  }
+  pos.needsUpdate = true;
+  geom.computeVertexNormals();
+  return geom;
+}
+
+function makeWoodTex() {
+  const cv = document.createElement('canvas');
+  cv.width = 512; cv.height = 128;
+  const ctx = cv.getContext('2d');
+  ctx.fillStyle = '#8b6f47';
+  ctx.fillRect(0, 0, 512, 128);
+  for (let i = 0; i < 30; i++) {
+    const y = i * 4.5 + Math.random() * 3;
+    ctx.strokeStyle = `rgba(${70 + Math.random() * 40}, ${45 + Math.random() * 25}, ${25 + Math.random() * 15}, ${0.3 + Math.random() * 0.4})`;
+    ctx.lineWidth = 0.5 + Math.random() * 1.3;
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    let x = 0;
+    while (x < 512) {
+      const nx = x + 18 + Math.random() * 35;
+      const ny = y + (Math.random() - 0.5) * 4;
+      ctx.lineTo(nx, ny);
+      x = nx;
+    }
+    ctx.stroke();
+  }
+  for (let i = 0; i < 3000; i++) {
+    const x = Math.random() * 512;
+    const y = Math.random() * 128;
+    ctx.fillStyle = `rgba(${55 + Math.random() * 30}, ${35 + Math.random() * 20}, ${18 + Math.random() * 12}, ${Math.random() * 0.35})`;
+    ctx.fillRect(x, y, 1, 1);
+  }
+  const tex = new THREE.CanvasTexture(cv);
+  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+  tex.colorSpace = THREE.SRGBColorSpace;
+  return tex;
+}
+
+// ===== Geometry/Material builders =====
+function buildWallMaterial(side, linerKey, containerNum) {
+  const key = `wall-${side}-${linerKey}-${side === 'end' ? containerNum : ''}`;
+  return cached(key, () => {
+    let tex;
+    if (side === 'long') tex = makeContainerSideTex(linerKey);
+    else if (side === 'end') tex = makeContainerEndTex(linerKey, containerNum);
+    else tex = makeContainerBackTex(linerKey);
+
+    const normalTex = cached('corrugated-normal', () => makeCorrugatedNormalTex(40, 1024, 256));
+
+    return new THREE.MeshStandardMaterial({
+      map: tex,
+      normalMap: normalTex,
+      normalScale: new THREE.Vector2(0.35, 0.15),
+      roughness: 0.55,
+      metalness: 0.4,
+    });
+  });
+}
+
+function buildFrameMaterial() {
+  return cached('mat-frame', () => new THREE.MeshStandardMaterial({
+    color: 0x14141c,
+    roughness: 0.4,
+    metalness: 0.85,
+  }));
+}
+
+function buildContainerFrame(c) {
+  const frameMat = buildFrameMaterial();
+  frameMat._shared = true;
+
+  // ISO 코너 캐스팅 (모서리 8개) — 178×162×118mm 근사
+  const isoL = 178, isoH = 162, isoW = 118;
+  const isoGeom = new THREE.BoxGeometry(isoL, isoH, isoW);
+  for (const sx of [-1, 1]) {
+    for (const sy of [0, 1]) {
+      for (const sz of [-1, 1]) {
+        const m = new THREE.Mesh(isoGeom, frameMat);
+        m.position.set(
+          sx * (c.L / 2 - isoL / 2 + 10),
+          sy === 0 ? isoH / 2 : c.H - isoH / 2,
+          sz * (c.W / 2 - isoW / 2 + 5)
+        );
+        m.castShadow = true;
+        m.receiveShadow = true;
+        containerGroup.add(m);
+      }
+    }
+  }
+
+  // Corner post (수직 4개) — ISO 블록 사이 연결
+  const postSize = 100;
+  const postH = c.H - 2 * isoH;
+  const postGeom = new THREE.BoxGeometry(postSize, postH, postSize);
+  for (const sx of [-1, 1]) {
+    for (const sz of [-1, 1]) {
+      const m = new THREE.Mesh(postGeom, frameMat);
+      m.position.set(
+        sx * (c.L / 2 - postSize / 2 + 10),
+        c.H / 2,
+        sz * (c.W / 2 - postSize / 2 + 5)
+      );
+      m.castShadow = true;
+      m.receiveShadow = true;
+      containerGroup.add(m);
+    }
+  }
+
+  // Top/bottom rail — 길이 방향 (long side) 4개
+  const railL = c.L - 2 * isoL;
+  const railSize = 80;
+  const railGeomL = new THREE.BoxGeometry(railL, railSize, railSize);
+  for (const sy of [0, 1]) {
+    for (const sz of [-1, 1]) {
+      const m = new THREE.Mesh(railGeomL, frameMat);
+      m.position.set(
+        0,
+        sy === 0 ? railSize / 2 : c.H - railSize / 2,
+        sz * (c.W / 2 - railSize / 2 + 5)
+      );
+      m.castShadow = true;
+      m.receiveShadow = true;
+      containerGroup.add(m);
+    }
+  }
+
+  // Top/bottom rail — 폭 방향 (end side) 4개 (앞면은 문 위/아래)
+  const railW = c.W - 2 * isoW;
+  const railGeomW = new THREE.BoxGeometry(railSize, railSize, railW);
+  for (const sy of [0, 1]) {
+    for (const sx of [-1, 1]) {
+      const m = new THREE.Mesh(railGeomW, frameMat);
+      m.position.set(
+        sx * (c.L / 2 - railSize / 2 + 10),
+        sy === 0 ? railSize / 2 : c.H - railSize / 2,
+        0
+      );
+      m.castShadow = true;
+      m.receiveShadow = true;
+      containerGroup.add(m);
+    }
+  }
+}
+
+function clearGroup(g) {
+  while (g.children.length) {
+    const c = g.children.pop();
+    g.remove(c);
+    if (c.geometry) c.geometry.dispose();
+    if (c.material && !c.material._shared) {
+      if (Array.isArray(c.material)) c.material.forEach(m => m._shared || m.dispose());
+      else c.material.dispose();
+    }
+  }
+}
+
+let containerDoorRefs = [];
+
+function buildContainer(c) {
+  clearGroup(containerGroup);
+  containerDoorRefs = [];
+
+  const linerKey = state.liner;
+  const cNum = (document.getElementById('containerNum').value || 'INVU 1234567').toUpperCase();
+
+  // === 바닥 (컨테이너 바닥판) ===
+  const floorMat = new THREE.MeshStandardMaterial({
+    color: 0x3a3a4a, roughness: 0.85, metalness: 0.5,
+  });
+  const floor = new THREE.Mesh(new THREE.BoxGeometry(c.L, 60, c.W), floorMat);
+  floor.position.set(0, -30, 0);
+  floor.castShadow = true;
+  floor.receiveShadow = true;
+  containerGroup.add(floor);
+
+  // === 컨테이너 골격 (ISO 코너 + corner post + rail) ===
+  buildContainerFrame(c);
+
+  if (state.walls === 'none') return;
+
+  const matLongL = buildWallMaterial('long', linerKey);
+  const matLongR = buildWallMaterial('long', linerKey);
+  const matBack  = buildWallMaterial('back', linerKey);
+  const matCeil  = cached(`mat-ceil-${linerKey}`, () => new THREE.MeshStandardMaterial({
+    color: LINERS[linerKey].base, roughness: 0.7, metalness: 0.4,
+  }));
+  matCeil._shared = true;
+  matLongL._shared = true; matLongR._shared = true; matBack._shared = true;
+
+  const innerWallMat = cached('mat-wall-inner', () => new THREE.MeshStandardMaterial({
+    color: 0xcfd4dc, roughness: 0.55, metalness: 0.4,
+  }));
+  innerWallMat._shared = true;
+
+  // 외벽: 외부 골판 plane (vertex displacement) + 내부 흰 plane
+  // → 진짜 울퉁불퉁한 골판 메쉬, 천장은 frame 위로 살짝 솟아 z-fighting 회피
+  const wallGap = 30;
+  const wallEdge = 5;
+  const stripesLongSide = Math.max(40, Math.round(c.L / 240));
+  const stripesEndSide = Math.max(12, Math.round(c.W / 240));
+
+  // === 측벽 좌 (z = -W/2) — 외부면이 -z ===
+  const sideLOuter = new THREE.Mesh(
+    makeCorrugatedPanelGeom(c.L, c.H, stripesLongSide, 22), matLongL
+  );
+  sideLOuter.position.set(0, c.H / 2, -c.W / 2 + wallEdge);
+  sideLOuter.rotation.y = Math.PI;
+  sideLOuter.castShadow = true;
+  sideLOuter.receiveShadow = true;
+  containerGroup.add(sideLOuter);
+
+  const sideLInner = new THREE.Mesh(new THREE.PlaneGeometry(c.L, c.H), innerWallMat);
+  sideLInner.position.set(0, c.H / 2, -c.W / 2 + wallEdge + wallGap);
+  sideLInner.castShadow = true;
+  sideLInner.receiveShadow = true;
+  containerGroup.add(sideLInner);
+
+  // === 측벽 우 (z = +W/2) — cut 모드면 생략 ===
+  if (state.walls === 'all') {
+    const sideROuter = new THREE.Mesh(
+      makeCorrugatedPanelGeom(c.L, c.H, stripesLongSide, 22), matLongR
+    );
+    sideROuter.position.set(0, c.H / 2, c.W / 2 - wallEdge);
+    sideROuter.castShadow = true;
+    sideROuter.receiveShadow = true;
+    containerGroup.add(sideROuter);
+
+    const sideRInner = new THREE.Mesh(new THREE.PlaneGeometry(c.L, c.H), innerWallMat);
+    sideRInner.position.set(0, c.H / 2, c.W / 2 - wallEdge - wallGap);
+    sideRInner.rotation.y = Math.PI;
+    sideRInner.castShadow = true;
+    sideRInner.receiveShadow = true;
+    containerGroup.add(sideRInner);
+  }
+
+  // === 천장 — frame 위로 솟아 z-fighting 회피 ===
+  let ceilTopMat = matCeil;
+  if (state.walls === 'cut') {
+    ceilTopMat = matCeil.clone();
+    ceilTopMat.transparent = true;
+    ceilTopMat.opacity = 0.25;
+  }
+  // 천장 외부 — 외피 표면 위 5mm (미세 솟음, rail/corner post 와 안 겹침)
+  const ceilOuter = new THREE.Mesh(
+    makeCorrugatedPanelGeom(c.L, c.W, stripesLongSide, 4), ceilTopMat
+  );
+  ceilOuter.rotation.x = -Math.PI / 2;
+  ceilOuter.position.set(0, c.H + 5, 0);
+  ceilOuter.castShadow = true;
+  ceilOuter.receiveShadow = true;
+  containerGroup.add(ceilOuter);
+
+  // 천장 내부 — 외피 표면 +1mm (박스 적재 천장에 거의 닿음)
+  const ceilInner = new THREE.Mesh(new THREE.PlaneGeometry(c.L, c.W), innerWallMat);
+  ceilInner.rotation.x = Math.PI / 2;
+  ceilInner.position.set(0, c.H + 1, 0);
+  ceilInner.castShadow = true;
+  ceilInner.receiveShadow = true;
+  containerGroup.add(ceilInner);
+
+  // === 뒷벽 (x = -L/2) — 외부면이 -x ===
+  const backOuter = new THREE.Mesh(
+    makeCorrugatedPanelGeom(c.W, c.H, stripesEndSide, 22), matBack
+  );
+  backOuter.rotation.y = -Math.PI / 2;
+  backOuter.position.set(-c.L / 2 + wallEdge, c.H / 2, 0);
+  backOuter.castShadow = true;
+  backOuter.receiveShadow = true;
+  containerGroup.add(backOuter);
+
+  const backInner = new THREE.Mesh(new THREE.PlaneGeometry(c.W, c.H), innerWallMat);
+  backInner.rotation.y = Math.PI / 2;
+  backInner.position.set(-c.L / 2 + wallEdge + wallGap, c.H / 2, 0);
+  backInner.castShadow = true;
+  backInner.receiveShadow = true;
+  containerGroup.add(backInner);
+
+  // === 정면 두 짝 문 (x = +L/2) — BoxGeometry 두께 + 좌우 텍스처 split ===
+  const doorBaseMat = buildWallMaterial('end', linerKey, cNum);
+  const doorW = c.W / 2;
+  const doorThick = 60;
+  const doorH = c.H - 60; // rail/ISO 사이 공간
+
+  const innerPanelMat = cached('mat-door-inner', () => new THREE.MeshStandardMaterial({
+    color: 0xcfd4dc, roughness: 0.55, metalness: 0.45,
+  }));
+  const doorEdgeMat = cached('mat-door-edge', () => new THREE.MeshStandardMaterial({
+    color: 0x14141c, roughness: 0.45, metalness: 0.85,
+  }));
+  innerPanelMat._shared = true;
+  doorEdgeMat._shared = true;
+
+  const handleMat = cached('mat-handle', () => new THREE.MeshStandardMaterial({
+    color: 0x1a1a1f, roughness: 0.3, metalness: 0.92,
+  }));
+  handleMat._shared = true;
+
+  function buildHalfDoor(side) {
+    const offX = side === 'L' ? 0 : 0.5;
+    const matKey = `mat-door-outer-${side}-${linerKey}-${cNum}`;
+    const outerMat = cached(matKey, () => {
+      const m = doorBaseMat.clone();
+      m.map = doorBaseMat.map.clone();
+      m.map.offset = new THREE.Vector2(offX, 0);
+      m.map.repeat = new THREE.Vector2(0.5, 1);
+      m.map.needsUpdate = true;
+      if (doorBaseMat.normalMap) m.normalMap = doorBaseMat.normalMap;
+      return m;
+    });
+    outerMat._shared = true;
+
+    const group = new THREE.Group();
+
+    // 문 본체
+    const geom = new THREE.BoxGeometry(doorThick, doorH, doorW);
+    const mats = [
+      outerMat,       // +x 외부
+      innerPanelMat,  // -x 내부
+      doorEdgeMat, doorEdgeMat,
+      doorEdgeMat, doorEdgeMat,
+    ];
+    const body = new THREE.Mesh(geom, mats);
+    body.castShadow = true;
+    body.receiveShadow = true;
+    group.add(body);
+
+    // 손잡이 두 개 (수직 봉 + 잡는 부분 + 위/아래 잠금장치)
+    for (const zOff of [-doorW * 0.28, doorW * 0.28]) {
+      const rod = new THREE.Mesh(
+        new THREE.CylinderGeometry(14, 14, doorH * 0.82, 14),
+        handleMat
+      );
+      rod.position.set(doorThick / 2 + 18, 0, zOff);
+      rod.castShadow = true;
+      rod.receiveShadow = true;
+      group.add(rod);
+
+      const grip = new THREE.Mesh(
+        new THREE.BoxGeometry(70, 90, 26),
+        handleMat
+      );
+      grip.position.set(doorThick / 2 + 50, 0, zOff);
+      grip.castShadow = true;
+      grip.receiveShadow = true;
+      group.add(grip);
+
+      // 잠금 브라켓 (위/아래)
+      for (const yOff of [doorH * 0.43, -doorH * 0.43]) {
+        const lock = new THREE.Mesh(
+          new THREE.BoxGeometry(48, 50, 70),
+          handleMat
+        );
+        lock.position.set(doorThick / 2 + 16, yOff, zOff);
+        lock.castShadow = true;
+        lock.receiveShadow = true;
+        group.add(lock);
+      }
+    }
+
+    return group;
+  }
+
+  // 왼쪽 문
+  const hingeL = new THREE.Group();
+  hingeL.position.set(c.L / 2 - 5, c.H / 2, -c.W / 2);
+  const doorMeshL = buildHalfDoor('L');
+  doorMeshL.position.set(-doorThick / 2, 0, doorW / 2);
+  hingeL.add(doorMeshL);
+  containerGroup.add(hingeL);
+  containerDoorRefs.push({ hinge: hingeL, side: 'L' });
+
+  // 오른쪽 문
+  const hingeR = new THREE.Group();
+  hingeR.position.set(c.L / 2 - 5, c.H / 2, c.W / 2);
+  const doorMeshR = buildHalfDoor('R');
+  doorMeshR.position.set(-doorThick / 2, 0, -doorW / 2);
+  hingeR.add(doorMeshR);
+  containerGroup.add(hingeR);
+  containerDoorRefs.push({ hinge: hingeR, side: 'R' });
+
+  applyDoorState();
+}
+
+function applyDoorState() {
+  if (!containerDoorRefs.length) return;
+  const open = state.doors;
+  // 0 = 닫힘, 1 = 한쪽(왼쪽만), 2 = 양쪽
+  const angle = Math.PI * 0.75; // 135도
+  containerDoorRefs.forEach(({ hinge, side }) => {
+    let target = 0;
+    if (open === 2) target = side === 'L' ? -angle : angle;
+    else if (open === 1) target = side === 'L' ? -angle : 0;
+    hinge.rotation.y = target;
+  });
+}
+
+// ===== 박스/파레트 머티리얼 =====
+function getBoxMaterial() {
+  if (state.boxStyle === 'carton') {
+    const cartonTex = cached('carton', makeCartonTex);
+    const cartonNormal = cached('carton-normal', makeCartonNormalTex);
+    return cached('mat-carton', () => new THREE.MeshStandardMaterial({
+      map: cartonTex,
+      normalMap: cartonNormal,
+      normalScale: new THREE.Vector2(0.5, 0.5),
+      roughness: 0.85,
+      metalness: 0.0,
+    }));
+  } else if (state.boxStyle === 'drum') {
+    return cached('mat-drum', () => new THREE.MeshStandardMaterial({
+      color: 0x3a4458,
+      roughness: 0.22,
+      metalness: 0.92,
+    }));
+  } else if (state.boxStyle === 'sack') {
+    return cached('mat-sack', () => new THREE.MeshStandardMaterial({
+      color: 0xcfc09a,
+      roughness: 0.95,
+      metalness: 0.0,
+    }));
+  } else if (state.boxStyle === 'solid') {
+    return cached('mat-solid', () => new THREE.MeshStandardMaterial({
+      color: 0x6c5ce7, roughness: 0.55, metalness: 0.1,
+      emissive: 0x1a0f44, emissiveIntensity: 0.2,
+    }));
+  } else {
+    return cached('mat-gradient', () => new THREE.MeshStandardMaterial({
+      color: 0xffffff, roughness: 0.55, metalness: 0.1,
+      emissive: 0x1a0f44, emissiveIntensity: 0.15,
+    }));
+  }
+}
+
+function getPalletMaterial() {
+  const woodTex = cached('wood', makeWoodTex);
+  return cached('mat-wood', () => new THREE.MeshStandardMaterial({
+    map: woodTex, roughness: 0.92, metalness: 0.0,
+  }));
+}
+
+// ===== 적재 계산 =====
+function fitBoxesOnPallet(pw, pd, ph, bw, bd, bh, ch, maxStack) {
+  const a = Math.floor(pw / bw) * Math.floor(pd / bd);
+  const b = Math.floor(pw / bd) * Math.floor(pd / bw);
+  let perLayer, fw, fd, nx, ny;
+  if (a >= b) {
+    perLayer = a; fw = bw; fd = bd;
+    nx = Math.floor(pw / bw); ny = Math.floor(pd / bd);
+  } else {
+    perLayer = b; fw = bd; fd = bw;
+    nx = Math.floor(pw / bd); ny = Math.floor(pd / bw);
+  }
+  let layers = Math.floor((ch - ph) / bh);
+  if (maxStack > 0) layers = Math.min(layers, maxStack);
+  layers = Math.max(0, layers);
+  return { perLayer, layers, total: perLayer * layers, bw: fw, bd: fd, nx, ny };
+}
+
+function fitPalletsInContainer(L, W, pw, pd) {
+  const aX = Math.floor(L / pw);
+  const aZ = Math.floor(W / pd);
+  const a = aX * aZ;
+  const bX = Math.floor(L / pd);
+  const bZ = Math.floor(W / pw);
+  const b = bX * bZ;
+  if (a >= b) return { count: a, nx: aX, nz: aZ, pw, pd };
+  return { count: b, nx: bX, nz: bZ, pw: pd, pd: pw };
+}
+
+function placeCargo(c, p, fit, pAlloc, boxH) {
+  clearGroup(cargoGroup);
+
+  const { pw, pd, nx: pnx, nz: pnz, count: palletCount } = pAlloc;
+  const { layers, bw, bd, nx, ny, total: perPallet } = fit;
+  const totalBoxes = palletCount * perPallet;
+  if (palletCount === 0) return;
+
+  const startX = -c.L / 2;
+  const startZ = -c.W / 2;
+  const offsetX = (c.L - pw * pnx) / 2;
+  const offsetZ = (c.W - pd * pnz) / 2;
+
+  // === 파레트: 슬랫 구조 (BoxGeometry로 단순화한 두 층) ===
+  const palletMat = getPalletMaterial();
+  palletMat._shared = true;
+  const palletCenters = [];
+  for (let i = 0; i < pnx; i++) {
+    for (let j = 0; j < pnz; j++) {
+      const cx = startX + offsetX + pw / 2 + i * pw;
+      const cz = startZ + offsetZ + pd / 2 + j * pd;
+      palletCenters.push([cx, cz]);
+      // 상판 + 하판 + 받침
+      const top = new THREE.Mesh(new THREE.BoxGeometry(pw, 22, pd), palletMat);
+      top.position.set(cx, p.H - 11, cz);
+      top.castShadow = true;
+      top.receiveShadow = true;
+      cargoGroup.add(top);
+      const bot = new THREE.Mesh(new THREE.BoxGeometry(pw, 22, pd * 0.92), palletMat);
+      bot.position.set(cx, 11, cz);
+      bot.castShadow = true;
+      bot.receiveShadow = true;
+      cargoGroup.add(bot);
+      // 받침 3개 (양쪽 + 가운데)
+      for (const dz of [-pd * 0.42, 0, pd * 0.42]) {
+        const block = new THREE.Mesh(new THREE.BoxGeometry(pw * 0.94, p.H - 44, 110), palletMat);
+        block.position.set(cx, p.H / 2, cz + dz);
+        block.castShadow = true;
+        block.receiveShadow = true;
+        cargoGroup.add(block);
+      }
+    }
+  }
+
+  if (totalBoxes === 0 || layers === 0) return;
+
+  const boxMat = getBoxMaterial();
+  boxMat._shared = true;
+
+  let boxGeom;
+  if (state.boxStyle === 'drum') {
+    const dR = Math.min(bw, bd) / 2;
+    boxGeom = new THREE.CylinderGeometry(dR, dR, boxH, 28, 1);
+  } else if (state.boxStyle === 'sack') {
+    const r = Math.min(bw, boxH, bd) * 0.22;
+    boxGeom = new RoundedBoxGeometry(bw * 0.98, boxH * 0.95, bd * 0.98, 4, r);
+  } else {
+    const radius = Math.min(bw, boxH, bd) * 0.035;
+    boxGeom = new RoundedBoxGeometry(bw, boxH, bd, 2, radius);
+  }
+
+  const boxInst = new THREE.InstancedMesh(boxGeom, boxMat, totalBoxes);
+  boxInst.castShadow = state.shadows;
+  boxInst.receiveShadow = state.shadows;
+
+  const m4 = new THREE.Matrix4();
+  const tmpColor = new THREE.Color();
+  const colorA = new THREE.Color('#6c5ce7');
+  const colorB = new THREE.Color('#00cec9');
+  const isCarton = state.boxStyle === 'carton';
+  const isGradient = state.boxStyle === 'gradient';
+  const useColor = isCarton || isGradient;
+
+  let bIdx = 0;
+  let palletIdx = 0;
+  for (const [cx, cz] of palletCenters) {
+    for (let layer = 0; layer < layers; layer++) {
+      const t = layers > 1 ? layer / (layers - 1) : 0;
+      if (isGradient) tmpColor.copy(colorA).lerp(colorB, t);
+      for (let ix = 0; ix < nx; ix++) {
+        for (let iy = 0; iy < ny; iy++) {
+          const bx = cx - pw / 2 + bw / 2 + ix * bw + (pw - bw * nx) / 2;
+          const bz = cz - pd / 2 + bd / 2 + iy * bd + (pd - bd * ny) / 2;
+          const by = p.H + boxH / 2 + layer * boxH;
+
+          if (isCarton) {
+            // 카톤 4종 톤 + 미세 변형으로 박스마다 다른 색감
+            const variant = (palletIdx * 73 + layer * 13 + ix * 5 + iy * 3) % 4;
+            const tone = ((bIdx * 9301 + 49297) % 233280) / 233280;
+            const v = 0.78 + tone * 0.28;
+            if (variant === 0)      tmpColor.setRGB(v * 1.06, v * 0.94, v * 0.78);
+            else if (variant === 1) tmpColor.setRGB(v * 0.92, v * 0.86, v * 0.72);
+            else if (variant === 2) tmpColor.setRGB(v * 1.10, v * 0.96, v * 0.82);
+            else                    tmpColor.setRGB(v * 0.98, v * 0.90, v * 0.76);
+          }
+
+          m4.makeTranslation(bx, by, bz);
+          boxInst.setMatrixAt(bIdx, m4);
+          if (useColor) boxInst.setColorAt(bIdx, tmpColor);
+          bIdx++;
+        }
+      }
+    }
+    palletIdx++;
+  }
+  boxInst.instanceMatrix.needsUpdate = true;
+  if (useColor && boxInst.instanceColor) boxInst.instanceColor.needsUpdate = true;
+  cargoGroup.add(boxInst);
+}
+
+// ===== Inputs / recalc =====
+function getInputs() {
+  return {
+    cKey: document.getElementById('containerType').value,
+    pKey: document.getElementById('palletType').value,
+    bW: +document.getElementById('boxW').value || 0,
+    bD: +document.getElementById('boxD').value || 0,
+    bH: +document.getElementById('boxH').value || 0,
+    bKg: +document.getElementById('boxKg').value || 0,
+    maxStack: +document.getElementById('maxStack').value || 0,
+  };
+}
+
+function recalc() {
+  const inp = getInputs();
+  const c = CONTAINERS[inp.cKey];
+  const p = PALLETS[inp.pKey];
+
+  buildContainer(c);
+  updateViewerSpec(c);
+
+  if (!inp.bW || !inp.bD || !inp.bH) {
+    clearGroup(cargoGroup);
+    fitCamera(c);
+    updateStats(c, 0, 0, 0, 0, 0, 0, 0, 0, 0, '—');
+    return;
+  }
+
+  const pAlloc = fitPalletsInContainer(c.L, c.W, p.W, p.D);
+  const fit = fitBoxesOnPallet(pAlloc.pw, pAlloc.pd, p.H, inp.bW, inp.bD, inp.bH, c.H, inp.maxStack);
+
+  placeCargo(c, p, fit, pAlloc, inp.bH);
+  fitCamera(c);
+
+  const totalBoxes = fit.total * pAlloc.count;
+  const totalKg = totalBoxes * inp.bKg + pAlloc.count * p.kg;
+  const boxVolume = (inp.bW * inp.bD * inp.bH) / 1e9;
+  const totalVol = totalBoxes * boxVolume;
+  const containerVol = (c.L * c.W * c.H) / 1e9;
+  const floorPct = (pAlloc.count * (p.W * p.D)) / (c.L * c.W) * 100;
+  const volPct = totalVol / containerVol * 100;
+  const weightPct = c.maxKg > 0 ? totalKg / c.maxKg * 100 : 0;
+  const layoutStr = `${fit.nx}×${fit.ny}×${fit.layers}단`;
+
+  updateStats(c, totalBoxes, pAlloc.count, fit.total, totalKg, totalVol, containerVol, floorPct, volPct, weightPct, layoutStr);
+}
+
+function updateViewerSpec(c) {
+  document.getElementById('viewerSpec').innerHTML =
+    `<b>${c.name}</b> · ${LINERS[state.liner].name}<br>` +
+    `${c.L}×${c.W}×${c.H} mm<br>` +
+    `Max ${c.maxKg.toLocaleString()} kg · Tare ${c.tare.toLocaleString()} kg`;
+}
+
+function updateStats(c, totalBoxes, palletCount, perPallet, totalKg, totalVol, containerVol, floorPct, volPct, weightPct, layoutStr) {
+  document.getElementById('palletCount').textContent = palletCount;
+  document.getElementById('boxCount').textContent = totalBoxes.toLocaleString();
+  document.getElementById('boxPerPallet').textContent = perPallet;
+  document.getElementById('boxLayout').textContent = layoutStr;
+
+  document.getElementById('floorPct').textContent = floorPct.toFixed(1);
+  document.getElementById('floorBar').style.width = Math.min(100, floorPct) + '%';
+
+  document.getElementById('volPct').textContent = volPct.toFixed(1);
+  document.getElementById('volBar').style.width = Math.min(100, volPct) + '%';
+  document.getElementById('volTotal').textContent = totalVol.toFixed(2);
+  document.getElementById('volMax').textContent = containerVol.toFixed(2);
+
+  document.getElementById('weightPct').textContent = weightPct.toFixed(1);
+  const wBar = document.getElementById('weightBar');
+  wBar.style.width = Math.min(100, weightPct) + '%';
+  wBar.classList.toggle('warn', weightPct > 100);
+  document.getElementById('weightTotal').textContent = totalKg.toLocaleString(undefined, { maximumFractionDigits: 0 });
+  document.getElementById('weightMax').textContent = c.maxKg.toLocaleString();
+
+  const badge = document.getElementById('weightBadge');
+  if (weightPct > 100) badge.innerHTML = '<span class="badge warn">초과</span>';
+  else if (weightPct > 90) badge.innerHTML = '<span class="badge warn">주의</span>';
+  else if (totalBoxes > 0) badge.innerHTML = '<span class="badge ok">정상</span>';
+  else badge.innerHTML = '';
+}
+
+// ===== Camera =====
+function fitCamera(c) {
+  const center = new THREE.Vector3(0, c.H / 2, 0);
+  controls.target.copy(center);
+  if (state.view === 'iso') camera.position.set(c.L * 0.85, c.H * 2, c.W * 2.6);
+  else if (state.view === 'top') camera.position.set(0, c.L * 1.2, 1);
+  else if (state.view === 'side') camera.position.set(1, c.H * 0.6, c.W * 3.2);
+  else if (state.view === 'front') camera.position.set(c.L * 1.5, c.H * 0.6, 1);
+  camera.lookAt(center);
+  controls.update();
+}
+
+function setActiveView(id) {
+  ['viewIso', 'viewTop', 'viewSide', 'viewFront'].forEach(x =>
+    document.getElementById(x).classList.toggle('active', x === id)
+  );
+}
+
+// ===== Liner swatches =====
+function buildSwatches() {
+  const container = document.getElementById('linerSwatches');
+  Object.entries(LINERS).forEach(([key, liner]) => {
+    const btn = document.createElement('button');
+    btn.style.background = liner.base;
+    btn.dataset.liner = key;
+    if (key === state.liner) btn.classList.add('active');
+    btn.innerHTML = `<span class="lbl">${liner.name}</span>`;
+    btn.title = liner.name;
+    btn.addEventListener('click', () => {
+      state.liner = key;
+      document.querySelectorAll('#linerSwatches button').forEach(b =>
+        b.classList.toggle('active', b === btn)
+      );
+      // 텍스처 캐시에서 선사 관련 키 제거 (메모리는 leak 하지만 standalone 임시라 OK)
+      recalc();
+    });
+    container.appendChild(btn);
+  });
+}
+
+// ===== Resize =====
+function resize() {
+  const w = viewer.clientWidth;
+  const h = viewer.clientHeight;
+  renderer.setSize(w, h, false);
+  camera.aspect = w / h;
+  camera.updateProjectionMatrix();
+}
+resize();
+window.addEventListener('resize', resize);
+
+// ===== Bindings =====
+['viewIso', 'viewTop', 'viewSide', 'viewFront'].forEach(id => {
+  document.getElementById(id).onclick = () => {
+    state.view = id.replace('view', '').toLowerCase();
+    setActiveView(id);
+    fitCamera(CONTAINERS[getInputs().cKey]);
+  };
+});
+
+document.querySelectorAll('#wallsToggle button').forEach(btn => {
+  btn.onclick = () => {
+    document.querySelectorAll('#wallsToggle button').forEach(b => b.classList.toggle('active', b === btn));
+    state.walls = btn.dataset.walls;
+    recalc();
+  };
+});
+
+document.querySelectorAll('#doorToggle button').forEach(btn => {
+  btn.onclick = () => {
+    document.querySelectorAll('#doorToggle button').forEach(b => b.classList.toggle('active', b === btn));
+    state.doors = +btn.dataset.door;
+    applyDoorState();
+  };
+});
+
+document.querySelectorAll('#boxStyleToggle button').forEach(btn => {
+  btn.onclick = () => {
+    document.querySelectorAll('#boxStyleToggle button').forEach(b => b.classList.toggle('active', b === btn));
+    state.boxStyle = btn.dataset.style;
+    recalc();
+  };
+});
+
+document.querySelectorAll('#shadowToggle button').forEach(btn => {
+  btn.onclick = () => {
+    document.querySelectorAll('#shadowToggle button').forEach(b => b.classList.toggle('active', b === btn));
+    state.shadows = btn.dataset.shadow === 'on';
+    renderer.shadowMap.enabled = state.shadows;
+    sun.castShadow = state.shadows;
+    recalc();
+  };
+});
+
+['containerType','palletType','boxW','boxD','boxH','boxKg','maxStack','containerNum'].forEach(id => {
+  document.getElementById(id).addEventListener('input', recalc);
+  document.getElementById(id).addEventListener('change', recalc);
+});
+
+// ===== Render loop =====
+function loop() {
+  controls.update();
+  renderer.render(scene, camera);
+  requestAnimationFrame(loop);
+}
+
+buildSwatches();
+loop();
+recalc();
+</script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-05-14-invyone-intro/agent-demo.html b/notes/gbpark/2026-05-14-invyone-intro/agent-demo.html
new file mode 100644
index 00000000..4dd6a71d
--- /dev/null
+++ b/notes/gbpark/2026-05-14-invyone-intro/agent-demo.html
@@ -0,0 +1,1984 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <title>INVYONE Agent — Demo</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <style>
+    :root {
+      --bg-darkest: #060617;
+      --bg-deep: #0a0a23;
+      --bg-panel: #11112c;
+      --bg-card: #181838;
+      --bg-card-hi: #1f1f44;
+      --border: rgba(255, 255, 255, 0.07);
+      --border-strong: rgba(255, 255, 255, 0.13);
+      --text-primary: rgba(255, 255, 255, 0.92);
+      --text-secondary: rgba(255, 255, 255, 0.55);
+      --text-faint: rgba(255, 255, 255, 0.35);
+      --purple: #6c5ce7;
+      --purple-soft: #8b7df0;
+      --cyan: #00cec9;
+      --pink: #fd79a8;
+      --green: #00d68f;
+      --orange: #fdcb6e;
+      --red: #ff6b6b;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      width: 100%;
+      min-height: 100%;
+      background: #050514;
+      font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
+      color: var(--text-primary);
+      overflow: hidden;
+      -webkit-font-smoothing: antialiased;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* === Stage === */
+    .stage {
+      position: relative;
+      width: 1600px;
+      height: 900px;
+      background: var(--bg-deep);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* === Header === */
+    .header {
+      height: 52px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 14px;
+      background: var(--bg-darkest);
+      border-bottom: 1px solid var(--border);
+      font-size: 12px;
+    }
+    .h-logo {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      font-size: 13px;
+      padding-right: 6px;
+    }
+    .h-logo .badge {
+      padding: 2px 6px;
+      border-radius: 4px;
+      background: linear-gradient(135deg, var(--purple), var(--cyan));
+      color: #fff;
+      font-size: 9px;
+      letter-spacing: 0.12em;
+      margin-left: 4px;
+    }
+    .h-divider {
+      width: 1px;
+      height: 18px;
+      background: var(--border-strong);
+      margin: 0 6px;
+    }
+    .h-icon {
+      width: 28px;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-secondary);
+      border-radius: 5px;
+      font-size: 13px;
+    }
+    .h-context {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      background: rgba(108, 92, 231, 0.12);
+      border: 1px solid rgba(108, 92, 231, 0.25);
+      border-radius: 5px;
+      color: var(--text-primary);
+      font-size: 11.5px;
+    }
+    .h-context .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--green);
+      box-shadow: 0 0 6px rgba(0, 214, 143, 0.6);
+    }
+    .h-right {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-secondary);
+    }
+    .h-right-btn {
+      padding: 5px 10px;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .h-model {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 10px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      font-size: 11px;
+      color: var(--text-primary);
+    }
+    .h-model .ic {
+      color: var(--cyan);
+      font-size: 12px;
+    }
+
+    /* === Main === */
+    .main {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+    }
+
+    /* === Left — Chat === */
+    .chat {
+      width: 520px;
+      flex-shrink: 0;
+      background: var(--bg-panel);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .chat-head {
+      padding: 14px 18px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-shrink: 0;
+    }
+    .chat-head .avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 9px;
+      background: linear-gradient(135deg, var(--purple), var(--cyan));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 800;
+      color: #fff;
+      position: relative;
+      flex-shrink: 0;
+    }
+    .chat-head .avatar::after {
+      content: '';
+      position: absolute;
+      right: -2px;
+      bottom: -2px;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: var(--green);
+      border: 2px solid var(--bg-panel);
+    }
+    .chat-head .meta {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+      min-width: 0;
+    }
+    .new-chat-btn {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      font-size: 11px;
+      color: var(--text-secondary);
+      font-family: inherit;
+      cursor: pointer;
+      transition: all 0.25s;
+    }
+    .new-chat-btn:hover {
+      color: var(--text-primary);
+      border-color: rgba(108, 92, 231, 0.45);
+    }
+    .new-chat-btn.active {
+      background: rgba(108, 92, 231, 0.18);
+      border-color: var(--purple);
+      color: var(--purple-soft);
+      box-shadow: 0 0 18px rgba(108, 92, 231, 0.4);
+    }
+    .new-chat-btn .plus {
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--purple);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      line-height: 1;
+    }
+    .chat-head .name {
+      font-size: 13.5px;
+      font-weight: 700;
+      letter-spacing: -0.01em;
+    }
+    .chat-head .name .ai-tag {
+      margin-left: 6px;
+      padding: 1px 6px;
+      font-size: 9px;
+      letter-spacing: 0.1em;
+      background: rgba(0, 206, 201, 0.15);
+      color: var(--cyan);
+      border-radius: 3px;
+      vertical-align: middle;
+    }
+    .chat-head .sub {
+      font-size: 10.5px;
+      color: var(--text-secondary);
+    }
+
+    .chat-body {
+      flex: 1;
+      padding: 18px 18px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      overflow-y: auto;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255,255,255,0.1) transparent;
+    }
+    .chat-body::-webkit-scrollbar { width: 6px; }
+    .chat-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+
+    .msg {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      max-width: 92%;
+      opacity: 0;
+      transform: translateY(8px);
+      transition: opacity 0.35s, transform 0.35s;
+    }
+    .msg.shown { opacity: 1; transform: translateY(0); }
+    .msg.user { align-self: flex-end; align-items: flex-end; }
+    .msg.ai { align-self: flex-start; }
+
+    .msg .who {
+      font-size: 10px;
+      color: var(--text-faint);
+      letter-spacing: 0.04em;
+      padding: 0 2px;
+    }
+    .msg .bubble {
+      padding: 10px 14px;
+      font-size: 12.5px;
+      line-height: 1.55;
+      border-radius: 10px;
+      color: var(--text-primary);
+      word-break: keep-all;
+    }
+    .msg.user .bubble {
+      background: linear-gradient(135deg, var(--purple), #5849c4);
+      color: #fff;
+      border-bottom-right-radius: 4px;
+    }
+    .msg.ai .bubble {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-bottom-left-radius: 4px;
+    }
+    .msg.ai .bubble strong {
+      color: var(--cyan);
+      font-weight: 600;
+    }
+    .msg.ai .bubble em {
+      color: var(--orange);
+      font-style: normal;
+      font-weight: 500;
+    }
+
+    /* AI action card — 도구 호출 결과 표시 */
+    .ai-action {
+      align-self: flex-start;
+      width: 100%;
+      max-width: 92%;
+      background: rgba(108, 92, 231, 0.06);
+      border: 1px solid rgba(108, 92, 231, 0.22);
+      border-radius: 8px;
+      padding: 10px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      opacity: 0;
+      transform: translateY(6px);
+      transition: opacity 0.4s, transform 0.4s;
+    }
+    .ai-action.shown { opacity: 1; transform: translateY(0); }
+    .ai-action .ah {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11px;
+      color: var(--purple-soft);
+    }
+    .ai-action .ah .spinner {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      border: 1.5px solid rgba(139, 125, 240, 0.25);
+      border-top-color: var(--purple-soft);
+      animation: spin 0.8s linear infinite;
+    }
+    .ai-action .ah .check {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--green);
+      color: #052;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 8px;
+      font-weight: 800;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .ai-action .steps {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .ai-action .step {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+      font-size: 11px;
+      color: var(--text-secondary);
+      padding-left: 4px;
+      opacity: 0;
+      transform: translateX(-4px);
+      transition: opacity 0.3s, transform 0.3s;
+    }
+    .ai-action .step.shown { opacity: 1; transform: translateX(0); }
+    .ai-action .step .marker {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--cyan);
+      flex-shrink: 0;
+      box-shadow: 0 0 4px rgba(0, 206, 201, 0.5);
+    }
+    .ai-action .step.muted .marker { background: var(--text-faint); box-shadow: none; }
+    .ai-action .step .meta {
+      margin-left: auto;
+      font-size: 10px;
+      color: var(--text-faint);
+    }
+
+    /* Typing indicator */
+    .typing {
+      align-self: flex-start;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 12px 16px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      border-bottom-left-radius: 4px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .typing.shown { opacity: 1; }
+    .typing .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--purple-soft);
+      animation: typing-bounce 1.2s infinite ease-in-out;
+    }
+    .typing .dot:nth-child(2) { animation-delay: 0.15s; }
+    .typing .dot:nth-child(3) { animation-delay: 0.3s; }
+    @keyframes typing-bounce {
+      0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
+      30% { transform: translateY(-4px); opacity: 1; }
+    }
+
+    /* Suggestion chips */
+    .suggestions {
+      padding: 0 18px 14px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      flex-shrink: 0;
+      opacity: 0;
+      transition: opacity 0.4s;
+    }
+    .suggestions.shown { opacity: 1; }
+    .sugg-chip {
+      padding: 6px 11px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      font-size: 11px;
+      color: var(--text-secondary);
+      transition: all 0.2s;
+    }
+    .sugg-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
+
+    /* Chat input */
+    .chat-input {
+      padding: 12px 16px 14px;
+      flex-shrink: 0;
+      border-top: 1px solid var(--border);
+      background: var(--bg-darkest);
+    }
+    .chat-input-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 6px 6px 12px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 9px;
+      transition: border-color 0.25s, box-shadow 0.25s;
+    }
+    .chat-input-wrap.focus {
+      border-color: rgba(108, 92, 231, 0.55);
+      box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
+    }
+    .chat-input-wrap .field {
+      flex: 1;
+      font-size: 12.5px;
+      line-height: 1.4;
+      color: var(--text-primary);
+      outline: none;
+    }
+    .chat-input-wrap .field:empty::before {
+      content: '메시지를 입력하세요...';
+      color: var(--text-faint);
+    }
+    .chat-input-wrap.focus .field::after {
+      content: '';
+      display: inline-block;
+      width: 1px;
+      height: 14px;
+      background: var(--purple-soft);
+      margin-left: 2px;
+      vertical-align: middle;
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      0%, 50% { opacity: 1; }
+      51%, 100% { opacity: 0; }
+    }
+    .chat-input-wrap .send {
+      width: 28px;
+      height: 28px;
+      flex-shrink: 0;
+      background: var(--bg-deep);
+      border: 1px solid var(--border);
+      border-radius: 7px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-faint);
+      transition: all 0.25s;
+      font-size: 12px;
+      line-height: 1;
+    }
+    .chat-input-wrap .send.ready {
+      background: var(--purple);
+      border-color: transparent;
+      color: #fff;
+      box-shadow: 0 0 12px rgba(108, 92, 231, 0.45);
+    }
+    .chat-foot {
+      margin-top: 6px;
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+      color: var(--text-faint);
+      padding: 0 2px;
+    }
+
+    /* === Right — Workspace === */
+    .workspace {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--bg-deep);
+    }
+    .ws-toolbar {
+      height: 38px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 0 18px;
+      background: var(--bg-darkest);
+      border-bottom: 1px solid var(--border);
+      font-size: 11.5px;
+      color: var(--text-secondary);
+    }
+    .ws-toolbar .crumb {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .ws-toolbar .crumb-sep { color: var(--text-faint); }
+    .ws-toolbar .crumb-active { color: var(--text-primary); }
+    .ws-toolbar .right {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .ws-toolbar .tag {
+      padding: 2px 8px;
+      font-size: 10px;
+      background: rgba(0, 206, 201, 0.12);
+      color: var(--cyan);
+      border-radius: 10px;
+      border: 1px solid rgba(0, 206, 201, 0.22);
+    }
+
+    .ws-canvas {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px 28px;
+      scrollbar-width: thin;
+      scrollbar-color: rgba(255,255,255,0.1) transparent;
+    }
+    .ws-canvas::-webkit-scrollbar { width: 8px; }
+    .ws-canvas::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
+
+    /* Empty hero state */
+    .hero {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 14px;
+      color: var(--text-faint);
+      transition: opacity 0.4s;
+    }
+    .hero.gone { opacity: 0; pointer-events: none; }
+    .hero .ic {
+      width: 64px;
+      height: 64px;
+      border-radius: 16px;
+      background: linear-gradient(135deg, rgba(108, 92, 231, 0.16), rgba(0, 206, 201, 0.12));
+      border: 1px solid rgba(108, 92, 231, 0.25);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 26px;
+      color: var(--purple-soft);
+    }
+    .hero h2 {
+      font-size: 17px;
+      font-weight: 700;
+      color: var(--text-primary);
+      letter-spacing: -0.01em;
+    }
+    .hero p { font-size: 12px; color: var(--text-secondary); }
+
+    /* Work blocks — AI 가 만든 결과물 컨테이너 */
+    .block {
+      margin-bottom: 18px;
+      opacity: 0;
+      transform: translateY(12px);
+      transition: opacity 0.5s, transform 0.5s;
+    }
+    .block.shown { opacity: 1; transform: translateY(0); }
+    .block-h {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 10px;
+    }
+    .block-h .lbl {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      letter-spacing: 0.04em;
+      color: var(--purple-soft);
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+    .block-h .lbl::before {
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background: var(--purple-soft);
+      border-radius: 1px;
+      transform: rotate(45deg);
+    }
+    .block-h .title {
+      font-size: 14px;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+    .block-h .meta {
+      margin-left: auto;
+      font-size: 10.5px;
+      color: var(--text-faint);
+    }
+
+    /* KPI grid */
+    .kpi-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 12px;
+    }
+    .kpi-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 14px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-height: 96px;
+      position: relative;
+      overflow: hidden;
+      opacity: 0;
+      transform: translateY(8px);
+      transition: opacity 0.4s, transform 0.4s;
+    }
+    .kpi-card.shown { opacity: 1; transform: translateY(0); }
+    .kpi-card .label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .kpi-card .val {
+      font-size: 28px;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      color: #fff;
+    }
+    .kpi-card .delta {
+      font-size: 11px;
+      color: var(--green);
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+    }
+    .kpi-card .delta.down { color: var(--red); }
+    .kpi-card .delta.flat { color: var(--text-faint); }
+
+    .kpi-card.accent-cyan { border-color: rgba(0, 206, 201, 0.32); }
+    .kpi-card.accent-cyan .val { color: var(--cyan); }
+    .kpi-card.accent-purple { border-color: rgba(108, 92, 231, 0.32); }
+    .kpi-card.accent-purple .val { color: var(--purple-soft); }
+    .kpi-card.accent-pink { border-color: rgba(253, 121, 168, 0.32); }
+    .kpi-card.accent-pink .val { color: var(--pink); }
+    .kpi-card.accent-orange { border-color: rgba(253, 203, 110, 0.32); }
+    .kpi-card.accent-orange .val { color: var(--orange); }
+
+    /* Chart card (sparkline) */
+    .chart-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 16px 18px;
+    }
+    .chart-card .ch-head {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .chart-card .ch-title {
+      font-size: 12.5px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .chart-card .ch-legend {
+      display: flex;
+      gap: 12px;
+      font-size: 10.5px;
+      color: var(--text-secondary);
+    }
+    .chart-card .ch-legend .l { display: inline-flex; align-items: center; gap: 5px; }
+    .chart-card .ch-legend .l .sw {
+      width: 9px; height: 9px; border-radius: 2px;
+    }
+    .chart-card .ch-legend .l.cyan .sw { background: var(--cyan); }
+    .chart-card .ch-legend .l.purple .sw { background: var(--purple-soft); }
+
+    .chart-svg {
+      width: 100%;
+      height: 130px;
+    }
+    .chart-line {
+      fill: none;
+      stroke-width: 2;
+      stroke-linejoin: round;
+      stroke-linecap: round;
+      stroke-dasharray: 1200;
+      stroke-dashoffset: 1200;
+      transition: stroke-dashoffset 1.4s ease-out;
+    }
+    .chart-line.cyan { stroke: var(--cyan); }
+    .chart-line.purple { stroke: var(--purple-soft); }
+    .chart-area {
+      opacity: 0;
+      transition: opacity 0.8s 0.6s;
+    }
+    .chart-svg.drawn .chart-line { stroke-dashoffset: 0; }
+    .chart-svg.drawn .chart-area { opacity: 1; }
+    .chart-axis {
+      stroke: rgba(255,255,255,0.06);
+      stroke-width: 1;
+    }
+    .chart-label {
+      font-size: 9px;
+      fill: var(--text-faint);
+    }
+
+    /* Table card */
+    .table-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    .table-card .t-head {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .table-card .t-title {
+      font-size: 12.5px;
+      font-weight: 600;
+    }
+    .table-card .t-meta {
+      font-size: 10.5px;
+      color: var(--text-faint);
+    }
+    .t-thead {
+      display: grid;
+      grid-template-columns: 110px 1fr 130px 90px 110px 110px;
+      padding: 9px 16px;
+      font-size: 10.5px;
+      color: var(--text-secondary);
+      font-weight: 600;
+      background: rgba(255,255,255,0.02);
+      border-bottom: 1px solid var(--border);
+    }
+    .t-row {
+      display: grid;
+      grid-template-columns: 110px 1fr 130px 90px 110px 110px;
+      padding: 10px 16px;
+      font-size: 11.5px;
+      border-bottom: 1px solid rgba(255,255,255,0.03);
+      align-items: center;
+      max-height: 50px;
+      opacity: 0;
+      overflow: hidden;
+      transition: max-height 0.4s, opacity 0.32s, padding 0.4s, background 0.25s;
+    }
+    .t-row.shown { opacity: 1; }
+    .t-row:last-child { border-bottom: none; }
+    .t-row.hl {
+      background: rgba(253, 107, 107, 0.05);
+    }
+    .t-row.hl-fade {
+      background: rgba(108, 92, 231, 0.06);
+    }
+    .t-row .code {
+      font-family: 'SF Mono', monospace;
+      font-size: 11px;
+      color: var(--cyan);
+    }
+    .t-row .amount {
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      font-size: 10px;
+      border-radius: 10px;
+      font-weight: 500;
+    }
+    .badge.delayed { background: rgba(253, 107, 107, 0.15); color: var(--red); }
+    .badge.urgent { background: rgba(253, 121, 168, 0.18); color: var(--pink); }
+    .badge.normal { background: rgba(0, 214, 143, 0.15); color: var(--green); }
+    .badge.processing { background: rgba(0, 206, 201, 0.13); color: var(--cyan); }
+    .badge.dot {
+      width: 6px; height: 6px; padding: 0;
+      border-radius: 50%;
+      margin-right: 4px;
+    }
+
+    /* Insight callout */
+    .insight {
+      background: linear-gradient(135deg, rgba(108, 92, 231, 0.08), rgba(0, 206, 201, 0.05));
+      border: 1px solid rgba(108, 92, 231, 0.25);
+      border-radius: 10px;
+      padding: 14px 16px;
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+    .insight .ic {
+      width: 28px;
+      height: 28px;
+      flex-shrink: 0;
+      border-radius: 8px;
+      background: linear-gradient(135deg, var(--purple), var(--cyan));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      color: #fff;
+    }
+    .insight .body { flex: 1; }
+    .insight .ttl {
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--text-primary);
+      margin-bottom: 4px;
+      letter-spacing: -0.01em;
+    }
+    .insight .desc {
+      font-size: 11.5px;
+      color: var(--text-secondary);
+      line-height: 1.55;
+    }
+    .insight .desc strong { color: var(--orange); font-weight: 600; }
+
+    /* Action result list */
+    .actions-result {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 14px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .actions-result .ar-head {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 4px;
+    }
+    .actions-result .ar-head .ic {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      background: var(--green);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      color: #052;
+      font-weight: 800;
+    }
+    .action-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 10px;
+      background: var(--bg-deep);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-size: 11.5px;
+      opacity: 0;
+      transform: translateX(-6px);
+      transition: opacity 0.3s, transform 0.3s;
+    }
+    .action-row.shown { opacity: 1; transform: translateX(0); }
+    .action-row .avatar {
+      width: 22px;
+      height: 22px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--purple-soft), var(--cyan));
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      color: #fff;
+      font-weight: 700;
+    }
+    .action-row .who { color: var(--text-primary); font-weight: 500; min-width: 60px; }
+    .action-row .what { color: var(--text-secondary); flex: 1; }
+    .action-row .channel {
+      font-size: 10px;
+      padding: 1px 7px;
+      border-radius: 9px;
+      background: rgba(0, 206, 201, 0.13);
+      color: var(--cyan);
+    }
+    .action-row .time { color: var(--text-faint); font-size: 10px; }
+
+    /* Issue list — 오늘의 영역별 이슈 */
+    .issue-list { display: flex; flex-direction: column; gap: 8px; }
+    .issue-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 11px 14px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      opacity: 0;
+      transform: translateY(6px);
+      transition: opacity 0.35s, transform 0.35s, border-color 0.25s, background 0.25s;
+    }
+    .issue-item.shown { opacity: 1; transform: translateY(0); }
+    .issue-item .ic-cat {
+      width: 34px;
+      height: 34px;
+      border-radius: 8px;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+    }
+    .issue-item.cat-sales { border-color: rgba(253, 107, 107, 0.32); }
+    .issue-item.cat-sales .ic-cat { background: rgba(253, 107, 107, 0.13); color: var(--red); }
+    .issue-item.cat-prod .ic-cat { background: rgba(253, 203, 110, 0.13); color: var(--orange); }
+    .issue-item.cat-hr .ic-cat { background: rgba(0, 206, 201, 0.13); color: var(--cyan); }
+    .issue-item.cat-purchase .ic-cat { background: rgba(108, 92, 231, 0.13); color: var(--purple-soft); }
+    .issue-item .body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+    .issue-item .ttl {
+      font-size: 12.5px;
+      font-weight: 600;
+      color: var(--text-primary);
+      letter-spacing: -0.01em;
+    }
+    .issue-item .sub {
+      font-size: 11px;
+      color: var(--text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .issue-item .sev {
+      padding: 3px 10px;
+      font-size: 10px;
+      font-weight: 600;
+      border-radius: 10px;
+      flex-shrink: 0;
+      letter-spacing: 0.02em;
+    }
+    .issue-item .sev.high { background: rgba(255, 107, 107, 0.14); color: var(--red); }
+    .issue-item .sev.mid { background: rgba(253, 203, 110, 0.14); color: var(--orange); }
+    .issue-item .sev.low { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); }
+
+    /* New chat CTA — 마지막에 등장 */
+    .new-chat-cta {
+      align-self: center;
+      margin-top: 4px;
+      padding: 9px 18px;
+      background: linear-gradient(135deg, rgba(108, 92, 231, 0.18), rgba(0, 206, 201, 0.1));
+      border: 1px solid rgba(108, 92, 231, 0.4);
+      border-radius: 22px;
+      font-size: 11.5px;
+      color: var(--text-primary);
+      font-weight: 500;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      opacity: 0;
+      transform: translateY(6px);
+      transition: opacity 0.4s, transform 0.4s, box-shadow 0.3s, border-color 0.3s;
+    }
+    .new-chat-cta.shown {
+      opacity: 1;
+      transform: translateY(0);
+      box-shadow: 0 0 24px rgba(108, 92, 231, 0.3);
+    }
+    .new-chat-cta.active {
+      border-color: var(--purple);
+      box-shadow: 0 0 32px rgba(108, 92, 231, 0.5);
+    }
+    .new-chat-cta .plus {
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      background: var(--purple);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    /* 채팅/워크스페이스 페이드 전환 */
+    .fade-target {
+      transition: opacity 0.55s, transform 0.55s;
+    }
+    .fade-target.fading {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+
+    /* === Cursor === */
+    .cursor {
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      pointer-events: none;
+      z-index: 9999;
+      left: 600px;
+      top: 450px;
+      transition: top 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+                  left 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+                  transform 0.15s ease;
+    }
+    .cursor.click { transform: scale(0.82); }
+    .cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
+
+    .ripple {
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      border: 2px solid var(--purple-soft);
+      pointer-events: none;
+      z-index: 9998;
+      transform: translate(-50%, -50%) scale(0.3);
+      opacity: 0.85;
+      animation: ripple-anim 0.7s ease-out forwards;
+    }
+    @keyframes ripple-anim {
+      to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
+    }
+
+    /* Toast */
+    .toast {
+      position: absolute;
+      top: 70px;
+      left: calc(520px + (100% - 520px) / 2);
+      transform: translateX(-50%) translateY(-12px);
+      padding: 9px 18px;
+      background: var(--green);
+      color: #fff;
+      font-size: 12px;
+      font-weight: 600;
+      border-radius: 6px;
+      box-shadow: 0 4px 24px rgba(0, 214, 143, 0.4);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.4s, transform 0.4s;
+      z-index: 8000;
+    }
+    .toast.visible {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+    .toast.purple { background: var(--purple); box-shadow: 0 4px 24px rgba(108, 92, 231, 0.45); }
+    .toast.cyan { background: var(--cyan); color: #022; box-shadow: 0 4px 24px rgba(0, 206, 201, 0.45); }
+
+    /* === Control Panel === */
+    .control-panel {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 9999;
+      padding: 14px 16px;
+      background: rgba(15, 15, 40, 0.92);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 8px;
+      color: #fff;
+      font-size: 12px;
+      font-family: 'Pretendard', system-ui, sans-serif;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 200px;
+      backdrop-filter: blur(8px);
+    }
+    .control-panel .cp-title {
+      font-size: 10.5px;
+      font-weight: 600;
+      letter-spacing: 0.18em;
+      color: rgba(255,255,255,0.6);
+      text-transform: uppercase;
+      padding-bottom: 5px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .control-panel button {
+      margin-top: 2px;
+      padding: 7px 10px;
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.14);
+      border-radius: 4px;
+      color: #fff;
+      font-size: 11px;
+      font-family: inherit;
+      cursor: pointer;
+    }
+    .control-panel button:hover { background: rgba(255, 255, 255, 0.12); }
+    .control-panel.hidden { display: none; }
+    .show-panel-btn {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 9999;
+      padding: 8px 12px;
+      background: rgba(15, 15, 40, 0.92);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 4px;
+      color: #fff;
+      font-size: 11px;
+      font-family: 'Pretendard', system-ui, sans-serif;
+      cursor: pointer;
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <!-- Control panel -->
+  <div class="control-panel">
+    <div class="cp-title">Agent Demo</div>
+    <button id="restart-btn">▶ 데모 다시 시작</button>
+    <button id="record-btn">⏺ 녹화 시작</button>
+    <button id="hide-panel">패널 숨기기</button>
+  </div>
+  <button class="show-panel-btn" id="show-panel">⚙ 패널</button>
+
+  <div class="stage">
+    <!-- Header -->
+    <header class="header">
+      <div class="h-logo">INVYONE<span class="badge">AGENT</span></div>
+      <div class="h-divider"></div>
+      <div class="h-icon">☰</div>
+      <div class="h-context"><span class="dot"></span>대화 — 영업본부 · 김지원</div>
+      <div class="h-right">
+        <div class="h-model"><span class="ic">✦</span>INVYONE LLM · ERP-Connected</div>
+        <div class="h-icon">⌨</div>
+        <div class="h-icon">⓪</div>
+        <div class="h-right-btn">로그</div>
+      </div>
+    </header>
+
+    <main class="main">
+      <!-- Left: Chat -->
+      <aside class="chat">
+        <div class="chat-head">
+          <div class="avatar">A</div>
+          <div class="meta">
+            <div class="name">INVYONE Agent <span class="ai-tag">AI</span></div>
+            <div class="sub">ERP 데이터에 연결됨 · 응답 평균 1.2초</div>
+          </div>
+          <button class="new-chat-btn" id="new-chat-btn" title="새 대화">
+            <span class="plus">+</span>
+            <span>새 대화</span>
+          </button>
+        </div>
+
+        <div class="chat-body" id="chat-body">
+          <!-- 메시지가 동적으로 채워짐 -->
+        </div>
+
+        <div class="suggestions" id="suggestions">
+          <div class="sugg-chip">이번 달 매출은?</div>
+          <div class="sugg-chip">재고 현황 요약</div>
+          <div class="sugg-chip">다음 주 출하 일정</div>
+        </div>
+
+        <div class="chat-input">
+          <div class="chat-input-wrap" id="input-wrap">
+            <div class="field" id="input-field"></div>
+            <button class="send" id="send-btn">➤</button>
+          </div>
+          <div class="chat-foot">
+            <span>Shift + Enter 줄바꿈 · Enter 전송</span>
+            <span id="token-count">컨텍스트 · 0 / 200k</span>
+          </div>
+        </div>
+      </aside>
+
+      <!-- Right: Workspace -->
+      <section class="workspace">
+        <div class="ws-toolbar">
+          <div class="crumb"><span>🏢</span> 영업본부</div>
+          <span class="crumb-sep">/</span>
+          <div class="crumb crumb-active" id="crumb-active">대화 시작 전</div>
+          <div class="right">
+            <span class="tag" id="ws-tag" style="display:none;">실시간 분석</span>
+            <span style="font-size:10.5px;color:var(--text-faint);">최근 동기화 · 12초 전</span>
+          </div>
+        </div>
+        <div class="ws-canvas" id="ws-canvas">
+          <div class="hero" id="hero">
+            <div class="ic">✦</div>
+            <h2>무엇을 도와드릴까요?</h2>
+            <p>자연어로 물어보면 ERP 데이터를 직접 보고 답해드려요.</p>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <div class="cursor" id="cursor">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M 4 2 L 4 18 L 8 14 L 11 21 L 14 20 L 11 13 L 17 13 Z" fill="#fff" stroke="#000" stroke-width="1"/>
+      </svg>
+    </div>
+    <div class="toast" id="toast">✓ 완료</div>
+  </div>
+
+  <script>
+    const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+    const stage = document.querySelector('.stage');
+    const cursor = document.getElementById('cursor');
+
+    let aborted = false;
+    let onScenarioEnd = null;
+
+    async function safeSleep(ms) {
+      const start = performance.now();
+      while (performance.now() - start < ms) {
+        if (aborted) throw new Error('aborted');
+        await sleep(Math.min(50, ms - (performance.now() - start)));
+      }
+    }
+
+    function moveCursorTo(selector) {
+      return new Promise(resolve => {
+        const target = typeof selector === 'string' ? document.querySelector(selector) : selector;
+        if (!target) return resolve();
+        const rect = target.getBoundingClientRect();
+        const stageRect = stage.getBoundingClientRect();
+        const x = rect.left - stageRect.left + rect.width / 2 - 4;
+        const y = rect.top - stageRect.top + rect.height / 2 - 4;
+        cursor.style.left = x + 'px';
+        cursor.style.top = y + 'px';
+        setTimeout(resolve, 750);
+      });
+    }
+
+    function click(selector) {
+      return new Promise(resolve => {
+        const target = typeof selector === 'string' ? document.querySelector(selector) : selector;
+        if (!target) return resolve();
+        cursor.classList.add('click');
+        const rect = target.getBoundingClientRect();
+        const stageRect = stage.getBoundingClientRect();
+        const ripple = document.createElement('div');
+        ripple.className = 'ripple';
+        ripple.style.left = (rect.left - stageRect.left + rect.width / 2) + 'px';
+        ripple.style.top = (rect.top - stageRect.top + rect.height / 2) + 'px';
+        stage.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 720);
+        setTimeout(() => {
+          cursor.classList.remove('click');
+          resolve();
+        }, 220);
+      });
+    }
+
+    function showToast(text, variant = '') {
+      const t = document.getElementById('toast');
+      t.className = 'toast';
+      if (variant) t.classList.add(variant);
+      t.textContent = text;
+      requestAnimationFrame(() => t.classList.add('visible'));
+      setTimeout(() => t.classList.remove('visible'), 2000);
+    }
+
+    // === Typing into chat field ===
+    async function typeIntoField(text, charDelay = 65) {
+      const wrap = document.getElementById('input-wrap');
+      const field = document.getElementById('input-field');
+      wrap.classList.add('focus');
+      field.textContent = '';
+      for (const ch of text) {
+        if (aborted) return;
+        field.textContent += ch;
+        // token count fake
+        document.getElementById('token-count').textContent = `컨텍스트 · ${(text.length + Math.floor(Math.random()*30)).toLocaleString()} / 200k`;
+        await safeSleep(charDelay);
+      }
+      document.getElementById('send-btn').classList.add('ready');
+      await safeSleep(420);
+    }
+
+    async function sendUserMessage(text) {
+      const body = document.getElementById('chat-body');
+      const msg = document.createElement('div');
+      msg.className = 'msg user';
+      msg.innerHTML = `<div class="who">YOU</div><div class="bubble">${text}</div>`;
+      body.appendChild(msg);
+      requestAnimationFrame(() => msg.classList.add('shown'));
+      // clear input
+      document.getElementById('input-field').textContent = '';
+      document.getElementById('send-btn').classList.remove('ready');
+      document.getElementById('input-wrap').classList.remove('focus');
+      document.getElementById('suggestions').classList.remove('shown');
+      body.scrollTop = body.scrollHeight;
+      await safeSleep(220);
+    }
+
+    function appendTyping() {
+      const body = document.getElementById('chat-body');
+      const t = document.createElement('div');
+      t.className = 'typing';
+      t.innerHTML = `<span class="dot"></span><span class="dot"></span><span class="dot"></span>`;
+      body.appendChild(t);
+      requestAnimationFrame(() => t.classList.add('shown'));
+      body.scrollTop = body.scrollHeight;
+      return t;
+    }
+    function removeTyping(t) {
+      if (!t) return;
+      t.classList.remove('shown');
+      setTimeout(() => t.remove(), 300);
+    }
+
+    async function appendAiBubble(html) {
+      const body = document.getElementById('chat-body');
+      const msg = document.createElement('div');
+      msg.className = 'msg ai';
+      msg.innerHTML = `<div class="who">INVYONE AGENT</div><div class="bubble">${html}</div>`;
+      body.appendChild(msg);
+      requestAnimationFrame(() => msg.classList.add('shown'));
+      body.scrollTop = body.scrollHeight;
+      await safeSleep(150);
+      return msg;
+    }
+
+    async function appendAction(title, steps) {
+      const body = document.getElementById('chat-body');
+      const wrap = document.createElement('div');
+      wrap.className = 'ai-action';
+      wrap.innerHTML = `
+        <div class="ah"><span class="spinner"></span><span class="ah-title">${title}</span></div>
+        <div class="steps"></div>
+      `;
+      body.appendChild(wrap);
+      requestAnimationFrame(() => wrap.classList.add('shown'));
+      body.scrollTop = body.scrollHeight;
+      const stepsEl = wrap.querySelector('.steps');
+      for (const s of steps) {
+        if (aborted) return;
+        const stepDiv = document.createElement('div');
+        stepDiv.className = 'step';
+        stepDiv.innerHTML = `<span class="marker"></span><span>${s.text}</span><span class="meta">${s.meta || ''}</span>`;
+        stepsEl.appendChild(stepDiv);
+        requestAnimationFrame(() => stepDiv.classList.add('shown'));
+        body.scrollTop = body.scrollHeight;
+        await safeSleep(s.delay || 550);
+      }
+      // finalize → spinner → check
+      const ah = wrap.querySelector('.ah');
+      ah.innerHTML = `<span class="check">✓</span><span class="ah-title" style="color:var(--green)">${title} 완료</span>`;
+      stepsEl.querySelectorAll('.step').forEach(s => s.classList.add('muted'));
+      await safeSleep(300);
+    }
+
+    // === Workspace builders ===
+    function ensureWsReady(crumbText) {
+      document.getElementById('hero').classList.add('gone');
+      document.getElementById('crumb-active').textContent = crumbText;
+      const tag = document.getElementById('ws-tag');
+      tag.style.display = 'inline-block';
+    }
+
+    async function buildTodayKpi() {
+      const canvas = document.getElementById('ws-canvas');
+      const block = document.createElement('div');
+      block.className = 'block';
+      block.innerHTML = `
+        <div class="block-h">
+          <span class="lbl">오늘 종합</span>
+          <span class="title">영업본부 · 5월 14일</span>
+          <span class="meta">실시간 · 14:23 기준</span>
+        </div>
+        <div class="kpi-grid">
+          <div class="kpi-card accent-cyan"><div class="label">💰 오늘 매출</div><div class="val">₩142M</div><div class="delta">▲ 12% vs 평일평균</div></div>
+          <div class="kpi-card accent-purple"><div class="label">📦 신규 수주</div><div class="val">18</div><div class="delta">▲ 4건 vs 어제</div></div>
+          <div class="kpi-card accent-orange"><div class="label">🚚 출하 대기</div><div class="val">27</div><div class="delta flat">─ 평소 수준</div></div>
+          <div class="kpi-card accent-pink"><div class="label">⚠ 미해결 이슈</div><div class="val">8</div><div class="delta down">▲ 3건 vs 어제</div></div>
+        </div>
+      `;
+      canvas.appendChild(block);
+      requestAnimationFrame(() => block.classList.add('shown'));
+      const cards = block.querySelectorAll('.kpi-card');
+      for (const c of cards) {
+        await safeSleep(160);
+        c.classList.add('shown');
+      }
+      canvas.scrollTop = canvas.scrollHeight;
+      await safeSleep(400);
+    }
+
+    async function buildIssuesList() {
+      const canvas = document.getElementById('ws-canvas');
+      const block = document.createElement('div');
+      block.className = 'block';
+      block.innerHTML = `
+        <div class="block-h">
+          <span class="lbl">주요 이슈</span>
+          <span class="title">영역별 · 4건</span>
+          <span class="meta">우선순위 순</span>
+        </div>
+        <div class="issue-list" id="issue-list">
+          <div class="issue-item cat-sales">
+            <div class="ic-cat">📦</div>
+            <div class="body">
+              <div class="ttl">수주 지연 8건 · 한일정밀 외 3개 핵심거래처</div>
+              <div class="sub">SO_HEADER · 평균 지연 2.4일 · 이번 달 매출에 직접 영향</div>
+            </div>
+            <div class="sev high">HIGH</div>
+          </div>
+          <div class="issue-item cat-prod">
+            <div class="ic-cat">🏭</div>
+            <div class="body">
+              <div class="ttl">CNC 부품 A1 안전재고 미달</div>
+              <div class="sub">현재 24EA / 안전재고 80EA · 다음주 출하 영향 가능</div>
+            </div>
+            <div class="sev mid">MID</div>
+          </div>
+          <div class="issue-item cat-purchase">
+            <div class="ic-cat">📋</div>
+            <div class="body">
+              <div class="ttl">결재 대기 5건 · 24시간 초과</div>
+              <div class="sub">구매요청 3건 (장기연결재) + 휴가 2건 · 결재자 자리비움</div>
+            </div>
+            <div class="sev mid">MID</div>
+          </div>
+          <div class="issue-item cat-hr">
+            <div class="ic-cat">👥</div>
+            <div class="body">
+              <div class="ttl">금주 휴가자 7명 · 평소 대비 +3명</div>
+              <div class="sub">개발팀 3명 동시 휴가 · 일정 조율 권장</div>
+            </div>
+            <div class="sev low">LOW</div>
+          </div>
+        </div>
+      `;
+      canvas.appendChild(block);
+      requestAnimationFrame(() => block.classList.add('shown'));
+      const items = block.querySelectorAll('.issue-item');
+      for (const it of items) {
+        if (aborted) return;
+        await safeSleep(180);
+        it.classList.add('shown');
+      }
+      canvas.scrollTop = canvas.scrollHeight;
+      await safeSleep(500);
+    }
+
+    async function buildChartBlock() {
+      const canvas = document.getElementById('ws-canvas');
+      const block = document.createElement('div');
+      block.className = 'block';
+      block.innerHTML = `
+        <div class="block-h">
+          <span class="lbl">추이</span>
+          <span class="title">최근 14일 일별 매출</span>
+          <span class="meta">단위 · 백만원</span>
+        </div>
+        <div class="chart-card">
+          <div class="ch-head">
+            <div class="ch-title">매출 vs 출하 완료</div>
+            <div class="ch-legend">
+              <div class="l cyan"><span class="sw"></span>일 매출</div>
+              <div class="l purple"><span class="sw"></span>출하 완료</div>
+            </div>
+          </div>
+          <svg class="chart-svg" id="chart-svg" viewBox="0 0 600 130" preserveAspectRatio="none">
+            <!-- y grid -->
+            <line class="chart-axis" x1="0" y1="20" x2="600" y2="20"/>
+            <line class="chart-axis" x1="0" y1="55" x2="600" y2="55"/>
+            <line class="chart-axis" x1="0" y1="90" x2="600" y2="90"/>
+            <line class="chart-axis" x1="0" y1="120" x2="600" y2="120"/>
+            <!-- areas -->
+            <path class="chart-area" d="M 0 95 L 50 80 L 100 70 L 150 75 L 200 55 L 250 45 L 300 50 L 350 35 L 400 40 L 450 25 L 500 30 L 550 20 L 600 25 L 600 130 L 0 130 Z" fill="url(#cyanGrad)"/>
+            <!-- lines -->
+            <path class="chart-line cyan" d="M 0 95 L 50 80 L 100 70 L 150 75 L 200 55 L 250 45 L 300 50 L 350 35 L 400 40 L 450 25 L 500 30 L 550 20 L 600 25"/>
+            <path class="chart-line purple" d="M 0 110 L 50 105 L 100 95 L 150 100 L 200 85 L 250 80 L 300 75 L 350 65 L 400 70 L 450 60 L 500 55 L 550 50 L 600 45"/>
+            <defs>
+              <linearGradient id="cyanGrad" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="#00cec9" stop-opacity="0.32"/>
+                <stop offset="100%" stop-color="#00cec9" stop-opacity="0"/>
+              </linearGradient>
+            </defs>
+            <!-- labels -->
+            <text class="chart-label" x="0" y="128">5/1</text>
+            <text class="chart-label" x="150" y="128">5/5</text>
+            <text class="chart-label" x="300" y="128">5/9</text>
+            <text class="chart-label" x="450" y="128">5/13</text>
+            <text class="chart-label" x="580" y="128">오늘</text>
+          </svg>
+        </div>
+      `;
+      canvas.appendChild(block);
+      requestAnimationFrame(() => block.classList.add('shown'));
+      canvas.scrollTop = canvas.scrollHeight;
+      await safeSleep(200);
+      document.getElementById('chart-svg').classList.add('drawn');
+      await safeSleep(1500);
+    }
+
+    async function buildDelayedTable() {
+      const canvas = document.getElementById('ws-canvas');
+      const block = document.createElement('div');
+      block.className = 'block';
+      block.innerHTML = `
+        <div class="block-h">
+          <span class="lbl">상세</span>
+          <span class="title">지연 수주 목록 · 8건</span>
+          <span class="meta">납기 초과 또는 임박</span>
+        </div>
+        <div class="table-card">
+          <div class="t-head">
+            <div class="t-title">우선순위 순 정렬</div>
+            <div class="t-meta">SO_HEADER · 자동 필터링됨</div>
+          </div>
+          <div class="t-thead">
+            <div>수주번호</div>
+            <div>거래처</div>
+            <div>품목</div>
+            <div>수량</div>
+            <div>납기</div>
+            <div>상태</div>
+          </div>
+          <div class="t-body" id="delay-body"></div>
+        </div>
+      `;
+      canvas.appendChild(block);
+      requestAnimationFrame(() => block.classList.add('shown'));
+      const body = block.querySelector('#delay-body');
+      const rows = [
+        { code: 'SO-25-0512-018', cust: '한일정밀',     item: 'CNC 부품 A1',   qty: 240, due: '5/9',  status: 'urgent',     stext: '지연 5일',     hl: true },
+        { code: 'SO-25-0513-022', cust: '대원산업',     item: '알루미늄 케이스', qty: 120, due: '5/12', status: 'urgent',     stext: '지연 2일',     hl: true },
+        { code: 'SO-25-0514-001', cust: '서일테크',     item: '센서 모듈',     qty: 80,  due: '5/13', status: 'delayed',    stext: '지연 1일',     hl: true },
+        { code: 'SO-25-0514-007', cust: 'KS이노',       item: '브래킷 B-12',   qty: 600, due: '5/15', status: 'delayed',    stext: '내일 마감',    hl: false },
+        { code: 'SO-25-0514-012', cust: '삼정엔지니어링', item: '하우징 셸',    qty: 45,  due: '5/16', status: 'processing', stext: '모레 마감',    hl: false },
+      ];
+      for (const r of rows) {
+        if (aborted) return;
+        const row = document.createElement('div');
+        row.className = 't-row' + (r.hl ? ' hl' : '');
+        row.innerHTML = `
+          <div class="code">${r.code}</div>
+          <div>${r.cust}</div>
+          <div>${r.item}</div>
+          <div class="amount">${r.qty}</div>
+          <div>${r.due}</div>
+          <div><span class="badge ${r.status}">${r.stext}</span></div>
+        `;
+        body.appendChild(row);
+        requestAnimationFrame(() => row.classList.add('shown'));
+        await safeSleep(120);
+      }
+      canvas.scrollTop = canvas.scrollHeight;
+      await safeSleep(400);
+    }
+
+    async function buildInsight() {
+      const canvas = document.getElementById('ws-canvas');
+      const block = document.createElement('div');
+      block.className = 'block';
+      block.innerHTML = `
+        <div class="block-h">
+          <span class="lbl">AI 인사이트</span>
+          <span class="title">우선 처리 권고</span>
+        </div>
+        <div class="insight">
+          <div class="ic">✦</div>
+          <div class="body">
+            <div class="ttl">상위 3건은 즉시 담당자 알림이 필요해요</div>
+            <div class="desc">한일정밀 · 대원산업 · 서일테크 3건은 <strong>이번 주 안에 출하 처리</strong>가 필요한 핵심 거래처입니다. 평균 응답시간 4.2시간 기준으로 지금 알림 발송 시 금일 내 회신이 예상돼요.</div>
+          </div>
+        </div>
+      `;
+      canvas.appendChild(block);
+      requestAnimationFrame(() => block.classList.add('shown'));
+      canvas.scrollTop = canvas.scrollHeight;
+      await safeSleep(500);
+    }
+
+    async function buildActionResult() {
+      const canvas = document.getElementById('ws-canvas');
+      const block = document.createElement('div');
+      block.className = 'block';
+      block.innerHTML = `
+        <div class="block-h">
+          <span class="lbl">실행 완료</span>
+          <span class="title">담당자 알림 발송</span>
+          <span class="meta">방금 전</span>
+        </div>
+        <div class="actions-result">
+          <div class="ar-head"><span class="ic">✓</span> 3건 알림 발송 · Slack + 이메일</div>
+          <div class="action-row" data-i="1">
+            <span class="avatar">박</span>
+            <span class="who">박현우</span>
+            <span class="what">한일정밀 SO-25-0512-018 출하 지연 · 즉시 확인 요청</span>
+            <span class="channel">Slack</span>
+            <span class="time">14:23</span>
+          </div>
+          <div class="action-row" data-i="2">
+            <span class="avatar">이</span>
+            <span class="who">이수진</span>
+            <span class="what">대원산업 SO-25-0513-022 납기 조율 요청</span>
+            <span class="channel">Slack</span>
+            <span class="time">14:23</span>
+          </div>
+          <div class="action-row" data-i="3">
+            <span class="avatar">김</span>
+            <span class="who">김도현</span>
+            <span class="what">서일테크 SO-25-0514-001 생산 우선순위 상향 요청</span>
+            <span class="channel">Email</span>
+            <span class="time">14:23</span>
+          </div>
+        </div>
+      `;
+      canvas.appendChild(block);
+      requestAnimationFrame(() => block.classList.add('shown'));
+      canvas.scrollTop = canvas.scrollHeight;
+      const rows = block.querySelectorAll('.action-row');
+      for (const r of rows) {
+        await safeSleep(220);
+        r.classList.add('shown');
+      }
+      // highlight matching delayed rows in previous table
+      document.querySelectorAll('.t-row.hl').forEach(r => {
+        r.classList.remove('hl');
+        r.classList.add('hl-fade');
+      });
+      canvas.scrollTop = canvas.scrollHeight;
+      await safeSleep(400);
+    }
+
+    async function appendNewChatCta() {
+      const body = document.getElementById('chat-body');
+      const cta = document.createElement('div');
+      cta.className = 'new-chat-cta';
+      cta.id = 'new-chat-cta';
+      cta.innerHTML = `<span class="plus">+</span><span>새 대화 시작</span>`;
+      body.appendChild(cta);
+      requestAnimationFrame(() => cta.classList.add('shown'));
+      body.scrollTop = body.scrollHeight;
+      await safeSleep(400);
+    }
+
+    async function transitionToNewChat() {
+      const chatBody = document.getElementById('chat-body');
+      const wsCanvas = document.getElementById('ws-canvas');
+      const suggestions = document.getElementById('suggestions');
+      chatBody.classList.add('fade-target', 'fading');
+      wsCanvas.classList.add('fade-target', 'fading');
+      suggestions.classList.remove('shown');
+      // cursor 화면 밖으로 이동
+      cursor.style.left = '300px';
+      cursor.style.top = '780px';
+      await safeSleep(650);
+      // 내용 비우기
+      chatBody.innerHTML = '';
+      wsCanvas.innerHTML = `
+        <div class="hero" id="hero">
+          <div class="ic">✦</div>
+          <h2>무엇을 도와드릴까요?</h2>
+          <p>자연어로 물어보면 ERP 데이터를 직접 보고 답해드려요.</p>
+        </div>
+      `;
+      document.getElementById('crumb-active').textContent = '대화 시작 전';
+      document.getElementById('ws-tag').style.display = 'none';
+      document.getElementById('input-field').textContent = '';
+      document.getElementById('send-btn').classList.remove('ready');
+      document.getElementById('input-wrap').classList.remove('focus');
+      document.getElementById('token-count').textContent = '컨텍스트 · 0 / 200k';
+      await safeSleep(100);
+      // 페이드 인
+      chatBody.classList.remove('fading');
+      wsCanvas.classList.remove('fading');
+      suggestions.classList.add('shown');
+      await safeSleep(700);
+      // 다음 사이클 transition 잔재 제거
+      chatBody.classList.remove('fade-target');
+      wsCanvas.classList.remove('fade-target');
+      document.getElementById('new-chat-btn')?.classList.remove('active');
+    }
+
+    // === Reset ===
+    function reset() {
+      const chatBody = document.getElementById('chat-body');
+      const wsCanvas = document.getElementById('ws-canvas');
+      chatBody.classList.remove('fade-target', 'fading');
+      wsCanvas.classList.remove('fade-target', 'fading');
+      chatBody.innerHTML = '';
+      wsCanvas.innerHTML = `
+        <div class="hero" id="hero">
+          <div class="ic">✦</div>
+          <h2>무엇을 도와드릴까요?</h2>
+          <p>자연어로 물어보면 ERP 데이터를 직접 보고 답해드려요.</p>
+        </div>
+      `;
+      document.getElementById('crumb-active').textContent = '대화 시작 전';
+      document.getElementById('ws-tag').style.display = 'none';
+      document.getElementById('input-field').textContent = '';
+      document.getElementById('send-btn').classList.remove('ready');
+      document.getElementById('input-wrap').classList.remove('focus');
+      document.getElementById('suggestions').classList.remove('shown');
+      document.getElementById('toast').classList.remove('visible');
+      document.getElementById('token-count').textContent = '컨텍스트 · 0 / 200k';
+    }
+
+    // === Scenario ===
+    async function runScenario() {
+      cursor.style.transition = 'none';
+      cursor.style.left = '300px';
+      cursor.style.top = '780px';
+      await sleep(50);
+      cursor.style.transition = '';
+
+      // 초기 정적
+      await safeSleep(1200);
+      document.getElementById('suggestions').classList.add('shown');
+      await safeSleep(900);
+
+      // === Turn 1 : 안녕! 오늘 상황 어때? ===
+      await moveCursorTo('#input-wrap');
+      await click('#input-wrap');
+      await typeIntoField('안녕! 오늘 상황 어때?', 65);
+      await moveCursorTo('#send-btn');
+      await click('#send-btn');
+      await sendUserMessage('안녕! 오늘 상황 어때?');
+
+      let typing = appendTyping();
+      await safeSleep(800);
+      removeTyping(typing);
+
+      await appendAiBubble(`안녕하세요 지원님 👋 오늘 영업본부 상황 정리해 드릴게요.`);
+      await safeSleep(400);
+
+      // 액션 카드 1 — ERP 전 영역 스캔
+      ensureWsReady('오늘 종합');
+      await appendAction('오늘 영업본부 데이터 스캔 중', [
+        { text: 'DAILY_SNAPSHOT · 매출/수주/출하 집계', meta: '3개 모듈', delay: 550 },
+        { text: 'STOCK 안전재고 비교 · 결재 대기 조회', meta: '+ 2개 모듈', delay: 500 },
+        { text: '우선순위 이슈 자동 추출', meta: '4건', delay: 500 },
+      ]);
+
+      await buildTodayKpi();
+      await appendAiBubble(`오늘 매출 <strong>₩142M</strong> 으로 평일 평균보다 <strong>+12%</strong> 좋아요. 신규 수주도 18건 들어왔고요.<br>다만 <em>미해결 이슈가 8건</em> 있어서 영역별로 정리해 드릴게요.`);
+      await safeSleep(600);
+
+      await buildChartBlock();
+      await safeSleep(400);
+
+      await buildIssuesList();
+      await appendAiBubble(`<strong>가장 시급한 건 수주 지연 8건</strong>이에요. 한일정밀 등 핵심 거래처가 포함돼 있어서 이번 달 매출에 직접 영향을 줄 수 있어요. <em>자세히 살펴볼까요?</em>`);
+      await safeSleep(1000);
+
+      // === Turn 2 : 응 그거 자세히 보여줘 ===
+      await moveCursorTo('#input-wrap');
+      await click('#input-wrap');
+      await typeIntoField('응 지연 건 자세히 보여줘', 55);
+      await moveCursorTo('#send-btn');
+      await click('#send-btn');
+      await sendUserMessage('응 지연 건 자세히 보여줘');
+
+      typing = appendTyping();
+      await safeSleep(700);
+      removeTyping(typing);
+
+      await appendAction('지연 수주 분석 중', [
+        { text: 'due_date < TODAY 또는 due_date - TODAY <= 2', meta: '8건', delay: 500 },
+        { text: '거래처 등급 · 응답 이력 cross-join', meta: 'A/B/C 등급', delay: 500 },
+        { text: '우선순위 가중치 계산 (등급 × 지연일수)', meta: 'sorted', delay: 450 },
+      ]);
+
+      await buildDelayedTable();
+      await appendAiBubble(`상위 5건만 추렸어요. 지연이 가장 심한 건 한일정밀 SO-25-0512-018 (지연 5일) 이에요.`);
+      await safeSleep(500);
+
+      await buildInsight();
+      await appendAiBubble(`<strong>한일정밀 · 대원산업 · 서일테크</strong> 이 세 곳은 거래액 상위 10% 안에 드는 핵심 거래처라, 지금 알림 보내는 게 좋아 보여요. <em>알림 발송할까요?</em>`);
+      await safeSleep(1000);
+
+      // === Turn 3 : 응 알림 보내줘 ===
+      await moveCursorTo('#input-wrap');
+      await click('#input-wrap');
+      await typeIntoField('응 알림 보내줘', 60);
+      await moveCursorTo('#send-btn');
+      await click('#send-btn');
+      await sendUserMessage('응 알림 보내줘');
+
+      typing = appendTyping();
+      await safeSleep(600);
+      removeTyping(typing);
+
+      await appendAction('알림 발송 중', [
+        { text: '담당자 매칭 · SO_HEADER.assignee_id', meta: '3명', delay: 450 },
+        { text: 'Slack DM 발송 · 박현우, 이수진', meta: 'sent', delay: 600 },
+        { text: 'Email 발송 · 김도현 (Slack 미가입)', meta: 'sent', delay: 500 },
+        { text: '응답 트래킹 시작 · 12시간 SLA', meta: 'tracking', delay: 450 },
+      ]);
+
+      await buildActionResult();
+      showToast('✓ 3건 알림 발송 완료', 'cyan');
+      await appendAiBubble(`<strong>3명에게 알림 발송 완료</strong>했어요. 평균 4.2시간 안에 회신 오는 패턴이라 금일 내 응답 예상돼요. 회신 오는 대로 알려드릴게요.`);
+      await safeSleep(2800);
+
+      // === End : 헤더의 '새 대화' 버튼 클릭 → 다음 사이클로 전환 ===
+      await moveCursorTo('#new-chat-btn');
+      document.getElementById('new-chat-btn')?.classList.add('active');
+      await safeSleep(260);
+      await click('#new-chat-btn');
+      await transitionToNewChat();
+
+      // 한 사이클 종료 신호 (녹화 동기 정지용)
+      if (onScenarioEnd) {
+        const cb = onScenarioEnd;
+        onScenarioEnd = null;
+        cb();
+      }
+    }
+
+    async function loopScenario() {
+      aborted = false;
+      reset();
+      while (!aborted) {
+        try {
+          await runScenario();
+        } catch (e) {
+          if (e.message === 'aborted') break;
+          throw e;
+        }
+      }
+    }
+
+    function restartScenario() {
+      aborted = true;
+      setTimeout(() => loopScenario(), 150);
+    }
+
+    setTimeout(loopScenario, 500);
+
+    // === Control panel ===
+    const panel = document.querySelector('.control-panel');
+    const showBtn = document.getElementById('show-panel');
+    document.getElementById('hide-panel').addEventListener('click', () => {
+      panel.classList.add('hidden');
+      showBtn.style.display = 'block';
+    });
+    showBtn.addEventListener('click', () => {
+      panel.classList.remove('hidden');
+      showBtn.style.display = 'none';
+    });
+    document.getElementById('restart-btn').addEventListener('click', restartScenario);
+
+    // === 녹화 ===
+    // 녹화 정지는 SCENARIO_DURATION_MS 추정값 대신 시나리오 종료 콜백(onScenarioEnd)으로 동기화
+    const RECORD_FALLBACK_MS = 120000; // 콜백 미발화 시 2분 안전 정지
+    let recorder, recordChunks;
+    const recordBtn = document.getElementById('record-btn');
+    recordBtn.addEventListener('click', async () => {
+      try {
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+          video: { displaySurface: 'browser', frameRate: { ideal: 60, max: 60 } },
+          audio: false,
+          preferCurrentTab: true,
+          selfBrowserSurface: 'include'
+        });
+        const [videoTrack] = stream.getVideoTracks();
+        try {
+          if (typeof CropTarget !== 'undefined' && CropTarget.fromElement && videoTrack.cropTo) {
+            const cropTarget = await CropTarget.fromElement(document.querySelector('.stage'));
+            await videoTrack.cropTo(cropTarget);
+          }
+        } catch (e) { console.warn('Region Capture 실패:', e); }
+
+        const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+          ? 'video/webm;codecs=vp9' : 'video/webm';
+        recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 14_000_000 });
+        recordChunks = [];
+        recorder.ondataavailable = e => { if (e.data.size > 0) recordChunks.push(e.data); };
+        recorder.onstop = () => {
+          const blob = new Blob(recordChunks, { type: 'video/webm' });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'invyone-agent-demo-' + new Date().toISOString().slice(0,19).replace(/[:T]/g,'-') + '.webm';
+          a.click();
+          URL.revokeObjectURL(url);
+          stream.getTracks().forEach(t => t.stop());
+          recordBtn.textContent = '⏺ 녹화 시작';
+          recordBtn.disabled = false;
+        };
+
+        aborted = true;
+        recordBtn.disabled = true;
+        recordBtn.textContent = '⏳ 준비 중...';
+        await sleep(600);
+        reset();
+        cursor.style.transition = 'none';
+        cursor.style.left = '300px';
+        cursor.style.top = '780px';
+        await sleep(250);
+        cursor.style.transition = '';
+
+        recordBtn.textContent = '⏺ 녹화 중...';
+        recorder.start();
+
+        // 시나리오 한 사이클 완료 시 정확히 정지 (시각적으로도 빈 hero 상태와 일치)
+        onScenarioEnd = () => {
+          if (recorder && recorder.state === 'recording') recorder.stop();
+        };
+
+        setTimeout(() => {
+          aborted = false;
+          loopScenario();
+        }, 30);
+
+        // Fallback — 콜백 미발화 시 강제 정지 (비정상 케이스 대비)
+        setTimeout(() => {
+          if (recorder && recorder.state === 'recording') {
+            console.warn('녹화 fallback 정지 — 시나리오 콜백 미발화');
+            recorder.stop();
+          }
+        }, RECORD_FALLBACK_MS);
+      } catch (err) {
+        console.error('녹화 권한 거부:', err);
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-05-14-invyone-intro/index.html b/notes/gbpark/2026-05-14-invyone-intro/index.html
new file mode 100644
index 00000000..0e27ea64
--- /dev/null
+++ b/notes/gbpark/2026-05-14-invyone-intro/index.html
@@ -0,0 +1,747 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <title>Invyone — No-Code · Build Anything</title>
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+  <link rel="preconnect" href="https://unpkg.com" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />
+  <style>
+    :root {
+      --purple: #6c5ce7;
+      --purple-soft: #8b7df0;
+      --purple-glow: rgba(108, 92, 231, 0.6);
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      width: 100%;
+      min-height: 100%;
+      background: #06061a;
+      font-family: 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+      color: #fff;
+      -webkit-font-smoothing: antialiased;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* 스테이지 — 영상 녹화용 고정 크기 (1200 x 1500, 약 4:5) */
+    .stage {
+      position: relative;
+      width: 1200px;
+      height: 1500px;
+      background: radial-gradient(ellipse 80% 60% at 50% 50%, #0e0e35 0%, #08081f 60%, #050514 100%);
+      overflow: hidden;
+    }
+
+    /* dot 패턴 배경 */
+    .dot-bg {
+      position: absolute;
+      inset: 0;
+      background-image: radial-gradient(circle, rgba(170, 180, 230, 0.18) 1px, transparent 1.5px);
+      background-size: 26px 26px;
+      opacity: 0.7;
+      pointer-events: none;
+    }
+
+    /* 좌상단 뱃지 */
+    .top-badge {
+      position: absolute;
+      top: 38px;
+      left: 38px;
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      padding: 11px 22px 11px 16px;
+      border: 1px solid rgba(255, 255, 255, 0.13);
+      border-radius: 999px;
+      background: rgba(15, 15, 40, 0.45);
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 2.8px;
+      color: rgba(255, 255, 255, 0.92);
+      z-index: 10;
+    }
+    .badge-dot {
+      width: 11px;
+      height: 11px;
+      border-radius: 50%;
+      background: var(--purple);
+      box-shadow: 0 0 10px var(--purple-glow), 0 0 4px var(--purple);
+    }
+
+    /* SVG 점선 원 — 절대 중앙 정렬 */
+    .ring-svg {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    /* 중앙 글로우 원 — 안쪽 펄스 + 코어 */
+    .orb-pulse {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      border: 1px solid rgba(140, 125, 240, 0.22);
+      pointer-events: none;
+      z-index: 3;
+    }
+    .orb-pulse.p1 { width: 320px; height: 320px; }
+    .orb-pulse.p2 { width: 380px; height: 380px; border-color: rgba(140, 125, 240, 0.14); }
+    .orb-pulse.p3 { width: 440px; height: 440px; border-color: rgba(140, 125, 240, 0.08); }
+
+    .orb {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 300px;
+      height: 300px;
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.32) 0%, transparent 38%),
+        radial-gradient(circle at 50% 55%, #b8acff 0%, #7567e2 42%, #4936b8 82%, #2d1f8a 100%);
+      box-shadow:
+        inset -16px -16px 38px rgba(38, 26, 105, 0.4),
+        inset 14px 18px 28px rgba(255, 255, 255, 0.06),
+        0 0 55px rgba(108, 92, 231, 0.42),
+        0 0 110px rgba(108, 92, 231, 0.22),
+        0 0 170px rgba(108, 92, 231, 0.1);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 5;
+      animation: orb-breathe 5.5s ease-in-out infinite;
+    }
+    @keyframes orb-breathe {
+      0%, 100% {
+        box-shadow:
+          inset -16px -16px 38px rgba(38, 26, 105, 0.4),
+          inset 14px 18px 28px rgba(255, 255, 255, 0.06),
+          0 0 55px rgba(108, 92, 231, 0.42),
+          0 0 110px rgba(108, 92, 231, 0.22),
+          0 0 170px rgba(108, 92, 231, 0.1);
+      }
+      50% {
+        box-shadow:
+          inset -16px -16px 38px rgba(38, 26, 105, 0.4),
+          inset 14px 18px 28px rgba(255, 255, 255, 0.08),
+          0 0 75px rgba(108, 92, 231, 0.55),
+          0 0 140px rgba(108, 92, 231, 0.3),
+          0 0 210px rgba(108, 92, 231, 0.14);
+      }
+    }
+
+    /* 회전하는 점선 ring (orb과 안쪽 점선 원 사이) */
+    .orb-ring {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      z-index: 4;
+      animation: spin-ring 28s linear infinite;
+    }
+    .orb-ring.reverse {
+      animation: spin-ring-rev 36s linear infinite;
+    }
+    @keyframes spin-ring {
+      to { transform: translate(-50%, -50%) rotate(360deg); }
+    }
+    @keyframes spin-ring-rev {
+      to { transform: translate(-50%, -50%) rotate(-360deg); }
+    }
+    .orb-name {
+      font-size: 56px;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      color: #fff;
+      text-shadow: 0 0 12px rgba(255, 255, 255, 0.28);
+      line-height: 1;
+      position: relative;
+      z-index: 2;
+    }
+    .orb-tag {
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: 0.55em;
+      color: rgba(255, 255, 255, 0.95);
+      text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
+      margin-top: 16px;
+      padding-top: 14px;
+      position: relative;
+      z-index: 2;
+    }
+    .orb-tag::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 38px;
+      height: 1px;
+      background: rgba(255, 255, 255, 0.55);
+    }
+
+    /* 안쪽 4 노드 — 정사각형 점선 박스 + 시계방향 순차 펄스 */
+    .inner-node {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y)));
+      width: 86px;
+      height: 86px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      border: 1px dashed rgba(170, 180, 230, 0.48);
+      border-radius: 10px;
+      background: transparent;
+      z-index: 6;
+      animation: inner-pulse 4.8s ease-in-out infinite;
+    }
+    @keyframes inner-pulse {
+      0%, 70%, 100% {
+        border-color: rgba(170, 180, 230, 0.48);
+        box-shadow: none;
+      }
+      10%, 20% {
+        border-color: rgba(180, 165, 250, 0.95);
+        box-shadow:
+          0 0 18px rgba(108, 92, 231, 0.45),
+          inset 0 0 12px rgba(108, 92, 231, 0.12);
+      }
+    }
+    .inner-node .ic { transition: color 0.5s; }
+    .inner-node .ic { color: rgba(255, 255, 255, 0.78); display: flex; }
+    .inner-node .ic svg { width: 22px; height: 22px; stroke-width: 1.4; }
+    .inner-node .lb {
+      font-size: 13px;
+      font-weight: 500;
+      color: rgba(255, 255, 255, 0.92);
+      letter-spacing: 0.01em;
+    }
+
+    /* @property로 scale 변수 transition 가능하게 (Chrome 85+) */
+    @property --node-scale {
+      syntax: '<number>';
+      inherits: false;
+      initial-value: 1;
+    }
+    /* 바깥 11 노드 카드 */
+    .outer-node {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--node-scale));
+      width: 168px;
+      padding: 20px 14px 18px;
+      background: linear-gradient(180deg, rgba(30, 32, 70, 0.72) 0%, rgba(18, 20, 50, 0.78) 100%);
+      border: 1px solid rgba(255, 255, 255, 0.07);
+      border-radius: 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      z-index: 6;
+      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.03);
+      transition: --node-scale 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
+                  border-color 0.45s, background 0.45s, box-shadow 0.45s;
+    }
+    .outer-node.selected {
+      --node-scale: 1.08;
+      border-color: rgba(155, 140, 250, 1);
+      background: linear-gradient(180deg, rgba(54, 44, 135, 0.5) 0%, rgba(32, 26, 85, 0.5) 100%);
+      box-shadow:
+        0 0 28px rgba(108, 92, 231, 0.55),
+        0 0 56px rgba(108, 92, 231, 0.22),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    }
+    .outer-node.selected::before {
+      content: '';
+      position: absolute;
+      inset: -8px;
+      border-radius: 18px;
+      border: 1px solid rgba(155, 140, 250, 0.65);
+      animation: pulse-ring 1.8s ease-out infinite;
+      pointer-events: none;
+    }
+    .outer-node.selected::after {
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 50%;
+      height: 1.5px;
+      transform: translateX(-50%);
+      background: linear-gradient(90deg, transparent, rgba(180, 165, 255, 1), transparent);
+      box-shadow: 0 0 8px rgba(155, 140, 250, 0.8);
+      pointer-events: none;
+    }
+    @keyframes pulse-ring {
+      0%   { transform: scale(0.95); opacity: 0.85; }
+      100% { transform: scale(1.20); opacity: 0; }
+    }
+    .outer-node .ic { color: rgba(255, 255, 255, 0.88); display: flex; }
+    .outer-node .ic svg { width: 34px; height: 34px; stroke-width: 1.3; }
+    .outer-node.selected .ic { color: #fff; }
+    .outer-node .en {
+      font-size: 18px;
+      font-weight: 700;
+      letter-spacing: -0.005em;
+      color: #fff;
+    }
+    .outer-node .ko {
+      font-size: 13px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.5);
+      letter-spacing: 0.02em;
+    }
+    .outer-node.selected .ko { color: rgba(255, 255, 255, 0.82); }
+
+    /* 우하단 footer */
+    .bottom-tag {
+      position: absolute;
+      bottom: 34px;
+      right: 42px;
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      font-size: 14px;
+      color: rgba(255, 255, 255, 0.58);
+      letter-spacing: 0.01em;
+      z-index: 10;
+    }
+    .bottom-tag .plus { color: var(--purple-soft); font-weight: 600; font-size: 16px; }
+    .bottom-tag .sep { opacity: 0.45; }
+
+    /* === 애니메이션 토글 패널 === */
+    .control-panel {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 1000;
+      padding: 14px 16px;
+      background: rgba(15, 15, 40, 0.92);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 8px;
+      color: #fff;
+      font-size: 12px;
+      font-family: 'Pretendard', system-ui, sans-serif;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 200px;
+      backdrop-filter: blur(8px);
+    }
+    .control-panel .cp-title {
+      font-size: 10.5px;
+      font-weight: 600;
+      letter-spacing: 0.18em;
+      color: rgba(255,255,255,0.6);
+      text-transform: uppercase;
+      padding-bottom: 5px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .control-panel label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .control-panel input[type="checkbox"] { accent-color: #8b7df0; cursor: pointer; }
+    .control-panel button {
+      margin-top: 4px;
+      padding: 7px 10px;
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.14);
+      border-radius: 4px;
+      color: #fff;
+      font-size: 11px;
+      font-family: inherit;
+      cursor: pointer;
+    }
+    .control-panel button:hover { background: rgba(255, 255, 255, 0.12); }
+    .control-panel.hidden { display: none; }
+    .show-panel-btn {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 1000;
+      padding: 8px 12px;
+      background: rgba(15, 15, 40, 0.92);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 4px;
+      color: #fff;
+      font-size: 11px;
+      font-family: 'Pretendard', system-ui, sans-serif;
+      cursor: pointer;
+      display: none;
+    }
+
+    /* anim toggle overrides */
+    body.anim-off-inner-pulse .inner-node { animation: none !important; }
+    body.anim-off-orb-breathe .orb { animation: none !important; }
+    body.anim-off-ring-1 .orb-ring:not(.reverse) { animation: none !important; }
+    body.anim-off-ring-2 .orb-ring.reverse { animation: none !important; }
+  </style>
+</head>
+<body>
+  <div class="control-panel">
+    <div class="cp-title">Animations</div>
+    <label><input type="checkbox" data-anim="roulette" checked> 외곽 룰렛 회전</label>
+    <label><input type="checkbox" data-anim="inner-pulse" checked> 안쪽 4개 펄스</label>
+    <label><input type="checkbox" data-anim="orb-breathe" checked> orb 호흡</label>
+    <label><input type="checkbox" data-anim="ring-1" checked> 큰 ring (시계)</label>
+    <label><input type="checkbox" data-anim="ring-2" checked> 작은 ring (반시계)</label>
+    <button id="record-btn">⏺ 녹화 시작 (82초)</button>
+    <button id="hide-panel">패널 숨기기</button>
+  </div>
+  <button class="show-panel-btn" id="show-panel">⚙ 애니메이션 패널</button>
+
+  <div class="stage">
+    <div class="dot-bg"></div>
+
+    <div class="top-badge">
+      <span class="badge-dot"></span>
+      <span>NO-CODE · BUILD ANYTHING</span>
+    </div>
+
+    <!-- 외곽 점선 원 r=460 + 노드 사이 작은 dot 11개 (11등분 균등) -->
+    <svg class="ring-svg" width="1000" height="1000" viewBox="-500 -500 1000 1000">
+      <circle cx="0" cy="0" r="460" fill="none" stroke="rgba(170, 180, 230, 0.30)" stroke-width="1" stroke-dasharray="2 6" />
+      <g fill="rgba(165, 180, 230, 0.55)">
+        <!-- 인접 노드 호의 중간 (360/11 * (k+0.5)) -->
+        <circle cx="129.6" cy="-441.4" r="3.5" />
+        <circle cx="347.6" cy="-301.2" r="3.5" />
+        <circle cx="455.3" cy="-65.5" r="3.5" />
+        <circle cx="418.4" cy="191.1" r="3.5" />
+        <circle cx="248.7" cy="387" r="3.5" />
+        <circle cx="0" cy="460" r="3.5" />
+        <circle cx="-248.7" cy="387" r="3.5" />
+        <circle cx="-418.4" cy="191.1" r="3.5" />
+        <circle cx="-455.3" cy="-65.5" r="3.5" />
+        <circle cx="-347.6" cy="-301.2" r="3.5" />
+        <circle cx="-129.6" cy="-441.4" r="3.5" />
+      </g>
+    </svg>
+
+    <!-- 안쪽 점선 원 r=240 -->
+    <svg class="ring-svg" width="600" height="600" viewBox="-300 -300 600 600">
+      <circle cx="0" cy="0" r="240" fill="none" stroke="rgba(170, 180, 230, 0.22)" stroke-width="1" stroke-dasharray="2 6" />
+    </svg>
+
+    <!-- 중앙 펄스 -->
+    <div class="orb-pulse p3"></div>
+    <div class="orb-pulse p2"></div>
+    <div class="orb-pulse p1"></div>
+
+    <!-- 회전 점선 ring 2개 (반대 방향) -->
+    <svg class="orb-ring" width="380" height="380" viewBox="-190 -190 380 380">
+      <circle r="178" cx="0" cy="0" fill="none"
+        stroke="rgba(180, 165, 250, 0.32)" stroke-width="1" stroke-dasharray="3 9" />
+    </svg>
+    <svg class="orb-ring reverse" width="340" height="340" viewBox="-170 -170 340 340">
+      <circle r="158" cx="0" cy="0" fill="none"
+        stroke="rgba(180, 165, 250, 0.2)" stroke-width="1" stroke-dasharray="2 6" />
+    </svg>
+
+    <!-- 중앙 글로우 원 -->
+    <div class="orb">
+      <div class="orb-name">Invyone</div>
+      <div class="orb-tag">N O - C O D E</div>
+    </div>
+
+    <!-- 안쪽 4 노드 (반경 240, 12/3/6/9시) -->
+    <div class="inner-node" style="--x: 0px; --y: -240px">
+      <div class="ic"><i data-lucide="file-lock-2"></i></div>
+      <div class="lb">PTW/LOTO</div>
+    </div>
+    <div class="inner-node" style="--x: 240px; --y: 0px">
+      <div class="ic"><i data-lucide="trending-up"></i></div>
+      <div class="lb">KPI/Report</div>
+    </div>
+    <div class="inner-node" style="--x: 0px; --y: 240px">
+      <div class="ic"><i data-lucide="user-round"></i></div>
+      <div class="lb">HRM</div>
+    </div>
+    <div class="inner-node" style="--x: -240px; --y: 0px">
+      <div class="ic"><i data-lucide="settings"></i></div>
+      <div class="lb">Workflow</div>
+    </div>
+
+    <!-- 바깥 11 노드 (반경 460, 11등분 균등 32.73°씩) -->
+    <!-- 0° MES -->
+    <div class="outer-node" style="--x: 0px; --y: -460px">
+      <div class="ic"><i data-lucide="factory"></i></div>
+      <div class="en">MES</div>
+      <div class="ko">생산관리</div>
+    </div>
+    <!-- 32.73° Inventory -->
+    <div class="outer-node" style="--x: 248.7px; --y: -387px">
+      <div class="ic"><i data-lucide="package"></i></div>
+      <div class="en">Inventory</div>
+      <div class="ko">재고관리</div>
+    </div>
+    <!-- 65.45° PLM -->
+    <div class="outer-node" style="--x: 418.4px; --y: -191.1px">
+      <div class="ic"><i data-lucide="wrench"></i></div>
+      <div class="en">PLM</div>
+      <div class="ko">제품수명</div>
+    </div>
+    <!-- 98.18° AI Agents -->
+    <div class="outer-node" style="--x: 455.3px; --y: 65.5px">
+      <div class="ic"><i data-lucide="bot"></i></div>
+      <div class="en">AI Agents</div>
+      <div class="ko">자동화</div>
+    </div>
+    <!-- 130.91° EHS -->
+    <div class="outer-node" style="--x: 347.6px; --y: 301.2px">
+      <div class="ic"><i data-lucide="hard-hat"></i></div>
+      <div class="en">EHS</div>
+      <div class="ko">환경안전</div>
+    </div>
+    <!-- 163.64° ERP -->
+    <div class="outer-node" style="--x: 129.6px; --y: 441.4px">
+      <div class="ic"><i data-lucide="briefcase"></i></div>
+      <div class="en">ERP</div>
+      <div class="ko">전사자원</div>
+    </div>
+    <!-- 196.36° WMS -->
+    <div class="outer-node" style="--x: -129.6px; --y: 441.4px">
+      <div class="ic"><i data-lucide="truck"></i></div>
+      <div class="en">WMS</div>
+      <div class="ko">창고관리</div>
+    </div>
+    <!-- 229.09° QMS -->
+    <div class="outer-node" style="--x: -347.6px; --y: 301.2px">
+      <div class="ic"><i data-lucide="shield-check"></i></div>
+      <div class="en">QMS</div>
+      <div class="ko">품질관리</div>
+    </div>
+    <!-- 261.82° SCM -->
+    <div class="outer-node" style="--x: -455.3px; --y: 65.5px">
+      <div class="ic"><i data-lucide="globe"></i></div>
+      <div class="en">SCM</div>
+      <div class="ko">공급망</div>
+    </div>
+    <!-- 294.55° CRM -->
+    <div class="outer-node" style="--x: -418.4px; --y: -191.1px">
+      <div class="ic"><i data-lucide="users"></i></div>
+      <div class="en">CRM</div>
+      <div class="ko">고객관리</div>
+    </div>
+    <!-- 327.27° SCADA -->
+    <div class="outer-node" style="--x: -248.7px; --y: -387px">
+      <div class="ic"><i data-lucide="activity"></i></div>
+      <div class="en">SCADA</div>
+      <div class="ko">공정감시</div>
+    </div>
+
+    <!-- 우하단 카피 -->
+    <div class="bottom-tag">
+      <span class="plus">+</span>
+      <span>Build Anything</span>
+      <span class="sep">·</span>
+      <span>원하는 대로 자유롭게</span>
+    </div>
+  </div>
+
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+  <script>
+    lucide.createIcons();
+
+    // 안쪽 4 노드 — 시계방향 순차 펄스 (1.2초씩 어긋나게)
+    document.querySelectorAll('.inner-node').forEach((node, i) => {
+      node.style.animationDelay = (i * 1.2) + 's';
+    });
+
+    // === 외곽 룰렛 회전 + 랜덤 선택 ===
+    const TOTAL_NODES = 11;
+    const RADIUS = 460;
+    const STEP = 360 / TOTAL_NODES;
+    const outerNodes = document.querySelectorAll('.outer-node');
+    let currentAngle = 0;
+    let lastTargetIndex = -1;
+    let rouletteEnabled = true;
+    let rafId = null;
+    let highlightTimerId = null;
+    let nextSpinTimerId = null;
+
+    function setNodePositions(angle) {
+      for (let i = 0; i < outerNodes.length; i++) {
+        const a = (i * STEP + angle) * Math.PI / 180;
+        const x = Math.sin(a) * RADIUS;
+        const y = -Math.cos(a) * RADIUS;
+        outerNodes[i].style.setProperty('--x', x.toFixed(1) + 'px');
+        outerNodes[i].style.setProperty('--y', y.toFixed(1) + 'px');
+      }
+    }
+
+    function spinAndPick() {
+      if (!rouletteEnabled) return;
+
+      // === 녹화 트리거 (recorder.start는 외부에서 이미 호출됨) ===
+      if (recordingActive) {
+        recordingCycleCount++;
+        if (recordingCycleCount > RECORD_CYCLES) {
+          recorder.stop();
+          recordingActive = false;
+        } else {
+          recordBtn.textContent = '⏺ 녹화 중 ' + recordingCycleCount + '/' + RECORD_CYCLES;
+        }
+      }
+
+      const currMod = ((currentAngle % 360) + 360) % 360;
+      // 지금 12시 위치에 있는 노드 인덱스 (정규화)
+      const currentIndex = ((Math.round(-currMod / STEP) % TOTAL_NODES) + TOTAL_NODES) % TOTAL_NODES;
+
+      // 시계방향 1칸씩 sequential — 11 cycle 후 처음 노드로 자동 복귀 (seamless loop 보장)
+      const stepsAhead = 1;
+      const target = (currentIndex - stepsAhead + TOTAL_NODES) % TOTAL_NODES;
+      lastTargetIndex = target;
+
+      const targetMod = ((-target * STEP) % 360 + 360) % 360;
+      let delta = targetMod - currMod;
+      if (delta <= 0) delta += 360;
+
+      const startAngle = currentAngle;
+      const duration = 3000;
+      const startTime = performance.now();
+
+      outerNodes.forEach(n => n.classList.remove('selected'));
+
+      function frame(t) {
+        const p = Math.min((t - startTime) / duration, 1);
+        const eased = 1 - Math.pow(1 - p, 1.3); // 거의 linear, 끝만 살짝 감속
+        currentAngle = startAngle + delta * eased;
+        setNodePositions(currentAngle);
+        if (p < 1) {
+          rafId = requestAnimationFrame(frame);
+        } else {
+          outerNodes[target].classList.add('selected');
+          highlightTimerId = setTimeout(() => {
+            outerNodes[target].classList.remove('selected');
+            if (rouletteEnabled) nextSpinTimerId = setTimeout(spinAndPick, 500);
+          }, 4000);
+        }
+      }
+      rafId = requestAnimationFrame(frame);
+    }
+
+    setNodePositions(0);
+    setTimeout(() => { if (rouletteEnabled) spinAndPick(); }, 1200);
+
+    // === 애니메이션 토글 패널 핸들러 ===
+    const panel = document.querySelector('.control-panel');
+    const showBtn = document.getElementById('show-panel');
+
+    panel.querySelectorAll('input[data-anim]').forEach(input => {
+      input.addEventListener('change', () => {
+        const anim = input.dataset.anim;
+        const on = input.checked;
+        if (anim === 'roulette') {
+          rouletteEnabled = on;
+          if (on) setTimeout(spinAndPick, 200);
+        } else {
+          document.body.classList.toggle('anim-off-' + anim, !on);
+        }
+      });
+    });
+
+    document.getElementById('hide-panel').addEventListener('click', () => {
+      panel.classList.add('hidden');
+      showBtn.style.display = 'block';
+    });
+    showBtn.addEventListener('click', () => {
+      panel.classList.remove('hidden');
+      showBtn.style.display = 'none';
+    });
+
+    // === 자동 녹화 (MediaRecorder + getDisplayMedia) ===
+    let recorder, recordChunks;
+    let recordingActive = false;
+    let recordingCycleCount = 0;
+    const RECORD_CYCLES = 11; // 11 cycle = seamless loop
+
+    const recordBtn = document.getElementById('record-btn');
+    recordBtn.addEventListener('click', async () => {
+      if (recordingActive) return;
+      try {
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+          video: {
+            displaySurface: 'browser',
+            frameRate: 30
+          },
+          audio: false,
+          preferCurrentTab: true,
+          selfBrowserSurface: 'include'
+        });
+
+        // Region Capture — stage element 영역만 crop (Chrome 104+)
+        const [videoTrack] = stream.getVideoTracks();
+        try {
+          if (typeof CropTarget !== 'undefined' && CropTarget.fromElement && videoTrack.cropTo) {
+            const cropTarget = await CropTarget.fromElement(document.querySelector('.stage'));
+            await videoTrack.cropTo(cropTarget);
+            console.log('Region Capture 활성화: stage 영역만 캡쳐됩니다.');
+          } else {
+            console.warn('Region Capture 미지원 — 탭 전체가 캡쳐됩니다.');
+          }
+        } catch (e) {
+          console.warn('Region Capture 실패:', e);
+        }
+
+        const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+          ? 'video/webm;codecs=vp9'
+          : 'video/webm';
+        recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 8_000_000 });
+        recordChunks = [];
+        recorder.ondataavailable = e => { if (e.data.size > 0) recordChunks.push(e.data); };
+        recorder.onstop = () => {
+          const blob = new Blob(recordChunks, { type: 'video/webm' });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'invyone-intro-' + new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-') + '.webm';
+          a.click();
+          URL.revokeObjectURL(url);
+          stream.getTracks().forEach(t => t.stop());
+          recordBtn.textContent = '⏺ 녹화 시작 (82초)';
+          recordBtn.disabled = false;
+        };
+
+        // === 애니메이션 처음 위치로 reset (MES가 12시) ===
+        cancelAnimationFrame(rafId);
+        clearTimeout(highlightTimerId);
+        clearTimeout(nextSpinTimerId);
+        outerNodes.forEach(n => n.classList.remove('selected'));
+        currentAngle = 0;
+        setNodePositions(0);
+
+        recordingActive = true;
+        recordingCycleCount = 0;
+        recordBtn.disabled = true;
+
+        // 녹화 즉시 시작 (정적 1.5초도 영상에 포함 → loop 시 자연스럽게 이어짐)
+        recorder.start();
+        recordBtn.textContent = '⏺ 녹화 중... 정적 1.5초';
+
+        // 1.5초 정적 후 첫 cycle 시작
+        setTimeout(spinAndPick, 1500);
+      } catch (err) {
+        console.error('녹화 권한 거부:', err);
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-05-14-invyone-intro/studio-demo.html b/notes/gbpark/2026-05-14-invyone-intro/studio-demo.html
new file mode 100644
index 00000000..46fb638d
--- /dev/null
+++ b/notes/gbpark/2026-05-14-invyone-intro/studio-demo.html
@@ -0,0 +1,1611 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <title>INVYONE Studio — Demo</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <style>
+    :root {
+      --bg-darkest: #060617;
+      --bg-deep: #0a0a23;
+      --bg-panel: #11112c;
+      --bg-card: #181838;
+      --bg-card-hi: #1f1f44;
+      --border: rgba(255, 255, 255, 0.07);
+      --border-strong: rgba(255, 255, 255, 0.13);
+      --text-primary: rgba(255, 255, 255, 0.92);
+      --text-secondary: rgba(255, 255, 255, 0.55);
+      --text-faint: rgba(255, 255, 255, 0.35);
+      --purple: #6c5ce7;
+      --purple-soft: #8b7df0;
+      --cyan: #00cec9;
+      --pink: #fd79a8;
+      --green: #00d68f;
+      --orange: #fdcb6e;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      width: 100%;
+      min-height: 100%;
+      background: #050514;
+      font-family: 'Pretendard', system-ui, -apple-system, sans-serif;
+      color: var(--text-primary);
+      overflow: hidden;
+      -webkit-font-smoothing: antialiased;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* === Stage (영상 녹화용 영역) === */
+    .stage {
+      position: relative;
+      width: 1600px;
+      height: 900px;
+      background: var(--bg-deep);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* === 헤더 === */
+    .header {
+      height: 52px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 0 14px;
+      background: var(--bg-darkest);
+      border-bottom: 1px solid var(--border);
+      font-size: 12px;
+    }
+    .h-logo {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      font-size: 13px;
+      padding-right: 6px;
+    }
+    .h-logo .badge {
+      padding: 2px 6px;
+      border-radius: 4px;
+      background: linear-gradient(135deg, var(--purple), var(--pink));
+      color: #fff;
+      font-size: 9px;
+      letter-spacing: 0.12em;
+      margin-left: 4px;
+    }
+    .h-icon {
+      width: 28px;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-secondary);
+      border-radius: 5px;
+      font-size: 13px;
+    }
+    .h-tabs {
+      display: flex;
+      gap: 4px;
+      margin-left: 4px;
+    }
+    .h-tab {
+      padding: 6px 12px;
+      font-size: 11.5px;
+      color: var(--text-secondary);
+      border-radius: 5px 5px 0 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      border-bottom: 2px solid transparent;
+    }
+    .h-tab.active {
+      color: var(--text-primary);
+      border-bottom-color: var(--orange);
+      background: rgba(253, 203, 110, 0.05);
+    }
+    .h-tab .count {
+      padding: 1px 5px;
+      font-size: 10px;
+      background: rgba(255, 255, 255, 0.08);
+      border-radius: 3px;
+    }
+    .h-title {
+      margin-left: 10px;
+      font-size: 13px;
+      color: var(--text-primary);
+      font-weight: 500;
+    }
+    .h-right {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-secondary);
+    }
+    .h-right-btn {
+      padding: 5px 10px;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .h-save {
+      padding: 7px 18px;
+      background: var(--purple);
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.4s, box-shadow 0.4s, transform 0.2s;
+      font-family: inherit;
+    }
+    .h-save.saved {
+      background: var(--green);
+      box-shadow: 0 0 28px rgba(0, 214, 143, 0.55);
+    }
+
+    /* === Main === */
+    .main {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+    }
+
+    /* === Left Sidebar === */
+    .ls {
+      width: 240px;
+      flex-shrink: 0;
+      background: var(--bg-panel);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+    }
+    .ls-search {
+      padding: 12px;
+      flex-shrink: 0;
+    }
+    .ls-search input {
+      width: 100%;
+      padding: 7px 10px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-size: 11px;
+      color: var(--text-primary);
+      font-family: inherit;
+    }
+    .ls-search input::placeholder { color: var(--text-faint); }
+    .ls-section { padding: 0 0 6px; }
+    .ls-section-h {
+      padding: 8px 12px 4px;
+      font-size: 10px;
+      letter-spacing: 0.05em;
+      color: var(--text-faint);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      text-transform: uppercase;
+    }
+    .ls-section-h .count {
+      padding: 1px 5px;
+      font-size: 9px;
+      background: rgba(255, 255, 255, 0.06);
+      border-radius: 3px;
+    }
+    .ls-item {
+      padding: 5px 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11.5px;
+      color: var(--text-primary);
+    }
+    .ls-item .type {
+      padding: 1px 4px;
+      font-size: 8.5px;
+      background: rgba(108, 92, 231, 0.18);
+      color: var(--purple-soft);
+      border-radius: 3px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+    }
+    .ls-comp {
+      padding: 9px 12px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 12px;
+      color: var(--text-primary);
+      border-left: 3px solid transparent;
+      transition: all 0.25s;
+    }
+    .ls-comp.active {
+      background: rgba(108, 92, 231, 0.14);
+      border-left-color: var(--purple);
+    }
+    .ls-comp .ic {
+      width: 16px;
+      color: var(--purple-soft);
+      display: inline-flex;
+      justify-content: center;
+      font-size: 13px;
+    }
+
+    /* === Canvas === */
+    .canvas-area {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--bg-deep);
+    }
+    .canvas-toolbar {
+      height: 38px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      background: var(--bg-darkest);
+      border-bottom: 1px solid var(--border);
+      font-size: 11.5px;
+      color: var(--text-secondary);
+    }
+    .canvas {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      padding: 24px 32px;
+    }
+    .canvas-frame {
+      min-height: calc(100% - 4px);
+      border: 2px solid rgba(108, 92, 231, 0.18);
+      border-radius: 10px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
+      transition: border-color 0.5s;
+    }
+    .canvas-frame.has-content { border-color: rgba(108, 92, 231, 0.55); }
+
+    /* KPI grid */
+    .kpi-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 12px;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.6s, transform 0.6s;
+    }
+    .kpi-grid.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .kpi-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 14px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-height: 92px;
+      position: relative;
+      overflow: hidden;
+    }
+    .kpi-card .label {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+    .kpi-card .ic {
+      width: 14px;
+      transition: color 0.5s;
+    }
+    .kpi-card .val {
+      font-size: 28px;
+      font-weight: 800;
+      color: #fff;
+      letter-spacing: -0.02em;
+      transition: color 0.5s;
+    }
+
+    /* Preset colors */
+    .kpi-grid.preset-blue .kpi-card:nth-child(1) .ic,
+    .kpi-grid.preset-blue .kpi-card:nth-child(1) .val { color: #60a5fa; }
+    .kpi-grid.preset-blue .kpi-card:nth-child(2) .ic,
+    .kpi-grid.preset-blue .kpi-card:nth-child(2) .val { color: #3b82f6; }
+    .kpi-grid.preset-blue .kpi-card:nth-child(3) .ic,
+    .kpi-grid.preset-blue .kpi-card:nth-child(3) .val { color: #6366f1; }
+    .kpi-grid.preset-blue .kpi-card:nth-child(4) .ic,
+    .kpi-grid.preset-blue .kpi-card:nth-child(4) .val { color: #8b5cf6; }
+
+    /* Search bar */
+    .search-bar {
+      display: flex;
+      gap: 8px;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.6s, transform 0.6s;
+    }
+    .search-bar.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .search-bar input {
+      flex: 1;
+      padding: 9px 14px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      font-size: 12px;
+      color: var(--text-primary);
+      font-family: inherit;
+    }
+    .search-bar input::placeholder { color: var(--text-faint); }
+    .search-bar button {
+      padding: 9px 16px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 600;
+      border: 1px solid var(--border);
+      font-family: inherit;
+    }
+    .search-bar .btn-search { background: var(--orange); color: #2d2d2d; border-color: transparent; }
+    .search-bar .btn-reset { background: var(--bg-card); color: var(--text-primary); }
+    .search-bar .btn-create { background: var(--purple); color: #fff; border-color: transparent; }
+    .search-bar .btn-edit { background: #fff; color: #1a1a1a; border-color: transparent; }
+    .search-bar .btn-delete { background: var(--pink); color: #fff; border-color: transparent; }
+
+    /* Grid Table (div 기반 — row collapse animation 가능) */
+    .grid-table {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      opacity: 0;
+      transform: translateY(10px);
+      transition: opacity 0.6s, transform 0.6s;
+      overflow: hidden;
+    }
+    .grid-table.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    /* 빈 상태 (데이터 소스 선택 전) */
+    .grid-empty {
+      padding: 48px 14px;
+      text-align: center;
+      color: var(--text-faint);
+      font-size: 11.5px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      transition: opacity 0.35s, max-height 0.4s, padding 0.4s;
+      max-height: 200px;
+      overflow: hidden;
+    }
+    .grid-empty .ge-icon {
+      font-size: 22px;
+      opacity: 0.4;
+    }
+    .grid-empty.hidden {
+      opacity: 0;
+      max-height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    /* 컬럼 헤더 */
+    .grid-thead {
+      display: grid;
+      grid-template-columns: 90px 130px 1fr 1fr 90px;
+      padding: 12px 14px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+      transition: opacity 0.4s, max-height 0.4s, padding 0.4s;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+    .grid-thead.visible {
+      opacity: 1;
+      max-height: 50px;
+      padding-top: 12px;
+      padding-bottom: 12px;
+    }
+
+    .grid-tbody {
+      display: flex;
+      flex-direction: column;
+    }
+    .grid-row {
+      display: grid;
+      grid-template-columns: 90px 130px 1fr 1fr 90px;
+      padding: 11px 14px;
+      font-size: 11.5px;
+      color: var(--text-primary);
+      border-bottom: 1px solid rgba(255,255,255,0.03);
+      max-height: 60px;
+      opacity: 0;
+      overflow: hidden;
+      transition: max-height 0.42s ease, opacity 0.32s ease, padding 0.42s ease, border-bottom-color 0.32s ease, background 0.25s;
+      align-items: center;
+    }
+    .grid-row:last-child { border-bottom: none; }
+    .grid-row.shown { opacity: 1; }
+    .grid-row.filtered-out {
+      max-height: 0;
+      opacity: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+      border-bottom-color: transparent;
+      pointer-events: none;
+    }
+    .grid-row.row-active {
+      background: rgba(108, 92, 231, 0.12);
+    }
+    .grid-cell { display: flex; align-items: center; }
+    .grid-cell .status {
+      padding: 2px 8px;
+      font-size: 10px;
+      background: rgba(0, 214, 143, 0.18);
+      color: var(--green);
+      border-radius: 4px;
+    }
+
+    /* === Right Panel === */
+    .rp {
+      width: 280px;
+      flex-shrink: 0;
+      background: var(--bg-panel);
+      border-left: 1px solid var(--border);
+      overflow-y: auto;
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+    .rp-section {
+      display: flex;
+      flex-direction: column;
+      gap: 7px;
+    }
+    .rp-title {
+      font-size: 11.5px;
+      font-weight: 600;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .rp-title .sub {
+      font-size: 10px;
+      color: var(--text-faint);
+      font-weight: 400;
+      margin-left: 4px;
+    }
+    .rp-label {
+      font-size: 10.5px;
+      color: var(--text-secondary);
+    }
+    .rp-input {
+      padding: 7px 10px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      font-size: 11.5px;
+      color: var(--text-primary);
+      font-family: inherit;
+    }
+    .rp-toggle {
+      display: flex;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      padding: 2px;
+      gap: 2px;
+    }
+    .rp-toggle button {
+      flex: 1;
+      padding: 6px;
+      background: transparent;
+      border: none;
+      font-size: 11px;
+      color: var(--text-secondary);
+      border-radius: 4px;
+      font-family: inherit;
+    }
+    .rp-toggle button.active {
+      background: rgba(108, 92, 231, 0.2);
+      color: var(--purple-soft);
+    }
+    .rp-presets {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 6px;
+    }
+    .rp-preset {
+      padding: 8px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      transition: all 0.3s;
+    }
+    .rp-preset.active {
+      border-color: var(--purple);
+      box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.22);
+      background: rgba(108, 92, 231, 0.06);
+    }
+    .rp-preset .swatches {
+      display: flex;
+      gap: 3px;
+    }
+    .rp-preset .swatches span {
+      flex: 1;
+      height: 14px;
+      border-radius: 3px;
+    }
+    .rp-preset.blue .swatches span:nth-child(1) { background: #60a5fa; }
+    .rp-preset.blue .swatches span:nth-child(2) { background: #3b82f6; }
+    .rp-preset.blue .swatches span:nth-child(3) { background: #6366f1; }
+    .rp-preset.blue .swatches span:nth-child(4) { background: #8b5cf6; }
+    .rp-preset.vivid .swatches span:nth-child(1) { background: #00cec9; }
+    .rp-preset.vivid .swatches span:nth-child(2) { background: #00d68f; }
+    .rp-preset.vivid .swatches span:nth-child(3) { background: #fdcb6e; }
+    .rp-preset.vivid .swatches span:nth-child(4) { background: #fd79a8; }
+    .rp-preset.pastel .swatches span:nth-child(1) { background: #a8dadc; }
+    .rp-preset.pastel .swatches span:nth-child(2) { background: #f1c0e8; }
+    .rp-preset.pastel .swatches span:nth-child(3) { background: #cdb4db; }
+    .rp-preset.pastel .swatches span:nth-child(4) { background: #ffd6a5; }
+    .rp-preset.dark .swatches span:nth-child(1) { background: #4a4a52; }
+    .rp-preset.dark .swatches span:nth-child(2) { background: #5a5a62; }
+    .rp-preset.dark .swatches span:nth-child(3) { background: #6a6a72; }
+    .rp-preset.dark .swatches span:nth-child(4) { background: #7a7a82; }
+    .rp-preset .name {
+      font-size: 10.5px;
+      color: var(--text-primary);
+    }
+    .rp-kpi-item {
+      padding: 10px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .rp-kpi-item .head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 11.5px;
+      color: var(--text-primary);
+    }
+    .rp-kpi-item .head .num {
+      width: 18px;
+      height: 18px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(108, 92, 231, 0.18);
+      color: var(--purple-soft);
+      border-radius: 3px;
+      font-size: 9.5px;
+      font-weight: 600;
+    }
+    .rp-kpi-item .tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 9px;
+      background: rgba(108, 92, 231, 0.13);
+      color: var(--purple-soft);
+      border-radius: 12px;
+      font-size: 10px;
+      align-self: flex-start;
+    }
+    .rp-select {
+      padding: 7px 10px;
+      background: var(--bg-deep);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      font-size: 11px;
+      color: var(--text-primary);
+      transition: border-color 0.3s, box-shadow 0.3s;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .rp-select.flash {
+      border-color: var(--purple);
+      box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.25);
+    }
+
+    /* KPI 배치 모드 — 그리드 (2x2) */
+    .kpi-grid.grid-mode {
+      grid-template-columns: 1fr 1fr;
+    }
+    .kpi-grid {
+      transition: opacity 0.6s, transform 0.6s, grid-template-columns 0.5s;
+    }
+
+    /* 수정 모달 */
+    .modal-backdrop {
+      position: absolute;
+      inset: 0;
+      background: rgba(3, 3, 15, 0.55);
+      z-index: 8500;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      backdrop-filter: blur(2px);
+    }
+    .modal-backdrop.open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .modal {
+      width: 460px;
+      background: var(--bg-panel);
+      border: 1px solid var(--border-strong);
+      border-radius: 10px;
+      padding: 22px 24px;
+      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65);
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      transform: scale(0.94);
+      transition: transform 0.3s;
+    }
+    .modal-backdrop.open .modal {
+      transform: scale(1);
+    }
+    .modal-title {
+      font-size: 14.5px;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+    .modal-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px 14px;
+    }
+    .modal-field {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .modal-field label {
+      font-size: 10.5px;
+      color: var(--text-secondary);
+    }
+    .modal-field input {
+      padding: 8px 10px;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      font-size: 12px;
+      color: var(--text-primary);
+      font-family: inherit;
+    }
+    .modal-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 4px;
+    }
+    .modal-actions button {
+      padding: 7px 14px;
+      border-radius: 5px;
+      font-size: 11.5px;
+      font-weight: 600;
+      border: 1px solid var(--border);
+      font-family: inherit;
+    }
+    .modal-cancel { background: var(--bg-card); color: var(--text-primary); }
+    .modal-save { background: var(--purple); color: #fff; border-color: transparent; }
+
+    /* 다국어 토스트 변형 */
+    .toast.i18n {
+      background: var(--purple);
+      box-shadow: 0 4px 24px rgba(108, 92, 231, 0.5);
+    }
+
+    /* Select 드롭다운 */
+    .rp-select-wrap {
+      position: relative;
+    }
+    .rp-dropdown {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 0;
+      background: var(--bg-card);
+      border: 1px solid var(--purple);
+      border-radius: 5px;
+      overflow: hidden;
+      opacity: 0;
+      transform: translateY(-6px);
+      pointer-events: none;
+      transition: opacity 0.25s, transform 0.25s;
+      z-index: 100;
+      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
+    }
+    .rp-dropdown.open {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+    .rp-option {
+      padding: 9px 12px;
+      font-size: 11.5px;
+      color: var(--text-primary);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      transition: background 0.2s;
+    }
+    .rp-option:last-child { border-bottom: none; }
+    .rp-option.highlighted { background: rgba(108, 92, 231, 0.18); }
+    .rp-option .opt-sub {
+      font-size: 9.5px;
+      color: var(--text-faint);
+    }
+
+    /* === Cursor === */
+    .cursor {
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      pointer-events: none;
+      z-index: 9999;
+      left: 600px;
+      top: 450px;
+      transition: top 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+                  left 0.7s cubic-bezier(0.4, 0, 0.2, 1),
+                  transform 0.15s ease;
+    }
+    .cursor.click { transform: scale(0.82); }
+    .cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
+
+    /* Drag ghost — cursor 옆에 따라다니는 미리보기 */
+    .drag-ghost {
+      position: absolute;
+      background: linear-gradient(135deg, rgba(108, 92, 231, 0.95), rgba(108, 92, 231, 0.85));
+      border: 1px solid var(--purple-soft);
+      border-radius: 6px;
+      padding: 9px 16px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #fff;
+      pointer-events: none;
+      z-index: 9998;
+      transition: left 0.75s cubic-bezier(0.4, 0, 0.2, 1),
+                  top 0.75s cubic-bezier(0.4, 0, 0.2, 1),
+                  opacity 0.25s;
+      box-shadow: 0 8px 28px rgba(108, 92, 231, 0.55);
+      margin-left: 16px;
+      margin-top: 16px;
+      white-space: nowrap;
+      display: inline-flex;
+      align-items: center;
+      gap: 7px;
+    }
+
+    /* 드롭 가능한 캔버스 영역 강조 */
+    .canvas-frame.drop-active {
+      border-color: var(--purple);
+      background: rgba(108, 92, 231, 0.04);
+      box-shadow: inset 0 0 0 1px rgba(108, 92, 231, 0.35);
+    }
+
+    /* Ripple */
+    .ripple {
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      border: 2px solid var(--purple-soft);
+      pointer-events: none;
+      z-index: 9998;
+      transform: translate(-50%, -50%) scale(0.3);
+      opacity: 0.85;
+      animation: ripple-anim 0.7s ease-out forwards;
+    }
+    @keyframes ripple-anim {
+      to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
+    }
+
+    /* Toast */
+    .toast {
+      position: absolute;
+      top: 70px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-12px);
+      padding: 9px 18px;
+      background: var(--green);
+      color: #fff;
+      font-size: 12px;
+      font-weight: 600;
+      border-radius: 6px;
+      box-shadow: 0 4px 24px rgba(0, 214, 143, 0.4);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.4s, transform 0.4s;
+      z-index: 8000;
+    }
+    .toast.visible {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+
+    /* === Control Panel === */
+    .control-panel {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 9999;
+      padding: 14px 16px;
+      background: rgba(15, 15, 40, 0.92);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 8px;
+      color: #fff;
+      font-size: 12px;
+      font-family: 'Pretendard', system-ui, sans-serif;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-width: 200px;
+      backdrop-filter: blur(8px);
+    }
+    .control-panel .cp-title {
+      font-size: 10.5px;
+      font-weight: 600;
+      letter-spacing: 0.18em;
+      color: rgba(255,255,255,0.6);
+      text-transform: uppercase;
+      padding-bottom: 5px;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+    .control-panel button {
+      margin-top: 2px;
+      padding: 7px 10px;
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.14);
+      border-radius: 4px;
+      color: #fff;
+      font-size: 11px;
+      font-family: inherit;
+      cursor: pointer;
+    }
+    .control-panel button:hover { background: rgba(255, 255, 255, 0.12); }
+    .control-panel.hidden { display: none; }
+    .show-panel-btn {
+      position: fixed;
+      top: 16px;
+      right: 16px;
+      z-index: 9999;
+      padding: 8px 12px;
+      background: rgba(15, 15, 40, 0.92);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 4px;
+      color: #fff;
+      font-size: 11px;
+      font-family: 'Pretendard', system-ui, sans-serif;
+      cursor: pointer;
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <!-- 토글 패널 -->
+  <div class="control-panel">
+    <div class="cp-title">Studio Demo</div>
+    <button id="restart-btn">▶ 데모 다시 시작</button>
+    <button id="record-btn">⏺ 녹화 시작</button>
+    <button id="hide-panel">패널 숨기기</button>
+  </div>
+  <button class="show-panel-btn" id="show-panel">⚙ 패널</button>
+
+  <div class="stage">
+    <!-- 헤더 -->
+    <header class="header">
+      <div class="h-logo">INVYONE<span class="badge">STUDIO</span></div>
+      <div class="h-icon">←</div>
+      <div class="h-icon">⌘</div>
+      <div class="h-tabs">
+        <div class="h-tab active">≡ 목록 화면<span class="count">6</span></div>
+        <div class="h-tab">⊕ 등록 팝업<span class="count">12</span></div>
+        <div class="h-tab">✎ 수정 팝업<span class="count">4</span></div>
+      </div>
+      <div class="h-title">테스트 템플릿</div>
+      <div class="h-right">
+        <div class="h-icon">🏷</div>
+        <div class="h-icon">⌨</div>
+        <div class="h-icon">👁</div>
+        <div class="h-right-btn" id="i18n-btn">🌐 다국어 생성</div>
+        <div class="h-right-btn">⚙ 다국어 설정</div>
+        <button class="h-save" id="save-btn">저장</button>
+      </div>
+    </header>
+
+    <main class="main">
+      <!-- 좌측 사이드바 -->
+      <aside class="ls">
+        <div class="ls-search"><input placeholder="검색..."></div>
+
+        <div class="ls-section">
+          <div class="ls-section-h">USER_INFO<span class="count">31</span></div>
+          <div class="ls-item"><span class="type">TXT</span> 사번</div>
+          <div class="ls-item"><span class="type">TXT</span> 사용자ID</div>
+          <div class="ls-item"><span class="type">TXT</span> 사용자이름</div>
+          <div class="ls-item"><span class="type">TXT</span> 부서코드</div>
+          <div class="ls-item"><span class="type">TXT</span> 부서이름</div>
+          <div class="ls-item"><span class="type">TXT</span> 직급코드</div>
+        </div>
+
+        <div class="ls-section">
+          <div class="ls-section-h">컴포넌트</div>
+          <div class="ls-comp"><span class="ic">⚡</span> 버튼</div>
+          <div class="ls-comp"><span class="ic">T</span> 제목/텍스트</div>
+          <div class="ls-comp"><span class="ic">📊</span> 차트</div>
+          <div class="ls-comp" data-comp="table"><span class="ic">⊞</span> 테이블</div>
+          <div class="ls-comp" data-comp="kpi"><span class="ic">📈</span> 통계 카드</div>
+          <div class="ls-comp"><span class="ic">≣</span> 그룹 테이블</div>
+          <div class="ls-comp"><span class="ic">─</span> 구분선</div>
+          <div class="ls-comp"><span class="ic">▭</span> 입력 필드</div>
+          <div class="ls-comp" data-comp="search"><span class="ic">🔍</span> 검색</div>
+        </div>
+      </aside>
+
+      <!-- 캔버스 -->
+      <section class="canvas-area">
+        <div class="canvas-toolbar">
+          🖥 Full HD (1920×1080)  •  1920×1080
+        </div>
+        <div class="canvas">
+          <div class="canvas-frame" id="canvas-frame">
+            <div class="kpi-grid" id="kpi-grid">
+              <div class="kpi-card"><div class="label"><span class="ic">👥</span> 전체 사원</div><div class="val">142</div></div>
+              <div class="kpi-card"><div class="label"><span class="ic">▤</span> 재직 인원</div><div class="val">128</div></div>
+              <div class="kpi-card"><div class="label"><span class="ic">○</span> 신규 입사</div><div class="val">8</div></div>
+              <div class="kpi-card"><div class="label"><span class="ic">▢</span> 부서 수</div><div class="val">12</div></div>
+            </div>
+
+            <div class="search-bar" id="search-bar">
+              <input placeholder="검색어를 입력하세요">
+              <button class="btn-search">검색</button>
+              <button class="btn-reset">초기화</button>
+              <button class="btn-create">등록</button>
+              <button class="btn-edit">수정</button>
+              <button class="btn-delete">삭제</button>
+            </div>
+
+            <div class="grid-table" id="table">
+              <div class="grid-empty" id="grid-empty">
+                <span class="ge-icon">⊞</span>
+                <span>데이터 소스를 선택해주세요</span>
+              </div>
+              <div class="grid-thead" id="grid-thead">
+                <div class="grid-th">사번</div>
+                <div class="grid-th">사용자ID</div>
+                <div class="grid-th">사용자이름</div>
+                <div class="grid-th">부서이름</div>
+                <div class="grid-th">상태</div>
+              </div>
+              <div class="grid-tbody" id="table-body"></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 우측 설정 패널 -->
+      <aside class="rp">
+        <div class="rp-section">
+          <div class="rp-title">ⓘ 기본</div>
+          <span class="rp-label">제목</span>
+          <input class="rp-input" id="title-input" value="">
+        </div>
+
+        <div class="rp-section">
+          <div class="rp-title">ⓘ 배치 + 스타일<span class="sub">항목을 어떻게 보여줄지</span></div>
+          <span class="rp-label">배치</span>
+          <div class="rp-toggle">
+            <button class="active">가로</button>
+            <button>세로</button>
+            <button>그리드</button>
+          </div>
+        </div>
+
+        <div class="rp-section">
+          <div class="rp-title">ⓘ 색상 프리셋<span class="sub">모든 항목에 일괄 적용</span></div>
+          <div class="rp-presets">
+            <div class="rp-preset blue" data-preset="blue">
+              <div class="swatches"><span></span><span></span><span></span><span></span></div>
+              <span class="name">블루</span>
+            </div>
+            <div class="rp-preset vivid" data-preset="vivid">
+              <div class="swatches"><span></span><span></span><span></span><span></span></div>
+              <span class="name">다채로운</span>
+            </div>
+            <div class="rp-preset pastel" data-preset="pastel">
+              <div class="swatches"><span></span><span></span><span></span><span></span></div>
+              <span class="name">파스텔</span>
+            </div>
+            <div class="rp-preset dark" data-preset="dark">
+              <div class="swatches"><span></span><span></span><span></span><span></span></div>
+              <span class="name">다크</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="rp-section">
+          <div class="rp-title">ⓘ 데이터 소스</div>
+          <span class="rp-label">테이블</span>
+          <div class="rp-select-wrap">
+            <div class="rp-select" id="table-data-select">
+              <span id="table-data-selected" style="color:var(--text-faint);">테이블 선택</span>
+              <span>▼</span>
+            </div>
+            <div class="rp-dropdown" id="table-data-dropdown">
+              <div class="rp-option" data-value="user_info">
+                <span class="opt-label">사용자정보</span>
+                <span class="opt-sub">user_info · 142건</span>
+              </div>
+              <div class="rp-option" data-value="dept_info">
+                <span class="opt-label">부서정보</span>
+                <span class="opt-sub">dept_info · 12건</span>
+              </div>
+              <div class="rp-option" data-value="role_info">
+                <span class="opt-label">권한정보</span>
+                <span class="opt-sub">role_info · 8건</span>
+              </div>
+              <div class="rp-option" data-value="code_info">
+                <span class="opt-label">코드정보</span>
+                <span class="opt-sub">code_info · 64건</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="rp-section">
+          <div class="rp-title">ⓘ KPI 항목<span class="sub">· 4개</span></div>
+          <div class="rp-kpi-item">
+            <div class="head"><span class="num">1</span> 전체 사원</div>
+            <div class="tag">user_info · 건수</div>
+          </div>
+        </div>
+      </aside>
+    </main>
+
+    <!-- 가상 cursor + toast -->
+    <div class="cursor" id="cursor">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M 4 2 L 4 18 L 8 14 L 11 21 L 14 20 L 11 13 L 17 13 Z" fill="#fff" stroke="#000" stroke-width="1"/>
+      </svg>
+    </div>
+    <div class="toast" id="toast">✓ 저장되었습니다</div>
+
+    <!-- 수정 모달 -->
+    <div class="modal-backdrop" id="edit-modal">
+      <div class="modal">
+        <div class="modal-title">✎ 사용자 수정</div>
+        <div class="modal-grid">
+          <div class="modal-field">
+            <label>사번</label>
+            <input value="1001" readonly>
+          </div>
+          <div class="modal-field">
+            <label>사용자ID</label>
+            <input value="hongkd" readonly>
+          </div>
+          <div class="modal-field">
+            <label>사용자이름</label>
+            <input value="홍길동">
+          </div>
+          <div class="modal-field">
+            <label>부서</label>
+            <input value="경영기획팀">
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button class="modal-cancel">취소</button>
+          <button class="modal-save">저장</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+    const stage = document.querySelector('.stage');
+    const cursor = document.getElementById('cursor');
+
+    let aborted = false;
+
+    async function safeSleep(ms) {
+      const start = performance.now();
+      while (performance.now() - start < ms) {
+        if (aborted) throw new Error('aborted');
+        await sleep(Math.min(50, ms - (performance.now() - start)));
+      }
+    }
+
+    let currentGhost = null;
+
+    function createGhost(label) {
+      if (currentGhost) currentGhost.remove();
+      const ghost = document.createElement('div');
+      ghost.className = 'drag-ghost';
+      ghost.innerHTML = label;
+      ghost.style.left = cursor.style.left;
+      ghost.style.top = cursor.style.top;
+      stage.appendChild(ghost);
+      currentGhost = ghost;
+    }
+
+    function removeGhost() {
+      if (!currentGhost) return;
+      const g = currentGhost;
+      currentGhost = null;
+      g.style.opacity = '0';
+      setTimeout(() => g.remove(), 260);
+    }
+
+    function moveCursorTo(selector) {
+      return new Promise(resolve => {
+        const target = typeof selector === 'string' ? document.querySelector(selector) : selector;
+        if (!target) return resolve();
+        const rect = target.getBoundingClientRect();
+        const stageRect = stage.getBoundingClientRect();
+        const x = rect.left - stageRect.left + rect.width / 2 - 4;
+        const y = rect.top - stageRect.top + rect.height / 2 - 4;
+        cursor.style.left = x + 'px';
+        cursor.style.top = y + 'px';
+        if (currentGhost) {
+          currentGhost.style.left = x + 'px';
+          currentGhost.style.top = y + 'px';
+        }
+        setTimeout(resolve, 750);
+      });
+    }
+
+    async function dragToCanvas(sourceSelector, ghostLabel, onDrop) {
+      await moveCursorTo(sourceSelector);
+      await click(sourceSelector);
+      createGhost(ghostLabel);
+      await safeSleep(180);
+      const canvas = document.getElementById('canvas-frame');
+      canvas.classList.add('drop-active');
+      await moveCursorTo('#canvas-frame');
+      await click('#canvas-frame');
+      removeGhost();
+      canvas.classList.remove('drop-active');
+      if (onDrop) onDrop();
+    }
+
+    function click(selector) {
+      return new Promise(resolve => {
+        const target = typeof selector === 'string' ? document.querySelector(selector) : selector;
+        if (!target) return resolve();
+        cursor.classList.add('click');
+        const rect = target.getBoundingClientRect();
+        const stageRect = stage.getBoundingClientRect();
+        const ripple = document.createElement('div');
+        ripple.className = 'ripple';
+        ripple.style.left = (rect.left - stageRect.left + rect.width / 2) + 'px';
+        ripple.style.top = (rect.top - stageRect.top + rect.height / 2) + 'px';
+        stage.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 720);
+        setTimeout(() => {
+          cursor.classList.remove('click');
+          resolve();
+        }, 220);
+      });
+    }
+
+    function setActiveLs(comp) {
+      document.querySelectorAll('.ls-comp').forEach(el => el.classList.remove('active'));
+      if (comp) document.querySelector(`.ls-comp[data-comp="${comp}"]`)?.classList.add('active');
+    }
+
+    function reset() {
+      const kpiGrid = document.getElementById('kpi-grid');
+      kpiGrid.classList.remove('visible', 'preset-blue', 'preset-vivid', 'preset-pastel', 'preset-dark', 'grid-mode');
+      document.getElementById('search-bar').classList.remove('visible');
+      document.getElementById('table').classList.remove('visible');
+      document.getElementById('table-body').innerHTML = '';
+      document.getElementById('grid-empty').classList.remove('hidden');
+      document.getElementById('grid-thead').classList.remove('visible');
+      document.getElementById('canvas-frame').classList.remove('has-content');
+      const saveBtn = document.getElementById('save-btn');
+      saveBtn.classList.remove('saved');
+      saveBtn.textContent = '저장';
+      document.querySelectorAll('.rp-preset').forEach(el => el.classList.remove('active'));
+      document.getElementById('table-data-select').classList.remove('flash');
+      document.getElementById('table-data-dropdown').classList.remove('open');
+      document.querySelectorAll('.rp-option').forEach(o => o.classList.remove('highlighted'));
+      const sel = document.getElementById('table-data-selected');
+      sel.textContent = '테이블 선택';
+      sel.style.color = 'var(--text-faint)';
+      // 추가 reset
+      document.getElementById('title-input').value = '';
+      document.querySelector('#search-bar input').value = '';
+      document.querySelectorAll('.rp-toggle button').forEach((b, i) => b.classList.toggle('active', i === 0));
+      document.getElementById('edit-modal').classList.remove('open');
+      const toast = document.getElementById('toast');
+      toast.classList.remove('visible', 'i18n');
+      toast.textContent = '✓ 저장되었습니다';
+      setActiveLs(null);
+    }
+
+    // === 풀데모 헬퍼 함수 ===
+    async function typeInto(selector, text, charDelay = 80) {
+      const el = document.querySelector(selector);
+      if (!el) return;
+      el.value = '';
+      for (const ch of text) {
+        if (aborted) return;
+        el.value += ch;
+        await safeSleep(charDelay);
+      }
+    }
+
+    function toggleGridLayout() {
+      document.getElementById('kpi-grid').classList.add('grid-mode');
+      document.querySelectorAll('.rp-toggle button').forEach((b, i) => b.classList.toggle('active', i === 2));
+    }
+
+    function filterRows(keyword) {
+      document.querySelectorAll('.grid-row').forEach(row => {
+        if (!row.textContent.includes(keyword)) row.classList.add('filtered-out');
+        else row.classList.remove('filtered-out');
+      });
+    }
+    function clearFilter() {
+      document.querySelectorAll('.grid-row').forEach(row => row.classList.remove('filtered-out'));
+    }
+
+    function openEditModal() {
+      document.getElementById('edit-modal').classList.add('open');
+    }
+    function closeEditModal() {
+      document.getElementById('edit-modal').classList.remove('open');
+    }
+
+    async function showI18nProgress() {
+      const toast = document.getElementById('toast');
+      toast.textContent = '🌐 다국어 생성 중...';
+      toast.classList.add('visible', 'i18n');
+      await safeSleep(1300);
+      if (aborted) return;
+      toast.textContent = '✓ 한국어 · 영어 · 일본어 자동 생성 완료';
+      await safeSleep(1900);
+      if (aborted) return;
+      toast.classList.remove('visible');
+      setTimeout(() => {
+        toast.classList.remove('i18n');
+        toast.textContent = '✓ 저장되었습니다';
+      }, 500);
+    }
+
+    function showKPIs() {
+      document.getElementById('canvas-frame').classList.add('has-content');
+      document.getElementById('kpi-grid').classList.add('visible');
+    }
+
+    function applyPreset(name) {
+      const grid = document.getElementById('kpi-grid');
+      grid.classList.remove('preset-blue', 'preset-vivid', 'preset-pastel', 'preset-dark');
+      grid.classList.add('preset-' + name);
+      document.querySelectorAll('.rp-preset').forEach(el => el.classList.remove('active'));
+      document.querySelector(`.rp-preset[data-preset="${name}"]`)?.classList.add('active');
+    }
+
+    function showSearchBar() {
+      document.getElementById('search-bar').classList.add('visible');
+    }
+    function showTable() {
+      document.getElementById('table').classList.add('visible');
+    }
+
+    const tableData = [
+      { code: '1001', uid: 'hongkd',  name: '홍길동', dept: '경영기획팀', status: 'active' },
+      { code: '1002', uid: 'kimcs',   name: '김철수', dept: '개발팀',     status: 'active' },
+      { code: '1003', uid: 'leeyh',   name: '이영희', dept: '디자인팀',   status: 'active' },
+      { code: '1004', uid: 'parkms',  name: '박민수', dept: '영업팀',     status: 'active' },
+      { code: '1005', uid: 'choijw',  name: '최지원', dept: '인사팀',     status: 'active' },
+    ];
+
+    function applyDataSource() {
+      document.getElementById('grid-empty').classList.add('hidden');
+      document.getElementById('grid-thead').classList.add('visible');
+    }
+
+    async function fillTableData() {
+      const tbody = document.getElementById('table-body');
+      tbody.innerHTML = '';
+      for (const row of tableData) {
+        if (aborted) return;
+        const div = document.createElement('div');
+        div.className = 'grid-row';
+        div.innerHTML = `
+          <div class="grid-cell">${row.code}</div>
+          <div class="grid-cell">${row.uid}</div>
+          <div class="grid-cell">${row.name}</div>
+          <div class="grid-cell">${row.dept}</div>
+          <div class="grid-cell"><span class="status">${row.status}</span></div>`;
+        tbody.appendChild(div);
+        // 다음 프레임에 shown 추가 → fade-in
+        requestAnimationFrame(() => div.classList.add('shown'));
+        await safeSleep(140);
+      }
+    }
+
+    function showSaved() {
+      const toast = document.getElementById('toast');
+      const saveBtn = document.getElementById('save-btn');
+      saveBtn.classList.add('saved');
+      saveBtn.textContent = '✓ 저장됨';
+      toast.classList.add('visible');
+      setTimeout(() => toast.classList.remove('visible'), 1800);
+    }
+
+    async function runScenario() {
+      reset();
+      cursor.style.transition = 'none';
+      cursor.style.left = '700px';
+      cursor.style.top = '500px';
+      await sleep(50);
+      cursor.style.transition = '';
+
+      await safeSleep(2000); // 시작 정적 2초
+
+      // 1. 제목 타이핑
+      await moveCursorTo('#title-input');
+      await click('#title-input');
+      await safeSleep(200);
+      await typeInto('#title-input', '사용자 관리', 110);
+      await safeSleep(600);
+
+      // 2. KPI 드래그 → 캔버스
+      await dragToCanvas('.ls-comp[data-comp="kpi"]', '📈 통계 카드', () => {
+        setActiveLs('kpi');
+        showKPIs();
+      });
+      await safeSleep(1200);
+
+      // 3. 배치 토글 — 가로 → 그리드
+      await moveCursorTo('.rp-toggle button:nth-child(3)');
+      await click('.rp-toggle button:nth-child(3)');
+      toggleGridLayout();
+      await safeSleep(1500);
+
+      // 4. 색상 프리셋 블루
+      await moveCursorTo('.rp-preset[data-preset="blue"]');
+      await click('.rp-preset[data-preset="blue"]');
+      applyPreset('blue');
+      await safeSleep(1200);
+
+      // 5. 검색 드래그
+      await dragToCanvas('.ls-comp[data-comp="search"]', '🔍 검색', () => {
+        setActiveLs('search');
+        showSearchBar();
+      });
+      await safeSleep(900);
+
+      // 6. 테이블 드래그
+      await dragToCanvas('.ls-comp[data-comp="table"]', '⊞ 테이블', () => {
+        setActiveLs('table');
+        showTable();
+      });
+      await safeSleep(700);
+
+      // 7. 데이터 소스 드롭다운 펼치고 "사용자정보" 선택
+      await moveCursorTo('#table-data-select');
+      await click('#table-data-select');
+      document.getElementById('table-data-dropdown').classList.add('open');
+      await safeSleep(500);
+
+      await moveCursorTo('.rp-option[data-value="dept_info"]');
+      document.querySelector('.rp-option[data-value="dept_info"]').classList.add('highlighted');
+      await safeSleep(250);
+      document.querySelector('.rp-option[data-value="dept_info"]').classList.remove('highlighted');
+
+      await moveCursorTo('.rp-option[data-value="user_info"]');
+      document.querySelector('.rp-option[data-value="user_info"]').classList.add('highlighted');
+      await safeSleep(300);
+      await click('.rp-option[data-value="user_info"]');
+
+      const sel = document.getElementById('table-data-selected');
+      sel.textContent = '사용자정보';
+      sel.style.color = 'var(--text-primary)';
+      document.getElementById('table-data-dropdown').classList.remove('open');
+      document.querySelector('.rp-option[data-value="user_info"]').classList.remove('highlighted');
+      document.getElementById('table-data-select').classList.add('flash');
+
+      // 데이터 소스 적용 → 빈 상태 사라지고 헤더 등장
+      applyDataSource();
+      await safeSleep(550);
+      await fillTableData();
+      await safeSleep(900);
+      document.getElementById('table-data-select').classList.remove('flash');
+
+      // 8. 검색 동작 — 검색바에 '경영' 타이핑 + 검색 → 필터링
+      await moveCursorTo('#search-bar input');
+      await click('#search-bar input');
+      await safeSleep(180);
+      await typeInto('#search-bar input', '경영', 130);
+      await safeSleep(300);
+      await moveCursorTo('.btn-search');
+      await click('.btn-search');
+      filterRows('경영');
+      await safeSleep(1300);
+
+      // 9. 행 클릭 → 수정 모달 (필터링 후 남은 첫 행 = 홍길동)
+      const firstRow = document.querySelector('.grid-row:not(.filtered-out)');
+      if (firstRow) {
+        await moveCursorTo(firstRow);
+        firstRow.classList.add('row-active');
+        await click(firstRow);
+        await safeSleep(250);
+        openEditModal();
+        await safeSleep(2100);
+        closeEditModal();
+        firstRow.classList.remove('row-active');
+        await safeSleep(500);
+      }
+
+      // 9-1. 초기화 버튼 클릭 → 필터 해제 (검색 input 비우면서 행 다시 등장)
+      await moveCursorTo('.btn-reset');
+      await click('.btn-reset');
+      document.querySelector('#search-bar input').value = '';
+      clearFilter();
+      await safeSleep(1100);
+
+      // 10. 다국어 생성 (진행 → 완료)
+      await moveCursorTo('#i18n-btn');
+      await click('#i18n-btn');
+      await showI18nProgress();
+
+      // 11. 저장
+      await moveCursorTo('#save-btn');
+      await click('#save-btn');
+      showSaved();
+      await safeSleep(2300);
+
+      // 12. 짧은 정적 후 reset
+      await safeSleep(500);
+    }
+
+    async function loopScenario() {
+      aborted = false;
+      while (!aborted) {
+        try {
+          await runScenario();
+        } catch (e) {
+          if (e.message === 'aborted') break;
+          throw e;
+        }
+      }
+    }
+
+    function restartScenario() {
+      aborted = true;
+      setTimeout(() => loopScenario(), 100);
+    }
+
+    // 시작
+    setTimeout(loopScenario, 500);
+
+    // === Panel ===
+    const panel = document.querySelector('.control-panel');
+    const showBtn = document.getElementById('show-panel');
+    document.getElementById('hide-panel').addEventListener('click', () => {
+      panel.classList.add('hidden');
+      showBtn.style.display = 'block';
+    });
+    showBtn.addEventListener('click', () => {
+      panel.classList.remove('hidden');
+      showBtn.style.display = 'none';
+    });
+    document.getElementById('restart-btn').addEventListener('click', restartScenario);
+
+    // === 녹화 (intro와 동일 패턴) ===
+    const SCENARIO_DURATION_MS = 39500; // 한 사이클 길이 (시작 정적 2초 포함)
+    const PREROLL_MS = 1500;             // 시작 전 정적
+    let recorder, recordChunks;
+    const recordBtn = document.getElementById('record-btn');
+    recordBtn.addEventListener('click', async () => {
+      try {
+        const stream = await navigator.mediaDevices.getDisplayMedia({
+          video: {
+            displaySurface: 'browser',
+            frameRate: { ideal: 60, max: 60 }
+          },
+          audio: false,
+          preferCurrentTab: true,
+          selfBrowserSurface: 'include'
+        });
+        const [videoTrack] = stream.getVideoTracks();
+        try {
+          if (typeof CropTarget !== 'undefined' && CropTarget.fromElement && videoTrack.cropTo) {
+            const cropTarget = await CropTarget.fromElement(document.querySelector('.stage'));
+            await videoTrack.cropTo(cropTarget);
+          }
+        } catch (e) { console.warn('Region Capture 실패:', e); }
+
+        const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
+          ? 'video/webm;codecs=vp9' : 'video/webm';
+        recorder = new MediaRecorder(stream, { mimeType, videoBitsPerSecond: 14_000_000 });
+        recordChunks = [];
+        recorder.ondataavailable = e => { if (e.data.size > 0) recordChunks.push(e.data); };
+        recorder.onstop = () => {
+          const blob = new Blob(recordChunks, { type: 'video/webm' });
+          const url = URL.createObjectURL(blob);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = 'invyone-studio-demo-' + new Date().toISOString().slice(0,19).replace(/[:T]/g,'-') + '.webm';
+          a.click();
+          URL.revokeObjectURL(url);
+          stream.getTracks().forEach(t => t.stop());
+          recordBtn.textContent = '⏺ 녹화 시작';
+          recordBtn.disabled = false;
+        };
+
+        // === 시나리오 abort + 안정화 ===
+        aborted = true;
+        recordBtn.disabled = true;
+        recordBtn.textContent = '⏳ 준비 중...';
+        await sleep(600); // 이전 시나리오 await chain 종료 대기 (잔여 프레임 방지)
+
+        reset();
+        cursor.style.transition = 'none';
+        cursor.style.left = '700px';
+        cursor.style.top = '500px';
+        await sleep(250); // reset 화면 안정화
+
+        cursor.style.transition = '';
+
+        recordBtn.textContent = '⏺ 녹화 중...';
+        recorder.start();
+
+        // 즉시 시나리오 시작 (시나리오 내부에서 2초 정적 대기)
+        setTimeout(() => {
+          aborted = false;
+          loopScenario();
+        }, 30);
+
+        // 자동 정지 (시작 정적 + 한 사이클)
+        setTimeout(() => {
+          if (recorder && recorder.state === 'recording') recorder.stop();
+        }, SCENARIO_DURATION_MS + 1500);
+      } catch (err) {
+        console.error('녹화 권한 거부:', err);
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/notes/gbpark/2026-05-14-studio-data-view-roadmap.md b/notes/gbpark/2026-05-14-studio-data-view-roadmap.md
new file mode 100644
index 00000000..92739ccf
--- /dev/null
+++ b/notes/gbpark/2026-05-14-studio-data-view-roadmap.md
@@ -0,0 +1,1611 @@
+# 2026-05-14 INV Studio Data View Roadmap
+
+## 목적
+
+INV Studio 에서 실제 운영 화면을 만들 수 있도록, 입력 필드 통합 다음 단계의 기준을 정리한다.
+
+현재 목표는 특정 "인사 관리" 화면을 하드코딩하는 것이 아니다. 인사 관리 화면은 검증용 대표 예시이고, 최종 목표는 어떤 업무 도메인에서도 재사용 가능한 범용 화면 빌더 기능이다.
+
+대표 예시:
+
+- 상단 통계 카드: 전체 사원, 재직 중, 휴직 중, 겸직 현황
+- 탭 1: 사원 목록
+- 탭 2: 부서별 현황
+- 탭 3: 근태 현황
+
+이 화면을 스튜디오 설정만으로 만들 수 있어야 한다.
+
+## 현재 원칙
+
+1. 기존 V2/VEX 입력 경로를 되살리지 않는다.
+2. 새 솔루션 개발 기준으로 간다. DB layout JSON 마이그레이션 SQL 을 작성하지 않는다.
+3. FieldConfig / DataPort 계약은 유지한다. 축소하거나 다시 설계하지 않는다.
+4. 인사 관리 전용 하드코딩을 금지한다.
+5. 화면 구성 요소는 범용 설정으로 동작해야 한다.
+6. 통계 카드, 탭, 테이블, 차트, 리스트는 모두 실제 테이블 데이터를 읽어 렌더링해야 한다.
+
+## 현재 상태
+
+### Canonical Input
+
+입력 타입은 대부분 canonical `input` / InvInput 경로로 통합된 상태로 본다.
+
+완료된 범위:
+
+- text / number / date / datetime / time / daterange / textarea
+- single choice / multi choice
+- static list / code / category / entity code-name
+- checkbox list / swap / tag input
+- boolean switch / checkbox / yes-no button
+- mask / slider / color
+- file / image
+
+남은 작업 성격:
+
+- 새 구조 작업보다는 운영 화면에서 이상 동작과 잔여 문구를 잡는 단계
+- 전체 `tsc` 는 기존 camelCase / snake_case 전역 오류 때문에 실패 중
+- 변경 파일 기준 신규 오류 여부를 필터링해서 확인하는 방식으로 진행
+
+## 다음 큰 목표
+
+입력필드 다음 단계는 다음 두 축이다.
+
+1. 데이터 바인딩 가능한 통계 카드
+2. 탭별로 다른 데이터 뷰를 가질 수 있는 탭 시스템
+
+이 두 기능이 되어야 인사 관리 예시 화면을 만들 수 있다.
+
+## 1. 데이터 바인딩 통계 카드
+
+현재 필요한 것은 고정 숫자 카드가 아니라, 테이블 값을 계산해서 표시하는 카드다.
+
+예시:
+
+- 전체 사원: `user_info` count
+- 재직 중: `user_info` count where `status = '재직'`
+- 휴직 중: `user_info` count where `status = '휴직'`
+- 겸직 현황: `user_dept_role` count or distinct employee count
+
+### 필요한 설정
+
+통계 카드 컴포넌트는 최소한 다음 설정을 가져야 한다.
+
+```ts
+type StatCardItem = {
+  id: string;
+  label: string;
+  tableName: string;
+  aggregation: "count" | "sum" | "avg" | "min" | "max" | "distinctCount";
+  columnName?: string;
+  filters?: Array<{
+    column: string;
+    operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "in" | "notIn" | "isNull" | "isNotNull" | "like";
+    valueType: "static" | "field" | "user";
+    value?: unknown;
+    fieldRef?: string;
+    userField?: "companyCode" | "userId" | "deptCode" | "userName";
+  }>;
+  subText?: string;
+  subTextMode?: "static" | "ratio" | "template";
+  icon?: string;
+  color?: string;
+};
+```
+
+### 런타임 요구
+
+- 디자인 모드에서는 API 폭주를 막고 preview 값 또는 skeleton 을 보여준다.
+- 운영 모드에서는 실제 데이터로 집계한다.
+- 여러 카드가 같은 테이블을 보더라도 요청을 묶거나 캐시해야 한다.
+- 실패 시 화면 전체가 죽지 않고 해당 카드만 fallback 표시한다.
+
+## 2. 탭별 데이터 뷰 시스템
+
+인사 관리 화면에서 `사원 목록`, `부서별 현황`, `근태 현황`은 단순히 같은 테이블의 필터 탭이 아니다. 탭마다 화면 구성이 다르다.
+
+### 탭별 차이
+
+`사원 목록`
+
+- 검색 필터
+- 사원 테이블
+- 부서 등록 / 사원 등록 버튼
+- 선택 체크박스 컬럼
+
+`부서별 현황`
+
+- 왼쪽 부서 카드 목록
+- 부서 수정 / 삭제 액션
+- 오른쪽 부서별 인원 막대 차트
+- 직급별 분포 도넛 차트
+
+`근태 현황`
+
+- 기간 / 부서 / 사원 / 상태 필터
+- 날짜별 그룹 row
+- 근태 테이블
+
+따라서 필요한 것은 단순 Tabs UI 가 아니라, 탭마다 독립적인 view config 를 가지는 범용 `Tabbed Data View` 이다.
+
+### 필요한 설정
+
+```ts
+type TabbedViewConfig = {
+  tabs: Array<{
+    id: string;
+    label: string;
+    icon?: string;
+    viewType: "table" | "split-list-chart" | "grouped-table" | "custom";
+    dataSources?: DataSourceConfig[];
+    filters?: FilterConfig[];
+    components?: ViewComponentConfig[];
+  }>;
+  defaultTabId?: string;
+};
+```
+
+`components` 는 탭 내부에 배치되는 범용 뷰 구성 요소다.
+
+예:
+
+- searchFilter
+- dataTable
+- cardList
+- barChart
+- donutChart
+- actionButtons
+- groupedRows
+
+## 3. 데이터 소스 공통 모델
+
+통계 카드, 테이블, 차트, 리스트가 각각 따로 데이터를 가져오면 중복과 버그가 늘어난다. 공통 DataSource 모델이 필요하다.
+
+```ts
+type DataSourceConfig = {
+  id: string;
+  tableName: string;
+  alias?: string;
+  columns?: string[];
+  filters?: FilterConfig[];
+  joins?: JoinConfig[];
+  groupBy?: string[];
+  orderBy?: Array<{ column: string; direction: "asc" | "desc" }>;
+  limit?: number;
+};
+```
+
+원칙:
+
+- 하나의 탭은 여러 DataSource 를 가질 수 있다.
+- 차트와 테이블은 같은 DataSource 를 공유할 수 있다.
+- 필터 컴포넌트는 같은 탭의 DataSource 에 값을 주입할 수 있어야 한다.
+- DataPort 와 충돌하지 않게, 화면 내 데이터 흐름은 기존 계약 위에서 확장한다.
+
+## 4. 구현 단계
+
+### Phase G.0 - 현재 컴포넌트 인벤토리
+
+목표:
+
+- 현재 stats / table / tabs / chart / container 관련 컴포넌트와 registry 경로 조사
+- 옛 V2 경로와 canonical 경로 구분
+- 어떤 컴포넌트를 흡수하고 어떤 컴포넌트를 재사용할지 결정
+
+산출물:
+
+- 관련 파일 목록
+- 현재 런타임 경로
+- 폐기 대상 / 유지 대상 목록
+
+### Phase G.1 - Data-bound Stats
+
+목표:
+
+- 통계 카드가 실제 테이블 aggregation 결과를 표시하도록 구현
+- count / sum / avg / distinctCount 우선 지원
+- static mock 값 의존 제거
+
+범위:
+
+- stats runtime loader
+- stats config panel
+- filter resolver 재사용
+- 디자인 모드 API 가드
+
+검증 기준:
+
+- `user_info` 전체 count 표시
+- `status = 재직` count 표시
+- 필터 변경 시 값 갱신
+- API 실패 시 카드 단위 fallback
+
+### Phase G.2 - Tabbed Data View
+
+목표:
+
+- 탭별로 다른 view config 를 저장하고 렌더링
+- 탭마다 다른 DataSource / filter / component layout 허용
+
+범위:
+
+- tabs runtime
+- tabs config panel
+- default tab / active tab 처리
+- 탭별 hidden/render guard
+
+검증 기준:
+
+- `사원 목록`, `부서별 현황`, `근태 현황` 3탭 구성 가능
+- 탭 전환 시 각 탭의 다른 뷰가 표시
+- 탭별 설정이 서로 섞이지 않음
+
+### Phase G.3 - View Components
+
+목표:
+
+- 탭 안에서 사용할 범용 뷰 컴포넌트를 정리
+
+우선순위:
+
+1. dataTable
+2. searchFilter
+3. cardList
+4. barChart
+5. donutChart
+6. groupedTable
+
+검증 기준:
+
+- 사원 목록 테이블 구성 가능
+- 부서 카드 목록 구성 가능
+- 부서별 인원 막대 차트 구성 가능
+- 직급별 분포 도넛 차트 구성 가능
+- 근태 날짜 그룹 테이블 구성 가능
+
+### Phase G.4 - 인사 관리 화면 검증
+
+목표:
+
+- 범용 설정만으로 인사 관리 예시 화면을 재현한다.
+
+검증 화면:
+
+- 상단 통계 카드 4개
+- 사원 목록 탭
+- 부서별 현황 탭
+- 근태 현황 탭
+
+중요:
+
+- 화면 이름과 예시 데이터는 인사 관리여도 구현은 범용이어야 한다.
+- 인사 관리 전용 if / hardcode 금지.
+
+### Phase G.5 - Legacy Cleanup
+
+목표:
+
+- stats / tabs / old table view 관련 옛 경로가 남아 있으면 제거
+- 단, 실제 재사용 가능한 shared util 은 유지
+
+검증:
+
+- 새 생성 경로가 canonical component 만 사용
+- 옛 V2/VEX id 로 신규 생성되지 않음
+- 기존 FieldConfig / DataPort 계약 영향 0건
+
+## 금지 사항
+
+- `v2-input`, `v2-select` 재도입 금지
+- old file/media 컴포넌트 부활 금지
+- `EntityPicker` 를 canonical input 에 재도입 금지
+- 인사 관리 전용 hardcode 금지
+- DB layout JSON migration SQL 금지
+- FieldConfig / DataPort 축소 금지
+- 화면을 단순 mock 정적 값으로 마무리 금지
+
+## 다음 작업 프롬프트 기준
+
+다음 작업자는 먼저 이 문서와 아래 문서를 읽고 시작한다.
+
+- `notes/gbpark/2026-05-14-studio-data-view-roadmap.md`
+- `notes/gbpark/2026-05-12-codex-handoff-input-canonical.md`
+- 필요 시 `notes/gbpark/2026-05-08-input-canonical-migration.md`
+
+다음 작업 시작점은 Phase G.0 이다.
+
+먼저 현재 repo 의 stats / tabs / table / chart / container 관련 컴포넌트와 registry 경로를 조사하고, 새 범용 Data-bound Stats / Tabbed Data View 를 어디에 붙이는 것이 가장 안전한지 제안한다.
+
+코드 변경은 조사 결과를 보고 Phase G.1 부터 시작한다.
+
+---
+
+## Phase G.0 Inventory Results
+
+조사일: 2026-05-14. 브랜치 `gbpark-node`. 코드 변경 없음 (read-only).
+
+### 0. 검증 사전 통과
+
+```
+git diff --check                                           PASS
+rg "v2-input|v2-select|V2InputRenderer|V2SelectRenderer"   0 matches
+rg "EntityPicker|entity-picker|EntitySearchModal"          0 matches (input + InvFieldConfigPanel)
+rg 'componentType: "v2-file-upload"|file: "v2-file-upload"|image: "v2-file-upload"|img: "v2-file-upload"'  0 matches
+```
+
+canonical input cleanup 상태 그대로 유지됨. G.0 인벤토리에서 추가 정리 필요 없음.
+
+### 1. Stats / KPI 컴포넌트
+
+#### 1.1 canonical `stats` (★ G.1 의 진입점)
+
+- 폴더: `frontend/lib/registry/components/stats/`
+  - `StatsComponent.tsx` — card / chip / bigNumber 3 가지 style, horizontal / vertical / grid 3 가지 orientation
+  - `InvStatsConfigPanel.tsx` — cp 시스템 통합 (title / dataSource / layout / colorPreset / items)
+  - `StatsRenderer.tsx` — 자가 등록 renderer
+  - `types.ts` — `StatsConfig`, `StatsItem`, `StatsAggregation`
+  - `index.ts` — `ComponentDefinition` 선언, `dataPorts.inputs: [{ name: "data", type: "rows" }]` 이미 선언됨
+- ComponentType: `"stats"`
+- ConfigPanel routing: `getComponentConfigPanel.tsx` line 21 — `"stats" → InvStatsConfigPanel`
+- 현재 상태: **표시 로직만**. `items[].value` 가 static. `sourceTable` 필드는 받지만 fetching 없음. 주석에 "Phase F 에서 연결" 표시
+- alias (`CONFIG_PANEL_ALIAS`): `v2-aggregation-widget → stats`, `v2-status-count → stats`, `aggregation-widget → stats`
+
+#### 1.2 레거시 (palette 숨김, alias 로 stats 에 흡수)
+
+| 폴더 | 컴포넌트 ID | 현재 동작 | 분류 |
+|---|---|---|---|
+| `v2-aggregation-widget/` | `v2-aggregation-widget` | `POST /table-management/tables/{tableName}/data` 호출 + 클라이언트 사이드 집계, V2EventBus 구독 | 레거시 / G.5 폐기 후보 |
+| `v2-status-count/` | `v2-status-count` | 같은 endpoint, statusColumn 기준 그룹 카운트 | 레거시 / G.5 폐기 후보 |
+| `aggregation-widget/` | `aggregation-widget` | externalData prop 만, 자체 fetch 없음 | 레거시 / G.5 폐기 후보 |
+
+DataPortBus 가 아니라 V2EventBus 위에서 동작. G.1 에서 재사용은 **개념 (filter / aggregation type)** 만, 코드는 canonical 측에서 새로 작성하는 게 깨끗함.
+
+### 2. Tabs / Container / Section
+
+#### 2.1 canonical `container` (★ G.2 의 진입점)
+
+- 폴더: `frontend/lib/registry/components/container/`
+  - `ContainerComponent.tsx` — `containerType` 5 가지 (tabs / section / accordion / repeater / conditional)
+  - `InvContainerConfigPanel.tsx` — cp 시스템
+  - `types.ts` — `ContainerConfig`, `ContainerTab { id, label }`
+  - `index.ts`
+- 현재 상태: **모든 모드 스켈레톤**. tabs 모드의 컨텐츠 영역은 literal `"[{activeTab}] 탭 컨텐츠 영역"` 텍스트만 출력. 자식 컴포넌트 렌더 없음
+- `TemplateComponent.children?: TemplateComponent[]` — `frontend/types/invyone-component.ts:856` 에 선언만 되어 있고 어디서도 사용 안 됨
+- state: 로컬 `useState(activeTab)`. 외부 통제 없음. 탭 별 데이터 소스 개념 없음
+
+#### 2.2 레거시 (palette 숨김)
+
+| 폴더 | 컴포넌트 ID | 비고 |
+|---|---|---|
+| `tabs/` | `tabs` | label 만 가진 단순 탭 |
+| `v2-tabs-widget/` | `v2-tabs-widget` | 탭 안에 inline 컴포넌트 배치 (디자인 타임만) |
+| `accordion-basic/` | `accordion-basic` | 미완성 |
+| `section-card/` `section-paper/` `v2-section-card/` `v2-section-paper/` | section 변형 | container 가 흡수 |
+| `split-panel-layout/` `split-panel-layout2/` `v2-split-panel-layout/` | split-panel-layout | **★ 패널 별 tableName / dataFilter / additionalTabs 필드 보유** — G.2 의 per-tab 데이터 모델 레퍼런스 |
+| `repeat-container/` `v2-repeat-container/` | repeat | container repeater 가 흡수 |
+| `conditional-container/` | conditional | container conditional 이 흡수 |
+
+`v2-split-panel-layout` 의 `additionalTabs: AdditionalTabConfig[]` 가 "탭 마다 독립 tableName / filter / columns" 패턴을 이미 가지고 있음. 이 구조를 canonical container.tabs 로 옮기는 게 G.2 핵심.
+
+#### 2.3 ComponentType union 현황
+
+`frontend/types/invyone-component.ts:171-182`:
+
+```
+'table' | 'form' | 'search' | 'button' | 'button-bar' | 'tabs'
+ | 'split-panel' | 'title' | 'stats' | 'divider' | 'pagination'
+```
+
+`tabs / split-panel / button-bar / pagination` 은 model-only (palette 숨김). 새 "tabbed data view" 를 별도 ComponentType 으로 추가하지 않고 **canonical `container` 의 `containerType: "tabs"` 를 확장** 하는 게 자연스러움.
+
+`container` 자체는 `ComponentType` union 에 없음 (string literal 11 종 외). 등록은 ComponentRegistry 측에서. 신규 union 추가는 G.2 단계에서 결정.
+
+### 3. Table
+
+- 폴더: `frontend/lib/registry/components/table/`
+  - `TableComponent.tsx` — 5 display mode (table / split / grouped / pivot / card)
+  - `InvTableConfigPanel.tsx`
+  - `useTableData.ts` — pagination / sort / search state hook
+  - `internals/pivot/` — `PivotChart.tsx` 포함
+- ComponentType: `"table"`
+- 데이터 fetch: `entityJoinApi.getTableDataWithJoins(tableName, { page, size, sortBy, sortOrder, search, enableEntityJoin, screenEntityConfigs, dataFilter, excludeFilter })`
+  - response: `{ data: Record<string, any>[], total, page, size, totalPages, entityJoinInfo? }`
+  - backend: `POST /table-management/tables/{tableName}/data`
+- alias: `v2-table-list → table`, 그 외 다수 (`split-panel-layout`, `modal-repeater-table` 등)
+- G.1 / G.2 에서 신규 작업 없음. 기존 `useTableData` + `entityJoinApi` 재사용.
+
+### 4. Chart
+
+#### 4.1 라이브러리
+
+- `recharts ^3.2.1` (`frontend/package.json`)
+
+#### 4.2 현재 차트 구현
+
+| 위치 | 용도 | 상태 |
+|---|---|---|
+| `frontend/lib/registry/components/ChartRenderer.tsx` | studio canvas 차트 컴포넌트 | **placeholder 아이콘만**. legacy `componentRegistry.register("chart")` / `register("chart-basic")` 로만 등록. 실제 차트 렌더 안 함. recharts 사용 X |
+| `frontend/components/admin/dashboard/charts/` | admin dashboard 전용 차트 | **실제 recharts 차트**. BarChart / PieChart / LineChart / AreaChart / ComboChart / HorizontalBarChart / StackedBarChart 풀세트. 단, 사용처가 `CanvasElement.tsx`, `DashboardViewer.tsx` (admin 대시보드 시스템) 로 studio runtime 과 완전 별개 |
+| `frontend/lib/registry/components/table/internals/pivot/components/PivotChart.tsx` | pivot 테이블 모드 내장 차트 | **실제 recharts 차트** (`PivotBarChart`, `PivotLineChart`, `PivotPieChart`). pivot view 한정 |
+
+#### 4.3 결론
+
+studio canvas 위에 **운영 가능한 차트 컴포넌트는 사실상 없음** (`ChartRenderer.tsx` 는 placeholder). G.3 에서 canonical 차트 컴포넌트를 만들 때:
+
+- recharts 는 이미 들어와 있음 — 새 dependency 추가 X
+- admin dashboard 의 차트 코드 (`BarChart.tsx`, `PieChart.tsx` 등) 가 reference. 다만 admin dashboard 의 `DashboardElement` 모델과 결합되어 있어서 그대로 가져올 수는 없음. studio canonical 시그니처 (data: rows → render) 로 새로 래핑
+- pivot 내부 `PivotChart.tsx` 는 더 가깝게 재사용 가능 (이미 recharts 직접 호출)
+
+### 5. 데이터 fetching API
+
+| API 클라이언트 | 위치 | 주요 함수 | response 형태 | 사용처 |
+|---|---|---|---|---|
+| `entityJoinApi` | `frontend/lib/api/entityJoin.ts` | `getTableDataWithJoins(tableName, opts)` | `{ data, total, page, size, totalPages, entityJoinInfo? }` | canonical `table`, `v2-table-list` |
+| `dataApi` | `frontend/lib/api/data.ts` | `getTableData(tableName, opts)`, `getRecordDetail(...)` | `{ data, total, page, size, totalPages }` | `aggregation-widget`, legacy 컴포넌트 |
+| `tableTypeApi` | `frontend/lib/api/screen.ts` (line 526+) | `getTables()`, `getTableLabel(...)`, `getColumns(...)`, `getTableData(...)` | 메타 + auto-filter (company_code) | config panel, schema loader |
+
+G.1 (Data-bound Stats) 는 같은 endpoint 위에 **count / aggregate 변형**이 필요. 두 가지 옵션:
+
+- A. backend 에 `POST /table-management/tables/{tableName}/aggregate` 신규 추가 (column / aggregation / filters 받음)
+- B. 기존 `POST /.../data` 로 가져와 클라이언트 사이드 count — 데이터량 많으면 비효율, v2-aggregation-widget 이 `size: 10000` 으로 이걸 하고 있음
+
+권장: 옵션 A. 단, 백엔드 작업이 들어가므로 G.1 1순위 spike 에서 결정.
+
+### 6. Filter Resolver
+
+- 위치: `frontend/lib/registry/components/input/use-option-loader.ts`
+- 타입:
+
+  ```ts
+  interface OptionFilter {
+    column: string;
+    operator: "=" | "!=" | ">" | "<" | ">=" | "<=" | "in" | "notIn" | "like" | "isNull" | "isNotNull";
+    value_type?: "static" | "field" | "user";
+    value?: unknown;
+    field_ref?: string;
+    user_field?: "companyCode" | "userId" | "deptCode" | "userName";
+  }
+  ```
+
+- 현재 사용처: canonical `input` (entity / distinct / db source 의 옵션 로딩)
+- G.1 에서 그대로 재사용. 신규 stats card 의 `filters` 가 같은 모델로 동작하면 변환 코드 0.
+- G.2 의 탭 별 filter 도 동일 모델 사용 가능.
+
+### 7. DataPort 인프라
+
+- 위치: `frontend/lib/dataPort/`
+  - `DataPortBus.ts` — pub/sub 버스. 채널 = `${componentId}.${portName}`. 화면 단위 인스턴스 + `defaultDataPortBus` 전역 인스턴스 제공
+  - `runtime.ts` — `setupConnections(connections, bus)`
+- 선언된 컴포넌트:
+  - `stats` 의 `index.ts` 에 `dataPorts.inputs: [{ name: "data", type: "rows" }]` 선언됨
+  - 다른 canonical (table / input / button 등) 은 `dataPorts` 미선언 또는 부분 선언
+- 활성화 상태: **renderer 측 wiring 미완**. `BlockRenderer` / `TemplateRenderer` 어디서도 `setupConnections` 를 호출 안 함. publish / subscribe 호출 0건. `Template.connections` 가 항상 빈 배열로 저장됨
+- 결론: G.1 stats 의 "데이터 흐름" 은 DataPortBus 를 정식 wiring 하지 말고, **props / 직접 fetching** 으로 먼저 작동시키는 게 빠르고 안전. DataPort 활성화는 별도 phase (Phase 3 노드 에디터 도입과 함께) 로 미룸.
+
+### 8. Registry / Rendering 파이프라인
+
+- `Component { type, webType, config }` 이 들어오는 진입점: `frontend/lib/registry/DynamicComponentRenderer.tsx`
+- 흐름:
+  1. componentType 추출 (`component.componentType` → `component.type` fallback)
+  2. `LEGACY_TO_UNIFIED` alias 매핑 (`v2-table-list → table`, `v2-aggregation-widget → stats`, …)
+  3. `ComponentRegistry.getComponent(componentType)` 로 ComponentDefinition 조회
+  4. 정의의 `component` 를 React 렌더
+- ConfigPanel 매핑: `frontend/lib/utils/getComponentConfigPanel.tsx`
+  - `CONFIG_PANEL_MAP` (~100 entries) + `CONFIG_PANEL_ALIAS` (legacy 매핑)
+  - 사용처: `V2PropertiesPanel.tsx` 의 `DynamicComponentConfigPanel`
+- webTypeMapping: `frontend/lib/utils/webTypeMapping.ts` — FieldConfig.type / FieldConfig.format 조합 → `{ componentType, config }`. canonical `input` 이 ~40 종 webType 을 흡수
+- 신규 컴포넌트 추가 시 touch 파일 (canonical `input` 패턴 따라하기):
+  1. `frontend/lib/registry/components/<new-comp>/` 폴더 + Renderer + ConfigPanel + Component + index.ts + types.ts
+  2. `frontend/lib/registry/components/index.ts` 에 `import "./<new-comp>/<New>Renderer";` 추가
+  3. `frontend/lib/utils/getComponentConfigPanel.tsx` 의 `CONFIG_PANEL_MAP` 에 entry
+  4. (palette 노출 시) `frontend/components/screen/panels/ComponentsPanel.tsx` 의 `BASIC_IDS` 또는 `ADVANCED_IDS`
+  5. (필요 시) `frontend/types/invyone-component.ts` 의 `ComponentType` union 에 추가
+  6. (필요 시) `frontend/lib/utils/webTypeMapping.ts` entry
+
+G.1 / G.2 는 신규 컴포넌트 폴더가 아니라 기존 canonical (`stats`, `container`) 의 **runtime 확장**이라 touch 가 적음.
+
+### 9. Stale V2 wording
+
+확인 결과, runtime 영역의 V2 표현은 **현재 진행 중인 통합 전략의 흔적**이며 stale 이 아님:
+
+- `frontend/lib/registry/components/index.ts:77` — `// V2 컴포넌트들 (...)` 주석. 흡수 진행 중 표시
+- `getComponentConfigPanel.tsx:133` — `// ── Phase E: v2-* → 통합 컴포넌트 ConfigPanel alias ──` — 의도된 alias 블록 표시
+- `DynamicComponentRenderer.tsx:365, 375` — Phase E 주석. 이력 의도
+- `ComponentsPanel.tsx:99-160` — hidden list 의 `// → canonical input` 화살표 주석. 의도된 migration map
+- `V2PropertiesPanel.tsx:225-236` — `const v2ConfigPanels` 하드코딩 매핑 (`v2-layout`, `v2-bom-tree` 등 미마이그된 도메인 패널)
+
+→ **이번 phase 에서 코드 수정 없음.** 어느 것도 단순 주석 cleanup 으로 끝나지 않고, 실제 마이그레이션 phase 와 묶여서 함께 정리해야 함.
+
+추가로 폴더 이름 자체 (`frontend/components/v2/`) 도 컨벤션상 마이그레이션 끝난 후 `inv/` 로 일괄 rename 예정 — 이건 별도 phase. G.0 에서 건드리지 않음.
+
+### 10. 재사용 가능 / 폐기 대상 정리
+
+#### 재사용 (G.1 / G.2 에서 의존)
+
+- `stats` 컴포넌트 (canonical) — items renderer + style/orientation 변형 + cp 컨피그 패널
+- `container` 컴포넌트 (canonical) — tabs 모드의 헤더 + active 상태 — body 만 children renderer 로 교체
+- `entityJoinApi` / `dataApi` — 데이터 fetch
+- `useTableData` — pagination/sort/search 상태 관리 패턴
+- `OptionFilter` + `useOptionLoader` filter 모델 — 사용자 컨텍스트 (companyCode 등) placeholder 치환
+- `InvTableConfigPanel` 의 filter / column / dataFilter UI 패턴 — G.2 탭 별 데이터 소스 설정에 차용
+- `v2-split-panel-layout` 의 `additionalTabs` 타입 모양 — G.2 `ContainerTab` 확장 시 reference (코드 복사 아님)
+- `PivotChart.tsx` (recharts 사용 패턴) — G.3 canonical 차트 시 reference
+- admin dashboard charts (`frontend/components/admin/dashboard/charts/`) — G.3 reference (직접 import X)
+- `DataPortBus` — 향후 wiring 시점에 사용. G.1 / G.2 에서는 직접 props 우선
+
+#### 향후 폐기 (G.5)
+
+- `v2-aggregation-widget/` (alias → stats)
+- `v2-status-count/` (alias → stats)
+- `aggregation-widget/` (alias → stats)
+- `tabs/` (legacy)
+- `v2-tabs-widget/` (alias → container)
+- `accordion-basic/` (legacy 미완)
+- `section-card/`, `section-paper/`, `v2-section-card/`, `v2-section-paper/` (alias → container)
+- `split-panel-layout/`, `split-panel-layout2/`, `v2-split-panel-layout/` (alias → table / container)
+- `repeat-container/`, `v2-repeat-container/` (alias → container)
+- `conditional-container/` (alias → container)
+- `frontend/lib/registry/components/ChartRenderer.tsx` (placeholder; G.3 canonical 차트가 들어오면 삭제)
+
+각 폐기는 alias가 비어 있고 DB 에 저장된 컴포넌트 ID 사용처가 0건임을 확인한 후 별도 plan/phase 로 진행.
+
+### 11. Phase G.1 Data-bound Stats 추천 플랜
+
+**원칙**: canonical `stats` 만 건드림. 새 컴포넌트 추가 X. DataPort wiring 도 미루고 직접 fetch.
+
+1. **데이터 모델 확장**
+   - `frontend/lib/registry/components/stats/types.ts` 에 `StatItemDataSource` 추가
+     - `tableName: string`
+     - `aggregation: "count" | "sum" | "avg" | "min" | "max" | "distinctCount"`
+     - `columnName?: string`
+     - `filters?: OptionFilter[]` — 기존 `OptionFilter` 그대로 재사용
+   - `StatsItem` 에 `dataSource?: StatItemDataSource` 필드 추가 (기존 static `value` 와 양립)
+
+2. **runtime 데이터 로더**
+   - `frontend/lib/registry/components/stats/useStatsData.ts` (신규) — `items: StatsItem[]` → `Record<string, number>` 결과 맵 반환
+   - 디자인 모드: skeleton / "—" / 0 표시. API 호출 0건
+   - 운영 모드: 같은 tableName 끼리 묶어서 단일 요청 또는 in-flight 캐시
+   - 실패 시 카드 단위 fallback (전체 화면 무너지지 않음)
+
+3. **백엔드 endpoint** (★ 결정 필요)
+   - 옵션 A 권장: `POST /table-management/tables/{tableName}/aggregate` 신설
+     - body: `{ aggregation, columnName?, filters: OptionFilter[] }`
+     - response: `{ value: number }` (count 면 정수, sum/avg 면 숫자)
+   - 옵션 B fallback: 기존 `/data` endpoint 에서 size 1 + totalCount 만 사용 (count 한정)
+   - 옵션 결정 전에 backend 측 spike 1회 필요 (별도 task)
+
+4. **filter resolver**
+   - `OptionFilter[]` 를 그대로 보내고 백엔드가 처리하는 방향 권장. 클라이언트는 `value_type === "field"` 또는 `"user"` 를 fieldRef / userContext 에서 치환만 함
+   - 신규 placeholder 추가 없음
+
+5. **InvStatsConfigPanel 확장**
+   - 기존 cp 시스템 그대로
+   - 각 item 에 "데이터 소스" 그룹 추가: 테이블 / 집계 / 컬럼 / 필터
+   - 필터는 `OptionFilter` 빌더 — `InvTableConfigPanel` 의 dataFilter 빌더 그대로 차용 (또는 cp `FilterBuilder` 신규)
+   - static value 와 dataSource 가 둘 다 있으면 dataSource 우선
+
+6. **검증 기준 (roadmap §4 G.1)**
+   - `user_info` 전체 count 카드 한 개 만들기
+   - `status = '재직'` count 카드 만들기
+   - 필터 column 을 다른 값으로 바꾸면 값 갱신
+   - 잘못된 tableName → 카드 한 장만 에러 표시, 나머지 카드 정상
+
+7. **하드 제약**
+   - 인사 / 부서 / 사원 키워드를 컴포넌트 코드에 박지 말 것. 컬럼 / 테이블 이름 전부 config 로
+   - `v2-input`, `v2-select`, `EntityPicker` 다시 도입 금지
+   - DB layout JSON migration SQL 작성 금지
+   - `FieldConfig` 축소 / 재설계 금지
+
+8. **추정 작업량**: 백엔드 endpoint + 프론트 hook + 컨피그 패널 확장. 백엔드 spike 1회 포함하여 1.5~2 일 정도.
+
+### 12. Phase G.2 Tabbed Data View 추천 플랜
+
+**원칙**: canonical `container` 의 `containerType: "tabs"` 만 건드림. 새 ComponentType 추가 X.
+
+1. **타입 확장**
+   - `frontend/lib/registry/components/container/types.ts` 의 `ContainerTab` 에 추가:
+     - `dataSources?: DataSourceConfig[]`
+     - `filters?: FilterConfig[]` (FieldConfig 와 별개. 검색 필터용 — `FieldConfig` 재사용도 검토)
+     - `components?: TemplateComponent[]` — 탭 내부 배치 컴포넌트들
+     - `viewType?: "table" | "split-list-chart" | "grouped-table" | "custom"` (선택)
+   - `TemplateComponent.children` (이미 선언됨) 의 의미를 "탭 내부 컴포넌트들" 로 확정할지 또는 `ContainerTab.components` 를 별도 사용할지 결정 필요. 추천: `ContainerTab.components` (탭 별 격리가 더 명시적)
+
+2. **runtime 자식 렌더**
+   - `ContainerComponent.tsx` 의 `renderTabs()` body 부분의 placeholder 텍스트 제거
+   - 현재 active tab 의 `tab.components: TemplateComponent[]` 를 `DynamicComponentRenderer` 로 매핑하여 렌더
+   - 디자인 모드: drop zone 표시. 자식 컴포넌트 배치 가능
+   - 운영 모드: 직접 렌더
+
+3. **탭 별 스코프**
+   - 현 단계는 단순히 props 로 데이터 흐르게 두기 (DataPort 활성화 미룸)
+   - 탭 별 `dataSources` 가 있으면 탭 컨테이너 레벨에서 fetch 후 자식에 prop drilling
+   - 탭 전환 시 비활성 탭 렌더 OFF (lazy) — 데이터 fetch 도 OFF
+
+4. **active tab 관리**
+   - 기존 `useState(activeTab)` 유지
+   - `defaultTab` config 존중
+   - URL query / DataPort 통제는 G.2 범위 밖
+
+5. **InvContainerConfigPanel 확장**
+   - `containerType === "tabs"` 일 때 각 탭 별로 펼침 가능한 cp 그룹:
+     - 탭 메타 (id / label / icon)
+     - 데이터 소스 빌더 (선택)
+     - 자식 컴포넌트 리스트 (선택. 빌더 캔버스에서 드래그하면 자동 채워지므로 패널은 ID 표시만)
+
+6. **검증 기준 (roadmap §4 G.2)**
+   - 한 화면에 탭 3개. 각 탭 안에 서로 다른 컴포넌트 (테이블, 카드 목록, 차트 placeholder) 배치
+   - 탭 전환 시 그 탭의 컴포넌트만 표시
+   - 탭 설정 간 누수 없음 (탭 A 의 filter 가 탭 B 에 영향 X)
+
+7. **하드 제약**
+   - 인사 관리 전용 if 분기 금지
+   - 옛 `v2-tabs-widget` / `tabs` / `accordion-basic` 부활 금지
+   - `Template.connections` 강제 활성화 금지 (별도 phase)
+   - `FieldConfig` / `DataPort` 축소 금지
+   - 하드코딩된 탭 라벨 ("사원 목록" 등) 금지
+
+8. **추정 작업량**: 타입 확장 + 자식 렌더 + 컨피그 패널 + 디자인 모드 drop zone. 2~3 일.
+
+### 13. 다음 단계 추천
+
+- 즉시 시작 가능: **Phase G.1** (백엔드 spike 1회 후 본격 구현)
+- G.2 는 G.1 끝나고 시작. 두 phase 가 서로 독립이라 병렬도 가능하나 단일 작업자면 직렬이 안전
+- G.3 (차트 / 카드 목록 / grouped table) 은 G.2 끝나고. recharts 기반 신규 canonical 컴포넌트 신설
+- G.4 (인사 관리 화면 검증) 는 G.3 끝나고. 화면 자체는 빌더 설정만으로 생성
+- G.5 (legacy cleanup) 는 가장 마지막. 메모리에 박힌 alias / 폐기 후보 리스트 그대로 진행
+
+코드 변경 0건. 본 인벤토리 작업으로 추가된 파일 외에 수정 없음.
+
+---
+
+### Phase G.1 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### Changed files
+
+Backend (Java / Spring):
+- `backend-spring/src/main/java/com/erp/controller/TableManagementController.java`
+  - 신규 endpoint `POST /api/table-management/tables/{tableName}/aggregate`
+- `backend-spring/src/main/java/com/erp/service/TableManagementService.java`
+  - 신규 메서드 `aggregateTableData(String tableName, Map options)` + 내부 헬퍼 (`buildAggregateWhere`, `normalizeAggregateFilters`, `toList`, 상수 `AGG_TYPES`, `FILTER_OPS`)
+
+Frontend (Next / TS):
+- `frontend/lib/api/stats.ts` (신규) — `aggregateTableStat(tableName, request)` + `AggregateRequest` / `AggregateResponse` 타입
+- `frontend/lib/registry/components/stats/types.ts` — `StatsAggregation` 에 `distinctCount` 추가, `StatItemDataSource` 신규, `StatsItem.id?`, `StatsItem.dataSource?` 신규
+- `frontend/lib/registry/components/stats/use-stats-data.ts` (신규) — runtime 데이터 로더 hook
+- `frontend/lib/registry/components/stats/StatsComponent.tsx` — `useStatsData` 호출 + 항목 단위 `displayValue` 결정 (dataSource fetch 값 우선, fallback `item.value`)
+- `frontend/lib/registry/components/stats/InvStatsConfigPanel.tsx` — 항목 expand 영역에 `DataSourceEditor` (테이블 / 집계 / 컬럼 / 필터) + `FilterRow` 추가
+
+#### Backend endpoint contract
+
+```
+POST /api/table-management/tables/{tableName}/aggregate
+Content-Type: application/json
+
+{
+  "aggregation": "count" | "sum" | "avg" | "min" | "max" | "distinctCount",
+  "columnName": "optional_column",
+  "filters": [
+    { "column": "status", "operator": "=", "value": "재직" }
+  ]
+}
+```
+
+응답 (ApiResponse wrapper):
+```
+{
+  "success": true,
+  "data": { "value": 12 },
+  "message": "테이블 집계를 성공적으로 조회했습니다."
+}
+```
+
+#### Supported aggregation / filter operators
+
+| aggregation | columnName | 비고 |
+|---|---|---|
+| `count` | optional | column 없으면 `COUNT(*)`, 있으면 `COUNT("col")` (NULL 제외) |
+| `distinctCount` | required | `COUNT(DISTINCT "col")` |
+| `sum`, `avg` | required | `CAST(col AS NUMERIC)` 후 집계. 숫자 호환 값이 들어 있는 컬럼에서 사용 |
+| `min`, `max` | required | 컬럼 타입 그대로 |
+
+| operator | 처리 |
+|---|---|
+| `=`, `!=`, `>`, `<`, `>=`, `<=` | 단일 `?` 파라미터 |
+| `like` | `"col"::text ILIKE '%val%'` |
+| `in`, `notIn` | 배열 / 콤마 문자열 → `IN (?, ?, ...)` |
+| `isNull`, `isNotNull` | 값 없이 적용 |
+
+검증:
+- 모든 식별자는 기존 `sanitize` (영문/숫자/_ 외 제거) 후 `hasColumn` 으로 컬럼 존재 확인. 없는 컬럼은 자동 drop
+- 잘못된 aggregation / 누락된 column / 없는 테이블 → `IllegalArgumentException` → 400 에러
+- 값은 `JdbcTemplate` 의 `?` 파라미터 바인딩만 사용. 식별자 자리에 raw input 들어가지 않음
+- `filters` 가 배열이 아니거나 배열 안 원소가 object 가 아니면 무시. 잘못된 filter payload 로 500 이 나지 않게 정규화
+
+#### Frontend filter resolver
+
+`OptionFilter.value_type` (canonical):
+- `static` — `value` 그대로 전송
+- `field` — `field_ref` 가 `formData` 에 있어야 함. 없으면 해당 항목 fetch skip (카드는 idle 상태)
+- `user` — `user_field` 가 `userContext` 에 있어야 함. 없으면 skip
+
+이렇게 해서 백엔드는 `column / operator / value` 만 받는 단순 모델 유지. `value_type` resolution 은 프론트에서 완료.
+
+#### 디자인 모드 / 캐싱 / race guard
+
+- `isDesignMode === true` → API 호출 0. 정적 `item.value` 표시
+- request key 캐시 (`buildRequestKey`): `tableName + aggregation + columnName + resolved filters` 의 stringify. 같으면 재호출 안 함
+- version 카운터로 stale response 무시 (effect 재실행 시 이전 버전 결과 drop)
+- 카드 단위 try/catch — 한 카드 실패 시 다른 카드 영향 0. 실패 카드는 "—" 표시 + `state[key].error`
+- 정적 stats / 디자인 모드 / fetch 대상 0건인 경우 `setState({})` 반복으로 렌더 루프가 생기지 않도록 plan signature 와 state 변경 여부를 체크
+- `InvStatsConfigPanel` 의 테이블 목록은 상위 패널에서 1회 `useDbTables()` 호출 후 각 item editor 로 전달. 항목 수만큼 테이블 목록 API 를 중복 호출하지 않음
+
+#### Remaining limitations
+
+1. **컬럼 선택 UI** — 현재 컬럼명은 free text 입력. 테이블에 따라 컬럼 자동 완성 / dropdown 제공은 후속 phase 에서 (`tableManagementApi.getColumnList` 재사용 예정)
+2. **숫자 포맷팅** — `StatsItem.format` 필드는 type 에만 있고 hook 결과 표시는 `Number.toLocaleString` 기본만. `#,##0.00` 등 커스텀 포맷 적용은 별도 작업
+3. **자동 갱신** — 현재는 mount 시 1회 + `refreshKey` 변경 시 재조회. polling / 주기적 refresh 옵션은 미구현
+4. **다중 테이블 배치 요청** — 같은 tableName 끼리 묶어서 1회 요청으로 처리하는 최적화는 미구현 (현재는 항목별 1요청). 카드 수가 적은 KPI 화면에서는 문제 없음
+5. **`value_type: "user"` 컨텍스트** — `StatsComponent` props 의 `companyCode / userId / deptCode / userName` 만 인식. 외부 wrapper 가 명시적으로 props 로 전달해야 함. 빌더 / 런타임 wiring 은 기존 패턴 그대로
+6. **DataPort 활성화 미함** — Phase G.0 결정대로 props / hook 으로만 동작. `DataPortBus` wiring 은 별도 phase
+
+#### Verification
+
+```bash
+git diff --check                                           PASS
+git diff --cached --check                                  PASS
+cd backend-spring && ./gradlew compileJava                BUILD SUCCESSFUL in 10s
+rg "v2-input|v2-select|V2InputRenderer|V2SelectRenderer"   0 matches
+rg "EntityPicker|entity-picker|EntitySearchModal"          0 matches (input + InvFieldConfigPanel)
+rg 'componentType: "v2-file-upload"|file: ...'             0 matches
+```
+
+전체 `tsc` 는 기존 전역 camelCase/snake_case 에러로 실패하는 게 정상. G.1 변경 파일 한정 신규 에러 0 건 확인 (frontend 측 별도 ts 모듈 추가 + 기존 모듈 수정 모두 자체 컴파일 가능 — 의존하는 export 들은 그대로 유지).
+
+#### 다음 권장 단계
+
+- **Phase G.2 Tabbed Data View** 진입. canonical `container` (`containerType: "tabs"`) 의 placeholder body 를 자식 컴포넌트 렌더로 교체. 새 ComponentType 추가 없이 `ContainerTab` 에 `components / dataSources / filters` 확장
+- G.1 마무리 후속:
+  - 컬럼 dropdown (테이블 변경 시 `getColumnList` 로 옵션 채움)
+  - `StatsItem.format` → 표시 포맷 적용
+  - 같은 테이블 묶음 요청 최적화 (필요 시)
+
+---
+
+### Phase G.2 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### Changed files
+
+Frontend (Next / TS):
+- `frontend/lib/registry/components/container/types.ts` — `ContainerChildComponent` 신규, `ContainerTab` 에 `icon? / components? / dataSources? / filters? / viewType?` 추가
+- `frontend/lib/registry/components/container/ContainerComponent.tsx` — `containerType === "tabs"` 의 placeholder body 제거. 활성 탭의 `components` 를 `DynamicComponentRenderer` 로 렌더. `ChildSlot` 헬퍼 + drop-zone fallback 추가. props 전달 (`formData / userId / userName / companyCode / refreshKey` 등)
+- `frontend/lib/registry/components/container/InvContainerConfigPanel.tsx` — 탭 row 에 `(N개)` 자식 개수 뱃지 추가 (minimal). 라벨 편집 / 추가 / 삭제 / 기본 탭 선택은 기존 그대로
+
+Backend (Java/Spring): 변경 없음.
+Documentation: 본 섹션 추가.
+
+#### Runtime behavior added
+
+- **활성 탭만 mount**: `tabs.find(t => t.id === activeTab)` 의 `components` 만 렌더. 비활성 탭은 React tree 에 진입조차 안 함 (성능 + side-effect 격리). 탭 전환 시 이전 탭 unmount.
+- **빈 탭 fallback**:
+  - 디자인 모드: dashed border + "이 탭이 비어 있습니다. 좌측 팔레트에서 컴포넌트를 끌어다 놓으세요." 안내 (drop-zone-like). 실제 drop wiring 은 외부 빌더 책임이라 안내 텍스트만
+  - 운영 모드: `null` 반환 (빈 영역)
+- **자식 정규화**: `ContainerChildComponent.{ id, componentType, componentConfig, size }` 를 `DynamicComponentRenderer` 가 받는 `component { id, componentType, type, componentConfig, component_type, component_config, size }` 형태로 매핑. camelCase / snake_case 둘 다 채워서 renderer 측 fallback 매칭 100% 호환
+- **props 전파**: `formData / onFormDataChange / userId / userName / companyCode / screenId / menuId / menuObjid / tableName / selectedRows / selectedRowsData / onSelectedRowsChange / refreshKey / onRefresh / isInModal` 를 자식에 그대로 forward. DataPortBus wiring 은 활성화하지 않음 (G.0 결정)
+- **자유 배치**: `size.width / height` 가 있으면 자식 wrap div 에 inline style 로 적용. 좌표 (position) 는 G.2 범위 밖 — 외부 빌더 / 차후 phase 책임
+- **탭 헤더**: 기존 UI (가로 button 라인, 활성 탭 primary color 보더) 그대로. `tab.icon` 이 있으면 라벨 앞에 표시 (이모지 / 짧은 문자열). 클릭 시 디자인 모드에서도 미리보기 전환 가능 (이전엔 디자인 모드에서 setActiveTab 막혀 있었음)
+
+#### Codex verification correction
+
+검증 중 확인된 작은 런타임 보정:
+- `activeTab` 이 삭제되었거나 현재 `tabs` 목록에 없을 때 본문은 첫 탭으로 fallback 되는데, 헤더 active 표시는 stale `activeTab` 을 보던 문제를 `activeTabId = currentTab?.id` 기준으로 맞춤
+- 탭 내부 자식에게 `parentTabId / parentTabsComponentId` 를 전달해서 차후 빌더 선택 / 위치 업데이트 wiring 이 부모 탭을 식별할 수 있게 함
+- `ChildSlot` 주석에서 실제 구현되지 않은 try/catch boundary 언급 제거
+
+#### Config panel changes
+
+- 탭 list 의 각 row 에 `(N개)` / `·` 미니 뱃지 추가. mono font, muted color. tooltip = "이 탭에 배치된 컴포넌트 수"
+- 추가 / 삭제 / 라벨 편집 / 기본 탭 선택은 기존 그대로 유지 — 패널 재설계 안 함
+- 자식 컴포넌트의 실제 배치 / 편집은 캔버스 빌더 책임. config 패널은 메타 표시만
+
+#### Type model (요약)
+
+```ts
+export interface ContainerChildComponent {
+  id: string;
+  componentType: string;          // "table" | "stats" | "search" | "button" | "input" | ...
+  componentConfig?: Record<string, any>;
+  label?: string;
+  size?: { width?: number | string; height?: number | string };
+}
+
+export interface ContainerTab {
+  id: string;
+  label: string;
+  icon?: string;
+  components?: ContainerChildComponent[];
+  dataSources?: unknown[];        // forward compat (runtime 미사용)
+  filters?: unknown[];            // forward compat (runtime 미사용)
+  viewType?: string;              // forward compat (runtime 미사용)
+}
+```
+
+`TemplateComponent` (`frontend/types/invyone-component.ts:822`) 보다 의도적으로 작음. order / row / responsive / parentId / groupChildren / inputs / outputs 등은 G.2 범위 밖 — 빌더 자유 배치 또는 DataPort 활성화 phase 영역. 차후 phase 에서 `ContainerChildComponent` 가 `TemplateComponent` 의 일부 필드를 흡수하는 식으로 확장 가능.
+
+#### Verification
+
+```bash
+git diff --check                                                                          PASS
+git diff --cached --check                                                                 PASS
+rg "v2-input|v2-select|V2InputRenderer|V2SelectRenderer" frontend/...                     0 matches
+rg "EntityPicker|entity-picker|EntitySearchModal" input + InvFieldConfigPanel             0 matches
+rg "v2-tabs-widget|componentType: \"tabs\"|id: \"tabs\"" frontend/...                     pre-existing only
+tsc --noEmit --pretty false (filter container/ paths)                                     0 new errors
+```
+
+전체 `tsc` 총 에러 수 3376 — Phase G.1 종료 시점과 동일 (G.2 가 신규 에러 도입 0). 기존 전역 camelCase / snake_case · BlockRole 에러만 남음.
+
+`v2-tabs-widget` / `componentType: "tabs"` grep 결과 매치는 모두 G.2 작업 전부터 있던 alias / 마이그레이션 / 흡수 주석 / 레거시 폴더 코드 — G.2 신규 도입 0건. 주요 위치:
+- `frontend/lib/registry/components/container/types.ts` — 흡수 대상 주석 (`v2-tabs-widget (탭)`). 기존
+- `frontend/lib/utils/getComponentConfigPanel.tsx` — alias `"v2-tabs-widget" → "container"`. 기존
+- `frontend/lib/utils/templateMigrate.ts` — `'v2-tabs-widget': 'container'` 마이그레이션 매핑. 기존
+- `frontend/lib/registry/DynamicComponentRenderer.tsx` — `LEGACY_TO_UNIFIED` 안의 alias. 기존
+- `frontend/lib/registry/components/v2-tabs-widget/` 폴더 자체. 기존 (Phase G.5 Legacy Cleanup 대상)
+- `frontend/lib/registry/components/tabs/tabs-component.tsx` — `hidden: true` 레거시 폴더. 기존 (Phase G.5 대상)
+- `frontend/components/screen/ScreenDesigner.tsx`, `RealtimePreviewDynamic.tsx`, `InteractiveScreenViewer.tsx`, `SplitPanelLayoutComponent.tsx`, `ComponentsPanel.tsx`, `componentConfig.ts` 등 — 모두 알려진 alias / hidden list / migration 코드. 기존
+
+#### Remaining limitations
+
+1. **빌더 측 drag-drop 미연결** — `ChildSlot` 까지의 렌더 wiring 은 완료. 빌더가 캔버스에서 컴포넌트를 끌어다 놓아서 `tab.components` 에 추가하는 UI / store 업데이트는 외부 (ScreenDesigner 등) 책임. 현재는 데이터를 코드로 주거나 다른 화면에서 마이그된 경우만 표시
+2. **section / accordion / repeater / conditional 모드** — G.2 는 `containerType === "tabs"` 만 활성. 나머지 4 모드는 여전히 스켈레톤 placeholder. 각 모드의 자식 렌더는 별도 phase
+3. **탭별 dataSources / filters runtime** — `ContainerTab.dataSources / filters` 는 type 에 추가만 됨. runtime 에서 이를 fetch 해서 자식에 prop 으로 주입하는 wiring 은 G.2 범위 밖 (G.3 View Components 와 함께 진행 예정)
+4. **자식의 자유 좌표 배치** — `size.width / height` 만 적용. `position.x / y` 같은 absolute 좌표는 미지원 — vertical stack 만 함. 빌더에서 자유 배치 요구가 강해지면 차후 `ContainerChildComponent.position` 추가
+5. **`Template.connections` (DataPort) 활성화** — Phase G.0 결정대로 미활성. 자식들은 props 로만 데이터 전달받음. DataPortBus subscribe / publish 는 별도 phase
+6. **탭별 lazy state 보존** — 현재는 탭 전환 시 이전 탭 자식이 완전 unmount. 자식 내부 상태 (테이블 페이지 / 검색어 등) 가 초기화됨. "hidden 으로만 숨김" 모드는 G.2 범위 밖. 필요 시 `keepMounted: boolean` 옵션 추가 가능
+
+#### 다음 권장 단계
+
+- **Phase G.3 View Components** — 탭 안에서 사용할 범용 뷰 컴포넌트 정리 (`dataTable / searchFilter / cardList / barChart / donutChart / groupedTable`). 차트는 `recharts ^3.2.1` 위에 canonical 컴포넌트 신설. `frontend/components/admin/dashboard/charts/` 를 reference 로 함 (직접 import X)
+- 빌더 측 작업: 캔버스에서 컴포넌트를 컨테이너 탭에 drop 했을 때 `tab.components` 배열을 업데이트하는 wiring (`ScreenDesigner` 영역)
+- 마이그레이션: 기존 `v2-tabs-widget` 의 `TabItem.components: TabInlineComponent[]` (snake_case `component_type / component_config`) 를 canonical `ContainerTab.components: ContainerChildComponent[]` (camelCase) 로 변환하는 adapter. `templateMigrate.ts` 에 한 줄 추가
+
+---
+
+### Phase G.2.5 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### 목적
+
+G.2 가 끝낸 "활성 탭의 `components` 를 `DynamicComponentRenderer` 로 렌더" 위에, 빌더 사용자가 실제로 캔버스에서 **canonical container 의 탭 body 에 컴포넌트를 끌어다 놓고 / 선택하고 / 삭제** 할 수 있도록 wiring 한다. 새 component type / 새 store / 새 panel 추가 0건. 기존 v2-tabs-widget 빌더 인프라 (handleComponentDrop tab 분기, handleSelectTabComponent, onUpdateComponent 등) 를 그대로 재사용.
+
+#### Changed files
+
+Frontend (Next / TS):
+- `frontend/lib/registry/components/container/ContainerComponent.tsx`
+  - 탭 body 컨테이너에 `data-tabs-container="true"`, `data-container-kind="canonical"`, `data-component-id`, `data-active-tab-id` 추가
+  - 탭 body 빈 영역 클릭 시 `onSelectTabComponent(activeTabId, "", null)` 호출 → 선택 해제
+  - `renderTabChildren` 가 `p.onSelectTabComponent`, `p.selectedTabComponentId`, `p.onUpdateComponent` 를 받아 자식 선택 / 삭제에 사용
+  - `ChildSlot` 확장: design 모드 hover dashed outline, selected 시 primary outline, ✕ 삭제 버튼 (hover + selected 시 노출). 자식 자체의 클릭은 `pointer-events: none` 으로 차단해서 ChildSlot 의 선택 click 만 받게 함
+- `frontend/components/screen/ScreenDesigner.tsx`
+  - `handleComponentDrop` 의 tabs 분기 (line ~3858) 가 `compType === "container" && containerType === "tabs"` 도 인식하도록 확장 (`isCanonicalTabs` 변수)
+  - 그 외에는 한 줄도 안 건드림. 기존 흐름 (`updatedTabs / updatedTabsComponent` 생성, 중첩 split-panel 처리, `setLayout + saveToHistory`) 그대로 재사용
+- Backend: 변경 없음
+- Documentation: 본 섹션 추가
+
+#### Tab drop 동작 흐름
+
+1. 사용자가 좌측 palette 에서 컴포넌트 (예: `table`, `stats`, `search`, `button`, `input`) 를 드래그
+2. canonical `container` 의 `containerType === "tabs"` 의 body (= `[data-tabs-container="true"]`) 위에 drop
+3. `handleComponentDrop` 이 tabsContainer 를 closest 로 찾고 `data-component-id` 로 container 인스턴스, `data-active-tab-id` 로 활성 탭 id 를 얻음
+4. layout.components 에서 container 인스턴스를 찾아 `componentType === "container"` + `componentConfig.containerType === "tabs"` 검증
+5. 새 child 객체 생성 후 `componentConfig.tabs[activeTabIdx].components` 끝에 push
+6. `setLayout` + `saveToHistory`
+7. ContainerComponent 가 next render 에서 새 child 까지 `DynamicComponentRenderer` 로 렌더 → 화면에 즉시 등장
+
+#### 새 자식 shape (드롭 시 생성)
+
+```ts
+{
+  id: `tab_comp_${Date.now()}_${rand}`,
+  componentType: <palette item id>,    // 예: "table", "stats", "search", "input"
+  label: <palette item name>,
+  position: { x, y },                  // ContainerChildComponent 는 사용 안 함. 향후 자유 배치 phase 용으로 보존
+  size: { width, height },             // ChildSlot 의 wrap 박스 폭/높이로 적용
+  componentConfig: <palette default>
+}
+```
+
+`ContainerChildComponent` (Phase G.2 정의) 는 `id / componentType / componentConfig / label / size` 만 필수로 사용. drop 결과의 `position` 은 forward-compat 으로 남겨두지만 G.2.5 에서는 무시. 캔버스 자유 배치 단계는 별도 phase.
+
+#### 자식 선택 / 삭제 동작
+
+- **선택**: 디자인 모드에서 자식 ChildSlot 클릭 → ChildSlot 의 onClick 이 `e.stopPropagation()` + `onSelectTabComponent(tabId, child.id, child)` 호출. ScreenDesigner 의 `handleSelectTabComponent` 가 `selectedTabComponentInfo` state 를 세팅하고 일반 `selectedComponent` 는 null 로 리셋 (기존 v2-tabs-widget 과 같은 동작)
+- **선택 식별**: `selectedTabComponentId` prop 으로 어떤 자식이 선택됐는지 ChildSlot 에 전달됨. 선택된 자식은 2px primary outline
+- **삭제**: 선택 / hover 시 우측 상단에 ✕ 버튼 표시. 클릭하면 `onUpdateComponent({...container, componentConfig: { ...컨피그, tabs: [...새tabs] }})` 호출. ScreenDesigner 의 `onUpdateComponent` (line 8327) 가 layout.components 를 갱신 + history 저장
+- **탭 body 빈 영역 클릭**: `onSelectTabComponent(tabId, "", null)` 으로 선택 해제 (기존 동작과 호환)
+
+#### Codex verification correction
+
+검증 중 확인된 작은 런타임 보정:
+- 탭 body 직접 배경 클릭뿐 아니라 dashed 빈 탭 안내 영역을 클릭해도 자식 선택이 해제되도록 body click 조건을 완화
+- ChildSlot 은 선택 click 에서 `stopPropagation()` 하므로 자식 선택 / 삭제와 선택 해제 동작은 충돌하지 않음
+
+#### Pointer events 처리
+
+디자인 모드에서 자식 (예: 테이블의 행 / 셀, 버튼) 의 자체 클릭 핸들러가 ChildSlot 의 선택 click 을 가로채지 않도록, 자식 컴포넌트를 감싸는 inner div 에 `pointer-events: none` 적용. 운영 모드에서는 `pointer-events: auto` 기본값. 결과:
+
+- 디자인 모드: 자식 어디를 클릭하든 ChildSlot 선택만 일어남
+- 운영 모드: 자식 자체가 정상 동작 (테이블 클릭 / 버튼 클릭 등)
+
+#### Verification
+
+| 항목 | 결과 |
+|---|---|
+| `git diff --check` | PASS |
+| `git diff --cached --check` | PASS |
+| `rg "v2-input\|v2-select\|V2InputRenderer\|V2SelectRenderer"` | 0 matches |
+| `rg "EntityPicker\|entity-picker\|EntitySearchModal"` (input + InvFieldConfigPanel) | 0 matches |
+| `rg "componentType: \"v2-file-upload\"\|..."` | 0 matches |
+| `tsc --noEmit` G.2.5 변경 파일 (`ContainerComponent.tsx`, `ScreenDesigner.tsx` 의 ~line 3858 영역) | 0 new errors |
+| `tsc --noEmit` 전체 | 3376 (G.1/G.2 종료 시점과 동일 — G.2.5 신규 0) |
+
+ScreenDesigner.tsx 의 기존 camelCase / snake_case · LayoutData / ComponentData 미스매치 에러들은 모두 G.2.5 작업 전부터 있던 것. 본 phase 가 introduce 한 것 없음.
+
+#### Remaining limitations
+
+1. **자식 속성 편집 UI** — 좌측 패널 (V2PropertiesPanel) 은 현재 `selectedComponent` 만 본다. 자식 선택 시 `selectedTabComponentInfo` 가 세팅되지만 우측 props panel 은 "캔버스에서 블록을 선택하세요" 로 비어 보임. **임시 운영 방법**:
+   - 자식 컴포넌트 자체의 props 를 바꾸려면 일단 자식 컨테이너 탭에서 ✕ 로 삭제 후 새로 drop 하거나
+   - 컨테이너를 클릭해 컨테이너 자체의 InvContainerConfigPanel 에서 탭 라벨 / 자식 개수 확인
+   - 향후 phase: V2PropertiesPanel 우측 분기에 `selectedTabComponentInfo` 케이스 추가 (기존 `{false && ...}` 로 비활성화된 좌측 panel 블록 (line ~7221) 의 패턴 그대로 우측에 이전). 별도 단일 phase 로 처리 권장
+2. **자식 reorder UI** — 자유 순서 변경 미지원. `tab.components` 의 push 순서 그대로 위→아래 vertical stack. 향후 드래그 reorder 또는 ▲▼ 버튼 추가 가능
+3. **자유 좌표 (position) 배치** — drop 좌표는 `position` 에 저장만 되고 ChildSlot 은 vertical stack 만. position 기반 자유 배치는 별도 phase
+4. **column / 테이블 컬럼 드래그 → 탭** — `handleDrop` 의 column 분기 (line ~4359) 는 아직 canonical container 의 탭 분기를 인식 안 함. 컬럼 drop 으로 자동 input 컴포넌트 생성은 별도 작업 (v2-tabs-widget 만 현재 지원)
+5. **section / accordion / repeater / conditional 모드** — drop wiring 은 tabs 만. 나머지 4 모드는 G.2 / G.2.5 범위 밖
+6. **DataPort 활성화 안 함** — G.0 결정대로 props 기반만. 차후 phase
+7. **`v2-tabs-widget` 마이그레이션 adapter** — 기존 스크린에 저장된 `v2-tabs-widget.TabItem.components: TabInlineComponent[]` 를 canonical `ContainerTab.components: ContainerChildComponent[]` 로 변환하는 adapter 는 미구현. `templateMigrate.ts` 의 `'v2-tabs-widget': 'container'` 매핑은 이미 있지만 components 배열 shape 차이 (`component_type` ↔ `componentType`) 는 그대로. canonical 컨테이너가 둘 다 읽을 수 있게 ChildSlot 의 컴포넌트 정규화가 snake_case + camelCase 둘 다 채워서 보내므로 표면적 동작은 OK. 명시 마이그 SQL 은 작성 금지 (G.0 원칙)
+
+#### Studio 에서 테스트하는 방법
+
+1. ScreenDesigner 진입 후 좌측 팔레트에서 "container" 컴포넌트를 캔버스에 drop
+2. 컨테이너 선택 → 우측 InvContainerConfigPanel ① 에서 "탭" 종류 선택 (CPVisualGrid 의 두 번째 카드)
+3. ② 유형별 설정 의 "탭 추가" 버튼으로 탭 3개 만들기 + 각 탭 라벨 변경 (예: "사원 목록 / 부서별 현황 / 근태 현황")
+4. 캔버스에서 탭 헤더 클릭 → 활성 탭 전환. 활성 탭 body 는 "탭이 비어 있습니다" dashed 영역
+5. 좌측 팔레트에서 `table` (또는 `stats` / `search` / `button` / `input`) 을 드래그 → 활성 탭 body 위에 drop
+6. 자식이 즉시 vertical stack 위에 등장 + 우측 InvContainerConfigPanel ② 의 탭 row 에 "(1개)" 뱃지 증가
+7. 다른 탭으로 전환 → 그 탭은 빈 dashed 영역. 첫 탭의 자식 mount 는 해제됨 (탭별 독립 확인)
+8. 5~7 반복 → 탭마다 다른 자식 배치
+9. 자식 hover → primary dashed outline + 우측 상단 ✕ 버튼. 자식 클릭 → primary solid outline (선택). ✕ 클릭 → 자식 삭제
+10. 운영 모드 / 미리보기 진입 시 자식이 실제 컴포넌트로 동작 (테이블이면 데이터 fetch 등). 디자인 모드 outline / ✕ 버튼은 자동 사라짐
+
+---
+
+### Phase G.2.6 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### 목적
+
+G.2.5 가 끝낸 "canonical container 탭 안에 컴포넌트 drop / 선택 / 삭제" 위에, **자식 컴포넌트를 클릭하면 우측 properties 패널 (V2PropertiesPanel) 이 그 자식의 설정을 보여주고 편집까지 가능** 하도록 wiring. 이제 자식이 일반 최상위 컴포넌트와 동일한 편집 UX 를 갖는다.
+
+#### 파일 rename 사실
+
+- 기존 빌더 컴포넌트 `frontend/components/screen/ScreenDesigner.tsx` 는 `InvyoneStudio.tsx` 로 rename 완료. 본 phase 가 작업한 파일은 **`InvyoneStudio.tsx`** 뿐. `ScreenDesigner_old.tsx` 는 legacy backup 이며 손대지 않음
+- `@/components/screen/ScreenDesigner` import 는 grep 0건이어야 함
+
+#### Changed files
+
+Frontend (Next / TS):
+- `frontend/components/screen/InvyoneStudio.tsx`
+  - 활성 우측 properties panel 분기 (line ~8782) 확장. 단일 `selectedComponent` 체크에서 **4-way branch** 로:
+    1. `selectedTabComponentInfo` → 탭 자식 어댑터 + 핸들러로 `V2PropertiesPanel` 렌더
+    2. `selectedPanelComponentInfo` → 분할 패널 자식 어댑터 + 핸들러
+    3. `selectedComponent` → 기존 동작
+    4. 둘 다 없으면 안내 메시지
+  - 새 inline 핸들러: `updateTabChildProperty / deleteTabChild / updatePanelChildProperty / deletePanelChild`. 모두 `setNestedValue` 로 깊은 path 안전 업데이트 + `saveToHistory(newLayout)` 호출
+- 기타 변경 없음. **disabled 좌측 패널 블록 (`{false && (...)}`) 은 그대로 비활성 유지**. 로직만 우측으로 이식
+
+Backend: 변경 없음.
+Documentation: 본 섹션 추가.
+
+#### 우측 properties 패널 선택 우선순위
+
+```
+selectedTabComponentInfo   (canonical container tabs / 옛 v2-tabs-widget 자식)
+      ↓ (있으면 stop)
+selectedPanelComponentInfo (split-panel left / right 자식)
+      ↓ (있으면 stop)
+selectedComponent          (최상위 컴포넌트)
+      ↓
+"캔버스에서 블록을 선택하세요" 안내
+```
+
+세 selection state 는 서로 배타적으로 관리됨:
+
+- `handleComponentSelect` (`InvyoneStudio.tsx:600`) — 최상위 컴포넌트 선택 시 `setSelectedTabComponentInfo(null)` + `setSelectedPanelComponentInfo(null)`
+- `handleSelectTabComponent` (line 618) — 탭 자식 선택 시 `setSelectedComponent(null)` + `setSelectedPanelComponentInfo(null)`
+- `handleSelectPanelComponent` (line 651) — 분할 패널 자식 선택 시 `setSelectedComponent(null)` + `setSelectedTabComponentInfo(null)`
+- 탭 자식 ChildSlot 또는 탭 body 빈 영역 click → `onSelectTabComponent(tabId, "", null)` → `selectedTabComponentInfo = null`. 다른 state 가 없으면 4번 분기 (안내)
+
+#### 자식 어댑터 shape
+
+`selectedTabComponentInfo.component` (또는 `selectedPanelComponentInfo.component`) 를 `V2PropertiesPanel` 이 기대하는 `ComponentData` 로 변환:
+
+```ts
+{
+  id: child.id,
+  type: "component",
+  componentType: child.componentType,  // "input" | "table" | "stats" | "search" | "button" | "container" | ...
+  label: child.label,
+  position: child.position ?? { x: 0, y: 0 },
+  size: child.size ?? { width: 200, height: 100 },
+  componentConfig: child.componentConfig ?? {},
+  style: child.style ?? {},
+}
+```
+
+canonical 컴포넌트 id (예: `input / table / stats / search / button / container`) 는 그대로 보존. `getComponentConfigPanel` 의 canonical id 매핑이 정상 동작하므로 추가 코드 없이 동작.
+
+#### Nested update path 처리
+
+`onUpdateProperty(componentId, path, value)` 가 깊은 path 를 받는다. `setNestedValue` 가 path 를 `.` split 해서 deep clone 위에 재할당. 예:
+
+- `label` → 단순 top-level key
+- `size.width` → `{ ...comp, size: { ...comp.size, width: value } }`
+- `componentConfig.title` → `{ ...comp, componentConfig: { ...comp.componentConfig, title: value } }`
+- `componentConfig.dataSource.tableName` → 깊이 3 path. 중간 객체 없으면 자동 생성
+- `style` (단일 키, 객체 통째 교체) → `path === "style"` 분기에서 `{ ...comp, style: value }`
+- `style.labelDisplay` → 깊이 2 path. 동일하게 처리
+
+탭 자식 / 분할 패널 자식 양쪽 모두 동일 `setNestedValue`. 자식 편집 UX 가 최상위 편집과 사실상 동일.
+
+#### Selection 동기화
+
+자식 컨피그 변경 후 `selectedTabComponentInfo.component` 도 동시에 갱신:
+
+```ts
+if (updatedTabs) {
+  const updatedComp = updatedTabs
+    .find(t => t.id === tabId)?.components
+    ?.find(c => c.id === componentId);
+  if (updatedComp) {
+    setSelectedTabComponentInfo(prev => prev ? { ...prev, component: updatedComp } : null);
+  }
+}
+```
+
+→ V2PropertiesPanel 이 다음 render 에서 갱신된 자식 데이터를 받음. onChange 가 panel 재렌더로 이어져도 "쓴 즉시 사라지는" 현상 없음.
+
+#### 삭제 핸들러
+
+자식 properties panel 의 휴지통 / 삭제 액션 → `deleteTabChild(componentId)` 또는 `deletePanelChild(componentId)`:
+
+1. 해당 `tab.components` (또는 `panel.components`) 에서 `c.id !== componentId` 만 남기는 `filter`
+2. 갱신된 컨테이너로 layout.components 업데이트
+3. `setSelectedTabComponentInfo(null)` (또는 panel 쪽) — selection 해제
+4. `saveToHistory(newLayout)`
+
+→ 자식이 즉시 사라지고 우측 패널이 안내 메시지로 복귀.
+
+ChildSlot 의 ✕ 버튼 (G.2.5) 은 별개 경로 — 컨테이너의 `onUpdateComponent` 를 직접 호출. 둘 다 같은 결과 (자식 제거 + 선택 해제). 동시 활성화돼도 race 없음 (둘 다 immutable update).
+
+#### 중첩 구조 (split-panel 안의 canonical container 탭)
+
+`selectedTabComponentInfo.parentSplitPanelId` + `parentPanelSide` 가 set 되어 있으면 자동으로 중첩 update 분기. canonical container 가 분할 패널의 leftPanel / rightPanel 안에 있어도 자식 properties 편집이 정상 작동. 옛 disabled 좌측 블록의 분기 패턴 그대로 이식.
+
+#### Verification
+
+| 항목 | 결과 |
+|---|---|
+| `git diff --check` | PASS |
+| `git diff --cached --check` | PASS |
+| `rg "v2-input\|v2-select\|V2InputRenderer\|V2SelectRenderer"` | 0 matches |
+| `rg "EntityPicker\|entity-picker\|EntitySearchModal"` (input + InvFieldConfigPanel) | 0 matches |
+| `rg 'componentType: "v2-file-upload"\|...'` | 0 matches |
+| `rg "@/components/screen/ScreenDesigner\|<ScreenDesigner\|export default function ScreenDesigner\|interface ScreenDesignerProps"` | 0 matches (rename 완료) |
+| `tsc --noEmit` G.2.6 변경 영역 (line 8782~9150) | 새 type 카테고리 0건. 기존 type debt 패턴 (TableInfo legacy vs canonical import 미스매치, `as ComponentData` 변환 경고) 만 callsite 수만큼 늘어남 |
+| `tsc --noEmit` 전체 | 3388 (G.2.5 종료 3376 + 12 callsite-증가) |
+
+12개의 새 에러 분해:
+- TableInfo `screen-legacy-backup` vs `table-management` import 불일치 — 새 V2PropertiesPanel 2개 callsite (tab child / panel child) 추가로 callsite 증가
+- `as ComponentData` 변환 경고 — tab / panel adapter 2개 위치
+- 기타 GroupState / 인접 미스매치 — pre-existing 동일 패턴
+
+→ 새 카테고리 0. 모두 pre-existing 패턴의 callsite 중복. 본 phase 에서 풀 수 있는 type debt 아님 (전역 import 정리 phase 필요).
+
+#### Studio 에서 테스트하는 방법
+
+1. ScreenDesigner (=InvyoneStudio) 진입 → 좌측 팔레트에서 `container` drop
+2. 컨테이너 선택 → 우측 InvContainerConfigPanel ① 에서 "탭" 카드 클릭
+3. "탭 추가" 로 탭 3개 만들기 + 라벨 변경 (예: "사원 목록 / 부서별 현황 / 근태 현황")
+4. 활성 탭 body 에 `table` / `stats` / `search` / `input` drop
+5. **자식 클릭 → 우측 패널이 즉시 그 자식의 설정 패널로 전환** (InvTableConfigPanel / InvStatsConfigPanel / InvSearchConfigPanel / InvFieldConfigPanel 등)
+6. 자식 설정 변경 (예: stats label 텍스트, table 컬럼, input placeholder, button 색) → 캔버스 자식 즉시 반영
+7. 다른 탭으로 전환 → 그 탭의 자식 mount 해제. 이전 탭 자식 설정은 보존
+8. 자식 선택 상태에서 우측 패널 휴지통 → 자식 삭제 + 우측 패널 안내 메시지 복귀
+9. 컨테이너 자체 (탭 헤더 영역) 클릭 → 우측 패널이 InvContainerConfigPanel 로 복귀 (자식 선택 해제됨)
+10. ✕ 버튼 (G.2.5) 도 그대로 동작 — 휴지통 vs ✕ 어느 쪽으로 삭제해도 같은 결과
+
+#### Remaining limitations
+
+1. **다중 선택** — 한 번에 한 자식만 선택. 다중 선택 + 일괄 편집은 별도 phase
+2. **자식 reorder / 드래그 위치 변경** — vertical stack 순서만. 자유 위치 / drag-reorder 미지원
+3. **컬럼 드래그 → 자식 input 자동 생성** — `handleDrop` 의 column 분기는 canonical container tabs 인식 X
+4. **section / accordion / repeater / conditional 자식 편집** — G.2.6 wiring 은 tabs / split-panel 만
+5. **자식 카피 / 클립보드** — `onCopyComponent` 는 tab/panel 자식 분기에서 전달 안 함. 자식 복제 UI 가 필요해지면 별도 작업
+6. **history scope** — saveToHistory 가 layout 단위로 동작. 자식 단일 변경도 layout 전체 snapshot 으로 history 추가. KPI 단위 자식 편집이 많아지면 history 메모리 증가 — 별도 최적화 (path-level diff) 필요할 수 있음
+7. **DataPortBus 비활성 유지** — Phase G.0 결정대로 props 기반만
+8. **type debt** — `tables` prop 의 TableInfo 두 import path 미스매치, ComponentData 변환 경고는 전역 type 정리 phase 에서 일괄 해결 권장. G.2.6 은 callsite 수를 늘렸지만 카테고리는 동일
+
+#### Codex verification correction
+
+검증 중 확인된 보정:
+- 새 우측 panel callsite 2곳(tab child / panel child)의 `V2PropertiesPanel` props 에서 기존 `TableInfo` import path 미스매치가 불필요하게 추가 노출되지 않도록 `tables/currentTable` 을 명시 캐스팅
+- tab/panel child adapter 의 `ComponentData` 변환도 `unknown as ComponentData` 로 명시해 rename 이후 전체 type debt 와 별개로 G.2.6 callsite 가 새 경고를 늘리지 않게 조정
+
+---
+
+### Phase G.3 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### 목적
+
+탭 안에서 사용할 범용 뷰 컴포넌트 중 **차트** 를 canonical 로 추가. G.2.5/G.2.6 위에서 사용자가 캔버스의 탭 자식으로 `chart` 를 drop → 우측 InvChartConfigPanel 에서 테이블 / groupBy / 집계 / 필터 설정 → recharts 로 즉시 렌더. HR 전용 코드 없음. 모든 도메인 (부서별 인원 / 매출 / 재고 / 사용자 상태 등) 에 재사용 가능.
+
+`cardList / groupedTable / searchFilter` 는 본 phase 범위 밖으로 분리 → **G.3.1 (cardList)** 로 별도 표시.
+
+#### Changed files
+
+Backend (Java / Spring):
+- `backend-spring/src/main/java/com/erp/service/TableManagementService.java` — `aggregateTableGroup(tableName, options)` 신규 메서드 추가
+- `backend-spring/src/main/java/com/erp/controller/TableManagementController.java` — `POST /api/table-management/tables/{tableName}/aggregate-group` endpoint 추가
+
+Frontend (Next / TS) — 신규:
+- `frontend/lib/registry/components/chart/types.ts` — `ChartType / ChartDataSource / ChartConfig`
+- `frontend/lib/registry/components/chart/use-chart-data.ts` — runtime fetch hook (preview / cache / race guard / error 격리)
+- `frontend/lib/registry/components/chart/ChartComponent.tsx` — recharts 위 4종 (`bar` / `horizontalBar` / `line` / `donut`)
+- `frontend/lib/registry/components/chart/ChartRenderer.tsx` — `AutoRegisteringComponentRenderer` 자가등록
+- `frontend/lib/registry/components/chart/index.ts` — `ChartDefinition` (`createComponentDefinition`)
+- `frontend/lib/registry/components/chart/InvChartConfigPanel.tsx` — cp 시스템 4-section 패널
+
+Frontend (Next / TS) — 수정:
+- `frontend/lib/api/stats.ts` — `aggregateTableGroup(tableName, request)` + `AggregateGroupRequest / AggregateGroupRow / AggregateGroupResponse` 타입 추가
+- `frontend/lib/registry/components/index.ts` — `import "./chart/ChartRenderer";` 한 줄 추가
+- `frontend/lib/utils/getComponentConfigPanel.tsx` — `"chart" / "chart-basic"` CONFIG_PANEL_MAP 엔트리를 옛 `components/screen/config-panels/ChartConfigPanel` 에서 새 canonical `lib/registry/components/chart/InvChartConfigPanel` 로 재매핑
+- `frontend/components/screen/panels/ComponentsPanel.tsx` — `BASIC_IDS` Set 에 `"chart"` 추가 → 팔레트의 "기본" 탭에 노출
+
+Documentation: 본 섹션 추가.
+
+#### Backend endpoint contract
+
+```
+POST /api/table-management/tables/{tableName}/aggregate-group
+{
+  "aggregation": "count" | "sum" | "avg" | "min" | "max" | "distinctCount",
+  "groupBy": "status",
+  "valueColumn": "amount" | undefined,
+  "filters": [{ "column", "operator", "value" }] | [],
+  "limit": 12,
+  "orderDir": "desc" | "asc"
+}
+→ ApiResponse<{ rows: [{ group, value }, ...] }>
+```
+
+검증:
+- `sanitize` + `hasColumn` 으로 식별자 안전성 (테이블 / groupBy / valueColumn 모두)
+- `count` 외 집계는 `valueColumn` 필수 — 없으면 400
+- `sum / avg` 만 `CAST(col AS NUMERIC)` 자동 변환 (text 컬럼도 안전)
+- `filters` 는 `/aggregate` 와 동일한 11종 operator (`=, !=, >, <, >=, <=, like, in, notIn, isNull, isNotNull`). 같은 `buildAggregateWhere` 헬퍼 공유
+- `limit` 은 1~500 (기본 50, chart 기본 12)
+- 결과 정렬: `ORDER BY agg_value <orderDir> NULLS LAST`. 큰 그룹부터 (기본 desc) 또는 작은 그룹부터
+
+#### Frontend runtime behavior
+
+ChartComponent 가 `useChartData(dataSource, { isDesignMode, formData, userContext, refreshKey, includeEmptyGroup })` 를 호출:
+
+- **디자인 모드**: API 호출 0. 정적 preview 4 row (`{ A:28, B:19, C:12, D:6 }`) 만 그려서 차트 모양 미리보기
+- **dataSource 미완성** (테이블 / groupBy 없음 또는 valueColumn 누락 시): 같은 preview 로 fallback. `isPreview === true` flag
+- **운영 모드 + 완성된 dataSource**: `/aggregate-group` 호출. request key 캐시 (같은 호출 중복 0). version counter race guard
+- **실패**: 카드 자체가 죽지 않고 "데이터 로드 실패: <message>" 표시
+- **빈 그룹** (`group === null || group === ""`): 기본은 필터 아웃. `includeEmptyGroup: true` 면 "—" 라벨로 표시
+- `OptionFilter.value_type` 의 `field` / `user` 는 hook 안에서 `formData` / `userContext` 로 미리 치환 (stats 와 동일 패턴). 컨텍스트 누락 시 preview 모드로 유지
+
+#### Config panel UX
+
+4-section 흐름:
+
+1. **① 기본** — 제목 + 차트 종류 (CPVisualGrid 4종: bar / horizontalBar / line / donut, 아이콘 포함)
+2. **② 데이터 소스** — 테이블 (CPSelect, `useDbTables`) / 그룹 컬럼 / 집계 / 값 컬럼 (count 외만 노출)
+3. **③ 필터** — `OptionFilter` 빌더 (stats 의 FilterRow 와 동일 패턴, column / operator / value_type / value). `isNull / isNotNull` 일 때 값 입력 숨김
+4. **④ 표시 옵션** — 최대 그룹 (CPNumber 1~500) / 정렬 (CPSegment) / 빈 그룹 포함 (CPSwitch) / 축 표시 (CPSwitch) / donut 면 범례 표시, bar·line 이면 막대·선 색
+
+#### Verification
+
+| 항목 | 결과 |
+|---|---|
+| `git diff --check` | PASS |
+| `git diff --cached --check` | PASS |
+| `cd backend-spring && ./gradlew compileJava` | BUILD SUCCESSFUL in 3s |
+| `rg "v2-input\|v2-select\|V2InputRenderer\|V2SelectRenderer"` | 0 matches |
+| `rg "EntityPicker\|entity-picker\|EntitySearchModal"` (input + InvFieldConfigPanel) | 0 matches |
+| `rg 'componentType: "v2-file-upload"\|...'` | 0 matches |
+| `rg "@/components/screen/ScreenDesigner\|<ScreenDesigner\|export default function ScreenDesigner\|interface ScreenDesignerProps"` | `ScreenDesigner_old.tsx` 만 매치 (legacy backup, 활성 import 0건) |
+| `tsc --noEmit` G.3 변경 파일 한정 (`chart/`, `lib/api/stats.ts`, `getComponentConfigPanel.tsx`) | 0 errors |
+| `tsc --noEmit` 전체 | 3376 (G.2.6 종료 3388 → **-12**). 옛 `components/screen/config-panels/ChartConfigPanel` 가 더 이상 lazy-load 의존되지 않아 그 안의 type debt 가 사라짐 |
+
+CPSwitch API 미스매치 (initial pass `checked / onCheckedChange` → 실제는 `value / onChange`) 는 첫 tsc 에서 발견 후 fix. 최종 한 번에 0건.
+
+#### Studio 에서 테스트하는 방법
+
+1. ScreenDesigner (=InvyoneStudio) 진입 → 좌측 팔레트에서 `container` drop → 컨테이너 선택 → "탭" 타입 + 탭 3개 ("사원 목록 / 부서별 현황 / 근태 현황")
+2. "부서별 현황" 탭 활성 후 body 위에 좌측 팔레트의 `chart` (기본 그룹) drop
+3. 자식 차트 클릭 → 우측 패널이 InvChartConfigPanel 로 전환
+4. ① 에서 종류 "막대" 선택
+5. ② 테이블 = `user_info` (예시), 그룹 컬럼 = `dept_code`, 집계 = `건수`, 값 컬럼 = 빈칸 (count 면 불필요)
+6. ② 의 입력 끝나는 순간 캔버스 차트가 정적 preview 에서 실제 데이터로 전환
+7. ④ 표시 옵션에서 정렬 = "값 큰 순", 최대 그룹 = 6 으로 줄이면 즉시 반영
+8. 다른 탭으로 전환 → 차트 mount 해제. 돌아오면 같은 데이터로 다시 fetch (캐시 hit). refreshKey 없으니 자연스러움
+9. 새 탭에 `table` drop → 같은 방식으로 컬럼 / 테이블 / 필터 설정. 차트와 테이블이 독립적으로 자기 데이터 fetch — 서로 영향 없음
+10. 운영 모드 / 미리보기 진입 시 chart / table 모두 실제 데이터로 동작
+
+#### Remaining limitations
+
+1. **cardList / groupedTable / searchFilter 미구현** → **G.3.1** 로 분리 권장. canonical `table` + `search` 가 일부 기능 흡수 가능하지만 카드 그리드형 / 날짜 그룹 row 같은 특수 view 는 별도 컴포넌트가 깔끔
+2. **컬럼 선택 dropdown 미지원** — chart 의 `groupBy / valueColumn` 은 free text. 테이블 선택 후 컬럼 자동완성은 stats 와 마찬가지로 후속 작업 (`tableManagementApi.getColumnList` 재사용)
+3. **시계열 정렬** — line chart 의 X 축은 `groupBy` 컬럼 값 순서가 아니라 집계 값 순서 (`orderDir`) 로 정렬됨. 시계열 차트는 `groupBy` 가 날짜 컬럼일 때 `orderDir: "asc"` 로 사용 권장. 진짜 시계열 (period 그룹화 + xy 정렬) 은 별도 phase
+4. **다중 측정값 (stacked / grouped bar)** — 현재는 단일 measure. 한 차트에 여러 값 비교는 별도 phase
+5. **drill-down / 클릭 인터랙션** — chart 클릭 시 DataPort 로 selectedGroup 발행 등은 G.0 결정대로 미활성
+6. **차트 라벨 i18n** — 그룹값이 null / "" 면 "—" 로 표시. 다국어 문구 키는 별도 일관 정리 필요
+7. **자동 갱신 / polling** — `refreshKey` 변경 시 재호출. 주기 polling 미지원
+8. **palette 노출 시 alias 미설정** — `chart-basic` 은 ConfigPanelMap 에는 같이 매핑되지만, 옛 placeholder `frontend/lib/registry/components/ChartRenderer.tsx` (legacy registry 의 `componentRegistry.register("chart", ...)`) 는 import 되지 않으므로 충돌 0. 향후 정리 phase 에서 placeholder 파일 자체 삭제 권장
+
+#### Codex verification correction
+
+검증 중 확인된 보정:
+- `/aggregate-group` 의 `filters` 처리도 `/aggregate` 와 같은 `normalizeAggregateFilters` 경로로 변경. 잘못된 payload / non-map 항목이 섞여도 `ClassCastException` 으로 500 이 나지 않고 안전하게 normalize/skip 된다.
+
+#### G.3.1 후속 (별도 phase)
+
+- **cardList** — 같은 `/aggregate-group` 또는 `/data` 응답을 카드 그리드로. titleField / subtitleFields / metricFields config. 부서별 카드 + 우측 액션 버튼 등 가벼운 wrapper
+- **groupedTable** — `/data` 응답을 클라이언트 측에서 `groupBy` 로 묶어 날짜 / 부서 단위 row 헤더 + 안쪽 row 들 (근태 현황 화면 검증용)
+- **searchFilter 통합** — canonical `search` 가 이미 일부 흡수. 탭 별 filter 와 dataSources 의 wiring 은 G.4 인사 관리 화면 검증과 함께 진행
+
+---
+
+### Phase G.3.1 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### 목적
+
+G.3 차트 위에 **카드 리스트 (`card-list`)** 와 **그룹 테이블 (`grouped-table`)** canonical 컴포넌트 두 개를 추가. 부서 / 사용자 / 품목을 카드 카탈로그로 보거나, 근태 / 일자별 / 카테고리별처럼 row 를 묶어 보는 일반화된 view 컴포넌트. HR 전용 코드 0건. 모든 도메인 (인사 / 영업 / 재고 / CRM) 재사용 가능.
+
+#### Changed files
+
+Backend (Java / Spring):
+- `backend-spring/src/main/java/com/erp/service/TableManagementService.java` — `selectTableRows(tableName, options)` 신규 메서드. sanitize / hasColumn / `buildAggregateWhere` 재사용
+- `backend-spring/src/main/java/com/erp/controller/TableManagementController.java` — `POST /api/table-management/tables/{tableName}/select-rows` endpoint
+
+Frontend (Next / TS) — 신규:
+- `frontend/lib/registry/components/_shared/use-table-rows.ts` — card-list / grouped-table 공유 fetch hook (preview / cache / race guard / OptionFilter 치환)
+- `frontend/lib/registry/components/_shared/FilterRow.tsx` — stats / chart / cardList / groupedTable 공유 OptionFilter 빌더 row (`OptionFilterRow`)
+- `frontend/lib/registry/components/card-list/types.ts` — `CardListConfig / CardListLayout / CardListMetric / CardListDataSource`
+- `frontend/lib/registry/components/card-list/CardListComponent.tsx` — list / grid 두 레이아웃, title/subtitles/metrics 조합
+- `frontend/lib/registry/components/card-list/CardListRenderer.tsx` — 자가 등록
+- `frontend/lib/registry/components/card-list/index.ts` — `CardListDefinition`
+- `frontend/lib/registry/components/card-list/InvCardListConfigPanel.tsx` — cp 4-section
+- `frontend/lib/registry/components/grouped-table/types.ts` — `GroupedTableConfig / GroupedTableColumn / GroupedTableDataSource`
+- `frontend/lib/registry/components/grouped-table/GroupedTableComponent.tsx` — table + 그룹 헤더 row
+- `frontend/lib/registry/components/grouped-table/GroupedTableRenderer.tsx` — 자가 등록
+- `frontend/lib/registry/components/grouped-table/index.ts` — `GroupedTableDefinition`
+- `frontend/lib/registry/components/grouped-table/InvGroupedTableConfigPanel.tsx` — cp 5-section
+
+Frontend (Next / TS) — 수정:
+- `frontend/lib/api/stats.ts` — `selectTableRows(tableName, request)` + `SelectRowsRequest / SelectRowsOrderBy / SelectRowsResponse` 타입 추가
+- `frontend/lib/registry/components/index.ts` — `card-list` / `grouped-table` renderer 두 import 추가
+- `frontend/lib/utils/getComponentConfigPanel.tsx` — `"card-list"` / `"grouped-table"` CONFIG_PANEL_MAP 엔트리
+- `frontend/components/screen/panels/ComponentsPanel.tsx` — `BASIC_IDS` Set 에 `"card-list"` / `"grouped-table"` 추가
+
+Documentation: 본 섹션 추가.
+
+#### Backend endpoint contract
+
+```
+POST /api/table-management/tables/{tableName}/select-rows
+{
+  "columns": ["user_name", "dept_code", ...],           // 비우면 SELECT *
+  "filters": [{ column, operator, value }],
+  "orderBy": [{ column, direction: "asc" | "desc" }],   // 비우면 created_date desc (있을 때)
+  "limit": 50,                                          // 기본 50, 최대 500
+  "offset": 0
+}
+→ ApiResponse<{ rows: [{...}, ...] }>
+```
+
+검증:
+- `sanitize` + `hasColumn` 식별자 안전성 (table / columns / filter columns / orderBy columns 모두)
+- 없는 컬럼은 자동 drop (`columns` 중 일부만 유효하면 유효한 것만 SELECT, orderBy 도 마찬가지)
+- `filters` 는 `/aggregate` / `/aggregate-group` 와 동일한 11종 operator. `buildAggregateWhere` 공유 헬퍼
+- 값은 JdbcTemplate `?` 파라미터 바인딩만. 식별자에 raw input 안 들어감
+- `limit` 1~500 (기본 50), `offset` ≥ 0
+- 잘못된 tableName → `IllegalArgumentException` → 400
+
+#### Frontend runtime — useTableRows
+
+shared hook `_shared/use-table-rows.ts` 를 card-list / grouped-table 둘이 공유:
+
+- **디자인 모드**: API 호출 0. `previewBuilder?` 로 컴포넌트별 맞춤 preview row 4~6장 생성
+- **dataSource 미완성** (`tableName` 없음): 같은 preview 로 fallback. `isPreview === true`
+- **운영 모드**: `/select-rows` 호출. request key 캐시 (`tableName + columns + filters + orderBy + limit` stringify) — 같은 호출 중복 0
+- **race guard**: version counter 로 stale response 무시
+- **실패**: throw 안 하고 `error` state 반환. 각 컴포넌트가 fallback 메시지 표시
+- **filter resolver**: `OptionFilter.value_type === "field" | "user"` → hook 내부에서 `formData` / `userContext` (companyCode, userId, deptCode, userName) 로 치환. 컨텍스트 누락 시 preview 모드로 폴백
+
+#### card-list (id `"card-list"`)
+
+- 레이아웃: `list` (한 줄 카드, 우측 metric 정렬) 또는 `grid` (auto-fit, 200px 최소폭)
+- 필드 매핑: `titleField` (위 큰 글씨) + `subtitleFields[]` (라인별 작은 글씨) + `metricFields[]` (`{ column, label?, emphasis? }`)
+- `emphasis: true` → metric 칩이 primary 색 강조 (`var(--v5-primary)`)
+- 빈 결과 / 에러 메시지 customizable (`emptyText`)
+
+#### grouped-table (id `"grouped-table"`)
+
+- 컬럼 정의: `GroupedTableColumn[] = { column, label?, width?, align? }`. 비우면 row 첫 항목의 모든 키 자동 표시 (`groupBy` 자체 제외, `__` prefix 키 제외)
+- 클라이언트 측 group-by: `Map<key, row[]>` 으로 묶음 + `sortGroups: "none" | "asc" | "desc"` (한국어 collator)
+- 그룹 헤더: primary 색 라벨 + `(N건)` 카운트
+- `cellToText` 헬퍼: `null/undefined/""` → `"—"`, `number` → `toLocaleString`, `boolean` → `✓/✗`, `Date` → `toLocaleString`
+
+#### Config panel UX
+
+`OptionFilterRow` 공유 컴포넌트로 stats / chart / cardList / groupedTable 4 패널이 같은 필터 빌더 사용. 기존 stats / chart 의 inline FilterRow 와 정확히 동일 UX (column / operator / value_type / value, `isNull/isNotNull` 일 때 값 입력 숨김).
+
+cardList 패널 (4-section):
+1. ① 기본 — 제목 + 레이아웃 (CPSegment) + grid 컬럼 수 + 빈 결과 문구
+2. ② 데이터 소스 — 테이블 (CPSelect) / 정렬 컬럼 / 정렬 방향 / 최대 행
+3. ③ 필드 매핑 — 제목 컬럼 + 부제 컬럼 N개 + metric 칩 N개 (column / label / emphasis switch)
+4. ④ 필터 — OptionFilterRow 빌더
+
+groupedTable 패널 (5-section):
+1. ① 기본 — 제목 / 빈 결과
+2. ② 데이터 소스 — 테이블 / 정렬 / 최대 행
+3. ③ 그룹 — groupBy 컬럼 / 그룹 정렬 (원본 / 오름 / 내림)
+4. ④ 컬럼 — 표시 컬럼 목록 (column / label / width / align)
+5. ⑤ 필터
+
+#### Verification
+
+| 항목 | 결과 |
+|---|---|
+| `git diff --check` | PASS |
+| `git diff --cached --check` | PASS |
+| `cd backend-spring && ./gradlew compileJava` | BUILD SUCCESSFUL in 1s |
+| `rg "v2-input\|v2-select\|V2InputRenderer\|V2SelectRenderer"` | 0 matches |
+| `rg "EntityPicker\|entity-picker\|EntitySearchModal"` (input + InvFieldConfigPanel) | 0 matches |
+| `rg 'componentType: "v2-file-upload"\|...'` | 0 matches |
+| `rg "@/components/screen/ScreenDesigner\|..."` | `ScreenDesigner_old.tsx` 만 (legacy backup, 활성 import 0) |
+| `tsc --noEmit` G.3.1 변경 파일 한정 | 0 errors |
+| `tsc --noEmit` 전체 | 3376 (G.3 종료와 동일 — G.3.1 신규 0건) |
+
+#### Codex verification follow-up
+
+검증 중 발견한 운영 리스크 2건을 같은 Phase G.3.1 범위 안에서 보정:
+
+- `selectTableRows` 의 `filters` / `orderBy` 입력을 unchecked cast 대신 `normalizeAggregateFilters(...)` 로 정규화. 잘못된 shape 가 들어와도 `ClassCastException` 으로 500 이 나지 않고, 유효한 map 항목만 처리된다.
+- `card-list` / `grouped-table` 의 `previewBuilder` 를 `useCallback` 으로 고정. 디자인 모드 또는 dataSource 미완성 상태에서 preview row 재생성 → effect 재실행 → state update 반복으로 이어질 수 있는 루프를 차단했다.
+
+#### Studio 에서 테스트하는 방법
+
+1. ScreenDesigner (=InvyoneStudio) 진입 → 좌측 팔레트에서 `container` drop → containerType "탭" + 탭 3개 ("사원 목록 / 부서별 현황 / 근태 현황")
+2. **"부서별 현황" 탭** 활성 → 좌측 팔레트 `chart` drop → 클릭하면 우측 InvChartConfigPanel. ② 에서 테이블 = `user_info`, 그룹 컬럼 = `dept_code`, 집계 = `건수` → 즉시 막대 차트
+3. 같은 탭에 추가로 `card-list` drop → 우측 InvCardListConfigPanel. ② 테이블 = `dept_info` (예시), 정렬 = `dept_name asc`, 최대 = 20. ③ 제목 컬럼 = `dept_name`, 부제 = `[dept_code]`, metric = `[{column: "head_count", label: "인원", emphasis: true}]` → 부서 카드 카탈로그
+4. **"근태 현황" 탭** 활성 → `grouped-table` drop → 우측 InvGroupedTableConfigPanel. ② 테이블 = `attendance`, 정렬 = `attendance_date desc`. ③ 그룹 = `attendance_date`, 그룹 정렬 = `desc`. ④ 컬럼 = `[{column: "user_name", label: "사원"}, {column: "check_in", label: "출근"}, {column: "check_out", label: "퇴근"}, {column: "work_hours", label: "근무시간", align: "right"}]` → 날짜별 그룹 row + 안쪽 사원 row
+5. 탭 전환 → 각 탭의 컴포넌트가 독립적으로 mount/unmount, 데이터 서로 영향 없음
+6. 운영 모드 / 미리보기 진입 시 chart / card-list / grouped-table 모두 실 데이터로 동작
+
+#### Remaining limitations
+
+1. **컬럼 자동완성 dropdown 미지원** — card-list / grouped-table 의 columns / groupBy / orderBy 컬럼은 모두 free text. `tableManagementApi.getColumnList` 활용은 후속 phase 일괄 처리 권장 (stats / chart 도 동일 한계)
+2. **server-side 페이지네이션 / 무한 스크롤** — card-list / grouped-table 모두 `limit` 으로 첫 N행만 가져옴. 페이지네이션 UI 는 별도 (Phase G.4 이후)
+3. **drill-down / 클릭 인터랙션** — 카드 / 그룹 row 클릭 시 DataPort publish 등은 G.0 결정대로 미활성
+4. **grouped-table 의 그룹 접기/펼치기** — 항상 펼침. collapse 토글은 별도 작업
+5. **그룹 헤더 집계 (sum / avg)** — 현재 그룹 헤더는 `(N건)` 카운트만. 그룹 별 column 합계 / 평균 표시는 후속
+6. **i18n** — `"데이터 없음"`, `"건"`, `"미리보기"` 등 한국어 fixed. 다국어는 별도 일관 작업
+7. **자동 갱신** — `refreshKey` 변경 시 재호출. polling 미지원
+8. **자식의 자유 위치** — canonical container 탭 안에서 자식 컴포넌트는 vertical stack 만. position.x/y 무시 (G.2.5 결정 유지)
+
+#### 다음 권장 단계
+
+- **Phase G.4 인사 관리 화면 검증** — canonical stats / chart / card-list / grouped-table / table / search / button / input 만으로 인사 관리 예시 화면 (상단 통계 카드 4 + 사원 목록 탭 + 부서별 현황 탭 + 근태 현황 탭) 재현. 화면 이름과 예시 데이터는 인사 관리여도 구현은 범용 유지
+- **Phase G.5 Legacy Cleanup** — `frontend/lib/registry/components/ChartRenderer.tsx` placeholder, `frontend/components/screen/config-panels/ChartConfigPanel.tsx` 옛 placeholder, `v2-aggregation-widget` / `v2-status-count` / `v2-tabs-widget` 등 alias-only legacy 폴더 일괄 제거 검토
+
+---
+
+### Phase G.4.1 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### 목적
+
+canonical `stats` 항목 편집 UX 가 정적 카드 가정으로 동작해, DB-bound KPI 카드 (`전체 사원 / 재직 중 / 휴직 중 / 겸직 현황`) 에 부적합. 사용자가 값을 직접 타이핑하고 변화량 (delta) 까지 필수처럼 강요되는 인상을 줌. G.4.1 은 stats 의 **편집 UX 를 DB-first** 로 정리. 정적 fallback 은 보존하되 보조 자리로 내림.
+
+#### Changed files
+
+Frontend (Next / TS):
+- `frontend/lib/registry/components/stats/InvStatsConfigPanel.tsx` — 항목 row 재설계
+  - 단일 sourceTable 데이터 소스 섹션 ②, "변화량" 메인 row 제거
+  - collapsed row 에 **DB / 정적 모드 뱃지 (`ModeBadge`)** 추가. 클릭 1번으로 모드 전환
+  - DB 모드: collapsed 에서 값 입력 숨김, expanded 에서 DB 바인딩 (테이블 / 집계 / 컬럼 / 필터) 우선 표시
+  - 정적 모드: collapsed 에서 fallback 값 입력 보임, expanded 에서 "정적 값" 박스로 명확화
+  - 외형 (아이콘 / 색) 은 양쪽 공통 박스
+  - **비교 / 변화량** 은 expanded 안의 접기-펼치기 sub-section, 기본 닫힘. `item.delta` 비우면 카드에 비표시
+  - local `FilterRow` 제거, 공유 `OptionFilterRow` (`_shared/FilterRow`) 사용
+  - `addItem` 의 default `value: 0` 제거 → label 만 가진 빈 항목 (DB 모드 전환 후 자연스럽게 "—" 표시)
+  - 색상 프리셋이 항목 4개 자동 생성할 때도 `value: 0` 박지 않음
+- `frontend/lib/registry/components/stats/StatsComponent.tsx` — runtime fallback 의미 정리
+  - default items 도 `value: 0` 제거 (label 만)
+  - `displayValue` 결정: DB-bound + fetch 미완 / 디자인 모드 → `item.value !== undefined ? formatValue(item.value) : "—"`. 강제 `value ?? 0` 제거
+  - 정적 모드도 동일하게 명시 안 한 값은 "—". lucide icon 렌더링 (`renderIcon`) 보존
+- Documentation: 본 섹션 추가.
+
+Backend / API 변경 없음.
+
+#### UX 의 새 의미 (한국어 정리)
+
+| 모드 | 의미 | collapsed row | expanded 우선 표시 |
+|---|---|---|---|
+| **DB** | 값은 DB 집계로 자동 계산. 정적 입력 없음. | 번호 · 색점 · 라벨 · `[DB]` 뱃지 (primary) · 펼침 · 삭제 | DB 바인딩 (테이블 / 집계 / 컬럼 / 필터) → 외형 → 비교/변화량 (옵션) |
+| **DB (테이블 미설정)** | DB 모드 토글했지만 테이블 미선택 — 디자인 모드 "—" 표시 | `[DB]` 뱃지가 amber + tooltip 안내 | DB 바인딩 헤더에 "테이블 미설정" 라벨 |
+| **정적** | DB 미사용. 사용자 입력 값 또는 미입력 시 "—". | 번호 · 색점 · 라벨 · `[정적]` 뱃지 · fallback 값 input · 펼침 · 삭제 | "정적 값" 박스 → 외형 → 비교/변화량 (옵션) |
+
+- 변화량 (`item.delta`) 은 어디서도 "필수" 같지 않음. expanded 안에서 접혀 있고, 비우면 카드에 아무 줄도 안 그려짐
+- StatsComponent 렌더 조건은 그대로 `item.delta && <span>...</span>`
+
+#### 인사 관리 KPI 카드 4개 설정 예시 (도메인 hardcode 0건)
+
+각 카드는 **DB 모드** + `user_info` / `user_dept_role` 테이블 + count 기반. 화면 / 데이터는 인사 관리 예시지만 구현은 범용:
+
+| 카드 라벨 | DB / 정적 | 테이블 | 집계 | 컬럼 | 필터 |
+|---|---|---|---|---|---|
+| 전체 사원 | DB | `user_info` | 건수 | (생략) | (없음) — 테이블 전체 row 카운트 |
+| 재직 중 | DB | `user_info` | 건수 | (생략) | `status = "재직"` (value_type=static) |
+| 휴직 중 | DB | `user_info` | 건수 | (생략) | `status = "휴직"` (value_type=static) |
+| 겸직 현황 | DB | `user_dept_role` | 고유 | `user_id` | (없음) — distinctCount(user_id) |
+
+설정 흐름:
+1. 컨테이너 / 탭 위에 `stats` drop → 우측 InvStatsConfigPanel 진입
+2. ④ 항목 list 의 `[+ 추가]` 로 항목 1개 생성 → 라벨 "전체 사원" 입력
+3. collapsed row 의 `[정적]` 뱃지 클릭 → `[DB]` 로 전환 (primary 색)
+4. row 펼치기 → DB 바인딩 박스에서 테이블 = `user_info`, 집계 = `건수`
+5. 항목 추가 후 "재직 중" 라벨 + DB 뱃지 + 펼침 → 같은 테이블 / 집계 + 필터 `+ 추가` → `column="status", operator="=", value_type=고정값, value="재직"`
+6. "휴직 중" 동일, `value="휴직"`
+7. "겸직 현황" → DB 모드 + `user_dept_role` + 집계 = `고유` + 컬럼 = `user_id`. 필터 없음 → distinctCount
+8. 어떤 카드에도 정적 값 / 변화량 강제 노출 없음. 디자인 모드에서는 fetch 안 함 → "—" 표시. 운영 모드 진입 시 실 DB 값으로 자동 채워짐
+
+다른 도메인 예 (영업 / 재고):
+- `매출 합계` = sum / `orders.amount` / filter `status="completed"`
+- `재고 부족` = count / `stock` / filter `quantity < 10`
+
+같은 패턴 — 도메인 hardcode 0건.
+
+#### Verification
+
+| 항목 | 결과 |
+|---|---|
+| `git diff --check` | PASS |
+| `git diff --cached --check` | PASS |
+| `rg "v2-input\|v2-select\|V2InputRenderer\|V2SelectRenderer"` | 0 matches |
+| `rg "EntityPicker\|entity-picker\|EntitySearchModal"` | 0 matches |
+| `rg 'componentType: "v2-file-upload"\|...'` | 0 matches |
+| `tsc --noEmit` G.4.1 변경 파일 한정 (`stats/`, `_shared/`) | 0 new errors |
+| `tsc --noEmit` 전체 | 3376 (G.3.1 종료와 동일 — G.4.1 신규 0건) |
+
+#### Codex verification follow-up
+
+검증 중 실제 생성 경로의 잔여 `0` 기본값을 추가 보정:
+
+- `frontend/lib/registry/components/stats/index.ts` 의 `StatsDefinition.default_config.items` 에 남아 있던 `value: 0` 제거. 새 `stats` 컴포넌트를 드롭할 때부터 강제 0 값이 들어가지 않는다.
+- 기본 아이콘은 문자열로 보이는 이모지 대신 lucide 이름 (`BarChart3`, `TrendingUp`, `DollarSign`) 으로 정리. `StatsComponent.renderIcon` 경로에서 SVG 로 표시된다.
+
+#### Remaining limitations
+
+1. **컬럼 자동완성 dropdown 미지원** — DB 모드의 `컬럼` 입력은 여전히 free text. stats / chart / cardList / groupedTable 공통 — `tableManagementApi.getColumnList` dropdown 일괄 도입은 별도 phase
+2. **`distinctCount` 컬럼 미설정 inline 안내** — 현재는 백엔드 400 으로만 알려줌. config panel 측 inline error highlight 는 후속
+3. **DB 모드 fallback 값 UI** — DB 모드의 정적 fallback (운영 모드 fetch 실패 시 보임) 입력은 현재 collapsed 에서 숨김. 필요해지면 expanded DB 바인딩 박스 안에 추가 노출 검토
+4. **delta 자동 계산** — `delta` 는 여전히 수동 입력. "DB 에서 전월 대비 자동 계산" 같은 시스템은 별도 phase
+5. **i18n** — `"DB"`, `"정적"`, `"비교 / 변화량"` 한국어 fixed. 다국어는 전역 i18n phase 와 함께
+
+---
+
+### Phase G.4.2 Progress
+
+작업일: 2026-05-14. 브랜치 `gbpark-node`.
+
+#### 목적
+
+G.4.1 의 DB/정적 두-모드 토글 UX 도 여전히 잘못된 멘탈 모델. stats 는 **KPI / 집계** 컴포넌트이므로 "정적 값 카드 vs DB 카드" 이분법이 부적절. G.4.2 는 stats 의 편집 UX 와 default 를 **완전히 DB-first** 로 재설계. fallback value / 변화량은 "고급" 섹션 안의 보조 옵션으로만 남김.
+
+#### Changed files
+
+Frontend (Next / TS):
+- `frontend/lib/registry/components/stats/InvStatsConfigPanel.tsx` — 전면 재작성
+  - `ModeBadge` (DB / 정적 토글) 완전 제거
+  - collapsed KPI row: 번호 · 색점 · 라벨 · **테이블 inline select** · **집계 inline select** · **필터 개수 뱃지** · 펼침 · 삭제
+  - 테이블 미선택 시 inline select 가 amber 보더 + tooltip "테이블 미설정"
+  - expanded: flat CP rows. `SectionLabel` + `CPRow` 만, 카드-속-카드 X
+    - **데이터** (테이블 / 집계 / 컬럼 when needed)
+    - **필터** (`OptionFilterRow` 리스트)
+    - **외형** (아이콘 / 색)
+    - **고급** (collapsible, 기본 닫힘): `Fallback 값` + `변화량` + `변화 방향`
+  - `addItem` default = `{ label: "항목 N", dataSource: { aggregation: "count" } }`
+  - 색상 프리셋 자동 생성도 동일 DB-first
+- `frontend/lib/registry/components/stats/index.ts` — `DEFAULT_CONFIG.items` 도 DB-first placeholder 로 변경. `value` 박지 않음. 각 항목이 `dataSource: { aggregation: "count" }` 로 시작. 주석 wording 도 "DB 바인딩" 으로 정리
+- `frontend/lib/registry/components/stats/StatsComponent.tsx` — runtime default items 도 동일 DB-first. fallback 의미 유지 (G.4.1 에서 한 displayValue 정리 그대로)
+
+Backend / 다른 컴포넌트 변경 없음.
+Documentation: 본 섹션 추가.
+
+#### DB-first stats 의미 (정리)
+
+**모드 개념 제거**. stats 는 항상 KPI 항목으로 동작:
+- 모든 새 항목은 `dataSource: { aggregation: "count" }` 로 시작
+- 사용자가 collapsed row 에서 테이블을 inline 으로 골라 즉시 집계 활성화
+- 디자인 모드 / 테이블 미설정 / fetch 미완 시 → 카드에 `—` 표시
+- 운영 모드 fetch 성공 → 실 DB 집계 값 표시
+- 옛 row (`dataSource` 없이 `value` 만 가진 legacy data) 도 backward-compat 으로 그대로 값 표시. 새 row 는 그 길로 생성 안 됨
+- `value` 는 "Fallback 값" 으로 의미가 좁아짐 — 고급 섹션 안에서만 입력 가능. 디자인 모드 미리보기 / API 실패 안전망 용
+- `delta` 도 고급 안에서만 입력. 비우면 카드에 안 그려짐. 자동 계산은 미구현 — 별도 phase
+
+**collapsed KPI row 한 줄 메타**:
+
+```
+[#1]  [●]  [라벨...]      [테이블 ▼]   [건수 ▼]   [⌽3]   [▾]   [🗑]
+            ↑                                       ↑
+            라벨 input                               필터 3개 뱃지 (있을 때 primary)
+```
+
+#### 인사 관리 KPI 4개 설정 예시 (DB-first 그대로)
+
+새 stats 컴포넌트 drop 후, ④ KPI 항목의 첫 row 가 이미 DB placeholder. 라벨만 바꾸고 collapsed inline 으로 테이블 / 집계 선택:
+
+| 카드 | 테이블 (collapsed inline) | 집계 (collapsed inline) | 컬럼 | 필터 (expanded) |
+|---|---|---|---|---|
+| 전체 사원 | `user_info` | 건수 | — | 없음 |
+| 재직 중 | `user_info` | 건수 | — | `status = "재직"` |
+| 휴직 중 | `user_info` | 건수 | — | `status = "휴직"` |
+| 겸직 현황 | `user_dept_role` | 고유 | `user_id` | 없음 |
+
+설정 흐름:
+1. `stats` drop → ④ 의 첫 row 라벨 "전체 사원" 입력 → row 의 테이블 셀렉터에서 `user_info`. 집계는 이미 `건수`. 끝
+2. `[+ 추가]` 로 row 추가 → 라벨 "재직 중" → 테이블 `user_info` → 펼침 → 필터 `+ 추가` → `column="status", op="=", value_type=고정값, value="재직"`
+3. "휴직 중" 동일, `value="휴직"`
+4. "겸직 현황" → 라벨 → 테이블 `user_dept_role` → 집계 `고유` 선택 → row 펼침에 자동으로 "컬럼" CPRow 노출 → `user_id` 입력
+5. 모든 카드에 정적 값 / 변화량 강제 노출 0건. 디자인 모드 표시 = `—`, 운영 모드 = 실 DB 값
+
+다른 도메인 (영업 / 재고 / 고객) 동일 패턴 — 도메인 hardcode 0건:
+- `총 매출` = `orders` / 합계 / `amount` / filter `status="완료"`
+- `평균 납기` = `purchase` / 평균 / `lead_time`
+- `고객 수` = `customers` / 고유 / `customer_id`
+
+#### Verification
+
+| 항목 | 결과 |
+|---|---|
+| `git diff --check` | PASS |
+| `git diff --cached --check` | PASS |
+| `rg "value: 0\|value ?? 0\|정적 값\|[정적]\|ModeBadge"` (stats 폴더) | 0 matches |
+| `rg "v2-input\|v2-select\|V2InputRenderer\|V2SelectRenderer"` | 0 matches |
+| `rg "EntityPicker\|entity-picker\|EntitySearchModal"` | 0 matches |
+| `rg 'componentType: "v2-file-upload"\|...'` | 0 matches |
+| `tsc --noEmit` G.4.2 변경 파일 한정 (`stats/`, `_shared/`) | 0 new errors |
+| `tsc --noEmit` 전체 | 3376 (G.4.1 종료와 동일 — G.4.2 신규 0건) |
+
+#### Remaining limitations
+
+1. **컬럼 자동완성 dropdown** — stats 의 `컬럼` 입력은 여전히 free text. chart / cardList / groupedTable 도 동일, `tableManagementApi.getColumnList` 일괄 도입은 별도 phase
+2. **`distinctCount` 컬럼 미설정 inline 검증** — 현재 백엔드 400 으로만 알려줌. config panel inline error highlight 는 후속
+3. **delta 자동 계산** — `delta` 는 여전히 수동 입력 ("고급" 섹션 안)
+4. **legacy 항목 backward compat** — `dataSource` 없이 `value` 만 가진 옛 row 는 그대로 값 표시되지만, 새 컴포넌트에서는 더 이상 생성 경로 없음. 옛 데이터 마이그레이션은 별도 작업 (필요 시)
+5. **i18n** — `"테이블"`, `"건수"`, `"고급"` 등 한국어 fixed. 다국어는 별도